@charset "UTF-8";

/* ---------------------------------
상품상세 CSS
--------------------------------- */
/* 공통 */
.sub_detail_wrap.type2{padding-top:50px;}
.sub_detail_wrap .section_top_title{background:none; border:none !important; transition-duration: 0s;}
.sub_detail_wrap .section_top_title h1{overflow:hidden; padding:15px 80px 15px 50px; text-overflow: ellipsis; white-space:nowrap; display:none;}
.sub_detail_wrap .section_top_title button{position:absolute; top:10px;}
.sub_detail_wrap .section_top_title button span{display:block; width:30px; height:30px; background-image:url(../images/icon_common_spr.png); background-size:100px auto; text-indent:-9999px;}
.sub_detail_wrap .section_top_title .btn_share{right:45px;}
.sub_detail_wrap .section_top_title .btn_share span{background-position:-30px -40px;}
.sub_detail_wrap .section_top_title .btn_wish{right:10px;}
.sub_detail_wrap .section_top_title .btn_wish span{background-position:0 -100px;}
.sub_detail_wrap .section_top_title .btn_wish.active span{background-position:-30px -100px;}
.sub_detail_wrap .section_top_title .btn_back span{background-image:url(../images/icon_common_spr.png); background-size:100px auto; background-position:0 -40px;}
#wrap.fixed .sub_detail_wrap .section_top_title{background:#fff; border-bottom:1px solid #e3e3e3;}
#wrap.fixed .sub_detail_wrap .section_top_title h1{display:block;}
#wrap.fixed .sub_detail_wrap .section_top_title .btn_share span{background-position:-30px -70px;}
#wrap.fixed .sub_detail_wrap .section_top_title .btn_wish span{background-position:-60px -100px;}
#wrap.fixed .sub_detail_wrap .section_top_title .btn_wish.active span{background-position:-30px -100px;}
#wrap.fixed .sub_detail_wrap .section_top_title .btn_back span{background-position:0 -70px;}

