/*Content CSS*/
#solution2{overflow: hidden;}
section > article{padding: 140px 0; background-color: #000322;}
.sub_inner{width: 100%; max-width: 1400px; padding: 0 50px; margin: 0 auto;}

.fs_50{font-size: 50px; font-weight: 700; color: #fff; font-family: 'NanumSquare'; text-align: center;}
.fs_30{font-size: 30px; font-weight: 700; color: #fff; font-family: 'Montserrat';}

.sub_slide_wrap{margin: 0 auto; width: calc(100% + 10px); left: -5px;max-width: 960px; margin-top: 40px; position: relative;}
.sub_slide_wrap .slick-slide{ border-radius: 20px; overflow:hidden; margin: 0 5px;}
.sub_arrow{width: calc(100% + 280px); display: flex; justify-content: space-between; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.sub_arrow button{font-size: 0; width: 100px; height: 100px; border-radius: 50%; border: solid 1px #fff; transition: .3s; position: relative;}
.sub_arrow button::before{content: ''; display: block; width: 21px; height: 40px; background:50% / cover no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sub_arrow button.slick-prev::before{ background-image: url('../img/sub_prev.png') ;}
.sub_arrow button.slick-next::before{ background-image: url('../img/sub_next.png') ;}

/* wrap */
.sub_slide_wrap + .wrap{margin-top: 80px;}
.wrap{margin-top: 100px;}
.wrap2{display: block;}
.flex_wrap{display: flex;}
.wrap > h3{margin-bottom: 25px;}
.tab_slide_wrap{width: calc(50% - 40px); position: relative; left: -5px; margin-right: 65px;}
.tab_slide_wrap .slick-slide{margin: 0 5px;}
.long .text{padding-top: 10px;}
.text{padding-top: 35px; }
.text h4{margin-top: 25px;}

.sm_tab_ul{display: flex; margin: 23px 0 25px; }
.sm_tab_ul li{margin-right: 16px;}
.sm_tab_ul li:first-child{margin-left: 0;}
.sm_tab_ul li:last-child{margin-right: 0;}
.sm_tab_ul li a{position: relative; padding-left: 20px; letter-spacing: -.3px; cursor: pointer;}
.sm_tab_ul li a.active{font-weight: 400;}
.sm_tab_ul li a.active::before{content: ''; display: block; width: 8px; height: 8px; background-color: #2a00ff; border-radius: 50%; position: absolute; top: 9px; left: 0;}


.btns{display: flex; justify-content: center; align-items: center; margin-top: 28px;}
.btns i{font-size: 17px; color: #fff; }
.btns > button{line-height: 11px; max-height: 10px; min-width: 17px;}
.btns .play{display: none;}
.dots .slick-dots{display: flex;}
.dots .slick-dots li{margin-right: 9px;}
.dots .slick-dots li:last-child{margin-right: 9px;}
.dots .slick-dots li button{display: block; font-size: 0; background-color: #fff; opacity: .4; width: 30px; height: 2px;}
.dots .slick-dots li.slick-active button{opacity: 1;}

/* dot_list */
.dot_list{margin-top: 20px;}
.dot_list li{position: relative; padding-left: 15px; margin-bottom: 21px;}
.dot_list.long_list li{margin-bottom: 10px;}
.dot_list li:last-child{margin: 0;}
.dot_list li::before{content: ''; display: block; width: 5px; height: 5px; background-color: #fff; border-radius: 50%; position: absolute; top: 12px; left: 0;}
.fs_17{font-size: 17px; line-height: 1.7; font-weight: 300; color: #fff;}
h4.fs_17{font-weight: 700;}
.fs_16{font-size: 16px; line-height: 1.7; font-weight: 300; color: #fff;}

/* display_tab */
.display_tab{display: flex;}
.display_tab li{margin-right: 15px;}
.display_tab li:last-child{margin-right: 0;}
.display_tab li a{display: flex; align-items: center; justify-content: center; border-radius: 21px; border: solid 1px #fff; cursor: pointer; transition: .3s; color: #fff; width: 140px; height: 42px;}
.display_tab li a.active{background-color: #2a00ff; font-weight: 500; border-color: #2a00ff;}
.fs_15{font-size: 15px;}
.display_tab + .tab_wrap{padding-left: 14px;}

/* tab */
.tab{display: none;}
.tab.active{display: block;}
.sm_tab{display: none; padding-left: 16px;}
.sm_tab.active{display: block;}
.sm_tab .dot_list{margin-top: 0;}
.sm_tab p + .dot_list{margin-top: 15px;}




@media screen and (min-width: 1025px) {
    .display_tab li:hover a{background-color: #2a00ff; border-color: #2a00ff;}
    .sub_arrow button:hover{background-color: #2a00ff; border-color: #2a00ff;}

}
@media screen and (max-width: 1400px) {
    .sub_arrow{width: calc(100% + 240px);}
    .sub_arrow button{width: 80px; height: 80px; }
    .sub_arrow button::before{width: 16px; height: 30px;}

    .tab_slide_wrap{width: calc(50% - 40px); margin-right: 40px;}
    .text{width: 50%; padding-top: 0;}

    .fs_30{line-height: 1.5;}

    .sm_tab_ul{margin: 18px 0; flex-wrap:wrap;}
    .sm_tab_ul li{margin: 5px 10px 0 0;}
}
@media screen and (max-width: 1280px) {

    .fs_50{font-size: 45px;}
    .fs_30{font-size: 23px;}
    .fs_17{font-size: 15px;}
    .fs_16{font-size: 14px;}
    .fs_15{font-size: 14px;}

    .sub_slide_wrap{margin-top: 30px; max-width: initial;}
    .sub_slide_wrap .slick-slide img{width: 100%;}

    .sub_dot{margin-top: 25px;}
    .sub_dot .slick-dots{display: flex; justify-content: center; align-items: center;}
    .sub_dot .slick-dots li{margin-right: 23px;}
    .sub_dot .slick-dots li:last-child{margin-right: 0}
    .sub_dot .slick-dots li button{font-size: 0; width: 9px; height: 9px; opacity: .3; background-color: #fff; border-radius: 50%; transition: .3s;}
    .sub_dot .slick-dots li.slick-active button{width: 26px; height: 8px; border-radius: 15px; opacity: 1;}

    .wrap{margin-top: 80px;}
    .wrap > h3{margin-bottom: 15px;}
    .long .text{padding-top: 0;}
    .text h3{margin-bottom: 15px;}
    .text h4{margin-top: 20px;}

    .btns{margin-top: 20px;}

    .dot_list{margin-top: 15px;}
    .dot_list li{margin-bottom: 12px;}

    .display_tab li a{width: 120px;height: 38px;}


    .sm_tab_ul li a{padding-left: 14px;}
    .sm_tab_ul li a.active::before{width: 6px; height: 6px; top: 8px;}
    .sm_tab{padding-left: 0;}
    .sm_tab p + .dot_list{margin-top: 10px;}




}
@media screen and (max-width: 1024px) {
    section > article{padding: 50px 0;}
    .sub_inner{padding: 0 30px;}
    .fs_50{font-size: 30px;}
    .fs_30{font-size: 20px;}
    .fs_17{font-size: 14px;}
    .fs_16{font-size: 13px;}
    .fs_15{font-size: 13px;}

    .text h3{margin-bottom: 13px;}
    .text h4{margin-top: 15px;}
    .text h4 + .dot_list{margin-top: 8px;}
    .dot_list{margin-top: 15px;}
    .sm_tab p + .dot_list{margin-top: 5px;}
    .dot_list.long_list li{margin-bottom: 6px;}
    .dot_list li{padding-left: 10px; margin-bottom: 6px;}
    .dot_list li::before{width: 4px; height: 4px; top: 11px;}
    .display_tab li{margin-right: 10px;}
    .display_tab li a{width: 110px; height: 35px;}

    .wrap{margin-top: 30px;}
    .wrap > h3{display: block; margin-bottom: 15px;}

    .tab_slide_wrap{width: calc(50% - 20px); margin-right: 20px;}

}
@media screen and (max-width: 768px) {
    .wrap{flex-direction: column-reverse; margin-top: 45px;}
    .flex_wrap{flex-direction: column-reverse; }
    .tab_slide_wrap{width: 100%; margin-right: 0; margin-top: 20px;}
    .tab_slide_wrap .slick-slide img{width: 100%;}
    .text{width: 100%;}
    .display_tab li{width: 50%; margin-right: 10px;}
    .display_tab li a{width: 100%;}
    .sub_slide_wrap + .wrap{margin-top: 50px;}



}
@media screen and (max-width: 640px) {
    .sub_inner{padding: 0 20px;}
    .fs_50{font-size: 25px;}
    .fs_30{font-size: 18px;}
    .fs_17{font-size: 13px;}
    .fs_15{font-size: 13px;}

    .wrap{margin-top: 40px;}

}