@charset "utf-8";

.mcont {position:relative; max-width:1200px; margin:0 auto}

@media screen and (max-width:1220px){
	.mcont {max-width:94%}
}


/* --------------------------------------------------오른쪽 네비-------------------------------------------------- */
.r_navi {position:fixed; top:50%; right:40px; transform: translateY(-50%); font-size:14px; z-index:10}
.fp-viewing-1 .r_navi a, .fp-viewing-2 .r_navi a, .fp-viewing-4 .r_navi a, .fp-viewing-6 .r_navi a {color:#00a5a1}
.fp-viewing-3 .r_navi a, .fp-viewing-5 .r_navi a {color:#00a5a1}

.r_navi ul {margin:0 auto; text-align:center}
.r_navi ul a {width:9px; height:9px; display:inline-block; block; margin:1px 0; border-radius:50%;}
.fp-viewing-1 .r_navi ul a, .fp-viewing-2 .r_navi ul a, .fp-viewing-4 .r_navi ul a, .fp-viewing-6 .r_navi ul a {background:#00a5a1}
.fp-viewing-3 .r_navi ul a, .fp-viewing-5 .r_navi ul a, .fp-viewing-7 .r_navi ul a {background:#00a5a1}

.fp-viewing-1 .r_navi li:nth-child(1) a {background:#fff;}
.fp-viewing-2 .r_navi li:nth-child(2) a {background:#004886}
.fp-viewing-3 .r_navi li:nth-child(3) a {background:#004886}
.fp-viewing-4 .r_navi li:nth-child(4) a {background:#fff}
.fp-viewing-5 .r_navi li:nth-child(5) a {background:#004886}
.fp-viewing-6 .r_navi li:nth-child(6) a {background:#004886}
.fp-viewing-7 .r_navi li:nth-child(7) a {background:#004886}

@media screen and (max-width:1220px){
	.r_navi {display:none}
}


/* --------------------------------------------------첫번째 섹션-------------------------------------------------- */
.main #section1 {position:relative; overflow:hidden}
.main_mvBox {color:#fff;}
.main_mv {position:relative; overflow:hidden}

.main_mv_apBox {position:absolute; top:24vw; left:50%; transform: translate(-50%,-50%); text-align:left; width:100%; z-index:2}
.main_mvtxt {width:90%; max-width:1200px; margin:0 auto;}
.main_mvtxt .txt01 {margin-bottom:60px}
.main_mvtxt .txt02 {margin-bottom:100px}
.main_mvtxt .txt01 img, .main_mvtxt .txt02 img {opacity:0}

.main_mvBox .hostBox > div, .main_mvBox .hostBox .tlt, .main_mvBox .hostBox ul, .main_mvBox .hostBox li {display:inline-block; vertical-align:middle}

.main_mvBox .hostBox {margin-bottom:20px;}
.main_mvBox .hostBox .tlt {margin-left:25px; margin-right:10px;}
.main_mvBox .hostBox .tlt:after {content:""; display:inline-block; vertical-align:middle; margin:0 5px 0 10px; width:1px; height:13px; background:#fff}

/*.main_mvBox .hostBox .host_lBox {margin-right:15px}*/
.main_mvBox .hostBox li {margin-right:15px;}

.main_mvBox .hostBox .logo2 li:last-child {margin-right:0;}

.main_mvBox .main_mv .item {height:1080px;}
.main_mvBox .main_mv .item01 {background:url(/share/img/main/main_sl01.jpg) no-repeat 50% 100%; background-size:cover; }
.main_mvBox .main_mv .item02 {background:url(/share/img/main/main_sl02.jpg) no-repeat 50% 0}
.main_mvBox .main_mv .item03 {background:url(/share/img/main/main_sl03.jpg) no-repeat 50% 0}
.main_mvBox .main_mv .item04 {background:url(/share/img/main/main_sl04.jpg) no-repeat 50% 0}

.main #section1.active .txt01 img {opacity:1; animation: fade-in-up 0.7s; animation-timing-function: ease-out; animation-delay:0.2s;}
.main #section1.active .txt02 img {opacity:1; animation: fade-in-up 0.7s; animation-timing-function: ease-out; animation-delay:0.4s;}
.main #section1.active .txt03 {opacity:1; animation: fade-in-up 0.7s; animation-timing-function: ease-out; animation-delay:0.6s;}

/*브로슈어 배너*/
.main #section1 .float_bn {position:absolute; top:25vw; left:75%; transform: translate(-50%,-50%); z-index:98;}
.main #section1 .float_bn img {width:100%;}

@media screen and (min-width:2500px){
	.main_mv_apBox {top:20vw;}
}

@media screen and (max-width:2000px){
	.main_mv_apBox {top:27vw;}

	.main #section1 .float_bn {position:absolute; top:30vw; left:73%; transform: translate(-50%,-50%); z-index:98;}
}

@media screen and (max-width:1800px){
	.main_mv_apBox {top:29vw;}
}

@media screen and (max-width:1700px){
	.main_mv_apBox {top:31vw;}

	.main_mvtxt .txt01 img {height:360px}
	.main_mvtxt .txt02 img {height:140px}

	.main #section1 .float_bn {width:18%;}
}

@media screen and (max-width:1500px){
	.main_mvBox .main_mv .item {height:900px;}

	.main_mv_apBox {top:32vw;}

	.main_mvtxt .txt01 {margin-bottom:35px}
	.main_mvtxt .txt02 {margin-bottom:40px}
	.main_mvtxt .txt01 img {height:340px}
	.main_mvtxt .txt02 img {height:130px}

	.main_mvBox .hostBox {margin-bottom:15px;}
	.main_mvBox .hostBox .tlt {margin-left:20px;}

	.main #section1 .float_bn {position:absolute; top:30vw; left:76%; transform: translate(-50%,-50%); z-index:98;}
	.main #section1 .float_bn {width:16%;}
}

@media screen and (max-width:1300px){
	.main_mv_apBox {top:34vw;}

	.main_mvtxt .txt01 img {height:330px}
	.main_mvtxt .txt02 img {height:126px}

	.main_mvBox .hostBox .tlt {margin-left:18px;}

	.main #section1 .float_bn {position:absolute; top:33vw; left:80%; transform: translate(-50%,-50%); z-index:98;}
	.main #section1 .float_bn {width:18%;}
}

@media screen and (max-width:1220px){
	.main_mvBox .main_mv .item {height:800px;}

	.main_mv_apBox {top:48%}

	.main_mvtxt .txt01 img {height:320px}
	.main_mvtxt .txt02 img {height:120px}

	.main_mvBox .hostBox .tlt {margin-left:15px;}

	.main #section1 .float_bn {position:absolute; top:30vw; left:80%; transform: translate(-50%,-50%); z-index:98;}
	.main #section1 .float_bn {width:20%;}
}

@media screen and (max-width:1080px){
	.main_mvBox .main_mv .item {height:850px;}

	.main #section1 .float_bn {position:absolute; top:40vw; left:80%; transform: translate(-50%,-50%); z-index:98;}
	.main #section1 .float_bn {width:20%;}

	.main_mvBox .hostBox .logo2 {margin:5px 0 0 70px;}
}

@media screen and (max-width:1024px){
	.main_mvtxt .txt01 img {height:300px}
	.main_mvtxt .txt02 img {height:110px}

	.main_mvBox .hostBox .tlt {margin-left:15px;}

	.main #section1 .float_bn {position:absolute; top:45vw; left:85%; transform: translate(-50%,-50%); z-index:98;}
}

@media screen and (max-width:900px){
	.main_mvtxt .txt01 img {height:280px}
	.main_mvtxt .txt02 img {height:100px}

	.main_mvBox .hostBox .tlt {margin-left:13px;}

	.main #section1 .float_bn {position:absolute; top:45vw; left:85%; transform: translate(-50%,-50%); z-index:98;}
}


@media screen and (max-width:768px){
	.main_mvBox .main_mv .item {height:110vw;}

	.main_mvtxt .txt01 img {height:30vw}
	.main_mvtxt .txt02 img {height:12vw}

	.main_mvBox .hostBox .tlt {margin-right:5px;}
	.main_mvBox .hostBox .host_lBox {margin-right:5px}
	.main_mvBox .hostBox li {margin-right:5px;}

	.main_mvBox .hostBox .tlt {margin-left:7px; margin-right:10px;}
	.main_mvBox .hostBox .tlt:after {margin:0 0 0 8px; height:10px;}

	.main_mvBox .hostBox img {height:4.2vw}

	.main_mvBox .hostBox .logo2 {margin:5px 0 0 50px;}

	.main #section1 .float_bn {position:absolute; top:40vw; left:80%; transform: translate(-50%,-50%); z-index:98;}
	.main #section1 .float_bn {width:25%;}
}

@media screen and (max-width:480px){
	.main_mvBox .main_mv .item {height:120vw;}
	.main_mv_apBox {top:49%}

	.main_mvtxt .txt01 {margin-bottom:20px}
	.main_mvtxt .txt02 {margin-bottom:25px}

	.main_mvBox .hostBox {margin-bottom:10px;}
	.main_mvBox .hostBox .tlt {margin-left:7px; margin-right:10px; font-size:13px;}

	.main #section1 .float_bn {position:absolute; top:45vw; left:80%; transform: translate(-50%,-50%); z-index:98;}
}


/* --------------------------------------------------두번째 섹션-------------------------------------------------- */
.main #section2 {background:#fff}
.main #section2 .mcont {padding:100px 0 120px;}
.main #section2 .mtltBox {margin-bottom:75px;}
.main #section2 .mtltBox .tlt {font-size:40px; line-height:1em; color:#243b81;}

.msec02 {overflow:hidden}
.msec02 .imgBox {float:left; width:40%;}
.msec02 .imgBox img {max-width:100%;}
.msec02 .txtBox {float:right; width:58%; font-size:22px; letter-spacing:-0.03em; line-height:1.4em;}
.msec02 .txtBox .tltimg {margin-bottom:40px; font-size:40px; line-height:1.2em;}

.msec02 .txtBox dl {overflow:hidden;}
.msec02 .txtBox dl dd{padding:0 0 15px;}
.msec02 .txtBox dt {float:left; width:17%; font-weight:700; color:#243b81; letter-spacing:1.7em;}
.msec02 .txtBox dt.lt0 {letter-spacing:-0.03em;}
.msec02 .txtBox dt.lt4 {letter-spacing:0.4em;}
.msec02 .txtBox dd {float:left; width:83%;}
.msec02 .txtBox dd p{font-size:0.85em;}

.msec02 .txtBox .iconUl li {display:inline-block; margin-right:10px}
.msec02 .txtBox .iconUl li:last-child {margin-right:0}

.msec02 .down_btn a {display:block; width:60%; padding:20px 0; line-height:1em; background:#00a5a1; border:1px solid #00a5a1; border-radius:50px; color:#fff; margin-top:40px; transition:all 0.3s}
.msec02 .down_btn a:hover {background:#fff; color:#00a5a1;}
.msec02 .down_btn i {font-size:22px}

@media screen and (max-width:1300px){
	.msec02 .txtBox {font-size:20px;}
	.msec02 .txtBox .tltimg {margin-bottom:30px;}
}

@media screen and (max-width:1200px){
	.main #section2 .mcont {padding:80px 0 100px;}
	.main #section2 .mtltBox {margin-bottom:60px;}

	.msec02 .imgBox, .msec02 .txtBox {float:none; width:100%;}
	.msec02 .imgBox {text-align:center;}
	.msec02 .imgBox img {max-width:100%}
	.msec02 .txtBox {margin-top:7vw;}
	.msec02 .txtBox .tltimg {margin-bottom:3vw; font-size:40px;}

	.msec02 .txtBox dt{float:left; width:14%;}
	.msec02 .txtBox dd{float:left; width:86%;}

	.msec02 .down_btn a {width:100%; padding:20px 0; }
}

@media screen and (max-width:768px){
	.main #section2 .mcont {padding:60px 0 80px}
	.main #section2 .mtltBox {margin-bottom:40px;}
	.main #section2 .mtltBox .tlt {font-size:26px; margin-bottom:10px;}

	.msec02 .txtBox {font-size:15px;}
	.msec02 .txtBox .tltimg {margin-bottom:3vw; font-size:6vw;}

	.msec02 .txtBox dt{float:left; width:19%;}
	.msec02 .txtBox dd{float:left; width:81%;}

	.msec02 .txtBox .iconUl img {height:20px}

	.msec02 .down_btn a {padding:15px 0;}
}

@media screen and (max-width:480px){
	.main #section2 .mcont {padding:40px 0}
	.main #section2 .mtltBox .tlt {font-size:22px; margin-bottom:5px;}

	.msec02 .txtBox {font-size:14px;}
	.msec02 .txtBox .tltimg {margin-bottom:4vw; font-size:6.3vw;}

	.msec02 .txtBox dt{float:left; width:25%;}
	.msec02 .txtBox dd{float:left; width:75%;}
	.msec02 .txtBox dd img {height:30px;}

	.msec02 .txtBox .iconUl img {height:18px}

	.msec02 .down_btn a {padding:10px 0; margin-top:10px; }
	.msec02 .down_btn i {font-size:14px}
}

.main #section2.active .imgBox img {animation-fill-mode: both !important; animation: fade-in 0.7s; animation-timing-function: ease-out; animation-delay:0.6s}
.main #section2.active .txtBox {animation-fill-mode: both !important; animation: fade-in-up 0.5s; animation-timing-function: ease-out; animation-delay:0.3s}


/* --------------------------------------------------세번째 섹션-------------------------------------------------- */
.main #section3 {background:#f3f3f3;}
.main #section3 .mcont {padding:110px 0;}
.main #section3 .mtltBox {margin-bottom:50px; color:#000;}
.main #section3 .mtltBox .tlt {font-size:40px; margin-bottom:15px;}
.main #section3 .mtltBox .txt {font-size:18 px; color:#666;}
.main #section3 .mtltBox .txt_ani {opacity:0;}

.msec03_ul {overflow:hidden}
.msec03_ul li {position:relative; float:left; width:32.6%; margin-right:1%; overflow:hidden}
.msec03_ul li:nth-child(3n) {margin-right:0}
.msec03_ul img {width:100%}

.msec03_ul .txt {color:#222; font-size:20px; line-height:1.4em; margin-top:5%; margin-bottom:10%;}
.msec03_ul .img img {width:100%; transition:all 0.3s}
.msec03_ul li:hover .img img {transform: scale(1.0);}

.main #section3.active .msec03_ul .txt_ani {opacity:1; animation-fill-mode: both !important; animation: fade-in-right 0.5s; animation-timing-function: ease;}
.main #section3.active .msec03_ul li:nth-child(1) .txt_ani {animation-delay:0.1s}
.main #section3.active .msec03_ul li:nth-child(2) .txt_ani {animation-delay:0.2s}
.main #section3.active .msec03_ul li:nth-child(3) .txt_ani {animation-delay:0.3s}
.main #section3.active .msec03_ul li:nth-child(4) .txt_ani {animation-delay:0.4s}

@media screen and (max-width:1220px){
	.main #section3 .mcont {padding:90px 0;}

	.msec03_ul .txt {font-size:18px;}
}

@media screen and (max-width:1024px){
	.msec03_ul .txt {font-size:16px;}
}

@media screen and (max-width:768px){
	.main #section3 .mcont {padding:70px 0}
	.main #section3 .mtltBox {margin-bottom:30px;}
	.main #section3 .mtltBox .tlt {font-size:30px; margin-bottom:10px;}
	.main #section3 .mtltBox .txt {font-size:14px;}

	.msec03_ul li {width:49%; margin:0 1% 1% 0; overflow:hidden}
	.msec03_ul li:nth-child(2n) {margin-right:0}
	.msec03_ul li:nth-child(3n) {margin-right:1%}

	.msec03_ul .txt {font-size:16px;}
	.msec03_ul li:nth-child(1) .txt, .msec03_ul li:nth-child(2) .txt {margin-bottom:6%;}

	.mcont .icon img {width:5.8vw;}
}

@media screen and (max-width:480px){
	.main #section3 .mtltBox .tlt {font-size:26px; margin-bottom:5px;}
	.main #section3 .mtltBox .txt {font-size:12px;}

	.main #section3 .mcont {padding:60px 0}
	.msec03_ul .txt {font-size:12px;}

	.mcont .icon img {width:7vw;}
}


/* --------------------------------------------------네번째 섹션-------------------------------------------------- */
.main #section4 {position:relative; overflow:hidden}
.main #section4 .tltBox {position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:2}
.main #section4 .tltBox img {opacity:0;}

.main .grid {overflow:hidden}
.main .grid li {position:relative; width:25%; box-sizing:border-box}
.main .grid li .item_img {position:relative; width:100%; height:16vw; overflow:hidden;}
.main .grid li .item_img:after {content:""; display:block; position:absolute; top:0; ;left:0; width:100%; height:100%; background:rgba(0,0,0,0.4)}
.main .grid li .item_img img {width:100%; height:100%;}

.main #section4.active .tltBox img {opacity:1; animation: bounce-in-up 1.2s;animation-timing-function: ease-out; animation-delay:0.3s}


@media screen and (max-width:1400px){
	.main .grid li {width:33.333%;}
	.main .grid li .item_img {height:22vw;}
}

@media screen and (max-width:1024px){
	.main #section4 .tltBox img {height:6.8vw}
}


@media screen and (max-width:768px){
	.main #section4 .tltBox img {height:7.8vw}

	.main .grid li {width:50%;}
	.main .grid li .item_img {height:32vw;}
}

@media screen and (max-width:480px){
	.main #section4 .tltBox img {height:8.8vw}
}


/* --------------------------------------------------다섯번째 섹션-------------------------------------------------- */
.main #section5 {position:relative;}
.main #section5 .mcont {padding:85px 0; height:750px;}
.main #section5 .m_snsBox {position:relative; z-index:2; overflow:hieen}
.main #section5 .m_sns .tlt {font-size:22px; margin-bottom:13px;}
.main #section5 .m_sns .tlt a {font-size:14px; color:#8d8d8d}
.main #section5 .m_sns .tlt .icon {margin-right:3px}


.main #section5 .m_sns_instaBox {float:left; width:67%}
.main #section5 .m_sns_facebookBox {float:right;}

#instagram {overflow: hidden;width: 100%; padding-top:8px;}
.instagram_item {float: left;width: 32.333%;margin-right:1.5%; margin-right:1.5%;}
.instagram_item:nth-child(3n) {margin-right:0}
.instagram_item > a {display: block;width: 100%;padding-top: 100%;position: relative;background: no-repeat center center;background-size: cover;}

.instagram_item > a:hover:before {opacity: 1;}
.instagram_item > a:hover p {opacity: 1;}


.msec05_imgBox > div {position:absolute; z-index:0}
.msec05_imgBox .img01 {top:285px; left:-550px}
.msec05_imgBox .img02 {top:30px; right:-670px}

@media screen and (max-width:1220px){
	.main #section5 .mcont {height:auto;}
	.main #section5 .m_sns_instaBox {float:none; width:100%}
	.main #section5 .m_sns_facebookBox {display:none;}

	.msec05_imgBox {display:none}
}

@media screen and (max-width:768px){
	.main #section5 .mcont {padding:50px 0}

	.main #section5 .m_sns .tlt {font-size:16px; margin-bottom:10px;}
}

@media screen and (max-width:768px){
	.main #section5 .mcont {padding:50px 0}

	.main #section5 .m_sns .tlt {font-size:15px;}
	.main #section5 .m_sns .tlt a {font-size:13px;}
}


/* --------------------------------------------------여섯번째 섹션-------------------------------------------------- */
.main #section6 {position:relative; background:url(/share/img/main/sec06_bg.jpg) no-repeat 50% 50% fixed; background-size:cover}
.main #section6 .mcont {padding-top:134px; height:605px;}

.main #section6 .tltBox {font-size:25px;}

.msec06_ul {margin-top:82px;}
.msec06_ul li {display:inline-block; margin:0 25px;}
.msec06_ul .txt {font-size:18px;}
.msec06_ul .num {font-size:80px; font-family: 'GmarketSansBold'; line-height:1.5em;}
.msec06_ul .unit {font-size:18px; margin-top:20px; margin-left:5px;}
.msec06_ul .num, .msec06_ul .unit {float:left;}

@media screen and (max-width:1220px){
	.msec06_ul li {margin:0 20px}
	.msec06_ul .num {font-size:65px;}
	.msec06_ul .unit {margin-top:15px;}
}

@media screen and (max-width:1024px){
	.msec06_ul li {margin:0 15px}
	.msec06_ul .num {font-size:50px;}

	.main #section6 .mcont {height:500px}
}

@media screen and (max-width:900px){
	.main #section6 .tltBox {font-size:22px;}

	.msec06_ul li {margin:0 15px}
	.msec06_ul .txt {font-size:16px;}
	.msec06_ul .num {font-size:40px;}
	.msec06_ul .unit {font-size:16px; margin-top:10px;}

	.main #section6 .mcont {padding-top:84px; height:400px}
}

@media screen and (max-width:768px){
	.main #section6 .tltBox {font-size:18px;}

	.msec06_ul {margin-top:42px;}
	.msec06_ul li {margin:0 5px}
	.msec06_ul .txt {font-size:14px;}
	.msec06_ul .num {font-size:25px;}
	.msec06_ul .unit {font-size:14px; margin-top:5px;}

	.main #section6 .mcont {padding-top:64px; height:300px}
}

@media screen and (max-width:480px){
	.main #section6 .tltBox {font-size:16px;}

	.msec06_ul {margin-top:42px;}
	.msec06_ul li {margin:0 20px 15px 20px}
	.msec06_ul .txt {font-size:13px;}
	.msec06_ul .num {font-size:22px;}
	.msec06_ul .unit {font-size:13px; margin-top:3px;}

	.main #section6 .mcont {padding-top:64px; height:300px}
}


/* --------------------------------------------------일곱번째 섹션-------------------------------------------------- */
.main #section7 .mcont {height:107px; line-height:107px;}
.msec07_ul li {display:inline-block; margin:0 10px}

@media screen and (max-width:1220px){
	.main #section7 .mcont {height:90px; line-height:90px;}
	.msec07_ul li {margin:0 5px}
	.msec07_ul img {height:32px;}
}

@media screen and (max-width:1024px){
	.main #section7 .mcont {height:70px; line-height:70px;}
	.msec07_ul li {margin:0 4px}
	.msec07_ul img {height:23px;}
}

@media screen and (max-width:768px){
	.main #section7 .mcont {height:auto; line-height:1.5em; padding:15px 0}
	.msec07_ul li {margin:0 15px 0 0; padding:5px 0; line-height:1.5em;}
	.msec07_ul li:last-child {margin-right:0}
	.msec07_ul img {height:20px;}
}

@media screen and (max-width:700px){
	.msec07_ul li {margin:0 40px 0 0}
	.msec07_ul img {height:20px;}
}

@media screen and (max-width:480px){
	.main #section7 .mcont {padding:10px 0}
	.msec07_ul li {margin:0 10px 0 0}
	.msec07_ul img {height:18px;}
}