@charset "utf-8";

.w1780{max-width: 1780px;margin: 0 auto;}
.w1600{max-width: 1600px;margin: 0 auto;}
.w1780 .w1600{padding: 0 10px;}

.mo-hide{display: block;}
.mo-show{display: none;}
@media screen and (max-width:1280px){
    .mo-hide{display: none;}
    .mo-show{display: block;}
}

/* header */
header {width:100%;height:100px;z-index: 999;position: fixed;top: 0;left: 0;background-color: #fff;transition: all 0.3s;}
.header {width: 100%;height: 100%;padding: 0 10px;display: flex;justify-content: space-between;align-items: center;}
header.ham{background-color: transparent;}

/* header-left */
.header-left {height: 100%;}
.header-left .logo {display: flex;width: auto;height: 100%;align-items: center;}
.header-left .logo a{background: url(images/logo.png) no-repeat center left; background-size:contain;width:300px;height: 100%;}
.sub-header .header-left .logo a.on{opacity: 0.4;}

/* header-right */
.header-right {height: 100%;}
.header-right nav{height: 100%;}
.header-right nav .menu{display: flex;height: 100%;}
.header-right nav .menu > li {display: flex;align-items: center;justify-content: center;margin-right: 100px;position: relative;}
.header-right nav .menu > li:last-child{margin-right: 0px;}

.header-right nav .menu > li > a{font-size: 1.5rem;font-weight: 500;display: flex;align-items: center;height: 100%;}
.header-right nav .menu > li > a:hover{color: #FF5E00;}
.header-right nav .menu > li > a::before {content:"";display: block;width: 7px;height: 7px;border-radius: 50%;background: #FF5E00;position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%); transition: .3s ease;transition-delay: .1s;opacity: 0;}
.header-right nav .menu > li > a:hover::before{visibility: visible;opacity: 1;}

.ham-btn{display: none;height: 100%;transition: all 0.3s;}
.ham-btn a{display: block;width: 35px;}
.ham-btn a span{display: block;width: 100%;height: 3px;border-radius: 5px;background-color: #FF5E00;transition: all 0.3s;}
.ham-btn a span:nth-child(2){margin: 8px 0;}

.ham-btn.on span:nth-child(1){
    transform: rotate(45deg) translate(7px,9px);
}
.ham-btn.on  span:nth-child(3){
    transform: rotate(-45deg) translate(7px,-9px);
}
.ham-btn.on  span:nth-child(2){
    opacity: 0;
}

.depth2{visibility: hidden;opacity: 0; position:absolute;top:100%;left:50%;width:185px;overflow:hidden;padding:30px 30px 35px;border-radius:20px;background-color:#fff;box-shadow:5px 5px 20px rgba(0,0,0,.1);transform:translate(-50%);transition:opacity .3s, visibility .3s, transform .3s;z-index:999;}
.depth2 ul li{font-size: 1.188rem;font-weight: 400;margin-bottom: 20px;}
.depth2 ul li:last-child{margin-bottom: 0px;}
.depth2 ul li a{position: relative;}
.depth2 ul li a::after{content:'';display:block;position:absolute;bottom:0;left:0px;width:0;height:10px;background-color:#FF5E00;transition:all .3s;z-index:-1;opacity: 0.1;}
.depth2 ul li:hover a{color: #FF5E00;}
.depth2 ul li:hover a::after{width:100%;}
.menu li:hover .depth2{visibility:visible;opacity:1;transform:translate(-50%);}

.overlay{width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.4);position: fixed;top: 0;left: 0;z-index: 100;display: none;cursor:pointer;}

/* sub-header */
.sub-header header{background-color: transparent;}
.sub-header .header-left .logo a{background: url(images/logo_w.png) no-repeat center left; background-size:contain;}
.sub-header .header-right nav .menu > li > a{color: #fff;text-shadow: 0px 3px 6px #00000016;}
.sub-header .depth2{top:90%;}
.sub-header .header-right nav .menu > li > a::before {background: #fff;}
.sub-header .ham-btn a span{background-color: #fff;}

.sub-header.on header {background: #fff;box-shadow: 0 5px 20px rgb(0 0 0 / 10%);}
.sub-header.on header.ham{background: transparent;box-shadow: none;}
.sub-header.on .header-left .logo a{background: url(images/logo.png) no-repeat center left; background-size:contain;}
.sub-header.on .header-right nav .menu > li > a{color: #000;text-shadow: none;}
.sub-header.on .header-right nav .menu > li > a:hover{color: #FF5E00;}
.sub-header.on .depth2{top:100%;}
.sub-header.on .header-right nav .menu > li > a::before {background: #FF5E00;}
.sub-header.on .ham-btn a span{background-color: #FF5E00;}

/* sub-nav */
.sub-nav{background:
  radial-gradient(
    circle at bottom,
    rgba(255,255,255,0.16),
    transparent 60%
  ),
  linear-gradient(
    180deg,
    #ffad33 0%,
    #ffb84d 35%,
    #ffbf66 70%,
    #ffd699 100%
  );height: 350px;width: 100%;display: flex;justify-content: flex-end;align-items: center;padding-bottom: 60px;flex-direction: column;/* border-radius: 0 0 0 100px; */}
.sub-nav .title{color: #fff;font-family: 'A2Z';font-size: 3.75rem;margin-bottom: 20px;text-shadow:
  0 4px 12px rgba(163, 74, 0, 0.28),
  0 12px 32px rgba(120, 45, 0, 0.18);}
.sub-menu{display: flex;align-items: center;}
.sub-menu li{margin-right: 20px;}
.sub-menu li:last-child{margin-right: 0px;}
.sub-menu li::after{content: '';display: inline-block;width: 10px;height: 10px;background: url(images/arrow-r.png) no-repeat;background-size: contain;margin-left: 20px;}
.sub-menu li:last-child:after{display: none;}
.sub-menu li a{color: #fff;font-size: 1.25rem;font-weight: 500;}

/* footer */
footer{background-color: #EBEBEB;}
.footer{background-color: #000;/* border-radius: 80px 0 0 0; */padding: 65px 0 75px;}
.footer .w1780{padding: 0 10px;}
.footer-top .logo{margin-bottom: 20px;}
.footer-top .logo a{background: url(images/logo_f.png) no-repeat center left; background-size:contain;width:300px;height: 50px;display: block;}
.footer-top ul li{margin-right: 40px;display: inline-block;line-height: 1.5;}
.footer-top ul li a{color: #777;font-size: 1.125rem;font-weight: 500;}

.footer a.orange{color: #FFAE18 !important;}

.footer-bottom{margin-top: 40px;color: #777;font-size: 1rem;font-weight: 500;}
.footer-bottom .name{display: block;color: #bbb;font-size: 1.25rem;font-weight: 500;margin-bottom: 20px;}
.footer-bottom ul{color: #bbb;font-size: 1.25rem;font-weight: 500;margin-bottom: 15px;}
.footer-bottom li{margin-right: 23px;display: inline-block;line-height: 1.5;}
.footer-bottom li::after{content: ;}
.footer-bottom li span{color: #bbb;font-size: 1.125rem;margin-left: 10px;}
.footer-bottom p{line-height: 1.5;}

.sub-footer footer{background-color: transparent;}

/* top_btn */
.top_btn-area{position:fixed;bottom:20px;right:20px;width:50px;height:50px;z-index:100;}
.top_btn{border-radius:50%;border:none;background:#fff;color:#5f6368;box-shadow:0px 2px 8px 0px #00000050;width:50px;height:50px;transition: all 0.3s;}
.top_btn:hover{background: #FF5E00;}
.top_btn:hover i{color: #fff;}

@media screen and (max-width:1024px){
    header {height:100px;}
    .header-left .logo a{width: 220px;}
    .ham-btn{display:flex;align-items: center;z-index: 1000;position: absolute;right: 10px;}
    .header-right nav{position: fixed;right: -1000px;transition: all 0.5s;height: 100vh;width: 350px;background-color: #fff;top: 0;}
    .header-right nav.on{right: 0;}

    .header-right nav.on .menu{flex-direction: column;margin-top: 100px;}
    .header-right nav.on .menu > li{margin-right: 0;justify-content: flex-start;margin-left: 50px;margin-bottom: 50px;flex-direction: column;align-items: flex-start;}
    .header-right nav.on .menu > li > a{background: url(images/arrow-d.png) no-repeat right 50px center;background-size: 15px;width: 100%;}
    .header-right nav.on .menu > li > a::before {display: none;}
    .header-right nav.on .menu li:hover .depth2{visibility:hidden;opacity:0;}
    .header-right nav.on .menu li .depth2{display: none;}
    .header-right nav.on .menu li .depth2.on{visibility:visible;opacity:1;position: unset;overflow: unset;padding: 30px 10px 0;box-shadow: none;height: auto;display: block;transform: none;}

    .sub-header .ham-btn.on a span{background-color: #FF5E00;}
    .sub-header .header-right nav.on .menu > li > a{color: #000;}
    .sub-header .header-right nav.on .menu > li .depth2{color: #000;}

    .sub-nav{height: 300px;}

    .footer-top .logo a{width: 220px;}
    .footer{padding: 50px 0;}
}

@media screen and (max-width:768px){
    header {height:70px;}
    header .header-left .logo a{width: 170px;}

    .sub-nav{height: 250px;}

    .footer-top .logo a{width: 170px;}
}