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


@media all and(orientation: portait){
	/* Portrait 세로모드일 때 적용할 CSS */
}

@media all and(orientation: landscape){
	/* landscape 가로모드일 때 적용할 CSS */
}

.tb-left {text-align:left}

/*채널톡 가리기*/
div#ch-plugin {display:none !important;}

.textBox {margin: 0 auto;padding-bottom: 1%; max-width:1000px;}
.textBox h3 {font-size: 4vmin;font-weight: 500;letter-spacing: -2px;margin-bottom: 10px;}
.textBox h2 {font-size: 6vmin; font-weight: 700; letter-spacing: -2px; padding:5px 0 8px 0; line-height: normal;}
.textBox h1 {font-size: 7vmin;font-weight: 900;letter-spacing: -2px;margin-bottom: 13px;}
.textBox p {font-size: 3.5vmin;letter-spacing: -1px;}
.textBox p.sub1 {font-size: 3.5vmin;letter-spacing: -1px;opacity:0.9;padding-top: 1.5%;}
.textBox p.sub2 {font-size: 3.4vmin;line-height:120%;letter-spacing: -1px;opacity:0.7;}

.gray {color:#9e9e9e; font-size:0.9em;}
.lightgray {color:#f9f9f9;}
.back_bk {background:#000000;}
.right_text {text-align: right;}
.center_text {text-align: center;}
.comment {font-size: 2.7vmin; color:#666666;}
.textBox_ul {font-size: 3.5vmin; letter-spacing: -1px; margin-top: 30px; line-height: 150%; font-weight: 300;}
.radius {border-radius:20px;}
.width80 {width:80%;}
.width90 {width:90%;}
.width100 {width:100%;}


div.wrap {position: relative; width: 100%;}
div.wrap div.contentWrapper {max-width: 600px;overflow-x: hidden; border-left: 1px #e1e1e1 solid; border-right: 1px #e1e1e1 solid; margin: 0 auto;}

.intro, .detail_popup, .frame, 
.battery, .mileage, .display, 
.driving_mode, .light, .suspension, 
.saddle, .motor, .handle, .size, 
.spec, .certified, .item {}


/* 구역별 높이*/
.intro {height: 120vmin;}
.detail_popup {height:115vmin;}
.frame {height: 95vmin;}
.battery {/* height: 410vmin; */padding-bottom: 15%;}
.mileage {height: 75vmin;}
.display {/* height: 740vmin; */padding-bottom: 15%;}
.driving_mode {/* height: 165vmin; */}
.light {/* height: 270vmin; */padding-bottom: 15%;}
.suspension {/* height: 150vmin; */}
.tire {/* height: 160vmin; */padding-bottom: 15%;}
.saddle {/* height: 400vmin; */padding-bottom: 20%;}
.motor {}
.handle {/* height: 245vmin; */}
.size {/* height: 150vmin; */}
.spec {}
.certified {}
.item {/*height: 90vmin;*/padding-bottom: 10%;}
  

/*퀵 네비*/
.quick-nav {height: 0; position: sticky; top: 0; left: 0; padding-left: 20%; z-index: 9999; opacity: 1;}
.quick-nav .nav-list {display: flex; transform: rotate(90deg) translateY(-50%); transform-origin: left center;}
.quick-nav li {font-size: 18px; transition: color 0.5s; cursor: pointer; position: relative; padding-right:1%; padding-left:1%; border-right:1px #427d96 solid;}
.quick-nav li a {color:#999999;}
.quick-nav li:last-of-type {border:none}


/* 인트로 */
.intro {background:url('https://motovelo.diskn.com/w7TjgYWjt4') no-repeat center / cover;width:100%;position: relative;display:flex;align-items:flex-end;}
.intro .intro_bike {width: 80%;position: absolute;transform: translate(-50%, 0);left: 54%;top: 50px;z-index:10;animation-name: intro_bike;animation-duration: 7s;animation-timing-function: ease-in-out;animation-iteration-count:infinite;}
.intro .intro_logo {width: 100%;position: absolute;transform: translate(-50%, 0);left: 48%;top: 70px;animation-name: intro_logo;animation-duration: 7s;animation-timing-function: ease-in-out;animation-iteration-count:infinite;}

@keyframes intro_bike {
  0% {left:50%; opacity:0;}
  9% {left:50%; opacity:0;}
  20% {left:54%; opacity:1;}
  95% {opacity:1;}
  100% {opacity:0;}
}

@keyframes intro_logo {
  0% {left:55%; opacity:0;}
  10% {left:48%; opacity:0.9;}
  95% {opacity:0.9;}
  100% {opacity:0;}
}

.logo_swipe {width: 100%; margin: 0 auto; text-align: center; padding: 60px 0 100px 0; position: relative; background:#f7f7f7;}
.logo_swipe img {width: 150px;}
.logo_swipe i {font-size: 28px; position: absolute;transform: translate(-50%, -50%);left: 50%; top: 60%; animation-name: arrow_down; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count:infinite;}

@keyframes arrow_down {
  0% {top:60%; opacity:1;}
  50% {top:70%; opacity:0.6;}
  100% {top:60%; opacity:1;}
}



/* 디테일 팝업 */
.detail_popup {padding: 60px 0 50px 0;background:#f7f7f7;position: relative;width: 100%;}
.detail_popup div {text-align:center; position: relative;}
.detail_popup .modalWrap_img {position:absolute;transform: translate(-50%, 0);left: 50%;top: 220px;width: 100%; max-width:1000px;}
.detail_popup .modalWrap_img img {width: 100%;}

.detail_popup a.button {display:inline-block;padding: 1% 2%;text-decoration:none;color:#fff;background: #7da4df;border-radius: 30px;position: absolute;opacity: 0.9;font-size: 3vmin;letter-spacing:-1px;transition: 0.3s;}
.detail_popup a.button:hover {opacity:1; background: #598edf;}

.detail_popup a.modal0 {left: 65%;top: 3%;}
.detail_popup a.modal1 {left: 40%;top: 10%;}
.detail_popup a.modal2 {left: 5%;top: 25%;}
.detail_popup a.modal3 {left: 71%;top: 27%;}
.detail_popup a.modal4 {left: 39%;top: 47%;}
.detail_popup a.modal5 {left: 73%;top: 44%;}
.detail_popup a.modal6 {left: 53%;top: 59%;}
.detail_popup a.modal7 {left: 16%;top: 71%;}
.detail_popup a.modal8 {left: 75%;top: 67%;}
.detail_popup a.modal9 {left: 38%;top: 29%;}
.detail_popup a.modal10 {left: 48%;top: 78%;}
.detail_popup a.modal11 {left: 20%;top: 79%;}
.detail_popup a.modal12 {left: 77%;top: 75%;}
.detail_popup a.modal13 {left: 14%;top: 91%;}

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

.modal-con {width: 80%;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: 1.2em;font-weight: 500;padding: 10px;background: #555555;color: #fff;border-radius: 15px 15px 0 0;letter-spacing: -1px;}
.modal-con .con {font-size: 1em;line-height:1.3;padding: 30px;}
.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: 40px;}
.modal-con .con p.parts_link a {padding: 10px 16px;font-weight:500;border-radius: 50px;background: #7da4df;color: #ffffff;font-size: 1em;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 {background:url('https://motovelo.diskn.com/t7TjgYWDYe') no-repeat center / cover;width:100%;position:relative;overflow:hidden;}
.frame .textBox {padding: 20% 4% 0 4%;position: relative;z-index: 10;}
.frame img {position:absolute;transform: translate(-50%, 0);left: calc(50% + 150px);top: 20%;animation-name: frame_bike;animation-duration: 6s;animation-timing-function: ease-out;animation-iteration-count: infinite;width: 153%;}

@keyframes frame_bike {
  0% {left: calc(50% + 600px);}
  30% {left: calc(50% + 150px);}
}


/* 배터리 */
.battery {background-image: url('https://motovelo.diskn.com/M7Tji38aQP');background-color: #000000;background-repeat: no-repeat;background-position: top;background-position-y: 4.5%;background-size: contain;width:100%;position:relative;}
.battery > .textBox {padding-top: 30%; text-align: center;}
.battery .textImg {margin-top: 15px;text-align: center;}
.battery .battery_move {position: absolute;transform: translate(-50%, 0);width: 80%;left: 50%;top: 15%;animation-name: battery_move;animation-duration: 4s;animation-timing-function: ease-out;animation-iteration-count: infinite;}

@keyframes battery_move {
  0% {top: 15%;}
  50% {top: 16%;}
  100% {top: 15%;}
}

.battery .battery_text {width: 100%; max-width:1000px; margin: 0 auto;position: relative;display: flex;flex-direction: column;}
.battery .battery1, .battery .battery2 {width: 80%;margin: 0 auto;margin-bottom: 10%;}

.battery .battery3 {width: 80%;margin: 0 auto;}
.battery .battery_video {margin:20px 0;}
.battery .battery_video img {width:100%;}

.battery_video {width: 100%;position: relative;padding-bottom: 56.25%; /* 16/9 ratio */height: 0;overflow: hidden;margin: 0;}
.battery_video iframe,
.battery_video object,
.battery_video embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/* 주행거리 */
.mileage {width:100%;background:url('https://motovelo.diskn.com/N7ThJd8fOa') no-repeat center;background-size: cover;position:relative;}
.mileage::before {position: absolute; content: ""; top:0px; left:0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);}
.mileage .textBox {width: 100%;position: absolute;transform: translate(-50%, -50%);top: 50%;left: 50%;z-index: 9999;text-align: center;}

/*
.mileage .mileage_video {position: relative; height: 0; padding-bottom: 56.25%; opacity:0.2;}
.mileage .mileage_video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
*/

/* 디스플레이 */
.display {background-image: url('https://motovelo.diskn.com/m7TjgZ3QVI');background-repeat: no-repeat;background-position: top;background-position-y: 5%;/*background-blend-mode: hard-light*/background-size: contain;width:100%;position:relative;}
.display > .textBox {padding-top: 20%;text-align: center;}
.display .display_move {width: 90%; position: absolute;transform: translate(-50%, 0);left: 50%;top: 7.2%;animation-name: display_move;animation-duration: 4s;animation-timing-function: ease-out;animation-iteration-count: infinite;}

@keyframes display_move {
  0% {top: 7.2%;}
  50% {top: 7.5%;}
  100% {top: 7.2%;}
}

.display .display_text {margin: 0 auto; max-width:1000px;}
.display .display_con {width: 100%;margin: 0 auto;position: relative;display: flex;flex-direction: column;}
.display .display_con .textBox {/* width: 100%; */margin-top: 8%;text-align: center;}
.display .display_con .textImg {position: relative;width: 70%;/* height: 0; *//* padding-top: 78%; */margin: 0 auto;}
.display .display_con .textImg img {width:100%}
.display .display_con .textImg iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

.display .display_con .speed {width: 80%;}
.display .display_con:nth-child(1) {margin-bottom:0px;}
.display .display_con:nth-child(4) {margin-bottom:0px;}
.display .comment {width:90%; text-align:right; margin: 0 auto; padding:15px 0 50px 0;}
.display .textBox_ul li span {font-style: italic;font-weight: 600; text-shadow: 0 0 3px #ffffff;padding-right: 5px;}
.display .textBox .dp_btn {width: 25px;}



/* 파스 & 스로틀 */
.driving_mode {width:100%;position:relative;}
.driving_mode > .textBox {padding-top: 20%;text-align: center;}

     /* 탭 전체 스타일 */
.tabs, .tabs2 {margin-top: 50px;padding: 10% 0 5% 0;width: 95%;margin: 0 auto; max-width:1000px;}
.tabs h2, .tabs2 h2 {font-size: 4vmin;letter-spacing: -1px;font-weight: 500;}
.tabs h2 span, .tabs2 h2 span {font-size: 3.5vmin;font-weight: 300;padding: 0 5px;}
.tabs p, .tabs2 p {font-size: 3.2vmin;font-weight: 200;letter-spacing: -1px;color:#e1e1e1;}

     /* 탭 스타일 */
.tab_item, .tab_item2 {
            width: calc(100%/2);
            border-bottom: 2px solid #666666;
            line-height: 130%;
            padding-bottom: 8px;
            font-size: 3.5vmin;
            text-align: center;
            color: rgb(0 93 129);
            display: block;
            float: left;
            text-align: center;
            font-weight: 400;
            transition: all 0.2s ease;
            cursor:pointer
            }
            
.tab_item:hover, .tab_item2:hover {opacity: 0.75;}

     /* 라디오 버튼 UI삭제*/
input[name="tab_item"], input[name="tab_item2"] {display: none;}

     /* 탭 컨텐츠 스타일 */
.tabs .tab_content, .tabs2 .tab_content2 {display: none;color: #ffffff;padding: 30px 0;clear: both;overflow: hidden;text-align: center;line-height: 200%;}

     /* 선택 된 탭 콘텐츠를 표시 */
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content {display: block;}

     /* 선택 된 탭 콘텐츠를 표시 */
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content {display: block;}

     /* 선택된 탭 스타일 */
.tabs input:checked + .tab_item, .tabs2 input:checked + .tab_item2 {color: #00adef; border-bottom: 2px #f1f1f1 solid;}

.tabs_video {position: relative;padding-bottom: 56.25%; /* 16/9 ratio */height: 0;overflow: hidden;margin: 15px 0;}
.tabs_video iframe,
.tabs_video object,
.tabs_video embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.q_box_p {margin-top: 10px;text-align: left;padding-left: 20px;line-height: 200%;}
.q_box {background: #005678;padding: 4px 10px;border-radius: 20px;font-weight: 400;}



/* 전방라이트 & 후미등 */
.light {width:100%;position:relative;}
.light > .textBox {padding-top: 15%;padding-bottom: 7%;text-align: center;}

.head_light {animation-name: head_light; animation-duration: 6s;animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
.rear_light {animation-name: rear_light; animation-duration: 6s;animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
@keyframes head_light {
  0% {color:#e1e1e1;}
  30% {color:#FFFDA8; text-shadow: 0 0 5px #FFFDA8;}
  70% {color:#FFFDA8; text-shadow: 0 0 5px #FFFDA8;}
  100% {color:#e1e1e1;}
}
@keyframes rear_light {
  0% {color:#e1e1e1;}
  30% {color:#FF9797; text-shadow: 0 0 5px #FF9797;}
  70% {color:#FF9797; text-shadow: 0 0 5px #FF9797;}
  100% {color:#e1e1e1;}
}
.light .twentytwenty-container {width: 90%;margin:0 auto;margin-top:15px;border-radius: 20px;}
.light .slide_info {position:relative;text-align: center;color: #f9f9f9;background: #3e3e3e;padding: 10px 0px;font-size: 3.5vmin;width: 280px;margin: 0 auto;border-radius: 50px;margin-top: 30px;}
.light .slide_info i {position: absolute; left:15px; top:13px; animation-name: slide_hand; animation-duration: 2s;animation-timing-function: ease-in-out; animation-iteration-count: infinite;}


@keyframes slide_hand {
  0% {left:15px;}
  50% {left:35px;}
  100% {left:15px;}
}


.tab-container2 {width: 95%;margin: 0 auto;position: relative;}
.tab-container2 .tab-menu {list-style: none;padding: 0;margin: 0;position: absolute;right: 3%;top: 0;z-index: 1;width: 20%;}
.tab-container2 .tab-menu li {text-align: center;margin: 10px 0;width: 100%;}
.tab-container2 .tab-menu li:last-child{margin-bottom: 0;}
.tab-container2 .tab-menu a {
    display: block;
    text-decoration: none;
    width: 100%;
    border-radius: 80px;
    font-size: 3.8vmin;
    line-height: 320%;
    font-weight: 600;
    color: #3674ed;
    background: #cde4ff;
    box-shadow: 0px 2px 10px 0px rgb(62 74 91 / 40%);
    transition: all 0.4s;
    opacity:0.5;
    }
.tab-container2 .tab-menu a.active {font-weight: 600;background: #3674ed;color: #ffffff;opacity:1;}
.tab-container2 .tab-content {display: none;width: 100%;/* position: relative; *//* padding-bottom: 56.25%; *//* height: 0; *//* overflow: hidden; *//* margin: 0; */}
.tab-container2 .tab-content img {width:100%;}
.tab-container2 .tab-content.active {display: block;}




.tab-container {width: 95%;margin: 0 auto;position: relative;}
.tab-container .tab-menu {list-style: none;padding: 0;margin: 0;position: absolute;right: 3%;top: 0;z-index: 1;width: 20%;}
.tab-container .tab-menu li {text-align: center;margin: 10px 0;width: 100%;}
.tab-container .tab-menu li:last-child{margin-bottom: 0;}
.tab-container .tab-menu a {
    display: block;
    text-decoration: none;
    width: 100%;
    border-radius: 80px;
    font-size: 3.8vmin;
    line-height: 320%;
    font-weight: 600;
    color: #3674ed;
    background: #cde4ff;
    box-shadow: 0px 2px 10px 0px rgb(62 74 91 / 40%);
    transition: all 0.4s;
    opacity:0.5;
    }
.tab-container .tab-menu a.active {font-weight: 600;background: #3674ed;color: #ffffff;opacity:1;}
.tab-container .tab-content {display: none;width: 100%;/* position: relative; *//* padding-bottom: 56.25%; *//* height: 0; *//* overflow: hidden; *//* margin: 0; */}
.tab-container .tab-content img {width:100%;}
.tab-container .tab-content iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.tab-container .tab-content.active {display: block;}





/* 서스펜션 */
.suspension {width:100%; background:url('https://motovelo.diskn.com/s7TjgZ6gkv') no-repeat center; background-size: revert; background-color:#000000; position:relative;}
.suspension > .textBox {padding-top: 15%; text-align: center;}


/* 타이어 */
.tire {width:100%;}
.tire > .textBox {padding-top: 15%;text-align: center;}

.origin {position: absolute;width: 100%;height:100%;box-shadow: 0 0 30px 30px #000 inset;z-index:900;}

.pd_tire_warp {width:90%; max-width: 1000px;margin:0 auto;position:relative;overflow:hidden}

.pd_tire > img {/* position: absolute; *//* left: 50%; *//* top: calc(50% + 0px); *//* transform: translate(-50%, -50%) scale(0.15); */opacity:1;transition:1s ease-in-out;width: 90%;}
.graph-wrap {display:flex;opacity:0;align-content: center;justify-content: center;/* margin-top: 78px; */position:relative;transition:1s ease-in;z-index:9998;}
/*
.pd_tire_warp:hover .pd_tire > img {left: calc(50% - 738px);top: calc(50% - 402px);transform: translate(-50%, -50%) scale(0.35); opacity:0.6;}
.pd_tire_warp:hover .graph-wrap {opacity:1;}
.circle-graph {position:relative;}*/

.pd_tire {position: relative;text-align: center;height: 100%;}
.circle-percent {text-align: center;position:absolute;top:56%;left:50%;transform:translate(-50%, -50%);color:#ffffff;font-size: 6vmin;letter-spacing: -2px;width: 100%;font-weight: 500;text-shadow: 3px 3px 10px #000000;}
.circle-percent > p.wide_tire {font-size: 5vmin;font-weight: 300;margin-bottom: 12px;}


/* 안장 */
.saddle {width:100%;background:url('https://motovelo.diskn.com/I7TjgZc0KU') no-repeat center;background-position-y: 13%;background-size: contain;background-color:#000000;position:relative;}
.saddle > .textBox {padding-top: 20%;text-align: center;}
.saddle_img {width: 90%;margin:0 auto;margin-top: 75%;color:#ffffff;}
.saddle_img img {width:100%;}

.saddle_img h2 {text-align: center;font-size: 5vmin;letter-spacing: -2px;font-weight: 600;padding: 20px 0;}
.saddle_img p {color: #b2b2b2;letter-spacing: -1px;}
.saddle_img .size_table1, .saddle_img .size_table2 {display: flex;margin-bottom:40px;flex-direction: column;align-items: center;padding: 0 4%;}
.saddle_img .size_table1 div {width: 100%;}
.saddle_img .size_table1 p {}

.saddle table.sizeTable {width: 100%;text-align: center;margin-bottom: 20px;}
.saddle table.sizeTable td, table.sizeTable th {border: 1px solid #5e5e5e; padding:8px 0;}
.saddle table.sizeTable th:nth-child(1), 
.saddle table.sizeTable th:nth-child(4),
.saddle table.sizeTable td:nth-child(1), 
.saddle table.sizeTable td:nth-child(4){border-right:none; border-left:none;}
.saddle table.sizeTable tbody td {font-size: 3.2vmin;color: #FFFFFF;}
.saddle table.sizeTable thead {  }
.saddle table.sizeTable thead th {font-size: 3.2vmin;font-weight: normal;color: #FFFFFF;text-align: center;}


/* 모터 */
.motor {position: relative;}
.motor > .textBox {padding: 10% 0 6% 0;text-align: center;width: 100%;}
.motor .motor_video {position: relative; height: 0; padding-bottom: 56.25%; opacity:0.4;}
.motor .motor_video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.motor .motor_spec {position: absolute;transform: translate(-50%, -50%);bottom: -25px;left: 50%;z-index: 9999;text-align: center;width: 100%;margin: 0 auto;display: flex;flex-direction:column;}

.motor .motor_spec div {width:100%;}
.motor .motor_spec div.motor_txt1 {}
.motor .motor_spec div.motor_txt2 {text-align: left;padding: 1% 0 0 7%;}

.motor .motor_spec p {width:33.3333%;letter-spacing: -2px;color:#ffffff;font-size: 4vmin;font-weight:300;line-height: 100%;float:left;}
.motor .motor_spec p span.motor_text1 {font-size: 6vmin;font-weight:600;}
.motor .motor_spec p span.motor_text2 {}
.motor .motor_spec div.motor_txt2 .comment {color: #c8c8c8;}




/* 브레이크 & 변속기 */
.handle {width:100%;position: relative;}
.handle .brake, .handle .shift {width: 100%; max-width:1000px; margin:0 auto;}
.handle .textBox {padding-top: 20%;text-align: center;}
.handle .brake {background:url('https://motovelo.diskn.com/d7Tji3lSUw') no-repeat center;background-position-y: 50%;background-size: contain;background-color:#000000;}
.handle .brake div {width:100%; text-align:center;}
.handle .brake div img {width:90%;}

.handle_video {position: relative;padding-bottom: 50.25%; /* 16/9 ratio */height: 0;overflow: hidden;margin: 0 auto;width: 90%;}
.brake .handle_video {margin-top: 35%;}
.shift .handle_video {margin-top: 6%;}
.handle_video iframe,
.handle_video object,
.handle_video embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}



/* 패키지 */
.package {width:100%;padding-bottom: 100px;}
.package .textBox {padding-top:130px; text-align:center; }
.package .package_wrap {width:100%; margin:0 auto;}
.package .package_wrap img {width:100%}
.package .comment {padding-left: 3%;color: #b9b9b9;}




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

.size table.sizeTable {width: 90%;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: 1.2em;font-weight:500;color: #000000;padding: 20px 0;}
.size table.sizeTable thead { }
.size table.sizeTable thead th {font-size: 1.2em;font-weight: normal;color: #000000;text-align: center;padding: 10px 0;}
.size .comment {text-align: right;max-width: 90%;margin: 0 auto;padding-top: 1%;}


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

.spec .specTable_wrap {max-width: 1000px; margin: 0 auto;}
.spec table.specTable {float:left;}
.spec table.iconTable {width: 20%;font-weight:500;}
.spec table.modelTable {width: calc(80%/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;letter-spacing:-1px;color:#333333;height: 60px;}
.spec table.specTable th,
.spec table.specTable td {border-right:none;border-left:none;height: 70px;}

.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; }

.spec table.specTable tr:nth-child(1) td {font-size: 6vmin;font-weight:900;}
.spec table.specTable tr:nth-child(2) td {}

.spec table.specTable thead tr th {width: 20%;}
.spec table.specTable thead tr th img {height: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: 3vmin;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_bk {background:#000000;}
.spec table.specTable .color_gray {background:#666666;}
.spec table.specTable .color_ne {background:#e1ff00;}

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

.spec .comment {width: 100%;max-width: 1000px;margin:0 auto;padding: 10px 0 0 8px;clear:both;text-align: left;line-height: 150%;}



/* 인증 & 구성품 */

.certified {width:100%;height: auto;position: relative;display: flex;background:#eeeeee;align-items: center;padding-top: 12px;}
.certified .kc {max-width:1000px;margin:0 auto;padding: 1% 0 1% 2%;}
.certified .kc > div {width: 50%;margin-bottom: 12px;display:flex;align-items: center;float: left;}
.certified .kc img {width: 13%;float:left;}
.certified .kc p {width: 85%;font-size: 2.5vmin;font-weight: 500;color:#4e4e4e;line-height: 110%;}


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

.item .itemBox {display: flex;justify-content: center;width: 100%;}
.item .itemBox > div {margin-right: 5px;width: 30%;}
.item .itemBox > div:last-child {margin-right: 0px;}
.item .itemBox > div img {width: 100%;}
.item .itemBox > div p {font-size: 3vmin;font-weight: 600;margin-top: 15px;color: #555555;}

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




@media (min-width: 600px) {
  
  .intro {height: 100vmin;}
  .detail_popup {height: 90vmin;}
  .frame {height: 90min;}
  .battery {height: 330vmin;}
  .mileage {height: 60vmin;}
  .display {height: 650vmin;}
  .driving_mode {height: 140vmin;}
  .light {height: 230vmin;}
  .suspension {height: 125vmin;}
  .tire {height: 150vmin;}
  .saddle {height: 280vmin;}
  .motor {}
  .handle {height: 225vmin;}
  .size {height: 105vmin;}
  .spec {}
  .certified {}
  .item {height: 80vmin;}
 

  .width80 {width:60%;}
  .width90 {width:70%;}
  .width100 {width:80%;}
  
  .textBox {}
  .textBox h3 {font-size: 3vmin;margin-bottom: 5%;}
  .textBox h2 {font-size: 6vmin;}
  .textBox h1 {font-size: 6vmin;margin-bottom: 4%;}
  .textBox p {font-size: 2.7vmin;}
  .textBox p.sub1 {font-size: 3vmin;line-height: 130%;}
  .textBox p.sub2 {font-size: 2.5vmin;}
  .comment {font-size: 1.8vmin;}
  .textBox_ul {font-size:2.3vmin;}
  
  .detail_popup a.button {font-size:1em}
  .detail_popup a.modal1 {left:47%;}
  .light .slide_info {font-size: 1.4em; width:370px;}

  .battery .battery1, .battery .battery2 {text-align: center;}

  .tab_item, .tab_item2 {font-size: 1.8em;}
  .tabs h2, .tabs2 h2 {font-size: 2em; padding-bottom:10px}
  .tabs h2 span, .tabs2 h2 span {font-size: 0.8em;}
  .tabs p, .tabs2 p {font-size: 1.8em;}

  p.circle-percent {font-size: 4vmax;}
  p.circle-percent span {font-size: 3vmax;}

  .saddle_img {margin-top:50%;}
  
  .motor .motor_spec p {font-size: 3vmin;line-height: 115%;}
  .motor .motor_spec p span.motor_text1 {font-size: 5vmin;}

  .spec table.specTable tr:nth-child(1) td {font-size: 4vmin;line-height: 100%;height: 100px;}
  
  .spec table.specTable .comment1 {font-size: 1.8vmin;}
  .spec table.specTable .comment2 {font-size:12px;}
  .spec table.specTable .comment3 {font-size:13px;}
  
  .spec table.specTable thead tr th {height:150px;}
  .spec table.specTable tr:nth-child(1) td {height:100px;}
  .spec .specTable_wrap {width:90%}
  
  .saddle table.sizeTable {width:80%;margin: 0 auto 20px auto;}
  .saddle_img h2 {font-size: 3.5vmin;}
  .saddle table.sizeTable tbody td {font-size: 2vmin;}
  .saddle table.sizeTable thead th {font-size: 2vmin;}
  .saddle_img .size_table1 p {width: 80%; margin: 0 auto;}
  
  .certified .kc img {width:10%;}
  .certified .kc p {font-size:1.3vmax;}
  
  .item .itemBox {width: 80%;margin: 0 auto;}
  .certified .kc {padding:1% 0 1% 10% }
  
  .display .textBox .dp_btn {width:35px;}
  .item .itemBox > div p {font-size: 2vmin}

}


@media (min-width: 1001px) {
.intro .intro_bike {width:60%;}
.intro .intro_logo {width:80%;}
.frame img {width:120%;}
.battery > .textBox {padding-top:12%;}

.detail_popup {height:900px;}
.battery {height:2400px;}
.display {height:3870px;}
.suspension {height:150vmin}
.tire {height:170vmin}



.battery .battery_text {flex-direction: row;}

.textBox h3 {font-size: 3vmin;margin-bottom: 5%;}
.textBox h2 {font-size: 6vmin;}
.textBox h1 {font-size: 4vmin;margin-bottom: 4%;}
.textBox p {font-size: 2.5vmin;}
.textBox p.sub1 {font-size: 2.5vmin;line-height: 130%;}

.comment {font-size: 1.2vmin;}
.textBox h2 {font-size: 4vmin;}
.textBox p.sub2 {font-size: 2.4vmin;}


.circle-percent {font-size: 55px;line-height: 100%;}
.circle-percent > p.wide_tire {font-size: 30px;}


/* 디스플레이 */
.display {background-image: url('https://motovelo.diskn.com/m7TjgZ3QVI');background-repeat: no-repeat;background-position: top;background-position-y: 5%;background-size: contain;width:100%;position:relative;}
.display > .textBox {padding-top: 20%;text-align: center;}
.display .display_move {width: 75%;position: absolute;transform: translate(-50%, 0);left: 50%;top: 11%;animation-name: display_move;animation-duration: 4s;animation-timing-function: ease-out;animation-iteration-count: infinite;}

@keyframes display_move {
  0% {top: 11%;}
  50% {top: 11.3%;}
  100% {top: 11%;}
}

.display .display_text {margin: 0 auto;max-width:1000px;}
.display .display_con {width: 100%;margin: 0 auto;position: relative;display: flex;margin-bottom: 100px;flex-direction: row;justify-content: space-between;}
.display .display_con .textBox {width: 500px;margin-top: 0;padding-left: 20px;text-align: start;}
.display .display_con .textImg {position: relative;width: 500px;height: 0;margin: 0 auto;padding-bottom: 53.25%;padding-top: 0;}
.display .display_con .textImg iframe {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}

.display .display_con .speed {width: 80%;}
.display .display_con:nth-child(1) {margin-bottom:0px;}
.display .display_con:nth-child(4) {margin-bottom:0px;}
.display .comment {width:90%;text-align: left;padding:15px 0 50px 0;}
.display .textBox_ul li span {font-style: italic;font-weight: 600; text-shadow: 0 0 3px #ffffff;padding-right: 5px;}
.display .textBox .dp_btn {width: 35px;}



    


}

/* BASIC css end */