@charset 'utf-8';

#main{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; z-index: 32; min-height: 890px; }
#main .bg{ max-width: 1200px; position: relative; }
#main .bg .bg_line{ width: 1200px; height: 1200px; position: fixed; left: 70px !important; top: auto !important; bottom: 200px !important; transform: translate(-50%, -50%); }
#main .bg .bg_line span{ display: block; position: absolute; }
#main .bg .bg_line span.bg_line01{ width: 1%; height: 100%; left: 0; bottom: 0; transition: 3.0s; opacity: 0; overflow: hidden; transition-delay: 7.0s; }
#main .bg .bg_line span.bg_line02{ width: 1%; height: 100%; left: 0; top: 0; transition: 3.0s; opacity: 0; overflow: hidden; transition-delay: 6.0s; }
#main .bg .circle_w{ width: 580px; height: 580px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 100px !important; z-index: 20}
#main .bg .circle_w span.line01{ display: block; width: 0.1%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition: 1.0s ease-in-out; overflow: hidden; transition-delay: 1.2s; }
#main .bg .circle_w span.line02{ display: block; width: 1px; height: 100%; position: absolute; left: auto; right: 0; top: 0; opacity: 0.1; transition: 1.0s ease-in-out; overflow: hidden; transition-delay: 1.4s; }
#main .bg .circle_w span.line02 img{ position: absolute; right: 0; top: 0; }
#main .bg .circle_w span.circle{
  display: block; width: 70%; height: 70%; margin: 15%; border-radius: 50%; background-color: #96252a;
  position: absolute; left: 0; top: 0; box-shadow: 15px 15px 36px rgba(150,37,42,0.12); transform: scale(9.0); transition: 0.7s ease-out;
}
#main .bg .circle_w span.circle i.dot{display: block; position: absolute; background: #fff; width: 15px; height: 15px; border-radius: 50%; top: 39%;left: 29%; opacity: 0; transition: 1s; transition-delay: 1.8s}
#main.on .bg .circle_w span.circle i.dot{opacity: 1}
#main .bg .circle_w i.line03{ display: block; width: 0.001px; opacity: 0.001; position: absolute; left: 0; top: 0; overflow: hidden; }
#main .bg .circle_w i.line03 img{ display: block; }

#main .bg .circle_w span.circle i.dot{display: block; position: absolute; background: #fff; width: 15px; height: 15px; border-radius: 50%; top: 39%;left: 29%; opacity: 0; transition: 1s; transition-delay: 1.8s}
#main.on .bg .circle_w span.circle i.dot{opacity: 1}

#main .bg .text img{ opacity: 0; transform: rotate(20deg); transition: 1.0s; transition-delay: 1.8s;  position: relative;  }

#main .bg .circle_w span.circle:before{ position: absolute; top: 0; left: 50px; opacity: 0; transition: 0.7s; transition-delay: 0.9s; content: attr(data-split); font-size: 132px; font-weight: 900; display: block; width: 100%;
  height: 100%; color: #fff; overflow: hidden; border-radius: 50%; z-index: 3; padding-top: 130px; padding-left: 140px; box-sizing: border-box;
}
/*transition-delay: 2.2s;*/
#main .bg .circle_w span.circle:after{ position: absolute; top: 0; left: 50px; opacity: 0; transition: 0.7s; transition-delay: 0.9s; content: attr(data-split); font-size: 132px; font-weight: 900;
  display: block; width: 100%; height: 100%; color: #231815;z-index: 2; padding-top: 130px; padding-left: 140px; box-sizing: border-box;}
/*transition-delay: 2.2s;*/
@keyframes circle2 {
  0%{
    transform: scale(8.0);
  }

  100% {
    transform: scale(1.0);
  }

}


@keyframes circle3 {
  0%{
    left: 0;
    opacity: 0;
    width: 0;
  }

  100% {
    left: 0;
    opacity: 1;
    width: 100%;
  }

}


#main.on .bg .bg_line span.bg_line01{ width: 100%; opacity: 1; }
#main.on .bg .bg_line span.bg_line02{ width: 100%; opacity: 1; }
/*#main.on .bg .circle_w span.circle{ animation: circle2 3.2s ease-in-out; background-color: #96252a; animation-fill-mode: forwards;  }*/
#main .bg .circle_w span.circle{ transform: scale(8.0); transition: transform 1s;}
#main.on .bg .circle_w span.circle{ transform: scale(1.0); background-color: #96252a; }


#main.on .bg .circle_w span.circle:before{ left: 0; opacity: 1; }
#main.on .bg .circle_w span.circle:after{ left: 0; opacity: 1; }

#main.on .bg .circle_w span.line01{ width: 100%; opacity: 1; }
#main.on .bg .circle_w span.line02{ width: 100%; opacity: 1; }

