@charset 'utf-8';

@media screen and (min-width:1921px){
/* ------------sec_choose ------------ */
#hd .choose_figure div.move {
    left: -34%;
}
/* ---------- #sec_table ---------- */
    #hd #sec_table .mobile-off{
        max-width: 1920px;
    }
/* -----------#sec_key------------- */
    #hd #sec_key ul{
        flex-wrap:nowrap;
    }
}

@media screen and (max-width:1680px){
    #hd{
        font-size: 16px;
    }

/* ------------figure 1------------ */
    #hd .choose_figure img.move {
    left: -33%;
    top: 7%;
    }

    #hd .choose_figure div.move {
        left: -44%;
        width: 117%;
    }

	
}
@media screen and (max-width:1440px){
    #hd h2{
        font-size: 4em;
    }
    #hd .select_bar .choose_bg {
		min-width: auto;
    }
    #hd .select_bar .choose_bg h5{
		font-size: 20px;
    }
/* -----------#sec_key------------- */
    #hd #sec_key .key_figure figure .key_title{
        margin-bottom: 10%;
    }
    #hd #sec_key .key_figure figure{
        flex-wrap: wrap;
        justify-content: center;
    }
    #hd #sec_key .key_figure figure .col20{
        width: 33.3%;
    }
    #hd #sec_key .key_figure figure .key_title {
        margin-bottom: 1%;
    } 
 /* ---------choose_figure------------ */  
    #hd .choose_figure div.txt_3 {
        padding: 3% 16% 3% 10%;
    }
/* ------------figure 1------------ */
    #hd .choose_figure img.move{
        left: -33%;
        top: 7%;
    }
   
/* ---------- #sec_table ---------- */
    #hd #sec_table .mobile-off{
        max-width: 1250px;
    } 	
}
@media screen and (max-width:1280px){
    #hd h2{
        font-size: 3.5em;
    }

    #hd .select_bar .choose_bg {
        padding: 17px 17px 15px;
    }
    #hd .select_bar .choose_bg h5{
		font-size: 18px;
    }
    #hd .select_bar .choose_bg p{
		font-size: .7em;
    }
    
    #hd #sec_choose .select_bar .choose_bg {
        min-width: 250px;
    }

/* -----------#sec_key------------- */
    #hd #sec_key .key_figure figure .key_title{
        margin-bottom: 15%;
    }

/* ---------choose_figure------------ */
    #hd .choose_figure div.txt_1 {
        padding: 3% 18% 3% 5%;
    }
}
@media screen and (max-width:1024px){
	#hd{
        font-size: 14px;
    }
    #hd #sec_choose .select_bar .choose_bg {
        min-width: 220px;
    }
/* -----------#sec_key------------- */
    #hd #sec_key .key_figure figure{
        flex-wrap: wrap;
    }
    #hd #sec_key .key_figure figure .col20{
        width: 50%;
    }
    #hd #sec_key .key_figure figure .key_title {
        margin-bottom: 1%;
    }
    #hd #sec_key figure.optiMen .col50 {
        width: 80%;
    }

/* ---------choose_figure------------ */
    #hd .choose_figure div.txt{
        padding: 3% 9% 2% 3% !important;
    }

/* ---------hd_footer---------- */       
    #hd #hd_footer{
        margin-top: -5%;
    }
    #hd #hd_footer h3{
		font-size: 1.3em;
	}
}
@media screen and (max-width:1023px){
    #hd h2 {
        font-size: 3em;
    }
    #hd .select_bar_a::before {
        top: 0;
        left: -8%;
        width: 111%;
    }
    #hd .select_bar_a::after {
        bottom: 0;
        left:-4%;
        width: 111%;
    }
/* -----------#sec_key------------- */
    #hd  #sec_key .select_bar{
        width: 830px;
    }
    #hd #sec_key .select_bar .choose_bg{
        width: 50%;
    }
}
@media screen and (max-width:768px){
    #hd{
        font-size: 10px;
    }

    #hd .select_bar_a::before,
    #hd .select_bar_a::after,
    #hd .select_bar_b::before,
    #hd .select_bar_b::after {
        content: none;
    }
