/* groovecode font setting */
* {font-family: 'Pretendard','Noto Sans KR'; letter-spacing: 0em;}
body {background-color: #111;}

html{ cursor: none; }
* { cursor: none; }
/* 마우스 트랙킹 div 설정 */
.mouse-circle { position:fixed; top:-100px; left:-100px; width:90px; height:90px; border-radius: 50%; background-color: #111; opacity: 0.5; transform:translate(-50%,-50%) scale(0.25); z-index: 1000; pointer-events: none; will-change: top left transform; transition: scale 2s; border:5px solid #fff;}

/* 마우스 트랙킹 hover 설정 */
.mouse-circle-hover {transform: translate(-50%,-50%) scale(0.5); transition:transform 0.5s;}
.mouse-circle-leave {transform: translate(-50%,-50%) scale(0.25); transition:transform 0.5s;}
.mouse-circle-click {transform: translate(-50%,-50%) scale(0.6); transition:transform 0.3s;}

/* 마우스 트랙킹 div 반응형 show, hide setting */
@media (max-width: 575px) {.mouse-circle {display:none;} * {cursor:auto;}}
@media (min-width: 576px) {.mouse-circle {display:none;} * {cursor:auto;}}
@media (min-width: 768px) {.mouse-circle {display:block;} * {cursor:none;}}

/* scroll bar setting */
body::-webkit-scrollbar{/* 스크롤바 막대 너비 설정 */width: 5px;} 
/* 스크롤바 막대 설정*/ 
body::-webkit-scrollbar-thumb{background-color: #111; 
/* 스크롤바 막대 높이 설정 */
/* height: 1%;  */    
/* 스크롤바 둥글게 설정 */ 
/* border-radius: 10px; */} 
/* 스크롤바 뒷 배경 설정*/ 
body::-webkit-scrollbar-track{background-color: #ffffff;}
body.open::-webkit-scrollbar-thumb {background-color: #111;}
body.open::-webkit-scrollbar-track{background-color: #111;}
/* modal gnb scroll bar hide */
.section-split-cont::-webkit-scrollbar {display: none;}
.section-split-cont { -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */}


/*=========================================================== 1. header(include)-style ===========================================================*/
/* nav */
.nav {position:fixed;width:100%; height:90px; z-index: 30;background-color:rgba(255,255,255,0);margin: 0;padding-top:35px;transition: 0.5s; top:0px;}
.nav-container {width:100%;margin-right:0px;margin-left:0px; padding-left: 50px; padding-right: 50px; }
/* nav-container 반응형 설정 */
@media (max-width: 575px) {.nav-container {padding:0px 20px;}}
@media (min-width: 576px) {.nav-container {padding:0px 20px;}}
@media (min-width: 992px) {.nav-container {padding:0px 20px;}}
@media (min-width: 1400px) {.nav-container {width : 100%; margin: 0 auto; padding: 0px 50px;}}
/* nav logo 설정 */
.nav .logo-box {float:left;padding-left:0px;}
.logo-box {width:200px;margin-top: -1px;}
.logo-box img {width: 150px; transition: all 0.5s;}
/* nav logo 반응형 설정 */
@media (max-width: 575px) {.nav .logo-box {padding-left:0px;}}
@media (min-width: 576px) {.nav .logo-box {padding-left:0px;}}
@media (min-width: 992px) {.nav .logo-box {padding-left:0px;}}
@media (min-width: 1200px) {.nav .logo-box {padding-left:0px;}}
/* nav li 설정 */
.menu-row {width:100%;}
.menu-box {margin-right: 50px;}
.index-link-btn:hover {background:#fff; color:#111; transition: 0.3s;}
.nav .menu-list {display: flex; justify-content: flex-end;}
.nav .menu-list li {font-family: 'Pretendard','Noto Sans KR'; transition:0.3s; padding-right:25px; padding-left:25px;}
.nav .menu-list li a {color:#fff; transition: transform 250ms ease-in-out, color 0.5s; position: relative; font-weight: 600 !important;  letter-spacing: 0em;}
.nav .menu-list li a:after {width:100%; content: ''; border-bottom: solid 5px rgba(0,0,0,0.5); transform: scaleX(0); transition: transform 250ms ease-in-out; left:0; bottom:4px; position: absolute; z-index: -1;}
.nav .menu-list li a:hover:after {transform: scaleX(1);}    
/* nav 반응형 설정 */
@media (max-width: 575px) {.nav .menu-list { display: none;}}        
@media (min-width: 576px) {.nav .menu-list { display: none;}}        
@media (min-width: 768px) {.nav .menu-list { display: none;}}        
@media (min-width: 992px) {.nav .menu-list { display: flex;}}        
/* nav 햄버거 버튼 설정 */
.menu-btn {position: fixed; top:39px; right: calc((100% - 1920px)/2 + 50px); z-index: 401;}
.menu-trigger, .menu-trigger span {display: inline-block; transition: all .4s; box-sizing: border-box;}
@media (max-width: 1920px) {.menu-btn {right:50px;}}
@media (max-width: 1400px) {.menu-btn {right:20px;}}

.menu-trigger {position: relative; width: 26px; height: 21px;}
.menu-trigger span {position: absolute; left: 0; width: 100%; height: 3px; border-radius: 0px; background-color: #fff ; transition: background-color 0.5s !important;}
.menu-trigger span:nth-of-type(1) {top: 0;}
.menu-trigger span:nth-of-type(2) {top: 9px;}
.menu-trigger span:nth-of-type(3) {bottom: 0;}
/* .menu-trigger.type7 span:nth-of-type(1) 
{-webkit-animation : menu-bar07-01 0s forwards; animation : menu-bar07-01 0s forwards;} */
.menu-trigger.active-7 span {background-color: #fff;}
/* nav 햄버거 버튼 responsive 설정 */
/* nav 햄버거 버튼 animation 설정 */
/* @-webkit-keyframes menu-bar07-01 {
    0% {-webkit-transform : translateY(9px) rotate(45deg);}
    50% {-webkit-transform : translateY(9px) rotate(0);}
    100% {-webkit-transform : translateY(0) rotate(0);}
}
@keyframes menu-bar07-01 {
    0% {transform : translateY(9px) rotate(45deg);}
    50% {transform : translateY(9px) rotate(0);}
    100% {transform : translateY(0) rotate(0);}
}
.menu-trigger.type7 span:nth-of-type(2) {transition : all 0s; opacity : 1;}
.menu-trigger.type7 span:nth-of-type(3) {-webkit-animation : menu-bar07-02 0s forwards; animation : menu-bar07-02 0s forwards;}
@-webkit-keyframes menu-bar07-02 {
    0% {-webkit-transform : translateY(-9px) rotate(-45deg);}
    50% {-webkit-transform : translateY(-9px) rotate(0);}
    100% {-webkit-transform : translateY(0) rotate(0);}
}
@keyframes menu-bar07-02 {
    0% {transform : translateY(-9px) rotate(-45deg);}
    50% {transform : translateY(-9px) rotate(0);}
    100% {transform : translateY(0) rotate(0);}
}
.menu-trigger.active-7 span:nth-of-type(1) {-webkit-animation : active-menu-bar07-01 0s forwards; animation : active-menu-bar07-01 0s forwards;}
@-webkit-keyframes active-menu-bar07-01 {
    0% {-webkit-transform : translateY(0) rotate(0);}
    50% {-webkit-transform : translateY(9px) rotate(0);}
    100% {-webkit-transform : translateY(9px) rotate(45deg);}
}
@keyframes active-menu-bar07-01 {
    0% {transform : translateY(0) rotate(0);}
    50% {transform : translateY(9px) rotate(0);}
    100% {transform : translateY(9px) rotate(45deg);}
}
.menu-trigger.active-7 span:nth-of-type(2) {opacity : 0;}
.menu-trigger.active-7 span:nth-of-type(3) {-webkit-animation : active-menu-bar07-02 0s forwards; animation : active-menu-bar07-02 0s forwards;}
@-webkit-keyframes active-menu-bar07-02 {
    0% {-webkit-transform : translateY(0) rotate(0);}
    50% {-webkit-transform : translateY(-9px) rotate(0);}
    100% {-webkit-transform : translateY(-9px) rotate(-45deg);}
}
@keyframes active-menu-bar07-02 {
    0% {transform : translateY(0) rotate(0);}
    50% {transform : translateY(-9px) rotate(0);}
    100% {transform : translateY(-9px) rotate(-45deg);}
} */


/*=========================================================== 2. overlay-GNB(include)-style ===========================================================*/
.overlay-logo img {width:250px;}

#overlay-menu-Content{position:fixed; top:0; left:0; right:0; bottom:0; visibility:hidden; opacity:0; z-index:-9999; display:none; overflow:hidden; background-color: rgba(255,255,255,0);}
#overlay-menu-Content .overlay-menu-bg-box{position:absolute; top:0px; left:0px; width:100%; height:100vh; display:flex;}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item{position:absolute; top:0px; width:0; height:100%; background-color:#111; transition:all 0.6s cubic-bezier(0.86, 0, 0.07, 1) 0s;}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item.split-item-0{left:-160%}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item.split-item-1{left:-120%}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item.split-item-2{left:-80%}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item.split-item-3{left:-40%}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item.split-item-4{left:0%}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item.split-item-5{left:40%}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item.split-item-6{left:80%}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item.split-item-7{left:120%}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item.split-item-8{left:160%}
#overlay-menu-Content .overlay-menu-bg-box .overlay-menu-bg-split-item.split-item-9{left:200%}
#overlay-menu-Content .overlay-menu-bg-box.open .overlay-menu-bg-split-item{width:calc(40% + 2px); transform:skewX(45deg); transition-delay:0s}
#overlay-menu-Content .overlay-overlay-menu-bg-box{position:absolute; top:0px; left:0px; width:100%; height:100vh; transform:translateX(-100%);background-color:#fff;}
#overlay-menu-ContentInnerCon{position:relative; width:100%; height:100vh;}

/* 메뉴 open */        
#overlay-menu-Content.open{opacity:1.0; visibility:visible; z-index:400;display:block;}

/* modal-GNB-text */
.section-split-cont-stage { position: fixed; top:0%; left:50%; transform: translateX(-50%); height:100%;}
.section-split-cont-box {width:100%; height:100%; transition:0.8s; overflow-y: auto; position: relative;}
.section-split-cont { height:100%; overflow: auto; overflow-x: hidden; width: 100%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}        
.section-split-cont-nav-box {width:100%; height: auto; position: absolute; padding:0; top:50%; transform: translateY(-50%);}
.section-split-cont-nav-box li {width:100%; position: relative; overflow: hidden; text-align: center; height: 200px;}
.section-split-cont-nav-box li a {position: relative; width: 100%;}
.section-split-cont-nav-box li a span {color:#fff; max-width:900px; font-weight: 700;}
.section-split-cont-nav-box li a span.ani-nav {position: absolute; left:50%; transform: translateX(-50%); bottom:-180px; transition: all 0.5s;}
.section-split-cont-nav-box li a span.ani-nav .ani-nav-new {right:10px; font-size: 150px; position: absolute; width: auto; background-color: rgba(251,188,84,0.9); border-radius: 50%; padding: 5px 15px;}
.section-split-cont-nav-box li a span.ani-nav.showTxt {position: absolute; bottom:0px; transition: all 0.5s;}
.section-split-cont-nav-box li a span.ani-nav.showTxt:after {width:100%; content: ''; border-bottom: solid 5px #fff; transform: scaleX(0); transition: transform 250ms ease-in-out; left:0; bottom:40px; position: absolute; z-index: -1;}
.section-split-cont-nav-box li a span.ani-nav.showTxt:hover:after {transform: scaleX(1); transform-origin: left;}
.blink { animation: blink-effect 2s ease-in-out infinite;}
@keyframes blink-effect { 
    0% { opacity: 0;}
    50% { opacity: 1;} 
    100% { opacity: 0; }
}
/* modal-GNB-text 반응형 setting */
@media (max-width: 575px) {.section-split-cont {padding-left: 0px; padding-right: 0px;} .section-split-cont a {font-size: 60px; padding-bottom:10px;} .section-split-cont-logo {margin-top:-5px;}  .section-split-cont-nav-box li {padding-bottom:20px !important; height:100px;} .section-split-cont-nav-box li a span.ani-nav.showTxt:after{bottom:14px !important;}}
@media (min-width: 576px) {.section-split-cont {padding-left: 0px; padding-right: 0px;} .section-split-cont a {font-size: 60px; padding-bottom:10px;} .section-split-cont-logo {margin-top:-5px;}  .section-split-cont-nav-box li {padding-bottom:30px !important; height:100px;} .section-split-cont-nav-box li a span.ani-nav.showTxt:after{bottom:14px !important;}}
@media (min-width: 768px) {.section-split-cont a {font-size: 150px; padding-bottom:10px;} .section-split-cont-logo {margin-top:-25px;} .section-split-cont-nav-box li {padding-bottom:50px !important; height:200px;} .section-split-cont-nav-box li a span.ani-nav.showTxt:after{bottom:40px !important;}}
/* @media (min-height:0px) and (max-height: 450px) {.section-split-cont-nav-box {top:130%;}}
@media (min-height:451px) and (max-height: 550px) {.section-split-cont-nav-box {top:100%;}}
@media (min-height:551px) and (max-height: 650px) {.section-split-cont-nav-box {top:80%;}}
@media (min-height:651px) and (max-height: 750px) {.section-split-cont-nav-box {top:70%;}}
@media (min-height:751px) and (max-height: 850px) {.section-split-cont-nav-box {top:60%;}} */
/* @media (max-height: 700px) {.section-split-cont-nav-box {top:70%;}} */
/* @media (max-height: 879px) {.section-split-cont-nav-box {top:60%; transform: translateY(-50%);}}
@media (min-height: 880px) {.section-split-cont-nav-box {top:50%; transform: translateY(-50%);}} */


/*=========================================================== 3. footer(include)-style ===========================================================*/
.footer {height:680px; padding:70px 0px; position: fixed !important; bottom:0px; z-index: -1; background-color: #111; visibility: hidden;}
.footer .col-xs-12 {padding-left: 0px; padding-right: 0px;}
.footer ul {padding:0px; padding:100px 0px 50px;}
.footer ul a,p,span {padding:0px 0px;}
.footer ul li.instagram {margin-top: 50px;}
.footer ul li.instagram a {font-size: 20px; line-height: 1;}
.footer ul li.instagram a span {font-size: 18px; font-weight: 300; margin-top: 5px; display: inline-block;}
.footer a,.footer p,.footer span {color:#fff; font-family: 'Railway','pretendard';}
.footer a,.footer p,.footer span:hover, .footer a,.footer p,.footer span:focus, .footer a,.footer p,.footer span:active {color:#fff !important;}
.footer .footer-gnb img {width:200px;}
.footer-text {padding:0px;font-weight: 300; margin: 0px;}
.footer-text:last-child {padding-top:20px;}
.footer .col-xs-6 {padding-right:0px; padding-left:0px;}
.footer {padding-right:0px !important; padding-left:0px !important;}
.footer-gnb a {font-weight: 900;}
.footer-text .title {font-weight: 900;}
.footer-main-text p{font-size: 60px; margin:0; line-height: 60px;}
    @media (max-width: 576px){.footer .page-desc{font-size: 24px !important; margin-top:155px; line-height: 34px;}}
    @media (min-width: 577px){.footer .page-desc{font-size: 40px !important; line-height: 50px !important;}}
    @media (min-width: 768px){.footer .page-desc{font-size: 50px !important; line-height: 60px !important;}}
    @media (min-width: 992px){.footer .page-desc{font-size: 60px !important; line-height: 70px !important;}}
/*=====================================================================================================================================================*/
/*=========================================================== 1. main page style ===========================================================*/
html, body {width: 100%;}
/* main page layout */
section.main-intro {height: 100vh; background-color: #000; margin-bottom: 680px; background: url('/page/img/main/intro.jpg') no-repeat center center; background-size: cover;}
section.main-intro .marquee {width: 100%; position: absolute; top:50%; transform: translateY(-50%);}
section.main-intro .marquee p .js-marquee {color:transparent; font-size: 300px; font-weight: 900;  -webkit-text-stroke: 1px #999; z-index: 0;}
section.main-intro .main-intro-text {position: absolute; top:50%; transform: translateY(-50%);}
section.main-intro .main-intro-text p {color:#fff; font-size: 150px; font-weight: 900;}

@media (max-width: 992px){section.main-intro .marquee p .js-marquee{font-size: 200px;} section.main-intro .main-intro-text p{font-size: 100px;}}
@media (max-width: 768px){section.main-intro .marquee p .js-marquee{font-size: 150px;} section.main-intro .main-intro-text p{font-size: 70px;}}
@media (max-width: 576px){section.main-intro .marquee p .js-marquee{font-size: 100px;} section.main-intro .main-intro-text p{font-size: 40px;}}

/* .intro .intro-item {width:100%; height: 100vh; background: url("../img/about/about-intro.png");} */
/* .intro .intro-item img {object-fit: cover; width: 100%; height: 100vh;}   */
/* main {position: absolute; top: 0; width:100%; height: 100vh; overflow: hidden; z-index: 0;}
canvas {width: 100%; height: 100%; margin: auto;}
.canvas-stage {z-index: 1; position: relative; top: 0; height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 600px;}
.canvas-stage img {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index: 0;}
.main-title {color: #fff; font-size: 90px; z-index: 1; font-weight: 900 !important; line-height: 100px;}
@media (max-width: 575px){.main-title {font-size: 24px; line-height: 34px;}}
@media (min-width: 576px){.main-title {font-size: 45px; line-height: 55px;}}
@media (min-width: 768px){.main-title {font-size: 55px; line-height: 65px;}}
@media (min-width: 992px){.main-title {font-size: 65px; line-height: 75px;}}
@media (min-width: 1200px){.main-title {font-size: 90px; line-height: 100px;}} */

/*=========================================================== 2. about page style ===========================================================*/
.about-intro {position: relative; width:100%; height: 100vh; top:0px; background: url('/page/img/about/about_intro.jpg'); background-size: cover; }
.about-contents {height:auto; margin-bottom: 680px; position: relative; width: 100%; background-color: #ffffff}
.about-intro > .cont-container {position: relative; height:100vh;}
.about-intro-title {position: relative; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%;}
.about-intro-title p {color:#fff; font-weight: 700 !important;}
.about-intro-title > .page-intro-subtitle {font-size: 90px !important; margin-bottom: 0px;}
.about-intro-title > .page-intro-subtitle:last-child {margin-top: -20px !important;}
@media (max-width: 1400px){.about-intro-title > .page-intro-subtitle {font-size: 70px !important;} .about-intro-title > .page-intro-subtitle:nth-child(2) {margin-top: -20px !important;}}
@media (max-width: 1100px){.about-intro-title > .page-intro-subtitle {font-size: 60px !important;} .about-intro-title > .page-intro-subtitle:nth-child(2) {margin-top: -15px !important;}}
@media (max-width: 992px){.about-intro-title > .page-intro-subtitle {font-size: 50px !important;} .about-intro-title > .page-intro-subtitle:nth-child(2) {margin-top: -10px !important;}}
@media (max-width: 768px){.about-intro-title > .page-intro-subtitle {font-size: 40px !important;} .about-intro-title > .page-intro-subtitle:nth-child(2) {margin-top: -5px !important;}}
@media (max-width: 576px){.about-intro-title > .page-intro-subtitle {font-size: 38px !important;} .about-intro-title > .page-intro-subtitle:nth-child(2) {margin-top: -3px !important;}}

.about-section-title {font-weight: 900;}


/* process */
.process {padding-bottom: 200px;}
.process .cont-container .process-stage {display: grid; grid-template-columns: 220px 220px 220px 220px 220px; gap:75px; margin-top: 140px;}
.process .cont-container .process-stage > div:last-child {margin-bottom: 150px;}
.process .cont-container hr {border-top: 1px solid #111;}
.process .process-icon-box img {width: 100%; margin-bottom: 20%;}
.process .process-circle {width: 220px; height: 220px; border-radius: 50%; background-color: #111; margin-bottom: 24px; position: relative; left:50%; transform: translateX(-50%);}
.process .process-circle span {color: #fff; font-size: 28px; font-weight: 700; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%;}
.process p.process-desc-title {font-weight: bold; font-size: 36px;}
.process p.process-desc-desc {font-weight: 400; font-size: 22px; line-height: 1.5;}
.process p.process-help {font-size: 16px;}
@media (min-width: 1400px) {.custom-br {display: block;}}
@media (max-width: 1399px) {
    .process p.process-desc-title {font-size: 32px;} 
    .process p.process-desc-desc {font-size: 18px;} 
    .custom-br {display: none;}
    .process .cont-container .process-stage {display: grid; grid-template-columns: 250px 250px 250px; gap:calc((100% - 750px) / 2);}
    .process .process-circle {width: 250px; height: 250px;}
}
@media (max-width: 992px) {
    .process .cont-container .process-stage {display: grid; grid-template-columns: 200px 200px 200px; gap:calc((100% - 600px) / 2);}
    .process .process-circle {width: 200px; height: 200px;}
    .process .process-circle span {font-size: 24px;}
}
@media (max-width: 768px) {
    .process .cont-container .process-stage {display: grid; grid-template-columns: 150px 150px 150px; gap:calc((100% - 450px) / 2);}
    .process .process-circle {width: 150px; height: 150px;}
    .process .process-circle span {font-size: 20px;}
}
@media (max-width: 576px) {
    .process .cont-container .process-stage {grid-template-columns: 100%; gap:0%; row-gap: 100px;} 
    .process .process-icon-box img {width: 50%;}
    .process p.process-desc-title {font-size: 28px;} 
    .process p.process-desc-desc {font-size: 16px;} 
    .custom-br {display: block;}
    .process .process-circle {width: 200px; height: 200px; margin-bottom: 48px;}
    .process .process-circle span {font-size: 24px;}
}

.partnership .cont-container {height: auto; position: relative; padding-top:200px; padding-bottom:200px;}
.partnership .main-text:nth-child(2) {margin-top: -40px; margin-bottom: 100px;}
.partnership-bg-stage {height:400px; width:100%; padding-right:18%;}
.partnership-bg {height:100%; width:100%; background: url('/page/img/about/partnership-bg.png') no-repeat center center; background-size: cover;}


/* 
.about-contents .marquee {width:100%; padding:0; margin:0; font-size: 150px; font-weight: 900;}
.about-contents .marquee p {text-transform: uppercase; white-space: nowrap; margin:0; line-height: 100px;}
.about-contents .marquee p.marquee-text.speed-2 {margin-top:-50px;}
.about-contents .marquee p .stroke {color:transparent; -webkit-text-stroke:1px #111;}

.about-contents .gsap-section {width:100%; height:1280px; background: url('../img/about/gsap_bg.png')no-repeat center center; background-size: cover; margin-top:300px; display: flex; flex-direction: column; justify-content: center; position: relative;}
.about-contents .gsap-section-mo {width:100%; height:600px; background: url('../img/about/gsap_bg.png')no-repeat center center; background-size: cover; margin-top:300px; display: none; flex-direction: column; justify-content: center; position: relative;}
    @media (max-width: 768px) {.about-contents .gsap-section {display:none;} .about-contents .gsap-section-mo {display:flex;}}
.about-contents .gsap-section .gsap-stage {width:4500px; height:600px; display: flex; justify-content: space-between; position:absolute; left:260px; }
.about-contents .gsap-section .gsap-stage .gsap-item:first-child{width:500px;}
.about-contents .gsap-section .gsap-stage .gsap-item {width:450px; height:600px; margin-right: 50px; position: relative;}
.about-contents .gsap-section .gsap-stage .gsap-item.item-2,
.about-contents .gsap-section .gsap-stage .gsap-item.item-3,
.about-contents .gsap-section .gsap-stage .gsap-item.item-4, 
.about-contents .gsap-section .gsap-stage .gsap-item.item-5,
.about-contents .gsap-section .gsap-stage .gsap-item.item-6,
.about-contents .gsap-section .gsap-stage .gsap-item.item-7, 
.about-contents .gsap-section .gsap-stage .gsap-item.item-8
{padding:50px 30px;}
.about-contents .gsap-section .gsap-stage .gsap-item p, .about-contents .gsap-section-mo .gsap-item p
{color:#fff;}
.about-contents .gsap-section .gsap-stage .gsap-item .item-title {font-size:50px; font-weight: 900; line-height: 50px;}
.about-contents .gsap-section .gsap-stage .gsap-item .item-text {font-size:18px; font-weight: 500;}
.about-contents .gsap-section .gsap-stage .gsap-item.item-1 p {font-size: 150px; font-weight: bold; letter-spacing: -0.04em; line-height: 150px; margin: 0; position: absolute; top:50%; transform: translateY(-50%);}
.about-contents .gsap-section .gsap-stage .gsap-item.item-2, .about-contents .gsap-section-mo .gsap-item.item-2,
.about-contents .gsap-section .gsap-stage .gsap-item.item-4, .about-contents .gsap-section-mo .gsap-item.item-4,
.about-contents .gsap-section .gsap-stage .gsap-item.item-6, .about-contents .gsap-section-mo .gsap-item.item-6,
.about-contents .gsap-section .gsap-stage .gsap-item.item-8, .about-contents .gsap-section-mo .gsap-item.item-8
 {background-color: #111;}
.about-contents .gsap-section .gsap-stage .gsap-item.item-2 p, .about-contents .gsap-section-mo .gsap-item.item-2 p,
.about-contents .gsap-section .gsap-stage .gsap-item.item-4 p, .about-contents .gsap-section-mo .gsap-item.item-4 p,
.about-contents .gsap-section .gsap-stage .gsap-item.item-6 p, .about-contents .gsap-section-mo .gsap-item.item-6 p,
.about-contents .gsap-section .gsap-stage .gsap-item.item-8 p, .about-contents .gsap-section-mo .gsap-item.item-8 p
{color:#fff;}
.about-contents .gsap-section .gsap-stage .gsap-item.item-3, .about-contents .gsap-section-mo .gsap-item.item-3,
.about-contents .gsap-section .gsap-stage .gsap-item.item-5, .about-contents .gsap-section-mo .gsap-item.item-5,
.about-contents .gsap-section .gsap-stage .gsap-item.item-7, .about-contents .gsap-section-mo .gsap-item.item-7 
{background-color: #fff;}
.about-contents .gsap-section .gsap-stage .gsap-item.item-3 p, .about-contents .gsap-section-mo .gsap-item.item-3 p,
.about-contents .gsap-section .gsap-stage .gsap-item.item-5 p, .about-contents .gsap-section-mo .gsap-item.item-5 p,
.about-contents .gsap-section .gsap-stage .gsap-item.item-7 p, .about-contents .gsap-section-mo .gsap-item.item-7 p
{color: #111;}
.about-contents .gsap-section .gsap-stage .gsap-item.item-9 p {color:#fff;}
.about-contents .gsap-section .gsap-stage .gsap-item.item-9 p {font-size:34px; font-weight: bold; position: absolute; top:50%; transform: translateY(-50%);} */

/* when mobile size setting | gsap -> slick */
/* .gsap-section-mo-stage .gsap-item {height:300px; font-size:20px; padding:20px;}
.gsap-section-mo-stage .gsap-item.item-1 {font-size:80px; font-weight: bold; line-height: 80px; padding:0;}
.gsap-section-mo-stage .gsap-item.item-9 {font-size:24px; font-weight: bold; line-height: 30px; padding:0 0 0 20px; display: flex; flex-direction: column; justify-content: center;}
.swiper-button-next:after, .swiper-button-prev:after {color:#ddd; font-size:35px !important;}


.about-contents .parters-title-text {padding:200px 0px; }
.about-contents .parters-title-text p {font-family: 'NeueHaasDisplay'; font-weight: 900;}
.about-contents .partners-banner {width:100%; padding-bottom:200px;}
.about-contents .partners-banner .title {font-family: 'NeueHaasDisplay'; font-weight: 900; font-size: 100px; margin: 0; padding-bottom:100px;}
.about-contents .partners-banner .partners-banner-stage {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.about-contents .partners-banner .partners-banner-stage .banner-item img {object-fit: cover; width:100%; opacity:0.6; transition: opacity 0.5s;}
.about-contents .partners-banner .partners-banner-stage .banner-item:hover img {opacity:1;}
@media (max-width: 576px){.partner-page-desc{font-size:40px !important;} .partner-page-title{font-size:60px !important;} .about-contents .partners-banner .partners-banner-stage {grid-template-columns: 1fr 1fr;}}
@media (min-width: 577px){.partner-page-desc{font-size:40px !important;} .partner-page-title{font-size:60px !important;} .about-contents .partners-banner .partners-banner-stage {grid-template-columns: 1fr 1fr;}}
@media (min-width: 768px){.partner-page-desc{font-size:80px !important;} .partner-page-title{font-size:80px !important;} .about-contents .partners-banner .partners-banner-stage {grid-template-columns: 1fr 1fr 1fr;}}
@media (min-width: 992px){.partner-page-desc{font-size:100px !important;} .partner-page-title{font-size:100px !important;} .about-contents .partners-banner .partners-banner-stage {grid-template-columns: 1fr 1fr 1fr 1fr;}}
@media (min-width: 1200px){.partner-page-desc{font-size:100px !important;} .partner-page-title{font-size:100px !important;} .about-contents .partners-banner .partners-banner-stage {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}} */


/*=========================================================== 3. work page style ===========================================================*/
.work-title {padding-top: 200px;}
.work-subtitle {padding-bottom: 200px; margin: 0px !important;}
.skin-wrap {margin-bottom: 680px !important;}
.skin-wrap .work-subtitle {font-weight: 300; font-size: 30px !important; border-bottom: 1px solid #111; margin-top: 0px !important;}
.wrap.ct-board.board-list {padding: 50px 0px 0px 0px; width: 100%;}
.board-list .gal-list .gal-item {
    box-shadow:
    1px 0 0 0 #888, 
    0 1px 0 0 #888, 
    1px 1px 0 0 #888,
    1px 0 0 0 #888 inset, 
    0 1px 0 0 #888 inset; 
    padding: 1px 0px 0px 1px;
}
#wrap {z-index: 2; position: relative; padding-bottom:120px; background: #fff;}
@media (max-width: 1000px) {.skin-wrap .work-subtitle {font-size:25px !important;} .skin-wrap .work-title {font-size: 100px !important;}}
@media (max-width: 680px) {.skin-wrap .work-subtitle {font-size:20px !important;} .skin-wrap .work-title {font-size: 80px !important;}}
@media (max-width: 576px) {.skin-wrap .work-subtitle {font-size:16px !important;} .skin-wrap .work-title {font-size: 60px !important;}}

.wrap.ct-board.board-write,
.wrap.board-write.board-edit {padding-top: 90px;}

.aui-flex.board-btn.wrap {width: 100%;}

/* read page */
.wrap.ct-board.board-read {width:unset; max-width: 1400px; padding:0px 0px 40px 0px;}
.wrap.ct-board.board-read .div-tbl {margin-top: 200px;}
.wrap.ct-board.board-read .div-tbl .tr {padding: 0px; border: 0;}
.wrap.ct-board.board-read .div-tbl .tr .thm-subject {font-size: 30px; height: auto; padding: 0px; line-height: 1em; border: 0; font-weight: 900;}
.wrap.ct-board.board-read .div-tbl .board-image {border:0;}
.wrap.ct-board.board-read .list-btn {position: absolute; top:40px; left:50%; transform: translateX(-50%); width: 120px; height: 120px; border-radius: 50%; border:1px solid #111;}
.wrap.ct-board.board-read .list-btn .text {font-size: 24px; font-weight: 900; top:50%; transform: translateY(-50%); transition: all 0.4s;}
.wrap.ct-board.board-read .list-btn .innerHover {background-color: #111; width: 130px; height: 130px; transition: all 0.4s;}
@media (max-width: 767px){
    .wrap.ct-board.board-read .edit-btn {top:200px;}
    .wrap.ct-board.board-read .delete-btn {top:200px;}
}



/*=========================================================== 4. contact page style ===========================================================*/
.contact-intro {width:100%; height: 100vh; position: relative; background-color: #fff;}
.contact-intro > .cont-container {position: relative; height:100vh; max-width: 1500px; margin: 0 auto; padding: 0px 50px;}
.contact-intro-title {font-weight: 600 !important; padding-top: 200px; }
.contact-intro-subtitle {font-weight: 300; font-size: 30px !important; border-bottom: 1px solid #111; padding-bottom: 200px; margin: 0px !important;}
@media (max-width: 1400px) {.contact-intro > .cont-container {padding: 0px 20px;}}
@media (max-width: 1000px) {.contact-intro-subtitle {font-size:25px !important;} .contact-intro-title.page-intro-title {font-size: 100px !important;}}
@media (max-width: 680px) {.contact-intro-subtitle {font-size:20px !important;} .contact-intro-title.page-intro-title {font-size: 80px !important;}}
@media (max-width: 576px) {.contact-intro-subtitle {font-size:16px !important;} .contact-intro-title.page-intro-title {font-size: 60px !important;}}


.contact-wrap {background-color: #fff; margin-bottom: 680px; }
.contact-desc {padding:200px 0px; background-color: #fff; z-index: 2; position: relative; margin-top: 100vh;}
.contact-desc p {color:#111;}
.contact-desc p:nth-child(2) {padding-bottom:90px;}
.contact-title {padding-bottom: 25px !important; margin-bottom: 0px;}
.contact-contents {height:auto; background-color: #fff; padding:0px 0px; position: relative; z-index: 2; max-width: 1500px; margin: 0 auto; padding: 0px 50px; }
@media (max-width: 1400px) {.contact-contents {padding: 0px 10px;}}
.page-subdesc {margin-bottom: 0px;}
.contact-section-3 .eng-title{font-weight: 600; margin-bottom: 0px; letter-spacing: 0em;}
.contact-section-3 .ko-title{font-weight: 600; margin-bottom: 0px; letter-spacing: 0em;}

.contact-section-stage {width:1400px; margin: 0 auto !important;}
    @media (max-width: 768px) {.contact-line{grid-template-columns: 1fr !important;}}
    @media (max-width: 1400px) {.contact-section-stage{width: 100%; padding:50px 10px;}}
.contact-input {width: 100%;}
.contact-line {display: grid; grid-template-columns: 1fr 1fr; column-gap:40px;}
.contact-line-4,.contact-line-6 {grid-template-columns: 1fr;}

.contact-line .contact-box {padding-bottom: 100px;}
.contact-line div {margin: 0px; padding:0px;}
.contact-email-label {padding:0px!important; padding-bottom: 25px !important;}
.contact-email-text-box {display: grid; grid-template-columns: 1fr 1fr; gap:25px;}
.email-address-input-box {position: relative;}
.email-address-input-box::before {content: '@'; position: absolute; right:-22px; font-size: 18px;}
.contact-contents input {border:none; border-bottom:1px solid #ddd; box-sizing: border-box; height: 100%; padding-bottom: 10px; transition: border 0.3s;}
.contact-contents input:focus {border:none; border-bottom:1px solid #111;}
.contact-line .contact-checkbox-stage {padding-bottom: 100px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 15px;}
    @media (max-width: 768px) {.contact-line .contact-checkbox-stage {grid-template-columns: 1fr 1fr;}}
    @media all and (min-width:769px) and (max-width: 992px) {.contact-line .contact-checkbox-stage {grid-template-columns: 1fr 1fr 1fr;}}
    @media (min-width:769px) and (max-width: 1350px) {.contact-line .contact-checkbox-stage {grid-template-columns: 1fr 1fr 1fr;}}
.contact-line .contact-checkbox-stage p {font-size: 16px; text-align: center; width: 100%; padding: 0px; margin: 0px; line-height: 0px;}
@media (max-width: 576px){.contact-line .contact-checkbox-stage p {font-size: 13px;}}
.contact-line .contact-checkbox-stage .contact-checkbox-box label {width:100% !important; height: 100% !important; background-color: transparent; border:1px solid #111; border-radius: 25px; padding: 15px 0px 12px; position: relative; overflow: hidden;}
/* .contact-line .contact-checkbox-stage .contact-checkbox-box label::before {content:''; position: absolute; width:100%; height:100%; background-color: #111; z-index: -1; left:0px; bottom:-100%; transition: all 0.4s;}
.contact-line .contact-checkbox-stage .contact-checkbox-box label:hover::before {bottom:0%;} */
/* .contact-line .contact-checkbox-stage .contact-checkbox-box label:hover p {color:#fff;} */
.contact-checkbox-box .contact-cat-checkbox {height:0px; margin:0px; padding:0px;}
.contact-checkbox-box label {transition: all 0.3s;}
.contact-checkbox-box p {transition: all 0.3s;}

.contact-checkbox-box label.active {background-color: #111 !important;}
.contact-checkbox-box p.active {color:#fff !important;}

.contact-line-5 select {width:100%; border:none; border-bottom:1px solid #ddd; position: relative; background:url('/page/img/contact/down-arrow.png') no-repeat 98% 30%; padding-bottom: 10px;}
.contact-message-box {height: 200px; padding:15px; border:1px solid #ddd; transition:border 0.3s;}
.contact-message-box:focus{border:1px solid #111;}
.col-xs-12.agree-text-box {height:160px; border:1px solid #111; overflow-y: scroll; padding:20px; margin-bottom: 25px;}
.contact-line-6 .padding-line {position: relative; width: 100%; height: 100%;}
.contact-line-6 .padding-line::before {content: ''; position: absolute; height:20px; width:calc(100% - 7px); background: #fff; left:0; top:0; z-index: 1; border: 1px solid #111; border-bottom: 0; border-right: 0;}
.contact-line-6 .padding-line::after {content: ''; position: absolute; height:20px; width:calc(100% - 7px); background: #fff; left:0; bottom:25px; z-index: 1; border: 1px solid #111; border-top: 0; border-right: 0;}
.agree-text-box::-webkit-scrollbar {width:6px;}
.agree-text-box::-webkit-scrollbar-thumb {background: #111;}
.contact-agree-checkbox {display: block; border:1px solid #111 !important; width:20px; height:20px !important; float: left;}
.contact-agree-checkbox:checked {background-color: #111;}
.contact-agree-box span.agree-btn-txt {line-height: 27px; font-weight: 900;}
.contact-line-6 {padding-bottom: 200px;}
.contact-line-6 p {line-height: 26px;}
.btn-submit-box {display: flex; justify-content: center; align-items: center;}
.btn-submit-box .btn {border-radius: 50%; padding:15px 15px; background-color: transparent; width: 120px; height:120px; position: relative; border: 1px solid #111; overflow: hidden;}
.btn-submit-box .btn::before {content: ''; position: absolute; bottom:-100%; width: 100%; height:100%; background-color: #111; left:0px; transition: bottom 0.4s; z-index: -1;}
.btn-submit-box .btn:hover::before {bottom:0%;}
.btn-submit-box .btn:hover span {color:#fff;}
.btn-submit-box .btn span {color:#111; width:100%; height:100%; transition: all 0.3s; font-weight: 900;}

/*=========================================================== 5. page common class responsiv style ===========================================================*/
.page-intro-title {font-weight: 600; letter-spacing: 0em; font-size: 160px;}
.page-intro-subtitle {font-weight: 600; letter-spacing: 0em; font-size: 120px;}
.page-intro-subtitle:nth-child(2){margin-bottom:-65px;}

@media (max-width: 576px){.page-intro-title {font-size: 100px !important;} .page-intro-subtitle {font-size: 30px !important;} .page-intro-subtitle:nth-child(2){margin-bottom:-15px !important;}}
@media (max-width: 768px){.page-intro-title {font-size: 120px !important;} .page-intro-subtitle {font-size: 55px !important;} .page-intro-subtitle:nth-child(2){margin-bottom:-25px !important;}}
@media (max-width: 992px){.page-intro-title {font-size: 160px !important;} .page-intro-subtitle {font-size: 70px !important;} .page-intro-subtitle:nth-child(2){margin-bottom:-30px !important;}}
@media (max-width: 1200px){.page-intro-title {font-size: 160px !important;} .page-intro-subtitle {font-size: 100px !important;} .page-intro-subtitle:nth-child(2){margin-bottom:-50px !important;}}


    /* page intro title responsive left setting */
    @media (max-width:1480px){.contact-intro-title {left:20px;}}
    /* page description responsive font setting */
    @media (max-width: 576px){.page-desc{font-size: 30px !important;} .page-subdesc{font-size: 16px !important;} .page-desc:nth-child(2) {margin-top: -20px !important;} .contact-desc .page-desc {letter-spacing: 0em;}}
    @media (min-width: 577px){.page-desc{font-size: 50px !important;} .page-subdesc{font-size: 20px !important;} .page-desc:nth-child(2) {margin-top: -35px !important;} .contact-desc .page-desc {letter-spacing: 0em;}}
    @media (min-width: 768px){.page-desc{font-size: 60px !important;} .page-subdesc{font-size: 24px !important;} .page-desc:nth-child(2) {margin-top: -40px !important;} .contact-desc .page-desc {letter-spacing: normal;}}


@media (min-width: 992px){}
@media (min-width: 1200px){}