@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* reset */
* {margin: 0;padding: 0; box-sizing: border-box;}
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;}
a:focus {outline: none}
button:focus {outline: none}

.en {font-family: 'Albra Trial', sans-serif; font-weight: 200;}
body {font-family: 'pretendard', sans-serif; background: #121212; color: #fff; font-weight: 400; cursor: url('../img/cursor.png') 0 0, auto;}
section{height: 100vh;}


/* 마우스 포인터 */
body.clicked {cursor: url('../img/cursor2.png'), auto;}
a:hover {cursor: url('../img/cursor2.png'), auto;}
button:hover {cursor: url('../img/cursor2.png'), auto;}


/* layout */
header {position: fixed; width: 100%; z-index: 9999; transition: transform 0.3s ease;}
.headerInner { width: 100%; padding: 50px 3%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; }
.headerInner a {font-size: 25px; display: block;}
.headerInner .menu {display: block; width: 50px; background: transparent; border: none; cursor: pointer; z-index: 9999; position: relative; }
.headerInner .menu span {display: block; width: 100%; height: 3px; background: #fff; margin-bottom: 12px; transition: transform 0.4s ease, opacity 0.3s ease; }
.menu.active span:nth-child(1) { transform: translateY(18px) rotate(45deg); background: #FF669B; }
.menu.active span:nth-child(2) {display: none;}
.menu.active span:nth-child(3) { transform: translateY(2px) rotate(-45deg); background: #FF669B;}

/* header 스크롤 */
header.hide {transform: translateY(-100%);}
header.show {transform: translateY(0);}





/* 햄버거 메뉴 */
.menuWrap {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); transform: translateY(-100%); z-index: 9000; opacity: 0; transition: all 0.5s;}
.menuWrap.on {display: block; transform: translateY(0); opacity: 1;}

.menuInner {width: 80%; height: 100%; margin: 0 auto; position: relative; z-index: 9999;}
.menuWrap .gnb { padding: 0 150px; position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between;  text-align: left;}
.menuWrap .gnb > ::after {content: ''; width: 12px; height: 12px; border-radius: 50%; background: #FF669B; position: absolute; top: -50px; left: 0; opacity: 0; transition: all 0.3s; }
.menuWrap .gnb > li:hover:after {opacity: 1; position: absolute; top: -10px; transition: all 0.3s;} 
.menuWrap .gnb > li {position: relative; line-height: 2.5;}
.menuWrap .gnb > li .sub li {font-size: 18px; line-height: 2.5; color: #fff; transition: color 0.2s ease;}
.menuInner > .gnb {width: 100%; display: flex; justify-content: space-between;}
.menuWrap .gnb li {color: #fff; font-size: 25px; font-weight: normal; transition: opacity 0.3s ease;}
.menuWrap .gnb:hover li { opacity: 0.5;}
.menuWrap .gnb li:hover { opacity: 1;}
.menuWrap .gnb li .sub li:hover { opacity: 1; color: #FF669B;}



/* section01 */
.section01 {background: url(../img/bgimg2.png) no-repeat center/cover; position: relative; }
.section01 p span{font-size: 110px; display: block;}
.section01 p{font-size: 20px; position: absolute; right: 5%; bottom: 10%; text-align: right; }



/* section02 */
.section02 {position: relative; height: 120vh;  width: 100% ; }
.section02 .slide-wrap{transition: all 2.2s; position: relative; height: 100%; width: 100%; } 
.section02 .slide-wrap .slide{align-items: center; height: 100%; text-align: center; }
.section02 .slide-wrap .slide li img{filter: brightness(70%); margin: 0 auto; margin-top: 215px; width: 410px; height: 620px;}
.section02 .slide-wrap .slide li{position: relative; transition: transform 0.3s ease; cursor: pointer; }
.slide li.active {transform: translateX(-205px); }
.section02 .slide-wrap .slide li .readmore{position: absolute; top: 85% ; left: 50%; transform: translateX(-50%);}
.section02 .slide-wrap .slide li span{display: block; text-align: center; font-size: 30px; font-weight: 400;  }
.section02 .slide-wrap .slide li span:nth-of-type(2){background: rgba(255, 255, 255, 0.3); border-radius: 50px; display: inline-block; padding: 10px 20px; font-size: 15px; margin-top: 10px;}


.section02 .card-text{background: #fff; color: #000; padding:60px 50px 190px; border-radius: 30px; font-size: 16px; line-height: 1.6; opacity: 0;  transition: opacity 0.4s ease; position: absolute; top: 19%; left: 58%;  width: 430px; visibility: hidden; pointer-events: none; box-sizing: border-box ;   height: 620px;}
.section02 .card-text.active {opacity: 1;  transform: translateX(-140px);  visibility: visible; }
.section02 .card-text .name{font-size: 23px;  display: flex; align-items: center; margin-right: 20px; color: #79C6D1; }
.section02 .card-text .name span{font-size: 12px; background: #79C6D1; color: #000; border-radius: 50px; padding: 5px 10px; }
.section02 .card-text .name span:nth-child(1){ margin: 0 4px 0 10px;}
.section02 .card-text .role{ margin-bottom: 20px;}
.section02 .card-text .date{color: #444444; font-size: 14px;}
.section02 .card-text .close span{color: #79C6D1; font-weight: bold; display: block;font-size: 25px; position: absolute; top: 5%; right: 10%; pointer-events: auto; z-index: 100;  cursor: pointer; }
.section02 .more{position: absolute; bottom: 4%; right: 10%;}
.section02 .more li{margin-bottom: 10px;}
.section02 .more li a img{display: flex; flex-direction: column;}


.section02 .card-text{background: #fff; color: #000; padding:60px 50px 190px; border-radius: 30px; font-size: 16px; line-height: 1.6; opacity: 0;  transition: opacity 0.4s ease; position: absolute; top: 19%; left: 58%;  width: 430px; visibility: hidden; pointer-events: none; box-sizing: border-box ;   height: 620px;}
.section02 .card-text.active {opacity: 1;  transform: translateX(-140px);  visibility: visible; }
.section02 .card-text .name{font-size: 23px;  display: flex; align-items: center; margin-right: 20px; color: #79C6D1; }
.section02 .card-text .name span{font-size: 12px; background: #79C6D1; color: #000; border-radius: 50px; padding: 5px 10px; }
.section02 .card-text .name span:nth-child(1){ margin: 0 4px 0 10px;}
.section02 .card-text .role{ margin-bottom: 20px;}
.section02 .card-text .date{color: #444444; font-size: 14px;}
.section02 .card-text .close span{color: #79C6D1; font-weight: bold; display: block;font-size: 25px; position: absolute; top: 5%; right: 10%; pointer-events: auto; z-index: 100;  cursor: pointer; }
.section02 .more{position: absolute; bottom: 4%; right: 10%;}
.section02 .more li{margin-bottom: 10px;}
.section02 .more li a img{display: flex; flex-direction: column;}



/* section02 - slick-arrow */
.slick-prev, .slick-next {display: block; position: absolute; top: 45%; background:none; color: #fff;
padding: 10px 15px; font-size: 30px; border: none; cursor: pointer; z-index: 10;}
.slick-prev {left: 650px; }
.slick-next {right: 650px; }


/* section02 -counter  */
.slide-wrap .counter {position: absolute; font-size: 22px; left: 50%; bottom: 19%; transform: translateX(-50%); color: #fff;}
.slide-wrap .counter .now{font-size: 22px;}
.slide-wrap ul li .num{width: 100%;}


/* section03 */
.section03 { position: relative; overflow: hidden; height: 150vh;}  
#GroupWrapper {position: absolute; top: 120%; left: 45% ;cursor: grab; transform-origin: center center; margin: 0 auto;}
#GroupWrapper.grabbing {cursor: grabbing;}
.Box {position: absolute; top: 0; left: 0; width: 200px; height: 280px; transform-origin: center center;}
.section03 .Box img {width: 100%; height: 100%; border-radius: 10px; filter: brightness(80%);transition: all 0.4s;}
.section03 .Box img:hover{filter: brightness(100%); transform: scale(1.05); transition: all 0.4s;}
.section03 .textBox.active {visibility: visible; opacity: 1;}
.section03 .textBox span{font-size: 25px; font-style: italic; font-weight: 600; color: #fff; margin-bottom: 10px; display: block; }
.section03 .textBox {font-size: 18px; color: #8E8B85;   text-align: center; position: absolute; left: 50%; top: 85%; transform: translate(-50%); pointer-events: none; width: 40%; visibility: hidden; opacity: 0; transition: opacity 0.3s ease; }


/* responsive */
@media screen and (max-width: 1700px) {
    .slick-prev, .slick-next{top: 46%;}
    .slick-prev{left: 300px;}
    .slick-next{right: 300px;}
    .slide li.active {transform: translateX(-210px); }
    .section02 .card-text.active { transform: translateX(-110px);  }

}

@media screen and (max-width: 1400px) {
    /* tab-menu */
    .menuInner {width: 100%;}
    .menuWrap .gnb {transform: translateY(-50%);}
    .menuWrap .gnb > ::after{width: 10px; height: 10px;}
    .menuWrap .gnb > li { font-size: 25px; padding-top: 30px; }
    .menuWrap .gnb > li .sub li { font-size: 16px; line-height: 2;}
    .menuWrap .gnb > ::after {content: ''; width: 12px; height: 12px; top: -30px; left: 0; opacity: 0;}
    .menuWrap .gnb > li:hover:after {opacity: 1; position: absolute; top: 15px; transition: all 0.3s;} 


    .section01{height: 80vh;}

    .section02 .slide-wrap .slide li img{width: 345px; height: 500px;}
    .slick-prev, .slick-next{top: 38%;}
    .slick-prev{left: 200px;}
    .slick-next{right: 200px;}
    .slide li.active {transform: translateX(-170px); }
    .section02 .card-text.active { transform: translateX(-72px);  }
    .section02 .card-text{font-size: 12px; width: 345px; height: 500px; top: 19%;} 
    .section02 .more{display: flex; gap: 5px;}
    .slide-wrap .counter {bottom: 31%;}
    .section02 .slide-wrap .slide li .readmore {top: 80%;}
    .section02 .card-text .name span{font-size: 8px; padding: 5px;}


    .section03{height: 100vh;}
    #GroupWrapper{top: 120%;}
    .Box {width: 170px; height: 230px;}
    .section03 .textBox span{font-size: 24px; width: 50%; margin: 0 auto; margin-bottom: 10px;}
    .section03 .textBox{font-size: 18px; width: 100%; top: 78%;}
}





@media screen and (max-width: 1024px) {
    /* header */
    .headerInner .ent-text{font-size: 18px;}
    .headerInner .menu {width: 25px;}
    .headerInner .menu span{width: 100%; height: 1px; margin-bottom: 7px;}
    
    /* tab-menu */
    .menuInner {width: 80%;}
    .menuWrap .gnb {transform: translateY(-50%); padding: 0;}
    .menuWrap .gnb > ::after{width: 7px; height: 7px;}
    .menuWrap .gnb > li { font-size: 22px; padding-top: 30px; }
    .menuWrap .gnb > li .sub li { font-size: 16px; line-height: 2;}
    .menuWrap .gnb > ::after {content: ''; width: 10px; height: 10px; top: -20px; left: 0; opacity: 0;}
    .menuWrap .gnb > li:hover:after {opacity: 1; position: absolute; top: 25px; transition: all 0.3s;} 
    .menu.active span:nth-child(1) {transform: translateY(10px) rotate(45deg);}



    .section01{height: 58vh;}
    .section01 p span{font-size: 80px;}
    .section01 p{font-size: 16px;}

    .section02{height: 100vh;}
    .section02 .slide-wrap .slide li img{width: 315px; height: 480px;}
    .slick-prev, .slick-next{top: 47%;}
    .slick-prev{left: 160px;}
    .slick-next{right: 160px;}
    .section02 .slide-wrap .slide li .readmore {top: 80%;}
    .slide li.active {transform: translateX(-155px); }
    .slide-wrap .counter {bottom: 20%;}
    .section02 .card-text{font-size: 12px; width: 327px; height: 479px; top: 22.8%;} 
    .section02 .card-text .name{font-size: 20px;}
    .section02 .card-text .date {font-size: 11px;}
    .section02 .card-text.active { transform: translateX(-50px);  }


    #GroupWrapper{top: 110%;}
    .Box {width: 140px; height: 190px;}
    .section03 .textBox span{font-size: 18px; width: 50%; margin: 0 auto; margin-bottom: 10px;}
    .section03 .textBox{font-size: 15px; width: 100%; top: 83%;}
}


@media screen and (max-width: 768px) {
    .headerInner {padding: 25px 3%;}

    /* tab-menu */
    .menuWrap .gnb {position: absolute; top: 0; width: 100%; height: 60%; flex-direction: column;}
    .menuInner { width: 100%; padding: 0 3%; }
    .menuWrap .gnb { transform: translateY(10%); }
    .menuWrap .gnb > ::after{width: 7px; height: 7px;}
    .menuWrap .gnb > li { font-size: 18px; padding-top: 35px; }
    .menuWrap .gnb > li .sub li { font-size: 15px; line-height: 2;}
    .menuWrap .gnb > li::after {left: 0; top: -5px; opacity: 0;}
    .menuWrap .gnb > li:hover::after { left: 0; top: 30px; opacity: 1; transition: all 0.3s ease; }


    .section01{height: 40vh;}
    .section01 p span{font-size: 38px;}
    .section01 p{font-size: 14px;}

    .section02{height: 100vh;}
    .slick-prev, .slick-next{top: 47%; font-size: 20px; }
    .slick-prev{left: 70px;}
    .slick-next{right: 70px;}
    .slide-wrap .counter .now, .slide-wrap .counter{font-size: 16px; bottom: 22%;}
    .slide li.active {transform: translateX(0px); }
    .section02 .card-text.active { transform: translateX(-210px);   }



    
    .section03{height: 80vh;}
    #GroupWrapper{top: 110%;}
    .Box {width: 110px; height: 145px;}
    .section03 .textBox span{font-size: 14px; width: 50%; margin: 0 auto; margin-bottom: 10px;}
    .section03 .textBox{font-size: 12px; width: 100%; top: 83%;}
}



@media screen and (max-width: 500px) {
    .headerInner{padding: 30px;}
    .headerInner a{font-size: 14px;}
    .headerInner .menu span{width: 20px; margin-bottom: 4px; height: 1px;}
    .section01{height: 25vh;}


    .section02{height: 80vh;}
    .slick-prev, .slick-next{top: 50%; font-size: 20px; }
    .slick-prev{left: 35px;}
    .slick-next{right: 35px;}
    .slide-wrap .counter .now, .slide-wrap .counter{font-size: 14px; bottom: 25%;}
    .slide li.active {transform: translateX(0px); }
    .section02 .slide-wrap .slide li img{width: 210px; height: 310px;}
    .section02 .slide-wrap .slide li span{font-size: 15px;}
    .section02 .slide-wrap .slide li span:nth-of-type(2){padding: 5px 10px; font-size: 10px;}
    .section02 .slide-wrap .slide li .readmore {top: 85%;}
    .section02 .card-text{width: 215px; height: 312px; top: 28%; left: 71%; padding: 40px 23px 190px; font-size: 9px; border-radius: 20px; }
    .section02 .card-text .name{font-size: 14px; margin-right: 0px; } 
    .section02 .card-text .name span{padding: 3px;  font-size: 8px;}
    .section02 .card-text .role{margin-bottom: 10px;}
    .section02 .more{display: none;}
    .section02 .card-text.active { transform: translateX(-205px);  }
    .section02 .card-text .close span {font-size: 16px;}
    .slide-wrap .counter .now, .slide-wrap .counter{font-size: 14px; bottom: 25%;}


    .section03{height: 50vh;}
    #GroupWrapper{top: 105%;}
    .Box {width: 90px; height:120px;}
    .section03 .textBox span{font-size: 13px; width: 50%; margin: 0 auto; margin-bottom: 10px;}
    .section03 .textBox{font-size: 11px; width: 100%; top: 75%;}
}