@charset "utf-8";

/* [ MAIN 공통 ] */
/* .main{overflow: hidden;} */
.main_cont{overflow: hidden;}
.sec {padding: 120px 0;}
.fs14{font-size: 14px;}
/* colored */
.red{color:#3131dd;}
.wh{color: #fff;}
.co84{color:#848484;}
/* 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: #3131dd; font-weight: 600; width: 250px; height: 55px; border-radius: 30px; text-align: center; font-size: 15px; box-sizing: border-box; -webkit-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;}
.submit p{position: relative; color: #fff; line-height: 53px;}
.submit:hover{border:1px solid #3131dd;}
.submit:hover p{color:#3131dd;}
.submit::before{content: ""; position: absolute; top: 0; width: 120%; height:100%; background: #3131dd; color:#3131dd; 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 #3131dd; background:#3131dd; color: #fff; margin: 70px auto 0;}
.allview p{color: #3131dd;}
.allview:hover{border:1px solid #3131dd;}
.allview:hover p{color:#fff;}
.allview::before{color:#fff; background:#f7f7f7}

.allview_wh{border: 0; background: #3131dd; color: #fff;}
.allview_wh p{color: #3131dd;}
.allview_wh:hover p{color:#fff;}
.allview_wh::before{background: #fff; color:#3131dd;}



/* [ 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 #fff; 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(255,255,255,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: #fff; font-size: 14px; font-weight: 500; display: block; padding-top: 10px;}
/* animation */
@keyframes blink1 {
0% { background-color: rgba(255,255,255,0.1); top: 8px;}
50% { background-color: rgba(255,255,255,0.5);}
100% { background-color: rgba(255,255,255,1); top: 15px;}
}


/* [ MAIN_VIS ] */
.main_vis{position:relative; background:url('/resources/img/main/main_vis.png?ver=220718_1') no-repeat 50% 0%/cover; height: 100vh; position: relative;}
.main_vis::before{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height:100%; background:#000; opacity: 0.01; content: "";}
/* 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:420px; padding-right: 20px;}
.main_vis .main_card img{width: 100%;}
.main_vis .main_tit{width: calc(100% - 460px); color: #fff;}
.main_vis .main_tit .tit{color: #fff; 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: 300;}
.main_vis .submit{background:#fff;}
.main_vis .submit:hover{border:1px solid #fff;}

/* [ SEC 공통 ] */
.sec .box_cont{display: flex; align-items: center; justify-content: center; flex-flow: row wrap;}
.sec .box_cont .box{position: relative; border:1px solid rgba(255,255,255,0); box-sizing: border-box; -webkit-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s; cursor:pointer;margin: 1%;
width: 31.3%;}
/* img */
.sec .cont .box .disc{background:#3131dd; 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:21px; height: 20px; 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; box-sizing: border-box; background:#fff;}
.sec .cont .box .tit p{line-height: 1.5;}
.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 #3131dd;}
.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%; max-width: 768px; height:90%; 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:0; margin-left: 10px; background:#3131dd; color: #FFF; padding: 5px 8px; font-size: 13px; font-weight: 500; box-shadow: 2px 2px 8px 0px rgb(0 0 0 / 20%);}
.popup .title{display: flex; align-items: center;}
.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(236,0,0,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: relative; 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 #3131dd; color: #3131dd; -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:#3131dd}
/* 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:#3131dd}
.popup .tab_cont .tab_txt .submit p{line-height: 39px;}
.popup .tab_cont .tab_txt .submit:hover{border: 1px solid #3131dd;}
.popup .tab_cont .tab_txt .submit:hover p{color: #3131dd;}

/* 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 #3131dd; 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:761px; height: 759px; right: -10%; top:5%;}
/* 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_txt .b_txt .txt_impt { font-size: 18px; font-weight: 500; padding: 10px 0 20px;}
.sec1_txt .b_txt .txt_des { font-size: 16px; padding-left: 10px; position: relative; margin-bottom: 5px;}
.sec1_txt .b_txt .txt_des::before { width: 3px; height: 3px; position: absolute; background-color: #333; content: ""; top: 10px; left: 0;}
.sec1_txt .slg_list { padding-top: 10px; padding-left: 10px;}
.sec1_txt .slg_list > li { font-weight: 500; line-height: 160%;}
.sec1_txt .slg_list .red { color: #f6b1ad;}

.sec1 .b_txt .benefit{display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap; width: 80%; margin: 0 auto;}
.sec1 .b_txt .benefit li{position:relative; box-sizing: border-box; border-radius: 100%; text-align: center; color: #fff; overflow: hidden; width: 240px; height:240px; 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:last-child{background: url(/resources/img/main/benefit3.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: 761px;  height: 759px; right: -10%; bottom: 5%;}
.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::before{opacity: 0.35;}
.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:5%;}
.sec1 .b_txt .benefit{width: 95%;}
.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%;}

.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{width: 100%;}
.sec1 .b_txt .benefit li{width: 180px; height:180px;}

/* [ 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; width:100%;}
}

@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;}

/* [ SEC01 ] */
.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;}
.sec .b_txt p{line-height: 140%;}

/* [ 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; width:100%;}
}