/* common */
.subpage { overflow: hidden; position:relative;text-align: center;}
.subpage > section {padding: 90px 0; position: relative; }
.subpage > section:nth-child(even) {background-color: #f9f9f9;}
.subpage article + article {margin-top: 90px;}
.sub_inner { max-width: 1400px; width: 100%; margin:0 auto; position: relative; padding:0 50px; }
.sub_tit {margin-bottom: 40px;}
.sub_tit h3 {font-size: 18px; font-weight:400; color: #fd7d02; margin-bottom:10px; line-height: 1.1; }

/* font size */
.fs_50 {font-size: 50px; font-weight :700; line-height: 1.2; color:#000; }
.fs_22 {font-size: 22px; font-weight :700; line-height: 1.71; color:#000; }
.fs_21 {font-size: 21px; font-weight :400; line-height: 1.71; color:#000; }
.fs_20 {font-size: 20px; font-weight :700; line-height: 1.71; color:#000; }
.fs_18 {font-size: 18px; font-weight :400; line-height: 1.83; color:#555; }
.fs_17 {font-size: 17px; font-weight :400; line-height: 1.7; color:#333; }

.dot_list > li {position: relative; padding-left: 12px; text-align: left; }
.dot_list > li::before {content: ''; display: block; width: 4px; height: 4px; position: absolute; left: 0; top:13px; background: #666; }

/*Content CSS*/
.his_list_wr {width: 100%; position: relative; text-align: left; z-index: 1; padding:110px 30px 80px;border:1px solid #ddd;}
.his_list_wr::before {content: ''; display: block; width: 1px; height: 100%; background: #ddd; position: absolute; top:0; left:50%; transform:translateX(-50%); z-index: -1; }
.his_list_wr > li {width: 50%; display: flex; justify-content: flex-start; text-align: left; margin-left:calc(50% - 9px);  flex-direction: row;
align-items: flex-start; margin-bottom: 50px;}
.his_list_wr > li:last-child {margin-bottom: 0;}
/* dots */
.his_list_wr .his_dot {display: flex; align-items: center;flex-direction: row-reverse;  }
.his_list_wr .his_dot .dot {display:block; border-radius: 50%;position: relative;  width: 18px; height: 18px; border-radius: 50%; background-color: #fff; border:3px solid #fd7d02;}
/* .his_list_wr .his_dot .dot::before {content: ''; display: block; background: #fd7d02;  position: absolute; border-radius: 50%; top:-8px; left:-8px; width: 26px; height: 26px; background: rgba(0,86,193,.3);} */
.his_list_wr .his_dot .line {display: block ;width: 50px; height: 1px; background: #fd7d02; }
/* his_txt */
.his_list_wr .his_txt {position: relative; top:-16px; margin-left: 20px; }
.his_list_wr .his_txt h1 {font-size:42px; font-weight:700; color:#000; margin:0 0 25px; }
/* his_txt > list content */
.his_list_wr .his_list > li {margin-bottom:25px; position:relative; display: flex; line-height:26px;  padding-left: 15px; }
.his_list_wr .his_list > li:last-child {margin-bottom: 0; }
.his_list_wr .his_list > li::before {content: ''; display: block; width: 6px; height: 6px; background-color: #fd7d02; position: absolute; left: 0; top:12px; }

.his_list_wr .his_list h3 {font-weight:700; color:#000; white-space: nowrap; margin-right: 17px; position: relative; top:-2px; line-height: 1.6;}
.his_list_wr .his_list p {font-weight: 500; color:#555;  word-break: keep-all; letter-spacing: -.4px; position: relative; padding-left: 15px; line-height: 1.6;}
/* .his_list_wr .his_list p + p {margin-top: 10px;} */
.his_list_wr .his_list p::before {content: '-'; position: absolute; left: 0; top:0;}
.his_list_wr .his_list img {border:1px solid #ddd; margin-top: 20px; }


@media screen and (min-width:1025px) {
    .his_list_wr > li:nth-child(even) { margin-left:9px; flex-direction: row-reverse; text-align: right; align-items: flex-start;}

    .his_list_wr > li:nth-child(even) .his_dot {flex-direction: row;}

    .his_list_wr > li:nth-child(even) .his_txt {margin-right: 20px; }

    .his_list_wr > li:nth-child(even) .his_list > li { flex-direction: row-reverse; padding: 0 15px 0 0;}
    .his_list_wr > li:nth-child(even) .his_list > li::before {left: auto; right: 0;}
    .his_list_wr > li:nth-child(even) .his_list h3 {margin:0 0 0 17px;}

    .his_list_wr > li:nth-child(even) .his_list p {padding: 0 15px 0 0;}
    .his_list_wr > li:nth-child(even) .his_list p::before {left: auto; right: 0;}
}




@media screen and (max-width:1400px) {
    /* common */
    .subpage br:not(.space) {display: none;}

    /* content */



}

@media screen and (max-width: 1024px) {
    /* common */
    .subpage {text-align: center;}
    .subpage > section {padding: 70px 0; }
    .subpage article + article {margin-top: 70px;}
    .sub_tit h3 {font-size: 16px;}
    .sub_inner {padding:0 30px;}
    /* font size */
    .fs_50 {font-size: 40px; }
    .fs_22 {font-size: 19px;}
    .fs_21 {font-size: 18px;}
    .fs_20 {font-size: 18px;}
    .fs_18 {font-size: 16px;}
    .fs_17 {font-size: 15px;}

    .dot_list > li::before {top:10px;}

    /* content */
    .his_list_wr {padding: 70px 30px; }
    .his_list_wr::before { left: 38px; transform: translateX(0);}
    .his_list_wr > li {margin-left: 0; width: 100%;}

    .his_list_wr .his_list > li {margin-bottom:15px;}
    .his_list_wr .his_list > li::before { top: 9px;}
    .his_list_wr .his_txt {top: -11px; width: 100%;}
    .his_list_wr .his_txt h1 { font-size:35px; margin: 0 0 15px;}

}


@media screen and (max-width: 640px) {
    /* common */
    .subpage > section {padding: 50px 0;}
    .subpage article + article {margin-top: 50px;}
    .sub_inner {padding:0 20px;}
    .sub_tit {margin-bottom: 30px;}
    .sub_tit h3 {font-size: 15px; margin-bottom:10px;}

    /* font size */
    .fs_50 {font-size: 30px; }
    .fs_22 {font-size: 16px;}
    .fs_21 {font-size: 15px;}
    .fs_20 {font-size: 15px;}
    .fs_18 {font-size: 14px;}
    .fs_17 {font-size: 13px;}

    /* content */
    .his_list_wr {padding: 50px 20px; }
    .his_list_wr::before { left: 27px; }
    .his_list_wr > li { margin-bottom: 40px;}

    .his_list_wr .his_dot .dot {width: 15px; height: 15px;}
    .his_list_wr .his_dot .line {width: 30px;}

    .his_list_wr .his_list > li {margin-bottom: 10px;}
    .his_list_wr .his_list > li::before { top: 7px; width: 5px; height: 5px;}
    .his_list_wr .his_txt {top: -7px;}
    .his_list_wr .his_txt h1 { font-size:27px; margin: 0 0 10px;}
    .his_list_wr .his_list p {padding-left: 10px;}

}

@media screen and (max-width: 400px) {
    .his_list_wr .his_list > li {display: block;}
    .his_list_wr .his_list h3 {margin: 0;}

    .his_list_wr .his_txt {margin-left: 15px;}
}