@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
*,h3,h4,p{
    word-break:keep-all;
}
body,html {height:100%;margin:0;padding:0;overscroll-behavior:none;}
ul, li, dl, dt, dd, p, span{margin:0;padding:0}
a{text-decoration:none}
li{list-style:none}
a{text-decoration:none}
*, :after, :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html{
    overflow-x:hidden;
}
#header{
    position:fixed;
    width: 100%;
    height: 80px;
    z-index:1000;
    background:linear-gradient(to bottom, #00000088,#00000000);
    transition: all 0.3s ease;
}
#header.vu{
    transform:translate(0,-100%);
}
#fullpage{
    width:100%;
    height:100%;
}
#header.white,
#header.sub-page-white{
 
    background:#fff;
}
#header #header-logo a{
    display:block;
    width: 200px;
    height:30px;
    background:url(../img/footer-logo.svg)no-repeat;
    background-size:contain;
}
#header-logo{
    display:block;
    width: 200px;
    height:30px;
    position:relative;
    top:25px;
    left:30px;
    transition: all 0.3s ease;
}
#header.white #header-logo a,
#header.sub-page-white #header-logo a{
    
    display:block;
    width: 220px;
    height:35px;
    background:url(../img/logo_c.svg)no-repeat;
    background-size:contain;
}
.page-w{
    position: relative;
    width: 1400px;
    margin: 0 auto;
}
#header-menu{
    margin:0 auto;
    display:block;
    width: 100%;
    text-align: right;
    padding-top: 0px;
    padding-right:40px;
}
#header-menu > ul{
    margin:0 auto;
}
#header-menu > ul > li{
    display:inline-block;
    font-size: 18px;
    font-family:'Pretendard';
    font-weight:600;
    margin: 0 15px;
    position:relative;
    cursor:pointer;
}
#header-menu > ul > li:before{
    width:0%;
    height:3px;
    display:block;
    content:'';
    position:absolute;
    left:0;
    background:#ffffff;
    bottom:-5px;
    transition: all 0.3s ease;
}
#header-menu > ul > li:hover:before,
#header-menu > ul > li.on:before{
    width:100%;
}
#header.white #header-menu > ul > li:before,
#header.sub-page-white #header-menu > ul > li:before{
    width:0%;
    height:3px;
    display:block;
    content:'';
    position:absolute;
    left:0;
    background:#7d8f91;
    bottom:-5px;
    transition: all 0.3s ease;
}
#header.white #header-menu > ul > li:hover:before,
#header.white #header-menu > ul > li.on:before,
#header.sub-page-white #header-menu > ul > li:hover:before,
#header.sub-page-white #header-menu > ul > li.on:before{
    width:100%;
}
#header-menu > ul > li .sub{
    display:none;
    background:#1b1b1b;
    position:absolute;
    width: 220px;
    left:50%;
    transform:translate(-50%);
    padding: 10px 0px;
    margin-top: 10px;
    border-radius:10px;
}
#header-menu > ul > li a{
    color:#fff;
}
#header.white #header-menu > ul > li a,
#header.sub-page-white #header-menu > ul > li a{
    color:#000;
}
#header-menu > ul > li .sub.active{
    display:block;
}
#header-menu > ul > li .sub li{
    margin: 5px 0px;
}
#header-menu > ul > li .sub li a{
    display:block;
    color:#ddd;
    font-size: 14px;
    line-height: 24px;
}
#header-menu > ul > li .sub li a:hover{
    color:#fff;
}

#contact_us{
    position: absolute;
    right:20px;
    font-weight: 400;
    font-family: 'Pretendard';
    font-size: 16px;
    background:#135fa3;
    padding: 10px 30px;
    border-radius: 20px;
    cursor:pointer;
    transition: all 0.3s ease;
    color:#fff;
    top: 20px;
    width: 180px;
    text-align: center;
    box-shadow: inset 0 0 0 0 #223d6f;
    transition: all .5s;
}
#contact_us:hover{
    box-shadow: inset 100vmax 0 0 0 #000000;
    color: #ffffff;
}

#text-video-title{
    font-size: 80px;
    opacity:1;
    z-index:100;
    position:relative;
    color:#fff;
    font-weight: 400;
    margin-bottom: 50px;
    letter-spacing:20px;
}
#text-video-title b{
     background:linear-gradient(to right, #202c3f, #5a5454);
    padding: 0 20px;
    margin-right: 20px;
    text-align:center;
    
}
.typing-container {
  font-size: 35px;
  font-weight:700;
  font-family:'Pretendard';
  margin: 50px;
  width:450px;
  word-break:keep-all
}
#text-video b,
#text-video2 b{
    position:relative;
    z-index:10;
    font-weight:800;
}
#text-video b:before,
#text-video2 b:before{
    display:block;
    width:100%;
    height: 20px;
    content:'';
    position:absolute;
    background:linear-gradient(to right, #202c3f, #5a5454);
    left:0;
    z-index:-1;
    bottom:0;
}
#text-video,
#text-video2{
    font-size:30px;
    font-family:'Pretendard';
    color:#fff;
    font-weight:400;
    display:block;
    line-height:50px;
    opacity:0.7;
}

#cursor {
  border-left: 2px solid #ffffff; 
  animation: blink 0.7s infinite;
  display: inline-block;
  margin-left: 2px;
  margin-top:-50px;
  height:75px;
  vertical-align:middle;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.video-section{
    width:100%;
    height:100vh;
    background:#000000;
    overflow:hidden;
    position:relative;
}
#vid-text-wrap{
    max-width: 1400px;
    text-align:center;
    position:absolute;
    z-index:10000;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition: all 0.3s ease;
    opacity:0;
}
#vid-text-wrap.active{
    opacity:1;
}

#section-02{
    position:relative;
    width: 100%;
    height:100vh;
}
#cont-sv1{
    color:#125fa3;
    font-family:'Pretendard';
    text-align:center;
    padding-top: 170px;
}
#cont-sv1 h3{
    font-size: 120px;
    font-weight: 900;
    height:150px;
    overflow:hidden;
    padding-top: 100px;
    position:relative;
    transition:all 0.3s ease;
    opacity:0;
    font-family:'Pretendard';
}
#cont-sv1 h3.active{
    padding-top:0;
    opacity:1;
}
#cont-sv1 p{
    font-size: 48px;
    font-weight: 600;
    margin-top: 10px;
    height:60px;
    overflow:hidden;
    line-height: 70px;
    padding-top:50px;
    transition:all 0.3s ease;
    opacity:0;
    font-family:'Pretendard';
}
#cont-sv1 p.active{
    padding-top:0;
    opacity:1;
}
#section-03{
    width: 100%;
    height:  auto;
    min-height: 1000px;
    background:#135fa3;
    padding:100px 0px;
    overflow-x:hidden;
    position:relative
}
#section-03:before{
    content:'';
    display: block;
    position: absolute;
    width: 200px;
    height: 100%;
    background:linear-gradient(to right,#135fa3ff,#135fa300);
    left:0;
    z-index:100;
    top:0;
}
#section-03:after{
    content:'';
    display: block;
    position: absolute;
    width: 200px;
    height: 100%;
    background:linear-gradient(to left,#135fa3ff,#135fa300);
    right:0;
    top:0;
    z-index:100;
}
.title-index h3{
    font-family:'Pretendard';
    font-size: 60px;
    text-align:center;
    color:#fff;
}
.title-index p{
    font-family:'Pretendard';
    font-size: 30px;
    text-align:center;
    color:#fff;
    margin-top: 20px;
}
.swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    z-index:-1;
}
.review-slide .swiper-slide{
    background:none;
}
.review-n{
    border-radius:20px;
    display:block;
}

.swiperrev{
    margin-top: 150px;
}
.review-n .thumbnail{
    display:block;
    width:100%;
    padding-bottom:130%;
    overflow:hidden;
    box-shadow: 0px 20px 20px rgb(0 0 0 / 15%);
    position:relative;
    border-radius:20px;
    border:5px solid #fff;
}
.review-n .thumbnail img{
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%,-50%);
    height:100%;
    transition: all 0.3s ease;
    opacity:0.9;
}
.review-n .thumbnail:before{
    width:100%;
    height: 100%;
    background:#fff;
    position:absolute;
    content:'';
    display:block;
    z-index:10;
    opacity:0;
    transition: all 0.3s ease;
}
.review-n:hover .thumbnail:before{
    opacity:0.3;
}
.review-n:hover .thumbnail img{
    height:110%;
    opacity:1;
}
.swiper-wrapper{
    width: 100%;
    position: absolute;
    z-index:-1;
}
#section-04{
    width: 100%;
    height:auto;
    padding: 100px 0px;
    background:#3a3a3a;
    padd
}
#section-05{
    width: 100%;
    padding: 100px 0px;
    background:linear-gradient(to bottom,#3a3a3a,#1e1e1e);
}


