﻿a:link,a:hover,a:visited{ font-size: 16px;}
.color-666, a.color-666 { color: #666666; }
.color-red, a.color-red { color: #e11708; }
.w1170{ width: 1170px;}
.cnal-header{height:90px; background:url("../image/top_head_bg.png") repeat-x;}
.cnal-container{ min-width: 1170px;}
.cnal-navbar-nav{ margin-left: 20px;}
.cnal-navbar-nav li{ float: left;}
.cnal-header .cnal-ico{width:150px; height:50px; display:inline-block; margin-top:15px;background:url("../image/cnal-ico.png") no-repeat; margin-left:15px;}
.cnal-other-service{ margin-top:27px; margin-right:15px;}


.cnal-navbar-nav>li>a{ padding:7px 20px;}
.bs-docs-nav .cnal-navbar-nav>li>a:hover, body.index .bs-docs-nav .cnal-navbar-nav>.index>a, body.index .bs-docs-nav .cnal-navbar-nav>.index>a:hover, body.contact .bs-docs-nav .cnal-navbar-nav>.contact>a, body.contact .bs-docs-nav .cnal-navbar-nav>.contact>a:hover, body.paycenter .bs-docs-nav .cnal-navbar-nav>.paycenter>a, body.paycenter .bs-docs-nav .cnal-navbar-nav>.paycenter>a:hover, body.law .bs-docs-nav .cnal-navbar-nav>.law>a, body.law .bs-docs-nav .cnal-navbar-nav>.law>a:hover, body.sitemap .bs-docs-nav .cnal-navbar-nav>.sitemap>a, body.sitemap .bs-docs-nav .cnal-navbar-nav>.sitemap>a:hover{color:#463265; background-color: #fff;border:#ff8711 solid 1px; border-radius:20px;padding:6px 19px;}
.bs-docs-nav .cnal-navbar-nav>li>a:focus{ background:none;}

.cnal-navbar-nav2{ overflow: hidden;}
.cnal-navbar-nav2 li{ float: left; margin-right:15px;}
.cnal-navbar-nav2 li a{ color:#fff;}

.cnal-banner{ height: 450px; background:url("https://cdn.cnal.com/about/image/banner.jpg") 50% 0 no-repeat;margin-top:80px;}


.col-md-3-list{padding:0; width:210px; float:right; margin-right:13px;}

.cnal-product-mod{}
.cnal-product-mod .mod-header{ position: relative; height:120px;}
.cnal-product-mod .mod-header h1{ background:#fff;z-index:120;  position: absolute; left:0px; top:0px; letter-spacing:0.2em;}

.cnal-product-mod .mod-header .tit-en-bg{ font-family: Arial; font-size:90px; color: #f6f6f6; position: absolute; left:85px; top: -25px; z-index: 100; text-transform: uppercase;}
.cnal-product-mod .mod-content{ font-size: 16px; line-height: 36px; min-height:500px;}

.cnal-product-mod .mod-content .w1{background:url("../image/c1.jpg") no-repeat; width:150px; height:130px; margin-top:15px;}


.cnal-product-mod .mod-content .cnal-row2 .w1{background:url("../image/c3.png") no-repeat;}
.cnal-product-mod .mod-content .cnal-row3 .w1{background:url("../image/c4.png") no-repeat;}
.cnal-product-mod .mod-content .cnal-row4 .w1{background:url("../image/c5.png") no-repeat;}

.cnal-product-mod .mod-content .cnal-row1{background:url("../image/c6.jpg") left bottom no-repeat; padding-bottom: 50px;}
.cnal-product-mod .mod-content .cnal-row2{background:url("../image/c2.jpg") left bottom no-repeat;padding-bottom: 50px;}
.cnal-product-mod .mod-content .cnal-row3{background:url("../image/c6.jpg") left bottom no-repeat;padding-bottom: 50px;}
.cnal-product-mod .mod-content .cnal-row4{background:none;}
.cnal-product-mod .cnal-col-sitemap{border-left:#f1f1f1 solid 1px;border-top:#f1f1f1 solid 1px; min-height:120px; padding-top: 20px;}
.cnal-product-mod .cnal-col-sitemap2{border-left:#f1f1f1 solid 1px;border-top:#f1f1f1 solid 1px;border-right:#f1f1f1 solid 1px;min-height:120px; padding-top: 20px;}
.cnal-product-mod .cnal-col-sitemap3{border-left:#f1f1f1 solid 1px;border-top:#f1f1f1 solid 1px;border-bottom:#f1f1f1 solid 1px;min-height:160px; padding-top: 20px;}
.cnal-product-mod .cnal-col-sitemap4{ height: 200px;}

.cnal-product-mod .cnal-peyceter-table{ border-collapse: collapse; width:550px;border:#b9b9b9 solid 1px;margin-top:20px;}
.cnal-product-mod .cnal-peyceter-table td{padding:30px 0;}
.cnal-product-mod .cnal-peyceter-table .img-border{border:#e8e8e8 solid 1px; padding: 10px; padding-top: 20px; width: 120px; height: 120px; margin-left:30px; text-align: center; vertical-align: middle;}


.cnal-product-mod .cnal-sitemap-ul-list{}
.cnal-product-mod .cnal-sitemap-ul-list li{ float: left; margin-right: 20px;}



.cnal-product-mod .bond_con{ line-height:2em;}
.cnal-product-mod .bond_con h4{margin-bottom:15px;}
.container-footer{background:#757575; height:140px;}
.container-footer .container2{background:#fff url("../image/c8.png") repeat; height:8px;}

.container-footer .container{position: relative; margin-top:8px;}

.container-footer .cnal-copy{ color: #b6b6b6; font-size: 14px;}
.container-footer .cnal-wenxin{background:url("../image/weixin1.jpg") no-repeat; width: 120px; height: 100px; display: inline-block; position: absolute; right:40px; top:10px;}

.slide-box{width:auto;height:450px;margin:0 auto;position:relative;}
.slide-box .pic{width:100%;height:450px;overflow:hidden;}
.slide-box .pic ul{ margin-bottom: 0;}
.slide-box .pic ul li{list-style-type:none;width:100%;height:450px;position:relative;overflow:hidden;}
.slide-box .pic ul li.w1{background:url("https://cdn.cnal.com/about/image/banner1.jpg") no-repeat;}
.slide-box .pic ul li.w2{background:url("https://cdn.cnal.com/about/image/banner2.jpg") no-repeat;}
.slide-box .pic ul li .img1{position:absolute;left:-760px;top:0px;}
.slide-box .pic ul li .img2{position:absolute;left:-15px;top:0px;display:none;}
.slide-box .nav-yuan{width:100px;height:14px;position:absolute;bottom:15px;left:544px;}
.slide-box .nav-yuan ul li{list-style-type:none;width:15px;height:15px;border-radius:15px;float:left;margin-right:5px;cursor:pointer;
    border:2px solid #fff;}
.slide-box .nav-yuan ul .bg{border-color:#ff7300;}



/*---slide show skin---*/
.edslider{  position:relative;margin:auto;}
.edslider ul{list-style:none;  position:relative;  padding:0;  margin:0;}
.edslider > ul{background:#fff;  display:block;  overflow:hidden;}
.edslider > ul li{display:none;width:100%;position:absolute;top:0;left:0;z-index:0;}
.edslider a{display:block;}
.edslider a img{border:0; }
.edslider .current{z-index:1 !important;}
/*---controls---*/
.edslider .controls{top: 0;height: 0; position:absolute;width: 100%;z-index:2;}
.edslider .controls .navigator{background: rgba(0,0,0,.3); background-image:url(../image/sprite-navigator.png); cursor:pointer;display:block; width:50px;height:50px;position: absolute;overflow: hidden;top: 200px;transition: background .2s;display: none;}
.edslider .controls .next{background-position:0 0; right:30px;}
.edslider .controls .prev{background-position:0 -50px;left:30px;}
.edslider:hover .controls .navigator{ display: block;}
.edslider .controls .next:hover, .edslider .controls .prev:hover{background-color: rgba(0,0,0,.6); }
.edslider .controls .paginator{position: relative;text-align: center;top: 410px;}
.edslider .controls .paginator li{background:#fff;border-radius: 8px;box-sizing: border-box;display:inline-block;height:16px;width:16px;margin:0 3px;cursor:pointer;transition: background .2s;}
.edslider .controls .paginator li.current, .edslider .controls .paginator li:hover, .edslider .progress{background:#ff9600;}
.edslider .progress{position: absolute;top: 0;height:3px;z-index:2;display: none;}
.container3{max-width:1920px;overflow:hidden;min-width:1140px;margin:auto;height: 450px;margin-top:80px;}
.mySlideshow .animated{position:absolute;}
.first{background:url("../image/first.jpg") center no-repeat;}
.first a,.first img{top: 100px; right:1%;}
.second{background:url("../image/second.jpg") center no-repeat;}
.second img{top:65px;left:0.5%;}
.third{background:url("../image/third.jpg") center no-repeat;}
.third img{top:90px;left:3%;}
.fourth{background:url("https://cdn.cnal.com/images/fourth.jpg") center no-repeat;}
.fourth img{top:320px;right:8%;}
.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}
.animated.hinge {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInDown {
    0% {
        opacity: 0;
        -ms-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -moz-transform: translateX(-2000px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@-o-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -o-transform: translateX(-2000px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}
@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    -moz-animation-name: fadeInLeftBig;
    -o-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -moz-transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -o-transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    -moz-animation-name: fadeInRightBig;
    -o-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}
