@charset "utf-8";
@font-face {
    font-family: 'GmarketSansLight'; font-weight: normal; font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
}


.quick {height: calc(100vh - 131px); margin-top: 131px;}
.quick .scroll {bottom: 0;}

#content h2 {font-family: 'SCDream'; font-weight:500;}
.visual {width: 100%; height: 100%; position: relative;}
.visual .wrap {height: 100%;}
.visualSlide {width: 100%; height:100%; position: absolute; top: 131px;}
.visualSlide li {height: calc(100vh - 131px); z-index: -1 !important;}

.visualSlide .vs1 {background: url(../imgs/main/slideimg1.jpg) center no-repeat; background-size: cover;}
.visualSlide .vs2 {background: url(../imgs/main/slideimg2.jpg) center no-repeat; background-size: cover;}
.visualSlide .vs3 {background: url(../imgs/main/slideimg3.jpg) center no-repeat; background-size: cover;}
.visualSlide .vs4 {background: url(../imgs/main/slideimg4.jpg) center no-repeat; background-size: cover;}
.visualSlide .slick-list,
.visualSlide .slick-track {height:100%;}
.visualSlide .slick-slide {position:relative; overflow:hidden;}
.visualSlide li div {width:100%; height:100%; transform:scale(1.15);transition:transform 2s;}
.visualSlide li.slick-active {animation-name: visualbg; animation-duration: 2s; animation-iteration-count: 1;}
@keyframes visualbg{
	0%{transform:scale(1.15);}
	100%{transform:scale(1);}
}
.visual .copy {position: absolute; top: 37%; left: 0; color: #fff;}
.visual .copy p {font-family: 'GmarketSansLight'; font-size: 17px; letter-spacing: 0; margin-left: 5px;}
.visual .copy p:before {content: ''; display: inline-block; width: 43px; height: 4px; position: absolute; top: -25px; left: 0; background: #fff; left: 5px;}
.visual .copy h2 {font-size: 55px; text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); line-height: 90px;}
.visual .copy h2 span {color: #fabe00;}
.visual .copy h2 strong {font-size: 80px;}
.vsCtrl {position: absolute; top: 85%; left: 0; color: #fff;}
.vsCtrl button {vertical-align: middle; width: 80px; height: 80px;}
.vsCtrl img {width: 100%;}
.vsCtrl .play {display: none;}
.vsCtrl {font-family: 'GmarketSansLight';}
.vsCtrl .current {font-size: 30px; font-weight: 600; display: inline-block; width: 20px;}
.vsCtrl .total {font-size: 20px; letter-spacing: 3px;}
.vsCtrl .bar {height: 2px; width: 127px; display: inline-block; margin: 0 10px; background: #fff; position: relative; vertical-align: middle;}
.vsCtrl .bar span {width: 0; height: 2px; position: absolute; top: 0; left: 0; background: #fabe00;}
.sideLink {position: absolute; top: 40%; right: 0; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);}
.sideLink a {font-family: 'SCDream'; font-weight:300; letter-spacing: 0; display: block; width: 115px; height: 115px; text-align: center; font-size: 15px; line-height: 16px;}
.sideLink a:first-child {background: #000; color: #fff;}
.sideLink a:last-child {background: #fff;}
.sideLink a:before {content: ''; width: 30px; height: 30px; display: block; margin: 0 auto 10px; padding: 20px 0 0;}
.sideLink a:first-child:before{background: url(../imgs/main/icon_info.png) bottom no-repeat;}
.sideLink a:last-child:before{background: url(../imgs/main/icon_location.png) bottom no-repeat;}
.sideLink a:hover:before {transform:rotateY(360deg); transition:all .5s;}
.section2 .wrap {height: calc(100vh - 201px); padding: 141px 0  60px; overflow: hidden;}
.section2 .box {width: 50%; height: 50%; float: left; color: #fff; min-height: 330px;}
.section2 .box .copy {display: inline-block;}
.section2 .box h2 {font-size: 58px;}
.section2 .box h2 span {font-weight: 500;}
.section2 .box .copy div {font-family: 'GmarketSansLight'; font-size: 17px; letter-spacing: 1px; word-break: keep-all; text-align: left; line-height: 18px;}
.section2 .box 	p {font-family: 'SCDream'; font-weight:300; font-size: 20px; line-height: 30px; letter-spacing: 0;}
.section2 .box 	p strong {font-family: 'SCDream'; font-weight:500;}
.section2 .house .copy,
.section2 .community .copy {background: #fff; position: relative; width: 200px; height: 100%; text-align: center;}
.section2 .house .copy div,
.section2 .community .copy div {writing-mode: tb-rl; display: inline-block; transform: rotate(180deg);}
.section2 .house h2,
.section2 .community h2 {width: 70px; line-height: 60px; display: inline-block;}
.section2 .house {background: #e73133 url(../imgs/main/house_bg.jpg); overflow: hidden;}
.section2 .house .copy {margin-left: 25px; float: left; background: #fff; color: #e83436; display: inline-block;}
.section2 .house .copy div {position: absolute; top: 0; left: 50px;}
.section2 .house h2 {position: absolute; top: 0; left: 70px;}
.section2 .house h2 span {margin-top: 20px; display: inline-block;}
.section2 .house p {display: inline-block; margin-right: 10px;}
.section2 .house a {font-family: 'SCDream'; font-weight:300; font-size: 17px; float: right; color: #fff; border: solid 1px #fff; padding: 10px 35px; width: 85px; display: block; position: relative; z-index: 1;}
.section2 .house a:hover {color: #e83436; text-decoration: none;}
.section2 .house a:before {content: ''; width:0;height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1;}
.section2 .house a:hover:before{background: #fff; width:100%;transition:all .3s;}

.house .conts {float: right; padding:30px 40px; width: calc(100% - 305px); position: relative;}
.house .conts:after {content: ''; display: block; width: 100%; height: 275px; position: absolute; bottom: -275px; right: 0; background: url(../imgs/main/supsok_img.jpg) center no-repeat; background-size: cover;}
.section2 .community {background: #7eb7bf;}
.section2 .community .copy {color: #5198a2; margin-right: 25px; float: right;}
.section2 .community .copy:before,
.section2 .community .copy:after {content: ''; display: block; position: absolute; top: 25px; background: url(../imgs/main/bg3.png) no-repeat;}
.section2 .community .copy:before {left: 25px; height: 53px; width: 15px; background-position: left; animation: comm1 3s ease-in-out infinite;}
.section2 .community .copy:after {left: 42px; height: 53px; width: 35px; background-position: right; animation: comm2 3s ease-in-out infinite;}
@keyframes comm1{
	0%, 100%{transform: rotate(0);}
	50%{transform: rotate(10deg);}
}
@keyframes comm2{
	0%, 100%{transform: rotate(0);}
	50%{transform: rotate(-20deg);}
}

.section2 .community .copy div {position: absolute; bottom: 0; left: 120px;}
.section2 .community h2 {position: absolute; bottom: 0; left: 45px;}
.community a {font-family: 'SCDream'; font-weight:300; font-size: 17px; margin-top: 10px; position: relative; color: #fff; border: solid 1px #fff; padding: 10px 75px 10px 35px; display: inline-block; z-index:1;}
.community a:hover {color: #7eb7bf; text-decoration: none;}
.community a:before {content: ''; width:0;height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1;}
.community a:hover:before{background: #fff; width:100%;transition:all .3s;}
.community a:hover:after {background: url(../imgs/main/more_arr_hover.png);}
.community a:after {content: ''; display: inline-block; width: 36px; height: 8px; position: absolute; top: 15px; right: 25px; background: url(../imgs/main/more_arr.png) no-repeat;}
.community a:hover:after {animation: alinkarr 1s ease-in-out infinite;}
@keyframes alinkarr {
	0%, 100% {right: 25px;}
	50% {right: 15px;}
}
.community .conts {padding: 50px 60px 0; width: calc(100% - 345px);}
.community .conts p:before {content: ''; display: block; width: 100%; height: 155px; margin-bottom: 15px; background: #5198a2 url(../imgs/main/community_img.jpg) center bottom no-repeat; background-size: 100%;}
.section2 .box li {border-bottom: solid 1px #a7a5a5; line-height: 60px; width: 260px;}
.section2 .box li:last-child {border: 0;}
.section2 .box li a {font-size: 22px; padding: 0 10px; display: block; position: relative;}
.section2 .box li a:after {content: ''; display: inline-block;	width: 9px; height: 13px; position: absolute; top: 25px; right: 10px;	background: url(../imgs/main/iconB_arr.png);}
.section2 .box li a:hover:after {animation: alinkarr2 1s ease-in-out infinite;}
@keyframes alinkarr2 {
	0%, 100% {right: 10px;}
	50% {right: 0;}
}
.section2 .gallery, .section2 .event {position: relative;}
.section2 .gallery .copy, .section2 .event .copy {padding: 50px 60px;}

.bg {width:54px;height:163px;position:absolute;}
.bg span {display:block; position:absolute;transform:translateY(-30%); transition:all .5s;}
.section2 .gallery .bg {top: -60px; right: 60px;}
.section2 .event .bg {top: -79px; left: 60px;}

.section2 .gallery .bg span.bar1 {bottom:0;left:0;width:18px;height:84px;background:#e83436;}
.section2 .gallery .bg span.bar2 {top:0;left:28px;width:12px;height:118px;background:#7eb7bf;}
.section2 .gallery .bg span.bar3 {bottom:30px;right:0;width:3px;height:74px;background:#000;}

.section2 .event .bg span.bar1 {bottom:30px;left:0;width:3px;height:74px;background:#fabe00;}
.section2 .event .bg span.bar2 {top:0;left:14px;width:12px;height:118px;background:#7eb7bf;}
.section2 .event .bg span.bar3 {bottom:0;right:0;width:18px;height:84px;background:#fff;}

.section2 .bg.on span {transition:all .5s; transform:translateY(0);}
.section2 .bg.on span.bar2 {transition-delay: .4s;}
.section2 .bg.on span.bar3 {transition-delay: .8s;}


.section2 .gallery {background: #f6f3f3; color: #000; position: relative;}
.section2 .gallery h2 {border-bottom: 5px solid #000; padding-bottom: 20px; margin-bottom: 20px; display: inline-block;}
.section2 .gallery ul {position: absolute; bottom: 50px; right: 60px;}
.section2 .event {background: #727171; position: relative;}
.section2 .event .copy {float: right; text-align: right;}
.section2 .event p {text-align: right;}
.section2 .event .copy div {border-bottom: 5px solid #fff; padding-bottom: 20px; margin-bottom: 20px; display: inline-block;}
.section2 .event ul {position: absolute; bottom: 50px; left: 60px;}
.section2 .event li {border-color: #9f9f9f;}
.section2 .event li a {color: #fff;}
.section2 .event li a:after {background: url(../imgs/main/iconW_arr.png);}


@media (max-height: 960px) {
	.community .conts p:before {height: 140px;}
	.community a {margin-top: 10px;}
}
@media (max-width: 1780px) {
	.sideLink {right: 6%;}
}
@media (max-width: 1600px) {
	.visual .wrap {width: 96%; min-width: 96px;}
	.sideLink {right: 96px;}
	.section2 .house .copy, .section2 .community .copy {width: 120px;}
	.section2 .house .copy div {left: 20px;}
	.section2 .house h2 {left: 30px;}
	.house .conts {width: calc(100% - 205px); padding: 50px 30px;}
	.section2 .community h2 {left: 10px;}
	.section2 .community .copy div {left: 80px;}
	.community .conts {width: calc(100% - 225px); padding: 50px 40px;}
	.section2 .event .bg {left: 30px;}
}
@media (max-width: 1390px) {
	.section2 .house a {margin-top: 20px;}
	.section2 .box li {width: 190px;}
	.section2 .box h2 {font-size: 48px;}
	.section2 .box .copy div {font-size: 13px;}
	.section2 .box p {font-size: 16px; line-height: 24px;}
	.section2 .house h2, .section2 .community h2 {width: 70px; line-height: 49px;}
	.section2 .house h2 span {margin-top: 15px;}
	.section2 .gallery .copy, .section2 .event .copy {padding: 40px 30px;}
	.section2 .gallery ul {right: 40px;}
	.section2 .event ul {left: 40px;}
}
@media (max-width: 1024px) {
	.fp-enabled body, html.fp-enabled {overflow: visible !important; height: initial;}
	
	.section1, .section1 .fp-tableCell, .visualSlide li {height: 700px !important;}
	.visual .wrap {height: auto;}
	.visualSlide {top: 0;}		
	.visual .copy h2 {font-size: 45px; line-height: 75px;}
	.visual .copy h2 strong {font-size: 65px;}
	.visual .copy {top: 280px;}	
	.vsCtrl {top: 560px;}
	.vsCtrl button {width: 60px; height: 60px;}	
	.sideLink {right: 0; top: 300px;}
	.section2{padding: 0;}
	.section2 .wrap {height: auto; padding: 0;}
	.section2 .box {width: 100%; height: 415px;}
	.section2 .house .copy, .section2 .community .copy {width: 200px;}
	.section2 .house h2, .section2 .community h2 {width: 70px; line-height: 60px;}
	.section2 .house h2 span {margin-top: 15px;}
	.section2 .house .copy div {left: 50px; top: 20px;}
	.section2 .house h2 {left: 70px; top: 20px;}
	.house .conts {width: calc(100% - 325px); padding: 50px;}
	.section2 .community h2 {left: 45px; bottom: 60px;}
	.section2 .community .copy div {left: 120px; bottom: 60px;}
	.community .conts {width: calc(100% - 345px); padding: 50px 60px;}
	.section2 .box li {width: 240px;}
	.section2 .box h2 {font-size: 58px;}
	.section2 .box .copy div {font-size: 17px;}
	.section2 .box p {font-size: 20px; line-height: 30px;}
	.section2 .gallery .copy, .section2 .event .copy {padding: 0;}
	.section2 .gallery, .section2 .event {width: calc(100% - 120px); height: 315px; padding: 50px 60px;}
	.section2 .gallery ul {right: 60px;}
	.section2 .event ul {left: 60px;}	
}
@media (max-width: 680px) {	
	.section2 .house h2, .section2 .community h2 {width: 60px; line-height: 45px;}
	.section2 .house .copy, .section2 .community .copy {width: 120px;}
	.section2 .house .copy div {left: 25px;}
	.section2 .house h2 {left: 35px;}	
	.house .conts, .community .conts {width: calc(100% - 205px); padding: 40px 30px;}
	.section2 .community h2 {left: 15px;}
	.section2 .community .copy div {left: 75px;}
	.section2 .box .copy div {font-size: 12px;}
	.section2 .box h2 {font-size: 42px;}
	.section2 .box li {width: 100%;}
	.section2 .gallery, .section2 .event {height: 100%;}
	.section2 .gallery ul, .section2 .event ul {position: static; margin-top: 30px;}

	.section2 .gallery .copy, .section2 .event .copy {float: none; text-align: left;}
	.section2 .event p {text-align: left;}
	.section2 .event .bg {display: none;}
}
@media (max-width: 640px) {
	.section1, .section1 .fp-tableCell  {height: 600px !important;}
	.vsCtrl button {width: 50px; height: 50px;}
	.visual .copy {width: 310px; text-align: center; top: 180px; left: 50%; transform: translate(-50%, 0);}
	.visual .copy h2 {font-size: 32px; line-height: 50px;}
	.visual .copy h2 strong {font-size: 47px;}
	.visual .copy p:before {left: 50%; transform: translate(-50%, 0);}
	.vsCtrl {width: 310px; text-align: center; top: 520px; left: 50%; transform: translate(-50%, 0);}
	.vsCtrl .bar {width: 70px;}	
	.sideLink {width: 230px; top: 340px; right: 50%; transform: translate(50%, 0px);}
	.sideLink a {display: inline-block; float: left;}
	.section2 .box .copy div {font-size: 14px;}
	.section2 .box h2 {font-size: 45px;}
	.section2 .box p {font-size: 18px; line-height: 30px;}
	.section2 .gallery, .section2 .event {width: calc(100% - 60px); padding: 40px 30px;}
	.section2 .gallery h2 {padding-bottom: 10px; margin-bottom: 10px;}

}
@media (max-width: 510px) {	
	.section2 .house, .section2 .community {padding: 40px 0 0; height: auto;}
	.section2 .house {height: 560px;}
	.section2 .house .copy, .section2 .community .copy {float: none; margin: 0; width: calc(100% - 60px); height: auto;	padding: 30px; text-align: left;}
	.section2 .house .copy div, .section2 .community .copy div {position: static; writing-mode: lr-tb; display: block; transform: none;}
	.section2 .house h2, .section2 .community h2 {position: static; width: 100%;}
	.house .conts, .community .conts {width: calc(100% - 60px); padding: 40px 30px;}
	.section2 .house h2 span {margin: 0;}
	.section2 .house h2, .community .copy div {margin-top: 10px;}
	.community .conts p:before {height: 115px;}
	.section2 .community .copy:before {left: 210px;}
	.section2 .community .copy:after {left: 225px;}
}
@media (max-width: 400px) {
	.vsCtrl button {width: 40px; height: 40px;}
	.visual .copy h2 {font-size: 28px;}
	.visual .copy h2 strong {font-size: 42px;}
	.section2 .box h2 {font-size: 36px;}
	.section2 .box .copy div {font-size: 13px;}
	.section2 .house p br,
	.section2 .community p br {display: none;}
	.section2 .community .copy:before {left: 180px;}
	.section2 .community .copy:after {left: 195px;}
}