/* -----------#select_bar------------- */    
    #hd .select_bar{
        width: 80% !important;
        flex-wrap:wrap;
    }
    #hd .select_bar .choose_bg{
        width: 100% !important;
        padding: 10px 0 8px;
        margin: 1% 0;
    }
    #hd .select_bar .choose_bg .text {
        min-height: 37px;
        height: 100%;
    }
    #hd #sec_key .select_bar .choose_bg .text {
        /* display: flex; */
        align-items: center;
    }
/* -----------#sec_key------------- */
    #hd #sec_key .key_figure figure{
        flex-wrap: wrap;
    }
    #hd #sec_key .key_figure figure .col20{
        width: 50%;
    }
    #hd #sec_key .key_figure figure .key_title {
        margin-bottom: 1%;
    }
    #hd #sec_key figure.optiMen .col20{
		width: 50%;
		display: block;
	}
    #hd #sec_key figure.optiMen .key_pic{
		width: 100%;
	}
	#hd #sec_key figure.optiMen .txt-box{
		width: 100%;
		text-align: center;
	} 
/* ---------choose_figure------------ */
    #hd .choose_figure figure {
        /* margin: 5% 0; */
        flex-wrap: wrap;
        /* margin-bottom: 15%; */
        /* display: block; */
    } 
    #hd .choose_figure figure .f50{
        width: 100%;
    }
    #hd .choose_figure div.txt,#hd .choose_figure div.txt_3{
        padding: 6% 9% !important;
    }
    #hd .choose_figure figure .f50:nth-child(2){
        width: 70%;
        margin: 0 auto;
    }
    #hd .choose_figure img.move,
    #hd .choose_figure div.move{
        /* left: -25%; */
        left:0%;
    }
    #hd #sec_choose .tab-more {
        text-align: center;
    }

   
/* ---------- #sec_table ---------- */
    #hd #sec_table .mobile-off{
        max-width: 80%;
    }
    #hd #sec_table .mCustomScrollbar {
        overflow-x: scroll;
    }
    #hd #sec_table table {
        width: 300%;
    }
    #hd .mobile-on{
        display: block;
    }
    #hd #sec_table .mobile-on{
		display: none;
    } 		
    
    #hd .mobile-off table tbody tr th:nth-child(2), #hd .th_fixed {
        left: 29.8% !important;
    }
/* ---------hd_footer---------- */       
    #hd #hd_footer h3{
        font-size: 1.7em;
        display: block;
        width: 100%;
        padding: 0;
	}
	
}
@media screen and (max-width:650px){
	
/* -----------#sec_key------------- */
    #hd #sec_key .key_figure figure{
        flex-wrap: wrap;
    }
    #hd #sec_key .key_figure figure .col20{
        width: 50%;
        margin-bottom: 2%;
    }
    #hd #sec_key .key_figure figure .key_title {
        margin-bottom: 1%;
    }
 /* ---------hd_footer---------- */       
     #hd #hd_footer h3{
        font-size: 1.5em;
    }   
}
@media screen and (max-width:620px){
	#hd{
        font-size: 9px;
    }
    #hd #fp-nav{
        display: none;
    }
    /* ---------- #sec_kv ---------- */
    #hd #sec_kv .kv{
        display: none;
    }
    #hd #sec_kv .kv_m{
        display: block;
    }
/* -----------#sec_key------------- */

    #hd #sec_key .key_figure figure {
        padding: 0%;
    }
   
/* ---------choose_figure------------ */
    #hd .choose_figure div.txt{
        padding: 4% 8%;
    }