.rolling {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 60px;
    margin-bottom: 60px;
    margin-top: 100px;
}

.rolling-image {
    width: 7040px;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    animation: bannermove 40s linear infinite;
}

.rolling-image > div {
    flex: 0 0 auto;
    height: 60px;
    line-height: 60px;
    vertical-align: top;
    text-align: center;
    margin: 0 20px;
}

.rolling-image > div img {
    width: 100%;
    height: auto;
}
#inner-bg{
    width:10%;
    height:10%;
    background:url(../img/main-bg1.jpg) no-repeat;
    z-index:-100;
    position:absolute;
    background-position:center;
    top:0;
    left:0;
    background-size: cover;
    transition:all 3s ease;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

}
#inner-bg.active{
    width:100%;
    height:100%;
    background-position:center;
}
#inner-bg2{
    width:10%;
    height:10%;
    background:url(../img/main-bg2.svg) no-repeat;
    z-index:-100;
    position:absolute;
    top:0;
    left:0;
    background-size: cover;
    transition:all 3s ease;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
#inner-bg2.active{
    width:100%;
    height:100%;
    background-position:center;
}
.title-index{
    position:relative;
}
.more{
    font-family:'Pretendard';
    position:absolute;
    right:0;
    top: 30px;
    z-index:990;
}
.more a{
    color:#fff;
    font-size:18px;
    display:inline-block;
    width:80px;
    line-height: 30px;
}
.more a:before{
    background:url(../img/more-btn.svg)no-repeat;
    z-index:90;
    
    width: 30px;
    height:30px;
    display:block;
    content:'';
    position:absolute;
    right: 0;
    transition:all 0.3s ease;
}
.more a:hover:before{
    transform:rotate(90deg)
}
.news-inner > ul{
    display:flex;
    flex-wrap:wrap;
    gap:2%;
    font-family:'Pretendard';
    margin-top: 60px;
}
.news-inner > ul > li{
    width: 32%;
}
.news-inner > ul > li > a{
    display:block;
    margin-bottom: 30px;
}
.news-inner > ul > li > a .news-card .thumbnail{
    background:#fff;
    width: 100%;
    height :250px;
    border-radius:20px;
    margin-top: 20px;
    margin-bottom: 20px;
    position:relative;
    overflow:hidden;
}
.news-inner > ul > li > a .news-card .thumbnail img{
    position: absolute;
    left:50%;
    top:50%;
    width:100%;
    transform:translate(-50%,-50%);
}
.news-inner > ul > li > a .news-card .news-card-info span{
    background:#fff;
    color:#135fa3;
    padding: 5px 20px;
    border-radius:20px;
    font-weight:800;
    
}
.news-inner > ul > li > a .news-card .news-card-info h3{
    font-size: 18px;
    font-family:'Pretendard';
    color:#fff;
    margin-top: 10px;
    margin-bottom:5px;
}
.news-inner > ul > li > a .news-card .news-card-info h6{
    color:#aaa;
    font-family:'Pretendard';
    margin
}


#footer{
    position:relative;
    
    background:#1e1e1e;
    padding: 50px 0px;
}
.footer-top{
    position:relative;
}
.footer-menu ul{
}
.footer-menu ul li{
    font-family:'Pretendard';
    display:inline-block;
    margin-right: 30px;
    position:relative;
}
.footer-menu ul li:after{
    content:'';
    display: block;
    width: 2px;
    height:15px;
    position:absolute;
    background:#aaa;
    right:-17px;
    top:0;
}
.footer-menu ul li:last-child:after{
    display:none;
}
.footer-sns{
    position: absolute;
    right:0;
    top:0;
}
.footer-sns ul li{
    display:inline-block;

}
.footer-sns ul li a{
    display:block;
    width: 32px;
}
.footer-menu ul li a{
    color:#fff;
    font-size: 14px;
    
}
.footer-copy #footer-logo{
    width: 200px;
    margin-top: 50px;
}
.footer-address{
    color:#fff;
    font-family:'Pretendard';
}
.footer-address ul{
    margin-top: 20px;
}
.footer-address ul li{
    font-size:14px;
    line-height: 24px;
    display: inline-block;
    margin-right:40px;
}
.footer-address ul li:nth-child(4){
    display:block;
}
.footer-address ul li span{
    font-weight:800;
    margin-right: 10px;
    
}
.footer-copy p{
    margin-top: 40px;
}
#title-em{
    width:100%;
    height: 300px;
    background:#ffffff;
    position:relative;
}
#title-emin{
    font-size:40px;
    position:absolute;
    text-align:center;
    left:50%;
    top:50%;
    margin-top:200px;
    font-family:'Pretendard';
    font-weight:800;
    color:#135fa3;
    transform:translate(-50%,-50%);
}

#bo_w{
    margin-bottom:100px;
}
#card-0,#card-1,#card-2{
    width:100%;
    height: 100vh;
}
#about-bg{
    background:url(../img/about-bg.jpg) no-repeat;
    background-size: cover;
    background-attachment:fixed;
    background-position:center;
}
#about-bg-cover{
    width: 100%;
    height:100%;
    position:fixed;
    background:url(../img/about-bg1.jpg) no-repeat;
    opacity:0;
    background-size: cover;
    z-index:0;
    background-position:center;
}
#card-0 h3{
    font-size: 120px;
    color:#fff;
    position:fixed;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    text-align: center;
    font-family:'Pretendard';
}
#card-1 h3, #card-2 h3{
    font-size: 160px;
    font-family:'Pretendard';
    background: linear-gradient(to right,#135fa3, #4e64ff, #12745d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
#card-1 p, #card-2 p{
    color:#fff;
    font-size: 60px;
    font-family:'Pretendard';
    text-align:center;
    margin-top: 20px;
    font-weight:600;
}