#main.on .bg .circle_w i.line03{ animation: circle3 1.0s; animation-delay: 1.5s; animation-fill-mode: forwards;  }
#main.on .bg .circle_w .m_txt{position: absolute;right: }

#main.on .bg .text img{ opacity: 1; transform: rotate(0deg); }



#main .btn{ position: absolute; left: 46%; top: 0; z-index: 9; height: 100vh; display: table; }
#main .btn .btn_wrap{ display: table-cell; vertical-align: middle; padding-top: 31%; }
#main .btn .btn_wrap:after{ content: ""; display: table; clear: both; }
#main .btn .btn_wrap > div{ float: left; background: url('/img/main/btn_bg.png') left top no-repeat; min-width: 273px; transition: 1.0s;
   top: 50px; opacity: 0; position: relative; left: 20px;
}

#main .btn .btn_wrap > p{ font-size: 28px; color: #231815; font-weight: 600; position: relative; top: 10px; left: 30px; opacity: 0; transition: 0.6s; transition-delay: 1.2s; }
#main.on .btn .btn_wrap > p{ opacity: 1; left: 0; }
#main .btn .btn_wrap > div:nth-child(1){ transition-delay: 0.5s; }
#main .btn .btn_wrap > div:nth-child(2){ transition-delay: 1.0s; }


#main .btn .btn_wrap > div a{ display: block; padding: 23px 30px; transition: 0.6s; box-shadow: 12px 12px 20px rgba(206,206,206,0.2);  background-color: #fff; border-radius: 20px 0 20px 0; }
#main .btn .btn_wrap > div a span{ display: block; font-size: 20px; color: #231815; font-weight: 700; letter-spacing: -1px; margin-bottom: 13px; transition: 0.6s; }
#main .btn .btn_wrap > div a strong{ display: block; font-size:23px; color: #96252a; font-weight: 700; letter-spacing: -1px; position: relative; transition: 0.6s;  }
#main .btn .btn_wrap > div a strong .arrow{ position: absolute; right: 10px; top: 11px; display: block; width: 10px; height: 16px; background: url('/img/main/btn_arrow01.png') center center no-repeat; transition: 0.6s;  }
#main .btn .btn_wrap > div:nth-child(1){margin-right: 60px; }
#main .btn .btn_wrap > div:hover a{ background-color: #e79797; box-shadow: 6px 6px 10px rgba(206,206,206,0.4); }
#main .btn .btn_wrap > div:hover strong{ color: #fff; }
#main .btn .btn_wrap > div:hover span{ color: #fff; }
#main .btn .btn_wrap > div:hover strong .arrow{ right: 0px; background: url('/img/main/btn_arrow02.png') center center no-repeat; }


#main .btn.on .btn_wrap > div{ opacity: 1; left: 0; }



#main .btn .btn_wrap > div:nth-child(1):hover a{ background-color: #d19b9b; box-shadow: 12px 12px 20px rgba(150,37,42,0.2); }
#main .btn .btn_wrap > div:nth-child(1):hover a span{ color: #fff; }
#main .btn .btn_wrap > div:nth-child(1):hover a strong{ color: #fff; }
#main .btn .btn_wrap > div:nth-child(1):hover strong .arrow{ right: 0px; background: url('/img/main/btn_arrow02.png') center center no-repeat; }


#main .btn .btn_wrap > div:nth-child(2):hover a{ background-color: #d19b9b; box-shadow: 12px 12px 20px rgba(150,37,42,0.2); }
#main .btn .btn_wrap > div:nth-child(2):hover a span{ color: #fff; }
#main .btn .btn_wrap > div:nth-child(2):hover a strong{ color: #fff; }
#main .btn .btn_wrap > div:nth-child(2):hover strong .arrow{ right: 0px; background: url('/img/main/btn_arrow02.png') center center no-repeat; }



#main_f{ position: absolute; right: 0; bottom: 0; z-index: 999;padding-bottom: 60px; padding-right: 117px; opacity: 0; transition: 1.2s; transition-delay: 1.0s; }
#main_f .f_nav { margin-bottom: 32px; }
#main_f .f_nav ul:after{ content: ""; display: table; clear: both; }
#main_f .f_nav ul li{ float: left; margin-right: 20px; }
#main_f .f_nav ul li:last-child{ margin-right: 0; }
#main_f .f_nav ul li a{ font-size: 15px; color: #666666; font-weight: 500; letter-spacing: -1px; }
/*#main_f .f_nav ul li:nth-child(5) a{ color: #ad0407;  }*/
#main_f address{ font-size: 14px; color: #acacac; line-height: 27px; letter-spacing: -1px; }
#main_f address span{ display: block; margin-top: 15px; }


