@charset "utf-8";

/********************
COMMON
********************/
/* section2 */
.section1 {max-width:1720px; width:100%; margin:0 auto; padding:140px 0 100px 0; overflow:visible;}
/* section3 */
.section2 {background: url('../../images/main/live_on_bg.jpg') no-repeat center / cover;}
.section2 > div {max-width:1720px; width:100%; margin:0 auto; padding:150px 0 100px;}
/* section4 */
.section3 > div {padding:140px 0 100px 0; background:url('../../images/main/sec04-obj1.png') no-repeat; background-position: left top -80%; overflow:hidden;}
.section3 > div::before {content:'Industry-Academic\A Cooperation Group'; position: absolute; right:-20px; top:-15px; font-family: 'SBA Bold'; color:#F7F7F7; font-size: 70px; line-height: 100px; white-space:pre; text-transform: uppercase; letter-spacing: -.05em; text-align:right;}

@media screen and (max-width:1800px) {
    .section1 {margin:0 20px; width:auto;}
    .section2 {padding:0 20px;}
}
@media screen and (max-width:1200px) {
    .section1{margin:0 40px; padding:80px 0;}
    .section2 {padding:0 40px;}
    .section2 > div {padding:80px 0;}
    .section3 > div {background-size:220px; background-position: left top -33%; padding:80px 0;}
    .section3 > div::before {font-size: 50px; line-height: 80px; letter-spacing: -.05em; right:0;}
}
@media screen and (max-width:768px) {
    .section1 {margin:0 20px; padding:45px 0 50px 0;}
    .section2 {padding: 0 20px;}
    .section2 > div {padding:50px 0;}
    .section3 > div {background-size:150px; background-position:left -50px top -80px; padding:50px 0;}
    .section3 > div::before {font-size: 6vw; line-height: 1.5; top:-7px;}
}

/* visual */
.wrap-slogan {color:#fff; position: absolute; top:33.7%; left:100px; z-index: 1;}
.slogan {color:#fff;}
.slogan .text_1 {font-size: 50px; line-height: 65px; font-family: 'SUITE Bold'; text-shadow: 2px 2px 5px rgba(0,0,0,0.3);}
.slogan .text_2 {font-size: 18px; line-height: 30px; font-family: 'HG Regular'; margin-top: 25px;}
.slogan .detail-view { display: inline-flex; font-size: 14px; align-items: center; padding:0 20px; position: relative; border:1px solid rgba(255,255,255,0.4); color:#fff; border-radius:50px; height:50px; color:#fff; min-width:170px; background:url('../../images/main/visual-more-arrw.png') no-repeat right 20px center; margin-top: 60px; transition: border .3s;}
.slogan .detail-view:hover {border:1px solid rgba(255,255,255,1)}


.wrap-scrollBox {position: absolute; bottom:30px; left:100px; z-index: 1;}
.scroll-indicator {width:35px;height:50px;border:1px solid white;border-radius:20px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:start;padding-top:0px;box-sizing:border-box;}
.dot {width:4px;height:4px;border-radius:50%;background:white;opacity:0;animation:scrollDot 1.5s infinite;margin:3px 0;}
.dot2 {animation-delay:0.2s;}
.dot3 {animation-delay:0.4s;}
@keyframes scrollDot {
    0%{opacity:0;transform:translateY(0);}
    30%{opacity:1;transform:translateY(5px);}
    60%{opacity:0;transform:translateY(10px);}
    100%{opacity:0;}
}
/* @media screen and (min-width:1921px) {
    .wrap-scrollBox {max-width:1720px; width:100% !important; margin:0 auto; left:50%; transform:translateX(-50%)}
} */
@media screen and (max-width:1800px) {
    .wrap-slogan {left:40px;}
    .wrap-scrollBox {left:40px;}
}
@media screen and (max-width:1400px) {
    .wrap-slogan {top:23.7%;}
    .slogan .text_1 {font-size: 40px; line-height: 50px;}
}
@media screen and (max-width:1200px) {
    .slogan .detail-view {margin-top: 55px;}
}
@media screen and (max-width:768px) {
    .wrap-scrollBox {display: none;}
    .wrap-slogan {left:20px;}
    .slogan .text_2 {font-size: 16px; padding-right:40px;}
    .slogan .text_2 br {display: none;}
    .slogan .detail-view {margin-top: 38px;}
}



/* section2 */
.sec02-text h1{font-size: 80px; font-family: 'SBA Medium'; line-height:1;}
.sec02-text span {font-size: 18px; font-family: 'HG Regular'; margin-top: 30px; display: block;}

.sec02-link > ul{border-top:1px solid #000; margin-right: 50px;}
.sec02-link > ul > li{border-bottom:1px solid #000;position:relative;}
.sec02-link > ul > li a:after{content:'';width:296px;height:311px; position:absolute;right:-50px;top:-30px;z-index: 1;transition:all ease .5s;opacity:0;}
.sec02-link > ul > li a:before{content:'';width:110px;height:110px;background:url('../../images/main/r-arrow.png') no-repeat;position:absolute;right: 35px;top: 50%; z-index: 2; margin-top: -55px;transition:all ease .5s;opacity:0;}
.sec02-link > ul > li:nth-child(1) a:after {background:url('../../images/main/sec02-img1.png') no-repeat center; }
.sec02-link > ul > li:nth-child(2) a:after {background:url('../../images/main/sec02-img2.png') no-repeat center; }
.sec02-link > ul > li:nth-child(3) a:after {background:url('../../images/main/sec02-img3.png') no-repeat center; }
.sec02-link > ul > li:nth-child(4) a:after {background:url('../../images/main/sec02-img4.png') no-repeat center; }
.sec02-link > ul > li:nth-child(5) a:after {background:url('../../images/main/sec02-img5.png') no-repeat center; }
.sec02-link > ul > li a{padding:30px 0 25px;display:block;transition: all ease .5s;}
.sec02-link > ul > li strong{font-size:28px;color:#333;font-family: 'SUITE ExtraBold';display:block;}
.sec02-link > ul > li p{font-size:17px;color:#666;font-family: 'HG Regular';max-width:55%;opacity: 0;transition: all ease .5s;height: 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

.sec02-link > ul > li.on a{padding:50px 0 25px;}
.sec02-link > ul > li.on p{opacity: 1;height: auto;margin: 30px 0;}
.sec02-link > ul > li.on a:before,
.sec02-link > ul > li.on a:after{opacity:1;}

@media screen and (max-width:1500px) {
    .sec02-text h1 {font-size: 60px;}
}
@media screen and (max-width:1200px) {
    .sec02-text {margin-bottom: 35px;}
    .sec02-text h1 {font-size: 50px; line-height: 60px;}
    .sec02-text h1 br:first-child {display: none;}
    .sec02-text span br {display: none;}
    
    .multipleContentsDiv.df {display: flex; flex-direction: column;}
    .order3 {order:3;}
    .sec02-link {margin-top: 50px;}
    .sec02-link > ul {margin-right: 0;}
    .sec02-link > ul > li:before {right:125px;}
    .sec02-link > ul > li:after {right:40px;}
    .sec02-link > ul > li.on a {padding: 55px 0 30px;}
    .sec02-link > ul > li.on p {margin:15px 0 30px 0;}
}
@media screen and (max-width:768px) {
    .sec02-text h1 {font-size: 40px; line-height: 50px;}
    .sec02-text h1 br {display: none;}
    .sec02-text span {font-size: 16px;}

    .sec02-link {margin-top: 10px;}
    .sec02-link > ul > li strong {font-size: 22px;}
    .sec02-link > ul > li p {font-size: 16px; max-width:100%;}
    .sec02-link > ul > li a:before {right:unset; left:50%; top:calc(50% + 30px); margin-left:-55px; bottom:50%; margin-top:unset; visibility: hidden;}
    .sec02-link > ul > li:after{display: none;}
    .sec02-link > ul > li a {display: block;}
    .sec02-link > ul > li.on a:before {visibility: visible;}
    .sec02-link > ul > li a:after{content:'';width:296px;height:0px; position:absolute;right:-50px;z-index: 1;transition:ease .5s; transition-property: opacity, top; opacity:0; top:0;}
    .sec02-link > ul > li a:after {margin:0 auto; position: relative; display:block; left:unset; right:unset;}
    .sec02-link > ul > li.on a:after{opacity:1; height:311px;}
    .sec02-link > ul > li:nth-child(1) a:after {background:url('../../images/main/sec02-img1.png') no-repeat center; }
    .sec02-link > ul > li:nth-child(2) a:after {background:url('../../images/main/sec02-img2.png') no-repeat center; }
    .sec02-link > ul > li:nth-child(3) a:after {background:url('../../images/main/sec02-img3.png') no-repeat center; }
    .sec02-link > ul > li:nth-child(4) a:after {background:url('../../images/main/sec02-img4.png') no-repeat center; }
    .sec02-link > ul > li:nth-child(5) a:after {background:url('../../images/main/sec02-img5.png') no-repeat center; }

    .sec02-link > ul > li.on a {padding:25px 0 30px;}
    .sec02-link > ul > li.on p {margin:8px 0 30px 0;}
}


/* section3 */
.live-on-text .title > strong{font-size:80px;color:#fff;font-family:'SBA Medium';display:block;margin-bottom:15px;line-height:1.15;}
.live-on-text .title > p{font-size:18px;color:#fff;font-family:'HG Regular';line-height:1.4;margin-bottom:180px;}
.live-on-text .title > p > i{display:block;}
.live-on-text .title > ul{max-width:330px;}
.live-on-text .title > ul > li > a{position:relative;color:#fff;border:1px solid #fff;padding:23px 30px 23px 110px;display:block;transition:all ease .5s;text-align:left;font-size:18px;font-family:'SUITE SemiBold';}
.live-on-text .title > ul > li > a:before{content:'';width:50px;height:50px;position:absolute;left:40px;top:50%;margin-top:-25px;}
.live-on-text .title > ul > li:nth-child(1) > a:before{background:url('../../images/main/live-icon1.png') no-repeat center;}
.live-on-text .title > ul > li:nth-child(1) > a:hover:before{background:url('../../images/main/live-icon1-on.png') no-repeat center;}
.live-on-text .title > ul > li:nth-child(2) > a:before{background:url('../../images/main/live-icon2.png') no-repeat center;}
.live-on-text .title > ul > li:nth-child(2) > a:hover:before{background:url('../../images/main/live-icon2-on.png') no-repeat center;}
.live-on-text .title > ul > li:nth-child(3) > a:before{background:url('../../images/main/live-icon3.png') no-repeat center;}
.live-on-text .title > ul > li:nth-child(3) > a:hover:before{background:url('../../images/main/live-icon3-on.png') no-repeat center;}
.live-on-text .title > ul > li > a:hover{color:#0041a5;background:#fff;border:1px solid #0041a5;}
.live-on-text .title > ul > li + li{margin-top:17px;}

@media all and (max-width:1200px){
  .live-on-text{}
  .live-on-text .title > strong{font-size:50px;}
  .live-on-text .title > ul {display: flex; max-width:100%; gap:10px;}
  .live-on-text .title > ul > li {width:100%;}
  .live-on-text .title > ul > li + li {margin-top: 0;}
  .live-on-text .title > ul > li > a:before{left:40px;}
  .live-on-text .title > p{margin-bottom:45px;}
  .live-on-text .title > p i {display: none;}
}

@media all and (max-width:767px){
  .live-on-text{padding-right:0;}    
  .live-on-text .title > strong{font-size:40px;}
  .live-on-text .title > p{margin-bottom:35px; font-size: 16px;}
  .live-on-text .title > p > i{display: inline-block;padding: 0;}
  .live-on-text .title > ul {flex-wrap:wrap;}
  .live-on-text .title > ul > li > a{font-size:18px;padding-left: 90px;}
  .live-on-text .title > ul > li > a:before{left:20px;}  
}

/* section4 */
.sec04-text {position: relative;}
.sec04-text h1{font-size: 80px; font-family: 'SBA Medium'; line-height:1;}
.sec04-text span {font-size: 18px; font-family: 'HG Regular'; margin-top: 30px; display: block;}
.sec04-text span i {display: block;}
@media screen and (max-width:1800px) {
    .sec04-text .inner {padding:0 20px;}
}
@media screen and (max-width:1200px) {
    .sec04-text {margin-bottom: 45px;}
    .sec04-text .inner {padding:0 40px;}
    .sec04-text h1 {font-size: 50px;}
    .sec04-text span {margin-top: 13px;}
    .sec04-text span i {display: none;}
}
@media screen and (max-width:768px) {
    .sec04-text .inner {padding:0 20px;}
    .sec04-text h1 {font-size: 40px;}
    .sec04-text span {font-size: 16px;}
}




/* tween */
header {top:-150px;}
/* visual */
.slogan {left:-50px; opacity:0; position: relative;}
.wrap-visual .control {opacity:0;}
/* section2 */
.sec02-text {opacity:0; left:-50px;}
.research-wrap {top:50px; opacity:0;}
.sec02-link > ul > li {opacity:0; top:50px;}
/* section3 live on */
.live-on-text {position: relative; left:-50px; opacity:0;}
.wrap_rct2 {top:50px; opacity:0;}
/* section4 */
.sec04-text {opacity:0; top:50px;}
.shadowImg_1.shadowImg {opacity:0; filter:blur(10px);}
.news-wrap .list {top:50px; opacity:0;}
.shadowImg_2.shadowImg {opacity:0; filter:blur(10px);}