/* news */
#bo_cate a{
    border:0;
    background:#f1f3f8;
    color:#000;
    font-size: 18px;
    padding: 10px 20px;
    margin-right: 10px;
    font-family:'Pretendard';
}
#bo_cate a:hover{
    background:#dfe6f2;
    color:#000;
}
#bo_cate #bo_cate_on{
    background:#135fa3;
    border:0;
    box-shadow: none;
    font-weight: 700;
}
.board_search{
    position:absolute;
    margin-top: 0px;
    display: block;
    width: 50%;
    height: 50px;
    top:0px;
    background:none;
    z-index:9;
    right:0;
}
#bo_list_total{
    position:relative;
    display:block;
}
.bo_sch{
    box-shadow:none;
    border:0;
    right:0;
    left:unset;
    width: auto;
    vertical-align:middle;
    top:0px;
    border-radius:0;
    background:none;
    margin:0;
    width: 30%;
    position:absolute;
    z-index:1000;
}
.bo_sch form{
    display:flex;
    padding:0;
    width: 100%;
}
.bo_sch form select{
    border:0;
    box-shadow:none;
    border-radius:0;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    font-family:'Pretendard';
    height: 40px;
    line-height:40px;
    cursor:pointer;
    background:none;
    width: 120px;
}
.bo_sch form select:focus{
    box-shadow:none;
    outline:0;
    border:0 !important;
    border-bottom: 1px solid #000 !important;
}
.bo_sch .sch_bar{
    border:0;
    box-shadow:none;
    display:flex;
    margin:0;
}
.bo_sch .sch_bar input[type=text]{
    border-bottom:1px solid #ddd;
    border-radius:0;
    margin-left: 20px;
    font-size: 16px;
    font-family:'Pretendard';
    height: 40px;
    line-height:40px;
    width: 300px;
}
.bo_sch .sch_bar input[type=text]:focus{
    box-shadow:none;
    outline:0;
    border:0 !important;
    border-bottom: 1px solid #000 !important;
}
.bo_sch_bg{
    display:none;
}
#bo_gall{
    position:relative;
    display: block;
    margin-top: 100px;
}
#bo_gall .gall_img{
    width: 100%;
    position:relative;
    box-shadow: 0px 0px 40px rgba(0,0,0,0.1);
    overflow:hidden;
    
}
#bo_gall .gall_img:before{
    content:'';
    display:block;
    padding-top: 100%;
}
.creator-list-m .gall_con:hover:after{
    background:#00000099;
    content:'';
    display:block;
    z-index:1;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    border-radius:15px;
}
#review-ul .gall_img:before{
    padding-top:0;
}
#review-ul .gall_img a img{
    width:100%;
}
#bo_gall.youtube-gall .gall_img:before{
    padding-top: 58%;
}
.creator-list-row .gall_img img{
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    height: 110%;
    transition: all 0.3s ease;
}
.creator-list-row:hover .gall_img img{
    height: 120%;
}
#bo_gall .gall_img .no_image{
   width: 100%;
    height: 100%;
    display:block;
    top: 50%;
    position:absolute;
    background:none;
    color:#ddd;
}
.list-view-row{
    width: 100%;
    display:flex;
    flex-wrap:wrap;
    gap:2%;
}
.list-view-row .text-inner h4{
    font-size: 21px;
    text-align:left;
    font-family: 'Pretendard';
    padding-bottom:10px;
    border-bottom: 1px solid #000;
}
.list-view-row > li{
    width: 23.5%;
    margin-bottom:30px;
    border:2px solid #a3abbd;
    border-radius: 30px 30px 0px 0px;
    overflow:hidden;
}
.list-view-row .text-inner{
    text-align: left;
    padding: 20px;
}
#event-ul.list-view-row li{
    width: 32%;
}
.condate ul{
    text-align: center;
}
.condate ul li{
    text-align:left;
    display: block;
    font-size: 16px;
    color:#61707c;
    margin-bottom:0;
    margin-top: 10px;
    font-family:'Pretendard';
}
#event-ul.list-view-row .condate ul li{
    width: 100%;
} 
.condate ul li#review-name{
    color:#125bb2;
    font-weight: 600;
    position:relative;
    padding-right: 20px;
    width: auto;
}
.condate ul li#review-name:before{
    content:'|';
    color:#ddd;
    position:absolute;
    right:5px;
}
#bo_gall .gall_box{
    border:0;
    margin:0;
}
.section-info{
    margin-top: 100px;
    text-align: center;
    font-size: 28px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    
}
.section-info h3{
    font-family:'Pretendard';
    color:#1c2642;
    vertical-align:middle;
}
.section-info h3 span{
    background: linear-gradient(45deg,#329dff,#3c89ff, #4e64ff, #5e43ff,#682eff);
    color:#fff;
    font-size: 20px;
    padding: 5px 20px;
    border-radius: 30px;
    margin-right: 20px;
    vertical-align:middle;
}
.info-m ul{
    text-align: center;
}
.info-m ul li{
    
    display:inline-block;
    background:#f2f4f9;
    font-size: 16px;
    padding: 10px 18px;
    margin: 0 5px;
    margin-top: 20px;
    border-radius: 30px;
    
}
.bo_v_nb{
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e8e8e8;
    font-size: 18px;
    margin-bottom: 40px;
}
.bo_v_nb li{
    border-bottom: 1px solid #e4e4e4;
}

.list-viw{
    text-align: center;
    margin-bottom: 150px;
}
.list-viw a{
    display:inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    color:#fff;
    font-size: 18px;
    background: #125999;
    border-radius: 40px;
    
}
.bo_v_nb li .nb_tit{
    font-weight:800;
    background: #125999;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.info-table{
    text-align: center;
}
.info-table ul{
    margin: 0 auto;
    margin-top: 50px;
    display:inline-block;
    background:#f2f4f9;
    margin-bottom:0;
    padding: 20px;
    border-radius: 15px;
}
.info-table ul li {
    font-size: 18px;
    display:inline-block;
    
    
}
.info-table ul li:nth-child(2n-1){
    margin-right: 10px;
}
.info-table ul li span{
    display:inline-block;
    background: linear-gradient(45deg,#329dff,#3c89ff, #4e64ff, #5e43ff,#682eff);
    padding: 8px 10px;
    border-radius: 20px;
    font-weight:800;
        background: linear-gradient(45deg,#329dff,#3c89ff, #4e64ff, #5e43ff,#682eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 10px;
    
}
.info-table ul li  p{
    display:inline-block;
    margin-left: 4px;
    margin-right: 20px;
}
.view-page{
    font-family:'Pretendard';
}
#bo_v_share{
    display:inline-block;
}
#contact_us_wrap{
    padding-top: 150px;
    padding-bottom: 200px;
    background:url(../img/backcontbg-1.jpg) no-repeat;
    background-size: cover;
    background-position:center;
}

#contact_title{
    height: 200px;
    text-align: center;
    font-size :60px;
    font-family:'Pretendard';
    font-weight: 800;
    padding-top: 100px;
    color: #fff;
    letter-spacing: 60px;
}
.contact_us_content{
    display:flex;
    gap: 5%;
    margin-top: 100px;
    background: #2a2d34aa;
    padding: 50px;
    border-radius:0px;
    padding-bottom:50px;
}
.contact_us_content #left-bg{
    width:50%;
    background:url(../img/contact-bg.jpeg) no-repeat;
    /* height:100%; */
    border-radius:20px;
    background-size: cover;
    background-position:center;
}
.contact_us_content #right-cont{
    width :50%;
}
#right-cont .input{
    border:1px solid #ddd;
    font-size: 18px;
    font-family:'Pretendard';
    background:unset;
    color:#fff;
    padding: 0 10px;
}
#right-cont li.t{
    font-size: 16px;
    font-weight:800;
    font-family:'Prentendard';
    margin-top: 10px;
    margin-bottom: 5px;
    color:#fff;
}
#right-cont .input.text_b{
    height: 50px;
    border-radius: 10px;
    width: 100%;
}
#right-cont .input.textarea{
    width: 100%;
    border-radius: 10px;
    font-weight: 800;
    padding: 10px;
    
}
#right-cont input[type="submit"]{
    width: 20%;
    text-align: center;
    height: 50px;
    color:#ffffff;
    background: #515b7b;
    font-size: 18px;
    font-weight: 800;
    border-radius:30px;
    font-family:'Pretendard';
    border:0;
    display:block;
    margin: 0 auto;
    margin-top: 30px;
    transition: all 0.3s ease;
    position:absolute;
    right:50px;
    bottom:50px;
}
#right-cont input[type="submit"]:hover{
    background:#000;
}
.sub{
    width: 100%;
    height: auto;
    background: #ffffff;
}
.sub_bg{
    width:100%;
    height: 300px;
    background:#fff;
    position:relative;
    overflow:hidden;
}
.sub_bg_cover{
    width:100%;
    height: 100%;
    position:absolute;
    left:0;
    top:0;
    background:#ffffff;
    opacity:0.3;
}

