@charset "UTF-8"; 

@import url(font.css);
@import url(reset.css);

body{background-color: #0F0F0F; overflow-x: hidden;}
body.white{background-color: #fff;}
/* body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-thumb {
  height: 30%;
  background: #fff;
  border-radius: 4px;
}
body::-webkit-scrollbar-track {
  background: #0f0f0f;
} */


/* 마우스 포인터 */
.circle { border-radius: 100px; will-change: transform; position: absolute;}
.circle1 { height: 40px;  width: 40px; border: solid rgba(255, 255, 255, 0.5) 1px; /* background-color: rgba(0, 0, 0, 0.5); */ backdrop-filter: blur(10px); background-color: #fff;}
.circle2 { height: 5px; width: 5px; z-index: 300; background: #FFE000;}


/* 공통 */
.wrap {position: relative;  font-family: 'Noto Sans KR', sans-serif; width: 100%; min-width: 1600px;}

/* header */
/*header*/
header {width: 100%; height: 100px; line-height: 100px; padding: 0 120px; box-sizing: border-box; position: fixed; top:0; z-index: 500; background-color: #000;}
header.on {background: #fff;}
/* header .logo img{width: 120px;} */
header nav {display: flex; flex-direction: row; flex-wrap: nowrap; width: 570px; float: right; color: #fff;}
header nav .gnb{display: flex; width: 100%;}
header nav .gnb li {width: calc(100%/3); text-align: center;}
header nav .gnb li a {position: relative; display: block; font-size: 16px; }
header nav .gnb li a:hover {color: #FFE000;}
header nav .gnb li .sub{width: 100%; display: none;  z-index: 150; }
header nav .gnb li .sub.on{display: block;}
header nav .gnb li .sub>li{ width: 100%; float: left; height: 60px; line-height: 60px; background-color: #000;}
header nav .gnb li .sub>li>a{font-size: 14px;}
header nav .gnb li .sub>li:nth-child(4){padding-bottom: 10px;}
header nav .gnb li .sub>li>a:hover{ color: #fcdc3f;}
/*모바일 네비 추가*/
header .open {display: none;}
header .close {display: none;}

.contents{width: 100%;}
.contents.sub{padding-top: 100px;}


.download.color{margin-top: 0; background-color: #E9EDF3;}
.download.color .text h1{position: absolute; top: 180px; left: 320px; font-size: 52px; font-weight: 700; color: #000;}
.download.color button{position: absolute; top: 380px; left: 320px; background-color: transparent; border: 0; outline: 0; font-size: 18px; color: #000; cursor: pointer;}
.download.color button img{margin-left: 0px;}
.download.color button:hover{border-bottom: 1px solid #000; box-sizing: border-box; color: #000;}


 /* footer */
footer{width: 100%; height: 300px; border-top: 1px solid #dadada; box-sizing: border-box;}
/* 2022-09-19 카카오톡 상담 수정 */
footer .kakaobtn_wrap{position: fixed; right: 60px; bottom: 60px; z-index: 99999;}
footer .kakaobtn_wrap a{display: inline-block; width: 100px; height: fit-content;}
footer .kakaobtn_wrap a:hover{transform: translate(-5px,-5px);}
footer .kakaobtn_wrap img{width: 100%;}
/* 2022-09-19 카카오톡 상담 수정 끝 */
footer .footerBox{display: flex; flex-direction: column; justify-content: space-around; width: 1600px; height: 100%; margin: 0 auto;}
footer .footerBox .textBox>h1{font-size: 16px; color: #fff;}
footer .footerBox .textBox>h1 b{font-weight: 700; margin: 0 10px 0 40px;}
footer .footerBox .textBox>h1 b:nth-child(1){margin-left: 0px;}
footer .footerBox .textBox>h1 b:nth-child(2){margin-left: 40px;}
footer .footerBox .textBox .copy>h1{margin-top: 20px; font-size: 14px; color: #fff;}
footer .footerBox .textBox br{display: none;}
footer.color{background-color: #fff;}
footer.color .footerBox .textBox>h1{color: #000;}
footer.color .footerBox .textBox .copy>h1{color: #000;}

/* 공통 끝 */



/* index.html */
.visual{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 969px;}
.visual video{position: relative; width: 85%; height: 95vh; object-fit: cover; aspect-ratio: 16 / 9;}
.scroll-down {position: absolute; z-index: 500; bottom: 50px; left: calc(50% - 40px); text-align: center; width: 80px; padding-bottom: 20px; opacity: 0; transform: translateY(-10px);}
.scroll-down.start {opacity: 1; transform: translateY(0); transition: all .6s ease-in-out 1s;}
.scroll-down p {color: white; text-transform: uppercase; font-size: 12px; margin: 0; padding-bottom: 25px;}
.scroll-down span {border: 2px solid white; height: 30px; width: 20px; padding: 10px 10px; border-radius: 30px; position: relative; z-index: 1;}
.scroll-down span:after {content: ""; position: absolute; z-index: 1; background: white; top: 8px; left: calc(50% - 1.9px); padding: 5px 2px; border-radius: 30px; animation: 1s infinite scrolling;}

@keyframes scrolling {
  0% {
    transform: translateY(0) scaleY(1);
 }
  25% {
    transform: translateY(-3px) scaleY(0.5);
 }
  40% {
    transform: translateY(0) scaleY(1);
 }
  60% {
    transform: translateY(3px) scaleY(0.5);
 }
  100% {
    transform: translateY(0) scaleY(1);
 }
}

/* Value */
section.value{overflow: hidden; width: 100%;}
.value>.tit{float: left; width: 100%; margin-top: 180px;}
.value>.tit h1{margin-left: 120px; color: #fff; font-size: 24px;}
.value .valueItem{float: left; width: 100%; height: 400px; margin: 200px 0;}
.value .valueItem:nth-of-type(2){margin-top: 145px;}
.value .valueItem:last-of-type{margin-bottom: 0;}
.value .itemBox{display: flex; flex-direction: row; justify-content: space-evenly; width: 100%; height: 100%;}
.value .itemBox .slogan{display: flex; flex-direction: column; justify-content: space-around;}
.value .itemBox .slogan h1{color: #fff; font-size: 68px; font-weight: 700; letter-spacing: -1px; line-height: 93px;}
.value .itemBox .slogan h1 b{color: transparent; -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: thin;}
.value .itemBox .slogan span{color: #fff; font-size: 24px; line-height: 32px;}
.value .itemBox .slogan span b{color: #FFE000;}
.value .itemBox .valueimg{width: 65%;}
.value .itemBox .valueimg img{width: 100%; height: 100%;}
.value .itemBox.one .slogan{/* margin-left: 8%; */ order: 1;}
.value .itemBox.one .valueimg{order: 2;}
.value .itemBox.two .slogan{/* margin-right: 8%; */ order: 2;}
.value .itemBox.two .valueimg{order: 1;}
.value .itemBox.three .slogan{/* margin-left: 8%; */ order: 1;}
.value .itemBox.three .valueimg{order: 2;}
.value .itemBox.four{width: 1100px; height: 300px; margin: 0 auto;}
.value .itemBox.four>.tit{display: flex; flex-direction: column; justify-content: space-between; }
.value .itemBox.four>.tit h1{color: #fff;}
.value .itemBox.four .textBox{display: flex; flex-direction: column; justify-content: space-between; }
.value .itemBox.four .textBox .text h1{color: #aaa; font-size: 24px; letter-spacing: 0px; line-height: 33px;}
.value .itemBox.four .textBox .text h1 b{color: #FFE000;}
.value .itemBox.four .textBox button{width: 126px; height: 36px; background-color: transparent; border: 0; outline: 0; color: #aaa; cursor: pointer; font-size: 18px;}
.value .itemBox.four .textBox button:hover{color: #fff; border-bottom: 1px solid #FFE000; box-sizing: border-box;}



/* service */
section.service{overflow: hidden; width: 100%;}
.service>.tit{float: left; display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin-top: 380px;}
.service>.tit h1{margin-left: 120px; color: #fff; font-size: 24px;}
.service>.tit button{width: 126px; height: 36px; background-color: transparent; border: 0; outline: 0; color: #aaa; cursor: pointer; font-size: 18px; margin-right: 120px;}
.service>.tit button:hover{color: #fff; border-bottom: 1px solid #FFE000; box-sizing: border-box;}
.service .serviceItem{float: left; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; height: 666px; margin-top: 200px;}
.service .serviceItem .itemBox{display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; /* width: calc((100% - 60px) / 4); */ width: 465px; height: 100%; z-index: 400; border: 1px solid #5c5c5c; box-sizing: border-box; background-size: cover;}
.service .serviceItem .itemBox:hover{transform: translateY(-10px);}
.service .serviceItem .itemBox .tit{margin:40px 40px 0 0; text-align: right;}
.service .serviceItem .itemBox .tit h2{font-size: 18px; color: #fff;}
.service .serviceItem .itemBox .tit h1{font-size: 32px; font-weight: 700; color: #fff;}
.service .serviceItem .itemBox:hover .tit h1{color: #FFE000;}
.service .serviceItem .itemBox button{display: inline-block; position: relative; width: 180px; height: 64px; margin: 0 40px 40px 0; border:0; outline: 0; box-sizing: border-box; background-color: #FFE000; color: #aaa; cursor: pointer; font-size: 16px; z-index: 20;}
.service .serviceItem .itemBox button span{display: flex; justify-content: center; align-items: center; padding: 15px 20px; color: #fff; z-index: 30;}
.service .serviceItem .itemBox button span:hover{color: #000; transition: 0.2s 0.1s;}
.service .serviceItem .itemBox button span img{margin-left: 10px;}
.service .serviceItem .itemBox button span:hover img{content: url('../images/arrow03.png');}
.service .serviceItem .itemBox button::before{content: ''; position: absolute; top:0; bottom: 0; right: 0; height: 100%; width: 100%; background-color: #131313; z-index: -1; transition: 0.3s ease-out;}
.service .serviceItem .itemBox button:hover::before{width: 0%;}



.service .serviceItem .itemBox.one{background-image: url(../images/Service01.png);}
.service .serviceItem .itemBox.one:hover{background-image: url(../images/Service05.png);}
.service .serviceItem .itemBox.two{background-image: url(../images/Service02.png);}
.service .serviceItem .itemBox.two:hover{background-image: url(../images/Service06.png);}
.service .serviceItem .itemBox.three{background-image: url(../images/Service03.png);}
.service .serviceItem .itemBox.three:hover{background-image: url(../images/Service07.png);}
.service .serviceItem .itemBox.four{background-image: url(../images/Service04.png);}
.service .serviceItem .itemBox.four:hover{background-image: url(../images/Service08.png);}




/* download */
section.download{position: relative; overflow: hidden; width: 100%; height: 734px; margin-top: 380px; background-image: url(../images/downloadBg.png); background-size: 100% 100%;}
section.download.admin{background-image: url(../images/service/admin04.png);}
section.download.rider{background-image: url(../images/service/rider04.png);}
section.download.store{background-image: url(../images/service/store04.png);}
section.download.pos{background-image: url(../images/service/pos04.png);}

.download>.tit h1{margin-left: 120px; color: #fff; font-size: 24px;}
.download .text{position: relative;}
.download .text h1{position: absolute; top: 180px; left: 320px; font-size: 52px; font-weight: 700; color: #fff;}
.download button{display: flex; position: absolute; top: 380px; left: 320px; background-color: transparent; border: 0; outline: 0; font-size: 18px; color: #aaa; cursor: pointer;}
.download button img{margin-left: 0px;}
.download button:hover{color: #fff; border-bottom: 1px solid #FFE000; box-sizing: border-box;}
section.download.admin .text br{display: none;}






/* company.html */
.companyVisual{position: relative; width: 100%; height: 400px; background-image: url(../images/company/visualCompany.png); background-size: 100% 100%;}
.companyVisual h1{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 32px; letter-spacing: -1px; font-weight: 400;}

.capability{width: 1600px; margin: 0 auto;}
.capability .tit{padding-top: 148px;}
.capability .tit h1{font-size: 24px; line-height: 33px; letter-spacing: -1px; font-weight: 400;}
.capability .capabilityItem{display: flex; margin-top: 40px; justify-content: space-around;}
.capability .capabilityItem .itemBox.two img { width: 100%;}
.capability .capabilityItem .itemBox .text h1{position: relative; margin-top: 135px; font-size: 42px; line-height: 52px; letter-spacing: -1px; font-weight: 500; z-index: 1;}
.capability .capabilityItem .itemBox .text h1::before{content: ''; position: absolute; top: -10px; left: -20px; width: 40px; height: 40px; background-color: #FFE000; border-radius: 20px; z-index: -1;}
.capability .capabilityItem .itemBox .subText p{margin-top: 120px; font-size: 20px; line-height: 35px; letter-spacing: -1px;}


.partner{width: 1600px; margin: 0 auto;}
.partner .tit{padding-top: 320px;}
.partner .tit h1{font-size: 24px; line-height: 33px; letter-spacing: -1px; font-weight: 400;}
.partner .partnerItem{display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 324px; margin-top: 155px;}
.partner .partnerItem .itemBox{display: flex; justify-content: space-between;}

.location{width: 1600px; margin: 0 auto;}
.location .tit{padding-top: 320px;}
.location .tit h1{font-size: 24px; line-height: 33px; letter-spacing: -1px; font-weight: 400;}
.location .locationItem{margin-top: 75px;}
.location .locationItem .itemBox h1{line-height: 22px; margin-top: 30px;}
.location .locationItem .itemBox h1:last-child{margin: 10px 0 120px;}
.location .locationItem .itemBox iframe{width: 100%; height:420px;}

/* service.html */
.serviceVisual{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 400px; background-size: 100% 100%;}
.serviceVisual.admin{background-image: url(../images/service/visualAdmin.png);}
.serviceVisual.rider{background-image: url(../images/service/visualRider.png);}
.serviceVisual.store{background-image: url(../images/service/visualStore.png);}
.serviceVisual.pos{background-image: url(../images/service/visualPos.png);}
.serviceVisual .tit{text-align: center;}
.serviceVisual .tit span{font-size: 18px; line-height: 25px; font-weight: 400;}
.serviceVisual .tit h1{font-size: 32px; line-height: 44px; font-weight: 400; letter-spacing: -1px;}



.serviceBox{overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; height: 969px;}
.serviceBox:nth-child(even){background-color: #fff;}
.serviceBox:nth-child(odd){background-color: #E9EDF3;}
.serviceBox .text{display: flex; flex-direction: column; margin-top: 140px;}
.serviceBox .text h1{position: relative; font-size: 36px; line-height: 52px; font-weight: 400; letter-spacing: -1px; z-index: 100;}
.serviceBox .text h1::before{position: absolute; content: ''; display: inline-block; top: -9px; left: -18px; width: 40px; height: 40px; background-color: #FFE000; border-radius: 20px; z-index: -100;}
.serviceBox .text h1 b{font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -1px;}
.serviceBox .subText{margin-top: 30px;}
.serviceBox .subText p{font-size: 20px; line-height: 27px; font-weight: 400; letter-spacing: -1px;}
.serviceBox .subText p br.mo{display: none;}
.serviceBox.pos .imgBox{margin-bottom: 16px;}


/* download.html */
.downloadVisual{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 400px; background-size: 100% 100%; background-image: url(../images/download/visualDownload.png);}
.downloadVisual .tit{text-align: center;}
.downloadVisual .tit span{font-size: 18px; line-height: 25px; font-weight: 400;}
.downloadVisual .tit h1{font-size: 32px; line-height: 44px; font-weight: 400; letter-spacing: -1px;}

.downloadWrap{display: flex; justify-content: center; align-items: center; width: 1600px; height: 800px; margin: 0 auto;}
.downloadWrap .downloadBox{display: flex; justify-content: space-between; width: 100%; height: 480px;}
.downloadWrap .downloadBox .itemBox{ width: 385px; height: 100%; border-radius: 30px; border:  1px solid #ddd; box-sizing: border-box;}
.downloadWrap .downloadBox .itemBox:hover{background-color: #E9EDF3;}
.downloadWrap .downloadBox .itemBox .iconBox{width: 100px; height: 72px; margin: 30px auto; text-align: center; background-color: #fff; line-height: 72px; border-radius: 30px;}
.downloadWrap .downloadBox .itemBox .iconBox img{width: 52px; height: 52px;}
.downloadWrap .downloadBox .itemBox .tit{text-align: center;}
.downloadWrap .downloadBox .itemBox .tit span{font-size: 18px; font-weight: 400; line-height: 25px;}
.downloadWrap .downloadBox .itemBox .tit h1{font-size: 32px; font-weight: 400; line-height: 44px; letter-spacing: -1px;}
.downloadWrap .downloadBox .itemBox>a{display: flex;justify-content: center; align-items: center;  width: 340px; height: 68px; margin: 18px auto; background-color: #fff; border-radius: 34px; font-size: 20px;  border: .5px solid #ddd; box-sizing: border-box;}
.downloadWrap .downloadBox .itemBox>a:nth-of-type(1){margin-top: 81px;}
.downloadWrap .downloadBox .itemBox>a.app { margin-top: 115px;}
.downloadWrap .downloadBox .itemBox>a:hover{background-color: #FFE000; color: #000; border: 0; }
.downloadWrap .downloadBox .itemBox>a h1{font-weight: 400;}
.downloadWrap .downloadBox .itemBox>a h1 img{margin-right: 20px;}

/* 2022-11-01 프로모션 추가 & 팝업추가 */
/* promotion.html */
.promotion_wrap{width: 1200px; margin: 0 auto;}
.promotion_wrap .tab_menu_wrap{width: calc(100% - 60px); padding: 30px;}
.promotion_wrap .tab_menu_wrap ul.tab_menu{display: flex; align-items: center; width: 40%; height: 70px; margin: 0 auto;}
.promotion_wrap .tab_menu_wrap ul.tab_menu li{width: calc(100% / 2); height: 100%; margin: 0 auto; line-height: 70px; color: #d1d1d1; text-align: center; cursor: pointer; }
.promotion_wrap .tab_menu_wrap ul.tab_menu li.active{font-weight: bold; color: #000;}
.promotion_wrap .tab_menu_wrap .tab_indicator{position:relative; width:40%; height:5px; margin: 0 auto;}
.promotion_wrap .tab_menu_wrap .tab_indicator .bar{position: absolute; width: calc(100%/2); height: 100%; background:#fed831; left:0; border-radius:5px; transition:all 500ms ease-in-out;}
.promotion_wrap .tab_menu_wrap .tab_content{width: 100%; padding: 100px 0;}
.promotion_wrap .tab_menu_wrap .tab_content .tab{display: none; width: 100%;}
.promotion_wrap .tab_menu_wrap .tab_content #tab-02 img{width: 600px;}
.promotion_wrap .tab_menu_wrap .tab_content .tab.active {display: flex; justify-content: center;}
.promotion_wrap img{width: 100%;}

/* main-popup */
.main-popup {display: none; position: absolute; top: 150px; left: 100px; width: 450px; z-index: 200; box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px; border: 1px solid #dadada; box-sizing: border-box;}
.main-popup.delay{display: block;}
.main-popup input{display: none; cursor: pointer;}
label.closetxt {display: inline-block; width: 100%; height: 100%; line-height: 43px; cursor: pointer;}
.main-popup img {width: 100%; border-bottom: 1px solid #dadada; box-sizing: border-box;}
.btn_wrap button {width: 50%; height: 43px; float: left; border: 0; outline: 0; border-right: 1px solid #cdcdcd; background: #fff; cursor: pointer;}
.btn_wrap button:last-child{border: 0;}

/* 2022-12-30일 팝업창 위치 */
.main-popup:nth-child(2){
  left: 460px;
}
.main-popup:nth-child(3){
  left: 820px;
}

/* 2022-11-01 프로모션 추가 & 팝업추가 끝 */






/* 2022-09-15 다운로드링크페이지 추가 */
/* downloadLink.html */
.link .downloadWrap{display: flex; justify-content: center; align-items: center; width: 1600px; height: 800px; margin: 0 auto;}
.link .downloadWrap .downloadBox{display: flex; justify-content: space-between; width: 100%; height: fit-content;}
.link .downloadWrap .downloadBox .itemBox{ width: calc(1600px/6); height: 100%; border: 0;}
.link .downloadWrap .downloadBox .itemBox:hover{background-color: transparent;}
.link .downloadWrap .downloadBox .itemBox>a{display: flex;justify-content: center; align-items: center;  width: 100%; height: 68px; margin: 18px auto; background-color: #fff; border-radius: 34px; font-size: 20px;  border: .5px solid #ddd; box-sizing: border-box;}
.link .downloadWrap .downloadBox .itemBox>a:hover{background-color: #FFE000; color: #000; border: 0; }
.link .downloadWrap .downloadBox .itemBox>a h1{font-weight: 400;}
.link .downloadWrap .downloadBox .itemBox>a h1 img{margin-right: 20px;}
/* 2022-09-15 다운로드링크페이지 추가 끝 */



/* 반응형 */

@media (max-width: 1600px) {
  .wrap {min-width: 100%;}
  .innerHeader{width: 1400px;}
  .value>.tit h1{margin-left: 100px;}
  .value .itemBox .slogan h1{font-size: 50px; line-height: 60px;}
  .service>.tit h1{margin-left: 100px;}
  .service>.tit button{margin-right: 100px;}
  .download>.tit h1{margin-left: 100px;}
  footer .footerBox {width: 1400px;}



  .capability {width: 1400px;}
  .partner {width: 1400px;}
  .location {width: 1400px;}

  .downloadWrap { width: 1400px;}
  .downloadWrap .downloadBox .itemBox {width: 340px;}
  .downloadWrap .downloadBox .itemBox a {width: 280px;}
}


@media screen and (max-width: 1400px) {
  .wrap {min-width: 100%;}
  .value .itemBox .slogan h1 {font-size: 40px;}
  .value .itemBox .slogan span {font-size: 20px;}
  footer .footerBox {width: 1200px;}

  .capability {width: 1200px;}
  .capability .capabilityItem .itemBox .text h1 { font-size: 34px; line-height: 48px;}
  .partner {width: 1200px;}
  .location {width: 1200px;}
  .downloadWrap { width: 1200px;}
  .downloadWrap .downloadBox .itemBox {width: 295px;}
  .downloadWrap .downloadBox .itemBox a {width: 220px; font-size: 16px;}
}

@media screen and (max-width: 1200px) {
  .wrap {min-width: 100%;}
  .contents.sub { padding-top: 60px;}
	footer .footerBox {width: 1000px;}
  .value .itemBox.four {width: 1000px;}
  header {height: 60px; line-height: 60px;padding:0 10px;}
  header .open {display: block; float: right;font-size: 28px; height: 60px; box-sizing: border-box;}
  header .open span{color: #fff;}
  header .bg {width: 100%; height: 100vh; background: rgba(0,0,0,0.6); display: block; position: absolute; top:0; left: 0; z-index: 200; display: none;}
  header nav{background: #fff; width: 0; height: 100vh; position: absolute; right: 0; top:0; overflow: hidden; transition: width 0.3s; z-index:300; }
  header nav.on {width: 70%; max-width: 300px; }
  header .open span{color: #fff;}
  header nav .close {display: block; position: absolute; right: 10px; top:0; font-size: 35px; padding-top: 5px; box-sizing: border-box;}
  header nav .close span{color: #000;}
  header nav .gnb{flex-direction: column; margin-top: 100px; color: #000;}
  header nav .gnb li {display: block; width: 100%; margin:0; line-height: 60px;}
  header nav .gnb li a {width: 100%; box-sizing: border-box;font-size:20px; }
  header nav .gnb li .sub{width: 100%; display: block;  z-index: 99;}
  header nav .gnb li .sub>li>a{font-size: 16px;}
  header nav .gnb li .sub>li>a:hover{color: #FFE000;}
  header nav .gnb li .sub li {height: 40px; line-height: 40px; background-color: #fff;}
  header nav .gnb li .sub li:nth-child(1){padding-top: 10px;}
  .value>.tit h1 { margin-left: 80px;}
  .service>.tit h1{margin-left: 80px;}
  .service>.tit button{margin-right: 80px;}
  .download>.tit h1 {margin-left: 80px;}
  .download .text h1 {left: 160px;}
  .download button { left: 160px;}


  .companyVisual {height: 300px;}
  .capability {width: 1000px;}
  .capability .capabilityItem .itemBox .text h1 { margin-top: 70px; font-size: 26px; line-height: 42px;}
  .capability .capabilityItem .itemBox .subText p { margin-top: 80px; font-size: 16px; line-height: 30px;}
  .capability .capabilityItem .itemBox.one{ width: 40%;}
  .capability .capabilityItem .itemBox.two{ width: 50%; text-align: center;}
  .partner {width: 1000px;}
  .location {width: 1000px;}
  .location .locationItem .itemBox iframe{width: 100%; height:250px;}
  .partner .partnerItem .itemBox img {width: 180px;}

  .download.color .text h1 { left: 160px;}
  .download.color button { left: 160px;}

  .downloadWrap { width: 1000px; height: 1200px;}
  .downloadWrap .downloadBox { flex-wrap: wrap;  height: 960px;}
  .downloadWrap .downloadBox .itemBox { width: 48%; height: 48%;}
  .downloadWrap .downloadBox .itemBox a {width: 70%; font-size: 18px;}
  .downloadWrap .downloadBox .itemBox>a.app { margin-top: 115px;}

  /* 2022-11-01 프로모션 추가 & 팝업추가 */
  .promotion_wrap{width: 1000px; margin: 0 auto;}
  /* 2022-11-01 프로모션 추가 & 팝업추가 끝 */
  
  
}


@media screen and (max-width: 1000px) {
  .wrap {min-width: 100%;}
	footer .footerBox {width: 90%;}
  .value .itemBox.four {width: 800px;}
  .value .itemBox.four .textBox .text h1 {font-size: 16px;}
  .value .itemBox {justify-content: space-around;}
  .download .text h1 {left: 150px; font-size: 36px;}
  .download button {left: 150px;}
  .service .serviceItem {align-content: space-evenly; height: 1280px;}
  .service .serviceItem .itemBox {width:48%; height: 600px;}
  
  .companyVisual h1 {font-size: 26px; letter-spacing: -1px; font-weight: 400;}
  .capability {width: 90%;}
  .companyVisual {height: 250px;}
  .capability .tit {padding-top: 128px;}
  .capability .capabilityItem .itemBox .text h1 { font-size: 22px; line-height: 36px;}
  .capability .capabilityItem .itemBox .subText p { margin-top: 80px; font-size: 13px; line-height: 26px;}
  .partner {width: 90%;}
  .partner .tit { padding-top: 220px;}
  .partner .partnerItem {height: 230px;}
  .partner .partnerItem .itemBox img {width: 140px;}
  .location {width: 90%;}
  .location .tit {padding-top: 220px;}
  footer {height: 260px;}

  .download.color .text h1 {left: 150px; font-size: 36px;}
  .download.color button {left: 150px;}

  .downloadWrap { width: 90%;}
  .downloadWrap .downloadBox .itemBox>a h1 img {margin-right: 10px;}


    /* 2022-11-01 프로모션 추가 & 팝업추가 */
    .promotion_wrap{width: 800px; margin: 0 auto;}
    /* 2022-11-01 프로모션 추가 & 팝업추가 끝 */
}



@media screen and (max-width: 768px) {
  .wrap {min-width: 100%;}
  .visual {height: 100vh;}
	footer .footerBox {width: 90%;}
  .value .itemBox.four {width: 727px;}
  .value .itemBox.four .textBox .text h1 {font-size: 16px;}
  .value .itemBox {justify-content: space-around;}
  .download .text h1 {left: 30px; font-size: 36px;}
  .download button {left: 30px;}

  .download.color .text h1 {left: 30px; font-size: 36px;}
  .download.color button {left: 30px;}


  .companyVisual { height: 200px;}
  .capability {width: 90%;}
  .capability .tit { padding-top: 88px;}
  .capability .tit h1 { font-size: 18px;}
  .capability .capabilityItem {flex-wrap: wrap;}
  .capability .capabilityItem .itemBox .text h1::before {top: 0px; left: -10px; width: 20px; height: 20px;}
  .capability .capabilityItem .itemBox.one { order: 2; width: 100%;}
  .capability .capabilityItem .itemBox.one .text { display: flex; justify-content: center;}
  .capability .capabilityItem .itemBox.one .subText { display: flex; justify-content: center;}
  .capability .capabilityItem .itemBox.one .subText p { font-size: 20px; line-height: 32px;}
  .capability .capabilityItem .itemBox .text h1 { font-size: 32px; line-height: 40px;}
  .capability .capabilityItem .itemBox.two { order: 1; width: 100%;}
  .capability .capabilityItem .itemBox.two img { width: 55%;}

  .partner {width: 90%;}
  .partner .tit { padding-top: 180px;}
  .partner .tit h1 {font-size: 18px;}
  .partner .partnerItem .itemBox img {width: calc(100%/5);}
  .partner .partnerItem { height: 210px;}
  .location {width: 90%;}
  .location .tit { padding-top: 180px;}
  .location .tit h1 {font-size: 18px;}
  .location .locationItem .itemBox iframe { height: 200px;}
  .location .locationItem .itemBox h1 {font-size: 14px;}
  footer .footerBox .textBox>h1 { font-size: 14px;}

  .downloadWrap .downloadBox .itemBox a {width: 80%; font-size: 16px;}
  .downloadWrap .downloadBox .itemBox a h1 img { width: 20px;}
  
  /* 2022-11-01 프로모션 추가 & 팝업추가 */
  .promotion_wrap{width: 100%; margin: 0 auto;}
  /* 2022-11-01 프로모션 추가 & 팝업추가 끝 */
}





@media screen and (max-width: 480px) {
  header {width: 100%;}
  .wrap {min-width: 100%;}
  .value .itemBox.four {width: 360px; height: fit-content;}
  .value .itemBox.four .textBox .text h1 {display: inline-block; width: 365px; margin-top: 30px; font-size: 12px;}
  .value .itemBox {justify-content: space-evenly;}
  .visual video {width: 100%;}
  footer .footerBox .textBox br.mo {display: block;}
  .value>.tit {margin-top: 150px;}
  .value>.tit h1 {margin-left: 30px; font-size: 18px;}
  .value .itemBox {display: flex; flex-direction: column; align-items: center; width: 100%;  height: 100%;}
  .value .valueItem {float: left; width: 100%; height: 100vh; margin: 50px 0;}
  .value .valueItem:nth-of-type(2) { margin-top: 70px;}
  .value .itemBox .slogan {display: flex; flex-direction: column; justify-content: space-around;}
  .value .itemBox .slogan h1 { font-size: 40px; line-height: 48px;}
  .value .itemBox .slogan span { font-size: 20px; line-height: 26px; margin-top: 30px;}
  .value .itemBox .valueimg {width: 100%; height: 300px; margin-top: 30px; text-align: center;}
  .value .itemBox .valueimg img {width: 80%; height: 100%;}  
  .value .itemBox.two .slogan {order: 1;}
  .value .itemBox.two .valueimg {order: 2;}
  .value .itemBox.four>.tit img{ margin-top: 30px;}
  .value .itemBox.four .textBox button { margin-top: 30px; font-size: 14px;}
  .value .itemBox.four .textBox .text h1 { line-height: 26px;}
  .service>.tit { margin-top: 0px;}
  .service>.tit h1 { margin-left: 30px; font-size: 18px;}
  .service>.tit button { margin-right: 30px; font-size: 14px;}
  .service .serviceItem { height: fit-content;}
  .service .serviceItem .itemBox { flex-direction: column; width: 480px; height: 465px;}
  section.download {position: relative; overflow: hidden; width: 100%; height: 600px; margin-top: 150px; background-image: url(../images/downloadBg.png); background-size: 100% 100%;}
  .download>.tit h1 { margin-left: 30px;}
  .download .text h1 {left: 30px; font-size: 28px;}
  .download button {left: 30px;}
  footer {height: 300px;}
  footer .footerBox .textBox>h1 { margin-left: 10px; font-size: 12px;}
  footer .footerBox .textBox>h1 b { margin: 0 10px 0 0px;}
  footer .footerBox .textBox .copy>h1 { margin: 20px 0 0 10px; font-size: 12px;}
  .serviceVisual { height: 300px;}
  .serviceBox {height: 800px;}
  .serviceBox .text h1 { font-size: 32px; line-height: 48px;}
  .serviceBox .text h1 b {font-size: 44px; line-height: 48px;}
  .serviceBox .subText p {font-size: 18px; line-height: 24px;}
  .serviceBox .imgBox{text-align: center;}
  .serviceBox .imgBox img{width: 92%;}
  .download.color .text h1 {left: 30px; top: 30px; font-size: 28px;}
  .download.color button {left: 30px; top: 140px; font-size: 16px;}
  section.download.color {height: 250px; background-size: 100% 100%; }
  section.download.admin .text br{display: block;}

  .companyVisual h1 {font-size: 22px;}
  .companyVisual {height: 300px;}
  .capability {height: 100vh;}
  
  .capability .capabilityItem .itemBox.two img {width: 70%;}
  .capability .capabilityItem .itemBox .text h1 {margin-top: 60px; font-size: 22px; line-height: 30px;}
  .capability .capabilityItem .itemBox.one .subText p {font-size: 16px; line-height: 26px; margin-top: 30px; text-align: center;}
  .partner { height: 100vh;}
  .partner .tit {padding-top: 0px;}
  .partner .partnerItem { flex-direction: row; height: fit-content; margin-top: 75px;}
  .partner .partnerItem .itemBox {flex-direction: column; flex-wrap: wrap; height: 600px; width: 50%; align-items: center; justify-content: space-around;}
  .partner .partnerItem .itemBox img { margin: 0; width: 70%; height: calc((100% - 300px)/5);}
  .location .tit {padding-top: 0px;}
  .location .locationItem .itemBox iframe {height: 400px;}
  .location .locationItem .itemBox h1 {font-size: 12px;}
  .serviceBox .subText p br.mo{display: block;}
  .download button img { width: 28px; height: 28px;}
  .download.color button img {width: 28px; height: 28px;}
  .downloadWrap {width: 90%; height: 2100px;}
  .downloadWrap .downloadBox { flex-wrap: wrap; height: 1800px;}
  .downloadWrap .downloadBox .itemBox { width: 100%; height: 23%;}
  .downloadWrap .downloadBox .itemBox .iconBox { margin: 20px auto;}
  .downloadWrap .downloadBox .itemBox>a:nth-of-type(1) { margin-top: 45px;}
  .downloadWrap .downloadBox .itemBox>a.app {margin-top: 115px;}
  
  .downloadVisual {height: 300px;}
  .downloadVisual .tit h1 { font-size: 22px;}

  /* 2022-09-15 다운로드링크페이지 추가 */
  .link .downloadWrap{display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; margin: 0 auto;}
  .link .downloadWrap .downloadBox{display: flex; justify-content: center; width: 100%; height: fit-content;}
  .link .downloadWrap .downloadBox .itemBox{ width: 80%; height: 100%; border: 0;}
  .link .downloadWrap .downloadBox .itemBox:hover{background-color: transparent;}
  .link .downloadWrap .downloadBox .itemBox>a{display: flex;justify-content: flex-start; align-items: center;  width: 100%; height: 68px; margin: 18px auto; background-color: #fff; border-radius: 34px; font-size: 20px;  border: .5px solid #ddd; box-sizing: border-box;}
  .link .downloadWrap .downloadBox .itemBox>a:hover{background-color: #FFE000; color: #000; border: 0; }
  .link .downloadWrap .downloadBox .itemBox>a h1{font-weight: 400; margin-left: 50px;}
  .link .downloadWrap .downloadBox .itemBox>a h1 img{margin-right: 20px;}
  .link .downloadWrap .downloadBox .itemBox>a {margin-top: 0px;}
  /* 2022-09-15 다운로드링크페이지 추가 끝 */
  
  /* 2022-09-19 카카오톡 상담 수정 */
  footer .kakaobtn_wrap{position: fixed; right: 30px; bottom: 60px; z-index: 99999;}
  footer .kakaobtn_wrap a{display: inline-block; width: 100px; height: fit-content;}
  footer .kakaobtn_wrap a:hover{transform: translate(0,0);}
  /* 2022-09-19 카카오톡 상담 수정 */

  /* 2022-11-01 프로모션 추가 & 팝업추가 */
  .main-popup { width: 350px; top: 80px; left: 50% !important; transform: translateX(-50%);}

  /* 2022-11-01 프로모션 추가 & 팝업추가 끝 */
  .promotion_wrap .tab_menu_wrap {width: calc(100% - 32px); padding: 16px;}
  .promotion_wrap .tab_menu_wrap ul.tab_menu {width: 100%; height: 40px;}
  .promotion_wrap .tab_menu_wrap ul.tab_menu li {line-height: 40px;}
  .promotion_wrap .tab_menu_wrap .tab_indicator {width: 100%;}
  .promotion_wrap .tab_menu_wrap .tab_indicator {height: 3px;}
  .promotion_wrap .tab_menu_wrap .tab_content {padding: 50px 0;}
  .promotion_wrap .tab_menu_wrap .tab_content #tab-02 img { width: 100%;}
  
}

@media screen and (max-width: 375px) { 
  .partner .tit {padding-top: 75px;}
  .location .tit {padding-top: 75px;}
}