@charset "utf-8";

#tnbPage {position:absolute; top:8%; bottom:8%; left:50%; width:1420px; height:auto;  margin-left:-710px; border-radius:10px; background:#fff;}
#tnbPage .modal__close {position:absolute;right: 35px;top: 35px;}
#tnbPage .modal__close button {position:relative; width:30px; height:30px; font-size:0;}
#tnbPage .modal__close button:before,
#tnbPage .modal__close button:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
#tnbPage .modal__close button:before {width:100%;height: 2px;background: #555;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
#tnbPage .modal__close button:after {width: 2px;height:100%;background: #555;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
#tnbTap {position: relative;height:100%;}
#tnbTap:before{display:block; position:absolute; left:-30px; bottom:5px; z-index:10; content:''; width:116px; height:146px;background:url(/clean/img/tnb/home_ico5.png)no-repeat; animation: objAC1 4s both infinite;-webkit-animation: objAC1 4s both infinite;}
#tnbTap .lefttit {float: left;position:relative;width:300px;height: 100%;padding: 25px 0 0;text-align:center;}
#tnbTap .lefttit:before {display:block;position:absolute;left: 0;top:70px;bottom:0;content:'';width:100%;height:auto;border-radius: 0 50px 0 10px;background:#2f68c2;}
#tnbTap .lefttit:after {display:block; position:absolute; bottom:0; right:-42px; content:''; width:195px; height:75px; background:url(/clean/img/tnb/home_ico6.png)no-repeat;}
#tnbTap .lefttit img {position:relative;}
#tnbTap .lefttit p {position:relative;line-height:1;margin:25px 0 0;font-size: 17px;color:#fff;}
#tnbTap .lefttit p:after {display:block;content:'';margin: 20px 0 20px 60px;width:1px;height:50px;background:rgba(255,255,255,.3);}
#tnbTap .lefttit ul {position:relative; width:190px; margin:0 auto; text-align:left; }
#tnbTap .lefttit ul li {border-bottom:1px solid rgba(255,255,255,.2); }
#tnbTap .lefttit ul li a {display:block;position: relative;width:100%;height:60px;line-height:60px;padding: 0 0 0 10px;color:#fff;font-size:17px;}
#tnbTap .lefttit ul li a:before {display:block; opacity:0; position:absolute; left:-20px; right:-20px; content:''; width:auto; height:100%; border-radius:50px; background:#fff;  transition:all 0.3s; -webkit-transition:all 0.3s;}
#tnbTap .lefttit ul li a:after {display:block;opacity: 0;position:absolute;top: 10px;right: -10px;content:'';width:40px;height:40px;border-radius:50%;background:#2f68c2 url(/clean/img/tnb/arr.png)no-repeat center;transition: all 0.3s;-webkit-transition: all 0.3s;}
#tnbTap .lefttit ul li a strong {display:block; position: relative; z-index:1; font-weight:normal;}
#tnbTap .lefttit ul li a span {}
#tnbTap .lefttit ul li a.ov:before,
#tnbTap .lefttit ul li a.ov:after {opacity:1;}
#tnbTap .lefttit ul li a.ov strong {color:#2f68c2; font-weight:bold;}