.sub-title{
    text-align:center;
    padding-top: 150px;
    top: 50%;
    color:#000000;
    width: 100%;
    font-weight: 800;
    font-family:'Pretendard';
    font-size: 60px;
}
.sub-content{
    min-height: 800px;
}
#header #mobile-button{
    position: absolute;
    width: 40px;
    height: 40px;
    right:20px;
    top:20px;
    background:url(../img/mobile-menu-white.svg) no-repeat;
    background-size:contain;
    display:none;
    z-index:1000;
}
#header.white #mobile-button,
#header.sub-page-white #mobile-button{
    position: absolute;
    width: 40px;
    height: 40px;
    right:20px;
    top:20px;
    background:url(../img/mobile-menu.svg) no-repeat;
    background-size:contain;
    display:none;
    z-index:1000;
}
.mobile-menu{
    width: 300px;
    position:fixed;
    right:-300px;
    z-index:10000;
    background: #3b4259;
    height: 100%;
    padding: 20px;
    transition: all 0.3s ease;
}
.mobile-main-menu{
    font-family:'Pretendard';
    margin-top: 30px;
}
.mobile-main-menu > ul > li{
    margin-top: 15px;
    margin-bottom: 10px;
}
.mobile-main-menu > ul > li a{
    color:#fff;
}
.mobile-main-menu > ul > li >span{
    font-size:18px;
    color:#fff;
    position:relative;
}
.mobile-main-menu > ul > li.on span:before{
    position:absolute;
    content:'';
    display: block;
    width: 100%;
    height: 2px;
    background:#fff;
    bottom:-5px;
}
.mobile-sub{
    
    background:#fff;
    opacity:0;
    border-radius: 10px;
    transition: all 0.3s ease;
    height: 0;
    z-index:0;
    position:relative;
    overflow:hidden;
}
.mobile-sub.active{
    height:auto;
    padding: 5px 20px;
    opacity:1;
    z-index:100;
    margin-bottom: 20px;
    margin-top: 10px;
}
.mobile-sub a{
    color:#125fa3;
    font-size:14px;
    margin-top: 10px;
    display:block;
    margin-bottom: 10px;
}
#mobile-close{
    width: 30px;
    height: 30px;
    margin-bottom: 20px;
    background:url(../img/mobile-close.svg) no-repeat;
    background-size:contain;
    position:absolute;
    right:20px;
}
.sub-postion > ul{
    display:flex;
    flex-wrap:wrap;
    gap:2%;
    margin-top: 100px;
}
.sub-postion > ul > li{
    width: 23.5%;
    margin-bottom:50px;
}
.sub-postion > ul > li .card-in{
    border: 1px solid #ddd;
    padding: 20px;
    font-family:'Pretendard';
    height: 300px;
    border-radius:10px;
    position:relative;
    transition: all 0.3s ease;
}
.sub-postion > ul > li .card-in h3{
    font-size:60px;
    transition: all 0.3s ease;
}
.sub-postion > ul > li .card-in:hover h3{
    color:#fff;
}
.sub-postion > ul > li .card-in:hover p{
    bottom:150px;
    color:#fff;
}
.sub-postion > ul > li .card-in:hover{
    background:linear-gradient(135deg, #005fa2, #114aa0, #0e3774);
    border: 1px solid #005fa2;
}
.sub-postion > ul > li .card-in p{
    font-size: 24px;
    font-weight: 800;
    color:#005fa2;
    position:absolute;
    bottom:20px;
    transition: all 0.3s ease;
}
.sub-postion > ul > li .card-in ul{
    position: absolute;
    bottom:20px;
    opacity:0;
    transition: all 0.3s ease;
}
.sub-postion > ul > li .card-in:hover ul{
    opacity:1;
}
.sub-postion > ul > li .card-in ul li{
    font-size:18px;
    line-height: 30px;
    color:#fff;
}
#road-map-tit{
    font-size: 60px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 100px;
    
}
#road-map-tit h3{
    color:#135fa3;
    font-family:'Pretendard';
    font-weight:800;
}
.sub-roadmap{
    font-family:'Pretendard';
    padding-bottom:100px;
    padding-top:100px;
}
.sub-roadmap > ul > li{
    font-size: 22px;
    color:#135da0;
    font-weight:800;
}
.sub-roadmap > ul > li > ul{
    display:flex;
    border-bottom:1px solid #ddd;
    margin-bottom: 50px;
    padding-bottom:40px;

}
.content-002m .sub-roadmap > ul > li span{
    background:#005fa2;
    color:#fff;
    padding: 10px;
    border-radius: 30px;
    display:inline-block;
    position:absolute;

}
.content-002m .sub-roadmap > ul > li > ul > li{
    width:100%;
}
.content-002m .sub-roadmap > ul > li:nth-child(1):before{
    width: 200px;
    height: 200px;
    background:url(../img/aab1.png)no-repeat;
    background-size:contain;
    content:'';
    display:block;
    position: absolute;
    bottom:-180px;
    left:20%;
    opacity:0.5;
}
.content-002m .sub-roadmap > ul > li:nth-child(2):before{
    width: 200px;
    height: 200px;
    background:url(../img/aab2.png)no-repeat;
    background-size:contain;
    content:'';
    display:block;
    position: absolute;
    bottom:-180px;
    right:20%;
    opacity:0.5;
}
.content-002m .sub-roadmap > ul > li:nth-child(3):before{
    width: 200px;
    height: 200px;
    background:url(../img/aab1.png)no-repeat;
    background-size:contain;
    content:'';
    display:block;
    position: absolute;
    bottom:-180px;
    left:20%;
    opacity:0.5;
}
.content-002m .sub-roadmap > ul > li > ul > li.t{
    padding-left: 70px;
    color:#005fa2;
}
.content-002m .sub-roadmap > ul > li > ul > li.c{
    padding-left: 70px;
    margin-top: 20px;
}
.content-002m .sub-roadmap > ul > li:nth-child(2n) > ul{
    margin-left:50%;
}
.content-002m .sub-roadmap > ul > li:nth-child(2n) > ul > li.t{
    text-align:right;
    padding-right: 70px;
}
.content-002m .sub-roadmap > ul > li:nth-child(2n) > ul > li.c{
    padding-right:70px;
    text-align:right;
}
.content-002m .sub-roadmap > ul > li:nth-child(2n) span{
    right:0;
}
.content-002m .sub-roadmap > ul > li > ul{
    display:block;
    border:0;
    width: 50%;
    
}
.sub-roadmap > ul > li > ul > li{
    width: 50%;
}