.sub_detail_wrap h3{margin-bottom:15px; font-size:17px; font-weight:500; color:#232323;}
.sub_detail_wrap h4{margin:25px 0 5px; font-size:16px; font-weight:500; color:#383838;}

/* 공유하기 */
.sns_share_wrap{position:fixed; left:0; top:0; width:100%; height:100%; z-index:100; display:none;}
.sns_share_wrap:before{content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, .7);}
.sns_share_wrap .inner{position:fixed; left:0; bottom:0; width:100%; background-color:#fff; padding:30px 20px 40px; text-align:center;}
.sns_share_wrap .inner > p{padding-top:20px}
.sns_share_wrap .tit{position:relative; font-size:22px}
.sns_share_wrap .btn_close{display:block; position:absolute; right:20px; top:20px; width:30px; height:30px; background:url(../images/icon_btn_close.png) no-repeat center; background-size:18px; text-indent:-9999px;}
.sns_share_wrap .list{width:270px; padding-top:20px; margin:0 auto; overflow:hidden}
.sns_share_wrap .list li{display:inline-block; width:40px; border-radius:100%; font-size:0; margin:0 2px;}
.sns_share_wrap .list li a{display:block; height:40px; text-indent:-9999px;}
.sns_share_wrap .list li.s_face{background:url(../images/icon_sns_fb.png) no-repeat 50% 50% #0b94cc; background-size:9px}
.sns_share_wrap .list li.s_twt{background:url(../images/icon_sns_twt.png) no-repeat 50% 50% #5cc8e8; background-size:16px}
.sns_share_wrap .list li.s_kakaostory{background:url(../images/icon_sns_kakaostory.png) no-repeat 50% 50% #fcc800; background-size:9px}
.sns_share_wrap .list li.s_nblog{background:url(../images/icon_sns_nblog.png) no-repeat 50% 50% #21c531; background-size:13px}
.sns_share_wrap .list li.s_kakaotalk{background:url(../images/icon_sns_kakaotalk.png) no-repeat 50% 50% #402116; background-size:24px}
.sns_share_wrap .list li.s_sms{background:url(../images/icon_sns_sms.png) no-repeat 50% 50% #c5215b; background-size:24px}

/* 슬라이드 */
.hotel_slide_wrap{position:relative;}
.hotel_slide_wrap:before{content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:60px; background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);}
.hotel_slide_wrap li{overflow:hidden; height:210px;}
.hotel_slide_wrap li img{height:100%;}
.hotel_slide_wrap .swiper-pagination-bullet{background:#c9c9c9; opacity:1;}
.hotel_slide_wrap .swiper-pagination-bullet-active{background:#1b1b1b;}

/* 상단 호텔정보 */
.hotel_detail_info{padding:20px;}
.hotel_detail_info .h_tit h2{font-size:18px; font-weight:700; color:#232323; line-height:22px;}
.hotel_detail_info .h_tit span{display:block; margin-top:5px; color:#a0a6ab; line-height:16px;}
.hotel_detail_info .grade{display:block; margin-bottom:5px;}
.hotel_detail_info .hotel_score{margin-top:15px; font-size:14px; color:#474e51;}
.hotel_detail_info .hotel_score strong{font-weight:700; color:#000;}
.hotel_detail_info .grade_box{display:inline-block; margin-top:15px; padding:0 10px; background:#ecf4fa; border:1px solid #cfe1ef; border-radius:5px; font-size:15px; color:#474e51; line-height:40px; text-align:center;}
.hotel_detail_info .grade_box strong{font-size:22px; font-weight:700; line-height:40px;}
.hotel_detail_info .address{margin-top:15px; font-size:13px; color:#a4a4a4; line-height:18px;}
.hotel_detail_info .address p{margin-bottom:8px; font-weight:700; color:#474e51;}
.hotel_detail_info .address p:before{content:''; display:inline-block; width:14px; height:11px; background:url(../images/icon_spr.png) no-repeat 0 -80px; background-size:17px auto;}

/* 할인혜택 */
.benefit_box{position:relative; margin:-4px;}
.benefit_box:after{content:''; display:block; clear:both;}
.benefit_box div{float:left; width:50%; padding:4px; text-align:center;}
.benefit_box div a{position:relative; display:block; height:60px; padding:8px 0 5px; border:5px solid #333; letter-spacing:-0.05em;}
.benefit_box div a:before, .benefit_box div a:after{content:''; position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#333;}
.benefit_box div a:before{left:-4px;}
.benefit_box div a:after{right:-4px;}
.benefit_box div strong{display:block; margin-top:3px; font-size:16px; font-weight:700;}
.benefit_box div strong:after{content:''; position:absolute; right:5px; top:5px; width:10px; height:10px; background:url(../images/icon_spr.png) no-repeat 0 0; background-size:17px auto;}
.benefit_box .dc_type1 a{border-color:#0066ff; color:#0066ff;}
.benefit_box .dc_type1 a:before, .benefit_box .dc_type1 a:after{background-color:#0066ff;}
.benefit_box .dc_type1 strong{color:#0066ff;}
.benefit_box .dc_type1 strong:after{background-position:0 -100px;}
.benefit_box .dc_type2 a{border-color:#8a3bcc; color:#8a3bcc;}
.benefit_box .dc_type2 a:before, .benefit_box .dc_type2 a:after{background-color:#8a3bcc;}
.benefit_box .dc_type2 strong{color:#8a3bcc;}
.benefit_box .dc_type2 strong:after{background-position:0 -120px;}
.benefit_box .dc_coupon a{border-color:#009c51; color:#009c51;}
.benefit_box .dc_coupon a:before, .benefit_box .dc_coupon a:after{background-color:#009c51;}
.benefit_box .dc_coupon strong{color:#009c51;}
.benefit_box .dc_coupon strong:after{background-position:0 -140px;}

/* 항공할인 레이어 */
.benefit_box .layer_benefit_info{float:none; width:auto; padding:10px; text-align:left;}
.layer_benefit_info{position:absolute; left:4px; right:4px; top:70px; background:#fff; border:1px solid #dcdcdc; display:none; z-index:1;}
.layer_benefit_info p{padding-right:30px; font-size:13px; font-weight:500; line-height:18px; word-break:keep-all;}
.layer_benefit_info .btn_close{position:absolute; right:8px; top:8px; width:20px; height:20px; background:url(../images/icon_btn_close.png) no-repeat center; background-size:12px; text-indent:-9999px;}

/* 객실선택 */
.room_type_box{padding-bottom:10px; font-size:0;}
.room_type_box a{display:inline-block; margin:0 5px 5px 0; padding:0 8px; background:#ecf4fa; border-radius:3px; font-size:13px; color:#4a5863; line-height:25px; letter-spacing:-0.02em;}

/* .room_type_list > ul{overflow:hidden; height:1095px;} */
.room_type_list{position:relative; min-height:300px;}
.room_type_list > ul > li{position:relative; padding:15px 0; border-top:1px solid #eee;}
.room_type_list .tag{display:inline-block; margin-bottom:10px;}
.room_type_list .tag em{display:inline-block; padding:0 10px; background:#ff0090; font-size:15px; color:#fff; line-height:30px; letter-spacing:-0.05em;}
.room_type_list .tag_fn em{background:#068bf2;}
.room_type_list .room_tit{position:relative; min-height:46px; font-size:16px; font-weight:500; color:#1c1d1e; line-height:22px;}
.room_type_list .room_tit .inc{display:block; margin-top:10px; color:#a0a6ab;}
.room_type_list .room_tit .p_room{position:absolute; right:0; bottom:0; font-size:13px; color:#ff0000;}
.room_type_list .info_box{margin-top:15px; padding:8px 10px; border:1px solid #dcdcdc;}
.room_type_list .info_box span{display:block; color:#474e51; line-height:20px;}
.room_type_list .info_box span:before{content:''; display:inline-block; width:10px; height:10px; margin-right:5px; background:url(../images/icon_spr.png) no-repeat 0 -100px; background-size:17px auto;}
.room_type_list .price{margin-top:15px;}
.room_type_list .price .dc{display:block; margin-bottom:5px;}
.room_type_list .price .dc em{display:inline-block; padding:5px; border:1px solid #ff0000; font-size:13px; font-weight:500; color:#ff0000;}
.room_type_list .dc_txt{margin-top:10px; text-align:right;}
.room_type_list .dc_txt span{display:block; color:#858d92; line-height:20px;}
.room_type_list .dc_txt strong{margin-left:5px; font-weight:500; color:#858d92; line-height:20px;}
.room_type_list .btns{overflow:hidden; margin-top:20px; text-align:center;}
.room_type_list .btns button{float:left; width:50%; font-size:15px; color:#fff; line-height:40px;}
.room_type_list .btns .btn_cancel{background:#224661;}
.room_type_list .btns .btn_cancel[disabled]{background:#bdbdbd;}
.room_type_list .btns .btn_res{background:#068bf2;}
.room_type_list .btn_type_more{margin-top:10px;}

.room_type_list .loading_layer{position:absolute; left:-20px; right:-20px; top:-92px; bottom:-20px; z-index:1}

/* 특전 레이어 */
.layer_special_price{position:absolute; left:0; top:50px; padding:10px; background:#fbf1e3; border:1px solid #dcdcdc; display:none;}
.layer_special_price  > p{margin-bottom:10px; line-height:18px;}
.layer_special_price  > p strong{font-weight:700;}
.layer_special_price .txt{font-size:13px; line-height:18px; word-break:keep-all;}
.layer_special_price .btn_close{position:absolute; right:8px; top:8px; width:20px; height:20px; background:url(../images/icon_btn_close.png) no-repeat center; background-size:12px; text-indent:-9999px;}

/* 취소규정 레이어 */
.layer_cancel_info{position:absolute; left:0; bottom:60px; padding:10px; background:#fff; border:1px solid #dcdcdc; display:none;}
.layer_cancel_info strong{font-weight:700;}
.layer_cancel_info ul{margin-top:10px;}
.layer_cancel_info li{padding-left:10px; font-size:13px; line-height:18px; text-indent:-8px; word-break:keep-all;}
.layer_cancel_info li span{font-size:13px; font-weight:500; line-height:18px;}
.layer_cancel_info .btn_close{position:absolute; right:8px; top:8px; width:20px; height:20px; background:url(../images/icon_btn_close.png) no-repeat center; background-size:12px; text-indent:-9999px;}

/* 호텔시설 */
.hotel_info_box{overflow:hidden; height:350px;}
.hotel_info_box.active{height:auto;}
.hotel_info_box h4:nth-of-type(1){margin-top:0;}
.hotel_info_box dl{overflow:hidden; padding:8px 0; border-bottom:1px solid #e4e7ea;}
.hotel_info_box dt{float:left; width:25%; color:#1b1b1b; line-height:20px;}
.hotel_info_box dd{float:left; width:75%; color:#505050; line-height:20px;}
.hotel_info_box .list{overflow:hidden;}
.hotel_info_box .list li{float:left; width:100%; padding:2px 0; color:#505050; line-height:20px;}
.hotel_info_box .list li:before{content:'·'; display:inline-block; }
.hotel_info_box .list.col2 li{width:50%;}
.hotel_info_box .txt{color:#505050; line-height:20px;}
.hotel_info_box .btn_hotel_map{display:block; margin-top:10px; background:url(../images/bg_btn_map.jpg) no-repeat 0 0; background-size:cover; font-size:13px; font-weight:500; color:#3b3a3a; line-height:32px; text-align:center;}
.hotel_info_box .btn_hotel_map:before{content:''; display:inline-block; width:12px; height:12px; margin:10px 3px 0 0; background:url(../images/icon_spr.png) no-repeat 0 -160px; background-size:17px auto; vertical-align:top;}
.hotel_info_box .txt_notice{margin-top:15px; padding:10px; background:#fefcf0; border:1px solid #dcbc9b;}
.hotel_info_box .txt_notice p{font-size:13px; color:#cf8823; line-height:18px; word-break:keep-all;}

.btn_more_detail{width:100%; margin-top:15px; background:#e9e9e9; color:#1f2c36; line-height:30px;}
.btn_more_detail:after{content:''; display:inline-block; width:10px; height:10px; margin:14px 0 0 5px; background:url(../images/icon_spr.png) no-repeat 0 -190px; background-size:17px auto; vertical-align:top;}
.btn_more_detail.active:after{background-position:0 -180px;}

/* 지도보기 레이어 */
.layer_map_wrap{position:absolute; left:20px; bottom:20%; right:20px; padding:10px; background:#fff; border:1px solid #dcdcdc; display:none;}
.layer_map_wrap .map_area{min-height:50px; margin-top:30px; background:#eee;}
.layer_map_wrap .btn_close{position:absolute; right:8px; top:8px; width:20px; height:20px; background:url(../images/icon_btn_close.png) no-repeat center; background-size:12px; text-indent:-9999px;}

/* 호텔리뷰 */
.hotel_review_box .review_txt{margin-bottom:10px; padding-left:10px; font-size:13px; color:#909090; line-height:16px; text-indent:-10px;}
.hotel_review_box .grade_total{border:1px solid #dedede; border-radius:5px; text-align:center;}
.hotel_review_box .grade_total .txt{position:relative; top:-5px; left:-20px; font-size:13px;}
.hotel_review_box .grade_total span{font-size:15px; color:#909090; line-height:68px;}
.hotel_review_box .grade_total strong{margin-right:5px; font-size:30px; font-weight:700; color:#474e51; line-height:68px;}
.hotel_review_box .grade_detail{margin:10px 0 15px; font-size:0;}
.hotel_review_box .grade_detail dt{display:inline-block; width:20%; font-size:13px; color:#505050; line-height:20px;}
.hotel_review_box .grade_detail dd{position:relative; display:inline-block; width:80%; padding-right:40px; line-height:20px;}
.hotel_review_box .grade_detail .graph{display:block; position:relative; height:5px; background:#e9e9e9; border-radius:5px;}
.hotel_review_box .grade_detail .graph em{position:absolute; left:0; top:0; height:5px; background:#068bf2; border-radius:5px;}
.hotel_review_box .grade_detail .num{position:absolute; right:0; top:50%; width:30px; margin-top:-7px; font-size:14px; font-weight:500; color:#068bf2;}

.btn_more_review{display:block; margin-top:10px; border:1px solid #d4d4d4; font-weight:500; color:#181818; line-height:34px; text-align:center;}