#main_f.on{ opacity: 1; }



@media (max-width: 1670px){
  #main .btn{ left: auto; right: 60px; }
  #main .bg .circle_w{ left: -100px !important; top: 0 !important;  }
  #main .bg .bg_line img{ max-width: 1000px; }
  #main .bg .bg_line{ width: 1000px; height: 1000px; bottom: 70px !important; left: 90px !important;}
  #main .bg .bg_line span.bg_line01{ display: none; }
  #main .btn .btn_wrap > div{ top: -20px; }
  #head_w .l_menu .logo{ top: 40px;  }
  #all_menu .menu_b{ right: 60px; top: 60px; }
  #main .btn .btn_wrap > div a span{ font-size: 18px; }
  #main .btn .btn_wrap > div a strong{ font-size: 24px; }
  #main_f{ padding-right: 90px; padding-bottom: 40px; }
  #main .btn .btn_wrap > p{ top: -50px;  }
}

@media (max-width: 1300px){
  #all_menu .box_w.on{ right: 0; }
  #all_menu .box_w{ max-width: auto; width: 80%; right: -90%; }
}


@media (max-width: 1216px){
  #head_w .l_menu{ background-color: transparent; height: auto; width: 100%; text-align: left; }
  #head_w .m_menu{ display: none; }
  #head_w .family{ display: none; }
  #head_w .l_menu .logo{ left: 40px; width: 110px; margin: 0; position: fixed}
  #main .bg .circle_w{ margin: 0; left: 50px !important; }
  #main .bg .bg_line{ width: 900px; height: 900px; left: -100px !important; }
	#all_menu .all_nav{overflow: scroll; height: 100%}

}

@media (max-width: 830px){
  #head_w .l_menu .logo img{ width: 69px; }
  #all_menu .menu_b{ width: 30px; height: 22px; right: 40px; top: 50px;  }
  #main .bg .circle_w{ width: 400px; height: 400px; }
  #main .bg .circle_w img{ max-width: 400px; }
  #main .bg .circle_w span.circle:before{ font-size: 90px; padding-top: 100px; padding-left: 100px; }
  #main .bg .circle_w span.circle:after{ font-size: 90px; padding-top: 100px; padding-left: 100px; }
  #main.on .bg .circle_w i.line03 img{ max-width: 280px; }
  #main .btn{ width: 100%; text-align: center; right: 0; padding: 0 40px; }
  #main .btn .btn_wrap > div{ width: 48%; margin-right:4% !important; text-align: left; }
  #main .btn .btn_wrap > div:nth-child(2){ margin-right: 0 !important; }
  #main .bg .bg_line{ width: 700px; height: 700px; }
  #main .bg .bg_line img{ max-width: 700px; }
  #main_f{ padding-right: 0; width: 100%; text-align: center; }
  #main_f .f_nav ul li{ float: none; display: inline-block; }
  #main_f .f_nav{ margin-bottom: 15px; }
  #main_f address{ font-size: 12px; line-height: 22px; }
  #main_f address span{ margin-top: 5px; }
  #main_f .f_nav ul li a{ font-size: 13px; }
	#all_menu .box_w .close{ right: 40px; top: 40px;  }
	#all_menu .all_nav > ul > li > a{ font-size: 16px; }
	#all_menu .all_nav .sub li a{ font-size: 14px; }
	#all_menu .all_nav > ul > li{ padding-left: 25px; }
	#all_menu .all_nav .sub{ padding-left: 10px; }
  #all_menu .all_nav .sub{ display: none; }
	#all_menu .all_nav li.on .sub{ display: block;; }
	#all_menu .all_nav > ul > li{ float: none; width: 100%; height: auto; padding-top: 0; }
	#all_menu .all_nav > ul > li:nth-child(4), #all_menu .all_nav > ul > li:nth-child(5), #all_menu .all_nav > ul > li:nth-child(6){ padding-top: 0; }
	#all_menu .all_nav > ul{ padding-top: 250px; padding-left: 50px; }
	#all_menu .all_nav > ul > li{ padding: 15px 0 !important; }

	#main .bg{height: 300px; }
	#main .btn{position: static; height: auto; }
	#main_f{position: static}
	#main .btn .btn_wrap{padding-top: 149px; }
	#main{position: static}
	#main{min-height: 650px}
	#all_menu .all_nav > ul{height: auto}


}

@media (max-width: 680px){
  #main .btn .btn_wrap{ padding-top:  190px; }
  #main .btn .btn_wrap > div{ min-width: auto; }
  #footer{padding-right: 10px;padding-left: 10px;}
  #footer address{font-size: 11px}
  #footer .f_nav ul li{width: 33%;margin-right: 0}
  #footer .f_nav ul li a{font-size: 11px;}
  #footer address{line-height: 1.8}
  #footer address i{display: block;}
  #footer{width: 100%;padding-bottom: 30px}

}

