@charset "utf-8";

/* reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}

/*layout*/
body {font-family: 'NanumSquare', sans-serif !important; font-size: 14px; color:#4e4e4e; line-height: 1.4;}
.wrap {width: 100%; min-width: 1100px; overflow: hidden;}

/*header*/
header {width: 100%; height: 120px; line-height: 120px; padding: 0 60px; box-sizing: border-box; position: fixed; top:0; z-index: 100; }
header.on {background: #fff;}
header .logo {display: block; font-size: 42px; font-weight: 900;letter-spacing: -6px; color: #39312b; float: left;}
header nav {float: right;}
header nav .gnb li {display: inline-block; margin-left: 60px;}
header nav .gnb li a {display: block; font-size: 18px; text-transform: uppercase; position: relative;}
header nav .gnb li a:after {content: ''; width: 0%;height: 1px; position: absolute;background: #888; bottom: 47px; left: 50%; transform: translateX(-50%);transition: all 0.5s;}
header nav .gnb li a:hover:after, header nav .gnb li a:focus:after {width: 100%;}

/*visual*/
section.visual {margin-top: 120px; padding-bottom: 50px; position: relative;}
section.visual:before {content: ''; width: 53%; height: 400px; position: absolute; bottom: 0; right: 0;background: #f0f0f0;}
section.visual .img {width: 94%; text-align: center; position: relative;}/*페이지숫자이미지가 보이기위해 overflow: hidden 지워줌*/
section.visual .img .imgBox {display: block; width: 100%; height: 100%; overflow: hidden;}/* img만 깜싸준 곳에 오버플로우줌 => 이미지 스케일이 커졌다가 줄어들 때 넘치는 부분을 감추기 위해 overflow/:hidden을 줌*/
/* 페이지숫자 이미지*/
section.visual .img .page {position: absolute; right: -43px; top:50%; transform: translateY(-50%);}
section.visual .img img {width: 100%;}
section.visual .title {position: absolute; top:40%; left: 8%; color: #fff;}
section.visual .title h2{font-size: 50px; margin-bottom: 30px;}
section.visual .title p {font-size: 20px; font-weight: 300;}
section.visual .menu {position: absolute; bottom: 15%; left: 8%;}
section.visual .menu li{float: left; margin-right: 60px; }
section.visual .menu li a{display: block; color: #fff;}
section.visual .menu li a p {float: left; font-weight: bold; font-size: 20px; line-height: 1.6;}
section.visual .menu li a p span {display: block;font-weight: 100; font-size: 15px; color: #aaa;}
section.visual .menu li a .arrow {display: block; float: right; margin-top: 10px; margin-left: 20px; position: relative; z-index: 1; }
section.visual .menu li a .arrow:before {content: ''; width: 40px; height: 40px; background: rgba(252, 252, 252, 0.4);position: absolute; top:-10px; right: -10px; z-index: -1; transition: all 0.2s;}
section.visual .menu li a:hover .arrow:before,section.visual .menu li a:focus .arrow:before {right: 0; top: 0;}

section.visual .img .mask {display: block; position: absolute; top:0; width: 1px;height: 100%;background: rgba(255, 255, 255, 0.16); }
section.visual .img .mask.a {left: 0%;} 
section.visual .img .mask.b{left: 25%;} 
section.visual .img .mask.c {left: 50%;} 
section.visual .img .mask.d {left: 75%;} 

@keyframes mask {
    0%{width: 25%; background: #000;}
    50%{width: 25%; background: #000;}
    99% {background: #000;}
}
section.visual .slick-active .img .mask.a {animation-name: mask; animation-duration: 0.4s; }
section.visual .slick-active .img .mask.b {animation-name: mask; animation-duration: 0.6s; }
section.visual .slick-active .img .mask.c {animation-name: mask; animation-duration: 0.8s; }
section.visual .slick-active .img .mask.d {animation-name: mask; animation-duration: 1s; }

@keyframes slid-up {
    0%{opacity: 0;}
   40%{opacity: 0; transform: translateY(40px);}
}

section.visual .slick-active .title h2{animation-name:slid-up; animation-duration: 1.5s; }
section.visual .slick-active .title p {animation-name:slid-up; animation-duration: 2.2s;}
section.visual .menu {animation-name:slid-up; animation-duration: 2.8s;}
section.visual .slick-active .imgBox img {transform: scale(1); animation-name: scaleani; animation-duration: 5.2s;}

@keyframes scaleani {
    0%{transform: scale(1.3);}
   30%{transform: scale(1.3);}
}
/*visual - slick-dots*/
.slick-dots {position: absolute;  right: 4.5%; bottom: 30px;}
.slick-dots li button {text-indent: -9999px; width: 12px; height: 12px;background: #ccc; border:none; cursor:pointer; margin-bottom: 15px;}
.slick-dots li.slick-active button {background: #39312b; }



/*section.about*/
section.about {width: 95%; margin:40px auto;  text-align: center; position: relative;}
section.about img {width: 100%;}
section.about .inner {width: 100%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}
section.about .inner h2 {font-size: 30px; color: #fff; font-weight: normal;}
section.about .inner .line {width: 35%;margin: 80px auto 30px; position: relative; }
section.about .inner .line span {display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.25); }
section.about .inner .line li{width: 6px; height: 6px; border-radius: 50%; background: #fff; position: absolute;}
section.about .inner .line li.a {left: 0; top:-2px;}
section.about .inner .line li.b{left: 50%; transform: translateX(-50%); top:-2px;}
section.about .inner .line li.c {right: 0; top:-2px;}
section.about .inner .line li:before {content: ''; width: 100%; height: 100%; border-radius: 50%; background: rgba(255,255, 255, 0.70); position:absolute; left: 50%; top:50%; margin-top: -3px;margin-left: -3px; animation: dot 1.5s infinite;}
/*animation-iteration-count: infinite; 애니메이션 무한반복*/

@keyframes dot {
    100%{opacity: 1; transform: scale(3.5); opacity: 0;}
}
section.about .inner ul {width: 60%; margin: 0 auto;}
section.about .inner ul li {color: #c5c5c5; float: left; width: 33.3333%; font-size: 17px; font-weight: 100; }
section.about .inner ul li h3{font-size: 18px; margin-bottom: 20px; font-weight: normal; color:#fff;}

/*animation*/
@keyframes opacity-ani {
    0%{opacity: 0;}
    70%{opacity: 0;}
}

@keyframes slid-up2 {
    0%{opacity: 0;}
   70%{opacity: 0; transform: translateY(40px);}
}

section.about .inner.motion h2{animation-name:slid-up; animation-duration: 0.8s; }
section.about .inner.motion .line span {animation-name:opacity-ani; animation-duration: 0.8s;}
section.about .inner.motion .line li.a {animation-name:opacity-ani; animation-duration: 1.2s;}
section.about .inner.motion .line li.b {animation-name:opacity-ani; animation-duration: 1.6s;}
section.about .inner.motion .line li.c {animation-name:opacity-ani; animation-duration: 2s;}
section.about .inner.motion ul li {animation-name:slid-up2; animation-duration: 2.4s;}
section.about .inner.motion ul li:nth-child(2) {animation-name:slid-up2; animation-duration: 2.8s;}
section.about .inner.motion ul li:nth-child(3) {animation-name:slid-up2; animation-duration: 3.2s;}


/*section.premium*/
section.premium {width: 95%;margin: 40px auto; padding: 100px 0; box-sizing: border-box; height: 1020px; background: url(../img/con2_bg.jpg)no-repeat center/cover; position: relative;}
section.premium .txtImg{position: absolute;left: 0; top:20%; display: block; width: 100%; overflow: hidden;}
section.premium .txtImg.motion { animation-name: widthAni; animation-duration: 2.5s;}
@keyframes  widthAni {
    0%{width:0%;}
   40%{width:0%;}
   100%{width:100%;}
}

section.premium .title {position: absolute; left:8%; top:35%; }
section.premium .title h2{font-size: 30px; margin-bottom: 20px;}
section.premium .title p {font-size: 19px; line-height: 1.6; margin-bottom: 30px;}
section.premium .title a{font-size: 24px; display: inline-block; position: relative;}
section.premium .title a:before {content: ''; width: 80px; height: 15px; background: rgba(0, 0, 0, 0.08);position: absolute; bottom: 0; transition: all 0.3s;}
section.premium .title a:hover:before, section.premium .title a:focus:before {width: 0%;}

/*foucs는 tab키로 이동해서 요소가 선택되거나, 마우스가 이벤트상태일 때 */
section.premium .banner li{position: absolute; box-shadow: 5px 6px 15px rgba(3, 3, 3, 0.4);width: 15%; }
section.premium .banner li img{width: 100%;}
section.premium .banner li:nth-child(1).motion{left: 45%; top:15%; animation-name:slid-up; animation-duration: 1.2s; }
section.premium .banner li:nth-child(2).motion{left: 37%; top:50%; animation-name:slid-up; animation-duration: 1.8s; }
section.premium .banner li:nth-child(3).motion{left: 55%; top:62%; animation-name:slid-up; animation-duration: 2.2s; }
section.premium .banner li:nth-child(4).motion{right: 2%;width: 32%;max-width: 580px; animation-name:slid-up; animation-duration: 1.5s; }

/*section.global*/
section.global{width: 95%; margin:40px auto 0; padding: 40px 0; text-align: center;position: relative;}
section.global:before {content: ''; width: 100%; height: 45%;background: #eee; position: absolute; left: 0; bottom:0; z-index: -1;}
section.global .title h2 {font-size: 30px; margin-bottom: 20px;}
section.global .title p {font-size: 18px; line-height: 1.4; margin-bottom: 50px;}
section.global ul {overflow: hidden;padding-top: 50px;}
section.global ul li {float: left; width: 25%; padding: 15px;box-sizing: border-box;}
section.global ul li:nth-child(1),section.global ul li:nth-child(3){margin-top: -50px;}
section.global ul li a {display: block;}
section.global ul li a .img {box-shadow:10px 10px 10px rgba(0,0,0,0.25);position: relative;transition: all 0.2s;}
section.global ul li a .img img {width: 100%;}
section.global ul li a .img:after {content:'VIEW'; width: 100%; height: 100%; background: rgba(44,35,28,0.8);position: absolute; left: 0; top:0;font-size: 22px; color:#d4d4d4; padding-top: 200px;box-sizing: border-box; opacity: 0;transition: all 0.2s; }
section.global ul li a:hover .img,section.global ul li a:focus .img {transform: translate(-8px,-8px); box-shadow: 15px 18px 10px rgba(0,0,0,0.35); }
section.global ul li a:hover .img:after,section.global ul li a:focus .img:after {opacity: 1;}  
section.global ul li a h3{font-size: 22px;margin:40px 0 15px;}
section.global ul li a h3 span {display: block; font-size: 18px; font-weight: normal; color: #888;}
section.global ul li a p{font-size: 17px;}

/*animation*/
section.global.motion ul li{animation-name: slid-up; animation-duration: 1s;}
section.global.motion ul li:nth-child(2){ animation-duration: 1.4s;}
section.global.motion ul li:nth-child(3){ animation-duration: 1.7s;}
section.global.motion ul li:nth-child(4){ animation-duration: 2s;}

/*footer*/
footer {padding: 80px 0 0; text-align: center;}
footer .sns li {display: inline-block; margin-right: 30px;}
footer .footerLogo {font-size: 40px;; font-weight: 900; letter-spacing: -6px; color: #39312b; margin: 40px 0 20px;}
footer ul li{font-size: 17px; line-height: 1.4;}
footer ul li .copyright {font-size: 15px; font-weight: 100; color:#888; display: block; margin-top:20px; }
footer .box {padding: 150px 0; background: url(../img/bottom_bg.jpg) no-repeat center/cover; margin-top: 80px;}
footer .box.motion h2 {color: #fff; font-size: 22px; font-weight: normal; animation-name: slid-up; animation-duration: 1s;}


/*모바일 네비 추가*/
header .open {display: none;}
header .close {display: none;}

/*모바일용 줄바꿈*/
br.mo {display: none;}

/*반응형 시작*/
/*테블릿모드 : 1100px이하~ 951px*/
@media screen and (max-width:1100px){
    .wrap {min-width: 100%;}
    
    /*header*/
    header {height: 60px; line-height: 60px;padding:0 10px;}
    header .open {display: block; float: right;font-size: 32px; height: 60px; padding-top: 5px; box-sizing: border-box;}
    header .bg {width: 100%; height: 100vh; background: rgba(0,0,0,0.6); display: block; position: absolute; top:0; left: 0; z-index: 200; display: none;}
    header .logo {font-size: 30px; letter-spacing: -4px;}
    header nav{background: #fff; width: 0; height: 100vh; position: absolute; right: 0; top:0; overflow: hidden; transition: width 0.3s; z-index:300; }
    header nav.on {width: 70%; max-width: 300px; }
    header nav .close {display: block; position: absolute; right: 10px; top:0; font-size: 35px; padding-top: 5px; box-sizing: border-box;}
    
    
    header nav .gnb {margin-top: 100px;}
    header nav .gnb li {display: block; width: 100%; margin:0; line-height: 60px;}
    header nav .gnb li a {width: 100%; padding-left: 30px; box-sizing: border-box;font-size:20px; }
    header nav .gnb li a:after {display: none;}
    
    /*visual*/
    section.visual {margin-top: 60px;}
    section.visual .img img {height: 100%; width: auto;}
    section.visual .title {left: 5%;}
    section.visual .menu {width: 100%; left: 5%;}
    section.visual .menu li {margin-right: 30px;}
    section.visual .menu li a p {font-size: 17px;}
    .slick-dots {right: 2.5%;}
    
    /*about*/
    section.about {width: 100%; height: 600px;}
    section.about img{height: 100%; width: auto;}
    section.about .inner .line {width: 40%;}
    section.about .inner ul {width: 80%;}
    section.about .inner ul li {width: 50%;}
    section.about .inner ul li:nth-child(3){margin-left: 25%;}
    
    /*premium*/
    section.premium {width: 100%; height:800px;}
    section.premium .title {left: 5%;}
    section.premium .txtImg{left: 5px;}
    
    /*global*/
    section.global {width: 100%;}
    section.global ul li {padding: 10px;}
    section.global ul li a p {font-size: 15px;}
    section.global ul li a .img:after {display: none;}     
}

/*950px 이하 - 751px 테블릿 참고*/
@media screen and (max-width:950px){
   /*visual */
    section.visual .menu {display: none; width: 0; height: 0;}
    section.visual .img {width: 92%;}
    
    /*about*/
    section.about {height: 480px;}
    section.about .inner .line {width: 60%;}
    section.about .inner ul{width: 95%;}
    section.about .inner ul li{width: 33.3333%; font-size: 12px;}
    section.about .inner ul li:nth-child(3){margin-left: 0;}
    
    /*premium*/
    section.premium .title {width: 100%; left: 0; top:20px; text-align: center;}
    section.premium .txtImg {height: 60px; left: 20px; top:28%;}
    section.premium .txtImg img {height: 100%;}
    section.premium .banner {position:relative; width: 80%; left: 50%; transform: translateX(-50%);top:30%; height: 500px;}
    section.premium .banner li:nth-child(1).motion {left: 15%; width: 22%;}
    section.premium .banner li:nth-child(2).motion {left: 8%; width: 22%;}
    section.premium .banner li:nth-child(3).motion {left: 38%; width: 22%;}
    section.premium .banner li:nth-child(4).motion {left: 50%; width: 48%;}
    
    /*global*/
    section.global .title h2 {font-size: 20px;}
    section.global .title p {font-size: 13px;}
    section.global ul {width: 95%; margin: auto;}
    section.global.motion ul li {width: 50%; margin-bottom: 20px;}
    section.global ul li a h3 {font-size: 16px; margin: 20px 0 10px;}
    section.global ul li a h3 span {font-size: 12px;}
    section.global ul li a p{font-size: 10px;}  
    section.global:before {height: 48%;}
    
    /*footer*/
    footer {padding-top: 50px;}
    footer .sns li:last-child {margin-right: 0;}
    footer .footerLogo {font-size: 28px; letter-spacing: -4px;}
    footer ul li {font-size:13px; }
    footer ul li .copyright {font-size: 13px; margin-top: 10px;} 
    footer .box {padding: 80px 0;}
    footer .box.motion h2{font-size: 17px;}  
}
/* 750px 이하 - 모바일 디바이스 체크 */  
@media screen and (max-width:750px){
    /*visual*/
    section.visual {height: 80vh; overflow: hidden;}
    section.visual .img {width: 87%;}
    section.visual .img img {height: 80vh; width:auto;}
    section.visual .img .page img {width: 75%; height: auto;margin-left: 8%;}
    br.mo {display: block;}
    section.visual .title h2{font-size: 29px;}
    section.visual .title p{font-size: 14px;}
    .slick-dots{right: 20px;}
    
    /*about*/
    section.about .inner.motion h2 {font-size: 20px; margin-bottom: 10px;}
    section.about .inner .line {display: none;}
    section.about .inner ul li {width: 100%;margin: 20px 0 0;font-size: 13px;}
    section.about .inner ul li h3 {font-size: 16px; margin-bottom: 8px;}
    
    /*premium*/
    section.premium {height: 685px;}
    section.premium .title h2{font-size: 20px;}
    section.premium .title p {font-size: 13px; margin-bottom: 20px;}
    section.premium .title a {font-size: 18px;}
    section.premium .title a:before {width: 60px;height: 12px;}
    section.premium .txtImg {left: 0; height: 32px; text-align: center;}
    section.premium .banner {height: 400px; width: 100%;}
    section.premium .banner li:nth-child(1).motion {left: 10%;}
    section.premium .banner li:nth-child(2).motion {left: 5%;}
    section.premium .banner li:nth-child(3).motion {left: 42%;}
    section.premium .banner li:nth-child(4).motion {left: 44%;top: -5%;}
}
/* 320px 이하  - 280px  체크 - 개발자도구에서 갤럭시 폴드 기종 추가 */ 
@media screen and (max-width:320px){
    section.visual .title h2 {font-size: 22px;}
    section.visual .title p {font-size: 11px;}
    section.visual .img .page img {width: 55%; margin-left: 15%;}
    .slick-dots li button {height: 8px;margin-bottom: 15px;}

    /*about*/
    section.about {height: 480px;}
    section.about .inner.motion h2 {font-size: 16px;}
    section.about .inner ul li h3 {font-size: 14px;}
    section.about .inner ul li {font-size: 11px;}
    
    /*premium*/
    section.premium {height: 600px;}
    section.premium h2 {font-size: 16px;}
    section.premium p {font-size: 11px;}
    section.premium .banner {height: 350px;}
    section.premium .txtImg.motion {top:33%;}
    section.premium .banner {top:38%;}
    section.premium .banner li:nth-child(1).motion {width: 25%;}
    section.premium .banner li:nth-child(2).motion {width: 25%;}
    section.premium .banner li:nth-child(3).motion {width: 25%;}
    
    /*global*/
    section.global .title h2{font-size: 16px;}
    section.global .title p {font-size: 11px;}
    section.global ul li a h3 {font-size: 13px; }
    
    /*footer*/
    footer ul li {font-size: 10px;}
    footer .box  {padding: 50px 0;}
    footer .box.motion h2 {font-size: 14px;}  
}