.sub-roadmap > ul > li > ul > li.t{
    font-size:36px;
    font-weight:800;
    color:#000000;
    margin-top: 10px;
}
.sub-roadmap > ul > li > ul > li.c{
    font-size: 18px;
    color:#000000;
    font-weight:400;
    line-height:30px;
}
.sub-content-title{
    text-align:center;
    font-size: 48px;
    color:#000;
    font-family:'Pretendard';
    font-weight:800;
}
#creator03{
    background:#f5f5f5;
}
#creator05{
    background:url(../img/studio.jpg) no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position:center;
}
#creator05 h3{
    font-size:60px;
    text-align:center;
    color:#fff;
    font-family:'Pretendard';
    padding-top:200px;
}
#creator05 p{
    font-size:24px;
    text-align:center;
    color:#fff;
    font-family:'Pretendard';
    margin-top:50px;
}
#creator05 #join-btn{
    display:block;
    width: 300px;
    text-align:center;
    margin:0 auto;
    background:#ffffff;
    height:50px;
    color:#135fa3;
    border-radius:30px;
    font-size: 18px;
    font-weight:800;
    line-height: 50px;
    font-family:'Pretendard';
    margin-top:100px;
    transition:all 0.3s ease;
    cursor:pointer;
}
#creator05 #join-btn:hover{
    background:#607D8B;
    color:#fff;
}
.sub-fantrie h3{
    font-size:60px;
    text-align:center;
    margin-top:100px;
}
#fantrie-logo{
    text-align:center;
}
.fantrie-content ul{
    display:flex;
    gap:5%;
    margin-top:20px;
}
.fantrie-content ul li{
    width:50%;
}
.fantrie-content ul li.t img{
    width:100%;
    box-shadow:0px 0px 30px rgba(0,0,0,0.1);
    border-radius:20px;
}
.fantrie-content ul li.c h4{
    font-size: 48px;
    font-weight:800;
    margin-bottom:20px;
    font-family:'Pretendard';
}
.fantrie-content ul li.c p{
    font-size: 18px;
    font-family:'Pretendard';
    line-height: 30px;
}
.creatore{
    font-family:'Pretendard';
}
.creatore ul{
    display:flex;
    gap:4%;
    margin-top: 100px;
}
.creatore ul .card-in h3{
    font-size: 24px;
    font-family:'Pretendard';
}
.creatore ul .card-in h4{
    background: #135fa3;
    font-family:'Pretendard';
    font-weight:800;
    font-size: 40px;
    color:#fff;
    border-radius: 30px;
    text-align: center;
}
.creatore ul .card-in p{
    font-size: 18px;
    line-height: 30px;
    font-family:'Pretendard';
    margin-top: 20px;
    text-align: center;
}
#thumb-sevice02{
    width:100%;
    height:600px;
    overflow:hidden;
    position:relative;
    border-radius:30px;
}
#service02-in h4{
    font-size: 24px;
    font-family:'Pretendard';
    margin-top: 50px;
    margin-bottom: 100px;
    text-align: center;
}
#thumb-sevice02 img{
    position:absolute;
    left: 50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:100%;
    
}
#service02{
    background:#f5f5f5;
    padding: 100px 0px;
}
#sevice02-mn > ul{
    display:flex;
}
#sevice02-mn > ul > li{
    width:50%;
    margin-top:50px;
}
#sevice02-mn > ul > li h5{
    font-size: 30px;
    line-height: 44px;
    font-family:'Pretendard';
}
#sevice02-mn > ul > li h6{
    font-size:20px;
    font-family:'Pretendard';
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:1px solid #ddd;
    line-height: 32px;
}
#sevice02-mn > ul > li > ul{
    
}
#sevice02-mn > ul > li > ul > li.ca{
    font-size:18px;
    font-family:'Pretendard';
    line-height: 30px;
    position:relative;
    padding-left:30px;
}
#sevice02-mn > ul > li > ul > li.ca:before{
    content:'';
    position:absolute;
    width:8px;
    height:8px;
    background:#135fa3;
    display:block;
    left:0;
    top:14px;
    border-radius:10px;
}
#service03{
    padding: 100px 0px;
}
.service-04-edum{
    display:flex;
    gap:6%;
    border-top: 5px solid #005fa2;
}
.service-04-edu{
    width:50%;
    text-align:center;
    margin-top: 20px;
    background:#fff;
    padding: 50px 0px;
    border-radius: 60px;
}
.service-04-edu h3{
    font-size: 36px;
    font-family:'Pretendard';
    margin-bottom: 30px;
}
.service-04-edu ul li h5{
    font-family:'Pretendard';
    font-weight:500;
    font-size:24px;
}
.service-04-edu ul li{
    font-size: 20px;
    line-height:36px;

}
#service04{
    padding: 100px 0px;
}
#service04 .sub-content-title{
    color:#fff;
}
#service05{
    padding: 100px 0px;
}
#service01{
    padding:100px 0px;
}
#creator01{
    padding: 100px 0px;
    padding-top: 200px;
}
#creator04{
    padding: 100px 0px;
}
.brand-md ul{
    display:flex;
    gap:4%;
    flex-wrap:wrap;
}
.about-frank .brand-md ul{
    display:block;
    width:100%;
}
.content-02 .brand-md ul{
    text-align:right;
    width:100%;
}
.content-01 .brand-md ul li{
    width:45%;
}
.content-02 .brand-md ul li{
    padding-left:60%;
    width: 100%;
    text-align:left;
}
.about-frank .brand-md ul li{
    color:#000;
}
.about-frank .brand-md {
    padding:100px 0px;
}
.about-frank .content-01 .brand-md{
    padding-top:150px;
}
.about-frank .content-01 .brand-md h1{
    font-size: 64px;
    font-family:'Pretendard';
    margin-bottom:60px;
}
.brand-md ul li{
    color:#fff;
    width:48%;
    font-family:'Pretendard';
    margin-bottom:60px;
}
.about-frank .brand-md ul li h3{
    color: #7d8f91;
}
.brand-md ul li h3{
    font-size: 39px;
    font-family:'Pretendard';
}
.brand-md ul li p{
    font-size: 18px;
    line-height: 30px;
    margin-top:20px;
    color:#666;
}
#brand-m {
    padding:100px 0px;
}
#brand-m h4{
    color:#fff;
    font-size:60px;
    text-align:center;
    font-family:'Pretendard';
}
.hilight{
    background:#000;
}
.creator-b .story-ul-m > li .gall_con a{
    display:flex;
    gap: 3%;
    margin-bottom:50px;
}
.creator-bg-thumb{
    width: 40%;
    position:relative;
    overflow:hidden;
    height: 300px;
    border-radius:20px;
}
.creator-bg-thumb img{
    width:100%;
    position:absolute;
    left: 50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.creator-success-om{
    width:60%;
    color:#fff;
}
.creator-success-om h3{
    font-size: 24px;
    font-family:'Pretendard';
    margin-bottom:20px;
}
.creator-success-om p{
    font-size: 18px;
    font-family:'Pretendard';
    line-height: 28px;
}
.success-list{
    padding: 150px 0px;
}
.faq-wrap {
    margin-top: 20px;
}
.faq-wrap ul li{
    padding: 20px;
    font-family:'Pretendard';
    border-bottom: 1px solid #ddd;
    padding-left:80px;
    position:relative;
    cursor:pointer;
}
.faq-wrap ul li:hover{
    background:#efefef;
}
.faq-wrap ul li span{
    font-size: 18px;
    color:#fff;
    background:#135fa3;
    display:inline-block;
    width: 30px;
    height:30px;
    text-align:center;
    line-height: 30px;
    border-radius:30px;
    position:absolute;
    left:20px;
}
.faq-wrap ul li h4{
    font-size: 22px;
    font-family:'Pretendard';
}
.faq-wrap ul li p{
    font-size: 18px;
    height:0;
    overflow:hidden;
    transition: all 0.3s ease;
    margin-top: 10px;
}
.faq-wrap ul li.active p{
    height: auto;
}
.creator-list-m ul {
    display:flex;
    flex-wrap:wrap;
    gap:2%;
    padding-bottom:100px;
}
.creator-list-m ul li{
    width: 23.5%;
    margin-bottom: 30px;
}
.creator-list-m ul li h6{
    font-size: 21px;
    font-family:'Pretendard';
    margin-bottom:10px;
}
.creator-list-m .gall_con{
    position:relative;
    
}
.creator-list-m .gall_img{
    padding-bottom: 35%;
    border:10px solid #ffffff;
}
.creator-list-m .text-inner{
    position:absolute;
    bottom:0;
    width:100%;
    display:block;
    padding: 10px;
    height:0;
    overflow:hidden;
    opacity:0;
    transition: all 0.3s ease;
    z-index:100;
}
.creator-list-row:hover .text-inner{
    height:240px;
    opacity:1;
}
.creator-list-m .text-inner h4{
    font-size: 20px;
    color:#fff;
    width:100%;
    font-family:'Pretendard';
    line-height: 40px;
    padding-left:10px;
    text-align:center;
}
.creator-list-m .text-inner .creator-sns{
    width:90%;
    text-align:center;
    margin: 0 auto;
    margin-top: 60px;
}
 .creator-sns ul{
     width:100%;
     gap:2%;
     justify-content:center;
 }
 .creator-sns ul li{
     margin:0;
     width: 18%;
 }

.creator-main-info{
    bottom:0;
    opacity:1;
    height: 130px;
    overflow:hidden;
    transition: all 0.3s ease;
}
.review-n:hover .creator-main-info{
    opacity:1;
    height: 130px;
}
.creator-main-info h3{
    font-size: 20px;
    font-family:'Pretendard';
    color:#fff;
    margin-top: 20px;
}
.creator-main-info .creator-sns ul{
    display:flex;
    padding:0 30px;
    margin-top: 25px;
}
.creator-main-info .creator-sns ul li{
    width:20%;
}
.hilight h4,
.success-list h4{
    position:relative;
    height:90px;
    padding-top: 90px;
    overflow:hidden;
    transition:all 0.6s ease;
}
.hilight h4:before,
.success-list h4:before{
    position: absolute;
    content:'';
    width: 0%;
    left:50%;
    height:2px;
    display:block;
    background:#fff;
    bottom:0;
    transform:translate(-50%,-50%);
    transition:all 0.3s ease 1s;
}
.hilight h4.active,
.success-list h4.active{
    padding-top: 0px;
}
.hilight h4.active:before,
.success-list h4.active:before{
    width:200px;
}
#bo_list_total{
    text-align: center;
    display:block;
    font-size:14px;
    font-family:'Pretendard';
    float:none;
    color:#000;
    font-weight:400;
    margin-bottom:50px;
    margin-top: 40px;
}
#bo_list_total span{
    color:#135fa3;
    font-weight:800;
    margin-right: 5px;
}
#bo_list_total span:after{
    content:'/';
    margin-left:10px;
}
.creator-success-view-wrap{
    padding: 100px 0px;
    margin:0;
    background:#000;
}
.creator-success-view-page .section-info{
    padding-top:200px;
}
.creator-success-view-page .section-info h3{
    color:#fff;
}
.creator-success-view-page #bo_v_con{
    color:#fff;
    
}
#bo_v_con{
    font-family:'Pretendard';
    font-size:18px;
}
#creator-success-title-em #title-emin{
    font-size:60px;
    color:#fff;
    margin-top: 140px;
}
.fr-popup{
    max-width:800px;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#fff;
    z-index:100000;
    padding: 30px;
    border-radius: 20px;
    font-family:'Pretendard';
    display:none;
}
.fr-popup .input-field{
    width: 100%;
    box-sizing:border-box;
}
.fr-popup h3{
    font-size:36px;
    text-align:center;
    font-family:'Pretendard';
}
.fr-popup .input-field input[type=text]{
    width: 100%;
    height:40px;
    border:0;
    border:1px solid #ececec;
    border-radius:5px;
    margin-top: 5px;
    font-size: 18px;
    padding-left:10px;
    font-family:'Pretendard';
}
.fr-popup .input-field input[type=text]::placeholder{
    color:#ccc;
    font-size:14px;
}
.fr-popup .input-field input[type=text]:active{
    ouline:0;
    box-shadow:unset
}
.fr-popup .input-field{
    margin-top: 20px;
    float:left;
    padding: 0 10px;
}
.fr-popup .input-field textarea{
    width:100%;
    height: 100px;
    border:1px solid #ececec;
    border-radius:5px;
    resize:vertical;
    margin-top: 5px;
    padding:5px;
    font-size: 18px;
    font-family:'Pretendard';
}
.fr-popup .input-field.half{
    width:50%;
}
.fr-popup .input-field.full{
    width:100%;
}
.input-btn{
    float:left;
    width:100%;
}
.input-btn input[type=submit]{
    width :200px;
    height: 40px;
    color:#fff;
    font-size: 18px;
    font-family:'Pretendard';
    background:#135fa3;
    border:0;
    border-radius: 30px;
    transition: all 0.3s ease;
    display:block;
    text-align:center;
    margin:0 auto;
    margin-top: 20px;
}
.
.input-btn input[type=submit]:hover{
    background:#000;
}
.fr-popup form{
    position:relative;
    overflow:hidden;
}
.fr-popup .close-btn{
    width: 30px;
    position:absolute;
    right:40px;
    top:40px;
    height:30px;
    background:url(../img/close-btn-p.svg) no-repeat;
    background-size: contain;
    cursor:pointer;
}
.fr-popup .input-field .t{
    font-size:14px;
}
.fr-popup .input-field.half .c ul li{
    display:inline-block;
    width: 100px;
    font-size: 18px;
    margin-top: 10px;
}
.fr-popup .input-field.half .c ul li input{
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.cover-m{
    position:fixed;
    width:100%;
    height: 100%;
    background:linear-gradient(to bottom,#000000aa,#00000088);
    backdrop-filter: blur( 5.5px );
    -webkit-backdrop-filter: blur( 5.5px );
    z-index:100000;
    top:0;
    display:none;
}
.fr-popup.active,
.cover-m.active{
    display:block;
}
#bo_cate ul{
    margin-top: 30px;
    text-align:center;
}
#bo_cate.news-cate ul{
    text-align:left;
}
@keyframes bannermove {
    0% {
        transform:translate(0, 0);
    }
    100% {
        transform:translate(-50%, 0);
    }
}
#fullpage #contact_us_wrap{
    padding-bottom: 100px;
    margin-top: 0px;
}
#section-02m{
     text-align:left;
     height: 100%;
}
#fullpage .contact_us_content{
    margin-top:10px;
}
#section-02m .fp-overflow .page-w{
    position:absolute;
    width:100%;
    height:100%;
    padding:0 100px;
}
#section-02m .fp-overflow .page-w .section02m-title{
    padding-top:130px;
}
#section-02m-mobile{
    display:none;
}
.fp-overflow{
    height:  100%;
}
.section02m-title h3{
    font-size: 64px;
    font-weight:800;
    font-family:'Pretendard';
}
.cont-02m{
    margin: 200px 0px;
    margin-top: 100px;
}
.cont-02m{
    display:none;
}
.cont-02m.active{
    display:block;
}
.cont-02m p{
    font-size: 21px;
    font-weight:400;
    margin-top: 40px;
    line-height: 36px;
    font-family:'Pretendard';
}
.cont-02m h4{
    font-size: 32px;
    font-weight:600;
    font-family:'Pretendard';
}
.s02m-send{
    background:linear-gradient(to bottom, #def1ff, #005fa2);
    padding: 100px;
    width:0px;
    left:50%;
    position:absolute;
    transition: all 0.5s ease;
    transform:translate(0,-50%);
    opacity:0;
    
}
#fullpage .s02m-send{
    bottom:-180px;
    padding:100px 0px;
    height:300px;
}
#fullpage .pgae-w{
    width:100%;
}
.s02m-send.active{
    width:100%;
    opacity:1;
    left:0;
}
.title-02m-send ul{
    display:flex;
    text-align:center;
    justify-content:center;
}
.title-02m-send ul li{
    font-size: 46px;
    color:#fff;
    font-weight: 800;
    font-family:'Pretendard';
    margin: 0 60px;
    position:relative;
    cursor:pointer;
}
.title-02m-send ul li img{
    width:40px;
    opacity:0.2;
    transition: all 0.3s ease;
}
.title-02m-send ul li:hover img{
    width:40px;
    opacity:1;
}
.title-02m-send ul li.active img{
    opacity:1;
}
.title-02m-send ul li:before{
    content:'';
    position: absolute;
    bottom:0;
    left:0;
    display:block;
    width: 0%;
    height:5px;
    background:#fff;
    transition: all 0.3s ease;
}
.title-02m-send ul li:hover:before{
    width: 85%;
}
.title-02m-send ul li.active:before{
    content:'';
    position: absolute;
    bottom:0;
    left:0;
    display:block;
    width: 85%;
    height:5px;
    background:#fff;
}
.about-frank{
    position:relative;
    height: 100vh;
}
.about-frank #bg01{
    position: absolute;
    width: 50%;
    height: 100%;
    right:0;
    background:url(../img/testoff01.jpg) no-repeat;
    background-size:cover;
    background-position:center;
}
.about-frank #bg01-m,
.about-frank #bg02-m{
    display:none;
}
.about-frank #bg02{
    position: absolute;
    width: 50%;
    height: 100%;
    left:0;
    background:url(../img/testoff02.jpg) no-repeat;
    background-size:cover;
    background-position:center;
}
#index-01{
    width:100%;
}
.index-content-01{
    display:flex;
}
.index-01-left{
    width:50%;
}
.index-01-right{
    padding-top: 250px;
    padding-left:100px;
    width:50%;
}
.index-01-right h3{
    font-size: 64px;
    font-weight:800;
    font-family:'Pretendard';
    margin-bottom:70px;
}
.index-01-right h4{
    font-size: 32px;
    font-weight:600;
    font-family:'Pretendard';
    margin-top: 50px;
    
}
.index-01-right p{
    font-size: 18px;
    font-weight:400;
    font-family:'Pretendard';
    margin-top: 30px;
    line-height: 32px;
}
.slick-dots{
    display:flex !important;
    overflow:hidden;
    border-radius:20px;
    width: 300px;
    margin-top:30px;
}
.cont-02mmb .slick-dots{
    width: 100%;
    justify-content:center;
}
.cont-02mmb .slick-dots li{
    width: 10px;
    margin: 0 10px;
}
.cont-02mmb .slick-dots li button{
    border-radius: 30px;
    opacity:0.3;
}
.cont-02mmb .slick-dots li.slick-active button{
    opacity:1;
    background:#fff;
}
.slick-dots li{
    font-size:0;
    width:100px;
    height: 10px;

}
.slick-dots li button{
    width: 100%;
    height: 10px;
    border-radius: 0;
    border:0;
}
.slick-dots li.slick-active button{
    background:#7d8f91;
    border-radius: 30px;
}
.content-01e{
    background:#def1ff;
    padding: 100px 0px;
}
.content-bbs h3{
    font-size: 64px;
    text-align:center;
    color:#000;
    font-family:'Pretendard';
}
.content-bbs >p{
    font-size: 32px;
    text-align:center;
    font-family:'Pretendard';
    color:#000;
    margin-top:20px;
    margin-bottom: 20px;
    font-weight:600;
}
.content-bbs > ul{
    display:flex;
    margin-top: 100px;
}
.content-bbs > ul .bbs{
    width: 50%;
    height: 400px;
    position:relative;
    overflow:hidden;
    border-radius:20px;
    border: 5px solid #fff;
    
}
.content-bbs > ul .bbs img{
    height:100%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.content-bbs .abs{
    display:flex;
    width:100%;
    margin-top: 150px;
    margin-left:40px;
    gap:2%;
}
.content-bbs .abs li{
    background:#fff;
    height: 200px;
    width:33.3%;
    border-radius:20px;
    font-family:'Pretendard';
    padding:30px;
}
.content-bbs .abs li h4{
    font-size: 30px;
    text-align:center;
    margin-top:20px;
    font-family:'Pretendard';
    color:#005fa2;
    border-bottom: 2px solid #005fa234;
    padding-bottom: 20px;
}
.content-bbs .abs li p{
    text-align:center;
    font-size: 24px;
    margin-top: 10px;
    font-family:'Pretendard';
    color:#005fa2;
}
#partnership{
    padding-top: 200px;
}
.partnership-tit h3{
    text-align: center;
    font-size:60px;
    font-family:'Pretendard';
}
.brand-bbs ul{
    display:flex;
}
.brand-bbs ul li.gbs{
    width:25%;
    height:350px;
    position:relative;
    padding: 20px;
    text-align:center;
    font-family:'Pretendard';
}
.brand-bbs ul li.gbs h5{
    font-size: 24px;
    padding: 0 50px;
    font-family:'Pretendard';
}
.brand-bbs ul li.gbs p{
    font-size: 16px;
    margin-top: 10px;
    line-height: 24px;
    padding: 0 10px;
}
.brand-bbs ul li.gbs span{
    font-size: 18px;
    display:inline-block;
    padding: 5px 10px;
    background:#000;
    color:#fff;
    margin-top: 40px;
    border-radius: 2px;
    margin-bottom: 20px;
}
.brand-bbs ul li.gbs:before{
    content:'';
    display:block;
    width:320px;
    height: 320px;
    position:absolute;
    border:1px solid #c3c3c3;
    z-index:-1;
    border-radius: 300px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
}
.brand-bbs h3{
    font-size: 36px;
    text-align:left;
    margin-top: 60px;
    font-family:'Pretendard';
    margin-bottom: 60px;
    border-bottom: 1px solid #000;
    padding-bottom:30px;
}
.brand-bbs ul li:nth-child(2n).gbs:before{
    background:#def1ff;
}
.brand-bbs ul li:nth-child(2n-1).gbs:before{
    background:#A3abbd;
}
.content-02e{
    padding-bottom: 100px;
}
#service04 .service-04-edu ul{
    background:#125fa3;
    color:#fff;
    box-shadow: 0px 20px 30px rgba(0,0,0,0.1);
    padding: 50px;
    border-radius: 60px;
}
.contact-pop{
    position:fixed;
    bottom:40px;
    right:40px;
    z-index:100;
}
.cnt-pop ul li{
    width: 80px;
    padding: 10px;
}
.cnt-pop ul li a img{
    width:100%;
    border-radius: 100px;
    box-shadow: 0px 20px 30px rgba(0,0,0,0.2);
}

