html{ }

.main{background: linear-gradient(180deg, rgba(11,6,84,1) 0%, rgba(14,158,137,1) 78%); position: relative; z-index: 1; padding-bottom: 200px; overflow: hidden; font-family: 'gillsans';}
.main::after{content: "";display: block;width: 100%;height: 30%;bottom: 0;
background: linear-gradient(0deg, white 35%, rgba(255, 255, 255, 0) 100%);
position: absolute; bottom: -103px;}
.main dl {font-size: 80px; color: #fff; text-transform: uppercase; text-align: right; position: relative; top: 80px;}
.main dl dt{margin-right: -165px;}
.main dl dd{margin-right: -280px;}
.main .wrap .number {}
.main .wrap .number span{font-size: 28vw; color: #fff; font-family: 'kopubdotum'; position: absolute; z-index: -1;}
.main .wrap .number span:first-of-type{left: -80px; top: 3%;}
.main .wrap .number span:nth-of-type(2){right: -60px; bottom: 15%;}
.main .wrap .imgbox{background-repeat: no-repeat; background-position: center; background-size: cover; width: 85%; margin: 0 auto;}
.main .wrap .imgbox video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.main .wrap .imgbox::after{content: ""; display: block; padding-bottom: calc(563/1000 * 100%);}
.main .scrollbox{margin-top: 50px;}
.main .scrollbox img{animation: scrollani 0.7s infinite alternate;}
.main .scrollbox span{display: block; color: #fff; font-size: 44px; text-transform: uppercase; margin-top: 20px; background-image: linear-gradient(
    -225deg,
    #fff 0%,
    #0b0554 29%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto; background-clip: text;
  text-fill-color: transparent;-webkit-background-clip: text;
  -webkit-text-fill-color: transparent; animation: textclip 1.5s linear infinite; font-weight: 600;}

@keyframes scrollani {
    to{transform: translateY(0);}
    from{transform: translateY(20px);}
}

@keyframes textclip {
    to {
      background-position: 200% center;
    }
  }

  @media screen and (max-width: 768px){
    .main{padding-bottom: 130px;}
    .main::after{background: linear-gradient(0deg, white 68%, rgba(255, 255, 255, 0) 100%);}
    .main .wrap .imgbox{margin-top: 50px;}
    .main dl{font-size: 40px; top: 55px;}
    .main dl dt{margin-right: -100px;}
    .main dl dd{margin-right: -90px;}
    .main .wrap .number span:first-of-type{left: -37px; top: 10%;}
    .main .wrap .number span:nth-of-type(2){right: -33px; bottom: 27%;}
    .main .scrollbox img{width: 4%;}
    .main .scrollbox span{font-size: 25px;}
  }

.sec02 {padding: 100px 0 200px; display: flex; justify-content: space-evenly; background-color: #fff;}
.sec02 .text .wrap1600{max-width: 1600px; width: 90%; margin: 0 auto;}
.sec02 .text .wrap1600 strong{font-size: 7vw; color: #009380;font-family: 'gillsans';text-transform: uppercase; writing-mode: tb-rl; transform: rotate(180deg); font-weight: 600;}
.sec02 .text .wrap1600 strong.mob{display: none;}
.sec02 .pclist{text-align: right;}
.sec02 .pclist ul li{margin-bottom: 50px;}
.sec02 .pclist ul li:nth-of-type(2) {}
.sec02 .pclist ul li:nth-of-type(2) .videowrap{z-index: 1;top: 0;
left: 0;width: 100%;height: 100%;position: relative;  overflow: hidden;}
.sec02 .pclist ul li:nth-of-type(2) video{ position: absolute;top: 50%;left: 50%;width: 110%;height: 100%;transform: translate(-50%, -50%);}
.sec02 .pclist ul li:nth-of-type(2) .videowrap::after{content: ""; display: block; padding-bottom: calc(700/945 * 100%);}
.sec02 .pclist ul li:nth-of-type(2) .videowrap::before{content: ""; display: block; background-image: url('../img/video_line.png'); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3;}
.sec02 .pclist ul li:last-of-type{margin-bottom: 0;}

@media screen and (max-width: 768px){
.sec02{display: block; padding: 100px 0 15%;}
.sec02 .text .wrap1600 strong.pc{display: none;}
.sec02 .text .wrap1600 strong.mob{writing-mode: inherit;transform: rotate(0deg); margin-bottom: 50px; display: block;}
}

.sec03{background-image: url('../img/overview_bg.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 150px 0 100px; text-align: center;}
.sec03 .title {color: #fff;}
.sec03 .title strong{font-size: 70px; text-transform: uppercase; font-weight: 600;}
.sec03 .title p{font-size: 20px; font-family: 'Noto Sans KR', sans-serif; line-height: calc(30/20); font-weight: 300; margin: 55px 0;} 
.sec03 .wrap > span{font-size: 7vw; text-transform: uppercase; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; font-weight: 600;}

@media screen and (max-width: 900px){
    .sec03{padding: 15% 0;}
    .sec03 .title strong{font-size: 30px;}
    .sec03 .title p{font-size: 15px; margin: 30px 0; word-break: keep-all;}
    .sec03 .title p br{display: none;}
}

.sec04{background-image: url('../img/mobile_bg.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;}
.sec04 > a{display: inline-flex;justify-content: center;align-items: center;position: relative;top: auto;width: 250px;float: right;margin-top: 0;right: 16%; top: 115px; z-index: 99;}
.sec04 > a::after{content: ""; display: block; padding-bottom: 100%;}
.sec04 > a .circleText{width: 100%; background-size: cover; position: absolute; top: 0; left: 0; animation: rotate 8s linear infinite; text-transform: uppercase; font-weight: 600;}
.sec04 > a .circleText svg{transition: 0.3s; fill: #fff;}
.sec04 > a dl{text-align: center;}
.sec04 > a dl dt{transition: 0.3s;}
.sec04 > a dl dt .onimg{opacity: 0; display: none; transition: 0.3s;}
.sec04 > a dl dt img{transition: 0.3s;}
.sec04 > a dl dd{font-size: 17px; margin-top: 12px; font-weight: 600; transition: 0.3s; font-family: 'Noto Sans KR', sans-serif; color: #fff;}

.sec04 > a:hover dt .offimg{opacity: 0; display: none;}
.sec04 > a:hover dt .onimg{opacity: 1; display: block; margin: 0 auto;}

@keyframes rotate{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}

.sec04 .flexbox {display: flex; justify-content: center; text-align: center; width: 100%;}
.sec04 .flexbox span{font-size: 120px; color: #fff;font-family: 'gillsans'; font-weight: 600; text-transform: uppercase;display: block; margin: 50px 0;}
.sec04 .flexbox .lef{width: 40%; margin-right: 50px;}
.sec04 .flexbox .lef span{transform: translateX(-45%);}
.sec04 .flexbox .rig{transform: translateY(15%); margin-bottom: 22%; width: 40%; margin-left: 50px;}
.sec04 .flexbox .rig span{ transform: translateX(55%); }
.sec04 .flexbox figure img{width: 100%;}
/* .sec04 .flexbox figure .videowrap{position: absolute; width: 100%; height: 100%; top: 0; left: 0;} */
.sec04 .flexbox .lef figure:first-of-type {overflow: hidden; border-radius: 52px;}
.sec04 .flexbox figure .videowrap::after{content: ""; display: block; padding-bottom: calc(642/550 * 100%);}
.sec04 .flexbox figure .videowrap video{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -62%); width: 258%; z-index: -1; overflow: hidden;}

@media screen and (max-width: 768px){
  .sec04{padding: 0 0 15%;}
  .sec04 > a{width: 150px;}
  .sec04 > a dl dt img{width: 35%;}
  .sec04 > a dl dd{font-size: 13px;}
  .sec04 .flexbox span{transform: none; font-size: 30px; display: block; text-align: center;}
  .sec04 .flexbox .rig span, .sec04 .flexbox .lef span{transform: none;}

  .sec04 .flexbox .lef{margin-right: 0;}
  .sec04 .flexbox .lef figure:first-of-type{border-radius: 30px;}
}

/* sec05 */
.sec05{padding: 200px 0; text-align: center; background-color: #fff;}
.sec05 strong{font-size: 80px; text-transform: uppercase;font-family: 'gillsans'; font-weight: 600; display: block; margin-bottom: 100px;}
.sec05 ul{display: flex; align-items: center;}
.sec05 ul li{width: calc(99.9%/3 - 80px/3); margin-right: 40px; border-radius: 50%; background-color: #009380; position: relative;}
.sec05 ul li:nth-of-type(2){background-color: #005bac;}
.sec05 ul li:last-of-type{margin-right: 0; background-color: #0b0454;}
.sec05 ul li::after{content: ""; display: block; padding-bottom: 100%;}
.sec05 ul li span{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; color: #fff; font-family: 'Noto Sans KR', sans-serif;}

@media screen and (max-width: 900px){
    .sec05{padding: 15% 0;}
    .sec05 strong{font-size: 30px; margin-bottom: 60px;}
    .sec05 ul li span{font-size: 14px;}
}