/* BASIC css start */
@font-face {
    font-family: 'GmarketSans';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot');
    font-display: swap;
} 
@font-face {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot');
    font-display: swap;
} 
@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot');
    font-display: swap;
} 


body, h1, h2, h3, h4, h5, h6, pre, xmp, plaintext, listing, input, textarea, select, button, a, code, table, p, span {font-family:'Spoqa Han Sans Neo', sans-serif;}
body {}

/*채널톡 가리기*/
div#ch-plugin {display:none !important;}
div.wrap {position: relative;width: 100%;overflow-x: hidden;}
div.wrap div.contentWrapper {}
.w1920 {max-width:1920px;}

.textBox {width: 100%;max-width:1000px;margin: 0 auto;padding-bottom: 50px;}
.textBox h3 {font-size: 24px; font-weight: 400; letter-spacing: -2px;}
.textBox h2 {font-size: 42px; font-weight: 700; letter-spacing: -2px; padding:5px 0 12px 0;}
.textBox h1 {font-size: 60px;font-weight: 900;letter-spacing: -3px;padding-bottom: 40px;}
.textBox p {font-size: 20px;letter-spacing: -1px;font-weight: 300;}
p.sub1 {font-size: 28px;letter-spacing: -1px;opacity:0.9;padding-top: 15px;}
p.sub2 {font-size: 20px;letter-spacing: -1px;opacity:0.7; margin-bottom:12px;}
p.sub3 {font-size: 16px;letter-spacing: -1px;opacity:0.7;margin-bottom:12px;margin-top: 30px;color: #e1e1e1;}

.gray {color:#9e9e9e; font-size:0.9em;}
.lightgray {color:#f9f9f9;}
.back_bk {background:#000000;}
.back_dg {background:#0b0b0b;}
.back_wh {background:#ffffff;}

.right_text {text-align: right;}
.comment {font-size: 13px; color:#666666;}
.textBox_ul {font-size: 20px; letter-spacing: -1px; margin-top: 30px; line-height: 150%; font-weight: 300;}
.radius {border-radius:30px;}

.text-C {text-align:center;}
.text-L {text-align:left;}
.text-R {text-align:right;}
.margin-auto {margin: 0 auto;}

.pdt-330 {padding-top:330px;}
.pdt-245 {padding-top:245px;}
.pdt-220 {padding-top:220px;}
.pdt-185 {padding-top:185px;}
.pdt-150 {padding-top:150px;}
.pdt-100 {padding-top:100px;}
.pdt-75 {padding-top:75px;}
.pdt-50 {padding-top:50px;}
.pdt-25 {padding-top:25px;}
.pdt-15 {padding-top:15px;}

.pdb-150 {padding-bottom:150px;}
.pdb-100 {padding-bottom:100px;}
.pdb-75 {padding-bottom:75px;}
.pdb-50 {padding-bottom:50px;}
.pdb-25 {padding-bottom:25px;}
.pdb-15 {padding-bottom:15px;}

.handPointer {position: absolute;z-index: 100;width: 40px;animation-name: pointer;animation-duration: 2s;animation-iteration-count: infinite;}
@keyframes pointer {
    0% {width: 40px;}
    50% {width: 42px;}
    100% {width: 40px;}
}


/* 상세페이지 */


/* 인트로 */
.intro {width: 100%;height: 913px;position: relative;margin: 0 auto; background: url(https://motovelo.diskn.com/K7SDcShH7L) center no-repeat; background-size: cover;}
.intro .intro_wrap {max-width: 1920px;height: 730px;position: relative;margin: 0 auto;}
.intro .intro_wrap .intro_logo {position: absolute;top: 39px;left: 411px;width: 206px;}
.intro .intro_wrap .intro_text {position: absolute;bottom: 1px;left: 456px;z-index: 10;}
.intro .intro_wrap .only_online {position: absolute;bottom: 170px;right: 450px;z-index: 20;width: 150px;}

.intro .intro_wrap .intro_bike {transform-style: preserve-3d;width:800px;height:730px;position: absolute;top: 137px;left: 578px;animation-name: intro_bike_move;animation-duration: 12s;animation-iteration-count: infinite;animation-timing-function: cubic-bezier(0, 0, 0.69, 1.18);}
.intro .intro_wrap .intro_bike .intro_bike_img {position:absolute; height:730px; transform: rotateX(calc(var(--i) * 1deg)) translateZ(210px); backface-visibility: hidden; }

@keyframes intro_bike_move {
    0% {transform: rotateX(0deg);}
    30% {transform: rotateX(0deg);}
    33% {transform: rotateX(120deg);}
    63% {transform: rotateX(120deg);}
    66% {transform: rotateX(240deg);}
    97% {transform: rotateX(240deg);}
    100% {transform: rotateX(360deg);}
}

.intro .intro_wrap .intro_spec {position: absolute;top: 20px;right: 201px;text-align: center;}
.intro .intro_wrap .intro_spec ul {box-shadow: 0 0 8px 0px #000000b5;background: #151517;border-radius: 10px;color: #bbbabf;width: 401px;height: 81px;margin: 0 auto;}
.intro .intro_wrap .intro_spec ul li {float: left;height: 56px;text-align: left;padding-left: 23px;margin-top: 13px;letter-spacing: -0.5px;border-right: 1px #898989 solid;}
.intro .intro_wrap .intro_spec ul li:nth-child(1) {width: 29%;}
.intro .intro_wrap .intro_spec ul li:nth-child(2) {width: 27%;}
.intro .intro_wrap .intro_spec ul li:nth-child(3) {width: 25%;border-right: none;}
.intro .intro_wrap .intro_spec ul li span {font-size: 15px;font-family: 'GmarketSans';}
.intro .intro_wrap .intro_spec ul li p {font-size: 37px;line-height: 35px;font-weight: 450;font-family: 'GmarketSans';}

.intro .intro_wrap .intro_color {position: absolute;right: 400px;top: 319px;}
.intro .intro_wrap .intro_color div {width: 25px;height: 25px;border-radius: 50px;margin-bottom: 8px;}
.intro .intro_wrap .intro_color .intro_color_bk {background: #000; border: 1px #fff solid;}
.intro .intro_wrap .intro_color .intro_color_wh {background: #fff;}
.intro .intro_wrap .intro_color .intro_color_mt {background: #5ad9e4;}
.intro .intro_wrap .intro_p1 {text-align: center;position: absolute;bottom: -5px;left: 50%;transform: translate(-50%, -50%);color: #a4e2eb;font-size: 31px;font-weight: 300;}

.intro .intro_p2 {max-width: 1100px; margin: 0 auto; padding-top: 20px; text-align: right; color: #e1e1e1; font-size: 13.5px;}



/* 디테일 팝업 */
.detail_popup {background: linear-gradient(0deg, #26292e, #070709), url(https://motovelo.diskn.com/L7SDcSi24R) center no-repeat;background-blend-mode: lighten;position: relative;height:900px;}
.detail_popup div {position: relative;}
.detail_popup .modalWrap_img {position:absolute;transform: translate(-50%, 0);left: 50%;top: 270px; width: 1200px;}

.detail_popup a.button{display:inline-block;padding: 6px 12px;text-decoration:none;color:#fff;background: #418f9c;border-radius: 30px;position: absolute; opacity:0.85; font-size:18px; letter-spacing:-1px;transition: 0.3s;}
.detail_popup a.button:hover {opacity:1; background: #1f727f;}

.detail_popup a.modal0 {left: 805px;top: 45px;}
.detail_popup a.modal1 {left: 768px;top: 86px;}
.detail_popup a.modal2 {right: 179px;top: 266px;}
.detail_popup a.modal3 {left: 656px;top: 328px;}
.detail_popup a.modal4 {right: 234px;top: 315px;}
.detail_popup a.modal5 {right: 233px;top: 445px;}
.detail_popup a.modal6 {left: 278px;top: 479px;}
.detail_popup a.modal7 {right: 107px;top: 483px;}
.detail_popup a.modal8 {left: 611px;top: 523px;}
.detail_popup a.modal9 {left: 310px;top: 639px;}
.detail_popup a.modal10 {left: 460px;top: 174px;}
.detail_popup a.modal11 {left: 443px;top: 278px;}
.detail_popup a.modal12 {left: 358px;top: 546px;}

#modal{display:none; position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.3);}

.modal-con {display:none; position:fixed; top: 38%; left:50%; transform: translate(-50%,-50%); max-width: 400px; background:#fff; border-radius: 15px; opacity: 0.95;}
.modal-con .title {font-size:20px; font-weight: 500; padding: 10px; background: #555555; color: #fff; border-radius: 15px 15px 0 0; letter-spacing: -1px;}
.modal-con .con {font-size:15px; line-height:1.3; padding: 30px; text-align:center;}
.modal-con .con img {width:80%;border: 1px ##c2c2c2 solid;border-radius: 5px;margin-bottom: 20px;}

.modal-con .con p.parts_link {margin-top:30px;}
.modal-con .con p.parts_link_right {text-align: right;padding-right: 60px;}
.modal-con .con p.parts_link a {padding: 10px 16px;font-weight:500;border-radius: 50px;background: #7da4df;color: #ffffff;font-size: 17px; letter-spacing:-1px; transition: 0.3s;}
.modal-con .con p.parts_link a:hover {background: #598edf;}
.modal-con .close {display:block; position:absolute; border-radius:50%; text-align:center; line-height: 30px; text-decoration:none; color: #fff; font-size: 22px; font-weight: bold; right: 18px; top: 8px;}



/* 색상 */
.frame_color {background:#252a2e;}
.frame_color > div {max-width: 1660px;margin: 0 auto;}
.frame_color .frame_color_wrap {display: flex;flex-direction: row;}
.frame_color .frame_color_wrap > div {width: 33.33%;height: 538px;text-align: center;margin: 0 auto;padding-top: 147px;}
.frame_color .frame_color_wrap > div img {margin-top: 82px;transition: 0.1s;}
.frame_color .frame_color_wrap > div img:hover {margin-top:75px;}



/* 프레임 */
.frame {height: 1445px;width: 100%;margin:0 auto;background: url(https://motovelo.diskn.com/c7SDcSta14) center;}

.swiper {width: 1280px;height: 820px;margin: 0 auto;}
.swiper-wrapper {display: -webkit-inline-box;}
.swiper-slide {text-align: center;font-size: 18px;display: flex !important;justify-content: center;align-items: center;}
.swiper-slide img {display: block;margin: 0 auto;padding-bottom: 180px;}
.autoplay-progress {position: absolute;right: 50%;bottom: 0px;z-index: 10;width: 65px;height: 65px;display: flex;align-items: center;justify-content: center;font-weight: bold;color: #8fbfbf;font-size: 25px;}
.autoplay-progress svg {--progress: 0;position: absolute;left: 0;top: 0px;z-index: 10;width: 100%;height: 100%;stroke-width: 4px;stroke: #8fbfbf;fill: none;stroke-dashoffset: calc(125.6px * (1 - var(--progress)));stroke-dasharray: 125.6;transform: rotate(-90deg);}

.swiper-bar {}
.swiper-button-next {background: #203232;color: #90c0c2 !important;padding: 10px 8px 10px 13px;border-radius: 100px;width: 45px !important;height: 45px !important;}
.swiper-button-prev {background: #203232;color: #90c0c2 !important;padding: 10px 13px 10px 8px;border-radius: 100px;width: 45px !important;height: 45px !important;}
.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after {font-weight: 900; font-size: 37px !important;}
.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after {font-weight: 900; font-size: 37px !important;}
.swiper-pause, .swiper-play {width:65px;height:65px;position: absolute;bottom: 0px;z-index: 20;cursor: pointer;}
.swiper-pause img, .swiper-play img {width:100%;}
.swiper-pause {right: 43.5%;}
.swiper-play {right: 37%;}

.frameTextBox {margin-top: 56px;}
.frameTextBox h1 {width: 555px;margin: 0 auto;border-bottom:1px #fff solid;padding-bottom: 5px;}
.frameTextBox p {padding-top:50px}



/* 배터리 */
.battery {position: relative;width: 100%;height: 2620px;margin: 0 auto;background: url(https://motovelo.diskn.com/g7SDcSuS6b) center no-repeat;background-color: #121212;}

.battery .battery_wrap_img {width:1920px;height: 1000px;margin:0 auto;position: relative;}
.battery .battery_wrap_img .battery_img {position: absolute;top: -2%;left: 26%;animation-name: battery_move;animation-duration: 3s;animation-iteration-count: infinite;animation-timing-function: ease;}
@keyframes battery_move {
    0% {top: -2%}
    50% {top: 0%}
    100% {top: -2%}
}
.battery .battery_wrap_img .battery_36v15ah {position: absolute;top: 55%;left: 29.3%;}

.battery .batteryTextBox {position: absolute;bottom: 14px;left: 24%;}
.battery .battery_wrap {display: flex; justify-content: center;}
.battery .battery_wrap .battery_wrap_box {position: relative; width: 494px; height: 592px;}
.battery .battery_wrap .battery_wrap_box img {position: absolute; top: 0; left: 0;}
.battery .battery_wrap .battery_wrap_box h3 {position: absolute; z-index: 50; width: 100%; color: #fff; bottom: 87px; font-size: 36px; font-weight: 600;}
.battery .battery_wrap .battery_wrap_box p {position: absolute; width: 100%; bottom: 29px; color: #fff; font-size: 17px;}
.battery .battery_wrap2 {padding-top: 90px; width: 1000px; margin: 0 auto;}
.battery .battery_wrap2 h3 {text-align: center; font-size: 42px; color: #fff; font-weight: 600;} 
.battery .battery_wrap2 img {margin-top: 30px;}
.battery .battery_wrap2 .sub3 {text-align: left; margin-top: 50px;}



/* 충전 */
.charge {width: 100%;height: 1750px;background: #000;}
.charge img {margin:3% 0;}
.charge .textBox {padding-bottom:0px;}
.charge .sub3 {text-align: left; width: 1000px; margin: 0 auto;}


/* 디스플레이 */
.display {background: url(https://motovelo.diskn.com/v7SDcSWuHw) center no-repeat;background-color: #232426;height: 2000px;}
.display .display_wrap {position: relative;max-width: 1920px;height: 1308px;margin: 0 auto;}
.display .display_wrap .display_img {position: absolute;top: 452px;left: 656px;animation-name: display_move;animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function: ease-out;}
@keyframes display_move {
    0% {top: 452px;}
    50% {top: 470px;}
    100% {top: 452px;}
}

.display .swiper2 {width: 1920px;margin: 0 auto;padding-top: 50px;padding-bottom: 50px;position: relative;overflow: hidden;}
.display .swiper2 .swiper-slide {background-position: center;background-size: cover;width: 1040px;}
.display .swiper2 .swiper-slide img {display: block;width: 100%;padding-bottom: 0;}

.display .swiper-btns {width: 200px; height: 95px; margin: 0 auto; position: relative;}
.display .swiper-button-next, .display .swiper-button-prev {}



/* 모터 */
.motor {background: #000;}
.motor .display_wrap {text-align:center;}
.motor .display_wrap .motor_img {width: 1000px;border-radius: 20px;}
.motor .display_text_wrap {padding-top: 50px; width: 1000px; margin: 0 auto;}
.motor .display_text_wrap ul {display: flex; justify-content: center;}
.motor .display_text_wrap ul li {width: 33.333%;}
.motor .display_text_wrap ul li p {color: #bababa;font-size: 20px;font-weight: 500;letter-spacing: -1px;}
.motor .display_text_wrap ul li p.display_text1 {font-size: 90px;font-weight: 900;letter-spacing: -3px;color: #fff;}
.motor .display_text_wrap ul li p span {font-size: 55px;padding-left: 5px;}



/* 타이어 */
.tire {width:100%;text-align:center;position: relative;background-color: #000;}
.tire .tire_img {}



/* 서스펜션&브레이크 */
.suspension {position: relative;background: #000;}
.suspension .textBox {max-width: 1200px;margin:0 auto;position: absolute;}
.suspension .text-R {right: 0;top: 228px;}
.suspension .text-L {left: 0;top: 902px;}
.suspension_wrap {position: relative;max-width: 1200px;margin: 0 auto;height: 1540px;}
.suspension_wrap img {position: absolute;transition: transform 0.3s ease, z-index 0.2s ease;width: 550px;}
.suspension_wrap .suspension01 {position: absolute;top: 223px;left: 100px;z-index: 5;}
.suspension_wrap .suspension01:hover{transform:rotate(-3deg);}
.suspension_wrap .suspension02 {position: absolute;top: 690px;right: 100px;z-index: 10;}
.suspension_wrap .suspension02:hover{transform:rotate(3deg);}



/* 파스 & 스로틀 */
.driving_mode {background:#272b2c;}
.driving_mode_wrap iframe {width: 1200px; height: 675px;}
.driving_mode_wrap {width: 1200px;height: 1050px;margin: 0 auto;background: #2d3333;box-shadow: 0 0 20px 0px #00000061;}
.driving_mode_wrap {display: none;}
.driving_mode_wrap.active {display: block;}
.driving_mode_wrap ul {width: 540px; height: 90px; margin: 0 auto; border-radius: 50px; margin-top: 71px; display: flex; align-items: center; justify-content: center; background: #202425; }
.driving_mode_wrap ul li {width: 45%; text-align: center; border-radius: 50px; padding: 10px 0px; margin: 0 10px; color: #fff; font-size: 30px; font-weight: 500; cursor: pointer;}
.driving_mode_wrap p {text-align: center; font-size: 20px; color: #fff; margin-top: 40px;}
.driving_pas ul li.pas  {background: #121212;}
.driving_thr ul li.throttle  {background: #121212;}



/* 전방라이트 */
.light {width: 100%;height: 1200px;position: relative;background: #000;}
.light .textBox {position: absolute;top: 100px;left: 50%;margin-left: -500px;z-index: 10;}
.light .light_wrap {margin: 0 auto; width: 1920px; position: relative;}
.light .light_wrap_off {}
.light .light_wrap_on {}
.light .light_wrap .light_btn {position: absolute;top: 290px;left: 889px;z-index: 5;cursor: pointer;}
.light .light_wrap .light_img {position: absolute;top: 0;z-index: 0;width: 100%;}

.light_wrap {display: none;}
.light_wrap.active {display: block;}




/* 변속기 */
.shift {height: 1100px; background: #000;}
.shift .shift_wrap {position: relative;max-width: 1000px;margin: 0 auto;margin-top: 70px;height: 800px;}
.shift .shift_wrap img {position: absolute;transition: transform 0.3s ease, z-index 0.2s ease;width: 600px;}
.shift .shift_wrap .shift01 {position: absolute; top: 0; left: 0; z-index: 10;}
.shift .shift_wrap .shift02 {position: absolute;top: 106px;right: 0;z-index: 5;}



/* 패키지 */
.package {background: #000; position: relative; width: 100%;}
.package_wrap {position: relative; max-width: 1920px; height: 1625px; margin: 0 auto;}
.package_wrap .package_url {position: absolute;z-index: 10;font-size: 24px;color: #d9d9d9;font-weight: 600;}
.package_wrap .package_url img{}
.package_wrap .package_url span{}
.package_wrap .package_url_bb {top: 245px;left: 580px;}
.package_wrap .package_url_de {top: 844px;right: 630px;}

.package_wrap img.package_bb, .package_wrap img.package_de {position: absolute; z-index: 9; transition:0.3s;}
.package_wrap img.package_bb {top: 116px; right: 320px;}
.package_wrap img.package_bb:hover{transform:rotate(8deg);}
.package_wrap img.package_de {top: 746px; left: 310px;}
.package_wrap img.package_de:hover{transform:rotate(-8deg);}

.package_wrap .package_bg01, .package_wrap .package_bg02 {position: absolute; z-index: 5;}
.package_wrap .package_bg01 {top: -14px; right: 120px;}
.package_wrap .package_bg02 {top: 444px;left: 137px;}



/* 제품사이즈*/
.size {background:url('https://motovelo.diskn.com/O7SDcUsa33') no-repeat center / cover; width:100%; height:1250px; position: relative; text-align: center; }
.size > .textBox {padding-top: 130px; padding-bottom: 50px;}

.size table.sizeTable {width: 100%; max-width:860px; margin: 0 auto; margin-top:40px; }
.size table.sizeTable td, table.sizeTable th {border: 1px solid #5e5e5e; padding:8px 0;}
.size table.sizeTable th, 
.size table.sizeTable td {border-right:none; border-left:none;}
.size table.sizeTable td:nth-child(1) {font-weight:700;}
.size table.sizeTable tbody td {font-size: 20px; font-weight:500; color: #000000; padding: 20px 0;}
.size table.sizeTable thead { }
.size table.sizeTable thead th {font-size: 20px; font-weight: normal; color: #000000; text-align: center; padding: 10px 0;}
.size .comment {text-align: right; max-width: 860px; margin: 0 auto;}


/* 스펙 */
.spec {width:100%; height:1945px; position: relative; text-align: center;  background:#ffffff;}
.spec > .textBox {padding-top: 130px; padding-bottom: 50px;}

.spec .specTable_wrap {max-width: 1000px; margin: 0 auto;}
.spec table.specTable {float:left;}
.spec table.iconTable {width:25%; font-weight:500;}
.spec table.modelTable {width:calc(75%/2)}

.spec table.iconTable tbody tr td img {width:18px;}

.spec table.specMain {background:#f1f1f1;}
.spec table.specTable td, .spec table.specTable th {border: 1px solid #c3c3c3;/* padding:15px 0; */font-size:16px;letter-spacing:-1px;color:#333333;height: 60px;}
.spec table.specTable th,
.spec table.specTable td {border-right:none; border-left:none;}

.spec table.specTable tr:nth-child(1) th,
.spec table.specTable tr:nth-child(1) td,
.spec table.specTable tr:nth-child(2) td {border:none;padding-top: 12px;}

.spec table.specTable tr:nth-child(1) td {font-size:28px; font-weight:900;}
.spec table.specTable tr:nth-child(2) td {/*padding:0 0 15px 0*/}

.spec table.specTable thead tr th {width:200px; height:210px;}
.spec table.specTable thead tr th img {width:80%;}
.spec table.specTable .colorChip  {width: 15px;height: 15px;border:1px #bdbdbd solid;border-radius: 60px;margin: 0 auto;display: inline-block;text-align: center;}
.spec table.specTable .comment1 {font-size: 13px; color: #999999; font-weight: 500;}
.spec table.specTable .comment2 {font-size:12px; letter-spacing:-1px; color:#666;}
.spec table.specTable .comment3 {font-size:13px; letter-spacing:-1px;}

.spec table.specTable .color_wh {background:#ffffff;}
.spec table.specTable .color_bk {background:#000000;}
.spec table.specTable .color_gray {background:#666666;}
.spec table.specTable .color_ne {background:#e1ff00;}
.spec table.specTable .color_mt {background:#5ad9e4;}


.spec table.specTable select {font-size: 16px; padding: 2px; border: 1px #c8c8c8 solid; color: #333333; letter-spacing: -1px;}

.comment {max-width:1000px;margin:0 auto;padding-top: 15px;clear:both;text-align: left;}


/* 인증 & 구성품 */

.certified {width:100%;height: 190px;position: relative;background:#eeeeee;}
.certified .kc {max-width:1000px;margin:0 auto;padding: 1% 0;}
.certified .kc > div {width:33.3333%;height: 66.66px;display:flex;align-items: center;float: left;}
.certified .kc img {width: 15%;float:left;}
.certified .kc p {width: 85%;font-size: 16px;font-weight: 500; color:#4e4e4e;}


.item {width:100%;height: 650px; position: relative; text-align: center; background:#ffffff;}
.item > .textBox {padding-top: 130px; padding-bottom: 50px;}

.item .itemBox {display: flex; justify-content: center;}
.item .itemBox > div {margin-right: 15px;}
.item .itemBox > div img {box-shadow: 0 0 20px #c7c7c7; border-radius:30px;}
.item .itemBox > div p {font-size: 18px; font-weight: 600; margin-top: 15px; color: #555555;}

.item .comment {margin-top: 30px; }















/* BASIC css end */