.cont-02m .more{
    font-family:'Pretendard';
    position:relative;
    left:50%;
    top: 30px;
    z-index:990;
    display:inline-block;
}
.cont-02m .more a{
    color:#000000;
    font-size:20px;
    display:inline-block;
    width:100px;
    line-height: 30px;
    position:relative;
    text-align:left;
    padding-left: 10px;
    border: 5px solid #005fa2;
}
.cont-02m .more a:before{
    z-index:90;
    width: 30px;
    height:30px;
    display:block;
    content:'+';
    font-size: 30px;
    line-height:25px;
    position:absolute;
    right: 0;
    transition:all 0.3s ease;
    text-align:center;
}
.cont-02m .more a:hover:before{
    transform:rotate(90deg)
}
.index-01-right .slick-prev{
    font-size: 0;
    width: 40px;
    height: 40px;
    position: absolute;
    left:0;
    bottom:-70px;
    background-image:url(../img/prev-btn.png);
    background-size:contain;
    background-position: center;
    background-color:#ffffff44;
    border:0;
    border-radius: 40px;
    transition: all 0.3s ease;
    z-index: 5;
}
.index-01-right .slick-next{
    font-size: 0;
    width: 40px;
    height: 40px;
    position: absolute;
    left:60px;
    bottom:-70px;
    background-image:url(../img/next-btn.png);
    background-size:contain;
    background-position: center;
    background-color:#ffffff44;
    border:0;
    border-radius: 40px;
    transition: all 0.3s ease;
    z-index: 5;
}
#port{
    padding: 100px;
    padding-top:200px;
    text-align:center;
}
.port-tit h3{
    font-size: 24px;
    font-family:'Pretendard';
}
.port-tit h1{
    font-size:48px;
    font-family:'Pretendard';
    margin-top: 40px;
    font-weight: 600;
}
.port-tit h1 span{
    font-size: 80px;
    margin:0 10px;
    font-weight: 800;
    color:#005fa2;
}
.port-tit:after{
    display:block;
    width: 100px;
    height: 100px;
    content:'';
    display:block;
    background:url(../img/port-btn.png) no-repeat;
    position:absolute;
    left:50%;
    margin-left:-50px;
    margin-top: 40px;
}
.port-img{
    padding: 100px 0px;
}
.port-img-an ul{
    overflow:hidden;
    position:relative;
}
.port-img-an ul li{
    float:left;
    width: 50%;
    padding: 40px;
}
.port-img-an ul li:nth-child(2n){
    margin-top:40px;
}
.port-thumb{
    background:#eee;
    width: 100%;
    height: 400px;
    border-radius: 30px;
}
.title-02m-send{
    padding: 10px; /* control the space for the gradient */

  --g: content-box 50%/4000% 4000%;
  -webkit-mask:
    linear-gradient(#000 0 0),
    conic-gradient(from 135deg,#0000 25%,#000 0) var(--g),
    conic-gradient(from -45deg,#0000 25%,#000 0) var(--g);
  -webkit-mask-composite: xor,source-over;
          mask-composite: exclude,add;
  transition: 1s;
    transition-delay:1s;
  cursor: pointer;
}
.title-02m-send.active{
     -webkit-mask-position: top,bottom;
}
.content-bbs h6{
    position: absolute;
    left: 35.3%;
    font-family:'Pretendard';
    font-size:26px;
    line-height:40px;
    font-weight:400;
}
#fullpage .video-section{
    width:100%;
    padding:0;
}

#fullpage .video-section .fp-overflow{
    width:100%;
    padding:0;
    overflow:hidden;
}
#fullpage .video-section video,
#fullpage .video-section img{
    width:100%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    height: 100%;
    background-size: 100% 100%;
    background-color: black;
    background-position: center center;
    background-size: cover;
    object-fit: cover; /*cover video background */
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity:0.5;
}
#fullpage #contact_title{
    padding-top:00px;
    height:100px;
}
.fp-watermark{
    display:none;
}
.slick-slide img{
    left:50%;
    transform:translate(-25%);
}
.title-021m-send ul{
    display:flex;
}
.title-021m-send ul li{
    position:relative;
    width:33.3%;
}
.s021m-a{
    position:absolute;
    width:100%;
    bottom:0;
}
.s021m-a .page-w{
    width:90%;
}
#section-021m{
    background:linear-gradient(to top,#202c3f,#121a1f,#000000);
}
.title-021m-send li.active .text-stroke-2{
    stroke:#ffffff !important;
 
}
 
