@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */

body *{transition:all 0.3s;}

.ani{transition:all 1s ease; transform:translate(0,60px);}
.active .ani{opacity:1; transform:translate(0,0);}
.delay-400{transition-delay:400ms !important;}
.delay-500{transition-delay:500ms !important;}
.delay-600{transition-delay:600ms !important;}
.delay-700{transition-delay:700ms !important;}
.delay-800{transition-delay:800ms !important;}
.delay-900{transition-delay:900ms !important;}
.delay-1000{transition-delay:1000ms !important;}
.delay-1100{transition-delay:1100ms !important;}

.section{position:relative; width:100%;}
.section h3{font-size:18px;}
.section p{color:#555; font-weight:300; font-size:16px;}
.section i{font-size:14px;}
.section .inr{width:1400px; margin:auto;}
#section1 .inr, #section2 .inr, #section3 .inr, #section4 .inr,#section5 .inr{position:relative;  height:100%;}

.txt_box{position:absolute;}
.txt_box h2{margin-bottom:40px; font-family:'Eulyoo1945-Regular'; font-weight:normal; font-size:30px;}

.txt_box p+p{margin-top:20px;}

.tit_sec{position:absolute; font-size:60px; font-weight:normal; font-family:'Eulyoo1945-Regular'; transform:rotate(90deg) !important; transform-origin:left; color:#333;}

/* section0 */
.visual_slider{width:100%; height:100%;}
.visual_slider li{width:100% !important; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; z-index:1 !important;}
.bx-wrapper, .bx-viewport{height:100% !important;}
.bx-wrapper{border:none !important; margin-bottom:0 !important;}
.bx-controls-direction{display:none;}
.bx-pager{bottom:40px !important;}
.bx-wrapper .bx-pager.bx-default-pager a{margin:0 8px !important; width:8px !important; height:8px !important; background:rgba(255, 255, 255, 0.5) !important;}
.bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active{background:#fff !important; box-shadow:0 0 10px #fff;}
#section0 .txt_wrap{position:absolute; padding:100px 0; z-index:2px; left:50%; top:50%; transform:translate(-50%,-50%); width:1400px;}
#section0 .txt_wrap h2{margin-bottom:60px; font-size:42px; color:#fff; font-weight:normal; text-align:center;}
#section0 .search_wrap{padding:50px 0; width:100%; background:rgba(255, 255, 255, 0.8); text-align:center; border-radius:10px;}
@supports(background:rgba(255, 255, 255, 0.8)){
    .search_wrap{backdrop-filter:blur(8px); background:rgba(255, 255, 255, 0.3) !important;}}
#section0 .search_wrap ul{display:inline-block;}
#section0 .search_wrap li{display:inline-block; padding:0 50px; border-right:1px solid #fff; height:57px;}
#section0 .search_wrap li:last-child{border:none;}
#section0 .search_wrap li:nth-child(2){text-align:left !important;}
#section0 .search_wrap li:first-child p{margin-top:14px;}
#section0 .search_wrap li > div{display:inline-block; text-align:center;}
#section0 .search_wrap li .room{margin-right:30px;}
#section0 .search_wrap i{display:block; margin-bottom:8px; color:rgba(255, 255, 255, 0.7);}
#section0 .search_wrap p{font-size:20px; color:#fff;}

.btn_search{margin-top:5px; background:transparent !important;}
.btn_search > span{color:#fff !important; transition:all 0.3s ease 0s;}
.btn_search:hover > span{color:#333 !important; transition:all 0.3s ease 0s;}

.scroll{position:absolute; overflow:hidden; right:50px; bottom:-10px; z-index:5; transform:rotate(90deg); transform-origin:right;}
.scroll p{float:left; margin-right:10px; font-size:12px !important; font-weight:500; color:#fff;}
.scroll span{display:block; float:right; position:relative; margin-top:9px; width:180px; height:2px; background:rgba(255, 255, 255, 0.3);}
.scroll span:before{content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:5px; height:5px; background:#fff; border-radius:50%; animation:move 3s infinite; box-shadow:0 0 8px #fff;}
.scroll span:after{content:''; display:block; position:absolute; top:0; left:0; width:0; height:2px; background:#fff; animation:scroll 3s infinite;}
@keyframes scroll{100%{width:100%;}}
@keyframes move{100%{left:175px;}}

/* section1 */
#section1 .img_box{}
#section1 .img_box1{position:relative; margin-top:20%; height:627px;}
#section1 .img_box1 img{position:absolute; height:100%;}
#section1 .img_box1 .img1{top:50px; left:50px;}
#section1 .img_box1 .gray{filter:grayscale(100%); -webkit-filter:grayscale(100%); opacity:0.4;}
#section1 .img_box1 .mo_img{display:none; position:relative;}
#section1 .img_box2{position:absolute; left:60%; bottom:0; width:500px; height:65%; overflow:hidden;}
#section1 .img_box2 img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:100%;}
#section1 .txt_box{left:60%; top:0; background:#fff;}
#section1 .tit_sec{top:24%; left:46%;}

/* section2 */
.fp-section{background:transparent !important;}
#section2 .txt_box2{margin-left:13.5%; padding-top:250px; z-index:1;}
#section2 .txt_box h2{color:#fff;}
#section2 .tab_btn li a{display:block; cursor:pointer; color:rgba(255, 255, 255, 0.7); font-size:18px; transition:0.3s;}
#section2 .tab_btn li a:hover{color:#e0cd9a;}
#section2 .tab_btn li+li{margin-top:15px;}
#section2 .tab_btn li.tabactive a{color:#e0cd9a; font-weight:600;}
.tab_container{width:100%; height:100%;}
.tab_container #tab1{background:url(../images/img_sec3_01.jpg)no-repeat 50% 50%; background-size:cover;}
.tab_container #tab2{background:url(../images/img_sec3_02.jpg)no-repeat 50% 50%; background-size:cover;}
.tab_container #tab3{background:url(../images/img_sec3_03.jpg)no-repeat 50% 50%; background-size:cover;}
.tab_container #tab4{background:url(../images/img_sec3_04.jpg)no-repeat 50% 50%; background-size:cover;}
.tab_container #tab5{background:url(../images/img_sec3_05.jpg)no-repeat 50% 50%; background-size:cover;}
.tab_container #tab6{background:url(../images/img_sec3_06.jpg)no-repeat 50% 50%; background-size:cover;}
.tab_cont_wrap{position:relative; margin-left:50%; height:100%;}
.tab_cont_wrap .bg{position:absolute; width:500px; height:100%; background:rgba(0, 0, 0, 0.5);}
@supports(background:rgba(0, 0, 0, 0.5)){
    .tab_cont_wrap .bg{backdrop-filter:blur(8px); background:rgba(0, 0, 0, 0.3) !important;}}
.tab_content{height:100%;}
.tab_content .txt_box{position:relative; padding:14% 107px 0; width:500px;}
.tab_content .txt_box h4{margin-bottom:30px; font-size:24px; color:#fff;}
.tab_content .txt_box p{display:inline-block; position:relative; padding-left:36px; color:#fff !important; width:100px;}
.tab_content .txt_box p:before{content:''; display:block; position:absolute; top:0; left:0; width:26px; height:26px;}
.tab_content .txt_box > ul{padding-top:35px; border-top:1px solid rgba(255, 255, 255, 0.5);}
.tab_content .txt_box li+li{margin-top:20px;}
.tab_content .txt_box li:nth-child(1) p:before{background:url(../images/icon_sec3_01.png)no-repeat 50%; background-size:contain;}
.tab_content .txt_box li:nth-child(2) p:before{background:url(../images/icon_sec3_02.png)no-repeat 50%; background-size:contain;}
.tab_content .txt_box li:nth-child(3) p:before{background:url(../images/icon_sec3_03.png)no-repeat 50%; background-size:contain;}
.tab_content .txt_box span{display:inline-block; color:rgba(255, 255, 255, 0.8); font-weight:300;}
.tab_content .txt_box li:nth-child(3) ul{display:inline-block}
.tab_content .txt_box li:nth-child(3) li h6{display:inline-block; width:110px; vertical-align:baseline;}
.tab_content .txt_box li:nth-child(3) li+li{margin-top:10px;}
#section2 .slick_img{margin-left:7%; margin-bottom:120px; padding:130px 0 0; width:93%; box-sizing:content-box;}
/*#section2 .slick_img.slick-slider{position:static;}*/
#section2 .slick_img div{padding-right:20px;}
.slick-slide img{width:100%;}
.slick-arrow{position:absolute; bottom:-45px; z-index:10; width:26px; height:26px; font-size:0; background:transparent; opacity:0.6; transition:0.3s;}
.slick-arrow:hover{opacity:1;}
.slick-next{left:40px; background:url(../images/slick_next.png)no-repeat 50% 50%; background-size:contain;}
.slick-prev{left:0; background:url(../images/slick_prev.png)no-repeat 50% 50%; background-size:contain;}
#section2 .tit_sec{left:27%; bottom:0; color:#fff; transform-origin:right;}

/* section3 */
#section3 .inr{padding:100px 0;}
#section3{background:url(../images/img_sec4.jpg)no-repeat 50% !important; background-size:cover !important;}
#section3 .txt_box{position:relative; top:50%; left:50%; transform:translate(-50%,-50%); width:1000px;}
#section3 .txt_box h2{color:#fff;}
#section3 .txt_box ul{display:flex; justify-content:space-between;}
#section3 .txt_box ul li{padding:40px; width:calc(100% / 3 - 10px); -webkit-width:calc(100% / 3 - 10px); border:1px solid #fff;}
#section3 .txt_box ul li span{display:block; margin:0 auto 25px; width:48px;}
#section3 .txt_box ul li span img{width:100%}
#section3 .txt_box ul li h3 i{display:block; margin-bottom:5px; font-weight:normal; opacity:0.6;}
#section3 .txt_box ul li h3{padding-top:25px; width:100%; color:#fff; border-top:1px solid rgba(255, 255, 255, 0.5); text-align:center;}
#section3 .tit_sec{color:#fff; right:-25%; top:10%; transform-origin:left;}

/* section4 */
#section4{background:url(../images/img_sec5.jpg)no-repeat 50% !important; background-size:cover !important;}
#section4 .inr > .txt_box{position:relative; top:18%;}
#section4 .tit_sec{top:40%; left:20px;}
.gallery_wrap{position:absolute !important; top:50%; transform:translateY(-50%); right:-150px; width:70%; overflow: visible;}
/*.swiper-slide{width:35.2% !important;}*/
.swiper-slide img {display:block; width:100%; height:100%; object-fit:cover;}
#section4 .txt_gallery{position:absolute; padding:100px 50px 0; bottom:-100px; left:-50px; background:#fff; width:600px; height:178px; box-shadow:2px 2px 30px rgba(0,0,0,0.15);}
#section4 .txt_gallery h3{color:#333;}
#section4 .btn_swiper_wrap{position:relative; float:right; margin-top:-36px; width:100px;}
.swiper-button-next,
.swiper-button-prev{margin-top:0 !important; width:26px !important; height:26px !important; opacity:0.5; transition:0.3s;}
.swiper-button-next:hover,
.swiper-button-prev:hover{opacity:1;}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next{left:auto !important; right:40px !important; background:url(../images/slick_prev_b.png)no-repeat 50% 50% !important; background-size:contain !important;}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev{right:0 !important; background:url(../images/slick_next_b.png)no-repeat 50% 50% !important; background-size:contain !important; }

/* section5 */
#section5 .txt_box{position:relative; top:25%; width:50%;}
#section5 .tit_sec{left:45%; top:10%; z-index:2;}
#section5 .wrap_controllers{display:none;}
#section5 .left, #section5 .right{position:absolute; width:50%; bottom:0;}
#section5 .left{left:0;}
#section5 .root_daum_roughmap_landing{width:100% !important;}
#section5 .root_daum_roughmap .wrap_map{height:45vh !important}
#section5 .right{right:0;}
#section5 .contact_info{position:relative; padding:0; height:85vh; background:url(../images/img_sec6_01.jpg)no-repeat 50% !important; background-size:cover !important;}
#section5 .contact_info ul{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:372px;}
  




@media screen and (max-width:1680px){
    .section .inr,
    #section0 .txt_wrap{width:1200px;}  
    
    #section1 .tit_sec{left:52%;} 
    #section2 .tit_sec{left:20%;}
    #section3 .tit_sec{right:-34%;}
}

@media screen and (max-width:1300px){
    .section .inr,
    #section0 .txt_wrap{width:1000px;}
    
    #section0 .search_wrap li{padding:0 30px;}
    
    #section1 .img_box1{height:500px;}
    #section1 .img_box2{width:400px; height:55%;}
    
    .tab_cont_wrap .bg{width:400px;}
    .tab_content .txt_box{padding:14% 50px 0; width:400px;}
    
    #section3 .tit_sec{-46%;}
    
    .gallery_wrap{width:72%}
}

@media screen and (max-width:1024px){
    .section p{font-size:15px;}
    .section h3{font-size:17px;}
    
    .section .inr,
    #section0 .txt_wrap{width:96%;}
    #section1 .inr, #section2 .inr, #section3 .inr, #section4 .inr, #section5 .inr{height:auto; padding:100px 0;}
    
    .tit_sec{display:none}
    .txt_box h2{margin-bottom:20px; font-size:25px;}
    .txt_box p+p{margin-top:15px;}
 
    #section0 .txt_wrap h2{margin-bottom:50px; font-size:30px;}
    #section0 .search_wrap p{font-size:16px;}
    .btn_search > span{font-size:14px;}
    .scroll{display:none;}
    
    #section1 .txt_box{position:static; margin:65px auto 0; width:500px;}
    #section1 .img_box1{margin:auto; width:500px; height:auto;}
    #section1 .img_box1 img{height:auto; width:100%;}
    #section1 .img_box1 .img1,
    #section1 .img_box1 .gray{display:none}
    #section1 .img_box1 .mo_img{display:block;}
    #section1 .img_box2{display:none;}
    
    .tab_cont_wrap{margin-left:0; height:auto;}
    #section2 .txt_box2{padding-top:100px; margin-left:2%; width:96%;}
    #section2 .txt_box2 .tab_btn{width:100%; overflow-x:scroll; white-space:nowrap;}
    #section2 .txt_box2 .tab_btn li{display:inline-block;}
    #section2 .tab_btn li+li{margin:0 0 0 15px;}
    #section2 .tab_btn li a{font-size:15px;}
    .tab_cont_wrap .bg{width:100%; height:calc(100% / 1 - 220px);}
    .tab_content .txt_box{padding:250px 2% 0; width:100%;}
    .tab_content .txt_box h4{margin-bottom:20px; font-size:20px;}
    .tab_content .txt_box > ul{padding-top:20px;}
    #section2 .slick_img{padding:50px 0 100px; margin:0 0 0 4%; width:96%;}
    #section2 .slick_img div{padding-right:10px;}
    .slick-arrow{bottom:60px;}
    .tab_content .txt_box span{font-size:15px;}
    
    
    #section3 .txt_box{top:auto; left:auto; transform:none; width:100%;}
    #section3 .txt_box ul{margin-top:40px;}
    
    #section4{padding:100px 0;}
    #section4 .inr{padding:0 !important;}
    .gallery_wrap{position:static!important; margin:40px auto 0; width:96%; transform:none;}
    #section4 .txt_gallery{position:static; margin:-75px auto 0; width:90%; height:auto; padding-bottom:20px;}
    
    #section5 .inr{width:100%; padding-bottom:0 !important;}
    #section5 .txt_box{margin:auto; width:96%;}
    #section5 .left, #section5 .right{position:relative; width:100%;}
    #section5 .left{margin-top:40px;}
    #section5 .root_daum_roughmap_landing{margin:auto; width:96% !important;}
    #section5 .root_daum_roughmap .wrap_map{height:300px !important;}
    #section5 .contact_info{margin-top:-100px; height:500px;}
    #section5 .contact_info ul{margin-top:40px;}
}


@media screen and (max-width:767px){
    .section p{font-size:14px;}
    .section h3{font-size:16px;}
    
    .txt_box h2{font-size:20px;}
   
    .bx-pager{bottom:20px !important;}
    #section0 .txt_wrap h2{margin-bottom:20px; font-size:20px;}
    #section0 .search_wrap{padding:20px 0;}
    #section0 .search_wrap ul{display:block; margin:0 auto 10px; width:90%;}
    #section0 .search_wrap li{display:block; padding:10px 0; height:auto !important; border-right:0; border-bottom:1px solid #f1f1f1;}
    #section0 .search_wrap li:first-child{padding:0 0 20px;}
    #section0 .search_wrap li:first-child p{margin-top:0;}
    #section0 .search_wrap li:nth-child(2){text-align:center !important;}
    #section0 .search_wrap li:last-child{border-bottom:0;}
   
/*    #section2 .txt_box2{position:relative;}*/
    #section2 .txt_box2:after{content:'* 좌우 스크롤'; display:block; font-size:12px; color:#ccc;}
    #section2 .tab_btn li a{font-size:14px;}
    .tab_content .txt_box h4{font-size:17px;}
    .tab_content .txt_box li+li{margin-top:10px;}
    .tab_content .txt_box span{font-size:14px;}
    .tab_content .txt_box p{padding-left:30px; width:75px;}
    .tab_content .txt_box p:before{width:22px; height:22px;}
    .tab_content .txt_box li:nth-child(3) li h6{width:90px;}
    
    #section3 .txt_box ul{display:block;}
    #section3 .txt_box ul li{padding:20px 5px; width:100%; -webkit-width:100%;}
    #section3 .txt_box ul li+li{margin-top:10px;}
    #section3 .txt_box ul li span{margin:0 auto 20px;}
    #section3 .txt_box ul li h3{padding-top:0; border-top:0;}
    #section3 .txt_box ul li h3 i{margin-bottom:0;}
    
    #section4 .txt_gallery{width:100%; padding:100px 10px 40px;}
    #section4 .btn_swiper_wrap{float:none; margin-top:18px; width:65px;}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next{right:auto !important;}
    
    #section5 .root_daum_roughmap .wrap_map{height:250px !important;}
    #section5 .contact_info{margin-top:-100px; height:400px;}
    #section5 .contact_info ul{margin-top:40px; padding-left:0; border-left:0; width:310px;}
    .contact_info ul li > h3{width:85px;}
}

@media screen and (max-width:540px){
    #section1 .txt_box{margin:40px auto 0; width:100%;}
    #section1 .img_box1{width:100%;} 
}

@media screen and (max-width:380px){
    #section0 .txt_wrap h2{font-size:18px;}
}