@charset "utf-8";
@import "font/webfonts.css";

:root {
    /* color */
    --mainColor:#2572ff;
    --subColor:#333;
    --white:#fbfbfb;
    --gray-shadow:6px 9px 10px 1px rgba(69,69,69,0.2);
    --blue-shadow:6px 9px 10px 1px rgba(59,128,255,0.2);

    /* font */
    --font-title:50px;
    --font-subtit-l:45px;
    --font-subtit-m:40px;
    --font-keyword:35px;
    --font-keyword-txt:25px;
    --font-botton:35px;
    --font-text:22px;

    /* wrap */
    --wrap-l:90%;
    --wrap-m:85%;
    --wrap-s:80%;
    --wrap-xs:75%;
}
/* common style */
.scaleX {transform:scaleX(0.9);}
body {cursor:default}
a {cursor:none}

/* PAYDO MOVING*/
.moving {position:absolute;text-shadow:-1px 0 var(--mainColor), 0 1px var(--mainColor), 1px 0 var(--mainColor), 0 -1px var(--mainColor);color:var(--white);font-size:210px;font-family:'gmsb';z-index:-3;transform:scaleX(0.9);}
.m1{top:-225px;right:-200px;animation:m1 5s linear infinite;}
@keyframes m1 {
    0%{top:-235px;right:-180px}
    50%{top:-225px;right:-200px}
    100%{top:-235px;right:-180px;}
}
.m2{bottom:-210px;left:-150px;animation:m2 5s linear infinite;}
@keyframes m2 {
    0%{bottom:-190px;left:-130px}
    50%{bottom:-210px;left:-150px}
    100%{bottom:-190px;left:-130px;}
}
.m3{bottom:-500px;right:-245px;animation:m3 5s linear infinite;}
@keyframes m3 {
    0%{bottom:-480px;right:-225px}
    50%{bottom:-500px;right:-245px}
    100%{bottom:-480px;right:-225px;}
}
.m4{top:-210px;left:-150px;animation:m4 5s linear infinite;}
@keyframes m4 {
    0%{top:-190px;left:-130px}
    50%{top:-210px;left:-150px}
    100%{top:-190px;left:-130px;}
}
.m5{top:450px;right:-150px;animation:m5 5s linear infinite;}
@keyframes m5 {
    0%{top:430px;right:-130px}
    50%{top:450px;right:-150px}
    100%{top:430px;right:-130px;}
}

/* main */
.mainSlider {width:100%;height:calc(100vh - 135px);}
.mainVOD {width:100%;height: calc(100vh - 135px)}