#section-02m-tit{
    font-size:70px;
    font-family:'Pretendard';
    font-weight:800;
    color:#fff;
    width:100%;
    text-align: center;
    height: 100px;
    padding-top:100%;
    overflow:hidden;
    transition: all 1s ease;
    margin-top:150px;
    text-shadow:none !important;
    letter-spacing:60px;
    border-bottom: 5px solid #ffffff22
}
#section-02m-tit.active{
   padding-top:0;
}
.cont-021m{
    display:none;
    position:relative;
}
.cont-021m.active{
    display:block;
}
:root{
    --headingSize: 55px;
 
}
.cont-021m span{
  display: inline-block;
  overflow: hidden;
  animation: .3s swift-up ease-in-out forwards; 
}

.cont-021m i{
  font-style: normal;
  position: relative;
  top: var(--headingSize);
  animation: .5s swift-up ease-in-out forwards;
}
.cont-021m h4{
    font-size: 36px;
    text-align: center;
    color:#fff;
    font-family:'Pretendard';
    margin-top:100px;
    margin-bottom: 00px;
}
.swift-up-text{
    width: 50%;
    font-family:'Pretendard';
    color:#fff;
    font-size: 24px;
    text-align: center;
    margin: 0 auto;
}
@keyframes swift-up {
  to {
    top: 0;
  }
}
.title-021m-send ul li{
    position:relative;
    cursor:pointer;
}
.title-021m-send ul li:before{
    width: 0%;
    height: 70px;
    position: absolute;
    content:'';
    display:block;
    background:linear-gradient(to right, #ffffff00, #ffffff00, #ffffff00, #ffffff00,#ffffff00);
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    transition:all 0.3s ease;
    z-index:0
}
.title-021m-send ul li.active:before{
    background:linear-gradient(to right, #ffffff00, #ffffff00, #ffffff22, #ffffff00,#ffffff00);
    width:100%;
}
/* .title-021m-send ul li:before{
    width:0%;
    content:'';
    display:block;
    height:10px;
    border-radius:30px;
    background:#ffffff63;
    bottom:85px;
    position:absolute;
    left:50%;
    transform:translate(-50%);
    transition: all 0.5s ease;
}
.title-021m-send ul li.active:before{
    width:40%;
    content:'';
    display:block;
    height:10px;
    border-radius:30px;
    background:#ffffff63;
    bottom:85px;
    position:absolute;
    left:50%;
    transform:translate(-50%);
} */
.cont-021m .more{
    font-family:'Pretendard';
    position:relative;
    left:50%;
    top: 50px;
    z-index:990;
    display:inline-block;
    transform:translate(-50%);
    opacity:0;
    top:100px;
}
.cont-021m.active .more{
    animation-name:more;
    animation-delay:1.5s;
    animation-duration:0.3s;
    animation-fill-mode:forwards;
    animation-iteration-count:1;
}
.cont-021m .more a{
    color:#ffffff;
    font-size:20px;
    display:inline-block;
    width:100px;
    line-height: 30px;
    position:relative;
    text-align:left;
    padding-left: 10px;
    background:#254163;
}
.cont-021m .more a:before{
    z-index:90;
    width: 30px;
    height:30px;
    display:block;
    content:'+';
    font-size: 30px;
    line-height:25px;
    position:absolute;
    right: 0;
    transition:all 0.3s ease;
    text-align:center;
    background:none;
}
.reload{
    display:none;
}
.cont-021m .more a:hover:before{
    transform:rotate(90deg)
}
@keyframes more{
    0%{
        opacity:0;
        top:100px;
    }
    100%{
        opacity:1;
        top:50px;
    }
}
@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.ball {
  position: absolute;
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  backface-visibility: hidden;
  animation: move linear infinite;
}

.ball:nth-child(odd) {
    color: #7d8f91;
}

.ball:nth-child(even) {
    color: #3b4259;
}

/* Using a custom attribute for variability */
.ball:nth-child(1) {
  top: 77%;
  left: 88%;
  animation-duration: 40s;
  animation-delay: -3s;
  transform-origin: 16vw -2vh;
  box-shadow: 60vmin 0 40.703076368487546vmin currentColor;
}
.ball:nth-child(2) {
  top: 42%;
  left: 2%;
  animation-duration: 53s;
  animation-delay: -29s;
  transform-origin: -19vw 21vh;
  box-shadow: -60vmin 0 40.17594621519026vmin currentColor;
}
.ball:nth-child(3) {
  top: 28%;
  left: 18%;
  animation-duration: 49s;
  animation-delay: -8s;
  transform-origin: -22vw 3vh;
  box-shadow: 60vmin 0 40.248179047256236vmin currentColor;
}
.ball:nth-child(4) {
  top: 50%;
  left: 79%;
  animation-duration: 26s;
  animation-delay: -21s;
  transform-origin: -17vw -6vh;
  box-shadow: 60vmin 0 40.279749632220298vmin currentColor;
}
.ball:nth-child(5) {
  top: 46%;
  left: 15%;
  animation-duration: 36s;
  animation-delay: -40s;
  transform-origin: 4vw 0vh;
  box-shadow: -60vmin 0 40.964309466052033vmin currentColor;
}
.ball:nth-child(6) {
  top: 77%;
  left: 16%;
  animation-duration: 31s;
  animation-delay: -10s;
  transform-origin: 28vw 10vh;
  box-shadow: 60vmin 0 60.178483653434181vmin currentColor;
}
.ball:nth-child(7) {
  top: 22%;
  left: 17%;
  animation-duration: 55s;
  animation-delay: -6s;
  transform-origin: 1vw -23vh;
  box-shadow: -60vmin 0 40.703026794398318vmin currentColor;
}
.ball:nth-child(8) {
  top: 41%;
  left: 47%;
  animation-duration: 43s;
  animation-delay: -28s;
  transform-origin: 25vw -3vh;
  box-shadow: 60vmin 0 40.196265905749415vmin currentColor;
}
.cont-02mmb{
    position:relative;
}
.cont02mmins{
    padding-bottom: 60px;
    position:relative;
    height: 100%;
}
.cont02mmins .more{
    top:unset;
    bottom:20px;
    right:unset;
    text-align:center;
    width: 100%;
}
.cont02mmins .more a{
    display:inline-block;
    width:80px;
    position:relative;
    background:#fff;
    color:#000;
}
.cont-02mmb h4{
    font-size: 21px;
    margin-bottom: 20px;
}
.cont02mmins p{
    font-size: 13px;
    line-height: 24px;
    font-family:'Pretendard';
}








@keyframes scroll_1 {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-0.6em); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(0.6em); }
  100% { transform: translateY(0); }
}

