/** * 각 국가 페이지 서브 메인 * TH/submain.css */ @charset "utf-8"; /** * 전체 배너 슬라이더 */ #main_whole_slider {width: 100%;overflow:hidden;} #main_whole_slider_container {position: relative;max-width: 1140px;} #main_whole_slider_container .swiper-slide {overflow: hidden;text-align: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;background-position: 50% 0%;background-size: cover;background-color:#f1f1f1;border-right:1px solid #ccc;z-index:20;max-height:700px;} #main_whole_slider_container .swiper-slide .slide_img{width:100%} #main_whole_slider_container .swiper-slide .slide_contents_wrap{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center} #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_contents{display:inline-block;vertical-align:middle} #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_blank{display:inline-block;width:0;height:100%;vertical-align:middle} #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_contents img{margin:0 auto} #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_contents h1{margin:15px 0px;color:#fff;font-size:4.2em;font-weight:900;text-shadow:0px 0px 3px #000;} #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_contents h3{margin:15px 0px;color:#fff;font-size:2em;font-weight:400;text-shadow:0px 0px 3px #000;} #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_contents h6{margin:15px 0px;color:#dcdcdc;font-size:1em;font-weight:400;text-shadow: 1px 1px 1px #696969;} .body_xs #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_contents h1{margin:10px 0px;color:#fff;font-size:2.2em;font-weight:900;text-shadow:0px 0px 3px #000;} .body_xs #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_contents h3{margin:10px 0px;color:#fff;font-size:1.4em;font-weight:400;text-shadow:0px 0px 3px #000;} .body_xs #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_contents h6{margin:10px 0px;color:#dcdcdc;font-size:1em;font-weight:400;text-shadow: 1px 1px 1px #696969;} .body_xs #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_text_imgtext button{display:none} .banner_btn { padding: 6px 35px; background: #367ed8; color: #fff; font-size: 14px; } .initial {font-weight: initial;} #main_whole_slider_container .swiper-slide-prev, #main_whole_slider_container .swiper-slide-next {opacity: 0.5} .swiper-button-next, .swiper-button-prev {display:none; position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 50px; text-align:center; z-index: 10; cursor: pointer; color:#fff; background:none; /*background-color: rgba(0,0,0,.4);*/ } .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: 10px;left: auto;} .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 10px;right: auto;} .swiper-container:hover .swiper-button-next, .swiper-container:hover .swiper-button-prev{display:block;} #main_whole_slider .swiper-button-navigation{position:absolute;left:0px;bottom:0px;z-index:21;width:100%;height:80px;text-align: center;} #main_whole_slider .swiper-button-navigation .slide_go{display:inline-block;border:none;padding: 4px 10px;background-color: #252525;color: #ccc;height: 64px;background: rgba(0, 0, 0, 0.7);-webkit-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;-webkit-transform: translate(0,70%);-ms-transform: translate(0,70%);transform: translate(0,70%);-webkit-transition: all 0.7s cubic-bezier(0.22,0.81,0.01,0.99);-ms-transition: all 0.7s cubic-bezier(0.22,0.81,0.01,0.99);transition: all 1s cubic-bezier(0.22,0.81,0.01,0.99);} #main_whole_slider .swiper-button-navigation .slide_go .t1{height:30px;color:#fff;text-align:left;font-size:14px;font-weight:400;} #main_whole_slider .swiper-button-navigation .slide_go .t2{height:50px;color:#fff;text-align:left;font-size:12px;font-weight:100;} #main_whole_slider .swiper-button-navigation .slide_go_active {height: 80px;background: rgba(0, 0, 0, 0.3);-webkit-transform: translate(0,0);-ms-transform: translate(0,0);transform: translate(0,0);} .body_xs #main_whole_slider .swiper-button-navigation{display:none} .body_xs .swiper-button-next, .body_xs .swiper-button-prev{display:block;} .body_xs .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right:-10px} .body_xs .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left:-10px} @media only screen and (max-width: 768px) { .body_xs #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_contents h1 { font-size: 1.5em;} .body_xs #main_whole_slider_container .swiper-slide .slide_contents_wrap .slide_contents h3 {display:none; } .banner_btn { padding: 6px 10px; font-size: 13px;} } /* ///////////////////////////////////// 호텔 리스트 //////////////////////////////////// */ .luxuryTit01 { font-size:16px; color:#cba45f; } .familyTit01 { font-size:16px; color:#ed7d3a; } .valueTit01 { font-size:16px; color:#3fb3f8; } #hotelListWrap ul {list-style:none; padding:0; } #hotelListWrap .hotellist li a { display:block; position:relative; transition: all 0.15s cubic-bezier(0.000, 0.000, 0.580, 1.000); } #hotelListWrap .hotellist li a:hover { -webkit-box-shadow: 5px 3px 21px -4px rgba(0,0,0,0.2); -moz-box-shadow: 5px 3px 21px -4px rgba(0,0,0,0.2); box-shadow: 5px 3px 21px -4px rgba(0,0,0,0.2); } #hotelListWrap .luxuryWrap { background:#fefbf6; } #hotelListWrap .familyWrap { background:#f0f0f0; } #hotelListWrap .valueWrap { background:#f3f9fd; } #hotelListWrap .luxuryWrap .hotellist li a { border: 1px solid #ddc699;} #hotelListWrap .familyWrap .hotellist li a { border: 1px solid #f8a573;} #hotelListWrap .valueWrap .hotellist li a { border: 1px solid #9fc5db;} #hotelListWrap .hotellist li a .hotelBoxWrap{ position: absolute; bottom: 0; width: 100%; height: 190px; } .luxuryWrap .hotellist li a .hotelBoxWrap { background: -webkit-linear-gradient(top, rgba(255,243,225,0.5) 1%,rgba(255,243,225,0.8) 20%,rgba(255,243,225,1) 43%,rgba(255,243,225,1) 100%); } .familyWrap .hotellist li a .hotelBoxWrap { background: -webkit-linear-gradient(top, rgba(255,235,224,0.5) 0%,rgba(255,235,224,0.5) 1%,rgba(255,235,224,0.8) 20%,rgba(255,235,224,1) 43%,rgba(255,235,224,1) 100%);} .valueWrap .hotellist li a .hotelBoxWrap { background: -webkit-linear-gradient(top, rgba(236,247,254,0.5) 0%,rgba(236,247,254,0.5) 1%,rgba(236,247,254,0.8) 20%,rgba(236,247,254,1) 43%,rgba(236,247,254,1) 100%);} #hotelListWrap .hotellist li a .hotelBox { position: absolute; bottom: 15px; width: 100%; padding: 0 30px; } .hotelboxText01 { font-family: 'Lora', serif; font-size: 20px; line-height: 22px; color:#242424 } .hotelboxText02 { font-size: 13px; color: #888; margin: 0; letter-spacing: -0.02em; } .bar { width: 100%; height: 1px; background: #cba45f; margin: 15px 0px; } .valueWrap .bar { background: #aacde0; } .luxurytag { font-size:13px; color:#a08049; } .familytag { font-size:13px; color:#d3763e; } .valuetag { font-size:13px; color:#3793ca; } .hotellabel { position: absolute; top: 0; left: 0; font-family: 'Lora', serif; font-size: 13px; font-weight: 300; padding: 5px 10px; color: #fff; } .luxuryWrap .hotellabel { background: #cba45f; } .familyWrap .hotellabel { background: #fca571; } .valueWrap .hotellabel { background: #3fb3f8; } @media only screen and (max-width: 992px) { #hotelListWrap .hotellist li a .hotelBox { padding: 0 15px;} .hotelboxText01 { font-size: 18px;} .bar { margin: 5px 0px; } .luxurytag, .familytag, .valuetag {margin:0; } } @media only screen and (max-width: 768px) { } @media only screen and (max-width: 650px) { #hotelListWrap .hotellist li a .hotelBoxWrap { height: 150px;} #hotelListWrap .col-xs-4 {width:100%; margin-bottom: 15px;} } /* ///////////////////////////////////// singaporeTour //////////////////////////////////// */ .hotelTit02 br {display:none;} #singaporeTour .hotelTit02 {font-weight:400;} #singaporeTour ul {list-style:none; padding:0; overflow: hidden; text-align:left; } #singaporeTour > .center > img {width:auto; } #singaporeTour .hotelTit01 {font-size:14px; color:#f35151; } .redbar { width: 35px; height: 1px; background: #ed2939; margin: 20px auto; } .red { color:#ef1919; } #singaporeTour ul li { margin-bottom:15px; } #singaporeTour ul li a { display: block; position: relative; width: 100%; overflow:hidden; } #singaporeTour ul li a:before { content: ""; display: block; padding-top: 130%; /* 1:1 비율 */ } #singaporeTour ul li a img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; } #singaporeTour ul li a:hover .hover{opacity: 1;} .hover { position: absolute; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); opacity: 0; -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); } .hover i { color: #fff; font-size: 30px; position: absolute; bottom: 0; right: 0; padding: 25px; } #singaporeTour .tourTextWrap { position: absolute; top: 0; width: 100%; padding: 32px 25px; color: #fff; } .tourtext01 { font-family: 'Lora', serif; font-size: 20px; line-height: 22px; margin-bottom: 15px; } .tourtext02 { font-size: 13px; font-weight: 300; letter-spacing: -0.02em; } #singaporeTour .singaporeourBtn { background: #ef1919; font-size: 16px; font-weight: 300; padding: 6px 20px; margin-top:30px } #singaporeTour .singaporeourBtn:hover { -webkit-box-shadow: 5px 6px 24px 0px rgba(176,176,176,1); -moz-box-shadow: 5px 6px 24px 0px rgba(176,176,176,1); box-shadow: 5px 6px 24px 0px rgba(176,176,176,1); } #singaporeTour .singaporeourBtn i { font-size:16px; margin-left: 5px;} @media only screen and (max-width: 992px) { #singaporeTour .tourTextWrap { padding: 20px 15px;} .tourtext01 {font-size:18px; } #singaporeTour .singaporeourBtn { margin-top:0;} } @media only screen and (max-width: 768px) { #singaporeTour .singaporeourBtn { font-size: 13px; padding: 6px 10px; } #singaporeTour .singaporeourBtn i { font-size: 13px;} } @media only screen and (max-width: 450px) { .tourtext01 br {display:none;} .hotelTit02 br {display:block;} }