/* ---------- #sec_table ---------- */
    #hd #sec_table .mobile-on{
        display:block;
        max-width: 80%;
        margin:0 auto;
    } 	    
    #hd #sec_table #owl-demo table {
        width: 99%;
    }   
    
    #hd .mobile-off{
		display: none;
    }
    #hd #sec_table .arrow{
        display: block;
    }   
    /* #hd #sec_table .mobile-on thead th {
        width: 60%;
    } */
    #hd #sec_table .mobile-on img{
        width: 65%;
    }
    #hd  #sec_table .owl-prev,
    #hd  #sec_table .owl-next{
        position: absolute;
        top: 50%;
        width: 10%;
        height: 4%;
    }
    #hd #sec_table .owl-next{
        background:url(../img/arrow-next.png) no-repeat;
        background-position: center;
        right: -10%;
	}
	#hd #sec_table .owl-prev{
        background: url(../img/arrow-back.png)no-repeat;
        background-position: center;
        left: -11%;
	}
}
@media screen and (max-width:480px){
	#ai_p{
		font-size:24px;
	}
    #hd{
        font-size: 10px;
    }
    #hd h2{
        line-height: .8em;
        font-size: 5em;
        margin-bottom: 2%
    }
    #hd .key_title h5 {
        font-size: 1.8em;
    }
    #hd #fp-nav{
        display: none;
    }
    #hd .mt100{
        margin-top: 2em;
    }

    #hd section{ margin-top:50px!important}
/* -----------#sec_key------------- */
    #hd #sec_key .key_figure figure{
        flex-wrap: wrap;
    }
    #hd #sec_key .key_figure figure .col20{  
        width: 90%;
        margin: 2% auto 10% auto;
    }
    #hd #sec_key .key_figure figure .col20:last-child{  
        margin-top: -9%;
    }

    #hd #sec_key .key_figure figure .key_title {
        margin-bottom: 3%;
    }
    #hd #sec_key .key_figure figure p {
        padding: 0;
    }
   
/* -----------------#sec_choose------------ */
    #hd .choose-txt {
        margin-bottom: 7%;
        padding: 0 4%;
    }
    #hd #sec_choose .tab-more{
		text-align: center;
		cursor: pointer;
	}
    #hd #sec_choose .tab-more li {
        width: 35%;
        min-height: 0.4rem;
    }
    #hd #sec_choose .tab-more li span {
        min-height:calc(4rem - 25px);
    }

/* ---------choose_figure------------ */
    #hd .choose_figure figure .f50:nth-child(2){
        width: 70%;
        margin: 0 auto;
    }           
/* ------------figure 1------------ */
    #hd .choose_figure img.move,
    #hd .choose_figure div.move{
        /* left: -25%; */
        left:0%;
    }
/* ---------- #sec_table ---------- */
    #hd #sec_table .owl-next{
        background-size: 60%;
        right: -10%;
	}
	#hd #sec_table .owl-prev{
        background-size: 60%;
        left: -11%;
	}
    #hd #sec_table td, #hd #sec_table th {
        padding: 6px;
    }
 /* ---------hd_footer---------- */       
    #hd #hd_footer {
        margin-top: -15%;
    }
    #hd #hd_footer .hd_1024on{
        display: block;

    }

}
@media screen and (max-width:425px){
    /* -----------#sec_key------------- */   
    #hd #sec_key .key_figure figure .col20 {
        width: 75%;
    }
}
@media screen and (max-width:375px){
    #hd h2{
        font-size: 4em;
    }
	#hd .choose_bg h5{
        font-size: .8em;
    }
    #hd #sec_kv h2 {
        font-size: 3em;
    }
/* -----------------#sec_choose------------ */
    #hd #sec_choose ul{
        flex-wrap:wrap;
    }
    #hd #sec_choose ul .col20{
        flex:wrap;
        width: 90%;
    }
    #hd #sec_choose .txt_list li span {
        height: 13px;
        width: 13px;
    }
/* -----------#sec_key------------- */   
    #hd #sec_key .key_figure figure .col20 {
        width: 90%;
    }
    

   

}
@media screen and (max-width:325px){
/* ---------hd_footer---------- */       
    #hd #hd_footer h3{
        font-size: 1.3em;
        display: block;
        width: 100%;
        padding: 0;
    }

/* ---------- #sec_table ---------- */
    #hd #sec_table .owl-next {
        left: 260px;
    }

/* ---------- sec_choose ---------- */
    #hd #sec_choose .tab-more li {
    width: 40%;
    }
    
}
