/* CSS Document */

div,ul,li,h1,h2,h3,h4,p,span,input,dl,dt,dd,a,table,form{ margin:0; padding:0; list-style:none; font-family:'Arial', 'sans-serif'; color:#333;}

a:link,a:visited,a:hover,a:active{text-decoration:none;}

html,body{height:100%;}
body{ margin:0 auto; padding:0px; background-image: url("../img/bg_mobile.jpg"); background-size:140%; background-repeat: no-repeat; background-position: -120px top; position: relative;}

.body_flex{ display: flex; height: 100%; flex-flow: column}

.mobile_top_1{ height: 150px; background-color: rgba(255,255,255,0.20); background-image: url("../img/logo_l.svg"); background-size: 242px; background-repeat: no-repeat; background-position: 24px 70px; border-bottom: 1px #fff solid; position: relative;}
.mobile_top_1 .language{ display: flex; justify-content: flex-end; padding-right:24px;}
.mobile_top_1 .language a{ display: block;}
.mobile_top_1 .language a img{ width:28px; height: 28px; border: 0px;}
.mobile_top_1 .t_itm{ padding:8px 24px; color: #fff; font-size: 14px; position: absolute; right: 0px; bottom: 0px;}
.mobile_menu{}
    .mobile_menu .itm {
        border-bottom: 1px #fff solid;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #fff;
        position: relative;
        background: linear-gradient(to right, rgba(210,1,83,0.10), rgba(255,255,255,0.10) 50%, rgba(210,1,83,0.10));
    }
.mobile_menu .itm i{ position: absolute; right:24px; top:14px; width:22px; height: 22px; background: url("../img/icon_menulist.svg") center center no-repeat; background-size: 22px; }
.mobile_index_txt{ background: url("../img/itm_txt.svg") 24px top no-repeat; background-size: 300px; padding:24px 24px 0px 24px; margin-top: 100px}
.mobile_index_txt div{ font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; height: 36px; display: flex; align-items: center; font-size: 18px; color: #fff;}
.mobile_index_txt .etxt{font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; height: 10px; display: flex; align-items: center; font-size: 10px; color: #fff;}

.mobile_top_s{height: 70px; background-image: url("../img/logo_s.svg"); background-size: 40px; background-position: 24px center; border-bottom: 0px;}
.mobile_top_ot{ flex: 1; padding:8px 12px; overflow: hidden}
.mobile_top_ot .box{ height: 100%; background: rgba(255,255,255,0.9); display: flex; flex-flow: column; overflow: hidden}
.mobile_top_ot .box .box_type{ display: flex; height: 32px; justify-content: flex-end; align-items: center; border-bottom: 1px #ddd solid; padding:4px 0px; margin: 0px 12px}
.mobile_top_ot .box .box_type .close{ width:18px; height: 18px; background: url("../img/icon_close.svg") center center no-repeat; background-size: 18px;}
.mobile_top_ot .box .box_type .tabbox{ display: flex; flex: 1; overflow: hidden; height: 32px}
.mobile_top_ot .box .box_type .tabbox .tab_itm{ margin-right: 8px; height: 32px; display: flex; align-items: center; padding:0px 8px; font-size: 12px; color: #606060; background: #ECECEC}
.mobile_top_ot .box .box_type .tabbox .hover{ background: #0A3B28; color: #fff;}
.mobile_top_ot .box .box_container{ flex: 1; overflow-y: scroll; margin-top: 20px; padding:0px 12px;}
.mobile_top_ot .box .box_container .container{ border-top:1px #ddd solid;}
.mobile_top_ot .box .box_container .container dl{border:1px #ddd solid; border-top:0px;}
.mobile_top_ot .box .box_container .container dl dt{ display:flex; height: 50px; justify-content: center; align-items: center; font-size: 14px; color: #a8a8a8; position: relative}
.mobile_top_ot .box .box_container .container dl dt i{ position: absolute; width:30px; height: 30px; right: 12px; background: url("../img/icon_menulist_1.svg") center center no-repeat; background-size: 24px;}
.mobile_top_ot .box .box_container .container dl dd{}
.mobile_top_ot .box .box_container .container dl dd a{ border-top:1px #ddd solid; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #000; height: 50px;}

.mobile_top_ot .box .box_container .container .open dt i{ background: url("../img/icon_menulist_open.svg") center center no-repeat; background-size: 24px;}

.mobile_top_ot .box .box_container .QR_box_1{ width:260px; margin-left: auto; margin-right: auto}
.mobile_top_ot .box .box_container .QR_box_1 dt{ font-size:14px; display: flex; align-items: center; justify-content: center; height: 24px; color: #000;}
.mobile_top_ot .box .box_container .QR_box_1 dd{ border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; padding:10px 0px;}
.mobile_top_ot .box .box_container .QR_box_1 dd .QR_itm{ border-radius: 8px; background: #39A65C; padding:10px 0px 10px 10px; display: flex;}
.mobile_top_ot .box .box_container .QR_box_1 dd .QR_itm .QR_img{ width:90px; height: 90px; border: 0px;}
.mobile_top_ot .box .box_container .QR_box_1 dd .QR_itm .c_box{ display:flex; flex-flow: column; justify-content: center; align-items: center; flex: 1; }
.mobile_top_ot .box .box_container .QR_box_1 dd .QR_itm .c_box .img_1{ width:140px; margin-bottom: 4px}
.mobile_top_ot .box .box_container .QR_box_1 dd .QR_itm .c_box p{ margin-top: 4px; width:100px; border-radius: 4px; height:30px; display: flex; padding:4px 0px 4px 40px; align-items: center; color:#000; font-size: 14px; background:#fff url("../img/icon_search.svg") 10px center no-repeat; background-size: 16px;}
.mobile_top_ot .box .box_container .QR_box_2{ width:260px; margin-left: auto; margin-right: auto; margin-top: 10px}
.mobile_top_ot .box .box_container .QR_box_2 dt{ text-align: center;}
.mobile_top_ot .box .box_container .QR_box_2 dt img{ width:120px; border: 0px;}
.mobile_top_ot .box .box_container .QR_box_2 dd{ font-size:14px; text-align: center; line-height: 18px; color: #000; padding: 10px 0px}
.mobile_top_ot .box .box_container .QR_box_2 dd span{ color:#8E8068}
.mobile_top_ot .box .itm_area{ display: flex; background: #999; padding: 10px; flex-wrap: wrap}
.mobile_top_ot .box .itm_area a{display: flex; align-items: center; font-size: 11px; color: #fff; margin-right: 10px; padding: 5px 0px;}
.mobile_top_ot .box .itm_area a img{ width:16px; height: 16px; margin-right: 4px;}
.mobile_top_ot .box .mc_info_area{ margin-top:10px;}
.mobile_top_ot .box .mc_info_area .area{ border:1px #ddd solid; border-top:4px #ddd solid; border-bottom: 4px #ddd solid; padding: 8px 0px}
.mobile_top_ot .box .mc_info_area .area p{ padding:0px 8px; font-size: 12px; color: #666; line-height: 18px;}

.web_body{background: url("../img/bg_web.jpg") center top no-repeat; background-size:100%;}
.web_body .topbox{ display: flex; background-color: rgba(255,255,255,0.2)}
.web_body .topbox .logo{ height: 89px; background: url("../img/logo_l.svg") center center no-repeat; width:340px; background-size: 240px;border-bottom:1px rgba(255,255,255,0.5) solid;}
.web_body .topbox .login{ width:250px; height: 89px; position: relative; display: flex; justify-content: center; align-items: center; background-color: rgba(255,255,255,0.1); border-bottom:1px rgba(255,255,255,0.5) solid;  border-left: 1px rgba(255,255,255,0.5) solid;}
.web_body .topbox .login .login_itm{ border:4px #999 solid; background: #fff; width:48px; height: 48px; display: flex; justify-content: center; align-items: center; font-size: 12px; color: #666; font-weight: bold; border-radius: 100%; cursor: pointer; position: relative;}
.web_body .topbox .login .login_itm .bubble{ display: none;}
.web_body .topbox .login .login_itm .bubble .bubble_box{ position: absolute; top:50px; right:0px; z-index: 99; width:220px; height: 250px; background: url("../img/bg_bubble1.svg") center center no-repeat; display: flex; flex-direction: column; background-size: 220px;}
.web_body .topbox .login .login_itm .bubble p{ margin: 30px 20px 10px 20px; color: #666; border-bottom: 1px #ddd solid; text-align: center; line-height: 20px; padding-bottom:10px; font-size: 12px;}
.web_body .topbox .login .login_itm .bubble div{ display: flex; justify-content: center; }
.web_body .topbox .login .login_itm .bubble div img{ width:140px;}
.web_body .topbox .login .login_itm:hover .bubble{ display:block}

.web_body .topbox .nav_box{ flex: 1;}
.web_body .topbox .nav_box .nav_box_tr{ height: 45px; display: flex;}
.web_body .topbox .nav_box .nav_box_tr .nav{ display: flex; justify-content: center; align-items: center; font-size: 12px; color: #fff; position: relative; border-bottom:1px rgba(255,255,255,0.5) solid; border-left:1px rgba(255,255,255,0.5) solid; flex: 1; cursor: pointer}
.web_body .topbox .nav_box .nav_box_tr .nav i{ width:24px; height: 24px; position: absolute; right: 10px; top:10px; background: url("../img/icon_menulist.svg") center center no-repeat; background-size: 24px;}
.web_body .topbox .nav_box .nav_box_tr .nav:hover{background-color: rgba(0,0,0,0.4)}

.web_body .topbox .login .language{ width:28px; height: 56px; position: absolute; right: 0px; top:0px;}
.web_body .topbox .login .language a{ display: block; cursor: pointer;}
.web_body .topbox .login .language a img{ border:0px; width:28px; height: 28px;}

.web_body .tagbox{ display: flex; background:rgba(0,0,0,0.05); flex-wrap: wrap;}
.web_body .tagbox dl{ width:10%; cursor: pointer}
.web_body .tagbox dl dt{display: flex; justify-content: center; align-items: center; font-size: 12px; color: #fff; background:rgba(0,0,0,0.2); border-right:1px rgba(255,255,255,0.5) solid; border-top:1px rgba(255,255,255,0.5) solid; margin-top: -1px;  padding:5px;}
.web_body .tagbox dl dd{display: flex; justify-content: center; align-items: center; font-size: 12px; color: #fff; background:rgba(0,0,0,0.05); border-right:1px rgba(255,255,255,0.5) solid; border-bottom:1px rgba(255,255,255,0.5) solid; padding:5px; position: relative;}
/*.web_body .tagbox dl:hover dt{ background: #258155}*/
/*.web_body .tagbox dl:hover dd{ background: #88B987}*/
.web_body .tagbox dl dd .bubble{ display: none;}
.web_body .tagbox dl dd .bubble .bubble_box{ position: absolute; top:50px; left:20px; z-index: 99; width:220px; height: 250px; background: url("../img/bg_bubble.svg") center center no-repeat; display: flex; flex-direction: column; background-size: 220px;}
.web_body .tagbox dl dd .bubble p{ margin: 30px 20px 10px 20px; color: #666; border-bottom: 1px #ddd solid; text-align: center; line-height: 20px; padding-bottom:10px; font-size: 12px;}
.web_body .tagbox dl dd .bubble div{ display: flex; justify-content: center; }
.web_body .tagbox dl dd .bubble div img{ width:140px;}
.web_body .tagbox dl dd:hover .bubble{ display:block}
.web_body .tagbox .hover dt{ background: #258155}
.web_body .tagbox .hover dd{ background: #88B987}
.web_body .tagbox_t{ background:rgba(0,0,0,0.2); border-bottom:1px rgba(255,255,255,0.5) solid;}



.web_body .txt_img{ position: absolute; left: 30px; bottom:100px;}
.web_body .txt_img .img{ width:70%;}

.web_body_flexcolumn{ display: flex; flex-direction: column;}
.web_body_flexcolumn .web_index_itmbox{ flex: 1; margin: 30px 35px; background:rgba(255,255,255,0.9); display: flex; flex-direction: column;}
.web_body_flexcolumn .web_index_itmbox .title_area{ height: 30px; margin: 10px 20px 0px 20px; border-bottom: 1px #ddd solid; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #666;}
.web_body_flexcolumn .web_index_itmbox .title_area .close{ width:16px; height: 16px; background: url("../img/icon_close.svg") center center no-repeat; background-size: 12px; cursor: pointer;}
.web_body_flexcolumn .web_index_itmbox .li_itm_area{ height: 40px; display: flex; align-items: center; justify-content: center; background: #999}
.web_body_flexcolumn .web_index_itmbox .li_itm_area a{ display: flex; height: 40px; align-items: center; color: #fff; font-size: 12px; padding-left: 20px; background-size: 16px; background-position: left center; background-repeat: no-repeat; margin: 0px 10px;}
.web_body_flexcolumn .web_index_itmbox .li_itm_area .phone{ background-image: url("../img/icon_phone.svg");}
.web_body_flexcolumn .web_index_itmbox .li_itm_area .wechat{ background-image: url("../img/icon_wechat.svg");}
.web_body_flexcolumn .web_index_itmbox .li_itm_area .ins{ background-image: url("../img/icon_instagram.svg");}
.web_body_flexcolumn .web_index_itmbox .li_itm_area .mail{ background-image: url("../img/icon_mail.svg");}
.web_body_flexcolumn .web_index_itmbox .li_itm_area .office{ background-image: url("../img/icon_office.svg");}
.web_body_flexcolumn .web_index_itmbox .contactus_table_box{ flex: 1; padding:10px 20px;}
.web_body_flexcolumn .web_index_itmbox .contactus_table_box .contactus_table{ display: flex; justify-content: center; flex-wrap: wrap; padding-left: 1px; padding-top: 1px;}
.web_body_flexcolumn .web_index_itmbox .contactus_table_box .contactus_table .c_td{ width:20%; height: 140px; margin-left: -1px; margin-top: -1px; display: flex;}
.web_body_flexcolumn .web_index_itmbox .contactus_table_box .contactus_table .c_td .c_td_itm{ border:1px #ddd solid; padding:10px; font-size: 12px; color: #333; flex: 1}
.web_body_flexcolumn .web_index_itmbox .QRlist_area{ height: 200px; display: flex; justify-content: center;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area dl{ margin: 0px 10px;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_wechat{ display: flex; flex-direction: column;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_wechat dt{ height: 20px; line-height: 20px; font-size: 12px; text-align: center;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_wechat dd{ display: flex; border-radius: 8px; background: #39A65C; width:210px;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_wechat dd .QR{width:80px; height: 80px; padding:8px 0px 8px 8px;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_wechat dd .QR img{width:80px; height: 80px;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_wechat dd .right_part{ flex: 1; display: flex; flex-direction: column; padding:0px 8px; align-items: center; justify-content: center}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_wechat dd .right_part .txt{ height: 30px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #333; background: #fff; border-radius: 4px; padding:0px 8px; margin-top: 10px}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_wechat dd .right_part .txt img{ width:16px; height: 16px; margin-right: 10px;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_wechat dd .right_part .img{ width: 100px;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_forested{ display: flex;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_forested img{ height: 120px; margin-top: 10px}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_nor{ text-align: center}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_nor img{ width:120px; margin: 10px 0px;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_nor p{ font-size:12px; line-height: 16px; text-align: center;}
.web_body_flexcolumn .web_index_itmbox .QRlist_area .itm_nor p span{ color:#8E8068}