/*ALL CSS----------------------------------------------------------------------------*/
.h_con { width: 90%; max-width: 1400px; margin: 0 auto; }
.h_pd { padding: 150px 0; }
.h_img { width: 100%; }

.h_tit::before { content: ''; display: block; width: 50px; height: 10px; background-color: #ff4835; transform: skewX(-33deg); margin: 0 auto; }
.h_tit { font-size: 2.5rem; color: #fff; text-align: center; font-weight: 500; }

.h_btn { width: 200px; height: 45px; line-height: 45px; color: #fff; border: 1px solid #fff; text-align: center; margin: 30px auto 0; transition: all 1s; }
.h_btn:hover { background-color: #ff4835; border-color: #ff4835; }

html, body { height: 100%; background-color: #222; }
a { display: block; }
iframe { margin: 0 auto !important; /* max-width: 100% !important */; }
.cnt { color: #fff; }

/*wrap-----------------------------------------------------------------------------*/
.h_wrap { width: 100%; overflow: hidden; position: relative; }


/*HEADER----------------------------------------------------------------------------*/
#h_header { width: 100%; position: fixed; top: 0; left: 0; z-index: 10; }
.h_hd_active { background-color: rgba(0,0,0,0.5); }
#h_header .h_logo { float: left; width: 150px; padding: 22px 0; }

/* menu */
#h_header .h_menu > li { float: left; height: 80px; }
#h_header .h_menu > li > a { width: 100%; height: 80px; line-height: 80px; padding: 0 20px; font-size: 1.125rem; font-weight: 500; color: #fff; position: relative; }
#h_header .h_menu > li > a::after { content:''; display: block; width: 0; height: 2px; background-color: #ff4835; position: absolute; top: 60px; left: 0; transition: all 0.5s; }
#h_header .h_menu > li:hover > a::after { width: 100%; }
/* sub menu */
#h_header .h_sub { display: none; background-color: rgba(0,0,0,0.3); }
#h_header .h_sub li a { width: 100%; padding: 5px 0; color: #fff; text-align: center; font-size: 0.9375rem; }
#h_header .h_sub li a:hover { color: #ff4835; }


#h_header .h_hd_r { float: right; }
#h_header .h_hd_r .h_ask { float: left; padding-right: 25px;  position: relative; }
#h_header .h_hd_r .h_ask a { color: #fff; line-height: 80px; }
#h_header .h_hd_r .h_ask a:hover { color: #ff4835; }
#h_header .h_hd_r .h_ask .h_ask_box { display: none; position: absolute; background-color: rgba(0,0,0,0.5); top: 80px; right: 0; width: 240px; padding: 10px 20px 20px; }
#h_header .h_hd_r .h_ask .h_ask_box li { color: #fff; white-space: nowrap; }
#h_header .h_hd_r .h_ask .h_ask_box li i { margin-right: 5px; }

#h_header .h_hd_r .h_sch { float: right; }
#h_header .h_hd_r .h_sch a { color: #fff; line-height: 80px; font-size: 1.25rem; }
#h_header .h_hd_r .h_sch a:hover i { color: #ff4835; }


/* mobile menu */
.h_mo_btn { display: none; }

.h_mo_menu { display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); position: fixed; top: 0; left: 0; z-index: 20; }
.h_mo_inner { float: right; width: 300px; height: 100%; background-color: #333; }
.mo_menu_top { width: 100%; height: 50px; background-color: #ff4835; padding: 10px; } 
.mo_menu_top .h_logo { float: left; width: 130px; }
.mo_menu_top .h_close_btn { float: right; width: 30px; height: 30px; position: relative; }
.mo_menu_top .h_close_btn span { display: block; width: 30px; height: 2px; background-color: #fff; position: absolute; top: 15px; right: 0; transform: rotate(-45deg); }
.mo_menu_top .h_close_btn span:last-child { transform: rotate(45deg); }

.h_mo_inner .h_menu { width: 100%; padding: 20px; }
.h_mo_inner .h_menu > li { width: 100%; border-bottom: 1px solid #aaa; }
.h_mo_inner .h_menu > li > a { width: 100%; padding: 10px 0; font-size: 1.25rem; font-weight: 400; color: #fff; }
.h_mo_inner .h_sub { display: none; }
.h_mo_inner .h_sub li a { font-size: 1.125rem; padding: 5px 0; color: #fff; }



/* search btn */
.h_sch_box { display: none; width: 100%; height: 50px; background-color: rgba(0,0,0,0.5); position: fixed; top: 80px; right: 0; z-index: 5; }
.h_sch_box .h_close_btn { width: 50px; position: absolute; right: 20%; z-index: 10; }
.h_sch_box .h_close_btn button { width: 30px; height: 30px; float: right; }
.h_sch_box .h_close_btn span { display: block; width: 25px; height: 2px; background-color: #fff; position: absolute; top: 25px; right: 0; transform: rotate(45deg); }
.h_sch_box .h_close_btn span:last-child { transform: rotate(-45deg); }

.h_txt_box { position: relative; width: 500px; height: 30px; top: 10px; left: 50%; transform: translateX(-50%); }



/* top btn */
.h_top_btn { display: none; width: 50px; height: 70px; position: fixed; bottom: 50px; right: 30px; background-color: rgba(255,255,255,0.3); padding: 15px; z-index: 10; }
.h_top_btn button { position: relative; }
.h_top_btn span { display: block; width: 2px; height: 15px; background-color: #333; transform: rotate(45deg); position: absolute; top: 0; left: 4px; }
.h_top_btn span:nth-child(2) { left: 14px; transform: rotate(-45deg); }
.h_top_btn p { padding-top: 20px; margin-left: -5px; font-weight: 500; white-space: nowrap; font-weight: bold; }



/* footer popup style------------------------------------------------------------------------ */
.h_foot_popup > div { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 20; background-color: rgba(0,0,0,0.6); }
.h_foot_popup > div > div { width: 720px; height: 600px; background-color: #222; padding: 40px; }
.h_foot_popup .h_close_btn { width: 30px; height: 30px; position: absolute; top: 40px; right: 40px; }
.h_foot_popup .h_close_btn span { display: block; width: 25px; height: 2px; position: absolute; top: 0; left: 0; background-color: #fff; transform: rotate(45deg); }
.h_foot_popup .h_close_btn span:last-child { transform: rotate(-45deg); }
.h_foot_popup h4 { color:#fff; font-size: 1.5rem; border-bottom: 1px solid #fff; padding: 10px 0; margin-bottom: 30px; }
.h_foot_popup p { color:#fff; }



/*SECTION1-------------------------------------------------------------------------*/
.h_sec1 { width: 100%; height: 920px; position: relative; }

.h_main_box ul .slide1 { width: 100%; height: 920px; background: url(../img/main_visual1.jpg) no-repeat center; background-size: cover; transition: all 5s 0.5s; }
.h_main_box ul .slide2 { width: 100%; height: 920px; background: url(../img/main_visual2.jpg) no-repeat center; background-size: cover; transition: all 5s 0.5s; }
.h_main_box ul .slide3 { width: 100%; height: 920px; background: url(../img/main_visual3.jpg) no-repeat center; background-size: cover; transition: all 5s 0.5s; }
.h_main_box .h_main_txt p { color: #fff; font-size: 2rem; text-align: center; font-weight: 500; margin-bottom: 20px; transform: translateY(-50px); opacity: 0; transition: all 2s 1s; }
.h_main_box .h_main_txt h2 { text-align: center; opacity: 0; transition: all 4s 1s; }
.h_main_box .h_main_txt h2 img { max-width: 100%; }
.h_main_box .h_main_txt strong { display: block; color: #fff; text-align: center; font-size: 1.25rem; transform: translateY(50px); opacity: 0; transition: all 2s 1.5s; }
.h_sec1 .h_btn { margin: 50px auto 0; transform: translateY(100px); transition: all 2s 2s; opacity: 0; }
.h_main_txt .h_btn { background-color: rgba(0,0,0,0.3); }
.h_main_txt .h_btn:hover { color: #ff4835; }

/* slide active effect */
.h_main_box ul .slide1.swiper-slide-active { background-image: url(../img/main_visual1_2.jpg); }
.h_main_box ul .slide2.swiper-slide-active { background-image: url(../img/main_visual2_2.jpg); }
.h_main_box ul .slide3.swiper-slide-active { background-image: url(../img/main_visual3_2.jpg); }
.swiper-slide-active .h_main_txt p { transform: translateY(0); opacity: 1; }
.swiper-slide-active .h_main_txt h2 { opacity: 1; }
.swiper-slide-active .h_main_txt strong { transform: translateY(0); opacity: 1; }
.h_sec1 .swiper-slide-active .h_btn { transform: translateY(0); opacity: 1; background-color: #ff4835; border-color: #ff4835; }

/* pagination */
.h_page { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 5; }
.h_page span { display: block; width: 50px; height: 3px; background-color: #fff; border-radius: 0; float: left; outline: none; }



/*SECTION2-------------------------------------------------------------------------*/
.h_sec2 { width: 100%; background-color: #222; }

.h_port_box { margin-top: 30px; }
.h_port_box ul li { float: left; width: calc(33.333% - 13.333px); height: 360px; overflow: hidden; margin-right: 20px; position: relative; margin-top: 20px; }
.h_port_box ul li:nth-child(3n) { margin-right: 0; }

.h_port_img { width: 100%; position: absolute; top: 0; left: 0; }
.h_port_img img { display: block; max-width: 100%; width: auto; margin: 0 auto; }
.h_port_txt { width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute; top: 50%; left: 0; transition: all 0.5s; }
.h_port_txt h4 { color: #fff; font-size: 1.25rem; text-align: center; font-weight: 400; white-space: nowrap; transition: all 0.5s; text-shadow: 1px 1px 1px #333; }
.h_port_txt .h_btn { width: 150px; }

.h_port_box ul li:hover .h_port_txt { background-color: rgba(0,0,0,0.5); top: 0; }
.h_port_box ul li:hover .h_port_txt h4 { font-size: 1.5625rem; }

.h_sec2 > .h_btn_box { margin-top: 70px; }



/*SECTION3-------------------------------------------------------------------------*/
.h_sec3 { width: 100%; }

.h_sec3 > div { float: left; width: 50%; height: 450px; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; transition: all 1s; }
.h_sec3 .h_ban_bg { width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); cursor: pointer; position: relative; transition: all 0.5s; }
.h_sec3 .h_ban_bg h4 { font-size: 3.75rem; color: #333; text-align: center; font-weight: 500; opacity: 0.5; transition: all 0.5s; }
.h_sec3 .h_ban_bg .h_btn_box { opacity: 0; }
.h_sec3 .h_ban_bg .h_btn { border: 1px solid #ff4835; color: #ff4835; }
.h_sec3 .h_ban_bg .h_btn:hover { color: #fff; }

.h_sec3 > div:hover { background-size: 110% 110%; }
.h_sec3 > div:hover .h_ban_bg { background-color: rgba(0,0,0,0); }
.h_sec3 > div:hover .h_ban_bg h4 { opacity: 1; text-shadow: 1px 1px 1px #999; }
.h_sec3 > div:hover .h_ban_bg .h_btn_box { opacity: 1; }

.h_ban_l { background-image: url(../img/ban_bg1.jpg); }

.h_ban_r { background-image: url(../img/ban_bg2.jpg); }



/*SECTION4-------------------------------------------------------------------------*/
.h_sec4 { width: 100%; background-color: #9a2122; }

.h_sec4 > div > div { float: left; width: 50%; padding: 70px 0; }
.h_sec4 > div > div p { color: #fff; text-align: center; line-height: 36px; }
.h_sec4 > div > div p i { font-size: 1.5rem; }
.h_sec4 > div > div i { margin-right: 5px; }
.h_sec4 > div > div p span { font-size: 1.875rem; font-weight: bold; }
.h_sec4 > div > div b { display: block; color: #fff; text-align: center; font-size: 1.25rem; font-weight: 400; }
.h_sec4 .h_about > p { margin-top: 20px !important; }

.h_sec4 > div > .h_cont > p:nth-child(2) { line-height: 26px; }
.h_sec4 > div > .h_cont > p:nth-child(3) { padding: 10px 0; }



/*FOOTER---------------------------------------------------------------------------*/
.h_footer { width: 100%; background-color: #000; padding: 50px 0; }

.h_footer .h_logo { width: 135px; margin: 0 auto; }

.h_footer ul { width: 456px; margin: 30px auto 0; }
.h_footer ul li { float: left; }
.h_footer ul li a { color: #999; font-weight: 400; padding: 0 20px; }
.h_footer ul li a:hover { color: #ddd; }

.h_footer address { color: #999; text-align: center; padding: 30px 0; }
.h_footer address span { display: inline-block; width: 1px; height: 13px; background-color: #999;  margin: 0 5px; }

.h_footer p { color: #999; font-size: 0.875rem; text-align: center; }




















@media screen and (min-width: 761px) and (max-width: 1280px){

    .h_pd { padding: 80px 0; }

    /*HEADER----------------------------------------------------------------------------*/
    #h_header .h_logo { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

    #h_header nav { display: none; }

    .h_mo_btn { display: block; float: left; }
    .h_mo_btn a { width: 35px; height: 80px; line-height: 80px; color: #fff; font-size: 1.75rem; }

    
	.h_sch_box .h_close_btn { right: 5%; }
    .h_txt_box button { position: absolute; top: 0; }



    /*SECTION1-------------------------------------------------------------------------*/
    .h_sec1 { height: 720px; }
	.h_main_box ul .slide1 { height: 720px; }
	.h_main_box ul .slide2 { height: 720px; }
	.h_main_box ul .slide3 { height: 720px; }




    /*SECTION2-------------------------------------------------------------------------*/
    .h_port_box { margin-top: 30px; }
    .h_port_box ul li { width: calc(50% - 2%); height: 300px; margin-right: 4%; }
    .h_port_box ul li:nth-child(3n) { margin-right: 4%; }
    .h_port_box ul li:nth-child(2n) { margin-right: 0; }
    .h_port_box ul li:last-child { display: none; }



    /*SECTION3-------------------------------------------------------------------------*/
    .h_sec3 > div { float: none; width: 100%; }



    /*SECTION4-------------------------------------------------------------------------*/
    .h_sec4 > div > div { float: none; width: 100%; padding: 40px 0; }
    .h_sec4 .h_cont { padding-top: 30px; }




   
}

@media screen and (max-width: 760px){
	
	iframe { margin: 0 auto !important; max-width: 100% !important; }

    /*ALL CSS----------------------------------------------------------------------------*/
    .h_pd { padding: 60px 0; }

    .h_tit::before { width: 30px; height: 5px; }
    .h_tit { font-size: 2rem; color: #fff; text-align: center; font-weight: 500; }

    .h_btn { width: 150px; }




    /*HEADER----------------------------------------------------------------------------*/
    #h_header .h_logo { float: none; width: 130px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

    #h_header nav { display: none; }

    
    #h_header .h_hd_r .h_ask { float: left; padding-right: 15px; }

    .h_mo_btn { display: block; float: left; }
    .h_mo_btn a { width: 35px; height: 80px; line-height: 80px; color: #fff; font-size: 1.75rem; }


    .h_sch_box .h_close_btn { right: 5%; }
    .h_txt_box button { position: absolute; top: 0; }


    /*SECTION1-------------------------------------------------------------------------*/
    .h_sec1 { height: 620px; }
	.h_main_box ul .slide1 { height: 620px}
	.h_main_box ul .slide2 { height: 620px; }
	.h_main_box ul .slide3 { height: 620px; }

	.h_main_box .h_main_txt p {  font-size: 1.5rem; white-space: nowrap; }
    .h_main_box .h_main_txt h2 { font-size: 4rem; white-space: nowrap; }



    /*SECTION2-------------------------------------------------------------------------*/
    .h_port_box { margin-top: 30px; }
    .h_port_box ul li { width: 100%; height: 300px; margin-right: 0; }



    /*SECTION3-------------------------------------------------------------------------*/
    .h_sec3 > div { float: none; width: 100%; height: 300px; }

    .h_sec3 > div h4 { white-space: nowrap; }



    /*SECTION4-------------------------------------------------------------------------*/
    .h_sec4 > div > div { float: none; width: 100%; padding: 40px 0; }

    .h_sec4 .h_about { padding-bottom: 0; }


    /*FOOTER-------------------------------------------------------------------------*/
    .h_footer .h_logo { width: 100px; }

    .h_footer ul { width: 295px; }
    .h_footer ul li a { padding: 0 10px; }

    .h_footer address span { height: 10px; }
    .h_footer address span:nth-child(3) { display: none; }
	.h_footer address span:nth-child(6) { display: none; }
  

}