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

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

.contentWrapper {background:#fff;}

/* textBox */
.textBox {width: 100%;max-width:1200px;margin: 0 auto;padding-bottom: 50px;position: relative;}
.textBox h3 {font-size: 30px; font-weight: 500; letter-spacing: -2px;}
.textBox h2 {font-size: 47px; font-weight: 700; letter-spacing: -2px; padding:5px 0 12px 0;}
.textBox h1 {font-size: 68px;font-weight: 900;letter-spacing: -2px;padding-bottom: 20px;}
.textBox p {font-size: 24px;letter-spacing: -1px;font-weight: 400;}
.comment {width: 1200px;margin: 0 auto;font-size: 16px;letter-spacing: -1px;color:#666666;}
.textBox_line {position: absolute; width: 360px; border-bottom: 3px #333 solid;}

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

/* align & padding */
.radius {border-radius:30px;}
.text-C {text-align:center;}
.text-L {text-align:left;}
.text-R {text-align:right;}

.pdt-200 {padding-top:200px;}
.pdt-150 {padding-top:150px;}
.pdt-140 {padding-top:140px;}
.pdt-120 {padding-top:120px;}
.pdt-100 {padding-top:100px;}
.pdt-75 {padding-top:75px;}
.pdt-50 {padding-top:50px;}
.pdt-30 {padding-top:30px;}
.pdt-25 {padding-top:25px;}
.pdt-15 {padding-top:15px;}
.pdt-10 {padding-top:10px;}

.pdb-200 {padding-bottom:200px;}
.pdb-150 {padding-bottom:150px;}
.pdb-140 {padding-bottom:140px;}
.pdb-120 {padding-bottom:120px;}
.pdb-100 {padding-bottom:100px;}
.pdb-75 {padding-bottom:75px;}
.pdb-50 {padding-bottom:50px;}
.pdb-30 {padding-bottom:30px;}
.pdb-25 {padding-bottom:25px;}
.pdb-15 {padding-bottom:15px;}
.pdb-10 {padding-bottom:10px;}


/* 상세페이지 */


/* 인트로 */
.intro {width:100%; height:1080px; position:relative;}
.intro > div {margin:0 auto; width:1920px;}
.intro .intro_bike {position: absolute; top: 12%; left: 14%; z-index: 1;}
.intro .intro_bg_text {position: absolute; top: 5.6%; left: 49.7%;}
.intro .intro_bg_circle {position: absolute; top: 13.5%; left: 20.6%;}
.intro .intro_spec {position: absolute;width: 1920px;height: 1080px;top: 0;}
.intro .intro_spec div {width: 27.8%;position: absolute;right: 0;top: 23.5%;}
.intro .intro_spec div p {width: 75%;letter-spacing: -1px;color: #fff;border-bottom: 2px #fff solid;margin-bottom: 22px;}
.intro .intro_spec div p span.intro_spec_text1{font-size: 31px; font-weight: 600;}
.intro .intro_spec div p span.intro_spec_text2{font-size: 100px;}
.intro .intro_spec div p span.intro_spec_text3{font-size: 30px;}
.intro .intro_spec div p span {font-size: 20px; line-height: 106%;}
.intro .intro_spec div span.intro_spec_comment {color: #fff; font-size: 16px;}



/* 디테일 팝업 */
.detail_popup {background:#f7f7f7;position: relative;height: 1200px;}
.detail_popup div {position: relative;}
.detail_popup .modalWrap_img {position:absolute;transform: translate(-50%, 0);left: 50%;top: 435px;}
.detail_popup .modalWrap_img img {}

.detail_popup a.button{display:inline-block;padding: 6px 12px;text-decoration:none;color:#fff;background: #2e577e;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: #18334d;}

.detail_popup a.modal0 {left: 705px;top: 4px;}
.detail_popup a.modal1 {left: 714px;top: 47px;}
.detail_popup a.modal2 {right: 65px;top: 347px;}
.detail_popup a.modal3 {left: 390px;top: 300px;}
.detail_popup a.modal4 {right: 150px;top: 443px;}
.detail_popup a.modal5 {right: 130px;bottom: 235px;}
.detail_popup a.modal6 {left: 150px;bottom: 175px;}
.detail_popup a.modal7 {right: 6px;bottom: 170px;}
.detail_popup a.modal8 {left: 610px;top: 585px;}
.detail_popup a.modal9 {left: 187px;bottom: 29px;}
.detail_popup a.modal10 {left: 405px;top: 210px;}
.detail_popup a.modal11 {left: 225px;bottom: 135px;}

#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 {height: 1450px;background: url(https://motovelo.diskn.com/n7U64ST2Pp);background-size: cover;background-repeat: no-repeat;}

.frame_color .color-container {cursor: pointer;width: 400px;margin: 0 auto;position: relative;}
.frame_color .color-content {position: relative;width: 1920px;height: 815px;margin: 0 auto;display: none;}
.frame_color .color-content.active {display: block;}
.frame_color .color-content img.color_img {position: absolute;bottom: 16px;left: 450px;transform: rotateZ(0deg);transform-origin:bottom left;animation-name: color_move;animation-duration: 7s;animation-timing-function: ease-out;}
.frame_color .color-content img.color_shadow {position: absolute;bottom: 0;left: 427px;}
.frame_color .color-content img.color_text {position: absolute; top: 100px; left: 205px;}

.frame_color .color-tab {position: absolute; width: 400px; height: 155px;}

.frame_color .color-tab:nth-child(1) img {top:0;left: 50%;transform: translate(-110px, 0px);}
.frame_color .color-tab:nth-child(2) img {top:0;left: 50%;transform: translate(-32.5px, 0px);}
.frame_color .color-tab:nth-child(3) img {top:0;left: 50%;transform: translate(46px, 0px);}

.frame_color .color-tab > div {position:absolute;width: 400px;top: 90px;left: 50%;transform: translate(-200px, 0);text-align: center;}
.frame_color .color-tab img {position: absolute; z-index: 5; transition:.2s;}
.frame_color .color-tab p, .frame_color .color-tab hr {display:none; }

.frame_color .color-tab.active {border-bottom: none;}
.frame_color .color-tab.active img {top:-17px;animation-name: color_active;animation-duration: 2s;animation-timing-function: ease-in-out;animation-iteration-count: infinite;}
.frame_color .color-tab.active hr {display: block;width: 105px;margin: 0 auto;}
.frame_color .color-tab.active p {display:block;width: 400px;text-align:center;font-size: 28px;margin-top: 20px;}

@keyframes color_move {
    0% {opacity:0; left:300px; transform: rotateZ(0deg);}
    5% {opacity:1; left:460px; transform: rotateZ(-0.5deg); }
    6% {transform: rotateZ(0.5deg); }
    7% {left:450px; transform: rotateZ(0deg); }
}

@keyframes color_active {
    0% {top:-17px;}
    50% {top:-25px;}
    100% {top:-17px;}
}




/* 프레임 */
.frame {position: relative;width: 100%;height: 950px;margin: 0 auto;background: url(https://motovelo.diskn.com/r7U64T1W07), linear-gradient(to top, rgb(252 252 252), rgb(254 254 254));background-size: initial;background-position: bottom center;background-repeat: no-repeat;}
.frame img {position: absolute;left: 50%;transform: translate(-960px, 0px);}
.frame .textBox_line {top: 10%; right: 27%;}



/* 배터리 */
.battery1 {width: 1920px;height: 1111px;margin: 0 auto;}
.battery1 .battery1_warp {position: relative;}
.battery1 .battery1_warp img.bat_text {position: absolute;top: 120px;left: 184px;}
.battery1 .battery1_warp img.bat_img {position: absolute;top: 6px;right: 353px;z-index: 5; animation-name: batteryImg_move;animation-duration: 3s;animation-timing-function: ease-out;animation-iteration-count: infinite;}
.battery1 .battery1_warp img.bat_circle {position: absolute;top: 178px;right: 285px;}
.battery1 .textBox_line {top: 130px;left: 350px;}
@keyframes batteryImg_move {
    0% {top: 6px;}
    50% {top: 18px;}
    100% {top: 6px;}
}


.battery2 {width: 1920px; margin: 0 auto;}
.battery2 .battery2_wrap {display: flex; justify-content: center;}
.battery2 .battery2_wrap .battery2_content {position: relative;box-shadow: 0 0 20px 0px #33333340;}
.battery2 .battery2_wrap .battery2_content:nth-child(2) {margin-left:20px;}
.battery2 .battery2_wrap .battery2_content img {}

.textBox2 {position: absolute; bottom: 0; z-index: 1; padding: 0 0 35px 50px;}
.textBox2 h2 {color: #fff;font-size: 37px;font-weight: 600;margin-bottom: 16px;letter-spacing: -1px;}
.textBox2 h3 {color: #fff;font-size: 18px;font-weight: 400;letter-spacing: -1px;}
.textBox2 p {color: #fff; font-size: 20px; line-height: 150%; letter-spacing: -1px;}


.battery3 {}
.battery3 img {}

.battery4 {}
.battery4 .battery4_warp {position: relative; width: 1920px; height: 1080px; margin: 0 auto; padding-top: 55px;}
.battery4 .battery4_warp img.battery4_LT {position: absolute;z-index: 4;top: 132px;left: 265px; animation-name: battery4_LT_move;animation-duration: 3s;animation-timing-function: ease-out;animation-iteration-count: infinite;}
.battery4 .battery4_warp img.battery4_RB {position: absolute; z-index: 2; top: 740px; right: 120px; animation-name: battery4_RB_move;animation-duration: 3s;animation-timing-function: ease-out;animation-iteration-count: infinite;}
.battery4 .battery4_warp img.battery4_RT {position: absolute; z-index: 1; top: 155px; right: 301px; animation-name: battery4_RT_move;animation-duration: 3s;animation-timing-function: ease-out;animation-iteration-count: infinite;}
.battery4 .battery4_warp img.battery4_bg {position: absolute;}

@keyframes battery4_LT_move {
    0% {opacity:0.8;}
    50% {opacity:1;}
    100% {opacity:0.8;}
}

@keyframes battery4_RB_move {
    0% {opacity:0.8;}
    45% {opacity:1;}
    100% {opacity:0.8;}
}

@keyframes battery4_RT_move {
    0% {opacity:0.8; top: 155px;}
    47% {opacity:1; top: 150px;}
    100% {opacity:0.8; top: 155px;}
}



/* 디스플레이 */
.display {width: 100%;position: relative;}
.display .display_intro {position: relative;max-width: 1920px;height: 1356px;margin: 0 auto;}
.display .display_intro img.dis_img {position: absolute; z-index: 1; width: 540px; top: 41%; left: 52.7%; animation-name: disImg_move;animation-duration: 3s;animation-timing-function: ease-out;animation-iteration-count: infinite;}
.display .display_intro img.dis_circle {position: absolute; top: 32%; left: 50%;}
@keyframes disImg_move {
    0% {top: 41%;}
    50% {top: 40%;}
    100% {top: 41%;}
}

.display .display_wheel {position: absolute;width: 1920px;height: 1500px;margin: 0 auto;top: 0;left: 50%;transform: translateX(-960px);}
.display .display_wheel img.dis_img_wheel {position: absolute;z-index: 1;transform: rotate(0deg);}
.display .display_wheel img.dis_img_text {position: absolute; top: 0; left: 50%; transform: translate(-515px, 290px);}

.display .display_slide {text-align: center;width: 1600px;margin: 0 auto;}

.display .wheel_wrap {position: relative; width: 1500px; height: 1500px; margin-left: -747px; margin-top: -78px; transform: rotate(0deg); transition: 0.3s; z-index:2}
.display .dis_img_wheel {width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-origin: center;}
.display .wheel_text {position: absolute; width: 375px; height: 100px; top: 50%; left: 50%; transform-origin: center; transform: translate(-50%, -50%) rotate(45deg) translate(785px); text-align: center;}

.display .wheel_text p {transform: rotate(-90deg);font-size: 35px;letter-spacing: -1px;font-weight: 600;color: #cbcbcb; transition: 0.3s;}
.display .wheel_text span {font-size: 20px;font-weight: 300;}
.display .wheel_text.active p {color: #000;}

.display .swiper-pagination-bullet-active {background: #2f577c !important;}
.display .swiper-pagination-bullet {width: 18px !important;height: 18px !important;}

.display .swiper-button-next, .swiper-rtl .swiper-button-prev {
	background: #c6c6c6 !important;
	width: 70px !important;
	height: 70px !important;
	border-radius: 50px !important;
	color: #fff !important;
}

.display .swiper-button-prev, .swiper-rtl .swiper-button-next {
	background: #c6c6c6 !important;
	width: 70px !important;
	height: 70px !important;
	border-radius: 50px !important;
	color: #fff !important;
}



/* 모터 */
.motor {width: 1920px;margin: 0 auto; display: flex;}
.motor >div {}

.motor .motor_img {width: 950px;position: relative;text-align: right;}
.motor .motor_img ul {position: absolute;background: #ffffffd1;width: 53%;border-radius: 25px;display: flex;flex-wrap: nowrap;justify-content: space-between;right: 30px;bottom: 65px;}
.motor .motor_img ul li {padding: 6% 0;font-size: 18px;letter-spacing: -1px;text-align: center;}
.motor .motor_img ul li:nth-child(2) > div {border-left: 2px #a4a4a4 solid; border-right: 2px #a4a4a4 solid;}
.motor .motor_img ul li > div {padding: 0 30px;}
.motor .motor_img ul li span {font-size: 30px;font-weight: 600;}
.motor .motor_img p.comment {width: auto;display: inline-block;}

.motor .textBox {max-width: 610px; margin: initial;}
.motor .motor_text {margin: 120px 0 0 50px;}



/* 타이어 */
.tire {width: 1600px; margin: 0 auto;}
.tire .tire_wrap {}
.tire .tire_wrap img.tire_text {margin-right: 125px;}
.tire .tire_wrap img.tire_img {}



/* 서스펜션 & 브레이크 */
.suspension {width: 1600px; margin: 0 auto;}
.suspension .sus_wrap {position: relative;}
.suspension .sus_wrap .textBox2 {left: 50%; transform: translateX(-615px);}
.suspension .sus_wrap .sus_img {}




/* 폴딩 & 안장 */
.saddle {width: 1200px; margin: 0 auto;}

.saddle .folding_wrap {position: relative;text-align: center;}
.saddle .folding_wrap .folding_text {position: absolute; top: 35px; right: 140px;}
.saddle .folding_wrap .folding_car {box-shadow: 0 0 20px 0px #33333340;}

.saddle .height_wrap {display: flex; justify-content: space-between; margin: 0 auto;}
.saddle .height_wrap .height_content {position: relative;box-shadow: 0 0 20px 0px #33333340;}

.saddle .size_table {position: relative;}
.saddle .size_table img.size_table_bike {margin-left: 65px; margin-top: 30px;}
.saddle .size_table img.size_table_img {margin-left: 80px;}
.saddle .size_table .comment {width:530px; position: absolute; bottom: -20px; right: 20px; font-size: 14px;}

.saddle .saddle_caution {width: 100%; height: 272px; border: 3px #7f8c9e solid; background: #ededed; border-radius: 20px; margin-top: 105px; position: relative;}
.saddle .saddle_caution h1 {margin: 35px 0 0 100px; font-size: 37px; font-weight: 600;}
.saddle .saddle_caution p {margin: 25px 0 0 100px; font-size: 18px; font-weight: 500;}
.saddle .saddle_caution img {position: absolute; top: 0; right: 110px;}




/* 파스 & 스로틀 */
.driving_mode {width: 1300px; margin: 0 auto;}
.tab {display: inline-block; width: 48%; padding: 25px 0; cursor: pointer; border-bottom: 2px solid #e3e3e3; text-align: center; font-size: 25px; font-weight: 300; transition: 0.2s;}
.tab:hover {font-weight: 600;}
.tab.active {background-color: #fff; font-weight: 600; border-bottom: 4px solid #757575;}
.tab_content {padding: 20px; display: none;}
.tab_content.active {display: block;}

.mode_tab {display: flex; justify-content: space-around;}
.tab_content img {width: 100%; margin-bottom: 50px; box-shadow: 0 0 20px 0px #33333340;}
.tab_content h1 {font-size: 35px; margin-left: 25px; margin-bottom: 15px; font-weight: 500; letter-spacing:-1px;}
.tab_content p { margin-left: 25px; font-size: 23px;}

        


/* 전방라이트 */
.light  {}
.light .light_wrap {}
.light .light_wrap div {background:#000; position:relative;}
.light .light_wrap .light_off {}
.light .light_wrap .light_on {display:none;}
.light .light_wrap div .light_btn {position: absolute; top: 30px; right: 50%; margin-right: -450px; cursor: pointer;}
.light .light_wrap div .light_img {width: 100%;}
.light .comment {margin:0 auto;padding-top: 10px;}





/* 변속기 */
.shift {width: 1920px; margin: 0 auto;}
.shift .shift_wrap {display: flex; justify-content: center;}
.shift .shift_wrap .shift_content {position: relative;box-shadow: 0 0 20px 0px #33333340;}
.shift .shift_wrap .shift_content:nth-child(2) {margin-left:20px;}
.shift .shift_wrap .shift_content img {}



/* 패키지 */
.package {width: 1920px; margin: 0 auto;}
.package .package_wrap {display: flex; justify-content: center;}
.package .package_wrap .package_content {position: relative;box-shadow: 0 0 20px 0px #33333340;}
.package .package_wrap .package_content p {}
.package .package_wrap .package_content p a {color: #ffffff;font-size: 18px;font-weight: 500;background: #ffffff6b;box-shadow: 0px 0px 10px #00000085;padding: 2% 4%;border-radius: 50px;position: absolute;top: 40%;left: 38%; opacity:0; transition:.3s;}
.package .package_wrap .package_content:hover a{ opacity:1;}
.package .package_wrap .package_content:nth-child(2) {margin-left:20px;}
.package .package_wrap .package_content img {}
.package .comment {margin-top:30px;}





/* 제품사이즈*/
.size {background:url('https://motovelo.diskn.com/H7S4eF0BoY') 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.sizeTableBasic tbody td {font-size: 20px;font-weight:500;color: #000000;padding: 20px 0 28px 0;vertical-align: bottom;}

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

.size .sizeFold {width:860px; margin:0 auto;}
.size .sizeFold img {}
.size .sizeFold table.sizeTable {max-width:500px; float:right; margin-top:110px;}
.size .sizeFold table.sizeTable::after {content: ''; display: block; clear: both;}
.size .sizeFold table.sizeTable caption {display: block; width: 500px; text-align: right; font-size: 16px; letter-spacing: -1px; color: #666666;}




/* 스펙 */
.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 .specTable_wrap::after {content: ''; display: block; clear: both;}

.spec table.specTable {float:left;}
.spec table.iconTable {width:25%; font-weight:500;}
.spec table.modelTable {width:calc(75%/3)}

.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 td.height70 {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;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_gr {background:#9e9e9e;}
.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:1000px; text-align:left;}
.spec .comment p {margin-bottom:5px;}




/* 인증 & 구성품 */

.certified {width:100%;height: 240px;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 */