/* common */
#ci { overflow: hidden; padding-top: 130px; }
.sub_tit { line-height: 1; margin:0 0 45px; padding:0 0 38px; border-bottom: 1px solid #ddd; }
.sub_tit b { display: block; font-size: 26px; font-weight: 600; color: #008bf6; margin:0 0 20px; }
.sub_tit h2 { font-size: 55px; font-weight: bold; text-transform: uppercase; }
.sub_p { font-size: 20px; font-weight: 300; line-height: 1.65; }
.sub_p + .sub_p { margin-top: 30px; }
.sub_h3 { font-size: 28px; font-weight: bold; text-transform: uppercase; }


/* ci */
#ci { }

/* s1 */
#ci_s1 { padding:0 0 120px; }
.s1_con .s1_img { display: flex; justify-content: space-between; align-items: center; margin:55px 0; }
.s1_con .s1_img > li { width:calc(50% - 15px); }
.s1_con .s1_img > li img { border-right: 1px solid #ddd; }

.s1_desc .ci_tit { display: flex; align-items:center; margin:0 0 30px; }
.s1_desc .ci_tit .sub_h3 { font-weight: 800; }
.s1_desc .ci_tit .color { margin-left: 50px; font-size: 20px; font-weight: normal; position:relative; top:-5px; }
.s1_desc .ci_tit .color span { display: inline-block; width: 34px; height: 34px; background-color: #008bf6; margin-right: 10px; position:relative; top:10px; }


/* s2 */
#ci_s2 { padding:115px 0 125px; background:url('../img/dot_bg.jpg') repeat center; }
.s2_con .sub_h3 + .sub_p { margin-top: 50px; }

.s2_desc { position:relative; margin:100px 0 0; z-index: 2; }
.s2_desc .sub_h3 { font-weight: 800; }
.s2_desc .int_list { width: calc(100% + 35px); margin:45px 0 0 -17.5px; }
.s2_desc .int_list li { margin:0 17.5px; overflow: hidden; }
.s2_desc .int_list li .img { overflow: hidden; }
.s2_desc .int_list li img { transition: all .3s; }
.s2_desc .int_list li p { text-align: center; margin:20px auto 0; }


#int_arrow { position:absolute; left:50%; transform: translateX(-50%); width:calc(100% + 200px); top:54%; display: flex; align-items: center; justify-content: space-between; z-index: -1; }
#int_arrow .slick-arrow { width:54px; height: 54px; border:1px solid #ddd; border-radius: 50%; cursor: pointer; transition: all .3s; }
#int_arrow #int_prev { background:url('../img/his_prev.png') no-repeat center; }
#int_arrow #int_next { background:url('../img/his_next.png') no-repeat center; margin-left: 20px; }



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

    .s2_desc .int_list li:hover img { transform: scale(1.15); }
    #int_arrow #int_prev:hover { background:url('../img/his_prev_w.png') no-repeat center #008bf6; }
    #int_arrow #int_next:hover { background:url('../img/his_next_w.png') no-repeat center #008bf6; }

}

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

    /* s2 */
    #ci_s2 { padding-bottom:150px; }
    #int_arrow { top:calc(100% + 20px); width: 100%; }
    #int_arrow .slick-arrow { }

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

    /* s2 */
    #ci_s2 br { display: none; }





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

    /* common */
    #ci { text-align: center; padding-top: 80px; }
    .sub_tit { margin:0 0 40px; }
    .sub_tit b { font-size: 22px; }
    .sub_tit h2 { font-size: 42px; }
    .sub_p { font-size: 18px; }
    .sub_p + .sub_p { margin-top: 25px; }
    .sub_h3 { font-size: 23px; }

    /* ci */

    /* s1 */
    #ci_s1 { padding: 0 0 80px; }
    .s1_con .s1_img { margin: 45px 0; }
    .s1_desc .ci_tit { margin: 0 0 20px; justify-content: center; }

    .s1_desc .ci_tit .color { font-size: 18px; top: -7px; }
    .s1_desc .ci_tit .color span { width: 30px; height: 30px; top: 9px; }


    /* s2 */
    #ci_s2 { padding: 80px 0 100px; }
    .s2_con .sub_h3 + .sub_p { margin-top: 35px; }

    .s2_desc { margin: 60px 0 0; }
    .s2_desc .int_list { width:calc(100% + 20px); margin:35px 0 0 -10px; }
    .s2_desc .int_list li { margin: 0 10px; }

    #int_arrow { top: 55%; width:calc(100% + 70px); }
    #int_arrow .slick-arrow { border: 0; width: 30px; height: 30px; }





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

    /* common */
    #ci { padding-top: 50px; }
    .sub_tit { margin:0 0 30px; padding: 0 0 30px; }
    .sub_tit b { font-size: 18px; margin: 0 0 15px; }
    .sub_tit h2 { font-size: 30px; }
    .sub_p { font-size: 16px; }
    .sub_p br { display: none; }
    .sub_p + .sub_p { margin-top: 20px; }
    .sub_h3 { font-size: 19px; line-height: 1.65; }

    /* ci */

    /* s1 */
    #ci_s1 { padding: 0 0 60px; }
    .s1_con .s1_img { flex-wrap: wrap; margin: 30px 0; }
    .s1_con .s1_img > li { width: 100%; }
    .s1_con .s1_img > li + li { margin:20px 0 0; }

    .s1_desc .ci_tit .color { margin-left: 30px; font-size: 16px; top: -4px; }
    .s1_desc .ci_tit .color span { width: 25px; height: 25px; top: 7px; }


    /* s2 */
    #ci_s2 { padding: 60px 0 80px; }
    .s2_con .sub_h3 + .sub_p { margin-top: 30px; }

    .s2_desc { margin: 40px 0 0; }
    .s2_desc .int_list { width:calc(100% + 10px); margin:25px 0 0 -5px; }
    .s2_desc .int_list li { margin: 0px 5px; }
    .s2_desc .int_list li p { margin:15px auto 0; }

}