/*============  all page css start ============*/
html{font-size: 16px;}
body{
    font-family: noto serif,PT Serif,'Microsoft JhengHei',Songti TC,serif;
    width: 100%;
    height: 100%;
    word-wrap: break-word;
}
img{width: 100%;}
a{cursor: pointer;}
a:hover,a:focus {text-decoration: blink;}
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline: none;outline-offset:-2px;}
.modal-open {overflow: hidden;position: fixed;width: 100%;}
:focus{outline: none;color: #555;}
input:focus, textarea:focus {box-shadow: none;outline: 0;}
.section {padding: 3em 0;}

@media screen and  (min-width: 1200px){
    .container {width: 860px;}
}

@media screen and  (min-width: 992px){
    .container {width: 860px;}
}
/*====*/

/*============  all page css end ============*/

/*============  page content css start ============*/
/*=====index start=====*/
.blue_title{width: 135px;}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .blue_title{width: 115px;}
}
/*area01*/
.area01{
    background-color: #ffffff;
    background-image: url(../images/fubon-bg01.png);
    background-position: center center;
    background-repeat: no-repeat;
    background: #ffffff url(../images/fubon-bg01.png) center center no-repeat;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-bottom:  0;
    z-index: 1;
}
.big_banner_title{text-align: center;display: inline-block;width: 100%;position:  absolute;top: 86px;left: 0;right: 0;}
.big_banner_title img{display: inline-block;max-width: 560px;margin-top: 0;} 
.banner_woman_area{display: inline-block;width: 100%;}

.banner_woman_all{display: inline-block;width: 100%;position: relative;text-align: center;min-height: 490px;}
.woman_image{max-width: 315px;position: absolute;bottom: -11px;left: 280px;}
.banner_circle_item{
    display: inline-block;
}
.banner_circle_item img{
    width: 85px;
}
.banner_circle_item.circle01{position: absolute;left: 133px;top: 187px;}
.banner_circle_item.circle02{
    position: absolute;
    left: 215px;
    top: 263px;
}
.banner_circle_item.circle03{
    position: absolute;
    right: 214px;
    top: 188px;
}
.banner_circle_item.circle04{
    position: absolute;
    right: 133px;
    top: 263px;
}
.banner_circle_item.circle05{
    position: absolute;
    right: 52px;
    top: 187px;
}