/* about */
.about-title{width:100%;height:auto;text-align:center;}
.about-title .title {font-size:var(--font-title);font-family:'gmsb';position:relative;display:inline-block;background:url(../img/fill.svg) repeat-x;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.about-title .title .bullet {width:12px;height:12px;display:block;position:absolute;background-color:var(--mainColor);top:-5px;right:-15px;}
.about-title .subTitle {display:block;font-size:var(--font-subtit-m);}

.business-wrap {width:100%;height:550px;position:relative;display:flex;justify-content:space-around;align-items:center;}
.business-item {width:510px;height:400px;position:relative;}
.item {width:250px;height:250px;border-radius:60px;background-color:var(--mainColor);text-align:center;font-size:var(--font-subtit-m);color:#fff;padding:10px;font-family:'gmsl';padding-top:35px;margin-left:100px;box-shadow:var(--gray-shadow);opacity: 1;}

.items {position:absolute;top:50%;left:50%;margin-left:-120px;}
.items li{position:absolute;font-size:var(--font-keyword-txt);padding:10px 30px 4px 30px;box-shadow:var(--blue-shadow);border-radius:30px;color:var(--mainColor);white-space:nowrap;background-color:#fff;}

.items li:nth-child(1) {bottom:150px}
.items li:nth-child(2) {top:150px}
.items li:nth-child(3) {bottom:5px;right:25px;}
.items li:nth-child(4) {top:130px;left:240px;}
.items li:nth-child(5) {top:20px;left:270px;}
.items li:nth-child(6) {bottom:110px;left:230px;}
.items li:nth-child(7) {top:20px;right:50px;}

.item-box{position:relative;display:inline-block;}
.text-box::after {content:'';width:50px;height:50px;border-radius:50%;position:absolute;background-color:rgba(255,255,255,0.2);display:inline-block;top:-5px;left:-10px;}

.item_icon img {margin:0 auto;}
.item-cover {width:250px;height:250px;position:absolute;top:0;left:0;display:block;}
.item .item-icon {width:140px;height:100px;display:block;margin:0 auto;animation:itemicon 5s linear infinite;}
.t1 {position:relative;margin-top:80px;}
.t1 .item-icon {background:url(../img/about1.png) no-repeat center;background-size: contain;}
.t2 .item-icon {background:url(../img/about2.png) no-repeat center;background-size: contain;;margin-top:-10px;}
.t3 .item-icon {background:url(../img/about3.png) no-repeat center;background-size: contain;;margin-top:10px;}
@keyframes itemicon {
    0% {filter:drop-shadow(6px 6px 10px rgba(45,45,45,0));}
    50% {filter:drop-shadow(6px 6px 10px rgba(45,45,45,1));}
    100% {filter:drop-shadow(6px 6px 10px rgba(45,45,45,0));}
}
.t2 {position:relative;margin-top:0px;}
.t3 {margin-top:150px;}
.t2 .item-box {width:87%;margin:0 auto;}

.item_line1 {position:absolute;top:50%;left:50%;margin-top:-25px;margin-left:7px;transform:rotate(345deg);z-index:-1;}
.item_line2 {position:absolute;top:50%;left:50%;margin-left:30px;transform:rotate(30deg);z-index:-1;}

.clientImg {width:calc(100%/6 - 20px);height:50px;border-radius:30px;;margin-right:10px;z-index:3;box-shadow:4px 3px 7px 2px rgba(0,0,0,0.1);overflow:hidden}
.clientImg img {width:auto;height:50px;margin:0px auto;background-size:cover;}
.cmore {margin-top:20px;}
.clientMore {width:50px;height:50px;border-width:0px;border-radius:22px;box-shadow:3px 4px 0px 0px var(--subColor);border:1px solid var(--subColor);font-size:var(--font-botton);line-height:55px;text-align:center;color:var(--subColor);transition:all .3s linear;}
.clientMore.active {box-shadow:inset 3px 4px 0px 0px var(--subColor);}
.clientMore.active.Blue {background:var(--mainColor);box-shadow:3px 4px 0px 0px inset var(--mainColor);border:1px solid var(--mainColor);}
.clientMore.Blue {background:var(--mainColor);color:#fff;border:1px solid var(--mainColor);box-shadow:3px 4px 0px 0px var(--mainColor);transition:all .3s linear;}

.paydotext-wrap {width:100%;height:140px;background:var(--mainColor);position:absolute;top:0;border-radius:70px 70px 0 0;display:flex;align-items:center;}
.history-title {width:1180px;height:80px;background-color:rgba(59,128,255,0.7);border-radius:50px;color:var(--white);margin:0 auto;font-size:var(--font-subtit-m);font-family:'gmsm';letter-spacing:10px;display:flex;align-content:center;align-items:center;}
.icon{width:46px;height:46px;background:url(../img/icon_history.png);margin:0 30px;}
.historytext-wrap {width:1210px;height:auto;margin:0 auto;margin-top:135px;position:relative;padding-bottom:30px;}
.year-wrap {margin-top:20px;}
.year {font-size:var(--font-subtit-l);color:#202020;font-family:'gmsb';position:relative;display:inline-block;}
.year .bullet {width:12px;height:12px;display:block;position:absolute;background-color:var(--mainColor);top:-10px;right:-10px;}
.year .line {width:3px;height:200px;display:block;position:absolute;background-color:var(--mainColor);transform:rotate(30deg);right:-10px;top:-30px;}
.history-box {font-size:var(--font-text);margin-left:130px;}
.year-wrap.right {text-align:right;}
.year-wrap.right .year .line {width:3px;height:200px;display:block;position:absolute;background-color:var(--mainColor);transform:rotate(30deg);left:-30px;top:-60px;} 
.year-wrap.right .history-box {margin-right:210px;}
.m-bullet {display:none;}

.historyMore {width:410px;height:70px;border-radius:40px;border:1px solid var(--subColor);position:relative;z-index:3;display:block;box-shadow:3px 4px 0px 0px var(--subColor);font-size:var(--font-botton);line-height:70px;text-align:center;margin-top:30px;left:850px;overflow:hidden;background:#fff;transition:all .3s linear;}
.historyMore.active {width:50px;height:50px;border-radius:22px;box-shadow:inset 3px 4px 0px 0px var(--subColor);left:1150px;background:url(../img/up.svg) no-repeat center;border:1px solid var(--subColor);background-position-y:12px;}
.historyMore.active.Blue {width:50px;height:50px;border-radius:22px;left:1150px;background:url(../img/up-hover1.svg) no-repeat center;background-color:var(--mainColor);border:1px solid var(--mainColor);box-shadow:inset 3px 4px 0px 0px var(--mainColor);background-position-y:12px;}
.historyMore {position:relative;}
.historyMore.Blue{background:var(--mainColor);border-radius:40px;transition:all .3s linear;color:#fff;border:1px solid var(--mainColor);box-shadow:3px 4px 0px 0px var(--mainColor);}

.cmore {display:none;}
.hmore {display:none;}
.cmore.active {display:block;}
.hmore.active {display:block;}

.load01 {position:absolute;bottom:250px;z-index:-1;}
.load02 {position:absolute;top:0;z-index:-1;}
.load02_01 {position:absolute;top:0;z-index:-1;stroke-width:5px;stroke-dasharray:2480px;animation:stroke 10s linear infinite;}
@keyframes stroke { 
    0% {stroke-dashoffset:2480px;} 
    50% {stroke-dashoffset:0px;} 
    100% {stroke-dashoffset:2470px;} 
}
/* portfolio */
.portfolio-wrap {width:100%;height:auto;padding-top:90px;}
.portfolio_page {width:100%;height:auto;margin-top:50px;display:flex;flex-direction:column;align-items:center;}
.video_slider {width:1700px;height:auto;display:flex;justify-content:center;flex-wrap:wrap}
.pfvideo {width:calc((100% / 3));height:auto;border-radius:15px;margin-bottom:15px;overflow:hidden;position:relative;border:1px solid var(--white);}
.pfvideo img {width:100%;}
.videoInfo-box {display:none;}
.videoInfo {width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.7);text-align:center;color:#fff;display:flex;align-content:center;align-items:center;justify-content:center;flex-direction: column;}
.videoInfo-title {font-size:var(--font-keyword);font-family: 'gmsm';}
.videoInfo-subject {font-size:var(--font-text);}
.pfvideo:hover .videoInfo-box {display:block} 
.pfvideo:hover .pfvideo-thumbnail {transform:scale(1.2);transition:all 1s linear}
.portfolioButton {width:410px;height:70px;border-radius:40px;border:1px solid var(--subColor);z-index:3;display:block;box-shadow:3px 4px 0px 0px var(--subColor);font-size:var(--font-botton);line-height:70px;text-align:center;overflow:hidden;background:#fff;transition:all .3s linear;cursor:default;}
.portfolioButton:hover {background:var(--mainColor);border-radius:40px;transition:all .3s linear;color:#fff;border:1px solid var(--mainColor);box-shadow:3px 4px 0px 0px var(--mainColor);}

/* contactUs */
.contact-wrap {max-width:1600px;height:auto;margin:0 auto;display:flex;justify-items:center;flex-direction:column;align-items:center;padding-top:100px;position:relative;z-index:3;}
.contact_txt .title {font-size:var(--font-title);color:#616161;font-family:'gmsb';position:relative;display:inline-block;background:url(../img/fill.svg) repeat-x;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:25px;}
.contact_txt .title .bullet {width:12px;height:12px;display:block;position:absolute;background-color:var(--mainColor);top:-40px;right:-10px;}
.contact_txt span {display:block;margin-top:30px;margin-bottom:30px;font-size:var(--font-subtit-l);line-height:40px;}
.map-wrap{width:100%;height:700px;display:flex;flex-direction:row;background-color:var(--white);border-radius:40px;position:relative;box-shadow:var(--gray-shadow);z-index:3;border:1px solid var(--white);}
.paydo_360 {width:300px;height:300px;background:url(../img/lotate.svg);background-size:cover;animation:paydo_360 25s linear infinite;position:absolute;top:-100px;left:-120px;opacity:0.3;z-index:-1;}
@keyframes paydo_360 {
    to {transform:rotate(0deg);}
    from {transform:rotate(360deg);}
}

.paydo-map {position:relative;width:670px;border-top-left-radius:40px;border-bottom-left-radius:40px;overflow:hidden;background-color:#fff;}
.paydo-map-base {position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(../img/map.svg) no-repeat center;background-size:contain;}
.paydo-walk-motion {position:absolute;top:0px;left:0px;width:100%;height:100%;display:none;}
.paydo-bus-motion {position:absolute;top:0px;left:0px;width:100%;height:100%;display:none;}
.paydo-map-start{position:absolute;top:0px;left:0px;width:100%;height:100%;}
.paydo-map-mm{position:absolute;top:0px;left:0px;width:100%;height:100%;}
.paydo-map-goal{position:absolute;top:0px;left:0px;width:100%;height:100%;}
.contact_txt{text-align:center;}
.info-wrap {width:660px;height:auto;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center;}
.info_title {text-align:center;font-size:var(--font-title);transform:scaleX(.9);font-family:'gmsb';padding-bottom:50px;}
.info-wrap ul {display:flex;justify-content:center;margin-bottom:30px;}
.info_bold {width:80px;font-family:'gmsm';font-size:var(--font-text)}
.info_txt {width:370px;font-size:var(--font-text)}
.blueBG.c5 {width:540px;height:560px;position:absolute;background:#ebebeb;border-radius:50px;bottom:-60px;right:-65px;z-index:-1;}

.info-icon-box {width:100%;height:auto;display:flex;justify-content:center;flex-direction:column;align-items:center;}
.icon-box {display:flex;width:450px;justify-content:space-around;align-items:center;align-content:center;padding-bottom:20px;}
.info-box {height:50px;}

.bus-box, .walk-box {position:relative;}
.bus-icon,.walk-icon {width:auto;border-radius:40px;display:flex;justify-content:center;align-items:center;align-content:center;background-color:var(--subColor);}
.info-btn-txt{padding:3px 20px 0px 0px;color:#fff;font-size: var(--font-text);}
.bus {width:45px;height:45px;background:url(../img/icon-bus.svg) no-repeat center;background-size:cover;background-position-x:0px;display:inline-block;margin-right:5px;}
.walk {width:45px;height:45px;background:url(../img/icon-walk.svg) no-repeat center;background-size:cover;background-position-x:0px;display:inline-block;margin-right:5px;}

.bus-info {display:none;}
.walk-info {display:none;}
.bus-icon.active {background-color:var(--mainColor);}
.walk-icon.active {background-color:var(--mainColor);}
.bus-icon:hover {background-color:var(--mainColor);transition:.2s linear;}
.walk-icon:hover {background-color:var(--mainColor);transition:.2s linear;}