@import url('./reset.css');

/* COMMON */
.inner{width: 83.33%; margin: auto;}
.innerS{width: 72.92%; margin: auto;}
.innerMain{padding-left: 10rem;width: 100%;}
.fontEn{font-family: 'Poppins', sans-serif;}
.colorW{color: #fff;}
.colorB{color: #000;}
.colorMB{color: #060E10;}
.colorA{color: #0957ff;}
.colorB{color: #0957ff;}
.b_colorA{background: #0957ff;}
.b_colorB{background: #0957ff;}
.borderA{border-color:#0957ff;}
.subBG_G{background: linear-gradient(#0957ff, #313b3f)}
.bg_G{background: linear-gradient( 105deg, #0957ff, #45B6DB)}
.bg_B{background: #111;}
.bg_W{background: #fff;}
.flexbox{display: flex; justify-content: space-between; align-items: center;}
.flexboxST{display: flex; justify-content: flex-start; align-items: flex-start;}
.flexboxSTT{display: flex; justify-content: center; align-items: center;}
.fontWL{font-weight: 100;}
.fontWB{font-weight: 600;}
.fontWE{font-weight: 800;}
.fontWN{font-weight: 500;}
.arrow_btn1::before{content:""; width: 100%; height: 104%; background: url("/img/arrowBtn_W.png")no-repeat center/cover; position: absolute; top: -5%; right: -9.5rem; }
.only_tabmob{display:none !important;}
.only_mob{display:none ;}
.only_pctab{display: block;}
.only_mob2 {display: none !important;}
.portfolio_Cinner{width: 91.67%; margin: auto;}
/* COMMON */

main{position: relative; z-index: 2; margin-bottom: 1000px;}
.section{width: 100%;}

/* header */
.outer-wrap{display:flex; justify-content: center; align-items: center; flex-direction: column; overflow: hidden;}
header{width: 91.67%; top:6rem; position: fixed; z-index: 4;}
article .top{font-size:2rem; font-weight: 800; transform: rotate(-90deg); position: fixed; bottom:9.72%; left: 1%; z-index: 3; letter-spacing: .2rem;}
article .top::before{content:""; width: 52px; height: 2px; background: linear-gradient(90deg, #0957ff, #45B6DB); position: absolute; right: -68px; top: 47%;}
.goTopBtn.on  .top::before{background: linear-gradient(90deg, #fff, #45B6DB);}
article.only_pctab .top.rel{bottom: 11rem; position: absolute;}
article.only_tabmob .top.rel{position: fixed;}
article .inquiry {font-size:2.4rem; font-weight: 600; position: fixed; bottom:5%; right: 13rem; z-index: 3; line-height: 3.2rem;}
article .inquiry.Bk{color: #000 !important; font-size:2.4rem; font-weight: 600; position: fixed; bottom:9.72%; right: 6%; z-index: 3; line-height: 3.2rem;}
header #logo>path.on,
header #menu>.menu-white.on{fill:#000}
.menu.on{position: relative;}
#logo>path, #menu>rect{transition: all .4s;}
.menu::after{content: '\f00d'; position: absolute; width: 6.6rem; height: 6.6rem; font-size: 4rem; font-weight: 900; background: #fff; top: 0;left: 0;transform: scale(0); font-family:'Line Awesome Free'; text-align: center; line-height: 6.6rem;opacity: 0;border-radius: 6rem; transition: 0s;}
.menu.on::after{opacity: 1; transform: scale(1);transition: opacity .4s .6s, transform .4s .6s, border-radius .8s .6s;border-radius: 0px;}
.outer-wrap .menu{z-index: 3;overflow: hidden;width: 6.6rem;height: 6.6rem;justify-content: center;}
.menu_list{background-color: #04070b; position: fixed; top: 0; bottom: 0; width: 50%; right: -50%; transition: all .6s;}
.menu_list.show{position: fixed; right: 0; width: 39%;}
.menu_list>ul{position: absolute; top: 50%; transform: translateY(-50%); left: 10rem;}
.menu_list>ul>li{overflow: hidden;}
.menu_list>ul >li + li{margin-top: 6rem;}
.menu_list>ul >li a{font-size: 6rem; font-weight: 900;display: flex;justify-content: flex-start;align-items: center; }
.menu_list .address{color:#777; font-size:1.4rem; position: absolute; bottom: 5.3%; left: 10rem;}
.menu_list .address p:first-child{margin-bottom: .9rem;font-family: 'Noto Sans';}
.dep2 li:first-child{padding-top: 1.8rem;}
.menu_one.Bk{fill:#000;}
header #menu .menu_one.on{fill:#fff;}
.menu-white.Bl{fill:#0957ff}
.menu.on  rect{width: 0;}
.menu_ul li.gray a{opacity: .3;}
.menu_ul>li a{transition:all 0.5s ease;}
.menu_list.show .menuAni >span,
.menu_list.show .menuAni i{transform: translateX(0%);}
.menuAni{overflow: hidden;}
.menuAni span{display: block; transform: translateX(-150%) scale(2, 0.7);transition: transform 1s 1s;}
.service-plus {display: flex;position: relative;width: 2.6rem;height: 2.6rem;margin-left: 2.5rem; align-items: center;overflow: hidden;}
.serviceDepth.on a > span.service-plus .service-plus-inner{transform: translateX(0);}
.service-plus .service-plus-inner{position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: transform 1s 1s;transform: translateX(-150%);}
.service-plus small{position: absolute;display: block;background: #fff;}
.service-plus small:first-child{top: 0;bottom: 0;left: 50%;width: 2px;transform: translateX(-50%);transition:all 1s;}
.service-plus small:last-child{left: 0;top: 50%;width: 100%;height: 2px;transform: translateY(-50%);}
.service-plus-inner.active small:first-child{top: 49%;bottom: 49%;}
ul.dep2{overflow: hidden;height: 0;transition: height 1s;}
.dep2.active{height: 26rem;}
ul.dep2 > li > a{display: block;font-size: 2.4rem;font-weight: 400;}
ul.dep2 > li{padding: 0.3rem 0;}
ul.dep2 > li+li{margin-top: 2.5rem;}
/* header end */

/* footer */
footer {position: fixed; bottom: 0; width: 100%; height: 1000px;}
.footer{justify-content: center;background: #1a1a1a;}
.section.footer>div{display: flex;justify-content: center;}
.footerInner{width: 91.67%;flex-direction: column;align-items: start;justify-content: center;padding: 15rem 0 5rem;}
.footerInner>div{width: 100%;}
.footerInner>p{color: #777777;font-size: 1.6rem;margin-top: 10.6rem;}
.footerArrow a{font-size: 4rem;font-weight: 600;justify-content: flex-start;}
.footerArrow a + a{margin-top: 2rem;}
.footerArrow{align-self: flex-end;}
.footerInner div .right{color: #fff;flex-grow: .4;align-items: flex-start;}
.footerInner div .right>ul{flex-grow: 1;}
.footerInner div .right a{color: #fff;font-size: 4.8rem;font-weight: 700;}
.footerInner div .right li>p:first-child{color: #777;font-size: 2rem;margin-bottom: 10px;}
.footerMenu li+li,
.footerinfo li+li{margin-top: 5rem;}
.footerinfo{font-size: 1.6rem;}
.footerArrow>div{overflow: hidden;display: flex;align-items: center;}
.footerArrow>div div{overflow: hidden;line-height: 52px;}
.footerArrow div+div{margin-top: 20px;}
.footerArrow span{width: 75px;}
.footerArrow span img{width: 100%;}
.footerMenu li{overflow: hidden;}
.footerArrow div a,
.footerMenu li a{position: relative;display: inline-block;transition: transform 400ms;}
.footerArrow div a:hover,
.footerMenu li a:hover[data-label]{transform:translateY(-100%);}
.footerArrow div a[data-label]:after,
.footerInner div .right a[data-label]:after{content: attr(data-label);position: absolute;top: 100%;left: 0;}
/* footer end */

/* index */
.section.do{justify-content: center;} 
.doWrap {align-items: flex-end;}
.doWrap .left{font-size: 12.2rem;font-weight: 900;position: relative;padding-bottom: 5rem;}
.doWrap .left p{display: flex;justify-content: flex-start;position: relative;z-index: 1;}
.doWrap .left p+p{margin-top: 4rem;}
.doWrap .right{font-size: 4rem;font-weight: 500;opacity: .3;width: 37%;}
.doWrap .right p{overflow: hidden;}
.doWrap .right p span{display: block;}
.doWrap .right p+p{margin-top: 1.7rem;}
.DoAniWrap>div{position: absolute;top: -3%;left: 40%;height: 26rem;width: 100%;overflow: hidden;}
.doBgWrap{background: url('/img/GradationBG.gif')no-repeat;transition: transform 1s .8s;width: 100%; height: 100%;transform: translateX(-110%)}
.doBgWrap.on{transform: translateX(0);}
.doBgWrap span{width: 24rem;height: 9.7rem;position: absolute;bottom: 0;right: 0;background: #111;}
.Do_menuAni{overflow: hidden;}
.Do_menuAni span{display: block;transform: translateX(-150%) scale(2, 0.7);transition: transform 1s .5s;}
.DoAniWrap.on .Do_menuAni span{transform: translateX(0%);}

.section.service{background: #ECECEC;position: relative;}
.area_service .list b{display: none;}
.section.service .bx-wrapper{background: #ececec;border:none;box-shadow:none; }
.area_service:before,
.area_service:after{content:''; display:block; position:absolute; top:0px; z-index:-2; width:50%; height:100%;}
.area_service .txt{font-size: 12.2rem;font-weight: 900;position: absolute;top: 22%;left: 13%;z-index: 1;padding-top: 4rem;}
.area_service .txt span{display: block;}
.area_service .object i{opacity:0.4;}
.area_service .object i:nth-of-type(4) ~ i{opacity:1;}
.area_service .list,
.area_service .list li{height:100vh;}
.area_service .list li{display:block !important; position:relative;}
.area_service .list .img{overflow:hidden; position:absolute; top:0; right:0; width:40%; height:100%;}
.area_service .list .img div{position:absolute; top:0px; left:0px; width:100%; height:100%; background-repeat:no-repeat; background-position:0 0;opacity: 0;transition:opacity 0.5s linear 0.2s;transform: scale(1.2);}
.area_service .list .img.show div{animation:sizeScale 1.6s cubic-bezier(0.22, 0.32, 0.32, 0.9) 0.4s forwards; opacity: 1;transition: opacity .5s linear 0.2s;}
.area_service .list p{opacity:0; position:absolute; top: 15.7rem;; left:calc(100% / 8 * 5 + 20px);line-height: 41px; z-index:10; font-size:2.6rem; color:#fff; font-weight:300;}
.area_service .list p.show{animation:aniOpacity 0.9s cubic-bezier(0.22, 0.32, 0.32, 0.9) 0.7s forwards;}
.area_service .list em{opacity:0; position:absolute; top: 30rem;; left:calc(100% / 8 * 5 + 20px);line-height: 11rem; z-index:10; font-size:11rem; color:#ffffff40; font-weight:700;}
.area_service .list em.show{animation:aniOpacity 0.9s cubic-bezier(0.22, 0.32, 0.32, 0.9) 0.7s forwards;}
.area_service .list_page{position:absolute; top:50%; left:calc(100% / 10 *4.2); z-index:52; width:calc(100% / 10 *1.8);/*  pointer-events:none; */ transform:translateY(-50%);}
.area_service .list_page li + li{margin-top: 100px;}
.area_service .list_page li > a{display:block; position:relative; padding-left:37px; font-size:2.2rem; font-weight:700; color:#060E10; letter-spacing:0; transition:all 0.3s ease;}
.area_service .list_page li > a:before{content:''; display:block; position:absolute; top:6px; left:0px; width:20px; height:7px; margin-bottom:2px; background:#333; transition:all 0.5s ease;}
.area_service .list_page li > a:after{content:''; opacity:0; display:block; position:absolute; top:9px; left:73%; width:0; height:2px; background: linear-gradient(90deg,#45B6DB, #0957ff); transition:width 0s linear 0.8s, opacity 0.3s linear 0.2s;}
.area_service .list_page li > a.active{color:#0957ff;}
.area_service .list_page li > a.active:before{background:#0957ff;}
.area_service .list_page li > a.active:after{opacity:1; width:27%; transition:width 2.7s linear 0s, opacity 0s linear 0s;}
.area_service .list_page li > a p{font-size: 1.6rem;margin-top: 14px;font-family: Noto Sans;font-weight: 500;}

.only_mob2 {display: none !important;}
.mainproject {display: flex; justify-content: flex-end;}
.project_flexbox {width: 90%; position: relative; display: flex;align-items: center; flex-wrap:nowrap !important; justify-content: space-between;}
.mainproject h2 { font-size: 12.2rem; line-height: 12.2rem; font-weight: 900; color: #fff; }
.project_slidewrap {flex-wrap:nowrap !important; margin-right: -5%; display: flex; align-items: center;width: calc(100% /10 * 7);}
.mainproject .project_slidebox em {position: relative; top: 38px; right: -52%; font-size: 100px; line-height: 110px; font-weight: bold; -webkit-text-stroke: 1px rgb(255 255 255 / 70%); color: transparent;} 
.mainproject .project_slidebox .first_em {right: -63%; } 
.project_slidebox .slick-arrow {padding: 0; position: absolute; bottom: -11%; width: 57px; height: 57px; font-family: 'Line Awesome Free'; font-weight: 600; font-size: 3.2rem; text-align: center; border: 1px solid #fff; background: none;}
.project_slidebox .slick-arrow:hover {background-color: #fff; color:#222;  transition-duration: .3s;}
.project_slidebox .slick-prev {left:0; color: #fff;}
.project_slidebox .slick-next {left: 7rem; color: #fff;}
.project_slidewrap ul li {margin-right: 16px;}
.project_slidewrap .project_slidetxt {height: 12rem; margin-right: 16px; background-color: #fff; padding: 20px 0 40px 20px;}
.project_slidewrap .project_slidetxt span {font-size: 18px; line-height: 3.6rem; font-weight: bold; color:#BFBFBF; margin-bottom:26px;}
.project_slidewrap .project_slidetxt p {padding-top: 26px; font-size: 20px; line-height: 30px; font-weight: 500; color:#222; }
.line-height_box {line-height:2.5rem !important;}
.font_rembox {right: -62% !important;}
.mainproject h2{margin: 5rem 0 8rem;}
.projectLeft{padding-bottom: 16rem;}
.projectGoBtn.on{background: #fff;color: #000;}
.projectLeft div{display: block;}
.projectLeft a{font-size: 2rem;font-weight: bold;z-index: 99; padding: 16px 30px;width: 18rem;display: block;position: relative;transition: all .4s ease-in-out;}
.projectLeft a::after{content: "\f067";font-family: 'Line Awesome Free';position: absolute;top: 50%;transform:translateY(-50%);right: 2rem;font-size: 2.9rem;}

/* index end */

/* about */
.about_sec02{text-align: center;}
.about_sec02_inner{ margin: auto; max-width: 1153px;}
.about_sec02 .about_sec02_tit{margin-top: 20rem;}
.about_sec02 .about_sec02_tit .subtit{font-size:2rem; margin-bottom: 5rem; display: block; font-weight: 600;}
.about_sec02 .about_sec02_tit h4{font-size: 4.5rem; font-weight: 600; margin-bottom: 5rem;}
.about_sec02 .about_sec02_tit p{font-size: 1.8rem; line-height: 3.2rem;}
.about_sec02 .about_logo{margin-top: 15.8rem;}
.about_sec02 .about_logo ul{justify-content: center;}
.about_sec02 .about_logo ul li{height: 20rem; flex-direction: column;}
.about_sec02 .about_logo ul li div{width: 50%;}
.about_sec02 .about_logo ul li div img{width: 100%;}
.about_sec02 .about_logo ul li:nth-child(3) img{margin-top: 2rem;}
.about_sec02 .about_logo ul li:nth-child(2),
.about_sec02 .about_logo ul li:nth-child(4){font-size:10rem; }
.about_sec02 .about_logo ul li:nth-child(2){margin-right: 5rem;}
.about_sec02 .about_logo ul li:nth-child(4){margin-left: 5rem;}
.about_sec02 .about_logo ul li span{color:#A0A0A0; display: block; font-size:2.2rem;}
.about_sec02 .about_txt{margin-top: 10.5rem; font-size: 3rem; border:1px solid #515151; padding: 2.5rem 0;}
.about_sec02 .about_txt span{margin: 0 1.7rem;}
.about_sec02 .about_txt span.txt{font-weight: 600;}
.about_sec02 .about_circle{margin-top: 14.5rem; margin-bottom: 14.5rem;}
.about_sec02 .about_circle ul{display: flex; position: relative;}
.about_sec02 .about_circle ul.first{justify-content: flex-end; margin-bottom: 1.9rem;}
.about_sec02 .about_circle ul.first li:first-child{position: relative;}
.about_sec02 .about_circle ul.first li:first-child:before{content:""; width: 900%; height: 1px; background: #0957ff; position: absolute; top: 52%; left: 0;}
.about_sec02 .about_circle ul.second li:last-child{position: relative;}
.about_sec02 .about_circle ul.second li:last-child:before{content:""; width: 900%; height: 1px; background: #0957ff; position: absolute; top: 52%; right: 0;}
.about_sec02 .about_circle ul li{border: 2px solid #0957ff; flex-direction: column; border-radius: 50%; width: 25rem; height: 25rem;margin-left: 9rem;}
.about_sec02 .about_circle ul li:first-child{margin-left: 0rem;}
.about_sec02 .about_circle ul li .num{font-weight: 600; font-size: 2rem; margin-bottom: 1.2rem;}
.about_sec02 .about_circle ul li b{font-size: 1.8rem;}
.about_sec02 .about_circle ul li p.k-tit{font-size: 2.5rem; margin-top: 3.3rem;}
.about_sec02 .about_banner{background : url('/img/img_about04.jpg') no-repeat center; background-size : cover; background-attachment : fixed;	height : 50rem; width : 100vw;margin-top: 20rem; opacity: .5;}
.about_sec02 .aniBox{font-size: 16rem;position: relative;height: 16rem;overflow: hidden; opacity: .05;}
.about_sec02 .aniBox em{bottom:-23px; display: block;width: 200%; position: absolute; animation: bgText 20s linear infinite;}
.about_sec02 .aniBox .aniBox2{animation: bgText 20s linear 7.5s infinite both;}

.about_sec03{padding:20rem 0 9.5rem;}
.about_sec03 .about_sec03_tit{text-align: center;}
.about_sec03 .about_sec03_tit .subtit{font-size:2rem; margin-bottom: 5rem;}
.about_sec03 .about_sec03_tit h4{font-size:4.5rem;}
.about_sec03 ul.logo-wrapper {width: 62.5%; margin: auto;}
.about_sec03 .partners_logo{ flex-wrap: wrap; margin: auto; margin-top: 9rem; display: flex;}
.about_sec03 .partners_logo li{width: calc(100%/5); display: flex; align-items: center;}
.about_sec03 .partners_logo li p{width: 100%;}
.about_sec03 .partners_logo li p img{width: 80%;}
.about_sec03 p{font-size: 1.8rem; text-align: center;}
.about_sec03 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#0957ff; border-radius: 40px;}
.about_sec03 .swiper-pagination-progressbar{background: #ECECEC; border-radius: 40px;}
.aboutnone{display:none;}
.aboutbtn{margin-top:5rem;}
.aboutbtn a{display: inline-block; font-size: 2.0rem;border: 2px solid #111;padding: 1.6rem 10rem 1.6rem 3rem;position: relative;}
.aboutbtn a::after{content:"\f067"; font-family: 'Line Awesome Free'; position: absolute;top: 50%;right: 2rem;transform: translateY(-50%); font-size:3.5rem;}
.aboutbtn a.on::after{content:"\f062"; font-family: 'Line Awesome Free'; position: absolute;top: 50%;right: 2rem;transform: translateY(-50%); font-size:3.5rem;}

.about_sec04{padding: 27.2rem 0 24rem;}
.about_sec04 .about_sec04_inner{justify-content: space-around;}
.about_sec04 .left h4{font-size:6.5rem; font-weight: 800; line-height: 11rem;}
.about_sec04 .left h4 span{border-bottom: .5rem solid #000;}
.about_sec04 .left .form{margin-top: 13rem;}
.about_sec04 .left .form input{border:none; border-bottom: 1px solid #111; width: 100%; height: 7rem;}
.about_sec04 .left .form input::placeholder {font-size:2rem; color:#000; font-weight: 600;}
.about_sec04 .right{margin-left: 6rem;}
.about_sec04 .right p{font-size:6rem; line-height: 12rem; position: relative;}
.about_sec04 .right p::before{ background: url('/img/img_about20.png') no-repeat 0px 0px; background-size: 4.5rem; content: "";left: -6rem; position: absolute; height: 4.5rem; width: 7.2rem;}
/* about end */

/* portfolio */
.portfolio{padding-top: 27.5rem; padding-left: 10.5rem; padding-bottom: 20rem}
.portfolio_tit{font-size: 15rem; background: linear-gradient(-45deg, #0957ff 20%, #45B6DB 60%, #0957ff 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 5s linear infinite;}

.project_wrapper{margin-top: 6.4rem;}
.project_wrapper .project_wrap{flex-wrap:wrap; align-items: flex-start;justify-content: flex-start; margin-left: -2rem;}
.project_wrapper .project_wrap .project{cursor: pointer; width: calc(100% / 4 - 2rem); margin-top: 10rem;display: flex;flex-direction: column;margin-left: 2rem;}
.project_wrapper .project_wrap .project.plusnone{display:none;}
.project_wrapper .project_wrap .project > a{position: relative; display:block;}
.project_wrapper .project_wrap .project img{width: 100%;}
.project_wrapper .project_wrap .project.margin_top_none{margin-top: 0rem;}
.project_wrapper .project_wrap .project a .more_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background:rgba(17,17,17,0.8) ; opacity: 0;  transition: opacity 0.6s ease;border:4px solid #FFF; box-sizing: border-box;z-index: 1;display: flex;justify-content: center;align-items: center;}
.project_wrapper .project_wrap .project a:hover .more_box{opacity: 1;}
.project_wrapper .project_wrap .project a .more_box .txt{display: flex; align-items: center;justify-content: center;text-align: center; padding-bottom: 2.3rem; color: #fff; white-space: nowrap;line-height: 3.2rem; opacity: 0; transition: opacity 0.6s ease 0.2s; font-size:2.0rem; font-weight: bold;z-index: 2;}
.project_wrapper .project_wrap .project a:hover .more_box .txt{opacity: 1;}
.project_wrapper .project_wrap .project a .more_box .txtbtn{display: flex; justify-content: center;align-items: center; flex-wrap: wrap;margin: 0 2rem;}
.project_wrapper .project_wrap .project a .more_box .txtbtn li{color: #DFDFDF; white-space: nowrap; text-align: center; line-height: 1.5em; opacity: 0; transition: opacity 0.6s ease 0.2s; font-size:1.6rem; font-weight: 500;z-index: 2; border:1px solid #DFDFDF; border-radius: 50px; padding:0.5rem 1.4rem; margin:0.5rem 0.5rem;}
.project_wrapper .project_wrap .project a:hover .more_box .txtbtn li{opacity: 1;}
.project_wrapper .project_wrap .project .project_tit{font-size:2.2rem; line-height: 3rem; margin:1vw 0; position: relative;}
.project_wrapper .project_wrap .project .project_tit span{display:block;}
.project_wrapper .project_wrap .project .arrow{position: absolute; right:3rem;bottom:2.1rem;display:none;transform: translate(0,0);animation: arrow 1.5s linear infinite;-webkit-animation: arrow 1.5s linear infinite; -moz-animation: arrow 1.5s linear infinite;} 
.project_wrapper .plusbtn{position: relative; width: 100%;text-align: center; margin-top: 15rem;}
.project_wrapper .plusbtn span{position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%); width:10rem; height:10rem;}
.project_wrapper .plusbtn span::before,
.project_wrapper .plusbtn span::after{content: "";display: block; position: absolute; left: 48%;top: 0%;width: 3px; height: 100px; background-color: #0957ff; -ms-transition-duration: 0.3s;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}
.project_wrapper .plusbtn span::after{transform: rotate(90deg);}
.project_wrapper .plusbtn span:hover::before{-ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
.project_wrapper .plusbtn span:hover::after{-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}

/* portfolio end */

/* sub 공통 */
.subSec_main{height: 127vh; min-height: 1372px; position: relative;}
.typed{font-size:13rem;}
.subSec_main .subSec_content {width: 100%;height: 100%;}
.subSec_main .subSec_content .left{position: absolute; top: 18%; left: 9%;}
.text_box{font-size: 13rem;}
.subSec_main .subSec_content .right{position: absolute; top: 46%; right: 22%;}
.subSec_main .subSec_content .right h3{font-size:5rem; margin-bottom: 4rem;}
.subSec_main .subSec_content .right p{font-size:2rem; line-height: 3.6rem;}
.typed-cursor{font-size:13rem; color:#fff; opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite;}

.blink {  animation: blink 0.5s infinite; font-size: 13rem;}
/* sub 공통 end */


/* contact */
.point_span {color:#0957ff !important;}
.contact_wrap {padding-top: 30rem; position: relative;}
.contact_wrap .service_tit {padding-bottom: 13rem; font-size: 15rem; background: linear-gradient(-45deg, #0957ff 20%, #45B6DB 60%, #0957ff 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 5s linear infinite;}
.contact_wrap .logospan { font-size: 3.0rem; font-weight: 500; line-height: 5.5rem; color:#ffffff;}
.contact_box1 .flexbox .col + .col {margin-left: 45px;}
.contact_box1 .flexbox + .flexbox {margin-top: 45px;}
.contact_wrap .contact_list p {font-size: 2.0rem; font-weight: 600; color:#0957ff; margin-bottom: 1.5rem;}
.contact_wrap .contact_list em {font-size: 2.4rem; font-weight: bold;  color:#ffffff;}
.flie_custom {display:flex; flex-direction:column; align-items:center; justify-content: center; margin-top: 7%;}
.upload-btn_wrap span { margin-top: 3px; font-size: 1.4rem; line-height: 3.0rem; font-weight: 900; color:#111111; font-family: 'NanumSquare','san-serif';}

.contact_list::after {position: absolute; top:34%; left:-457px; font-family: 'Poppins', sans-serif; content: "Want to work with us? \A Let's connect!"; white-space: pre; transform:rotate(270deg); font-size: 10rem; line-height: 10rem; font-weight: 900; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgb(255 255 255 / 12%);}
.contact_list #contact_box {margin-top: 18rem;}
.contact_list .contact_box1 {padding-top: 6.0rem;}
.contact_wrap .contact_list #contact_box5 input {position: absolute; bottom:2%; width: 100%;  text-align: right; right: 3%; height: 3.7rem; border:none; background: transparent; }
.input_file {height: 100% !important;}
.contact_wrap .contact_list  input { width: 100%; padding-bottom: 1rem; height: 3.7rem; border:none; background: transparent; }
/* .flie_custom::after {content:''; width: 102px; height: 33px; bottom: 40px; right: -83%; position: absolute; background: #111;} */
.contact_wrap .contact_list select {border:none;}
.contact_wrap .contact_list textarea {border: 2px solid #ffffff; padding: 3rem; line-height: 2.5rem !important;}
.contact_wrap .contact_list div .col {flex:1;}
.contact_list input, .contact_list select, .contact_list textarea {width: 100%;  background-color: #111; font-size: 2.0rem; line-height: 5.5rem; font-weight: 500; color:#bbbbbb;}
select { -webkit-appearance: none;-moz-appearance: none;appearance : none; outline:none;}
select::-ms-expand {display: none;}
.right_box {display:relative}
.right_box:after{content:'';display: block;position: absolute;z-index: 1;top: 50%;right: calc(100% - 48%);transform: translate(0,-50%);width: 1rem;height: 1rem;border-top:1px solid #ffffff;border-right:1px solid #ffffff; display:inline-block;transform: rotate(135deg);}
.after_box:after{content:'';display: block;position: absolute;z-index: 1;top: 50%;right: calc(100% - 99%);transform: translate(0,-50%);width: 1rem;height: 1rem;border-top:1px solid #ffffff;border-right:1px solid #ffffff;display:inline-block;transform: rotate(135deg); }

input:focus::-webkit-input-placeholder , textarea:focus::-webkit-input-placeholder {color:transparent;}
.contact_wrap .contact_list b {width: 9rem; font-size: 2.0rem; font-weight: 500; color:#ffffff;}
.contact_wrap .contact_list .width_box b {width: 22rem; }
.contact_wrap .contact_list .small {font-size: 1.6rem; font-weight: 200; color:#ffffff;}
.contact_wrap .contact_list .border_box { border-bottom: 2px solid #ffffff;}
.contact_wrap .contact_box3_padding input {padding: 0 0 1rem 1rem;}

#contact_box2 {position: relative; padding-top: 12rem; padding-bottom: 12rem;}
#contact_box2 ul {width: 100%;}
#contact_box2 a {width: 100%; display:block; height: 5rem; }
#contact_box2 div {padding-top: 6.0rem;}
.menu-active {background:#0957ff;  border:1px solid #0957ff !important;}
.menu-link {display: block; width: 19.3%; font-size: 1.8rem; line-height: 5.5rem; font-weight: 500; text-align: center; border:1px solid #ffffff; color:#ffffff;}
        
#contact_box3 , #contact_box4 {padding-bottom: 12rem;}
.contact_box3_padding {padding-top: 6rem;}
#contact_box3 .aaa {width: 100%;}
#contact_box3 .right_box {margin-right: 45px;}
/* #contact_box3 .padding_box {padding-bottom: 15px;} */
#contact_box5 {position: relative;}

.sand_box {display:flex; align-items: center; justify-content: center; padding-top: 12rem;}
.sand_box .submit_Btn {display: flex; flex-direction:column;  justify-content: center; align-items: center; text-align: center; width: 22rem; height: 22rem; border-radius: 50%; border:none; background:linear-gradient(150deg, #0957ff, #45B6DB); cursor: pointer;}
.flie_custom img {width: 4rem; height: 2.8rem;}
.submit_Btn .contact_img {width: 7.3rem; height: 5.6rem; margin:0 auto;}
.submit_Btn img {width: 100%; height: 100%;}
.sand_box .btn_span {font-size: 2.4rem; line-height: 3.2rem; font-weight: 900; color:#ffffff !important;}
input.upload_text {float:left; width:230px; height:19px; line-height:19px; padding:0 3px; border:none;}
div.upload-btn_wrap input.input_file {position:absolute;top:0;right:0; height: 100%; cursor:pointer;opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-moz-opacity:0;background: url('/img/contect_file.png') no-repeat center / cover ;width: 100%;}
div.upload-btn_wrap {overflow:hidden;position:absolute;bottom: 9%;right: 3%;width: 10rem;height: 10rem;float:left;padding-left:3px;}
div.upload-btn_wrap button {width:10rem;height:10rem;border-radius:100%;font-weight:bold;background:#fff;border:none;color:#fff;top:-20px;}
.textarea_flex {display:flex;}

#contact_map {padding-top: 18rem;}
.contact_mapbox {display: flex; justify-content: space-between; align-items: start; width: 100%;}
.contact_mapbox h2 {flex:1; font-size: 4.8rem; line-height: 8.0rem; font-weight: 900; color:#ffffff;}
.contact_flexbox {flex:.7;}
.contact_mapbox p {font-size: 2.5rem; font-weight: 500; color:#ffffff !important; }
.contact_mapbox .border_box {border-bottom: 2px solid #ffffff; margin-bottom: 5.5rem;}
.contact_mapbox a {font-size: 2.5rem;  font-weight: 900; color:#0957ff;}
p.fontEn.border_box.border_box2 {padding-bottom: 3rem; margin-bottom: 5rem;}
.contactMap {margin-top: 10rem; margin-bottom: 20rem;}
.contactMap #daumRoughmapContainer1641345024682 {width: 100% !important;}
.contact_gobtn {background: #fff !important;}
.contact_gobtn a {color: #fff !important;}
.contact_gobtn .top::before { background:linear-gradient(90deg, #fff, #45B6DB) !important; } 
/* .point_txt {position: absolute; top: 50%; left: 0; transform:rotate(270deg); font-size: 10rem; line-height: 10rem; font-weight: 900; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px #ffffff;  } */

.contact_flexbox img {width: 2.5rem; padding-left: 1rem;}

/* contact end */

/* portfolio common */
.portfolio_wrapper{position: relative;}
.portfolio_wrap{height: 100vh; display: flex; align-items: flex-end; justify-content: space-between;}
.portfolio_wrap .portfolio_logo{text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.portfolio_wrap .portfolio_wrap_txt{width: 100%; display: flex; justify-content: space-between; align-items: end; margin-bottom: 9rem;}
/* portfolio common end */

@keyframes blink {
    to {opacity: 0;}
}
@keyframes sizeScale{
	0%{transform: scale(1.2);}
	100%{transform: scale(1);}
}
@-webkit-keyframes sizeScale{
    0%{transform: scale(1.2);}
    100%{transform: scale(1);}
}
@keyframes aniOpacity{
	0%{opacity:0; margin-top:30px;}
	100%{opacity:1; margin-top:0px;}
}
@-webkit-keyframes aniOpacity{
	0%{opacity:0; margin-top:30px;}
	100%{opacity:1; margin-top:0px;}
}
@keyframes shine {
	to {
		background-position: 200% center;
	}
}
@keyframes bgText {
	0%{left: 100%;transform: translateX(0);}
	100%{left: 0%;transform: translateX(-100%);}
}
@keyframes arrow{
    0%,100%{
      transform:translateX(0px);
    }
    50%{
      transform:translateX(30px);
    }
  }