/*Content CSS*/
#product1{overflow: hidden;}
section > article{padding: 140px 0 135px; background-color: #000322;}
section > article.sec2{padding: 0 0 70px;}

.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'; }
.fs_30{font-size: 30px; font-weight: 700; color: #fff; font-family: 'Montserrat';}
.fs_20{font-size: 20px; font-weight: 700; color: #fff;}
.fs_15{font-size: 15px; font-weight: 300; color: #fff; line-height: 1.7;}
.sec2 .fs_50{font-family: 'Montserrat';}
.sub_slide_wrap{margin: 0 auto; width: calc(100% + 10px); left: -5px; margin-top: 30px; position: relative;}
.sub_slide_wrap .slick-slide{ border-radius: 10px; overflow:hidden; margin: 0 5px;}
.sub_slide_wrap .flex{display: flex; align-items: center; justify-content: space-between; width: calc(100% - 10px); margin: 20px auto 0;}
.sub_slide_wrap .flex p{font-weight: 500;}

.sub_arrow{display: flex;}
.sub_arrow button{font-size: 0; width: 38px; height: 38px; border-radius: 50%; border: solid 1px #fff; transition: .3s; position: relative;}
.sub_arrow button + button{margin-left: 15px;}
.sub_arrow button.slick-disabled{border: solid 1px rgba(255,255,255,.4);}
.sub_arrow button.slick-disabled::before{opacity: .4;}
.sub_arrow button::before{content: ''; display: block; width: 17px; height: 15px; 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_prev2.png') ;}
.sub_arrow button.slick-next::before{ background-image: url('../img/sub_next2.png') ;}

/* wrap */
.sub_slide_wrap + .wrap{margin-top: 80px;}

.flex_wrap{display: flex; margin-top: 45px;}
.tab_slide_wrap{width: calc(50% - 40px); position: relative; left: -5px; margin-right: 65px;}
.tab_slide_wrap .slick-slide{margin: 0 5px;}


.btns{display: flex; justify-content: center; align-items: center; margin-top: 28px;}
.btns i{font-size: 17px; color: #fff; }
.btns > button{line-height: 17px; max-height: 17px; 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;}

.info{width: calc(50% - 65px); padding-top: 40px;}
.info h4{padding-left: 15px;}
.info2{margin-top: 75px;}
.info2 h4{padding-left: 52px; align-self: center;}
.bar_list{border-top: solid 1px rgba(230,230,230,.3); margin-top: 18px;}
.bar_list > li{display: flex; border-bottom: solid 1px rgba(230,230,230,.3); padding: 19px 0 19px 42px; min-height: 100px;}
.bar_list li h5{color: #00ccff; font-weight: 500; min-width: 109px;text-align: center; line-height: 1.6; margin-right: 85px; align-self: center;}
.dot_list2{display: flex; flex-wrap: wrap; flex-grow: 1;}
.dot_list2 li{position: relative; padding-left: 15px; width: 60%; margin-top: 10px; align-self: center;}
.dot_list2 li:nth-child(-n+2){margin-top: 0;}
.dot_list2 li:nth-child(odd){width: 40%;}
.dot_list2 li::before{content: ''; display: block; width: 5px; height: 5px; background-color: #fff; border-radius: 50%; position: absolute; top: 12px; left: 0;}



/* dot_list */
.dot_list{margin-top: 14px; border-top: solid 1px rgba(230,230,230,.9);}
.dot_list li{border-bottom: solid 1px rgba(230,230,230,.3); padding: 26px 15px;}
.dot_list li:last-child{margin: 0;}
.dot_list li span{position: relative; padding-left: 15px;}
.dot_list li span::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;}
.fs_16{font-size: 16px; line-height: 1.7; font-weight: 300; color: #fff;}
h4.fs_17{font-weight: 700;}

/* display_tab */
.display_tab{display: flex; margin-top: 40px;}
.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;}

/* tab */
.tab{display: none;}
.tab.active{display: block;}





@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) {
    .tab_slide_wrap{width: calc(60% - 40px); margin-right: 40px;}
    .tab_slide_wrap .slick-slide img{width: 100%;}
    .info{width: 40%; padding-top: 20px;}
    .dot_list li{padding: 20px 15px;}

    .fs_30{line-height: 1.5;}
}
@media screen and (max-width: 1280px) {

    .fs_50{font-size: 45px;}
    .fs_30{font-size: 23px;}
    .fs_20{font-size: 18px;}
    .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;}

    .btns{margin-top: 20px;}

    .dot_list{margin-top: 20px;}
    .dot_list li span::before{top: 9px;}
    .display_tab li a{width: 120px;height: 38px;}

    .bar_list > li{padding: 19px; min-height: 0;}
    .bar_list li h5{margin-right: 50px;}

    .dot_list2 li{width: calc(50% - 10px);}
    .dot_list2 li::before{top: 11px;}
    .dot_list2 li:nth-child(odd){margin-right: 20px;}
}
@media screen and (max-width: 1024px) {
    section > article{padding: 50px 0;}
    section > article.sec2{padding: 0 0 50px;}
    .sub_inner{padding: 0 30px;}
    .fs_50{font-size: 30px; text-align: center;}
    .fs_30{font-size: 20px;}
    .fs_20{font-size: 17px;}
    .fs_17{font-size: 14px;}
    .fs_16{font-size: 13px;}
    .fs_15{font-size: 13px;}


    .dot_list{margin-top: 15px;}
    .dot_list li span{padding-left: 10px;}
    .dot_list li span::before{width: 4px; height: 4px;}
    .display_tab{margin-top: 30px;}
    .display_tab li{margin-right: 10px; flex-grow: 1;}
    .display_tab li a{width: 100%; height: 35px;}
    .flex_wrap{margin-top: 30px;}

    .tab_slide_wrap{width: calc(60% - 20px); margin-right: 20px;}
    .info{padding-top: 0;}
    .info2{margin-top: 50px;}
    .info h4{padding-left: 0;}
    .info2 h4{padding-left: 0;}
    .dot_list li{padding: 10px;}

    .dot_list2 li{width: 50%;  padding-left: 10px;}
    .dot_list2 li:last-child{margin-bottom: 0;}
    .dot_list2 li:nth-child(odd){margin-right: 20px; width: calc(50% - 20px);}
    .dot_list2 li::before{width: 4px; height: 4px; top: 10px}

    .sub_arrow button{width: 30px; height: 30px;}
    .sub_arrow button + button{margin-left: 10px;}
    .sub_arrow button::before{width: 14px; height: 12px;}

}
@media screen and (max-width: 960px) {
    .dot_list2 li{width: 100%; margin: 0 0 10px 0;}
    .dot_list2 li:nth-child(odd){margin-right: 0; width: 100%;}
}
@media screen and (max-width: 768px) {
    .flex_wrap{flex-direction: column; }
    .tab_slide_wrap{width: calc(100% + 10px); margin-right: 0;}
    .tab_slide_wrap .slick-slide img{width: 100%;}
    .info{width: 100%; margin-top: 15px;}
    .display_tab li{width: 33%; margin-right: 10px;}
    .display_tab li a{width: 100%;}
}
@media screen and (max-width: 640px) {
    .sub_inner{padding: 0 20px;}
    .fs_50{font-size: 25px;}
    .fs_30{font-size: 18px;}
    .fs_20{font-size: 16px;}
    .fs_17{font-size: 13px;}
    .fs_15{font-size: 13px;}
    .dot_list{margin-top: 10px;}
    .display_tab {flex-wrap: wrap;}
    .display_tab li{flex-grow: initial; width: calc(33% - 7px);}
    .display_tab li:nth-child(3n){margin-right: 0;}
    .display_tab li:nth-child(n+4){margin-top: 10px;}

    .bar_list > li{display: block; padding: 15px 10px;}
    .bar_list li h5 br{display: none;}
    .bar_list li h5{width: 100%; text-align: left; margin-bottom: 10px;}

    .dot_list2 li{margin-bottom: 5px;}
}