@charset "utf-8";

/* [ MAIN 공통 ] */
.main{overflow: hidden;}
.sec {padding: 120px 0;}
    /* colored */
.mint{color:#08D1D9;}
.pur{color:#5E2BB8;}
.wh{color: #fff;}
    /* text_style */
.sec_tit{text-align:center;}
.sec_tit .s_txt{font-size: 14px; font-weight: 800;}
.sec_tit .s_tit{font-size: 38px; line-height: 1.5; font-weight: 500; margin-bottom: 50px;}
    /* btn_style */
.submit{position: relative; display:block; overflow:hidden; background: transparent; color: #111; font-weight: 600; width: 250px; height: 55px; border-radius: 30px; text-align: center; font-size: 15px; box-sizing: border-box;}
.submit p{position: relative; color: #fff; line-height: 53px;}
.submit:hover{border:1px solid #111;}
.submit:hover p{color:#111;}
.submit::before{content: ""; position: absolute; top: 0; width: 120%; height:100%; background: #111; color:#111; left: -10%; transform: skew(30deg); transition: transform 0.5s cubic-bezier(0.3, 1, 0.8, 1);}
.submit:hover::before{content: ""; position: absolute; top: 0; left:0; width: 120%; height: 100%; transform: translate3d(100%,0,0);}

.allview{border: 1px solid #08D1D9; background:#08D1D9; color: #fff; margin: 70px auto 0;}
.allview p{color: #08D1D9;}
.allview:hover{border:1px solid #08D1D9;}
.allview:hover p{color:#fff;}
.allview::before{color:#fff; background:#f7f7f7}

.allview_wh{border: 0; background: #08D1D9; color: #fff;}
.allview_wh p{color: #08D1D9;}
.allview_wh:hover p{color:#fff;}
.allview_wh::before{background: #fff; color:#08D1D9;}



/* [ scroll down ] */
.scroll_down{position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2;}
.scroll_down .icon{display: block; position: relative; width: 28px; height:40px; margin: 0 auto; border: 1px solid #333; border-radius: 20px; box-sizing: border-box;}
.scroll_down .icon .scr1{top: 8px; animation: 1.5s ease-in-out infinite blink1;}
.scroll_down .icon .scr2{top: 15px; background-color: rgba(51,51,51,0.5);}
.scroll_down .icon .scr1,
.scroll_down .icon .scr2{display: block; position: absolute; width: 5px; height: 5px;  border-radius: 50%; left: 50%; margin-left: -3px;}
.scroll_down .txt{color: #333; font-size: 14px; font-weight: 500; display: block; padding-top: 10px;}
    /* animation */
@keyframes blink1 {
    0% { background-color: rgba(51,51,51,0.1); top: 8px;}
    50% { background-color: rgba(51,51,51,0.5);}
    100% { background-color: rgba(51,51,51,1); top: 15px;}
}


/* [ MAIN_VIS ] */
.main_vis{background:url('/resources/img/main/main_vis2.jpeg') no-repeat 50% 50%/cover; height: 100vh; position: relative;}
    /* main_tit_wrap */
.main_vis .main_tit_wrap{position: absolute; width: 97%; max-width: 1100px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center;}
.main_vis .main_card{width:460px;}
.main_vis .main_card img{width: 100%;}
.main_vis .main_tit{width: calc(100% - 460px);}
.main_vis .main_tit .tit{color: #0BEBF4; font-size: 50px; font-weight: 800; }
.main_vis .main_tit .tit2{font-size: 40px; font-style: italic; font-weight: 200; line-height: 1.5;}
.main_vis .main_tit .txt{margin: 20px 0 60px 0; font-size: 17px; line-height: 1.5; font-weight: 400;}

/* [ SEC 공통 ] */
.sec .box_cont{display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap;}
.sec .box_cont .box{position: relative; border:1px solid rgba(255,255,255,0); box-sizing: border-box; width: 31%; -webkit-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s; cursor:pointer;}
    /* img */
.sec .cont .box .disc{background:#5E2BB8; color: #FFF; padding:5px 8px; font-size:13px; position: static; font-weight: 500; box-shadow: 2px 2px 8px 0px rgb(0 0 0 / 5%); width: fit-content; margin-bottom: 5px;}
    /* txt */
.sec .b_tit{border-bottom: 1px solid #ddd; box-sizing: border-box; padding: 0 15px 20px;}
.sec .b_tit > p{font-size: 20px; font-weight: 600; position: relative; padding-left: 35px;}
.sec .b_tit > p::before{position: absolute; content: ""; width:20px; height: 18px; background: url(/resources/img/main/tit_ico.png) no-repeat top center/cover; top:50%; left: 0; transform: translateY(-50%);}
.sec .b_txt{color: #666; padding: 25px; box-sizing: border-box;}
.sec .b_txt p{line-height: 150%;}
.sec .basic2 li{margin-bottom:5px; margin-left: 20px;}

.sec .cont .box .tit{padding:20px 25px 40px; box-sizing: border-box; background:#fff;}
.sec .cont .box .tit p{line-height: 1.5;}
.sec .cont .box .eng_tit{font-size: 15px; position: relative;}
.sec .cont .box .kor_tit::before{position: absolute; display: block; opacity: 0; content: ""; top: 0; right:0; background:url(/resources/img/main/hover_arw.png)no-repeat 50% 50%/cover; width: 17px; height:17px; animation: arrowHide 0.8s forwards; opacity: 0; -webkit-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear;}
.sec .cont .box .kor_tit{position: relative; font-size: 20px; font-weight: 600;}
    /* hover */
.sec .cont .box:hover{border: 1px solid #08D1D9;}
.sec .cont .box:hover .kor_tit::before{-webkit-animation: arrowShow 0.8s forwards; animation: arrowShow 0.8s forwards; opacity: 1;}
@-webkit-keyframes arrowHide {
	0% {-webkit-transform: translatex(0px) translatey(0px);transform: translatex(0px) translatey(0px);}
    100% {-webkit-transform:translatex(-8px) translatey(8px);transform:translatex(-8px) translatey(8px);}
}
@keyframes arrowHide {
    0% {-webkit-transform: translatex(0px) translatey(0px);transform: translatex(0px) translatey(0px);}
    100% {-webkit-transform:translatex(-8px) translatey(8px);transform:translatex(-8px) translatey(8px);}
}
@-webkit-keyframes arrowShow {
	0% {-webkit-transform:translatex(-8px) translatey(8px);transform:translatex(-8px) translatey(8px); opacity: 0;}
    100% {-webkit-transform: translatex(0px) translatey(0px);transform: translatex(0px) translatey(0px); opacity: 1;}
}
@keyframes arrowShow {
    0% {-webkit-transform:translatex(-8px) translatey(8px);transform:translatex(-8px) translatey(8px); opacity: 0;}
    100% {-webkit-transform: translatex(0px) translatey(0px);transform: translatex(0px) translatey(0px); opacity: 1;}
}
    /* layer popup */
.dim {display:none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.6); z-index: 1000;}
.dim.open {display: block;}

.popup {display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001;}
.popup.open {display: block;}
.popup .inner {height: 100%;}
.popup .pop_wrap {background: #fff; position: absolute; width: 98%; height:90%; max-width: 768px; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; position: relative;}
.popup p{line-height: 150%;}
.popup .disc{width:fit-content; box-sizing: border-box; margin-bottom:10px; background:#5E2BB8; color: #FFF; padding: 5px 8px; font-size: 13px; font-weight: 500; box-shadow: 2px 2px 8px 0px rgb(0 0 0 / 20%);}
.popup .eng_tit{font-size: 16px;}
.popup .kor_tit{font-size: 24px; font-weight: 600;}
.popup .close {position: absolute; right: 30px; top:30px; width:30px; height:30px; cursor: pointer;}
.popup .close span {display: block; background-color: #333; position: absolute; width: 2px; height: 30px; top: 0; left: 50%; transform: rotate(45deg);}
.popup .close span:last-child {transform: rotate(-45deg);}

.popup .pop_wrap::-webkit-scrollbar{background:#fff; width: 5px; height: 8px;}
.popup .pop_wrap::-webkit-scrollbar-thumb{background:rgba(8,209,217,0.2); border-radius:20px; margin-right: 10px;}

.popup .cont {box-sizing: border-box;}
.popup .cont::-webkit-scrollbar {width: 8px;}
.popup .cont::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 5px;}
.popup .cont::-webkit-scrollbar-track {background-color: #eee;}
    /* tab */
.popup ul.tabs{position: sticky; top: 0; display: flex; justify-content: space-between; margin-top: 10px; width: 100%; border-bottom: 1px solid #ddd; text-align: center;}
.popup ul.tabs li{display: flex;align-items: center;justify-content: center; box-sizing: border-box; flex:1; padding: 10px; font-size: 16px; font-weight: 600; color: #717171; cursor: pointer; -webkit-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;}
.popup ul.tabs li.current{ border-bottom:1px solid #08D1D9; color: #08D1D9; -webkit-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;}
.popup ul.tabs li:hover{color: #111;}
.popup ul.tabs li.current:hover{color:#08D1D9}
    /* tab_cont */
.popup .tab-content{display: none; box-sizing: border-box;}
.popup .tab-content.current{display: inherit;}
.popup .tab_cont{padding: 15px 0; box-sizing: border-box;}
.popup .tab_cont .tab_txt{margin-top: 15px;}
.popup .tab_cont .tab_txt > p{line-height: 1.8; color: #666; display:block;}
.popup .tab_cont .tab_txt .ti{font-weight: 500; padding-right: 10px; margin-right: 8px; position: relative; color: #333; display: inline-block;}
.popup .tab_cont .tab_txt .ti::before{position: absolute; top: 50%; right:0; transform: translateY(-50%); content: ""; width: 1px; height: 70%; background:#666}
.popup .tab_cont .tab_txt .tx > a{color: #666; display: inline-block; word-break: keep-all;}
.popup .tab_cont .tab_txt .submit{width: 200px; height: 40px; margin: 20px auto 0; font-size: 15px;}
.popup .tab_cont .tab_txt .submit::before{background:#08D1D9}
.popup .tab_cont .tab_txt .submit p{line-height: 39px;}
.popup .tab_cont .tab_txt .submit:hover{border: 1px solid #08D1D9;}
.popup .tab_cont .tab_txt .submit:hover p{color: #08D1D9;}

    /* gallery */
.popup .tab_cont #gallery{width: 100%;}
.popup .tab_cont #lightSlider li img{ width:100%; height:337px !important;} 
.popup .tab_cont .lSSlideOuter .lSPager .active{border: 2px solid #08D1D9; box-sizing: border-box;}
.popup .tab_cont .lSSlideOuter .lSPager.lSGallery li{border-radius: 0;}
.lSAction .custom-prev-html, .lSAction .custom-next-html{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); padding-top:0 !important;}
.lSAction > a{bottom: 0 !important; height: 100% !important;}
.popup .lSSlideOuter .lSPager.lSGallery img{height:110px !important; width:100%;}
    /* map */
 .tab_cont #map{width: 100%; height: 450px;}
.popup .tab_cont #map iframe{width: 100%;}


/* [ SEC01 ] */
.sec1{position: relative;}
.sec1::before{position: absolute; content: ""; background:url(/resources/img/main/sec_bg.png) no-repeat top center /cover; width: 538px; height: 557px; right: 0px; top:14%;}
    /* card_img */
.sec1 .sec1_card{width: 463px; text-align:center; margin: 0 auto;}
.sec1 .sec1_card img{width: 100%;}
    /* card_txt */
.sec1 .sec1_txt .txt_box{margin-top: 70px;}
.sec1 .b_txt .benefit{display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap;}
.sec1 .b_txt .benefit li{position:relative; box-sizing: border-box; border-radius: 100%; text-align: center; color: #fff; width: 210px; height: 210px; background:url(/resources/img/main/benefit1.png?ver=220704) no-repeat 50% 50%/cover;}
.sec1 .b_txt .benefit li:nth-child(2){background:url(/resources/img/main/benefit2.png?ver=220704) no-repeat 50% 50%/cover;}
.sec1 .b_txt .benefit li:nth-child(3){background:url(/resources/img/main/benefit3.png?ver=220704) no-repeat 50% 50%/cover;}
.sec1 .b_txt .benefit li:last-child{background:url(/resources/img/main/benefit4.png?ver=220704) no-repeat 50% 50%/cover;}
.sec1 .b_txt .benefit .txt_wrap{position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); width: 100%;}
.sec1 .b_txt .benefit .txt_wrap .num{margin-bottom: 20px;}
.sec1 .b_txt .benefit .txt_wrap .txt > span{display: inline-block;}
.sec1 .submit{margin: 70px auto 0;}


/* [ SEC02 ] */
.sec2{background:#f7f7f7;}


/* [ SEC03 ] */
.sec3{background:url(/resources/img/main/sec3_bg.png) center/cover fixed no-repeat;}


/* [ SEC04 ] */
.sec4{background:#f7f7f7;}


/* [ SEC05 ] */
.sec5{position: relative;}
.sec5::after{position: absolute; content: ""; background:url(/resources/img/main/sec_bg.png) no-repeat top center /cover; width: 480px; height: 557px; right: 0; bottom:4%;}
.sec5 .cont{border: 1px solid #ddd; padding: 60px;}
.sec5 .b_tit > p::before{background: url(/resources/img/main/sec5_ico.png) no-repeat top center/cover; width: 24px; height: 24px;}
.sec5 .b_txt .tx{color: #333; font-weight: 500; font-size: 17px;}
.sec5 .terms{color: #333; }
.sec5 .basic2 li{color: #666;}









/* responsive */
@media screen and (max-width:1800px){
    /* [ layer popup ] */
    .popup .pop_wrap{padding: 20px; width: 80%; height: 80%;}

}

@media screen and (max-width:1024px){
    /* [ 공통 ] */
    .sec_tit .s_tit{font-size: 30px;}
    .sec .b_tit > p, .sec .cont .box .tit p, .popup .kor_tit{font-size: 18px;}
    .sec .box_cont .box{width: 32%;}
    .sec .cont .box .eng_tit, .popup .eng_tit{font-size: 14px !important;}
    .sec .cont .box .tit{padding: 20px 20px 40px;}
    .sec .cont .box .disc{font-size: 12px; top: 10px; left: 10px;}

    /* [ Scroll Down ] */
    .scroll_down .icon{width: 23px; height: 35px;}
    .scroll_down .icon .scr1, .scroll_down .icon .scr2{width: 3px; height: 3px; margin-left: -2px;}
    .scroll_down .txt{font-size: 13px; padding-top: 5px;}

    /* [ MAIN_VIS ] */
    .main_vis .main_tit_wrap{display: block; top: 52%;}
    .main_vis .main_card{width:300px; margin: 0 auto;}
    .main_vis .main_tit{width: 100%; margin: 0 auto; text-align: center;}
    .main_vis .main_tit .tit, .main_vis .main_tit .tit2{font-size: 40px;}
    .main_vis .main_tit .txt{ margin: 20px 0 50px 0;}
    .main_vis .submit{margin: 0 auto;}

    /* [ SEC01 ] */
    .sec1::before{right: auto; left: 50%; transform: translateX(-50%); top:10%;}
    .sec1 .b_txt .benefit li{width: 180px; height:180px;}
    .sec1 .b_txt .benefit .txt_wrap{font-size: 15px;}

    /* [ SEC05 ] */
    .sec5 .cont{padding: 50px 30px;}

    /* [ layer popup ] */
    .popup .tab_cont #map{height: 300px;}
    .popup .close {right: 15px; top:20px}
    .popup .close span{height: 20px;}
    .popup .tab_cont .tab_txt{font-size: 15px;}
    .popup .tab_cont #lightSlider li img{height:300px !important ;}
    .popup ul.tabs, .popup .tab_cont .tab_txt{margin-top: 20px;}

}

@media screen and (max-width:768px){
    /* [ 공통 ] */
    .sec .b_txt{padding: 15px; font-size: 15px;}
    .sec .b_txt p{font-size: 15px;}
    .submit{width: 200px; height: 50px;}
    .submit p{line-height: 49px;}
    .sec .box_cont .box{width: 48%;}
    .sec .box_cont .box:last-child{display:none;}
    .allview, .sec1 .submit{margin: 40px auto 0;}

    /* [ MAIN_VIS ] */
    .main_vis .main_tit .tit, .main_vis .main_tit .tit2{font-size: 35px;}
    .main_vis .main_tit .txt{font-size: 15px;}

    /* [ SEC01 ] */
    .sec1 .sec1_card{width: 350px;}
    .sec1 .b_txt .benefit{ flex:none;}
    .sec1 .b_txt .benefit li{width: 100%; border-radius: 0; margin-bottom: 20px;}
    .sec1 .b_txt .benefit li:last-child{margin-bottom: 0;}
    .sec1 .b_txt .benefit .txt_wrap .num{position: relative; margin-bottom: 30px; line-height: 30px;}
    .sec1 .b_txt .benefit .txt_wrap .num::before{position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); content: ""; border-radius: 100%; border: 1px solid #fff; box-sizing: border-box; width: 50px; height: 50px;}

    /* [ SEC05 ] */
    .sec5 .b_txt .tx{font-size: 15px;}

    /* [ layer popup ] */
    .popup .pop_wrap{width: 70%;}
    .popup .tab_cont{padding: 10px 0;}
    .popup .tab_cont #lightSlider li img{height: 250px !important;}
    .popup .tab_cont .tab_txt .submit{width: 150px; font-size: 13px;}
    .popup .lSSlideOuter .lSPager.lSGallery img{height:70px !important; }
}

@media screen and (max-width:600px){
    /* [ 공통 ] */
    .sec_tit .s_tit{font-size: 24px;}
    .main_vis .main_tit .tit, .main_vis .main_tit .tit2{font-size: 30px;}
    .sec .b_tit > p, .sec .cont .box .tit p{font-size: 16px;}
    .sec .cont .box .tit{padding: 15px 15px 35px}

    /* [ MAIN_VIS ] */
    .main_vis .main_tit_wrap{top: 50%;}
    .main_vis .main_tit{margin: 15px auto 0;}


    /* [ SEC03 ] */
    .sec3{background:url(/resources/img/main/sec3_bg.png) no-repeat top center/cover;}

    /* [ SEC05 ] */
    .sec5 .cont{padding: 50px 10px;}

    /* [ layer popup ] */
    .popup .tab_cont #map{height: 250px;}
    .popup .pop_wrap{width: 97%;}
    .popup .tab_cont #lightSlider li img{height: 200px !important;}
    .popup .tab_cont .tab_txt{font-size: 14px;}
}

@media screen and (max-width:500px){
    /* [ 공통 ] */
    .sec .box_cont .box{width: 100%; margin: 0 auto;}
    .sec .box_cont .box:first-child{margin:0 auto 30px;}
    .sec .cont .box .eng_tit::before{opacity: 1;}

    /* [ Scroll Down ] */
    .scroll_down{display: none;}

    /* [ MAIN_VIS ] */
    .main_vis .main_tit .txt br{display: none;}
    .main_vis .main_card{width: 200px;}
    .main_vis .main_tit .txt{line-height: 1.4; margin: 15px 15px 30px 15px;}

    /* [ layer popup ] */
    .popup .tab_cont .tab_txt > p{margin-bottom:8px; }
    .popup .tab_cont .tab_txt .ti{display: block; margin-bottom: 3px;}
    .popup .tab_cont .tab_txt .ti::before{display: none;}
    .popup .tab_cont .tab_txt .tx{line-height: 1.4;}
    .popup .tab_cont .tab_txt .tx a{display: block; line-height: 1.4;}
    .popup .lSSlideOuter .lSPager.lSGallery img{height:50px !important; }
}