#tnbTap .con_wrap {float:left;width:calc(100% - 300px);height: 100%;padding: 80px 100px;}
#tnbTap .con_wrap .top_title {padding:0 0 25px; margin:0 0 35px; border-bottom:1px solid #ddd; }
#tnbTap .con_wrap .top_title strong {display:block;float: left;line-height:1.1;font-family:'score';font-size:26px;font-weight: 300;}
#tnbTap .con_wrap .top_title strong span {display:inline-block;margin: 0 10px 0 0;color:#2f68c2;font-weight: bold;font-family: 'score';}
#tnbTap .con_wrap .top_title .tab_btn {float:right;}
#tnbTap .con_wrap .top_title .tab_btn button {width:30px; height:30px; margin:0 0 0 5px; border-radius:5px; background-color:#f6f8fb;background-image:url(/clean/img/tnb/home_ico.png); font-size:0;}
#tnbTap .con_wrap .top_title .tab_btn button.ov {background-color:#2f68c2;}
#tnbTap .con_wrap .top_title .tab_btn button.btntype1 {background-position:0 0; }
#tnbTap .con_wrap .top_title .tab_btn button.btntype2 {background-position:-30px 0; }
#tnbTap .con_wrap .top_title .tab_btn button.btntype1.ov {background-position:0 -30px; }
#tnbTap .con_wrap .top_title .tab_btn button.btntype2.ov {background-position:-30px -30px; }
#tnbTap .con_wrap .con {position:relative; width:100%; height:100%;}
#tnbTap .con_wrap .con .tit {}
#tnbTap .con_wrap .con .tit strong {display:block;float:left;padding-left: 20px;background: url(/clean/img/tnb/home_ico4.png)no-repeat left center;font-size: 17px;font-weight: bold;color: #555;}
#tnbTap .con_wrap .con .tit p {float:right;margin:0;padding-left: 25px;background: url(/clean/img/tnb/home_ico7.png)no-repeat left center;font-size: 14px;color: #a4b0c2;}
#tnbTap .con_wrap .con .scroll {position: absolute;height: calc(100% - 17%);margin:0 -15px;}
#tnbTap .con_wrap .con ul {padding:30px 0;}
#tnbTap .con_wrap .con ul li {float:left; width:calc(25% - 30px); height:250px; margin:0 15px 30px;}
#tnbTap .con_wrap .con ul li a {display:block;position: relative;width:100%;height:100%;padding: 45px 10px 0;border:1px solid transparent; border-radius:10px;box-shadow:0 0 20px rgba(47,104,194,.1);text-align:center;transition:border 0.3s; -webkit-transition:border 0.3s; }
#tnbTap .con_wrap .con ul li a:hover,
#tnbTap .con_wrap .con ul li a:focus {border:1px solid #2f68c2;}
#tnbTap .con_wrap .con ul li strong {display:block;font-size: 16px;color:#555;transition:all 0.3s; -webkit-transition:all 0.3s; }
#tnbTap .con_wrap .con ul li a:hover strong,
#tnbTap .con_wrap .con ul li a:focus strong {color:#2f68c2;}
#tnbTap .con_wrap .con ul li .thumb {position: absolute;left: 50%;bottom: 35px;width:108px;height:108px;margin-left: -54px;border:4px solid #e0e8f6;border-radius:50%;background-position:center;background-size:cover;}
#tnbTap .con_wrap .con ul li .thumb:before {display:block; opacity:0;position:absolute; content:''; left:0; top:0;width:100%; height:100%; border-radius:50%; background:rgba(47,104,194,.5) url(/clean/img/tnb/home_ico2.png)no-repeat center; transition:all 0.3s; -webkit-transition:all 0.3s; }
#tnbTap .con_wrap .con ul li a:hover .thumb:before,
#tnbTap .con_wrap .con ul li a:focus .thumb:before {opacity:1;}
 
#tnbTap .con_wrap.listType .con .scroll {margin:0 -10px;}
#tnbTap .con_wrap.listType .con ul li {width:calc(50% - 20px);height:60px; margin:0 10px 20px; }
#tnbTap .con_wrap.listType .con ul li a { line-height:60px; padding:0 35px; text-align:left; }
#tnbTap .con_wrap.listType .con ul li a:hover,
#tnbTap .con_wrap.listType .con ul li a:focus {background: url(/clean/img/tnb/home_ico3.png)no-repeat 94% center;}
#tnbTap .con_wrap.listType .con ul li strong {overflow:hidden; text-overflow: ellipsis;white-space: nowrap;}
#tnbTap .con_wrap.listType .con ul li .thumb {display:none;}



@media(max-height:940px){
    #tnbPage {top:40px; bottom:40px; }
    #tnbTap .lefttit p {margin:25px 0;}
    #tnbTap .lefttit p:after {display:none;}
    #tnbTap .lefttit ul li a {height:50px;line-height:50px;font-size: 16px;}
    #tnbTap .lefttit ul li a:after {width:30px;height:30px;background-size: 6px auto;}
    #tnbTap .con_wrap {padding:80px;}
    #tnbTap .con_wrap .con ul li {width:calc(33.33% - 30px);}
}

@media(max-width:1499px){
    #tnbPage {top:40px; bottom:40px; left:40px; right:40px; width:auto; margin:0;}
    #tnbTap .lefttit p {margin:25px 0;}
    #tnbTap .lefttit p:after {display:none;}
    #tnbTap .lefttit ul li a {height:50px;line-height:50px;font-size: 16px;}
    #tnbTap .lefttit ul li a:after {width:30px;height:30px;background-size: 6px auto;}
    #tnbTap .con_wrap {padding:80px;}
    #tnbTap .con_wrap .con ul li {width:calc(33.33% - 30px);}
}

