@charset "utf-8";

.layer_history {position:fixed; top:135px; /* right:101px;*/ right:-236px; z-index:998; width:335px; height:529px; overflow-y:auto; padding:24px 15px 17px 17px; box-sizing:border-box; border:1px solid #d7d7d7; background:#fff;}
.layer_history .tit {padding:0 7px; margin:0 0 12px; font-size:18px;}
.layer_history ul {width:100%; overflow:hidden;}
.layer_history li {float:left; width:128px; margin:0 7px 21px; position:relative;}
.layer_history li a {display:block; width:100%; margin:0; font-size:12px;}
.layer_history li span {display:block;}
.layer_history li i {display:block; width:14px; height:14px; background-size:12px; background-repeat:no-repeat; position:absolute; top:10px; left:10px;}
.layer_history .thumb {width:80px; height:80px; padding:24px 23px 22px; margin:0 0 10px; border:1px solid #ebebeb;}
.layer_history .thumb img {width:100%;}

.event_layer {display:none; position:fixed; top:4%; left:0; right:0; bottom:4%; width:87.5%; max-width:800px; margin:0 auto; z-index:998; border-top:4px solid #4227cd;}
.event_layer_bg {display:none; position:fixed; top:0; left:0; z-index:997; width:100%; height:100%; background:rgba(0,0,0,.4);}
.event_layer .event_box {position:relative; background:#fff;}
.event_layer .event_box h2 {width:100%; height:60px; line-height:60px; font-size:20px; font-weight:400; text-align:center; border-bottom:1px solid #d7d7d7; position:relative;}
.event_layer .event_box h2 button {position:absolute; right:10px; top:10px; font-size:0; width:32px; height:32px;}
.event_layer .event_box h2 button:before,
.event_layer .event_box h2 button:after{content:'';position:absolute; top:0; left:15px; height:33px; width:2px; background:#000;}
.event_layer .event_box h2 button:before{transform:rotate(45deg);}
.event_layer .event_box h2 button:after{transform:rotate(-45deg);}
.event_layer .event_cnt {width:100%; height:640px; box-sizing:border-box; overflow-y:auto;}
.event_layer .event_cnt img {max-width:100%;}

#card_info {display:none; position:fixed; left:0; right:0; top:0; bottom:0; z-index:99;}
#card_info .cont {position:absolute; left:50%; top:50%; width:800px; transform:translate(-50%,-50%); overflow:hidden; border-top:4px solid #4227cd; background:#fff; z-index:1; border-radius:5px;}
#card_info .cont h4 {background:#fff; color:#000; font-weight:400; font-size:20px; height:60px; line-height:60px; text-align:center; border-bottom:1px solid #d7d7d7; position:relative;}
#card_info .cont h4 button {position:absolute; right:10px; top:10px; font-size:0; width:32px; height:32px;}
#card_info .cont h4 button:before, #card_info .cont h4 button:after{content:'';position:absolute; top:0; left:15px; height:33px; width:2px; background:#000;}
#card_info .cont h4 button:before{transform:rotate(45deg);}
#card_info .cont h4 button:after{transform:rotate(-45deg);}
#card_info .cont .inner{overflow:hidden; overflow-x:scroll; font-size:0;}
#card_info .back{background:#000; opacity:.5; position:absolute; left:0; top:0; bottom:0; right:0;}

#layer_phone_db {position:fixed; left:0; right:0; top:0; bottom:0; z-index:9999; display:none;}
.phone_db_wrap {position:absolute; width:500px; height:500px; background:#fff; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2;}
.phone_db_wrap h3 {}
.phoen_db_background {position:absolute; background:#000; left:0; right:0; top:0; bottom:0; z-index:1; opacity:0.7;}

#reservation_wrap {position:fixed; left:0; right:0; top:0; bottom:0; z-index:9999; display:none;}
.layerform_info {width:800px; border-top:4px solid #4227cc; position:absolute; z-index:2; height:auto; max-height:840px; left:50%; top:100px; transform:translate(-50%,0); border-radius:5px; overflow:hidden;}
.layerform_info .box {box-sizing:border-box;}
.layerform_info .title {background:#4227CD;border:1px solid #fff;}
.layerform_info .title h3 {height:40px; line-height:60px; padding:0 20px; text-align:center; font-size:20px; color:#fff;}
.layerform_info .title p {font-size:16px;}
.layerform_info .info {padding:16px 32px 32px; background:#fff; font-size:18px;}
.layerform_info .info .inp_box {width:100%; overflow:hidden;}
.layerform_info .info .inp_box div {position:relative; padding:4px 0;}
.layerform_info .info .inp_box label, .layerform_info .info .inp_box p.label { display:inline-block; width:30%; color:#000;}
.layerform_info .info .inp_box label.radio_label {width:auto; margin:.5em 1em .5em 0;}
.layerform_info .info .inp_box input {height:24px;padding:8px;border:1px solid #797979;vertical-align:middle;font-weight:300;}
.layerform_info .info .inp_box input[type="text"] {width:55%}

.layerform_info .info .inp_box div.textarea label {display:block; padding:10px 0px 15px;}
.layerform_info .info .inp_box div.textarea textarea{width:100%; box-sizing:border-box; border:1px solid #797979; height:200px; padding:10px;}

.layerform_info .info .inp_box select {width:50%; height:46px; font-size:1em; padding:8px; border:1px solid #797979;}
.layerform_info .info .agree {margin:16px 0;}
.layerform_info .info .agree .agree_cont {height:120px; overflow:auto; padding:.75em; margin:0 0 1em; line-height:1.4; font-size:16px; border:1px solid #797979;}
.layerform_info .info .agree label {margin:0 8px 0 4px;}
.layerform_info .info .agree a {display:inline-block; color:#4227CD; font-size:16px; text-decoration:underline;}
.layerform_info .info .agree p {margin-top:16px; font-size:16px; line-height:1.4;}
.layerform_info .info .submit_zone {text-align:center;}
.layerform_info .info .submit_zone button {padding:20px 64px; background:#000; color:#fff; border-radius:4px;}
.layerform_info .info .submit_zone button:hover {color:#fff; background:#4227CD; transition:all .3s;}
.layerform_back {position:absolute; background:#000; left:0; right:0; top:0; bottom:0; z-index:1; opacity:0.7;}
.layerform_from_btn {position:absolute; right:0; top:0;}
.layerform_from_btn button{position:relative; right:10px; top:14px; font-size:0; cursor:pointer; width:32px; height:32px;}
.layerform_from_btn button:before,
.layerform_from_btn button:after{content:'';position:absolute; top:0; left:15px; height:33px; width:2px; background:#000;}
.layerform_from_btn button:before{transform:rotate(45deg);}
.layerform_from_btn button:after{transform:rotate(-45deg);}