@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css");
@import url('//fonts.googleapis.com/earlyaccess/nanummyeongjo.css');
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LotteMartHappy';
font-style: normal;
font-weight: 400;
src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyMedium.woff') format('woff');
}

@font-face {
font-family: 'LotteMartHappy';
font-style: normal;
font-weight: 700;
src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyBold.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyBold.woff') format('woff');
}

.lottemarthappy{
font-family: 'LotteMartHappy', sans-serif;
}

html,body, a, img{
-webkit-touch-callout:none;
/* -webkit-user-select:none; */
/* -webkit-tap-highlight-color:rgba(0, 0, 0, 0); */
}
html,body{scroll-behavior: smooth;}
html,body,div,span,p,h1,h2,h3,h4,h5,h6,sup,ul,ol,li,a,dt,dl,table,th,td,input,select,label,section,button,strong{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color: #333; font-size:16px;  letter-spacing:-0.04em; line-height: calc(1ex / 0.32);}
*{ margin: 0; padding: 0;}
html, body{ overflow-x: hidden;}
h1,h2,h3,h4,h5,h6{ font-size: 18px; line-height:1.2;}
ol,ul, li{ list-style: none;}
em,address{ font-style: normal;}
fieldset{ border: none;}
caption, legend{ display:none;}
/*caption, legend{ text-indent: -999999px; width: 1px; height: 1px; overflow: hidden; font-size: 1px; line-height: 1px; position: absolute; left: 0; top: 0;}*/
img{ vertical-align: middle; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); outline:none;}
input[type="checkbox"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="radio"]{ vertical-align: middle;}
button, input{ padding: 0; margin: 0; border: 0;}
a{ text-decoration: none; color: #4b4b4b; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); outline:none;}
b, strong{font-family:inherit; color:inherit;}


:root{
	--mainColor:#3282f6;
	--subColor:#a9d06a;
	data-adjusted-sections:5;
}

/* 모바일바로가기 */
#mobile-btn { } 
#mobile-btn { position: fixed; right: 0; top: 200px; z-index: 150; } 
#mobile-btn > a { display: block; width: 210px; height: 60px; background: rgba(0,0, 0, 0.6) url(../image/main/mobile_on.png) right 15px top 26px no-repeat; color:#fff; border-radius: 20px 0 0 20px; transition: all 0.3s; } 
#mobile-btn > a:hover { background-color: rgba(191, 150, 106, 1); } 
/* #mobile-btn > a:hover p { display:block; opacity: 1; transition-delay: 0.2s } */
#mobile-btn > a > p { font-size: 18px; font-weight: 500; color: #fff; text-align: center; line-height: 60px } 



/* 공통 */
.wrap{ width:1200px; margin:auto; max-width:100%; min-width:1200px;}
.w1200{ width:1200px; margin:auto; max-width:100%; min-width:1200px; }
body .bx-wrapper{box-shadow: 0 0 0 0; margin-bottom: 0; padding: 0; border: none; background-color: transparent;}
strong{ font-size: inherit; color: inherit;}
.flex{ display: flex;}
.hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
.f-mont{font-family:'Montserrat' !important;}
.m_show { display: none !important; } 
 br.m_br{ display: none;}
 br.pc_br{ display: block;}

/* 헤더 */

#header{width:100%;}




/* 상담신청 */
.csTel .chk-case { position:relative; display:inline-block; width:100%; margin-top:15px;;}
.csTel .chk-case:After {display:block; content:""; clear:both; }
.csTel .chk-case .ck-form {color:rgba(255, 255, 255, .5); font-size:16px;  float:right;}
.csTel .quick-agree { cursor: pointer; color: rgba(255, 255, 255, .5); font-size: 15px;}
.csTel .agree-box {
position: absolute;
width: 323px;
padding: 10px;
font-size: 16px;
border: 1px solid #303030;
background: #fff;
z-index: 1;
display: none;
text-align: left;
bottom: 20px;
left: 20px;
transition:none;
}
.csTel .q-consl .f_cs { width:100%; display:inline-block; padding:15px 0 30px; }
#agree { vertical-align:middle; margin-right:3px; color:rgba(255, 255, 255, .5);}
.ck-form input{ vertical-align:middle; color:rgba(255, 255, 255, .5); font-size:16px;}
.ck-form label{ vertical-align:middle; color:rgba(255, 255, 255, .5); font-size:16px;}
.ck-form input::placeholder{ vertical-align:middle; color:rgba(255, 255, 255, .5);}
.agree_tit{font-size:18px; color:#c80000;}




.q-quickWrap{display:none;}


#fp-nav.fp-left { left: 60px; top: 50%; transform: translate(-50%, -50%); width: 0; }
#fp-nav ul, .fp-slidesNav ul { margin: 0; display: flex; flex-direction: column; height: 125px; justify-content: space-between; align-items: center; transition:all .3s ease;}
#fp-nav ul li, .fp-slidesNav ul li { width: 0; height: 0; margin: 0; }
#fp-nav ul li a span, .fp-slidesNav ul li a span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; background:var(--mainColor); height: 8px; width: 8px; box-sizing: border-box; }
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span { margin: 0; width: 12px; height: 12px; }
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span { width: 8px; height: 8px; margin: 0; }
#fp-nav ul li a.active span:after{display:block; content:""; width:20px; height:20px; background:var(--mainColor); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); opacity:0.2;}
#fp-nav ul li .fp-tooltip{top:50%; transform:translateY(-50%);}
#fp-nav ul li:last-child{display:none !important;}
#fp-nav.fp-left.sub_nav ul{height:300px; transition:all .3s ease;}
#fp-nav.fp-left.sub_nav ul li a span, #fp-nav.fp-left.sub_nav .fp-slidexNav ul li a span{background:transparent}
#fp-nav.fp-left.sub_nav ul li a.active span{background:var(--mainColor)}
#fp-nav.fp-left.sub_nav ul li a.active span:after{background:var(--mainColor)}
#progress-container {position: fixed;top: 50%;left: 60px; width: 1px;height: 100%;max-height: 125px;background: #cccccc; transform: translateY(-50%); opacity:0;
 transition:all .3s ease; z-index:2;}
#progress-bar {width: 100%; height: 0; background: var(--mainColor); transition: height .5s ease; position: relative; opacity:0; }
#progress-container:before { content: attr(data-current-section); position: absolute; top: -50px; left: 50%; transform: translateX(-50%); color: var(--mainColor); font-size: 14px; opacity:0; transition:all .3s ease; }
#progress-container:after { content: attr(data-total-sections); position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); color: #cccccc; font-size: 14px; opacity:0; transition:all .3s ease; }
#progress-container.sub_nav #progress-bar{opacity:1; transition:all .5s ease;}
#progress-container.sub_nav{max-height:300px; background:#cccccc; opacity:1; transition:all .3s ease;}
#progress-container.sub_nav:before{ opacity:1; transition:all .3s ease;}
#progress-container.sub_nav:after{ opacity:1; transition:all .3s ease;}





.section {height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 3rem; color:#fff; background:#f9f9f9; background-size:Cover !important;}
.section{color:#333; text-align:center;}

.secWrap{width:100%; height:100%; position:relative;}
.secWrap > .img{width:100%; height:100%;}
.secWrap > .img img{width:100%; height:100%; object-fit:cover;}

.secWrap > .txt{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); box-sizing:border-box;}

.sec01 .txt{color:#fff; text-align:left; width:1200px;}
.sec01 .txt h3{font-size:50px; margin-bottom:40px; font-weight:normal;}
.sec01 .txt h3 strong{color:var(--mainColor);}
.sec01 .txt p{font-size:26px; margin:40px 0 30px; font-weight:bold;}
.sec01 .txt span{font-size:26px; display:block;}
.sec01 .txt h1{font-size:26px; color:#fff; width:520px; height:60px; display:flex; justify-content:center; align-items:center; text-align:center; background: linear-gradient(90deg,rgba(50, 130, 246, 1) 0%, rgba(0, 178, 196, 1) 100%); /*animation: gradient 5.5s ease-in-out infinite;*/ margin:30px 0 0; line-height:1;}
@keyframes gradient {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 100%;
  }
}

.mainTitW{text-align:left;}
.mainTitW h1{font-weight:normal; font-size:45px;}
.mainTitW h4{font-weight:normal; font-size:20px;}
.mainTitW h1 + h4{margin-top:10px;}

.sec02{}
.sec02 .mCw{display:flex; flex-direction:Column; position:relative;}
.sec02 .mCw .wrap{position:relative;}
.sec02 .sec02BtnW{position:absolute; top:0; right:0; display:flex; gap:3px;}
.sec02 .sec02BtnW > div{width:80px; height:80px; border-radius:50%; background:#ddd; display:flex; justify-content:center; align-items:center; margin:0; position:static; transform:none; top:auto; bottom:auto; right:auto; left:auto; opacity:1; cursor:pointer;}
.sec02 .sec02BtnW > div:after{display:none;}
.sec02 .sec02BtnW > div.swiper-button-prev{background:var(--subColor);}
.sec02 .sec02BtnW > div.swiper-button-next{background:var(--mainColor); margin-top:15px;}
.sec02 .sec02BtnW > div span{line-height:1; color:#fff; font-size:30px;}
.sec02swip{margin-top:50px;}
.sec02swiper{overflow:visible;}
.sec02swiper .swiper-slide{width:fit-content; max-width:500px; overflow:hidden; cursor:pointer; position:relative;}
.sec02swiper .swiper-slide .img{border-radius:30px; position:relative; width:100%; overflow:hidden;}
.sec02swiper .swiper-slide .img:after{width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); content:"VIEW MORE"; font-family:"Montserrat"; font-weight:600; color:#fff; text-align:center; display:flex; justify-content:center; align-items:center; font-size:20px; text-decoration:underline; text-underline-offset: 4px; text-decoration-thickness: 1px; background: linear-gradient(180deg,rgba(50, 130, 246, 0.9) 0%, rgba(0, 178, 196, 0.9) 100%); opacity:0; transition:all .3s ease;}
.sec02swiper .swiper-slide p{text-align:left; font-size:30px; color:var(--mainColor); margin:35px 0 15px; font-weight:bold;}
.sec02swiper .swiper-slide span{text-align:left; font-size:18px; display:block;}
.sec02swiper .swiper-slide:hover .img:after{opacity:1; transition:all .3s ease; }

.sec03{position:relative; width:100%; height:100%; background:#000;}
.sec03 .bgWrap{width:100%; height:100%; position:relative; display:block; content:""; z-index:1;}
.sec03 .bgWrap img{opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; z-index:0; transition:all .5s ease;}
.sec03 .bgWrap img.active{opacity:1; z-index:2; transition:all .5s ease;}
.sec03 .secWrap{width:100%; height:100%; display:flex; justify-content:space-between; align-items:center; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1;}
.sec03 .secWrap > div{width:100%; cursor:pointer; box-sizing:border-box; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:all .3s ease;}
.sec03 .secWrap > div + div{border-left:1px solid rgba(255, 255, 255, 0.8);}
.sec03 .secWrap .txt{display:flex; flex-direction:column; align-items:Center; gap:30px; justify-content:Center; margin:50px auto;}
.sec03 .secWrap .txt p{color:#fff; font-size:30px; font-weight:bold;}
.sec03 .secWrap .txt span{color:#fff; font-size:18px; height:90px;}
.sec03 .secWrap .box .btn{display:flex; align-items:Center; justify-content:center; color:#fff; border:1px solid #fff; border-radius:50%; width:60px; height:60px; margin:40px auto; transition:all .3s ease;}
.sec03 .secWrap .box .btn span{color:#fff; font-size:30px;}
.sec03 .secWrap > div:hover{background: linear-gradient(180deg,rgba(50, 130, 246, 1) 0%, rgba(0, 178, 196, 0.5) 100%); transition:all .3s ease;}
.sec03 .secWrap > div:hover .btn{background:#00b2c4; border-color:#ddd; transition:all .3s ease;}
/*
.sec04 .wrap{position:Relative; padding-bottom:105px; box-sizing:Border-box;}
.sec04 .wrap:after{width:855px; height:480px; box-sizing:border-box; content:""; display:block; position:absolute; background:url(../img/main/sec04_bg.png) center center no-repeat; bottom:0; righT:-33.33%;}
.sec04 .sec04BtnW{position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:flex; gap:3px;}
.sec04 .sec04BtnW > div{width:80px; height:80px; border-radius:50%; background:#ddd; display:flex; justify-content:center; align-items:center; margin:0; position:static; transform:none; top:auto; bottom:auto; right:auto; left:auto; opacity:1; cursor:pointer;}
.sec04 .sec04BtnW > div:after{display:none;}
.sec04 .sec04BtnW > div.swiper-button-prev{background:var(--subColor);}
.sec04 .sec04BtnW > div.swiper-button-next{background:var(--mainColor); margin-top:15px;}
.sec04 .sec04BtnW > div span{line-height:1; color:#fff; font-size:30px;}
.sec04 .lineTXT{font-size:14px; color:#ddd; position:absolute; bottom:-40px; right:-33.33%; display:flex; gap:25px; align-items:center; white-space:pre; width:855px;}
.sec04 .lineTXT hr{background:#ddd; height:1px; width:100%; border:none;}
.sec04 .swiper{}
.sec04 .swiper .swiper-slide{background:#f9f9f9}
.sec04 .swiper .swiper-slide .content{display:flex; justify-content:space-between;}
.sec04 .swiper .swiper-slide .content .img{width:710px;}
.sec04 .swiper .swiper-slide .content .info{flex:1; text-align:left;}
.sec04 .swiper .swiper-slide .content .info h3{text-align:left; font-size:58px; font-weight:normal;}
.sec04 .swiper .swiper-slide .content .info h5{text-align:left; font-size:18px; color:var(--mainColor); margin:30px 0;}
.sec04 .swiper .swiper-slide .content .info ul{}
.sec04 .swiper .swiper-slide .content .info li{text-align:left; font-size:18px; box-sizing:border-box; padding-left:10px; position:relative;}
.sec04 .swiper .swiper-slide .content .info li:before{content:"·"; display:block; position:absolute; top:0; left:0;}
.sec04 .swiper .swiper-slide .content .info li + li{margin-top:5px;}
.sec04 .swiper .swiper-slide .content .info a{font-family:'Montserra'; font-size:14px; box-sizing:border-box; width:140px; height:40px; display:inline-flex; border-radius:40px; border:1px solid #ddd; justify-content:center; align-items:center; margin:40px 0 0; transition:all .3s ease; box-sizing:border-box;}
.sec04 .swiper .swiper-slide .content .info a:hover{color:#fff; border:1px solid var(--mainColor); transition:all .3s ease; box-sizing:border-box; background:var(--mainColor);}*/


.sec04 .txt{color:#fff; text-align:left; width:1200px;}
.sec04 .txt span{font-size:18px; margin:10px 0 30px; display:block;}
.sec04 .txt p{font-size:18px; }
.sec04 .txt p b{font-size:18px; color:var(--mainColor);}

.sec05{background:url(../img/main/sec05_bg.png) center center no-repeat;}
.sec05 .mainTitW *{text-align:center; color:#fff;}
.sec05 .mainTitW h4{line-height:1.7;}
.sec05 fieldset{border:1px solid #fff; color:#fff; text-align:center; width:100%; display:block; padding:20px; position:relative; border-radius:40px; padding:40px 0 30px; margin-top:30px;}
.sec05 legend{display:block;padding:0 12.5px; text-indent:inherit; font-size:22px;}
.sec05 .conBox{width:100%; display:flex; align-items:flex-start; flex-wrap:wrap; gap:30px 0;}
.sec05 .conBox > div{width:33.33%; display:flex; flex-direction:column; align-items:Center; justify-content:center;}
.sec05 .conBox > div h6{color:#fff; text-align:center; font-size:50px; line-height:1;}
.sec05 .conBox > div .txt{text-align:center;}
.sec05 .conBox > div .txt p{color:#fff; text-align:center; font-size:26px; margin:5px auto; font-weight:bold;}
.sec05 .conBox > div .txt span{color:#fff; text-align:center; font-size:18px;}



#topBtn{position:absolute; bottom:60px; right:60px; z-index:1; width:60px; height:60px;}
#topBtn img{width:60px; height:60px; object-fit:cover; cursor:pointer;}



img.pc{display:block;}
img.mo{display:none;}