.banner_woman_title{display: inline-block;width: 100%;position: relative;text-align: center;height: 115px;margin-top: -10px;}
.yellow_title_banner{
    width: 100%;
    max-width: 710px;
}
.banner_small_image{
    position: absolute;
    left: 20px;
    width: 225px;
    bottom: -3px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .area01{
        padding-top: 0;
        padding-bottom:  0;
    }
    .big_banner_title{
        top: 52px;
    }
    .big_banner_title img{
        max-width: 479px;
    } 
    .woman_image{
        max-width: 275px;
        bottom: 42px;
        left: 241px;
    }
    .banner_circle_item img{
        width: 75px;
    }
    .banner_circle_item.circle01{
        left: 115px;
        top: 176px;
    }
    .banner_circle_item.circle02{
        left: 185px;
        top: 241px;
    }
    .banner_circle_item.circle03{
        right: 185px;
        top: 176px;
    }
    .banner_circle_item.circle04{
        right: 115px;
        top: 241px;
    }
    .banner_circle_item.circle05{
        right: 45px;
        top: 175px;
    }
    .banner_woman_title{margin-top: -60px;height: 115px;}
    .yellow_title_banner{
        max-width: 640px;
    }
    .banner_small_image{
        width: 195px;
        bottom: 12px;
        left: 18px;
    }


}
@media screen and (max-width: 767px) { 
    .area01{
        background-color: #ffffff;
        background-image: url(../images/fubon-bg01.png);
        background-position: center center;
        background-repeat: no-repeat;
        background: #ffffff url(../images/fubon-bg01.png) center center no-repeat;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding-bottom: 0;
        z-index: 1;
    }
    .big_banner_title{
        position: relative;
        top: initial;
        left: initial;
        right: initial;
    }
    .big_banner_title img{
        max-width: 100%;
        height: 45px;
        width: auto;
    } 
    .banner_woman_all{
        min-height: auto;
        margin-bottom:  30px;
    }
    .woman_image{
        max-width: 200px;
        position: relative;
        bottom: initial;
        left: initial;
        margin: 0 auto;
        margin-bottom:  30px;
        margin-top:  30px;
        display: block;
    }
    .banner_circle_item.circle01{
        position: relative;
        left: initial;
        top: initial;
    }
    .banner_circle_item.circle02{
        position: relative;
        left: initial;
        top: initial;
    }
    .banner_circle_item.circle03{
        position: relative;
        right: initial;
        top: initial;
    }
    .banner_circle_item.circle04{
        position: relative;
        right: initial;
        top: initial;
    }
    .banner_circle_item.circle05{
        position: relative;
        right: initial;
        top: initial;
    }
    .banner_woman_title{
        height: auto;
        margin-top: 0;
    }
    .banner_small_image{
        position: relative;
        left: initial;
        width: 170px;
        bottom: initial;
    }



}
/*area02*/
.area02_top{
    background-color: #ffffff;
    background-image: url(../images/fubon-bg02-1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background: #ffffff url(../images/fubon-bg02-1.png) center center no-repeat;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 2;
    padding-top: 50px;
    padding-bottom: 30px;
}
.area02_bottom{
    background-image: url(../images/fubon-bg02-2.png);
    background-position: top center;
    background-repeat: no-repeat;
    background: url(../images/fubon-bg02-2.png) top center no-repeat;
    -moz-background-size: 100%;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    z-index: 3;
    margin-top: -135px;
    padding-bottom:  0;
}
.car_area{
    display: inline-block;
    width: 100%;
    position: relative;
    margin-top: 85px;
}
.car_title_area{
    display: inline-block;
    width: 100%;
    text-align: center;
    padding-top: 2px;
    height: 150px;
}
.man_image{position: absolute;right: -10px;top: -176px;}
.man_image img{width: 300px;}
.car_bulb_left img{width: 270px;}
.car_bulb_img img{width: 50px;}
.car_bulb_right img{width: 270px;}
.car_other_all{position: relative;display: inline-block;width: 100%;}
.car_other_left{width: 50%;float: left;padding: 32px 15px 15px;}
.car_other_right{width: 50%;float: left;padding: 15px 15px 15px 21px;position:  relative;}

ul.all_other_font{margin-top: 12px;padding-left: 27px;margin-bottom: 16px;}
ul.all_other_font li{font-size: 21px;}
.big_car_title{width: 160px;margin-left:  5px;}
.yellow_title_car_area{width: 328px;display: block;height: 129px;position:  relative;z-index: 1;}
.yellow_title_car_top{
    width: 375px;
    position:  absolute;
    left: -20px;
    top: -13px;
    z-index: 1;
}
.yellow_title_car_bottom{
    width: 375px;
    position: absolute;
    left: -20px;
    bottom: -38px;
    z-index: 2;
}
.car_image{
    width: 150px;
    position:  absolute;
    right: 9px;
    bottom: -85px;
    z-index: 2;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .car_area{
        margin-top: 61px;
    }
    .car_title_area{
        padding-top: 42px;
        height: 193px;
    }
    .man_image{
        right: -5px;
        top: -111px;
    }
    .man_image img{
        width: 251px;
    }
    .car_bulb_left img{
        width: auto;
        height: 29px;
    }
    .car_bulb_img img{
        width: 42px;
    }
    .car_bulb_right img{
        width: auto;
        height: 29px;
    }
    .car_other_all{
    }
    .car_other_left{
        padding: 0px 15px 0px;
    }
    .car_other_right{
        padding: 0px 15px 15px 21px;
        margin-top:  -10px;
    }
    ul.all_other_font li{
        font-size: 18px;
    }
    .big_car_title{
        width: 130px;
    }
    .yellow_title_car_area{
        width: 328px;
        height: 119px;
    }
    .yellow_title_car_top{
        width: 325px;
        top: -13px;
    }
    .yellow_title_car_bottom{
        width: 325px;
        bottom: -28px;
    }
    .car_image{
        width: 140px;
        right: 4px;
        bottom: -69px;
    }
}
@media screen and (max-width: 767px) { 
    .area02_top{
        padding-top: 30px;
    }
    .area02_bottom{
        margin-top: -35px;
    }
    .car_area{
        margin-top: 35px;
    }
    .man_image{
        position: absolute;
        right: 20px;
        top: -80px;
    }
    .man_image img{
        width: 170px;
    }
    .car_bulb_left img{width: 200px;display: block;margin: 0 auto;}
    .car_bulb_img img{
        width: 40px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .car_bulb_right img{width: 200px;display: block;margin: 0 auto;}
    .car_other_left{
        width: 100%;
        max-width: 360px;
        display: block;
        float: none;
        margin:  0 auto;
        margin-bottom:  30px;
    }
    .car_other_right{
        width: 100%;
        padding: 0;
    }
    .big_car_title{
        height: 45px;
        width: auto;
        display: block;
        margin: 0 auto;
    }
    .yellow_title_car_area{
        width: 100%;
        height: auto;
    }
    .yellow_title_car_top{
        width: 100%;
        max-width: 320px;
        display: block;
        margin: 0 auto;
        position: relative;
        left: initial;
        top: initial;
    }
    .yellow_title_car_bottom{
        width: 100%;
        max-width: 320px;
        display: block;
        margin: 0 auto;
        position: relative;
        left: initial;
        bottom: initial;
        margin-top:  -35px;
    }
    .car_image{
        position: relative;
        right: initial;
        width: 110px;
        bottom: initial;
        display: block;
        margin: 0 auto;
        margin-bottom:  30px;
    }
}
/*area03*/
.area03_top{
    background-color: #ffffff;
    background-image: url(../images/fubon-bg03-1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background: #ffffff url(../images/fubon-bg03-1.png) center center no-repeat;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 4;
    padding-bottom: 95px;
}
.area03_bottom{
    background-image: url(../images/fubon-bg03-2.png);
    background-position: top center;
    background-repeat: no-repeat;
    background: url(../images/fubon-bg03-2.png) top center no-repeat;
    -moz-background-size: 100%;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    z-index: 5;
    padding-top:  0;
    padding-bottom: 0;
    margin-top: -110px;
}
.hand_area{ 
    display: inline-block;
    width: 100%;
    position: relative;
}
.hand_other_left{width: 50%;float: left;padding: 13px;}
.hand_other_right{width: 50%;float: left;padding: 7px 29px;position:  relative;}
.big_hand_title{
    width: 160px;
    margin-top:  4px;
    padding-left: 5px;
}
.yellow_title_hand_area{
    position: relative;
    height: 120px;
}
.yellow_title_hand_area img{
    width: 400px;
    position: absolute;
    left: -21px;
    top: -10px;
}
.hand_other_right .all_other_font{
    padding-left: 37px;
}
.hand_other_right .all_other_font li{color: #fff;}
.white_text{
    padding-left: 17px;
    color: #fff;
    font-size: 21px;
    margin-bottom:  0;
    margin-top:  4px;
}
.hand_image{
    width: 260px;
    position:  absolute;
    right: -99px;
    bottom: 10px;
}


.tree_area{
    display: inline-block;
    width: 100%;
    position: relative;
    margin-top: 95px;
}
.tree_other_left{width: 50%;float: left;padding: 50px 21px 0;}
.tree_other_right{width: 50%;float: left;padding: 42px 15px 0px 22px;}
.big_tree_title_top{
    width: 237px;
    display: block;
    margin-left:  16px;
    margin-top: 23px;
}
.big_tree_title_bottom{
    width: 300px;
    display: block;
    margin-left:  18px;
    margin-top: 10px;
}
.yellow_title_tree_area{
    position: relative;
    height: 140px;
}
.yellow_title_tree_area img{
    position: absolute;
    left: -20px;
    top: -16px;
}
.tree_image{position: absolute;width: 433px;bottom: 0;right: -69px;height: auto;}
.black_text{
    font-size: 21px;
    margin-top: 3px;
    margin-bottom:  0;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .area03_top{
        overflow:  hidden;
    }
    .area03_bottom{
        overflow: hidden;
        margin-top: -95px;
    }
    .hand_other_left{
        padding: 15px 13px 0;
    }
    .hand_other_right{
        padding: 11px 25px;
    }
    .big_hand_title{
        width: 140px;
    }
    .white_text{
        font-size: 18px;
    }
    .hand_image{
        width: 230px;
        right: -89px;
        bottom: 11px;
    }
    .tree_area{
        margin-top: 45px;
    }
    .tree_other_left{
        padding: 31px 21px 0;
    }
    .big_tree_title_top{
        width: 197px;
        margin-top: -12px;
    }
    .big_tree_title_bottom{
        width: 254px;
        margin-top: 3px;
    }
    .yellow_title_tree_area{
        height: 120px;
    }
    .tree_image{
        width: 353px;
        right: -40px;
    }
    .black_text{
        font-size: 18px;
    }
}
@media screen and (max-width: 767px) { 
    .area03_bottom{
        margin-top: -110px;
    }
    .hand_other_left{width: 100%;padding: 0;}
    .hand_other_right{width: 100%;max-width: 340px;display: block;float: none;margin: 0 auto;margin-bottom: 30px;}
    .big_hand_title{
        padding-left: 0;
        height: 45px;
        width: auto;
        display: block;
        margin: 0 auto;
    }
    .yellow_title_hand_area{
        height: auto;
    }
    .yellow_title_hand_area img{
        width: 100%;
        max-width: 320px;
        display: block;
        margin: 0 auto;
        position: relative;
        left: initial;
        top: initial;
    }
    .hand_image{
        width: 200px;
        position: relative;
        right: initial;
        bottom: initial;
        display: block;
        margin: 0 auto;
        margin-top: 45px;
        margin-bottom:  15px;
    }
    .tree_other_left{width: 100%;padding: 50px 0px 0px;width: 100%;max-width: 340px;display: block;float: none;margin: 0 auto;margin-bottom: 30px;}
    .tree_other_right{width: 100%;padding: 0;padding-top:  45px;padding-bottom: 70px;}
    .big_tree_title_top{
        margin-left: 0;
        margin-bottom: 15px;
        height: 45px;
        width: auto;
        display: block;
        margin: 0 auto;
    }
    .big_tree_title_bottom{
        margin-left: 0;
        width: 230px;
        margin: 0 auto;
        margin-bottom:  15px;
        margin-top:  15px;
    }
    .yellow_title_tree_area img{
        width: 100%;
        max-width: 320px;
        display: block;
        margin: 0 auto;
        position: relative;
        left: initial;
        top: initial;
    }
    .tree_image{
        position: absolute;
        width: 300px;
        bottom: 0;
        right: 0;
    }
}
@media screen and (max-width: 480px) {
    .tree_other_right{padding-bottom: 50px;}
    .area03_bottom {
        margin-top: -90px;
    }
    .hand_other_right{
        margin-bottom: 0px;
    }
    .tree_other_left{
        padding: 0px 0px 0px;
        margin-bottom:  0;
    }
}
/*area04*/
.area04{
    background-color: #ffffff;
    background-image: url(../images/fubon-bg04.png);
    background-position: center center;
    background-repeat: no-repeat;
    background: #ffffff url(../images/fubon-bg04.png) center center no-repeat;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 6;
    margin-top: -15px;
    padding-bottom: 0px;
    overflow:  hidden;
    padding-top:  10px;
}
.idcard_area{
    display: inline-block;
    width: 100%;
    position: relative;
}
.idcard_other_left{
    width: 50%;
    float: left;
    padding: 34px 15px 15px 15px;
}
.idcard_other_right{
    width: 50%;
    float: left;
    position:  relative;
    padding: 39px 15px 0px 37px;
}
.idcard_other_right .all_other_font{
    padding-left: 37px;
}
.idcard_other_right .all_other_font li{color: #fff;}
.idcard_line{margin-top: 13px;margin-bottom: 11px;position: relative;z-index: 1;background: #fff;height: 1px;}
.idcard_line:before{content: "";position: absolute;width: 100%;height: 1px;background: #fff;bottom: -5px;z-index: 2;}
.yellow_title_idcard_area{
    position: relative;
    height: 70px;
    margin-bottom:  30px;
}
.yellow_title_idcard_area img{
    position:  absolute;
    left: -20px;
    width: 400px;
    top: -9px;
    height: 120px;
}
.idcard_image{
    width: 145px;
    position:  absolute;
    right: -30px;
    bottom: -60px;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .idcard_image{bottom: -70px;}
}
@media screen and (max-width: 767px) { 
    .idcard_other_left{width: 100%;padding: 0;float: none;padding-top:  50px;padding-bottom: 25px;}
    .idcard_other_right{padding: 0;width: 100%;max-width: 340px;display: block;float: none;margin: 0 auto;}
    .big_idcard_title_top{
        height: 45px;
        width: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .idcard_line{
        width: 217px;
        margin: 0 auto;
    }
    .big_idcard_title_bottom{
        height: 45px;
        width: auto;
        display: block;
        margin: 0 auto;
        margin-top:  15px;
    }
    .yellow_title_idcard_area{
        margin-bottom: 30px;
    }
    .yellow_title_idcard_area img{
        position: relative;
        left: initial;
        width: 100%;
        max-width: 320px;
        display: block;
        margin: 0 auto;
        top: initial;
        height: auto;
    }
    .idcard_image{
        width: 95px;
        position: absolute;
        right: 20px;
        top: initial;
        bottom: -30px;
    }
}
/*area05*/
.area05{
    background-color: #fff;
    z-index: 7;
    overflow: hidden;
}
.shop_area{
    display: inline-block;
    width: 100%;
    position: relative;
    padding-top: 10px;
}
.shop_other_right{
    width: 50%;
    float: left;
    padding: 10px 20px 0 20px;
}
.shop_other_left{
    width: 50%;
    float: left;
    position:  relative;
    padding: 0px 20px 0 21px;
}
.shop_image{
    position:  absolute;
    width: 260px;
    right: -110px;
    top: 15px;
}
.big_shop_title_top{
    width: 153px;
    margin-left: 22px;
    margin-top:  4px;
}
.yellow_title_shop_area{
    height: 90px;
    position:  relative;
}
.yellow_title_shop_area img{
    position:  absolute;
    left: -20px;
    width: 378px;
    top: -9px;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .shop_area{
    }
    .shop_other_right{
        padding: 10px 20px 0 20px;
    }
    .shop_other_left{
        padding: 0px 20px 0 21px;
    }
    .shop_image{
        width: 220px;
        right: -90px;
        top: -2px;
    }
    .big_shop_title_top{
        width: 134px;
        margin-left: 16px;
    }
    .yellow_title_shop_area img{
        width: 328px;
    }
}
@media screen and (max-width: 767px) { 
    .shop_other_right{
        padding: 0;
        width: 100%;
        max-width: 340px;
        display: block;
        float: none;
        margin: 0 auto;
        margin-bottom:  30px;
    }
    .shop_other_left{
        width: 100%;
        float: none;
    }
    .shop_image{
        position: relative;
        width: 260px;
        right: initial;
        top: initial;
        display: block;
        margin: 0 auto;
    }
    .big_shop_title_top{
        height: 45px;
        width: auto;
        display: block;
        margin: 0 auto;
        margin-top: 15px;
    }
    .yellow_title_shop_area{
        height: auto;
        position: relative;
    }
    .yellow_title_shop_area img{
        position: relative;
        left: initial;
        width: 100%;
        max-width: 320px;
        display: block;
        margin: 0 auto;
        top: initial;
    }
}
/*area06*/
.area06{
    background-color: #ffffff;
    background-image: url(../images/fubon-bg03-1.png);
    background-position: right center;
    background-repeat: no-repeat;
    background: #ffffff url(../images/fubon-bg03-1.png) right center no-repeat;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 9;
}
.input_all{
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}
.input_all > h1{
    color: #fff;
    font-weight: 500;
    text-shadow: 1px 1px 1px #555;
    margin-bottom: 30px;
    font-size: 4em;
}
.input_col-3{float: left;width: calc(100% - 0.5em);margin: 0em 0em 1em;position: relative;} /* necessary to give position: relative to parent. */
.input_col-3 input{font: 15px/24px "Lato", Arial, sans-serif;color: #333;width: 100%;height: 60px;box-sizing: border-box;letter-spacing: 1px;border: solid 3px #006dd8;border-radius: 5px;font-size: 20px;}
.input_col-3 textarea{border: solid 1px #a6a6a6;width: 100%;}
.input_col-3 select {height: 60px;width: 100%;border: solid 3px #006dd8;background: #def2fc;font-size: 20px;}
.effect-1{border: 0;padding: 7px 7px;border-bottom: 1px solid #ccc;}
.effect-1 ~ .focus-border{position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: #0281ff;transition: 0.4s;}
.effect-1:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.input_all button.submit_btn{width: calc(100% - 7px);background: #0281ff;height: 60px;font-size: 20px;color: #fff;border: solid 2px #006dd8;}
.input_col-3 .inputtext{color:#fff;font-size: 20px;text-shadow: 1px 1px 1px #3e3e3e;font-weight: 500;}
@media screen and (max-width: 767px) { 
    .area06{
        background-color: #ffffff;
        background-image: url(../images/fubon-bg03-1.png);
        background-position: center center;
        background-repeat: no-repeat;
        background: #ffffff url(../images/fubon-bg03-1.png) center center no-repeat;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .input_all > h1{
        font-size: 40px;
    }
    .input_col-3 input{
        font-size: 18px;
        height: 50px;
    }
    .input_col-3 select {
        height: 50px;
    }
    .input_all button.submit_btn{
        height: 50px;
    }
    .input_col-3 .inputtext{
        font-size: 18px;
    }


}
@media screen and (max-width: 480px) {
    .area06{
        /* background-color: #ffffff; */
        background-image: url(../images/fubon-bg03-1.png);
        background-position: 0 0;
        background-repeat: no-repeat;
        background: #ffffff url(../images/fubon-bg03-1.png) 0 0 no-repeat;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .input_all > h1{
        font-size: 37px;
    }
}
/*=====index end=====*/




/*============  page content css end ============*/

/*============  footer css start ============*/
footer{background: #0081ff;display: inline-block;width: 100%;}
.footer_btn_area{display: inline-block;width: 100%;position: relative;margin-bottom: 15px;margin-top: 60px;text-align: center;}
.footer_btn_item{display: block;width: 100%;width: calc(100%/ 5 - 2%);float: left;margin: 1%;}
.footer_btn_item .footer_btnicon{margin-bottom:  15px;}
.footer_btn_item .footer_btntext{position: relative;}
.footer_btn_item .footer_btntext::before{position: absolute;content: "";background: #ffe600;width: 100%;height: 1px;top: 0;left: 0;right: 0;}
.footer_btn_item .footer_btntext::after{position: absolute;content: "";background: #ffe600;width: 100%;height: 1px;bottom: 0;left: 0;right: 0;}
.footer_other_area{display: inline-block;width: 100%;position: relative;margin-bottom: 60px;margin-top: 15px;color: #fff;}
.footer_icon_line{
    display: inline-block;
    width: 200px;
    margin: 1%;
    vertical-align: top;
}
.footer_icon_mail{
    display: inline-block;
    width: calc(100% - 470px);
    float: none;
    margin: 1%;
    vertical-align: top;
}
.footer_icon_qrcode{
    display: inline-block;
    width: 210px;
    float: none;
    margin: 1%;
}
.footer_icon_qrcode img{
    display: inline-block;
    width: 100%;
    max-width: 100px;
    float: none;
    border-radius: 12px;
}
.footer_icon_img{width: 70px;float: left;}
.footer_icon_imfo{
    display: inline-block;
    width: calc(100% - 70px);
    float: left;
    padding-left: 10px;
}
.footer_other_area .footer_icon_line h3,.footer_other_area .footer_icon_mail h3{
    font-size: 19px;
    margin-top:  5px;
    margin-bottom:  5px;
    border-bottom: solid 1px #fff;
    display: inline-block;
    padding-bottom:  5px;
}
.footer_other_area .footer_icon_line p,.footer_other_area .footer_icon_mail p{
    font-size: 22px;
    font-weight: 500;
    margin-bottom:  0;
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .footer_icon_line{
        width: 200px;
    }
    .footer_icon_mail{
        width: calc(100% - 470px);
    }
    .footer_icon_qrcode{
        width: 210px;
    }

}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .footer_btn_item{width: 100%;width: calc(100%/ 5);margin: 0;padding: 10px;}
    .footer_icon_line{
        width: 250px;
        margin: 0;
    }
    .footer_icon_mail{
        width: calc(100% - 260px);
        margin: 0;
    }
    .footer_icon_qrcode{
        margin-top: 25px;
    }
    .footer_icon_qrcode img{

    }
    .footer_btn_item .footer_btntext::before{top: 0px;}
    .footer_btn_item .footer_btntext::after{bottom: 0px;}

}
@media screen and (max-width: 767px) { 
    .footer_btn_item{width: 100%;width: calc(100% / 5);max-width: calc(100% / 5);margin: 0;padding: 7px;max-height: 240px;overflow-y: hidden;}
    .footer_icon_line{
        width: 180px;
        margin: 0;
        margin-bottom:  15px;
    }
    .footer_icon_mail{
        width: calc(100% - 185px);
        margin: 0;
        margin-bottom: 15px;
    }
    .footer_icon_qrcode{
        width: 100%;
    }
    .footer_icon_qrcode img{
        max-width: 100px;
        display: inline-block;
        margin: 0 auto;
        margin-top:  25px;
    }
    .footer_btn_item .footer_btntext::before{top: 0px;}
    .footer_btn_item .footer_btntext::after{bottom: 0px;}
    .footer_icon_img{width: 50px;float: left;}
    .footer_other_area .footer_icon_line h3, .footer_other_area .footer_icon_mail h3{
        font-size: 17px;
    }
    .footer_other_area .footer_icon_line p, .footer_other_area .footer_icon_mail p{
        font-size: 18px;
    }


}
@media screen and (max-width: 480px) {
    .footer_btn_item{width: 100%;width: calc(100%/ 3);max-width: calc(100%/ 3);margin: 0;padding:  15px;}
    .footer_icon_line{
        width: 100%;
        float: left;
        margin: 0;
        margin-bottom: 25px;
    }
    .footer_icon_mail{
        width: 100%;
        float: left;
        margin: 0;
        margin-bottom: 25px;
    }
    .footer_icon_qrcode{
        width: 100%;
        display: block;
        float: none;
        margin: 0 auto;
        text-align: center;
    }
    .footer_icon_qrcode img{
        max-width: 120px;
        display: inline-block;
        margin: 0 auto;
        margin-top:  25px;
    }
    .footer_icon_img{
        width: 70px;
        float: left;
        margin: 0 auto;
    }
    .footer_icon_imfo{
        width: calc(100% - 70px);
        padding-left: 10px;
    }
    .footer_other_area .footer_icon_line p, .footer_other_area .footer_icon_mail p{
        font-size: 22px;
    }
    .footer_btn_item .footer_btntext::before{top: 0px;}
    .footer_btn_item .footer_btntext::after{bottom: 0px;}
    .footer_other_area .footer_icon_line p, .footer_other_area .footer_icon_mail p{}
}

@media screen and (max-width: 400px) {
    .footer_btn_item {
        width: 100%;
        width: 50%;
        max-width: 50%;
        margin: 0;
        padding: 15px;
    }
}
/*============  footer css end ============*/
.webicon {
    width: 50px;
}