@media(max-width:1199px){

    #tnbTap:before {display:none;}
    #tnbTap .mCSB_outside+.mCSB_scrollTools {right:-10px;}
    #tnbTap .lefttit {float:none;width:100%;height: auto;padding: 40px 20px 10px;border-radius: 10px 10px 0 0;background: #2f68c2;}
    #tnbTap .lefttit:before,
    #tnbTap .lefttit:after {display:none;}
    #tnbTap .lefttit img {display:none;}
    #tnbTap .lefttit p {display:none;}
    #tnbTap .lefttit ul {width:100%;margin: 0;text-align:center;}
    #tnbTap .lefttit ul li {display:inline-block;margin: 0 10px;border: none;vertical-align: top;}
    #tnbTap .lefttit ul li a.ov {padding-right:40px;}
    #tnbTap .lefttit ul li a:before {left:-10px; right:-10px;}
    #tnbTap .lefttit ul li a:after {right:0;}
    #tnbTap .con_wrap {float:none;width:100%;padding: 40px;}
    #tnbTap .con_wrap .top_title {padding: 0 0 15px;margin: 0;}
    #tnbTap .con_wrap .top_title strong {display:none;}
    #tnbTap .con_wrap .con .tit {position: absolute;left: 0;top: -44px;}
    #tnbTap .con_wrap .con .tit strong {padding:0;background:none;color: #2f68c2;font-family: 'score';font-size: 20px;}
    #tnbTap .con_wrap .con .tit p {display:none;}
    #tnbTap .con_wrap .con ul {}
    #tnbTap .con_wrap .con .scroll {height: calc(100% - 23%);}
    #tnbPage {overflow:hidden;} 
    #tnbPage .modal__close {top:30px;right: 30px;}
    #tnbPage .modal__close button:before,
    #tnbPage .modal__close button:after {background:#fff;}

}

@media(max-width:1023px){
    #tnbTap .lefttit ul {padding:0 50px}
    #tnbTap .lefttit ul li {float: left;width:33.33%;margin: 0;}
    #tnbTap .con_wrap .con .scroll {height: calc(100vh - 335px);}
    #tnbTap .con_wrap .con ul li {width:calc(50% - 30px); }
    #tnbTap .con_wrap.listType .con ul li a:hover,
    #tnbTap .con_wrap.listType .con ul li a:focus {background-position:97% center;}
    #tnbTap .con_wrap.listType .con ul li {float:none; width:calc(100% - 20px);}
}

@media(max-width:767px){
    #tnbTap .mCSB_outside+.mCSB_scrollTools {right:0;}
    
    #tnbTap .lefttit ul {padding: 0 30px;}
    #tnbTap .lefttit ul li a {height:40px; line-height:40px; font-size:15px;}
    #tnbTap .lefttit ul li a:after {display:none;}
    #tnbTap .lefttit ul li a:before {left:0; right:0;}
    #tnbTap .lefttit ul li a.ov {padding:0;}

    
    #tnbPage { top:30px; bottom:30px;left:20px; right:20px; }
    #tnbPage .modal__close {top:20px; right:20px;}
    
    #tnbTap .con_wrap {padding: 50px 20px 30px;}
    #tnbTap .con_wrap .top_title strong {font-size:20px;}
    #tnbTap .con_wrap .top_title .tab_btn {margin-top: -5px;}
    
    #tnbTap .con_wrap.listType .con ul li {height:auto;}
    #tnbTap .con_wrap.listType .con ul li a {line-height:1.3;padding: 20px 35px 20px 20px;}
    #tnbTap .con_wrap.listType .con ul li strong {overflow: visible;white-space: normal;}
}

@media(max-width:580px){
    #tnbPage .modal__close {right:10px; top:10px;z-index:999;}
    #tnbTap .lefttit ul {padding:0}
    #tnbTap .lefttit ul li {width:50%;}
    #tnbTap .con_wrap .con ul li {width:calc(100% - 30px); }
    #tnbTap .con_wrap .con ul li strong {}
    #tnbTap .con_wrap .top_title strong {font-size:17px;}
    #tnbTap .con_wrap .top_title .tab_btn {margin-top:-8px;}
}