@media (max-width: 600px){
  #main .bg .bg_line{ left: -150px !important; }
  #main .bg .circle_w{ left: 0 !important; }
}

@media (max-width: 580px){
/*  #main .btn .btn_wrap{ padding-top: 240px; }*/
  #main .btn .btn_wrap > div{ width: 100%; margin-right: 0 !important; margin-bottom: 20px; }
  #main .btn .btn_wrap > p{ font-size: 18px; }
	#main{min-height: 588px;}
	#main .bg .circle_w span.line02{top: -5px; }
}

@media (max-width: 550px){
  #main .bg .bg_line{ width: 500px; left: -100px !important; }
  #main .bg .bg_line img{ max-width: 500px; }
  #main .bg .circle_w{ width: 300px; height: 300px; }
  #main .bg .circle_w img{ max-width: 300px; }
  #main.on .bg .circle_w i.line03 img{ max-width: 210px; }
  #main .bg .circle_w span.circle:before{ font-size: 66px; padding-top: 75px; padding-left: 75px; font-weight: 700; letter-spacing: }
  #main .bg .circle_w span.circle:after{ font-size: 66px; padding-top: 75px; padding-left: 75px; font-weight: 700}
	#main.on .bg .circle_w span.circle i.dot{opacity: 0.95}
  #main .bg .circle_w{ top: 60px !important; }
	#main .bg .circle_w span.circle i.dot{width: 7.5px; height: 7.5px; left: 29%; top: 37%;}
	#main_f .f_nav ul li{margin-right: 0; width: 16.66%; float: left}
	#main_f .f_nav ul li a{display: block; text-align: center; line-height: 20px; }
	#main .btn .btn_wrap > p{top: -40px; }
	.ceo .co_con01 .txt{width: 100%}
	#main .btn .btn_wrap{top: 110px; }
}

@media (max-width: 550px){
  #main .bg .bg_line{ width: 500px; left: -100px !important; }
  #main .bg .bg_line img{ max-width: 500px; }
  #main .bg .circle_w{ width: 300px; height: 300px; }
  #main .bg .circle_w img{ max-width: 300px; }
  #main.on .bg .circle_w i.line03 img{ max-width: 210px; }
  #main .bg .circle_w span.circle:before{ font-size: 66px; padding-top: 75px; padding-left: 75px; font-weight: 700; letter-spacing: }
  #main .bg .circle_w span.circle:after{ font-size: 66px; padding-top: 75px; padding-left: 75px; font-weight: 700}
	#main.on .bg .circle_w span.circle i.dot{opacity: 0.95}
  #main .bg .circle_w{ top: 60px !important; }
	#main .bg .circle_w span.circle i.dot{width: 7.5px; height: 7.5px; left: 29%; top: 37%;}
	#main_f .f_nav ul li{margin-right: 0; width: 16.66%; float: left}
	#main_f .f_nav ul li a{display: block; text-align: center; line-height: 20px; }
	#main .btn .btn_wrap > p{top: -40px; }
	.ceo .co_con01 .txt{width: 100%}
	#main .btn .btn_wrap{top: 110px; }

}

@media (max-width: 414px){
  #main .btn .btn_wrap > div a{ padding: 12px 20px; }
  #main .btn .btn_wrap > div a span{ font-size: 14px; margin-bottom: 5px; }
  #main .btn .btn_wrap > div a strong{ font-size: 18px; }
#main .btn .btn_wrap > div a strong .arrow{ top: -9px;  }
#head_w .l_menu .logo{ left: 20px; top: 40px; }
#all_menu .menu_b{ right: 25px; top: 45px; }
#main .bg .bg_line{ width: 400px; left: -50px !important; bottom: 0px !important; }
#main .bg .bg_line img{ max-width: 400px; }
#main_f .f_nav ul li{ margin-right: 10px; }
#main_f address{ word-break: keep-all; }
#all_menu .all_nav > ul{ padding-top: 200px; }
/*#main .btn .btn_wrap{ padding-top: 240px; }*/
#main_f{ padding-bottom: 20px; }
	#main_f .f_nav ul li{margin-right: 0}
}

@media (max-width: 375px){
  #main .bg{ left: -40px !important;  }
  #main .bg .circle_w{ top: 30px !important; }
  #main_f address{ font-size: 10px; line-height: 20px; }
  #main_f .f_nav ul li a{ font-size: 12px; }
  #all_menu .all_nav > ul{ padding-top: 170px;padding-left: 30px; }
}