@charset "utf-8";
main {}
main article { padding: 100px 0; }
main article .title { text-align: center; }
main article .title h3 { font-size: 35px; font-weight: 500; }
main article .title p { padding: 15px 0 65px;}


@media (max-width:991px){
    main article { padding: 90px 0; }
    main article .title h3 { font-size: 33px;}
}
@media (max-width:768px){
    main article { padding: 70px 0; }
    main article .title h3 { font-size: 31px;}
    main article .title p { padding: 10px 0 55px;}
}
@media (max-width:576px){
    main article { padding: 60px 0; }
    main article .title h3 { font-size: 29px;}
    main article .title p { padding: 5px 0 40px; }
}

main .cb-solution {}
main .cb-solution .content-wrap { position: relative; display: flex; justify-content: right; margin: 0 auto; width: 100%; max-width: 1300px; }
main .cb-solution .content-wrap .img { position: absolute; left: 0; top: 0; width: 46.15384%;}
main .cb-solution .content-wrap .img img {width: 100%;}

main .cb-solution .content-wrap .txt { position: relative; z-index: 2;  margin: 70px 0 0;  width: 65.53%; background: linear-gradient(160deg, rgba(1,65,162,1) 0%, rgba(22,118,193,1) 100%); }
main .cb-solution .content-wrap .txt a { display: block; position: relative; z-index: 2; width: 100%; height: 100%; padding: 40px 70px 105px; color: #fff; transition: .2s;}
main .cb-solution .content-wrap .txt a:hover { box-shadow: 5px 5px 10px rgb(0 0 0 / 50%);}
main .cb-solution .content-wrap .txt a .slogun { padding: 0 0 45px; font-size: 35px; font-weight: 500; line-height: 1.5;}
main .cb-solution .content-wrap .txt a p {}
main .cb-solution .content-wrap .txt a p span { display: block;}
main .cb-solution .content-wrap .txt:before,
main .cb-solution .content-wrap .txt:after,
main .cb-solution .content-wrap .txt a:after { content:''; display: block; position: absolute; background-repeat: no-repeat; background-size: contain;}
main .cb-solution .content-wrap .txt:before { opacity: .4; right: 50px; top: 50px;  width: 18.5%; height: 188px; background-image: url('/img/cb/cb_solution_logo.png'); background-position: center top;}
main .cb-solution .content-wrap .txt:after { right: 0; bottom: 0; width: 59.76%; height: 100px; background-image: url('/img/cb/cb_solution_logo_txt.png'); background-position: right bottom;}
main .cb-solution .content-wrap .txt a:after { right: 30px; bottom: 40px; width: 70px; height: 47px; background-image: url('/img/cb/cb_solution_arrow.png'); background-position: right bottom;}
main .cb-solution .content-wrap .txt a:hover:after { animation:twins_arrow 1s infinite linear both}

@keyframes twins_arrow {
   0% { transform:translateX(0);}
   25% { transform:translateX(-10px);}
   50% { transform:translateX(0px);}
   75% { transform:translateX(10px);}
   100% { transform:translateX(0);}
}
@media (max-width:1320px){
    main .cb-solution { margin: 0 -10px;}
}
@media (max-width:991px){
    main .cb-solution .content-wrap .img { width: 60%;}
    main .cb-solution .content-wrap .txt { width: 80%;}
    main .cb-solution .content-wrap .txt a { padding: 40px 60px 95px;}
    main .cb-solution .content-wrap .txt a .slogun { font-size: 33px;}
    main .cb-solution .content-wrap .txt:before {right: 40px;}
}
@media (max-width:768px){
    main .cb-solution .content-wrap .img { width: 80%;}
    main .cb-solution .content-wrap .txt { margin: 100px 0 0; width: 95%;}    
    main .cb-solution .content-wrap .txt a .slogun { padding: 0 0 35px; font-size: 31px;}
    main .cb-solution .content-wrap .txt a:after {width: 60px;}
}
@media (max-width:576px){
    main .cb-solution .content-wrap .img { width: 95%;}
    main .cb-solution .content-wrap .txt { margin: 70px 0 0; }
    main .cb-solution .content-wrap .txt a { padding: 50px 40px 60px;}
    main .cb-solution .content-wrap .txt a .slogun { padding: 0 0 20px; font-size: 28px;}
    main .cb-solution .content-wrap .txt:before {right: 20px;}
    main .cb-solution .content-wrap .txt a:after {width: 50px;}
}
@media (max-width:480px){    
    main .cb-solution .content-wrap .txt { margin: 50px 0 0;  }
    main .cb-solution .content-wrap .txt a { padding: 40px 30px 50px;}
    main .cb-solution .content-wrap .txt a .slogun { padding: 0 0 15px; font-size: 26px;}    
    main .cb-solution .content-wrap .txt a:after {width: 40px;}
}
@media (max-width:400px){    
    main .cb-solution .content-wrap .txt { margin: 50px 0 0;  }
    main .cb-solution .content-wrap .txt a { padding: 40px 20px 50px;}
    main .cb-solution .content-wrap .txt a .slogun { padding: 0 0 15px; font-size: 22px;}   
    main .cb-solution .content-wrap .txt a:after { display: none;} 
}
main .product {  background: #f6f7f8;}

main .contact { position: relative; background: url('/img/cb/contact_bg.jpg') no-repeat center  / cover; background-attachment: fixed;}
main .contact .title { color: #fff;}
main .contact .content-wrap a { display: block; padding: 16px 0; margin: -30px auto 0;  width: 270px;  background: #0c70b5; color: #fff; text-align: center; ; border-radius: 30px; transition: .2s;}
main .contact .content-wrap a:hover { background: #102d4d;}

@media (max-width:768px){
    main .contact .content-wrap a { padding: 13px 0;  margin: -25px auto 0;  width: 240px; }
}
@media (max-width:576px){
    main .contact .content-wrap a { padding: 13px 0;  margin: -15px auto 0;  width: 240px; }
}


main .certificate { position: relative;}
main .certificate:after {content:''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background: #f6f7f8;}
main .certificate .nt-container{ position: relative; z-index: 2;}
main .certificate .more { text-align: center;}
main .certificate .more a { font-weight: 400; }
main .certificate .more a i { display: inline-block; position: relative; top: 2px; margin: 0 10px 0 0; width: 30px; height: 30px; background: #0c70b5; line-height: 30px; text-align: center; border-radius: 50%; color:#fff; }
main .certificate .more a:hover i { background: #102d4d; }
@media (max-width:768px){
    main .certificate:after { display: none;}
}

main .new .title h3 b { color: #0c70b5; font-weight: 700;}