@charset "utf-8";
/*KV*/
.KV{ overflow:hidden; position:relative;}
.KV .PhotoBox{ max-height:880px; height:95vh; overflow:hidden;}
.KV .PhotoBox .Item{ width:100%; max-height:880px; height:95vh; background:no-repeat center 60px; background-size: 1920px 550px; background-attachment: fixed; background-size:cover; position:relative;}
.KV .SloganBox{ position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction: column; justify-content: center; align-items: center; text-align:center;}
.KV .SloganBox h1{ opacity:0; height:0; pointer-events:none;}
.KV .SloganBox .Item{ position:absolute; opacity:0;}
.KV .SloganBox .Item.Focus{ opacity:1;}
.KV .SloganBox .SubTitle{ font-size:30px; color:#fff; text-shadow:0 0 10px rgba(0,0,0,.7); text-decoration: underline;}
.KV .SloganBox .MainTitle{ font-size:80px; font-weight:bold; color:#fff; line-height:1.2; padding:30px 0 20px 0; text-shadow:0 0 25px rgba(0,0,0,.7);}
.KV .SloganBox .LinkButton{ font-size:20px; font-weight:bold; display:inline-block; background-color:#968a56; color:#fff; text-align:center; padding:20px 90px; border-radius:10px; animation:KvBtn 2s infinite alternate-reverse; transition:.2s;}
.KV .SloganBox .LinkButton:hover{ transform: scale(1.1); transition:.2s;}
@keyframes KvBtn{from{ box-shadow:0 0 100px rgba(255,220,40,1);}to{ box-shadow:0 0 0px rgba(255,220,40,0);} }

.KV .LeftArrow{ z-index: 1; position:absolute; top:50%; left:60px; width:30px; height:30px; background:url(../images/index/icon-arrow-left.png) no-repeat center; background-size:cover; cursor:pointer;}
.KV .RightArrow{ z-index: 1; position:absolute; top:50%; right:60px; width:30px; height:30px; background:url(../images/index/icon-arrow-right.png) no-repeat center; background-size:cover; cursor:pointer;}
.KV .ControlArea{ z-index: 1; text-align:center; position:absolute; left:0; right:0; bottom:110px; margin:auto;}
.KV .ControlArea .Item{ width:50px; height:8px; display:inline-block; border:1px solid #fff; border-radius:10px; margin:0 5px; cursor:pointer;}
.KV .ControlArea .Item.Focus{ background-color:#fff;}
.KV .ControlArea .Play{ color:#fff; border:1px solid #fff; padding:2px 6px; font-size:14px; display:inline-block; border-radius:3px; margin:0 5px; cursor:pointer;}
.KV .ControlArea .Play:hover{ background-color:#fff; color:#000;}

/*News*/
.NewsBox{ margin-top:-100px; padding-bottom:120px; position:relative; z-index:1;}
.NewsBox .ContentArea{ width:100%; max-width:1200px; margin:auto; text-align:center; display:flex; gap:40px;}
.NewsBox .ContentArea .item{ background-color:#fff; border-radius:50px; padding:20px 40px; display:block; flex:1; box-shadow:0 0 45px 10px rgba(0,0,0,.1); transition:.2s;}
.NewsBox .ContentArea .item .Tag{ width:90px; height:90px; line-height:90px; border-radius:50%; display:block; color:#fff; font-weight:bold; margin:auto; font-size:18px;}
.NewsBox .ContentArea .item .Tag.Style01{ background-color:#04706d;}
.NewsBox .ContentArea .item .Tag.Style02{ background-color:#0067ae;}
.NewsBox .ContentArea .item .Tag.Style03{ background-color:#968a56;} /*A:04706d B:045043 C:968a56 D:231815 E:eeece5 F:8c8c8c G:ded9cf H:e5e6d8 I:d2d6c8*/
.NewsBox .ContentArea .item .Title{ font-size:22px; font-weight:bold; text-align:center; color:#231815; padding:10px 0 30px 0;}
.NewsBox .ContentArea .item .Note{ color:#535353; font-size:18px; }
.NewsBox .ContentArea .item .Date{ font-size:18px; color:#968a56; font-weight:bold; text-decoration: underline;}
.NewsBox .ContentArea .item:hover{ box-shadow:0 30px 20px 0px rgba(0,0,0,.1);  transform: translateY(-10px); transition:.2s;}

/*Solutions*/
.SolutionsBox{ padding:30px 0px 30px 0px;}
.SolutionsBox .SubTitle{ color:#968a56; font-size:16px; font-weight:bold; text-align:center;}
.SolutionsBox .MainTitle{ color:#0067ae; font-size:60px; font-weight:bold; text-align:center;}
.SolutionsBox .SlideBtn{ display:flex; justify-content: center; gap:10px; max-width:1400px; width:100%; margin:0 auto; padding:0 30px;}
.SolutionsBox .SlideBtn .Btn{ font-size:0; cursor:pointer; width:60px; transition:.2s;}
.SolutionsBox .SlideArea{ overflow-y:auto; display:flex; gap:50px; padding:45px 0;}
.SolutionsBox .SlideArea .Item{ width:660px; display:flex; background-color:#f7f7f7; box-shadow:0 0 45px 10px rgba(0,0,0,.1);}
.SolutionsBox .SlideArea .Item .Photo{ width:330px; height:100%; min-height:380px; background:no-repeat center; background-size:100%; transition:.2s;}
.SolutionsBox .SlideArea .Item .Word{ width:330px; display:flex; flex-direction: column; justify-content: space-between; padding:50px;}
.SolutionsBox .SlideArea .Item .Word .Name{ font-size:26px; font-weight:bold; color:#231815;}
.SolutionsBox .SlideArea .Item .Word .Name img{ width:86px; display:block; padding-bottom:20px;}
.SolutionsBox .SlideArea .Item .Word .LinkNote{ font-size:20px; color:#444a58; text-decoration:underline;}
/*.SolutionsBox .SlideBtn .Btn:hover{ transform: scale(1.1); transition:.2s;}*/
.SolutionsBox .SlideArea .Item:hover .Photo{ background-size:120%; transition:.2s;}

.SolutionsBox .swiper{ padding-right:50px; }
.SolutionsBox .SlideArea.swiper-wrapper{ overflow:unset; gap:unset; }
.SolutionsBox .SlideArea.swiper-wrapper .Item{ display:inline-flex; margin:50px 25px; }
.SolutionsBox .SlideArea.swiper-wrapper .Item:last-child{ margin-right:unset; }

/*Products*/
.ProductsBox{ background-color:#eeece5; padding:30px;}
.ProductsBox .SubTitle{ color:#968a56; font-size:16px; font-weight:bold; text-align:center;}
.ProductsBox .MainTitle{ color:#04706d; font-size:60px; font-weight:bold; text-align:center;}
.ProductsBox .SlideBtn{ display:none;}
.ProductsBox .List .Item .Photo.ProductsBox .List .Item .Photo{ width:100%; max-width:1440px; margin:auto;}
.ProductsBox .List{ display:flex; width:100%; flex-wrap: wrap; gap:100px 24px; padding-top:50px;}
.ProductsBox .List .Item{ width:calc(25% - 18px); display:flex; flex-direction: column; background-color:#fff; box-shadow:0 0 45px 10px rgba(0,0,0,.1);}
.ProductsBox .List .Item .Photo{ padding-top:80%; background:no-repeat center; background-size:100%; transition:.2s;}
.ProductsBox .List .Item .Word{ display:flex; flex-direction: column; padding:15px; text-align:center;}
.ProductsBox .List .Item .Word .Name{ font-size:26px; font-weight:bold; color:#231815; padding-bottom:20px;}
.ProductsBox .List .Item .Word .LinkNote{ font-size:20px; color:#fff; text-decoration:underline;}
.ProductsBox .List .Item .Photo:hover{ background-size:130%; transition:.2s;}

.ProductsBox .ContentArea .swiper{ display:none; }

/*Investors*/
.InvestorsBox{ padding:50px 0;}
.InvestorsBox .SlideBtn{ display:flex; justify-content: flex-start; gap:10px; max-width:1400px; width:100%; margin:0 auto -40px auto; padding:0 60px; position:relative; z-index:2;}
.InvestorsBox .SlideBtn .Btn{ font-size:0; cursor:pointer; width:53px; transition:.2s;}
.InvestorsBox .SlideBtn .Btn:hover{ transform: scale(1.1); transition:.2s;}
.InvestorsBox .ContentArea{ display:flex;}
.InvestorsBox .Left{ width:50%; flex-shrink:0; text-align:right; padding:35px 0 50px 30px;}
.InvestorsBox .Left .InfoBox{ width:100%; max-width:600px; text-align:left; display:inline-block;}
.InvestorsBox .Left .InfoBox .SubTitle{ font-size:16px; color:#e09d15; font-weight:bold;}
.InvestorsBox .Left .InfoBox .MainTitle{ font-size:60px; color:#000; font-weight:bold; line-height:1.2;}
.InvestorsBox .Left .InfoBox .CompanyName{ font-size:30px; color:#000; font-weight:bold;}
.InvestorsBox .Left .InfoBox .StockNum{ font-size:50px; color:#e09d15; font-weight:bold; line-height:1.2; padding-top:10px;}
.InvestorsBox .Left .InfoBox .StockTitle{ font-size:30px; color:#535353; line-height:1.2;}
.InvestorsBox .Left .InfoBox .Directions{ font-size:18px; color:#000; font-weight:normal;}
.InvestorsBox .Left .InfoBox .Links{ padding-top:30px;}
.InvestorsBox .Left .InfoBox .Links .LinksTitle{ font-size:20px; font-weight:bold;}
.InvestorsBox .Left .InfoBox .Links .LinksTitle img{ margin-right:10px; width:30px; vertical-align:bottom; transition:all 0.3s;}
.InvestorsBox .Left .InfoBox .Links .LinksList{ padding:15px 0 0 30px;}
.InvestorsBox .Left .InfoBox .Links .LinksList .Item{ color:#404040; font-size:20px; padding:5px 30px; border:1px solid #e09d15; border-radius:50px; margin:0 10px 15px 0; display:inline-block; font-weight:bold;}
.InvestorsBox .Left .InfoBox .Links .LinksList .Item:hover{ background-color:#ffe5af;}
.InvestorsBox .Right{ width:50%; flex-shrink:0; padding-top:10px;}
.InvestorsBox .Right .SlideArea{ overflow-y:auto; display:flex; gap:50px; padding:50px;}
.InvestorsBox .Right .SlideArea .Item{ width:410px; display:flex; background-color:#fff; box-shadow:0 0 45px 10px rgba(0,0,0,.1); cursor:pointer;}
.InvestorsBox .Right .SlideArea .Item .Photo{ /*height:100%; min-height:230px;*/ padding-top:60%; background:no-repeat center; background-size:100%; transition:.2s;}
.InvestorsBox .Right .SlideArea .Item .Word{ display:flex; flex-direction: column; justify-content: space-between; padding:30px 20px;}
.InvestorsBox .Right .SlideArea .Item .Word .Name{ font-size:20px; font-weight:bold; padding-bottom:30px;}
.InvestorsBox .Right .SlideArea .Item .Word .LinkNote{ font-size:15px; color:#444a58; text-decoration:underline;}
.InvestorsBox .Right .SlideArea .Item:hover .Photo{ background-size:120%; transition:.2s;}
.InvestorsBox .Left .InfoBox .Links.Close .LinksTitle img{ transform:rotate(180deg);}
.InvestorsBox .Left .InfoBox .Links.Close .LinksList{ display:none;}

.InvestorsBox .Right .swiper{ padding-right: 50px; }
.InvestorsBox .Right .SlideArea.swiper-wrapper{ overflow:unset; gap:unset; }
.InvestorsBox .Right .SlideArea.swiper-wrapper .Item{ display:inline-flex; margin-right:40px; flex-direction: column; }

/*About*/
.AboutBox{ padding:30px; background-color:#8c8c8c;}
.AboutBox .ContentArea{ width:100%; max-width:1400px; margin:auto; display:flex; align-items: center; gap:0px;}
.AboutBox .Right{ flex:auto; padding:50px 0 50px 30px;}
.AboutBox .Right .InfoBox{ width:100%; text-align:left; display:inline-block;}
.AboutBox .Right .InfoBox .MainTitle{ font-size:54px; color:#fff; font-weight:bold; line-height:1.2;}
.AboutBox .Right .InfoBox .CompanyName{ font-size:24px; color:#231815; padding-top:5px;}
.AboutBox .Right .InfoBox .More{ padding-top:10px;}
.AboutBox .Right .InfoBox .More .Btn{ font-size:24px; font-weight:bold; display:inline-block; color:#eeece5; text-align:center; padding:10px 0; transition:.2s;}
.AboutBox .Right .InfoBox .More .Btn:hover{ padding-left:10px; transition:.2s;}
.AboutBox .Left{}
.AboutBox .BottomWord{ font-size:30px; font-weight:bold; padding:0 30px; text-align:center;}
.AboutBox .BottomWord a{ font-size:40px; font-weight:bold; color:#e09d15; text-decoration:underline;}

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

.ProductsBox .List .Item .Word .Name{ font-size:20px;}
}

@media screen and (max-width: 768px){
/*KV*/
.KV{ height:420px; background-attachment:local; background-position:center; background-size:cover;}
.KV .SloganBox .SubTitle{ font-size:15px;}
.KV .SloganBox .MainTitle{ font-size:30px;}
.KV .SloganBox .LinkButton{ font-size:15px; padding:10px 40px; border-radius:5px;}
.KV .ControlArea{ bottom:10px;}
.KV .LeftArrow{ left:10px; opacity:.5;}
.KV .RightArrow{ right:10px; opacity:.5;}

/*News*/
.NewsBox{ overflow-y:auto; margin:0; padding:20px 20px 30px 20px;}
.NewsBox .ContentArea{ gap:20px;}
.NewsBox .ContentArea .item{ width:250px; flex-shrink: 0; flex:none; padding:20px; box-shadow:0 0 20px 10px rgba(0,0,0,.1);}
.NewsBox .ContentArea .item .Title{ font-size:15px; padding:10px 0;}
.NewsBox .ContentArea .item .Note{ font-size:12px; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}

/*Solutions*/
.SolutionsBox{ padding:40px 0;}
.SolutionsBox .SubTitle{ font-size:12px;}
.SolutionsBox .MainTitle{ font-size:30px;}
.SolutionsBox .SlideBtn{ padding:0 20px; margin:-35px auto 0 auto; display:none;}
.SolutionsBox .SlideBtn .Btn{ width:30px;}
.SolutionsBox .SlideArea{ padding:45px 5%; gap:20px;}
.SolutionsBox .SlideArea .Item{ width:100%; flex-shrink: 0;}
.SolutionsBox .SlideArea .Item .Photo{ width:50%; flex-shrink:0; min-height:190px;}
.SolutionsBox .SlideArea .Item .Word{ width:50%; flex-shrink:0; padding:30px;}
.SolutionsBox .SlideArea .Item .Word .Name{ font-size:15px;}
.SolutionsBox .SlideArea .Item .Word .Name img{ width:40px;}
.SolutionsBox .SlideArea .Item .Word .LinkNote{ font-size:12px;}

.SolutionsBox .swiper{ padding-right:10%; }
.SolutionsBox .SlideArea.swiper-wrapper .Item{ display:inline-flex; margin:20px; }
.SolutionsBox .SlideArea.swiper-wrapper .Item:first-child{ margin-left:unset; }

/*Products*/
.ProductsBox{ padding:30px;}
.ProductsBox .SubTitle{ font-size:12px;}
.ProductsBox .MainTitle{ font-size:30px;}
.ProductsBox .SlideBtn{ display:flex; justify-content: flex-end; gap:10px; max-width:1400px; width:100%; margin:-35px auto 0 auto; display:none;}
.ProductsBox .SlideBtn .Btn{ font-size:0; cursor:pointer; width:30px;}
.ProductsBox .ContentArea{ overflow-y:auto; margin:0 -30px; width:calc(100% + 60px);}
.ProductsBox .List{ flex-wrap: nowrap; padding:50px 20px;}
.ProductsBox .List .Item{ width:calc(90% - 18px); flex-shrink:0;}
.ProductsBox .List .Item .Photo{ height:0; padding-top:100%; background-size:cover;}
.ProductsBox .List .Item .Word .Name{ font-size:15px;}
.ProductsBox .List .Item .Word .LinkNote{ font-size:12px;}

.ProductsBox .ContentArea>.List{ display:none; }
.ProductsBox .ContentArea .swiper{ display:block; padding-right:20px; }
.ProductsBox .ContentArea .swiper .List{ display:inline-flex; gap:unset; }
.ProductsBox .ContentArea .swiper .List .Item{ margin:auto 10px; }
.ProductsBox .ContentArea .swiper .List .Item:first-child{ margin-left:0; }

/*Investors*/
.InvestorsBox{ padding-bottom:0;}
.InvestorsBox .SlideBtn{ display:none;}
.InvestorsBox .ContentArea{ flex-direction: column;}
.InvestorsBox .Left{ width:100%; padding:0;}
.InvestorsBox .Left .InfoBox{ text-align:center; padding:0 20px;}
.InvestorsBox .Left .InfoBox .SubTitle{ font-size:12px;}
.InvestorsBox .Left .InfoBox .MainTitle{ font-size:30px;}
.InvestorsBox .Left .InfoBox .CompanyName{ font-size:15px;}
.InvestorsBox .Left .InfoBox .StockNum{ font-size:35px;}
.InvestorsBox .Left .InfoBox .StockTitle{ font-size:15px;}
.InvestorsBox .Left .InfoBox .Directions{ font-size:15px;}
.InvestorsBox .Left .InfoBox .Links{ text-align:left;}
.InvestorsBox .Left .InfoBox .Links .LinksTitle{ font-size:15px;}
.InvestorsBox .Left .InfoBox .Links .LinksTitle img{ width:22px;}
.InvestorsBox .Left .InfoBox .Links .LinksList .Item{ font-size:15px;}
.InvestorsBox .Right{ width:100%;}
.InvestorsBox .Right .SlideBtn{ display:none;}
.InvestorsBox .Right .SlideArea{}
.InvestorsBox .Right .SlideArea{ padding:45px 5%; gap:20px;}
.InvestorsBox .Right .SlideArea .Item{ width:90%; flex-shrink: 0;}
.InvestorsBox .Right .SlideArea .Item .Word .Name{ font-size:15px;}
.InvestorsBox .Right .SlideArea .Item .Word .Name img{ width:40px;}
.InvestorsBox .Right .SlideArea .Item .Word .LinkNote{ font-size:12px;}

.InvestorsBox .Right .swiper{ padding-right:30px; }
.InvestorsBox .Right .SlideArea.swiper-wrapper{ overflow:unset; gap:unset; }
.InvestorsBox .Right .SlideArea.swiper-wrapper .Item{ display:inline-flex; margin-right:20px; }

/*About*/
.AboutBox{ padding-top:50px;}
.AboutBox .ContentArea{ flex-direction: column;}
.AboutBox .Right{ flex:auto; padding:0 20px;}
.AboutBox .Right .InfoBox .MainTitle{ text-align:center; font-size:30px}
.AboutBox .Right .InfoBox .CompanyName{ font-size:12px;}
.AboutBox .Right .InfoBox .More{ text-align:center;}
.AboutBox .Right .InfoBox .More .Btn{ font-size:15px; padding:10px 40px; border-radius:5px;}
.AboutBox .Left{ flex:auto;}
.AboutBox .BottomWord{ font-size:15px; padding:20px 20px 0 20px;}
.AboutBox .BottomWord a{ font-size:20px; display:block;}
}