/* main */
#hd_pop { position: fixed; top:120px; left:50%; z-index: 990; transform: translateX(-50%); } 
#hd_pop h2 { display: none; } 
#hd_pop .hd_pops_con { height:auto !important; } 
#hd_pop p { font-size: 0; } 
#hd_pop img { width:100%; } 
#hd_pop .hd_pops_footer { width:100%; height:50px; padding: 0 10px; background: #fff; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } 
#hd_pop button { height:30px; cursor: pointer; padding: 5px 10px; vertical-align: middle; } 
#hd_pop .hd_pops_reject { background: #0E172B; border:none; } 
#hd_pop .hd_pops_close { margin-left: 5px; background: #0E172B; border:none; } 
/* section1 */
.section1 .inner-01 { position: relative;  } 
#portfolioSlider { overflow: hidden; height: 100%; } 
#portfolioSlider .swiper-slide { font-size: 0; } 
#portfolioSlider .swiper-slide img { width:100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 4.2s ease; } 
#portfolioSlider .swiper-slide.swiper-slide-active img { transform: scale(1); } 
.section1 .portfolioTxt { position: absolute; left: 0; bottom:200px; z-index: 10; color:#fff; } 
.section1 .portfolioTxt li h2 { font-size: 48px; font-weight:600; } 
.section1 .portfolioTxt li.on h2 .slide-effect { overflow: hidden; } 
.section1 .portfolioTxt li.on h2 .slide-effect .slide-effect-txt { line-height: 1.3; animation: txtSlide .3s ease-in-out; } 
@keyframes txtSlide { 
 0% { transform: translate(0, 100%); } 
100% { transform: translate(0, 0); } 
 } 
 .section1 .sliderWrap { height: 100vh; overflow: hidden; } 
.section1 .portfolioTxt li .sub { font-size: 24px; margin-top:25px; font-weight: 200; line-height: 1.4; } 
.section1 .portfolioTxt li .sub br { display: none; } 


/* .section1 .btn-box{width: 300px; 
    counter-increment: itemcounter;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    pointer-events: none;
} */
.section1 .btn-box{ margin-top: 20px;}
.section1 .button--telesto { overflow: hidden; font-weight: 800; color: #fff; pointer-events: auto; cursor: pointer; background: #ff9933; border: none; padding: 20px 40px ; position: relative; display: inline-block; } 
.section1 .button--telesto::before, .button--telesto::after { content: ''; background: #000000; } 
.section1 .button--telesto::before,.section1 .button--telesto::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.section1 .button--telesto::before { width: 135%; -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%); clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%); transform: translate3d(-100%, 0, 0);}
.section1 .button--telesto::after { width: 105%; transform: translate3d(100%, 0, 0); transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);}
.button--telesto:hover::before { transform: translate3d(0, 0, 0);  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);}
.section1 .button--telesto:hover::before { transform: translate3d(0, 0, 0); transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);}
.section1 .button--telesto:hover::after { transform: translate3d(0, 0, 0); transition: transform 0.01s 0.3s cubic-bezier(0.7, 0, 0.2, 1); }
.section1 .button--telesto:hover > span > span { animation: MoveRightInitial 0.1s forwards, MoveRightEnd 0.3s forwards 0.2s;}
.section1 .button--telesto span { display: block; position: relative; z-index: 1;}
.section1 .button--telesto > span { overflow: hidden; font-size: 20px;}
@keyframes MoveRightInitial{ 100% { transform: translate3d(105%, 0, 0); }}
@keyframes MoveRightEnd{ 0% { transform: translate3d(-100%, 0, 0);} 100% { transform: translate3d(0, 0, 0);}}

