@charset "UTF-8";

.border{border: 1px solid #ddd;}
.border_0{border: 0 !important;}
.max100{max-width: 100%;}
.gray_box{padding: 20px; background-color: #f6fafc;}
.keep-all{word-break: keep-all;}
.txt_orange{color: #e95f01;}

/*자전거의 역사*/
.imgWrap:after{content: ""; display: block; clear: both;}
.imgWrap li{float: left; padding: 10px; box-sizing: border-box;}
.imgWrap .images img{width: 100%;}
.imgWrap .txt{position: relative; padding-left: 13px; line-height: 1.3em; font-size: 15px; word-break: keep-all;}
.imgWrap .txt:after{display: block; content: ""; position: absolute; left: 0; top: 4px; width: 0; height: 0; background: none; border-left: 6px solid #0a8857; border-top: 4px solid transparent; border-bottom: 4px solid transparent;}

.imgWrap.type2 li{width: calc(100% / 2);}
.imgWrap.type3 li{width: calc(100% / 3);}
.imgWrap.type4 li{width: calc(100% / 4);}


/*자전거의 종류*/
.kind li{margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd;}
.kind li:last-child{border: 0;}
.kind li:after{content: ""; display: block; clear: both;}
.kind li .image{float: left; max-width: 200px; border: 1px solid #ddd; box-sizing: border-box;}
.kind li .image img{max-width: 100%;}
.kind li .txt{float: left; width: calc(100% - 200px); padding-left: 30px; box-sizing: border-box;}
.kind li .txt strong{display: block; margin-bottom: 10px; font-size: 21px; color: #119965;}
.kind li .txt p{position: relative; padding-left: 12px;}
.kind li .txt p:before{position: absolute; top: 10px; left: 0; content: ""; display: block; width: 4px; height: 4px; background-color: #a1a1a1; border-radius: 50%;}
.green{color: #22ad5d;}





/**********반응형**********/
/************************************/
@media  screen and (max-width:1700px)
{

}

/************************************/
@media  screen and (max-width:1400px)
{

}

/************************************/
@media  screen and (max-width:1350px)
{

}

/************************************/
@media  screen and (max-width:800px)
{

}

/************************************/
@media  screen and (max-width:700px)
{
    /*자전거의 종류*/
    .kind li .image{float: none; max-width: none;}
    .kind li .image img{display: block; max-width: 100%; margin: 0 auto;}
    .kind li .txt{float: none; width: 100%; padding-left: 0; margin-top: 20px;}
}

/************************************/
@media  screen and (max-width:500px)
{
    /*자전거의 역사*/
    .history p{font-size: 16px;}
    .imgWrap.type2 li{width: 100%;}
    .imgWrap.type3 li{width: 100%;}
    .imgWrap.type4 li{width: 100%;}
    .imgWrap .txt{font-size: 14px;}
}