@charset "utf-8";
a, abbr, address, article, aside, audio, body, canvas, caption, cite, dd, details, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, img, label, legend, li, menu, nav, object, ol, p, section, span, strong, summary, table, tbody, td, tfoot, th, thead, tr, ul, video{font-family: 'Spoqa Han Sans','gothic','Malgun Gothic','맑은 고딕',Dotum,'돋움',Helvetica,"Apple SD Gothic Neo","애플 SD 산돌고딕 Neo",sans-serif;letter-spacing:-0.01em;}

::selection {background: #129a80;}

.container{position:relative;display:flex;padding:0;margin:0;transition: all 0.5s;overflow:hidden;width:400%;}
.container  h1#logo {position:absolute;left:20px;top:18px;width:301px;height:62px;font-size:0;background: url(../images/logo.png) no-repeat;background-size:100% auto;z-index:1}
.swiper-slide {float:left;height: 100vh;box-sizing: border-box;}

@keyframes bg {
    0% {transform: scale(1.1) rotate(-0.01deg); -webkit-transform: scale(1.1) rotate(-0.01deg);}
    70%,100% {transform: scale(1) rotate(-0.01deg); -webkit-transform: scale(1) rotate(-0.01deg);}}
@-webkit-keyframes bg {
    0% {transform: scale(1.1) rotate(-0.01deg); -webkit-transform: scale(1.1) rotate(-0.01deg);}
    70%,100% {transform: scale(1) rotate(-0.01deg); -webkit-transform: scale(1) rotate(-0.01deg);}}


@keyframes wave {
  0% 
    {transform: scale(0);opacity: 0.7;}
  
  100% 
    {transform: scale(1.5);opacity: 0;}
  }


@keyframes wave_b {
  0% 
    {transform: scale(0);opacity:0;}
  
  100% 
    {transform: scale(20);opacity: 1;}
  }



@keyframes lnka{
	0%{opacity:0;transform: translate(20%,0);}
	100%{opacity:1;transform: translate(0,0);}
}

@-webkit-keyframes scrolldown{
	0%{
		transform:translateX(-100%);
		-webkit-transform:translateX(-100%)
	}
	100%,80%{
		left:150%;
		transform:translateX(0);
		-webkit-transform:translateX(0)
	}
}
@keyframes scrolldown{	
	0%{
		transform:translateX(-100%);
		-webkit-transform:translateX(-100%);
	}
	
	100%,80%{
		left:150%;
		transform:translateX(0);
		-webkit-transform:translateX(0);
	}
}

@keyframes copytxt{
	0%{opacity:0;}
	100%{opacity:1; }
}
@keyframes copytxt_s{
	0%{opacity:0;transform:translateX(-20px);}
	100%{opacity:1;transform:translateX(0) ;}
}


#section1{position:relative;display:flex;align-items:center;width:100vw;overflow:hidden;}
#section1 .bg{position:absolute;left:0;top:0;width:100vw;height:100vh;background:url(../images/bg1.jpg) no-repeat 50% 50%;background-size:cover;transform: scale(1.1);-webkit-transform: scale(1.1);animation: bg 12s linear infinite; -webkit-animation: bg 12s linear infinite;animation-direction:alternate}
#section1 #slogan {width:100vw;color:#fff;text-align:center;z-index:1}
#section1 #slogan em{display:block;width:640px;margin:-10% auto 10px;font-size:0;/*height:264px;background:url(../images/slogan.png) no-repeat;*/}
#section1 #slogan em span{width:100%;height:auto;}
#section1 #slogan span{display:block}
#section1 .scroll{display:flex;align-items:center;position:absolute;bottom:130px;right:100px;z-index:1;color:#fff;}
#section1 .scroll .waves{position:absolute;right:-18px;width:50px;height: 50px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);}
.waves:before, 
.waves:after {content:'';position: absolute;left:50%;top:50%;width: 70px;height: 70px;margin-left: -35px;margin-top: -35px;border-radius: 50%;background-color:#fff;animation: wave 3s infinite linear;}
#section1 .scroll .arr {display: block;overflow: hidden;position:relative;width:110px;height:2px;margin:15px 0 15px 5px;background-color: rgba(255,255,255,.1);text-indent: -999em;}
#section1 .scroll .arr:after{content: '';height: 30px;position: absolute;top: 0;left: 0;right: 0;width: 100%;background: #fff; -webkit-animation: scrolldown 2s infinite ease-in-out;animation: scrolldown 2s infinite ease-in-out;}
#section1 .scroll:before{content: '';position:absolute;right:0;width:22px;height:22px;background:url(../images/arr_scroll.png) no-repeat 100% 100%;}

#section2{position:relative;display:flex;flex-flow: column;align-items:center;justify-content:center;width:1036px;background:#3c4432 url(../images/bg2.jpg) no-repeat 50% 50%;background-size: cover;}
#section2 .logo{margin-top:10%;}
#section2 .copy{position:absolute;left:50%;top:44%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;width:412px;margin:-44px 0 0 -206px;}
#section2 .copy span{display:inline-block;height:36px;margin:0 10px 20px 0;background: url(../images/sc2_copy_txt.png) no-repeat;opacity:0;font-size:0;}
#section2 .copy span.txt1{width:101px;animation:copytxt 1.5s 1 both}
#section2 .copy span.txt2{width:95px;background-position:-112px 0;animation:copytxt 1.5s .5s 1 both}
#section2 .copy span.bar{width:37px;height:1px;background:#b0b9b2;animation:copytxt_s 1s 1s 1 ease-in-out both}
#section2 .copy span.txt3{width:133px;background-position:-279px 0;animation:copytxt_s 1s 2s 1 ease-in-out both;}
#section2 .copy span.txt4{width:243px;background-position:-85px -55px;animation:copytxt_s 2s 3s 1 ease-in-out both;}
#section2 #bgbox{}
#section2 .scroll{display:flex;align-items:center;position:absolute;bottom:130px;right:100px;z-index:1;color:#fff;}
#section2 .scroll .waves{position:absolute;right:-18px;width:50px;height: 50px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);}
.waves:before, 
.waves:after {content:'';position: absolute;left:50%;top:50%;width: 70px;height: 70px;margin-left: -35px;margin-top: -35px;border-radius: 50%;background-color:#fff;animation: wave 3s infinite linear;}
#section2 .scroll .arr {display: block;overflow: hidden;position:relative;width:110px;height:2px;margin:15px 0 15px 5px;background-color: rgba(255,255,255,.1);text-indent: -999em;}
#section2 .scroll .arr:after{content: '';height: 30px;position: absolute;top: 0;left: 0;right: 0;width: 100%;background: #fff; -webkit-animation: scrolldown 2s infinite ease-in-out;animation: scrolldown 2s infinite ease-in-out;}
#section2 .scroll:before{content: '';position:absolute;right:0;width:22px;height:22px;background:url(../images/arr_scroll.png) no-repeat 100% 100%;}


#section3,

#section4{display:flex;align-items:center;}

.swiper-slide .tit{position:relative;width:582px;margin-top: -5%;}
.swiper-slide .lnkwrap{margin-top: -5%;}
.swiper-slide .tit .cate{}
.swiper-slide .tit .cate:after{content:"";display:inline-block;position:relative;top:-3px;width:200px;height:1px;margin-left:10px;background:#7a7f7e;}
.swiper-slide .tit .h2{position:relative;margin:110px 0 80px;font-family: 'score-dream-black';font-size:4em;z-index:1}
.swiper-slide .tit .h2 em{font-family: 'score-dream-black';}
.swiper-slide .tit b{position:absolute;left:110px;top:80px;font-family: 'score-dream-black';font-size:4em;line-height:0.5}
.swiper-slide .tit b span{display:block;padding-left:100px;font-family: 'score-dream-black';}
.swiper-slide .tit .more-text{line-height:2.5}
.swiper-slide .lnkwrap{display:flex;justify-content:space-around;align-items:center; padding:0 0 0 115px;}
.swiper-slide .lnkwrap a{display:block;color:#fff;overflow:hidden; transition: 1s;opacity:0}
.swiper-slide .lnkwrap strong{display:block;font-size:31px;}
.swiper-slide .lnkwrap span{position:relative;display:block;padding:30px 0 73px;}
.swiper-slide .lnkwrap span:after{content:"";position:absolute;bottom:40px;display:block;width:30px;height:1px;background:#fff}
.swiper-slide .lnkwrap span b{display:block;font-weight:normal;}
.swiper-slide .lnkwrap a div{position:relative;overflow:hidden;}
.swiper-slide .lnkwrap a .waves{display:none;position:absolute;right:-8px;bottom:-8px;width:0;height: 0;border-radius: 50%;background-color:#129a80;z-index:1}
.swiper-slide .lnkwrap a .waves:before,
.swiper-slide .lnkwrap a .waves:after{background-color:#129a80;}
.swiper-slide .lnkwrap a:hover .waves,
.swiper-slide .lnkwrap a:active .waves{display:block;}
.swiper-slide.on .lnkwrap a{opacity:1;transition:opacity 0.1s;transition-timing-function: cubic-bezier(.445,.05,.55,.95);}
.swiper-slide.on .lnkwrap a:hover{}
.swiper-slide.on .lnkwrap a:nth-child(1){animation:lnka 0.1s 1;}
.swiper-slide.on .lnkwrap a:nth-child(2){animation:lnka 0.2s 1;}
.swiper-slide.on .lnkwrap a:nth-child(3){animation:lnka 1s 1;}
.swiper-slide.on .lnkwrap a:nth-child(4){animation:lnka 1.3s 1;}
.swiper-slide.on .lnkwrap a:nth-child(5){animation:lnka 1.9s 1;}
.swiper-slide.on .lnkwrap a:nth-child(6){animation:lnka 2s 1;}

#section3{position:relative;width:3240px;padding:0 0 0 140px;background:#38403e url(../images/bg3_l.png) no-repeat 0 100%;}
#section3:before{content:"";display:block;position:absolute;right:0;top:0;width:1055px;height:699px;background: url(../images/bg3_r.png) no-repeat 100% 0 ;background-size:100% auto}
#section3 .tit .h2{color:#fff;}
#section3 .tit .h2 em{color:#0aad8e;}
#section3 .tit b{color:#303937;}
#section3 .tit{color:#fff;}
#section3 .tit p span{display:block;}
#section3 .lnkwrap a{width:308px;margin-right:70px;}
#section3 .lnkwrap a strong{display:inline-block;font-family: 'score-dream-thin';font-size:31px;}
#section3 .lnkwrap a span {min-height:150px;}
#section3 .lnkwrap a:last-child{margin-right: -70px;position:relative;z-index:1;}
#section3 .lnkwrap a:nth-child(odd){margin-top:260px;}
#section3 .lnkwrap a:hover,
#section3 .lnkwrap a:active{color:#0aad8e;transition: all .5s;transform:translateY(-20px) translateX(20px);}
#section3 .lnkwrap a:hover strong,
#section3 .lnkwrap a:active strong{position:relative;font-family: 'score-dream';font-style:italic;transition: all 1s;}
#section3 .lnkwrap a:hover span,
#section3 .lnkwrap a:active span{font-style:italic;text-decoration:underline;text-underline-position: under;  -webkit-text-decoration-color: #1f7565 !important; text-decoration-color: #1f7565 !important;transition: all 1s;}
#section3 .lnkwrap a:hover strong:before,
#section3 .lnkwrap a:active strong:before{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:1px;background:#0aad8e}
#section3 .lnkwrap a:hover div:after,
#section3 .lnkwrap a:active div:after{opacity:1}
#section3 .lnkwrap a div em{display: block;position: absolute;left: 50%;top: 50%;width:18px;height:18px;margin: -25px 0 0 -9px;z-index: 1; background:url(../images/ico_more.png) no-repeat 50% 50%;opacity:0}
#section3 .lnkwrap a:hover div em,
#section3 .lnkwrap a:active div em{transition: all .5s;transform:translateY(20px);opacity:1}



#section4{position:relative;width:2480px;padding:0 323px 0 260px;background:url(../images/bg4.jpg);background-size: cover;}
#section4 .tit{width: 377px;}
#section4 .tit .cate{color:#283839}
#section4 .tit .cate:after{background:#ddd;}
#section4 .tit .h2 em{color:#0aad8e;}
#section4 .tit b{left:40px;top:44px;color:rgba(0,0,0,0.1);}
#section4 .tit b span{padding-left:183px;}
#section4 .lnkwrap a{position:relative;margin-right:35px;}
#section4 .lnkwrap a:before{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:170px;background:linear-gradient(transparent, rgba(0, 0, 0, 0.65));z-index: 1}
#section4 .lnkwrap strong{position:absolute;bottom:30px;left:33px;font-size:21px;font-weight: 300;z-index:1}
#section4 .lnkwrap a:nth-child(1){width:225px;margin-top:49%;}
#section4 .lnkwrap a:nth-child(2){width:363px;}
#section4 .lnkwrap a:nth-child(3){width:314px;margin-top:15%;}
#section3 .waves:after,
#section4 .waves:after {animation: wave_b .5s 1 linear both;}
#section4 .lnkwrap a:hover strong,
#section4 .lnkwrap a:active strong {left:50%;top:50%;margin:-10px 0 0 -60px;transition: all .5s;}
#section4 .lnkwrap a div em{display: block;position: absolute;left: 50%;top: 50%;width:18px;height:18px;margin: -59px 0 0 -9px;z-index: 1; background:url(../images/ico_more.png) no-repeat 50% 50%;opacity:0}
#section4 .lnkwrap a:hover div em,
#section4 .lnkwrap a:active div em{transition: all .5s;transform:translateY(20px);opacity:1}

#footer{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:absolute;top:0;right:0;width:322px;height:100vh;color:#fff;background:#129a80}
#footer .logo{width:227px;height:170px;font-size:0;background: url(../images/f_logo.png) no-repeat;background-size:100% auto}
#footer .info{width:80%;margin:30px 0;}
#footer .info span{display:block;}
#footer .copyright{width:80%;margin:0 0 90px;}
#footer a{position:relative;display:block;padding-right:10px;width:100%;line-height:86px;color:#fff;background:#08725e;text-align:center;}
#footer a:after{content:"";position:absolute;left:0;top:0;display:block;width:86px;height:100%;background:#076150 url(../images/arr_top.png) no-repeat 50% 50%;}

@media screen and (max-width:1366px){
	.container{display:block;width:100%;}
	.swiper-slide {width:100%;}
	#section1,
	#section2,
	#section3,
	#section4{display:block;width:100%;float:none;}

	#section1 .bg{width:100%;}
	#section1 .scroll{width:84px;right:50%;flex-direction:column;justify-content:flex-start;margin-right:-45px;height:110px;}
	#section1 .scroll .arr{position:absolute;top:35px;left:12px;width:50px;transform:rotate(90deg);margin-top:30px;}
	#section1 .scroll:before{transform:rotate(90deg);right:50%;bottom:0;margin-right:-11px;}
	#section1 .scroll .waves{bottom:-17px;right:50%;margin-right:-25px;}
	#section1 #slogan{position:absolute;top:50%;margin-top:-170px;}

	#section2{ height: 50vh;background-size: auto 100%;}
	#section2 .logo{margin-top:10px;}
	#section2 .scroll{display:none}

	#section3{flex-direction:column;align-items: flex-start;padding:15% 0;}
	#section4{flex-direction:column;align-items: flex-start;padding:15% 0 0;}
	#section3 .tit,
	#section4 .tit{width:90%;margin:0 auto;}
	#section3 .tit b,
	#section4 .tit b{left:50%;margin-left:-50px;}

	#section1.swiper-slide{height:100vh;}
	.swiper-slide{height:auto;}
	.swiper-slide .tit .h2{text-align:center;margin: 110px 0 10px;}
	.swiper-slide .tit p{text-align:center;}
	.swiper-slide .lnkwrap {margin:0 auto;flex-wrap: wrap;justify-content:center;padding-left:0;}
	.swiper-slide .lnkwrap a{opacity:1}

	.swiper-slide .tit .more-text{width: 80%;margin:2% auto;text-align:center;line-height: 1.3;}
	.swiper-slide .tit .more-text .last-text{display:none;}
	.swiper-slide .tit .more-text.active .last-text{display:block;}
	.swiper-slide .tit .more-text a{color:#fff;text-decoration:underline;}
	.swiper-slide .lnkwrap span:after{display:none;}

	#section3:before{width:50%; }
	#section3 .lnkwrap a:last-child{margin-right:0;}
	#section3 .lnkwrap a:nth-child(odd),
	#section3 .lnkwrap a:nth-child(even){margin:10% 1.5% 0;}
	#section3 .lnkwrap a span{min-height:70px;padding:0;}
	#section3 .lnkwrap a strong{font-size:1.6em}

	#section4 .lnkwrap a:last-child{margin-right:0;}

	#footer{position:relative;width:100vw;height:auto;top:100%;padding:50px 0;margin-top:100px;text-align:center;}
	#footer a{position:absolute;right:0;top:0;width:86px;text-align:left;}
	#footer a:after {left:auto;right:0;transform: rotate(90deg);}
	#footer .copyright{margin:0;}
	#footer .info{margin-bottom:0;}
	#footer .info span{display:inline;}
	
	.inner__box{margin-top:20px;position:relative;padding-bottom:50px;text-align:center;}
	.inner__box p{display:inline;}
	.read-more {display: none;}
	.toggle a {color: #fff; border-bottom: 1px solid #fff; letter-spacing: -1px;}
	.toggle a:after {position: absolute; content: "";width: 13px; height: 10px; top: 8px; right: 0; background-position: 0 0;}
}


@media screen and (max-width:1024px){
	#section4 .lnkwrap a:nth-child(3){margin-top:6%;}
}

@media screen and (max-width:768px){
	#section1 #slogan em{width:75%;}
	#section1 #slogan p {width:75%;margin:0 auto;}
	#section1 #slogan p span{display:inline}
	#footer .logo{width:137px;height:103px;}
}

@media screen and (max-width:640px){
	.container h1#logo{width:200px;}

	.swiper-slide {}
	.swiper-slide .tit .h2{margin-top:50px;font-size:2.5em;}
	.swiper-slide .tit b{top:45px;font-size:1.8em;}
	.swiper-slide .lnkwrap a div{}

	#section1 #slogan{margin-top:-40px;}
	#section1 #slogan p{font-size:14px;line-height:1.3}
	#section2 .logo{display:block;width:70px;margin:10px auto 0;}
	#section1 .scroll{bottom:60px;}

	#section2 .copy{width:300px;margin:-44px 0 0 -150px;}
	#section2 .copy span{height:22px;margin:0 10px 20px 0;background-size:250px auto }
	#section2 .copy span.txt1{width:60px;}
	#section2 .copy span.txt2{width:58px;background-position:-67px 0;}
	#section2 .copy span.bar{width:20px;}
	#section2 .copy span.txt3{width:81px;background-position:-169px 0;}
	#section2 .copy span.txt4{width:147px;background-position:-52px -34px;}
	#section2 #bgbox{width:70%;margin:0 auto;padding-top:50px;}

	#section3{padding: 15% 0;}
	#section4{padding: 15% 0 0;}
	#section3 .lnkwrap{width:90%;}
	#section3 .tit b,
	#section4 .tit b{left:50%;margin-left:-90px;}
	#section3 .lnkwrap a:nth-child(odd), 
	#section3 .lnkwrap a:nth-child(even){position:relative;width:100%;padding-left:45%;}
	#section3 .lnkwrap a strong{font-size:1.3em;}
	#section3 .lnkwrap a div{position:absolute;left:0;top:0;width:40%;}
	#section3 .lnkwrap a div:after{width:22px;height:27px;margin:-13px 0 0 -11px;}

	#section4 .lnkwrap{width:90%;margin:0 auto;}
	#section4 .lnkwrap a:nth-child(1){width:32%;}
	#section4 .lnkwrap a:nth-child(2){width:45%;}
	#section4 .lnkwrap a:nth-child(1),
	#section4 .lnkwrap a:nth-child(2),
	#section4 .lnkwrap a:nth-child(3){width:100%;height:144px;margin:10% auto 0;}
	#section4 .lnkwrap a{margin-right:5%;}
	#section4 .tit b span{padding-left: 43px;}

	#footer .info{width:100%;}
	#footer .info span{display:block}
	.swiper-slide .lnkwrap span b{display:inline;}
	.swiper-slide .tit .cate{display:inline-block;}
	.swiper-slide .tit .cate:after{margin-left:0;width:100%;top:-17px;}	
	.swiper-slide .lnkwrap a div {overflow:hidden;}
	.swiper-slide .lnkwrap a div img{position:relative;left:0;top:50%;width:100%;margin-top:-10%;}
}