.section1 .portfolioTxt li.on .sub .slide-effect { overflow: hidden; } 
.section1 .portfolioTxt li.on .sub .slide-effect .slide-effect-txt { line-height: 1.4; animation: txtSlide .3s ease-in-out; } 
.section1 .swiper-button-prev { width:60px; height:60px; top:auto; bottom:100px; left:0; } 
.section1 .swiper-button-prev::after { content:''; display: block; width:60px; height:60px; background: url('../../img/btn_prev.png') no-repeat 0 0; } 
.section1 .swiper-button-next { width:60px; height:60px; top:auto; bottom:100px; right:auto; left:68px; } 
.section1 .swiper-button-next::after { content:''; display: block; width:60px; height:60px; background: url('../../img/btn_next.png') no-repeat 0 0; } 
#portfolioSlider2 { display: none; overflow: hidden; } 
#portfolioSlider2 .swiper-slide { font-size: 0; } 
#portfolioSlider2 .swiper-slide img { width:100%; transform: scale(1.2); transition: transform 4.2s ease; } 
#portfolioSlider2 .swiper-slide.swiper-slide-active img { transform: scale(1); } 
.swiper-btn_m { display: none; } 
.swiper-button-nextM, .swiper-button-prevM { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color,var(--swiper-theme-color)); } 
.section1 .swiper-button-prevM { width:80px; height:80px; top:auto; bottom:100px; left:50%; margin-left: -84.5px; } 
.section1 .swiper-button-prevM::after { content:''; display: block; width:80px; height:80px; background: url('../../img/btn_prev.png') no-repeat 0 0; background-size: cover; } 
.section1 .swiper-button-nextM { width:80px; height:80px; top:auto; bottom:100px; right:auto; left:50%; margin-left: 15.5px; } 
.section1 .swiper-button-nextM::after { content:''; display: block; width:80px; height:80px; background: url('../../img/btn_next.png') no-repeat 0 0; background-size: cover; } 
/* section2 */
.section2{background:#0e172b;}
.section2 .title{color:#fff;}
.workWrap { margin-bottom: 30px; display: flex; flex-wrap: wrap; justify-content: space-between; } 
.workWrap li { width:calc(33.3333% - 33.3333px); overflow: hidden; margin-bottom: 50px; position: relative; opacity: 0; top:-20px; transition: opacity 0.3s ease, top 0.3s ease; } 
.workWrap li.on { opacity: 1; top:0; } 
.workWrap li a { display: block; } 
.workWrap li .infoTxt { background: rgba(56, 184, 239,0.95); position: absolute; top:0; left:0; z-index: 10; width:100%; height:100%; text-align: center; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } 
.workWrap li a:hover .infoTxt { opacity: 1; } 
.workWrap .infoTxt .verticalCenter { padding:0 40px; color:#fff; } 
.workWrap .infoTxt h4 { font-size:22px; font-weight: 600; line-height: 1.3; } 
.workWrap .infoTxt .dev_lang { font-size:15px; font-weight: 200; margin-top:10px; } 
.workWrap .infoTxt .disc { font-size:18px; font-weight: 200; margin:50px 0 20px; line-height: 1.7; word-break: keep-all; } 
/* .workWrap .infoTxt .disc br { display: none; } */
.workWrap .infoTxt span { font-size: 30px; opacity: 0; position: relative; left:-20px; transition: opacity 0.3s ease, left 0.3s ease; transition-delay: 0.2s; } 
.workWrap li a:hover .infoTxt span { opacity: 1; left:0; } 
.workWrap li img { display: block; min-width:100%; max-width: 100%; transition: transform 0.4s ease; } 
.workWrap li a:hover img { transform: scale(1.1); } 
/* section3 */
.content3 { width:100%; height:400px; overflow: hidden; position: relative; } 
.content3 .inner-02 { height:100%; position: relative; z-index: 2; padding:0; display: flex; flex-wrap: wrap; align-items: center; } 
.content3 .title { width:100%; margin:0; color:#fff; } 
.bg-video { width:100%; height:100%; position: absolute; top:0; background: url("../img/../video_img.png")no-repeat 50% top; background-size: 100% auto; } 
.bg-video video { display: block; width:100%; height:auto; } 
.go-btn-wrap { margin-top:30px; text-align: center; } 
.contactGoBtn { display: inline-block; position: relative; width:40px; height:40px; transition: transform ease 0.3s; } 
.contactGoBtn:hover { transform: rotate(45deg); } 
.contactGoBtn .wd-line { display: block; width:40px; height:3px; background: #fff; position: absolute; top:50%; left:0; margin-top:-1.5px; } 
.contactGoBtn .ht-line { display: block; width:3px; height:40px; background: #fff; position: absolute; top:0; left:50%; margin-left:-1.5px; } 
/* section4 */
.section4{background:#0e172b;}
.section4 .title{color:#fff;}
.partnerBox { position: relative; top:-20px; opacity: 0; transition: top 0.7s ease, opacity 0.3s ease; transition-delay: 0.5s;} 
.main-cont.on .partnerBox { top:0; opacity: 1; } 
.partnerBox .partnerUl { display: flex; flex-wrap: wrap; } 
.partnerBox .partnerUl li { width:16.6666%; text-align: center; margin-bottom: 20px; } 
.partnerBox .partnerUl li img { opacity: 0.5; width:75%; } 
.section4 .loop-wrap { width: 100%; overflow: hidden; margin: 80px 0 0; transform: translate3d(0px, 0px, 0px); display: none; } 
.section4 .loop-wrap .loop-box { width:6600px; display: flex; flex-wrap: nowrap; animation-name: bannerLoop; animation-duration: 50s; animation-timing-function: linear; animation-iteration-count: infinite; } 
.section4 .loop-wrap .loop-box .ioop-items { width:220px; flex:0 0 220px; margin:0 20px; text-align: center; } 
.section4 .loop-wrap .loop-box .ioop-items img { opacity: 0.5; } 
@-webkit-keyframes bannerLoop { 
 0% { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0); } 
 100% { -webkit-transform:translate(-50%,0); -ms-transform:translate(-50%,0); transform:translate(-50%,0); } 
 } 
@keyframes bannerLoop { 
 0% { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0); } 
 100% { -webkit-transform:translate(-50%,0); -ms-transform:translate(-50%,0); transform:translate(-50%,0); } 
 } 
/* section5 */
.section5{background:#0e172b;}
.section5 .inner-02 { display: flex; flex-wrap: wrap; justify-content: space-between; } 
.section5 .title { width:calc(50% - 17.5px); color:#fff; } 
.section5 .title h2 { top:0; left:-20px; transition: left 0.3s ease, opacity 0.3s ease; color:#fff;} 
.main-cont.section5.on .title h2 { left:0; } 
.section5 .title p.disc { font-size: 20px; margin-top:50px; line-height: 1.5; position: relative; margin-bottom: 180px; left:-20px; opacity: 0; transition: left 0.3s ease, opacity 0.3s ease; transition-delay: 0.2s; color:#fff;} 
.section5 .title .disc::after { content:''; display: block; width:60px; height:1px; background: #fff; position: absolute; bottom:-120px; } 
.main-cont.on .title p.disc { left:0; opacity: 1; } 
.section5 .title .inquiry-num { display: flex; flex-wrap: wrap; } 
.section5 .title .inquiry-num li { width:160px; opacity: 0; position: relative; top:20px; transition: top 0.3s ease, opacity 0.3s ease; transition-delay: 0.5s; } 
.section5 .title .inquiry-num li:last-child { margin-left: 3.5vw; transition-delay: 0.7s; } 
.section5 .title .inquiry-num li span { font-size: 20px; } 
.section5 .title .inquiry-num li h3 { font-size: 50px; color: #FF4900; font-weight: 600; margin-top: 15px; white-space: nowrap; } 
.main-cont.on.section5 .title .inquiry-num li { opacity: 1; top:0; } 
.contactBox { width:calc(50% - 17.5px); position: relative; right:-20px; opacity: 0; transition: right 0.3s ease, opacity 0.3s ease; transition-delay: 0.2s; } 
.main-cont.on .contactBox { right:0; opacity: 1; } 
.contactBox h5 { font-size:16px; font-weight: 600; margin-bottom: 17px; color:#fff;} 
.contactBox h5 br { display: none; } 
.contactBox .essentialUl { display: flex; flex-wrap: wrap; justify-content: space-between; } 
.contactBox .essentialUl li { width:calc(50% - 7px); } 
.contactBox .essentialUl li:nth-child(n+3) { margin-top:14px; } 
.contactBox .essentialUl li input { display: block; width: 100%; border:1px solid rgba(255,255,255,0.6); font-size: 14px; background: none; box-sizing: border-box; color:#fff; padding:13px 20px 12px; font-weight: 600; } 
.contactBox .essentialUl li input::placeholder { color:#fff; } 
.contactBox .essentialUl li input:focus { border:1px solid #ff9933; } 
.contactBox .essentialUl li input:focus::placeholder { color:#ff9933; } 
.contactBox .essentialUl li select { display: block; width: 100%; border: 1px solid rgba(255,255,255,0.6); font-size: 14px; background:url('../../img/ic_select.png') no-repeat 93% 50%; -webkit-appearance: none; cursor: pointer; box-sizing: border-box; color:#fff; padding:14px 20px 13px; font-weight: 600; } 
.contactBox .essentialUl li select:focus { border:1px solid #ff9933; color:#ff9933; } 
.contactBox .essentialUl li select option { background: #0E172B; } 
.contactBox .choice { margin-top:45px; } 
.contactBox .choiceUl { display: flex; flex-wrap: wrap; justify-content: space-between; } 
.contactBox .choiceUl li { width:calc(50% - 7px); } 
.contactBox .choiceUl li:nth-child(3) { width:100%; font-size: 0; margin-top: 14px; } 
.contactBox .choiceUl li:nth-child(4) { width:100%; margin-top: 14px; } 
.contactBox .choiceUl li input { display: block; width: 100%; border:1px solid rgba(247,247,247,0.6); font-size: 14px; background: none; box-sizing: border-box; color:#fff; padding:13px 20px 12px; font-weight: 600; } 
.contactBox .choiceUl li input::placeholder { color:#fff; } 
.contactBox .choiceUl li input:focus { border:1px solid #ff9933; } 
.contactBox .choiceUl li input:focus::placeholder { color:#ff9933; } 
.contactBox .choiceUl li textarea { width:100%; resize: none; box-sizing: border-box; border:1px solid rgba(247,247,247,0.6); background: none; color:#fff; padding:12px 20px; font-size: 14px; font-weight: 600; -ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */ } 
.contactBox .choiceUl li textarea::placeholder { color:#fff; } 
.contactBox .choiceUl li textarea:focus { border:1px solid #ff9933; } 
.contactBox .choiceUl li textarea:focus::placeholder { color:#ff9933; } 
.contactBox .choiceUl li textarea::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } 
.contactBox .file-box input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } 
.contactBox .file-box label { display: block; width:100%; padding: 13px 20px 12px 20px; font-size: inherit; font-family: inherit; line-height: normal; vertical-align: middle; background: none; font-size: 14px; color:#fff; border: 1px solid rgba(247,247,247,0.6); position: relative; cursor: pointer; font-weight: 600; } 
.contactBox .file-box label::before { content:'+'; padding-right: 7px; } 
.info-prov { margin: 25px 0 30px; } 
.info-prov input[type=checkbox] { display: none; } 
.info-prov label { vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; color:#fff;} 
.info-prov input[type=checkbox] + label .check-cust { display: inline-block; position: relative; width: 18px; height: 18px; border: 1px solid #E3E5EE; vertical-align: sub; margin-right: 7px; box-sizing: border-box; border-radius: 3px; } 
.info-prov input[type=checkbox]:checked + label .check-cust { background: url('../img/checkbox_on.png') no-repeat 50% 50% #fff; border: 1px solid #5dcbfa; background-size: 100%; } 
.info-prov label span { font-weight: bold; color: #ff9933; } 

@media screen and (max-width:768px) { /* main */
 html { height:100%; } 
 main { height:100%; } 
#sec1 { height:100%; } 
.sliderWrap { height:100%; } 
#portfolioSlider2 { height:100%; } 
html.show #portfolioSlider2 .swiper-slide img { width:auto; height:100%; } 
 } 

/* reverse */
.reverse .contactBox .essentialUl li input { border: 1px solid #ccc; color:#000; } 
.reverse .contactBox .essentialUl li input::placeholder { color:#ccc; } 
.reverse .contactBox .essentialUl li select { border: 1px solid #ccc; color:#333; } 
.reverse .contactBox .essentialUl li select option { background: #fff; } 
.reverse .contactBox .choiceUl li input { border: 1px solid #ccc; color:#000; } 
.reverse .contactBox .choiceUl li input::placeholder { color:#ccc; } 
.reverse .contactBox .choiceUl li textarea { border: 1px solid #ccc; color:#000; } 
.reverse .contactBox .choiceUl li textarea::placeholder { color:#ccc; } 
.reverse .contactBox .essentialUl li input:focus { border:1px solid #ff9933; } 
.reverse .contactBox .essentialUl li input:focus::placeholder { color:#ff9933; } 
.reverse .contactBox .essentialUl li select:focus { border:1px solid #ff9933; color:#ff9933; } 
.reverse .contactBox .choiceUl li input:focus { border:1px solid #ff9933; } 
.reverse .contactBox .choiceUl li input:focus::placeholder { color:#ff9933; } 
.reverse .contactBox .choiceUl li textarea:focus { border:1px solid #ff9933; } 
.reverse .contactBox .choiceUl li textarea:focus::placeholder { color:#ff9933; } 
.reverse .partnerBox .partnerUl li { mix-blend-mode: difference; }