@charset "utf-8";

.inner { margin:0 auto; width:1300px; }
@media only screen and (max-width:1300px) { 
	.inner { padding:0 30px; width:100%; }
}
@media only screen and (max-width:1180px) {
    html, body {font-size:14px;}
}
@media only screen and (max-width:1024px) {
    html, body {font-size:13px;}
}
@media only screen and (max-width:768px) { 
    html, body {font-size:12px;}
	.inner { padding:0 20px; }
}

@keyframes upDown {
    0% {transform: translateY(-40px);}
    100% {transform: translateY(0);}
}
@keyframes fadeInDown {
    0% {opacity: 0;transform: translate3d(0, -100%, 0);}
    100% {opacity: 1;-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);}
}

.main_wrap {letter-spacing:-.025em;}
.main_title {margin-top:1.3333rem;line-height:1.208em; font-size:3.2rem; font-weight:800; color:#000; text-align:center;}
.main_title_en {display:block; line-height:1.385em; font-size:1.7333rem; font-weight:800; color:#f55139; text-align:center; word-break:keep-all;}
.main_sub_title {margin-top:1.6667rem; line-height:1.5em; font-size:1.6rem; font-weight:400; color:#a39d88; text-align:center; word-break:keep-all;}
.image_box img {max-width:100%; vertical-align:top;}
/*비주얼*/
.visual {position:relative; height:61.5333rem;}
.visual .visual_bg_area {width:100%; height:100%; overflow:hidden;}
.visual .visual_bg_area .visual_bg .image {display:block; width:100%; height:100%; background:url(/html/_skin/1/images/main/main_visual01.webp) no-repeat center/cover; transform:scale(1.05); transition:all 1.3s;}
.visual .visual_bg_area .visual_bg.swiper-slide-active span {transform:scale(1)}
.visual .inner {position:relative; height:100%;}
.visual .text_box {position:absolute; top:50%; left:50%; margin-left:-600px; transform:translateY(-50%); z-index:1; animation:fadeInDown 1s;}
.visual .text_box .title {margin-top:1rem; line-height:1.1em; font-size:6.6667rem; color:#fff; font-weight:800; text-shadow:3px 3px 10px rgba(0, 0, 0, 0.1);}
.visual .text_box .text {line-height:1.4em; font-size:2rem; color:#fff; font-weight:600;}
.visual .scroll {position:absolute; bottom:-48px; left:50%; margin-left:-40px; padding-top:58px; font-size:12px; font-weight:500; letter-spacing:-.025em; background:url(/html/_skin/1/images/main/icon_scroll.webp) no-repeat top center; z-index:1; animation:upDown 1.5s infinite alternate; cursor:pointer;}
/*잽테크 스마트 카드 솔루션*/
.introduction {padding-top:8.2667rem; padding-bottom:11.4667rem; overflow:hidden;}
.intro_list {margin-top:7.3333rem;}
.intro_list .intro_item {display:flex; align-items:center; padding:0 .6667rem; column-gap:1.3333rem;}
.intro_list .intro_item .image_box {width:50%;}
.intro_list .intro_item .intro_text_box {width:50%;}
.intro_list .intro_item + .intro_item {margin-top:6.6667rem;}
.intro_list .intro_item:first-child .intro_text_box {padding-left:5.2rem; padding-right:2.3333rem;}
.intro_list .intro_item .intro_title {font-size:2.6667rem; font-weight:800; color:#222;}
.intro_list .intro_item .intro_text {margin-top:2.1333rem; line-height:1.5em; font-size:1.6rem; font-weight:400; color:#734105; word-break:keep-all;}
/*전기차 멤버십 서비스*/
.membership_card {padding-top:6.7333rem; padding-bottom:5.2rem; background:#f3fafd;}
.card_list_wrap {margin-top:6.4667rem;}
.card_list_area {position:relative; padding-top:4.3333rem; overflow-x:hidden;}
.card_list_area .card_list .swiper-slide {width:593px; text-align:center; opacity:0.2;}
.card_list_area .card_list .swiper-slide.swiper-slide-active {opacity:1;}
.card_list_area .card_list img {width:100%;}
.card_list_area .swiper-pagination {top:0; bottom:auto;}
.card_list_area .swiper-pagination-bullet {width:16px; height:16px; background:#ebe7d9; opacity:1;}
.card_list_area .swiper-pagination-bullet-active {background-color:#222;}
.card_info {margin-top:6.2rem;}
.card_info .info_title {font-size:2.6667rem; font-weight:800; color:#222; text-align:center;}
.card_info .info_text {margin-top:2.2rem; line-height:1.5em; font-size:1.6rem; font-weight:400; color:#734105; text-align:center; word-break:keep-all;}
/*원스톱 서비스 */
.service {padding-top:6.3333rem; padding-bottom:10rem;}
.service .image_box {margin-top:5.2667rem; text-align:center;}
/*발급 시스템*/
.system {padding-top:4.6667rem; padding-bottom:10rem; background:#f8f8f8;}
.system .image_box {margin-top:4.5333rem; text-align:center;}
/*IoT시스템*/
.iot_system {padding-top:5rem; padding-bottom:5.8rem;}
.iot_system .image_box {margin-top:3.2rem; text-align:center;}
/*제휴문의*/
.partner {padding:6.6667rem 0; background:#fcfaf5; overflow:hidden;}
.partner .inner {display:flex; justify-content:space-between;}
.partner .title_box {padding-left:10px;}
.partner .main_title_en {text-align:left;}
.partner .main_title {text-align:left;}
.partner .main_sub_title {text-align:left;}
.partner .btn_map {display:inline-flex; justify-content:center; align-items:center; gap:.6667rem; width:8.9333rem; margin-top:1.3333rem; padding:.8rem 0; font-size:1.0667rem; font-weight:bold; color:#fff; text-align:center; background:#222; border-radius:5px;}
.partner .btn_map:before {content:''; width:1.2667rem; height:1.4667rem; background:url('/html/_skin/1/images/main/icon_marker.webp') no-repeat center/contain}
.partner .partner_form_wrap {width:40rem; margin-right:10px; padding:4.5333rem 1.3333rem 2.9333rem; background:#fff; border:4px solid #f55139; border-radius:2rem; box-shadow:0px 0px 99.99px 1.01px rgba(0, 0, 0, 0.14)}
.partner_form {width:30.2667rem; margin:auto;}
.partner_form li .form_title {font-size:14px; font-weight:bold; color:#222;}
.partner_form li .form_title span {color:#ff0000;}
.partner_form li + li {margin-top:23px;}
.partner_form li .input_box {margin-top:10px;}
.partner_form li .input_box input[type=text] {width:100%; padding:.7333rem 0 .8rem .8667rem; font-size:16px; font-weight:bold; color:#000; border:1px solid #afb2b8; border-radius:5px;}
.partner_form li .input_box select {width:100%; height:2.9333rem; padding:.7333rem 0 .8rem .8667rem; font-size:16px; font-weight:bold; color:#000; background:#fff; border:1px solid #afb2b8; border-radius:5px;}
.partner_form li .input_box textarea {width:100%; height:104px; padding:.7333rem 0 .8rem .8667rem; font-size:16px; font-weight:bold; color:#000; border:1px solid #afb2b8; border-radius:5px; resize:none;}
.partner_form li .input_box :where(textarea,input)::placeholder {font-weight:400; color:#888;}
.partner_form .form_group {display:flex; gap:6px;}
.partner_form .form_group>div{flex-grow:1;}
.partner_form .notice_text {display:block; margin-top:.8rem; font-size:14px; font-weight:500; color:#222;}
.partner_form .btn {display:block; width:100%; margin-top:1.3333rem; padding:1.5333rem 0; font-size:1.3333rem; font-weight:bold; color:#fff; text-align:center; background:#f55139; border-radius:6px;}
.partner_form .agree_box {display:flex; gap:1.3333rem; margin-top:1rem;}
.checkbox input[type="checkbox"] {overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; font-size:initial; clip:rect(0 0 0 0);}
.checkbox label {display:flex; align-items:center; gap:5px; font-size:14px; font-weight:500; color:#222; cursor:pointer;}
.checkbox label:before {content:'';	display:inline-block; width:15px; height:15px; border-radius:2px; background:#afb2b8 url('/html/_skin/1/images/main/icon_check.webp') no-repeat center center;}
.checkbox input:checked + label:before {background-color:#000;}
.agree_box .btn_link {font-size:14px; font-weight:500; color:#f55139; border-bottom:1px solid #f55139;}

/* popup */
.popup-wrap {position:fixed; top:0; left:0; bottom:0; right:0; z-index:99999; width:100%; height:100%; background:rgba(0,0,0,.8);  display:none;}
.popup-wrap .popup-inner {position:absolute; top:50%; left:50%;	transform:translate(-50%,-50%);	padding:40px; max-width:560px; width:calc(100% - 60px);	max-height:800px; height:calc(100% - 60px);	border-radius:10px;	background:#fff;}
.popup-wrap .popup-tit {font-weight:500; font-size:24px; color:var(--color-dark-gray, #333);}
.popup-wrap.agree .popup-inner {max-height:720px;}
:where(.popup-box,.popup-wrap) .close {	position:absolute; top:37px; right:37px; width:42px; height:42px; font-size:0;}
:where(.popup-box,.popup-wrap) .close:before,
:where(.popup-box,.popup-wrap) .close:after {content:''; position:absolute; top:50%; left:0; z-index:111; width:100%; height:2px; border-radius:5px; background:var(--color-gray, #aaa);}
:where(.popup-box,.popup-wrap) .close:before {transform:rotate(45deg);}
:where(.popup-box,.popup-wrap) .close:after {transform:rotate(-45deg);}
.popup-wrap.agree .agree-popup-conts .title {margin-top:20px; font-weight:500; font-size:20px; color:#000;}
.popup-wrap.agree .agree-popup-conts .conts {margin-top:15px; overflow-x:hidden; padding:15px 20px; width:100%; height:200px; line-height:1.5em; border:1px solid var(--color-light-gray, #ccc);}
.popup-wrap.agree .agree-popup-conts p {font-weight:300; font-size:14px; line-height:21px; color:var(--color-dark-gray, #333);	word-break:keep-all;}
.popup-wrap.agree .popup-btn {margin-top:36px;}
.popup-wrap.agree .popup-btn a {display:block; width:100%; padding:14px; font-size:20px; color: #fff; line-height:1.5em; letter-spacing:-.025em; text-align:center; background-color:#f55139; font-weight:500; border-radius:4px; box-sizing:border-box;}

/*파트너사*/
.partners {padding:7.8rem 0 17.6667rem; background:#90baff;}
.partners .main_title {margin-top:1.3333rem; color:#fff; text-shadow:0px 0px 10px rgba(0, 0, 0, 0.19); word-break:keep-all;}
.partners .partners_area {margin-top:9.2667rem}
.partners .partners_list li {float:left; margin-right:27px; width:196px; height:196px; border-radius:2rem; overflow:hidden; flex-shrink:0;}
.partners .partners_list img {width:100%; vertical-align:top;}

@media only screen and (max-width:1300px) { 
    /*비주얼*/
    .visual .text_box {left:4rem; margin-left:0;}
    /*제휴문의*/
    .card_list_area .card_list .swiper-slide {width:45.616vw;}
	/*파트너사*/
}
@media only screen and (max-width:1024px) { 
    /*잽테크 스마트 카드 솔루션*/
    .intro_list .intro_item {flex-direction:column; row-gap:3.077rem;}
    .intro_list .intro_item + .intro_item {margin-top:5.385rem;}
    .intro_list .intro_item .image_box {width:100%; text-align:center; order:1;}
    .intro_list .intro_item .intro_text_box {width:100%; padding:0 1.538rem; order:2;}
    .intro_list .intro_item:first-child .intro_text_box {padding:0 1.538rem;}
    /*IoT시스템*/
    .iot_system .main_sub_title br {display:none;}
    /*제휴문의*/
    .partner .inner {flex-direction:column; align-items:center;}
    .partner .title_box {display:flex; flex-direction:column; align-items:center; padding-left:0;}
    .partner .main_sub_title {text-align:center;}
    .partner .partner_form_wrap {margin-top:50px; margin-right:0;}
    .partner_form li .input_box select {height:3.417rem;}
	/*파트너사*/
	.partners {padding-top:7.6923rem; padding-bottom:11.5385rem;}
	.partners .partners_area {margin-top:6.1538rem;}
	.partners .partners_list li {margin-right:20px; width:140px; height:140px;}
}
@media only screen and (max-width:768px) { 
    .main_title_en {font-size:16px;}
    .main_title {font-size:30px;}
    .main_sub_title {font-size:15px;}
    .main_sub_title br {display:none;}
    /*비주얼*/
    .visual {height:40rem;}
    .visual .text_box {left:20px;}
    .visual .text_box .text {font-size:20px;}
    .visual .text_box .title {font-size:70px;}
    /*잽테크 스마트 카드 솔루션*/
    .introduction {padding-top:6rem; padding-bottom:9rem;}
    .intro_list .intro_item .intro_title {font-size:25px;}
    .intro_list .intro_item .intro_text {font-size:15px;}
    /*전기차 멤버십 서비스*/
    .membership_card {padding-top:5rem; padding-bottom:4.5rem;}
    .card_list_wrap {margin-top:5rem;}
    .card_list_area .swiper-pagination-bullet {width:13px; height:13px;}
    .card_list_area .card_list .swiper-slide {width:50vw;}
    .card_info {margin-top:5rem;}
    .card_info .info_title {font-size:25px;}
    .card_info .info_text {font-size:15px;}
    /*원스톱서비스*/
    .service {padding-top:5rem; padding-bottom:8rem;}
    /*발급 시스템*/
    .system {padding-bottom:8rem;}
    /*IoT시스템*/
    .iot_system {padding-top:4.5rem; padding-bottom:5rem;}
    /*제휴문의*/
    .partner {padding-top:5rem; padding-bottom:5rem;}
    .partner .title_box .main_sub_title br {display:block;}
    .partner .partner_form_wrap {margin-top:30px; max-width:480px; width:100%;}
    .partner_form {max-width:340px; width:100%;}
    .partner_form li .form_title {font-size:13px;}
    .partner_form li .input_box :is(input[type=text],textarea,select) {font-size:15px;}
    
    /*팝업*/
	.popup-wrap .popup-inner {padding:25px;	max-height:calc(100vh - 100px);	height:auto;}
    .popup-wrap .close {top:17px; right:17px; width:32px; height:32px;}
    .popup-wrap .popup-tit {font-size:18px;	}
    .popup-wrap.agree .agree-popup-conts .title {margin-top:15px; font-size:16px;}
    .popup-wrap.agree .agree-popup-conts .conts {margin-top:12px; padding:12px 15px; font-size:14px;}
    .popup-wrap.agree .popup-btn {margin-top:20px;}
    .popup-wrap.agree .popup-btn a {padding:10px; font-size:16px;}

	/*파트너사*/
	.partners {padding-top:70px; padding-bottom:100px;}
	.partners .partners_area {margin-top:50px;}
	.partners .partners_list li {width:110px; height:110px; margin-right:15px;}
}
@media only screen and (max-width:480px) {
    .card_list_area .card_list .swiper-slide {width:60vw;}
    .card_info .info_title {font-size:23px;}
    .card_info .info_text {font-size:14px;}
}