ul, li, a {list-style: none; text-decoration: none;}
a {color: inherit;}
.wrap {width: 100%; box-sizing: border-box; }
.sub_top {background-image: url(../img/kind.jpg); width: 100%; height:840px; content: ''; display: block; background-size: cover; background-repeat: no-repeat; position: relative; 
    background-position-y: 93%;
}

/*top 타이틀*/
.sub_title {position:absolute; top:46%; color:#ffffff; left:50%; transform:translate(-50%,-50%);}
.sub_title p {font-size: 60px; color: transparent; text-shadow: 0 0 2px #ffffff;}
.sub_title h3 {font-size:50px; line-height: 50px; font-weight: 600; position: relative; text-align: center;} 
.sub_title h3::before {
    background-image: url(../img/motorcycles.png);
    display: block;
    width: 24.5em;
    height: 2.6em;
    background-size: cover;
    position: absolute;
    content: '';
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
    animation: 2.8s introduce ease forwards;
}
@keyframes introduce {
    0% { top:-100%; opacity: 0;} 50% { opacity: 0.3;} 80% {opacity: 0.5; } 100% {top:-58%; opacity: 1; } }

 
.kind_top_nav {width: 100%; padding: 1% 10%;background-color: #757575;}
.kind_top_nav  ul {display: flex;}
.kind_top_nav  ul  li {color: #000000; font-weight: 100; font-size: 18px; padding-right: 3%; position: relative; }
.kind_top_nav  ul  li:last-child {color:#000000; font-weight: 400; text-transform: uppercase;}
.kind_top_nav  ul  li::before {display: block; position: absolute; content: ''; width: 10px; height: 10px; right:20px; top:8px;

    border-top: 1px solid #292929; border-right: 1px solid #292929; -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg); transform: rotate(45deg); content: '';
}
.kind_top_nav  ul  li:last-child::before {border:none}



.kind_top_nav  span {padding:0 1%}
.inner_wrap {display: none; max-width: 1920px; width: 100%; /*padding:10% 20%;*/  box-sizing: border-box; background-color:#ffffff; }
.inner_wrap.on {display: block;}

   
     /*top 네이비게이션*/
.introduce_nav {position: absolute; left:50%; transform: translate(-50%,0); bottom: 30%; width: 100%; max-width: 1200px;}
.introduce_nav ul { display: flex; width: 100%; height: 1px; background-color:rgba(255,255,255,0.3); position: relative;}
.introduce_nav ul li {width: 50%; height: 20px; text-align: center; position: relative; opacity: 0.7;}
.introduce_nav ul li::before {display:none; content:''; width: 50%; height: 3px; background: #ffffff; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);}  
.introduce_nav ul li.on::before{display: block; }
.introduce_nav ul li.on {opacity: 1;}
.introduce_nav ul li button {display:block; text-transform: uppercase; width: 100%; font-size: 1.5em; font-weight: 100; padding-top: 12px; color:#ffffff; background: none; border:none; cursor: pointer; }
.introduce_nav ul li button::before {content:'';  width:0; transition: all 0.5s ease;}
.introduce_nav ul li button:hover::before {content:''; width: 50%; height: 3px; background: rgba(255,255,255,0.5); 
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%); box-sizing: border-box;}





/**/
.kind_mtitle {text-transform: uppercase; width: 100%; padding:8% 20%; margin: 0 auto;}
.kind_mtitle h3 {width: 100%; font-size: 40px; font-weight: 500; position:relative}
.kind_mtitle h3::before {display: block; content: ''; width: 100%; height: 1px; background-color: #000000; position: absolute; top:100%}
.kind_cont_imgbox_wrap {display: flex; width: 100%; padding:5% 0; align-items: flex-end; border-top:1px solid #ccc;}

.kind_cont_left {width: 40%; padding-top:5%}

.kind_conts_top {width: 100%;}
.kind_conts_top h4 {text-transform: uppercase; font-size: 5.4em; width: 100%; font-weight: 100; line-height: 1em; color:#1f1f1f}
    
.text_rigt {text-align: right;}
.kind_imgsbox {width: 60%; }
.kind_imgsbox img {display: block; width: 80%; margin: 0 auto; }

.kind_Expl {width: 100%; }
.kind_Expl table {border: 1px solid #000000; width: 100%; padding:10%; margin-top:5%}
.kind_Expl table tr {display: flex;}
.kind_Expl table tr td:nth-child(1) {width: 30%;}
.kind_Expl table tr td:nth-child(2) {width: 70%;}
.kind_Expl table tr td {font-size: 22px; font-weight: 100; line-height: 48px; }




  
/* *************************반응형************************ */
/************************************* 타블렛 *************************************/
@media screen and (max-width:1023px) {
    .inner_wrap {width:100%; padding:10%}
   
}


 /* **********************모바일****************************/
 @media screen and (max-width:767px) {
    .sub_title h3 {font-size: 3.5em;}
    .sub_top {width: 100%; }
    .sub_title h3::before {width: 100%; width: 6em; height: 1.5em;}
    .kind_mtitle h3 {text-align: center;}
    .kind_top_nav {display: none;}
    .inner_wrap {padding: 40% 5%; box-sizing: border-box;}
    .inner_wrap {padding:10% 5%;}
    .kind_cont_imgbox_wrap {display: block;}
    .kind_cont_left {width: 100%;}
    .kind_mtitle {padding: 0 ;padding-top:5%;}
    .kind_imgsbox {width: 100%;}
    .kind_imgsbox {padding:8% 0;}
    .kind_conts_top h4 {text-align: left;}
    .sub_title {width: 100%;}
    
    .sub_title h3::before {width: 100%;}
 }


 /************************************* 모바일2 *************************************/

 @media screen and (max-width:480px) {
   
    .sub_top {height: 30em; width: 100%;}
    .inner_wrap {padding: 20% 5%; box-sizing: border-box;}
    .sub_title {width: 100%;}
    .sub_title h3 {font-size: 2em;}
    .sub_title h3::before {width: 100%;}

    .kind_mtitle h3 {font-size: 2em;}
    .kind_conts_top h4 {font-size: 3.4em;}




 }