/* common */
.subpage { position:relative; overflow: hidden; padding-top:50px }
.center {text-align: center;}

.sub_title { text-align: center; font-size: 50px; font-weight: bold; letter-spacing: -1.25px; }
.sub_p { font-size: 18px; font-weight: 300; letter-spacing: -0.45px; line-height: 1.67; }
.sub_title + .sub_p {margin-top: 30px; }
.sub_sp { font-size: 16px; font-weight: 300; letter-spacing: -0.4px; line-height: 1.63; }
.sub_p20 { font-size:20px; font-weight: 300; letter-spacing: -0.5px; line-height: 1.8; }

.bar_title { position:relative; padding-left: 20px; font-size: 33px; font-weight: bold; letter-spacing: -0.83px;  font-weight: bold; margin:0 0 50px; }
.bar_title::before { content:""; position:absolute; left:0; width:4px; top:0; height: 40px; background:#00a0e9; }

.dot_list li {position: relative; padding-left: 15px; }
.dot_list li::before {content: '' ;display: block; width: 5px; height: 5px; background: #00a0e9; position: absolute; left:0; top:8px;}

/* prd */
.h_section div[class^="section"] { padding:80px 0 100px; }
.h_section div[class^="section"]:first-of-type { padding-top: 0; }
.h_section div[class^="section"]:last-of-type { padding-bottom: 120px; }
.flex_box { display: flex; }
.bg_gray { background:#f7f7f7; }

/* sec1  */
#sec1 {background: linear-gradient(to bottom, #fff 0 90%, #f7f7f7 90%); padding-bottom: 0;}
#sec1 .flex_box { position:relative; justify-content: space-between; margin-top: 60px; }
#sec1 .flex_box > div { width: calc(50% - 50px); }
#sec1 .flex_box .txt { border-top: 1px solid #ddd; padding-top: 50px; }
#sec1 .flex_box.reverse {flex-direction: row-reverse; }
#sec1 .inner > .img {margin-top:100px; }

/* sec2 */
#sec2 .flex_box {justify-content: space-between; }
#sec2 .flex_box .bar_title {padding: 0;}
#sec2 .flex_box .bar_title::before {position: static; width: 40px; height: 4px; background-color: #303192; margin:0 0 20px; display: block; }
#sec2 .flex_box > div { width: calc(50% - 50px);}
#sec2 .flex_box .img {background: #fff; text-align: center; padding: 0 30px; display: flex; align-items: center ;justify-content: center; }
#sec2 .flex_box .txt > div {margin-bottom: 60px; padding-bottom: 60px; border-bottom: 1px solid #ddd; width: 100%; }
#sec2 .flex_box .txt > div:last-child {margin:0; padding: 0; border:0; }
#sec2 .flex_box .txt .dot_list {margin-top: 40px; }
#sec2 .flex_box .txt .dot_list li {font-size: 15px; font-weight: 300; color:#666; letter-spacing: -.4px; line-height: 1.5;}
#sec2 .flex_box .txt .dot_list li:nth-child(n+2) {margin-top: 10px;}
#sec2 .wh_box {background: #fff; margin-top: 120px; padding: 80px;}



@media screen and (max-width: 1420px) {
    br {display: none; }

    /* prd */
    #sec1 .flex_box > div { width: calc(50% - 20px); }
    #sec1 .flex_box { align-items: center; }
    #sec1 .flex_box .txt { padding-top: 30px; }

    #sec2 .flex_box > div { width: calc(50% - 20px); }

}
@media screen and (max-width: 1023px) {
    /* common */
    .subpage { padding-top: 30px; }

    .sub_title { font-size: 40px; }
    .sub_p { font-size: 17px; }
    .sub_p20 { font-size: 18px; }
    .sub_title + .sub_p {margin-top: 20px; }

    .bar_title { font-size: 26px; margin: 0 0 40px; }
    .bar_title::before { height: 33px; }

    /* prd */
    #sec1 { text-align: center; }
    #sec1 .flex_box { flex-wrap: wrap; justify-content: center; margin: 50px 0 0; }
    #sec1 .flex_box > div { width:100%; margin:0; }
    #sec1 .flex_box .img {  margin:0 auto 30px; }
    #sec1 .flex_box .txt {border: 0; padding: 0;}
    #sec1 .inner > .img {margin-top:60px; }
    /* sec2 */
    #sec2 .flex_box {display: block; }
    #sec2 .flex_box > div {width: 100%;}
    #sec2 .flex_box .txt > div {margin-bottom:40px; padding-bottom: 40px; }
    #sec2 .flex_box .img {padding: 30px; margin-top: 60px;}
    #sec2 .wh_box { margin-top: 60px; padding: 60px;}



}
@media screen and (max-width: 767px) {
    /* common */
    .subpage { padding-top: 0; }

    .sub_title { font-size: 30px; }
    .sub_p { font-size: 16px; }
    .sub_p20 { font-size: 17px; }
    .sub_sp { font-size: 15px; }
    .sub_title + .sub_p {margin-top: 15px; }

    .bar_title { padding-left: 15px; font-size: 22px; margin: 0 0 30px; }
    .bar_title::before { height: 28px; width: 3px; }

    .h_section div[class^="section"] { padding: 60px 0; }
    .h_section div[class^="section"]:last-of-type { padding-bottom: 70px; }

    /* prd */
    #sec1 .flex_box {margin: 40px 0 0;}
    #sec1 .inner > .img {margin-top:40px; }

    #sec2 .flex_box .bar_title::before {height: 3px; width: 30px; }
    #sec2 .flex_box .txt .dot_list {margin-top: 30px;}
    #sec2 .flex_box .txt .dot_list li {font-size: 14px;}
    #sec2 .flex_box .img {padding:20px; margin-top: 40px;}
    #sec2 .wh_box { margin-top: 40px; padding: 40px 20px;}

}