.example--1 {
  background: tomato;
}

.scroll-icon__wheel-outer {
  display: block;
  position: absolute;
  left: 50%;
  top: .6em;
  height: 1em;
  width: .4em;
  margin-left: -.2em;
  border-radius: .4em;
  overflow: hidden;
}

.scroll-icon__wheel-inner {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: #fff;
  animation: scroll_1 2.75s ease-in-out infinite;
}

 
@keyframes scroll_2 {
  0%   { transform: translateY(0); opacity: 1; }
  25%  { opacity: 1; }
  75%  { transform: translateY(.75em); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

.example--2 {
  background: cornflowerblue;
}

.scroll-icon__dot {
  display: block;
  position: absolute;
  left: 50%;
  background: #fff;
  height: .5em;
  width: .5em;
  top: .6em;
  margin-left: -.25em;
  border-radius: 50%;
  transform-origin: top center;
  backface-visibility: hidden;
  animation: scroll_2 2s ease-out infinite;
}

 
.scroll-icon {
  display: block;
  position: relative;
  height: 3.5em;
  width: 2em;
  border: .25em solid #fff;
  border-radius: 1em;
  margin: 0 auto;
    margin-bottom: 20px;
}
#scroll-btn{
    z-index:1000;
    position:absolute;
    bottom:20px;
    left:50%;
    text-align:center;
    color:#fff;
    transform:translate(-50%,0);
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
    background:#ffffffaa !important;
}
#section-02m-mobile .slick-prev,
#section-02m-mobile .slick-next
{
    font-size: 0;
    line-height: 0;
 
    position: absolute;
    top: 50%;

    display: block;

    width: 40px;
    height: 40px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
#section-02m-mobile .slick-prev:hover,
#section-02m-mobile .slick-prev:focus,
#section-02m-mobile .slick-next:hover,
#section-02m-mobile .slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
#section-02m-mobile .slick-prev:hover:before,
#section-02m-mobile .slick-prev:focus:before,
#section-02m-mobile .slick-next:hover:before,
#section-02m-mobile .slick-next:focus:before
{
    opacity: 1;
}
#section-02m-mobile .slick-prev.slick-disabled:before,
#section-02m-mobile .slick-next.slick-disabled:before
{
    opacity: .25;
}

#section-02m-mobile .slick-prev:before,
#section-02m-mobile .slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#section-02m-mobile .opm{
    text-align:center;
}
#section-02m-mobile .slick-prev
{
    left: 0;
}
#section-02m-mobile [dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
#section-02m-mobile .slick-prev:before
{
    font-size: 40px;
    content: '←';
}
#section-02m-mobile [dir='rtl'] .slick-prev:before
{
    font-size: 40px;
    content: '→';
}

#section-02m-mobile .slick-next
{
    right: 0px;
}
#section-02m-mobile [dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
#section-02m-mobile .slick-next:before
{
    font-size: 40px;
    content: '→';
}
#section-02m-mobile [dir='rtl'] .slick-next:before
{
    font-size: 40px;
    content: '←';
}