/* common */
.subpage { padding:120px 0 130px; overflow: hidden; }
.subpage.has_section { padding:0; }
.subpage.after { position:relative; padding:120px 0 0; }
.subpage.after::after { content:""; display: block; width:100%; bottom:0; height: 500px; margin:110px 0 0; background:url('../img/test4_bg.jpg') no-repeat center / cover; }
.subpage.has_section.after { padding:0; }
.subpage.has_section.after::after { margin:0; }
.title_area { text-align: center; margin:0 0 50px; }
.title_area .eng { font-size: 20px; font-weight: 600; letter-spacing: 6px; color: #ca1353; text-transform: uppercase;  }
.title_area .title { font-size: 60px; font-weight: 700; margin-top: 20px; }
.title_area p { font-size: 20px; line-height: 1.9; font-weight: 300; margin-top: 30px; }
.p20 { font-size: 20px; font-weight: 300; line-height: 1.9; }
.p18 { font-size: 18px; font-weight: 300; line-height: 1.67; }
.p16 { font-size: 16px; font-weight: 300; line-height: 1.67; letter-spacing: -0.16px; }

.bg_wh { background:#fff; }
.bg_gray { background:#f7f7f7; }
.has_section > div { padding:100px 0 130px; }
.has_section > div:first-child { padding: 120px 0 100px; }
.bar_title { text-align: center; position:relative; font-size: 40px; font-weight: bold; margin:0 0 55px; }
.bar_title::before { content:""; display: block; width:70px; height: 5px; background:#ca1353; margin:0 auto 30px; }
.br_mob { display: none; }

/* test 공통 */
.test_index { border-top: 1px solid #ddd; padding:70px 0 0; }
.arrow_title { position:relative; padding-left: 48px; font-size: 36px; font-weight: bold; }
.arrow_title::before { content:""; position:absolute; left:0; width:31px; top:8px; height:26px; background:url('../img/doub_arrow.png') no-repeat center; }
.test_index .btn_list { margin:35px 0 0; display: flex; flex-wrap: wrap; }
.test_index .btn_list li { width:calc(33.3% - 23.5px); margin-right: 35px; }
.test_index .btn_list li:nth-child(3n) { margin-right: 0; }
.test_index .btn_list li:nth-child(n+4) { margin-top: 35px; }
.test_index .btn_list a { display: flex; align-items: center; justify-content: space-between; width:100%; height: 75px; padding:15px 35px; background:#eaeaea; font-size: 20px; font-weight: 500; transition: all .3s; }
.test_index .btn_list a .icon { display: inline-block; width:27px; height:17px; background:url('../img/test_arrow_b.png') no-repeat center; transition: all .3s; }
.test_index .img_list { margin-top: 80px; display: flex; justify-content: space-between; }
.test_index .img_list li { border:1px solid #ddd; }
.test_index .img_list.col4 li { width:calc(25% - 15px); }
.test_index .img_list.col3 li { width:calc(33.3% - 23.5px); }
.test_index .img_list.col2 li { width:calc(50% - 15px); }

.box_type { margin:0 0 60px; }
.box_type ul { display: flex; justify-content: space-between; }
.box_type li { width:calc(50% - 10px); background:#fff; border:1px solid #ddd; text-align: center; padding:15px; display: flex; align-items: center; justify-content: center; }
.box_type li p { font-weight: 600; line-height: 1.65; }
.box_type.gray li { background:#f8f8f9; }

.round_wrap { display: flex; }
.round_wrap > div { margin-right: 20px; }
.round_wrap > div:last-child { margin-right: 0; }
.round_wrap .round_box { display: block; padding:80px 20px; }
.round_box { width:310px; height: 310px; border:5px solid #bbb; border-radius: 50%; background:#fff; flex-direction: column; display: flex; align-items: center; justify-content: center; text-align: center; padding:20px;}
.round_box h3 { font-size: 24px; font-weight: bold; line-height: 1.38; color: #ca1353; margin-bottom: 15px; }

.gray_box { padding:40px 60px; border-radius: 15px; background-color: #e7e7e7; }
.gray_box p { text-align: left; }

.test_flex { display: flex; align-items: center; }
.test_flex .round_box { flex-shrink: 0; }
.test_flex .right { margin-left: 70px; }
.test_flex .right .gray_box { margin-top: 30px; }

.arrow_list { display: flex; justify-content: space-between; }
.arrow_list > li { width: calc(50% - 15px); }
.arrow_list .thumb { margin:30px 0; border:1px solid #ddd; }
.dot_list > li { position:relative; padding:0 16px; font-size: 20px; line-height: 1.7; margin-bottom: 10px; text-align: left; }
.dot_list > li:last-child { margin-bottom: 0; }
.dot_list > li b { font-weight: 600; }
.dot_list > li::before { content:""; position:absolute; left:0; top:12px; width: 6px; height: 6px; border-radius: 50%; background:#ca1353; }
.arrow_list .arrow_title + .p20 { margin-top: 25px; text-align: left; }




/* test4 */
.arrow_list .thumb + .p20 { min-height: 114px; }
.arrow_list .dot_list { border-top:1px solid #ddd; margin:25px 0 0; padding:35px 0 0; display: flex; flex-wrap: wrap; }
.arrow_list .dot_list > li { width: 33.3%; font-size: 18px; }




@media screen and (min-width: 1024px) {

    /* test4 */
    .test_index .btn_list a:hover { background:#000; color:#fff; }
    .test_index .btn_list a:hover .icon { background-image: url('../img/test_arrow_w.png'); }

}

@media screen and (max-width: 1420px) {

    /* test 공통 */
    .test_index .btn_list li { width:calc(33.3% - 16.7px); margin-right: 25px; }
    .test_index .btn_list li:nth-child(3n) { margin-right: 0; }

    /* .round_box br { display: none; } */
    .test_flex p br {  display: none; }

    /* test4 */
    .arrow_list .dot_list > li { width: 50%; }


}
@media screen and (max-width: 1023px) {

    /* common */
    .subpage { padding:150px 0 100px; text-align: center; }
    .subpage.after { padding:150px 0 0; }
    .subpage.after::after { height: 350px; margin: 80px 0 0; }
    .title_area { margin:0 0 42px; }
    .title_area .eng { font-size: 18px; }
    .title_area .title { font-size: 45px; }
    .title_area p { font-size: 19px; }
    .p18 { font-size: 17px; }
    .p20 { font-size: 19px; }

    .has_section > div { padding: 70px 0 100px; }
    .has_section > div:first-child { padding: 150px 0 70px; }
    .bar_title { font-size: 32px; margin: 0 0 55px; }
    .bar_title::before { width: 60px; height: 4px; margin: 0 auto 25px; }


    /* test 공통 */
    .test_index { padding: 50px 0 0; }
    .test_index .btn_list { margin: 25px 0 0; }
    .test_index .btn_list li { width:calc(50% - 12.5px); margin-right: 25px; }
    .test_index .btn_list li:nth-child(2n) { margin-right: 0; }
    .test_index .btn_list li:nth-child(3n) { margin-right: 25px; }
    .test_index .btn_list li:nth-child(n+3) { margin-top: 25px; }
    .test_index .btn_list a { height: 70px; font-size: 19px; }

    .test_index .img_list { margin-top: 50px; }

    .arrow_title { padding-left: 40px; font-size: 28px; text-align: left; }
    .arrow_title::before { top: 3px; }

    .round_wrap { flex-wrap: wrap; justify-content: center; }
    .round_box h3 { font-size: 20px; }
    .round_box p.p18 { text-align: center; }

    .test_flex p { text-align: left; }

    .dot_list > li { font-size: 18px; }

    /* test4 */
    .arrow_list .thumb + .p20 { text-align: left; }
    .arrow_list .dot_list > li { font-size: 17px; }





}
@media screen and (max-width: 767px) {

    /* common */
    .subpage { padding:110px 0 70px; }
    .subpage.after { padding:110px 0 0; }
    .subpage.after::after { height: 200px; margin: 50px 0 0; }
    .title_area { margin:0 0 35px; }
    .title_area .eng { font-size: 15px; letter-spacing: 5px; }
    .title_area .title { font-size: 35px; margin-top: 15px; }
    .title_area p { font-size: 17px; margin-top: 20px; }
    .p18 { font-size: 16px; }
    .p16 { font-size: 15px; }
    .p20 { font-size: 17px; }
    .subpage p br { display: none; }
    .subpage .br_mob { display: block; }

    .has_section > div { padding: 50px 0 70px; }
    .has_section > div:first-child { padding: 110px 0 50px; }
    .bar_title { font-size: 25px; margin: 0 0 35px; }
    .bar_title::before { width: 50px; height: 3px; margin: 0 auto 20px; }

    /* test 공통 */
    .test_index { padding: 40px 0 0; }
    .test_index .btn_list li { width: calc(50% - 5px); margin-right: 10px; }
    .test_index .btn_list li:nth-child(2n) { margin-right: 0; }
    .test_index .btn_list li:nth-child(3n) { margin-right: 10px; }
    .test_index .btn_list li:nth-child(n+3) { margin-top: 10px; }
    .test_index .btn_list a { padding:10px; height: 55px; font-size: 16px; text-align: left; }
    .test_index .btn_list a .icon { width: 20px; height: 15px; background-size: contain; }

    .test_index .img_list { flex-wrap: wrap; }
    .test_index .img_list img { width:100%; }
    .test_index .img_list.col2 li { width: calc(50% - 5px); }
    .test_index .img_list.col3 li { width: calc(33.3% - 5px); }
    .test_index .img_list.col4 li { width: calc(50% - 5px); }
    .test_index .img_list.col4 li:nth-child(n+3) { margin-top: 10px; }

    .arrow_title { padding-left: 40px; font-size: 22px; }
    .arrow_title::before { width: 26px; height: 20px; background-size: contain; }

    .box_type { margin: 0 0 35px; }
    .box_type ul { flex-wrap: wrap; }
    .box_type li { width:100%; padding: 13px 10px; }
    .box_type li:nth-child(n+2) { margin-top: 10px; }

    .round_wrap .round_box { display: flex; padding:20px; }
    .round_box { width: 250px; height: 250px; padding:20px; }
    .round_box h3 { font-size: 18px; }

    .gray_box { padding: 25px 20px; }

    .test_flex { flex-wrap: wrap; justify-content: center; }
    .test_flex .right { margin:30px 0 0; }
    .test_flex p { text-align: center; }
    .test_flex .gray_box p { text-align: left; }

    .arrow_list { flex-wrap: wrap; }
    .arrow_list > li { width: 100%; }
    .arrow_list > li:nth-child(n+2) { margin-top: 50px; }
    .arrow_list .thumb { margin: 20px 0; }
    .arrow_list .thumb img { width:100%; }

    .dot_list > li { font-size: 16px; padding:0 0 0 14px; }
    .dot_list > li::before { top: 10px; width: 5px; height: 5px; }

    .arrow_list .arrow_title + .p20 { margin-top: 15px; }


    /* test4 */
    .arrow_list .thumb + .p20 { min-height: 0; }
    .arrow_list .dot_list { margin: 18px 0 0; padding: 22px 0 0; }
    .arrow_list .dot_list > li { font-size: 16px; margin-bottom: 6px; }






}