/*Content CSS*/
#certification {overflow: hidden;}
section > article{padding: 100px 0;}
section > article:nth-child(even){background-color: #f7f7f7}
.sub_inner{width: 100%; max-width: 1400px; padding: 0 50px; margin: 0 auto;}

.fs_50{font-size: 50px; font-weight: 700; color: #111; line-height: 1;}
.fs_26{font-size: 23px; font-weight: 600; color: #111;}
.fs_17{font-size: 17px; line-height: 1.53; color: #1d1d1f;}
.tit{text-align: center;}
.tit span{font-weight: 600; color: #00baff; margin-bottom: 15px; display: block; line-height: 1; text-transform: uppercase;}
.tit_dot{position: relative; padding-left: 18px;}
.tit_dot::before{content: ''; display: block; width: 8px; height: 8px; background-color: #0074f7; position: absolute; top:11px; left: 0;}


.cer_list{display: flex; flex-wrap: wrap; margin-top: 15px; padding-top: 30px; border-top: solid 1px #000; }
.cer_list li{width: calc(25% - 15px); margin-right: 20px;}
.cer_list li:nth-child(4n){margin-right: 0;}
.cer_list li:nth-child(n+5){margin-top: 80px;}

.cer_list li:last-child{margin-right: 0;}
.cer_list li a .img{position: relative; border: solid 1px #ddd;}
.cer_list li a .img::before{content: ''; display: block; width: 100%; height: 100%; border: solid 2px #0074f7; position: absolute; top: 0; left: 0; opacity: 0; transition: .3s;}
.cer_list li a .img::after{content: ''; display: block; width: 100%; height: 100%; border: solid 2px #0074f7; position: absolute; top: 0; left: 0; opacity: 0; transition: .3s; background: url('../img/more.png') 50% no-repeat rgba(0,0,0,.6);}

.cer_list li a .img img{width: 100%;}

.tab {margin-top: 100px;}
.tab + .tab{margin-top: 140px;}
.tab h4{display: flex; align-items: center; justify-content: center; width: 130px; height: 45px; border-radius: 25px; background-color: #0074f7; color: #0074f7; color: #fff;}
.tab_list{display: flex; justify-content: center; margin-top: 40px;}
.tab_list.fixed{position: fixed; width: 100%;  top: 0; left: 0; padding: 40px 50px; background-color: #fff; margin-top: 0; z-index: 1; border-bottom: solid 1px #ddd;}
.tab_list li + li{margin-left: 18px;}
.tab_list li a{display: flex; align-items: center; justify-content: center; width: 120px; height: 40px; border-radius: 20px; border: solid 1px #0074f7; color: #0074f7; font-size: 18px; font-weight: 500; transition: .3s;}
.tab_list li a.active{background-color: #0074f7; color: #fff; }

@media screen and (min-width:1025px) {
    .cer_list li:hover .img{border-color: #0074f7}
    .cer_list li:hover a .img::before{opacity: 1;}
    .cer_list li:hover a .img::after{opacity: 1;}

}
@media screen and (max-width:1400px) {
    #certification br:not(.space){display: none;}
    .fs_50{font-size: 45px;}
    .fs_24{font-size: 22px;}
    .fs_17{font-size: 16px;}
    .tit span{margin-bottom: 10px}


}

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

    .tab {margin-top: 80px;}
    .tab + .tab{margin-top: 100px;}

}

@media screen and (max-width:1024px) {
    section > article{padding: 50px 0;}
    .sub_inner{padding: 0 30px;}

    .fs_50{font-size: 40px;}
    .fs_26{font-size: 22px;}
    .fs_17{font-size: 15px;}

    .tit + .wrap{margin-top: 30px;}
    .tit_dot::before{top: 9px}

    .tab_list.fixed{padding: 30px; top: 60px;}
    .tab_list li {width: calc(33.3% - 5px); max-width: 120px;}
    .tab_list li + li{margin-left: 10px;}
    .tab_list li a{font-size: 17px;  width: 100%; height: 35px;}

    .tab {margin-top: 50px;}
    .tab + .tab{margin-top: 70px;}

    .cer_list li{width: calc(33.3% - 10px); margin-right: 15px;}
    .cer_list li:nth-child(4n){margin-right: 15px;}
    .cer_list li:nth-child(3n){margin-right: 0;}
    .cer_list li:nth-child(n+4){margin-top: 40px;}

}

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

}

@media screen and (max-width:640px) {
    .sub_inner{padding: 0 20px;}
    .fs_50{font-size: 35px;}
    .fs_26{font-size: 20px; }
    .fs_17{font-size: 14px;}

    .tit_dot{padding-left: 12px}
    .tit_dot::before{width: 6px; height: 6px; top: 9px}
    .tab_list.fixed{padding: 30px 20px;}

    .cer_list li{width: calc(50% - 5px); margin-right: 10px !important;}
    .cer_list li:nth-child(2n){margin-right: 0 !important;}
    .cer_list li:nth-child(n+3){margin-top: 30px;}


}