/* common */
#solutions { overflow: hidden; margin-top: 120px; padding-top: 50px; }

.tab_area { }
.tab_list { display: flex; align-items: center; justify-content: center; margin:0 0 80px; }
.tab_list > li { width:265px; margin-right: 20px; }
.tab_list > li button { display: block; width:100%; border-bottom: 2px solid #e9e9e9; font-size: 16px; font-weight: 500; color: #000;
 padding:10px; transition: all .3s; }
.tab_list > li button.active { border-color: #ff6127 !important; }
.tab_list > li:last-child { margin-right: 0; }
.tab_list > li:hover button { border-color: #000; }

.sub_tit { text-align: center; margin:0 0 50px; }
.sub_tit h1 { font-size: 44px; font-weight: bold; line-height: 1.45; }
.sub_tit p { font-size: 22px; font-weight: 300; margin:25px 0 0; }

.con_wrap > div { padding:120px 0; }
.con_wrap > div:first-of-type { padding-top: 0; }
.con_wrap > div:last-of-type { padding-bottom: 150px; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video_wrap { position:relative; z-index: 2; }

/* contents */
.line_tit { position:relative; display: flex; align-items: flex-end; border-bottom: 1px solid #ddd; padding:0 0 20px; margin:0 0 35px; }
.line_tit::after { content:""; position:absolute; left:0; width:100px; bottom:-1px; height: 2px; background:#ff6127; }
.line_tit strong { display: inline-block; margin-left: 25px; text-align: left; font-size: 16px; color: #ff6127; line-height: 22px; position:relative; top:-10px; }
.line_tit strong span { color: #aeaeae; }
.sub_p { font-size: 18px; font-weight: 300; line-height: 30px; }
.line_tit + div .sub_p { font-weight: normal; }

.dot_list > li { position:relative; padding-left: 11px; margin:0 0 20px; font-size: 16px; font-weight: 300; letter-spacing: -0.35px; color: #666; line-height: 24px; }
.dot_list > li:last-child { margin-bottom: 0; }
.dot_list > li::before { content:""; position:absolute; left:0; top:11px; width:3px; height: 3px; background:#ff6127; }
.line_tit + div .dot_list { margin:25px 0 0; }

.con_wrap > div { border-bottom: 1px solid #ddd; }


/* s1 */
.c1_img {text-align: center;}
.c1_list { position:relative; display: flex; flex-wrap: wrap; }
.c1_list::after { content:""; position:absolute; left:50%; transform: translate(-50%,-50%); top:50%; width:353px; height: 353px; background:url('../img/c1_logo.png') no-repeat center #fff; box-shadow: -28px 0px 18px 0 rgba(0, 0, 0, 0.32); border-radius:50%; display:none; }
.c1_list::before { content:""; position:absolute; left:50%; transform: translate(-50%,-50%); top:50%; width:530px; height: 530px; background:url('../img/c1_round.png') no-repeat center / 100% auto; border-radius:50%; z-index: 2; }
.c1_list > li { width:50%; padding-top: 25px; line-height: 1; transition: all .3s; }
.c1_list > li.li1,
.c1_list > li.li2 { height: 266px; }
.c1_list > li.li3,
.c1_list > li.li4 { height: 264px; }
.c1_list > li:nth-child(2n) { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }

.c1_list > li .line { position:relative; height: 2px; background:#a6a6a6; transition: all .3s; margin:0 0 40px;  }
.c1_list > li .line::before { content:""; position:absolute; top:-5px; width:12px; height:12px; border-radius: 50%; background:#a6a6a6; transition: all .3s; }
.c1_list > li:nth-child(2n-1) .line::before { left:0; }
.c1_list > li:nth-child(2n) .line::before { right:0; }

.c1_list > li.li1 .line { width:calc(436px + 50px); }
.c1_list > li.li2 .line { width:calc(436px + 50px); }
.c1_list > li.li3 .line { width:calc(436px - 50px); }
.c1_list > li.li4 .line { width:calc(436px - 50px); }

.c1_list > li h2 { font-size: 33px; font-weight: bold; letter-spacing: -0.83px; color: #000; transition: all .3s; }
.c1_list > li h3 { font-size: 16px; font-weight: 300; letter-spacing: -0.4px; color: #666; margin:20px 0 18px; }
.c1_list > li p { font-size: 16px; font-weight: 300; letter-spacing: -0.4px; color: #000; line-height: 24px; }

/* color */
/* .c1_list > li.li1 { background:url('../img/c1_cer1.png') no-repeat right bottom; }
.c1_list > li.li2 { background:url('../img/c1_cer2.png') no-repeat left bottom; }
.c1_list > li.li3 { background:url('../img/c1_cer3.png') no-repeat right top; }
.c1_list > li.li4 { background:url('../img/c1_cer4.png') no-repeat left top; } */

.c1_list > li.li1 .line,
.c1_list > li.li1 .line:before { background:#ff530e; }
.c1_list > li.li2 .line,
.c1_list > li.li2 .line:before { background:#2b3942; }
.c1_list > li.li3 .line,
.c1_list > li.li3 .line:before { background:#425e6f; }
.c1_list > li.li4 .line,
.c1_list > li.li4 .line:before { background:#859ba2; }

.c1_list > li.li1 h2 { color:#ff530e; }
.c1_list > li.li2 h2 { color:#2b3942; }
.c1_list > li.li3 h2 { color:#425e6f; }
.c1_list > li.li4 h2 { color:#879da5; }



/* s2 */
.s2 .top { display: flex; }
.s2 .left { width:610px; margin-right: 90px; text-align: left; }
.s2 .right { width:700px; }

.s2 .img_box { border:1px solid #ddd; padding:35px 0; }
.s2 .bg_list { margin:25px 0 0; display: flex; justify-content: space-between; }
.s2 .bg_list > li { margin-right: 40px; width:205px; height: 75px; line-height: 75px; text-align: center; font-size: 16px; font-weight: bold; letter-spacing: -0.45px;  color: #fff; background:url('../img/xms_bg_b.png') no-repeat center / 100% auto; white-space: nowrap; }
.s2 .bg_list > li:last-child { margin-right: 0; }
.s2 .bg_list > li:nth-child(2n) { background-image: url('../img/xms_bg_or.png'); }

.s2 .video_wrap { margin:90px 0 0; }


/* s3 */
.s3 .flex { display: flex; justify-content: space-between; margin:65px 0 0; }
.s3 .flex .img { margin-right: 20px; }
.s3 .flex .video_wrap { width:55%; }


/* s4 */
.s4 .top { display: flex; justify-content: space-between; margin:0 0 60px; }
.s4 .top .left { width:calc(100% - 590px); margin-right: 70px; }
/* .s4 .top .left .sub_p { white-space: nowrap; } */

.s4 .bot .sub_p { color: #44546a; font-weight: normal; margin:0 0 40px; }
.s4 .bot .flex { display: flex; justify-content: space-between; }
.s4 .bot .left { margin-top: 50px; position:relative; width: 330px; margin-right: 150px; border:1px solid #ddd; }
.s4 .bot .left::after { content:""; position:absolute; right:-31%; top:50%; transform: translateY(-50%); width:39px; height: 46px; background: url('../img/arrow_or.png') no-repeat center; }
.s4 .bot .left strong { display: block; width:calc(100% - 60px); margin:-50px auto 30px; background:#44546a; padding:20px; text-align: center; font-size: 20px; font-weight: bold; border-radius: 10px; color:#fff; }
.s4 .bot .left > img { display: block; margin:0 auto; text-align: center; padding:0 30px; }
.s4 .bot .left .dot_list { margin:30px 0 0; padding:30px 30px 58px; background:#f7f7f7; }
.s4 .bot .left .dot_list > li { margin:0 0 10px; }
.s4 .bot .right { border:1px solid #ddd; padding:30px 55px; }


/* s5 */
.s5 .inner { display: flex; justify-content: space-between; }
.s5 .left { width:650px; margin-right: 50px; }






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


    /* contents */
    /* s1 */
    .c1_list > li.li1,
    .c1_list > li.li2 { height: 300px; }

    .c1_list > li.li1 { padding-right: 280px; }
    .c1_list > li.li2 { padding-left: 280px; }
    .c1_list > li.li3 { padding-right: 280px; }
    .c1_list > li.li4 { padding-left: 280px; }

    /* .c1_list::after { display: none; }
    .c1_list::before { display: block; } */

    .c1_list > li .line { margin: 0 0 25px; }
    .c1_list > li h3 { line-height: 22px; margin: 15px 0 13px; }
    .c1_list p br { display: none; }


    /* s2 */
    .s2 p br { display: none; }
    .s2 .dot_list li br { display: none; }

    .s2 .left { width:calc(50% - 25px); margin-right: 50px; }
    .s2 .right { width:calc(50% - 25px); }

    .s2 .bg_list > li { margin-right: 30px; font-size: 14px; }

    /* s3 */
    .s3 .flex { align-items: center; }
    .s3 .flex .img { width: calc(50% - 20px); }


    /* s4 */
    .s4 .top .left .sub_p { white-space: normal; }
    .s4 .top .left { width: calc(100% - 570px); margin-right: 50px; }

    .s4 .bot .left { margin-right: 50px; }
    .s4 .bot .right { padding: 30px; display: flex; align-items: center; justify-content: center; }



}
@media screen and (max-width: 1420px) {
    /* s1 */
    .s1 .sub_h1 br { display: none; }
    .s1 .sub_tit p br { display: none; }

    .s4 .bot .left::after { right:-18%; }

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

    .s4 .bot .left strong { font-size: 18px; }
    .s4 .bot .left::after { right:-15%; }

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

    /* common */
    #solutions { margin-top: 60px; }

    .tab_list { margin:0 auto 50px; }
    .tab_list > li { width:150px; }
    .tab_list > li button { font-size: 15px; }

    .sub_tit h1 { font-size: 35px; }
    .sub_tit p { font-size: 19px; margin:20px 0 0; line-height: 29px; }

    .con_wrap > div { padding:80px 0; }
    .con_wrap > div:last-of-type { padding-bottom: 100px; }


    /* contents */
    .line_tit { margin: 0 0 30px; }
    .line_tit strong { margin-left: 20px; font-size: 14px; line-height: 20px; }
    .line_tit strong br { display: none; }
    .sub_p { font-size: 16px; }
    .line_tit + div .dot_list { margin: 20px 0 0; }

    /* s1 */
    .c1_list::before { width: 400px; height: 400px; top:0; transform: translateX(-50%); }

    .c1_list > li.li1,
    .c1_list > li.li2 { height: auto; }
    .c1_list > li.li3,
    .c1_list > li.li4 { height: auto; margin-top: 20px; }

    .c1_list > li.li1 { padding-right: 210px; text-align: left; }
    .c1_list > li.li2 { padding-left: 210px; text-align: right; }
    .c1_list > li.li3 { padding-right: 160px; text-align: left; }
    .c1_list > li.li4 { padding-left: 160px; text-align: right; }

    .c1_list > li h2 { font-size: 26px; }
    .c1_list > li h3 { line-height: 20px; font-size: 15px; }
    /* .c1_list > li p { font-size: 15px; line-height: 23px; } */

    .c1_list > li.li1 .line { width: calc(100% + 200px); }
    .c1_list > li.li2 .line { width: calc(100% + 200px); }


    /* s2 */
    .s2 .top { flex-wrap: wrap; }
    .s2 .left { width: 100%; margin: 0 0 50px; }
    .s2 .right { width:100%; max-width: 80%; margin:0 auto; }

    .s2 .img_box { text-align: center; }
    .s2 .bg_list > li { font-size: 15px; }


    /* s4 */
    .s4 .top { flex-wrap: wrap; }
    .s4 .top .left { width:100%; margin:0 0 40px; }

    .s4 .bot .sub_p { margin: 0 0 60px; }
    .s4 .bot .flex { flex-wrap: wrap; }
    .s4 .bot .left { width: 100%; margin:0 0 60px; }
    .s4 .bot .left::after { right: 50%; top:calc(100% + 10px); transform: translateX(50%) rotate(90deg) scale(0.8); }
    .s4 .bot .left strong { max-width: 400px; padding: 15px; font-size: 17px; margin: -27px auto 30px; }
    .s4 .bot .left strong br { display: none; }
    .s4 .bot .left .dot_list { padding: 30px; }
    .s4 .bot .right { width:100%; }


    /* s5 */
    .s5 .inner { align-items: flex-end; }




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

    .c1_list > li { padding-top: 10px; }
    .c1_list > li.li3 { margin-top: 10px; padding-right: 80px; }
    .c1_list > li.li4 { margin-top: 10px; padding-left: 80px; }

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

    /* common */
    #solutions { padding-top: 30px; }

    .tab_list > li { flex:1; margin-right: 10px; }
    .tab_list > li button { padding: 5px; font-size: 13px; }

    .sub_tit { margin: 0 0 30px; }
    .sub_tit h1 { font-size: 28px; }
    .sub_tit p { font-size: 16px; line-height: 28px; }

    .con_wrap > div { padding:50px 0; }
    .con_wrap > div:last-of-type { padding-bottom: 80px; }


    /* contents */
    .sub_p { font-size: 15px; line-height: 26px; }

    .line_tit { flex-direction: column; align-items: flex-start; padding: 0 0 18px; }
    .line_tit strong { margin: 10px 0 0; font-size: 13px; line-height: 20px; }
    .line_tit + div .dot_list { margin: 15px 0 0; }

    .dot_list > li { margin: 0 0 15px; font-size: 14px; }


    /* s1 */
    .s1 .sub_tit h1 { font-size: 22px; line-height: 33px; }

    .c1_list::before { display: none; }


    .c1_list { margin:30px 0 0; }
    .c1_list > li { padding:0 5px !important; text-align: center !important; margin:10px 0 20px !important; }
    .c1_list > li:last-child { margin-bottom: 0; }
    .c1_list > li:nth-child(2n) { align-items: center; }

    .c1_list > li .line { margin: 0 0 18px; width:100% !important; }
    .c1_list > li .line::before { display: none; }

    .c1_list > li h2 { font-size: 22px; }
    .c1_list > li p { font-size: 14px; line-height: 22px; }



    /* s2 */
    .s2 .left { margin: 0 0 35px; }
    .s2 .right { max-width: 100%; }
    .s2 .bg_list { margin:0; }
    .s2 .bg_list > li { font-size: 10px; margin-right: 5px; }
    .s2 .video_wrap { margin: 20px 0 0; }


    /* s3 */
    .s3 .flex { margin: 35px 0 0; flex-wrap: wrap; }
    .s3 .flex .img { width:100%; margin:0 auto 30px; text-align: center; }
    .s3 .flex .video_wrap { width: 100%; }


    /* s4 */
    .s4 .top { margin: 0 0 40px; }
    .s4 .top .left { margin: 0 0 30px; }
    .s4 .top .img { width:100%; }
    .s4 .top .img img { width:100%; }

    .s4 .bot .sub_p { margin: 0 0 50px; }
    .s4 .bot .left strong { width: calc(100% - 40px); font-size: 15px; }
    .s4 .bot .left > img { padding: 0; }
    .s4 .bot .left .dot_list { padding: 20px; }
    .s4 .bot .left .dot_list > li { margin: 0 0 5px; }

    .s4 .bot .left { margin: 0 0 45px; }
    .s4 .bot .left::after { top:100%; transform: translateX(50%) rotate(90deg) scale(0.6); }
    .s4 .bot .right { padding:20px; }


    /* s5 */
    .s5 .inner { flex-wrap: wrap; align-items: flex-start; }
    .s5 .left { width: 100%; margin:0 0 30px; }



}