:root{scroll-behavior: initial;}
#main-banner { position:relative; margin-bottom:10rem; height:100vh; overflow:hidden; width:100%; } 
#main-banner > video,
#main-banner > img { object-fit:cover; width:100%; height:100%; } 
#main-banner > h1 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; font-size:var(--main-section-title-font); font-weight:700; color:#fff; white-space:nowrap; /*mix-blend-mode:difference; */ } 
#main-banner .mb_re { display: none; } 
/*#main-banner > h1 { font-size:var(--main-section-title-font); font-weight:600; color:#fff; white-space:nowrap; } */

.section-title { margin-bottom:35px; } 
.section-title h2 { font-size:var(--main-section-title-font); font-weight:800; } 
.section-title h2 span { background:var(--signature-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } 


#intro { width:calc(100vw - 23px); overflow:hidden; } 
#intro .sub-title, #business .sub-title { font-size:var(--normal-font); color:var(--normal-gray); } 
#intro .intro-slide { position:relative; } 
#intro .intro-slide li { overflow:hidden; padding-top:133px; transition:1.2s; } 
#intro .intro-slide li.on { padding-top:22px; position:relative; } 
#intro .intro-contents .img-box { width : 100%; max-width:755px; height:350px; overflow:hidden; border-radius:50px; position:relative; } 
#intro .intro-slide .img-box img { width:100%; } 
#intro .intro-slide .img-box .txt1 { color:#fff; font-size:var(--large-font); font-weight:700; z-index:1; position:absolute; bottom:30px; left:40px; font-family:'Russo One', sans-serif; font-size:45px; letter-spacing:0; line-height:1.1; transition:1.2s; } 
#intro .intro-slide .img-box .txt2 { color:#fff; font-size:var(--mega-font); font-weight:700; z-index:1; position:absolute; bottom:-18px; right:-3px; text-align:right; line-height:1.1; transform:translateX(100%); transition:1.2s; } 
#intro .intro-slide li.on .img-box .txt1 { transform:translateY(140%); } 
#intro .intro-slide li.on .img-box .txt2 { transform:translateX(0); } 
#intro .intro-slide .txt-box { position:relative; transform:translateY(-100%); padding:20px 50px 0; z-index:-1; transition:1.2s; } 
#intro .intro-slide li.on .txt-box { transform:translateY(0); } 
#intro .intro-slide li img { height : 100%; object-fit: cover; } 
#intro .intro-slide .txt-box strong { font-size:var(--large-font); color:var(--normal-black); } 
#intro .intro-slide .txt-box p { font-size:var(--normal-font); font-weight:300; } 
#intro .intro-slide .intro-slide-btn { position:absolute; top:-100px; right:-25px; display:flex; gap:15px; flex-wrap:wrap; justify-content:center; align-items:center; width:198px; height:195px; border-radius:50%; z-index:10; } 
#intro .intro-slide .intro-slide-btn i { color:#1045d4; } 
#intro .intro-slide .intro-slide-btn .prev { padding:30px 0px 30px 40px; } 
#intro .intro-slide .intro-slide-btn .next { padding:30px 40px 30px 0px; } 
#intro .intro-slide .intro-slide-btn::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../img/main/slidebtn_bg.png') no-repeat center/contain; z-index:-1; animation:rotate 10s linear infinite; } 
#intro .intro-slide { opacity: 0; transition: opacity 0.3s ease; } 

@keyframes rotate { 
 0% { transform:rotate(0); } 100% { transform:rotate(360deg); } 
 } 
#business { margin-bottom:150px; } 
#business .business-list { display:flex; align-items:center; gap:clamp(10px, 5vw, 24px); width:100%; } 
#business .business-list li { flex:1; transition:all 0.5s ease-out; overflow:hidden; height:516px; border-radius:20px; position:relative; } 
/* #business .business-list li:nth-of-type(2) { flex:0.75; } */
#business .business-list li:hover { flex:742px 0; } 
#business .business-list li::after { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size: var(--large-font); color:#ffff; font-weight:700; text-align: center; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); pointer-events: none; } 
#business .business-list li a::after { 
 content: ""; 
 position: absolute; 
 left: 50%; 
 top: 50%; 
 transform: translate(-50%, -50%); 
 font-size: var(--large-font); 
 color: #ffff; 
 font-weight: 700; 
 text-align: center; 
 text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); 
 white-space: pre; 
 pointer-events: none; 
 } 
#business .business-list li:nth-of-type(1)::after { content:"Business to \A Business"; white-space: pre; } 
#business .business-list li:nth-of-type(2)::after { content:"Business to \A Consumer"; white-space: pre; } 
#business .business-list li:nth-of-type(3)::after { content:"Own Brand"; } 
#export { position:relative; padding-bottom:200px; } 
#export .export-content { overflow:hidden; padding:10px 0px; } 
#export .export-content-list .content-bar { height: clamp(80px, 10vw, 120px); border-bottom-left-radius:200px; border-top-left-radius:200px; display:flex; flex-direction:column; justify-content:center; padding-left:80px; box-shadow:0px 0px 12px 0.5px rgba(0,39,181,0.2); margin-bottom:30px; background-color: #fff; } 
#export .export-content-list .content-bar:nth-of-type(1) { margin-left:15%; } 
#export .export-content-list .content-bar:nth-of-type(2) { margin-left:10%; } 
#export .export-content-list .content-bar:nth-of-type(3) { margin-left:5%; } 
#export .export-content-list .content-bar div { font-size:var(--medium-font); font-weight:700; } 
#export .export-content-list .content-bar p { color:#B6B6B6; font-size:var(--small-font); margin:0px; } 
#export .export-content-list .content-bar strong { color:var(--main-color); font-size:var(--xlarge-font); margin-right:15px; } 
#export .earth { right:0px; top:-20px; position:absolute; pointer-events:none; } 
#export .earth-area { position:absolute; width:47.5%; height:89%; right:0px; bottom:0px; } 
#export .point { display:block; position:relative; box-sizing:border-box; width:33px; height:33px; background:#fff; border-radius:50%; border:12px solid var(--sub-color); animation:pointAni 1s infinite alternate; } 
#export .point::after { display:block; content:""; width:50px; height:50px; background:var(--sub-color); border-radius:50%; opacity:0.3; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } 
#export .point.kazahstan { top:27%; left:26%; } 
#export .point.india { top:40%; left:23%; } 
#export .point.rusia { left:36%; top:9%; } 
#export .point.australia { left:54%; top:69%; } 
#export .point.vietnam { left: 34%; top: 36%; } 
#export .point.saudi { left: 10%; top: 21%; } 
/* #export::before { content: ""; height: clamp(100px, 20vw, 185px); display: block; width: 100%; position: absolute; bottom: -14%; left: 0px; z-index: 0; background: linear-gradient(0deg, rgb(255 255 255) 0%, rgba(34, 34, 34, 0) 100%); z-index: 1; } */
@keyframes pointAni { 
 0% { transform:scale(1); } 100% { transform:scale(0.8); } 
 } 
 /*#awards .awards-wrapper .cards .card:nth-child(1) { transform:scale(.9) translate3d(0,-80px,0); background-color:#f2f2f2; } 
#awards .awards-wrapper .cards .card:nth-child(2) { transform:scale(.935) translate3d(0,-60px,0); background-color:#f5f5f5; } 
#awards .awards-wrapper .cards .card:nth-child(3) { transform:scale(.95) translate3d(0,-40px,0); background-color:#f8f8f8; } 
#awards .awards-wrapper .cards .card:nth-child(4) { translate:none; rotate:none; scale:none; transform:translate(0px,0px); background-color:#f9f9f9; } */

/* #awards .sticky { position:sticky; top:0; width:100%; height:100vh; padding-top:120px; } 
#awards .awards-wrapper { position:relative; height:300vh; } 
#awards .award-container { display:flex; background : linear-gradient(90deg, rgba(0,214,246,1) 0%, rgba(0,132,249,1) 100%); width : 100%; border-radius : 40px; } 
#awards .award-container .award-content-wrap { width : 100%; padding : 30px; } 
#awards .awards-wrapper .cards { height:55vh; min-height:420px; max-height:640px; position:relative; flex-shrink: 0; width:68.8%; overflow:hidden; padding-right:20px; margin : 0px; max-width : 900px } 
#awards .awards-wrapper .cards .card { position:absolute; top:0; left:0; width:100%; height:100%; background-color:transparent; transform-origin:top; padding-right:20px; } 

#awards .card { display:flex; border : none; } 
#awards .card .card-container { width:100%; height:100%; position: relative; } 
#awards .card .card-container .card-title { position : absolute; left : 30px; top : 30px; font-size : 28px; font-weight: 700; transform: translateY(20px); opacity: 0; transition: 300ms; } 
#awards li.active .card-container .card-title { transform: translateY(0px); opacity: 1; } 
#awards .card .img-area { width:100%; height:100%; border-radius:40px; overflow:hidden; } 
#awards .card .img-area img { width:100%; height:100%; object-fit:cover; } 
#awards .card .award-content { width:31.2%; } 

#awards .award-contents li { transition: 300ms; } 
#awards .award-contents li:nth-of-type(1n + 2) { display: none; } 
#awards .aw-content-top .aw-date,
#awards .aw-content-top h3,
#awards .aw-content-top .aw-des { color : #fff; } 
#awards .aw-content-top .aw-date { font-size : 18px; margin-bottom : 40px; font-weight : 500; } 
#awards .aw-content-top h3 { font-size : 34px; margin-bottom : 20px; font-weight : 700; } 
#awards .aw-content-top .aw-des { font-size : 18px; width : 55%; font-weight : 300; } 

#awards .award-content-pagenate { color : #fff; } 
#awards .award-content-wrap { display: flex; flex-direction : column; justify-content : space-between; width :100%; } 
#awards .award-content-pagenate li { font-weight: 300; } 
#awards .award-content-pagenate li.active { font-weight: 700; } */
#awards { position: relative; display: flex; justify-content: center; margin-block: 10rem 0; } 
#awards .awards_wrapper { position: relative; width: 100%; } 
#awards .awards_header { position: absolute; top: 10%; /*left: 9%; color: #1F2D50; */ z-index: 3; } 
#awards .swiper { width: 100%; height: 100vh; position: relative; overflow: hidden; background-size: cover; background-position: center; background-image: url('/theme/annecy/img/main/main-awards.jpg'); } 
#awards .swiper-slide { position: relative; width: 100%; height: 100%; background: none; z-index: 1; } 
#awards .wrapper-inner { width: 100%; display: flex; position: absolute; top: 29%; justify-content: center; align-items: center; } 
#awards .awards_item { background: white; padding: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); z-index: 2; cursor: unset; } 
#awards .awards_item img { max-width: 280px; height: 396px; width: auto; object-fit: contain; display: block; margin: 0 auto; } 
#awards .award_text { 
 width: 100%; 
 max-width: 500px; 
 text-align: center; 
 padding: 1rem; 
 box-sizing: border-box; 
 } 
/* #awards .award_text { font-size: 1.2rem; color: #1F2D50; z-index: 2; } 
#awards .swiper-pagination { position: absolute; bottom: 20px; text-align: center; width: 100%; z-index: 3; } 
#awards .swiper-button-next, .swiper-button-prev { color: #1F2D50; position: absolute; z-index: 4; } 
#awards .swiper-button-prev { top: 62%; left: 20%; } 
#awards .swiper-button-next { top: 62%; right: 20%; } */
#awards .award_page { font-size: var(--small-font); font-weight: 600; padding-bottom: 2rem; } 
#awards .award_title.sigClr { font-size: var(--xlarge-font); } 
#awards .award_subtitle { font-size: var(--large-font); font-weight: 500; } 
/* #awards .swiper-slide:first-of-type .awards_item { background: unset; box-shadow: unset; } */





/*info-right*/
#informations { background:url('../img/main/info_bg.png') no-repeat center/cover; padding: clamp(40px, 10vw, 120px) 0px; position:relative; } 
#informations::before { content:""; height: clamp(100px, 20vw, 185px); display:block; width:100%; position:absolute; bottom:-1px; left:0px; z-index: 0; background:linear-gradient(0deg,rgba(34,34,34,1) 0%,rgba(34,34,34,0) 100%); } 
#informations .infomation-title { margin-bottom: clamp(16px, 4vw, 40px); } 
#informations .info-wrap { display:flex; gap:30px; } 
#informations .info-wrap .info-left { width:calc(40% - 15px); } 
#informations .info-wrap .info-left .int { width:100%; height:310px; margin-bottom:30px; background:url('../img/main/info_intro_bg.png') no-repeat center/cover; } 
#informations .info-wrap .info-left .main-title { margin-block: 25px 4px; font-size:var(--large-font); color:#fff; font-weight:700; } 
#informations .info-wrap .info-left .location { width:100%; height:210px; backdrop-filter:blur(6px); background:rgba(21,146,255,0.5); } 
#informations .info-wrap .info-left .loca-container { display:flex; justify-content:space-between; } 
#informations .info-wrap .info-left .loca-lf .des { font-size:var(--normal-font); color:#fff; font-weight:500; } 
#informations .loca-rt { margin-top: 20px; } 
#informations .loca-rt img { width: 79px;; } 
/*info-right*/
#informations .info-wrap .info-right { width:calc(60% - 15px); } 
#informations .info-wrap .info-right .info-r-top { margin-bottom:30px; display:flex; gap:30px; } 
/*clock*/
#informations .info-wrap .info-right .info-r-top .clock { display: flex; flex-direction: column; justify-content: space-between; width:calc(70% - 15px); height:220px; background:rgba(27,79,124,0.5); } 
#informations .sub-title { margin-bottom: 0; font-size:var(--medium-font); color:#fff; font-weight:700; } 
#clocks-container { display:flex; justify-content:space-evenly; margin-bottom: 0; } 
#clocks-container .info-clock { width:82px; height:82px; border-radius:50%; position:relative; background:rgba(0,39,181,0.2); backdrop-filter:blur(8px); margin-bottom:10px; } 
#clocks-container .info-clock::before { content:""; width:5px; height:5px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border-radius:50%; } 
#clocks-container .info-clock .hour-hand, .minute-hand { position:absolute; width:5px; border-radius:50px; height:39%; background-color:#fff; top:50%; left:50%; transform-origin:bottom center; transform:translate(-50%,-100%) rotate(0deg); transition:transform 1s ease-in-out; } 
#clocks-container .info-clock .hour-hand { height:29%; } 
#clocks-container .t-name { font-size:var(--small-font); color:#fff; width:65px; padding:2px 0px; text-align:center; border-radius:50px; color:#fff; border:1px solid #fff; font-weight:500; margin:0 auto; } 
#informations .info-wrap .info-right .info-r-top .logo { width:calc(30% - 15px); height:220px; background-color:#fff; display:flex; align-items:center; justify-content:center; } 
#informations .info-wrap .info-right .info-r-btm .news { width:100%; height:300px; backdrop-filter:blur(8px); background:rgba(0,0,0,0.15); } 
#informations .widget { border-radius:25px; box-shadow:0px 3px 8px 1px rgba(0,0,0,0.15); overflow:hidden; padding:25px; } 
/*contact*/
#informations .contact-wrap { position: relative; z-index: 1; display:flex; gap:70px; align-items:center; margin-top:50px; } 
#informations .contact-wrap .title h3 { font-weight:700; font-size:var(--huge-title-font); color:#fff; } 
#informations .contact-wrap .contact-content { width:100%; display:flex; align-items:center; justify-content:space-between; gap: 20px; } 
#informations .contact-wrap .contact-content .link { padding:15px 25px; border-radius:50px; color:#222222; font-size:var(--normal-font); white-space: nowrap; background:#fff; font-weight:700; display:block; } 
#informations .contact-wrap .contact-content .txt { font-size:var(--normal-font); font-weight:500; color:#fff; } 
#informations .infomation-title h2 { font-size: var(--xlarge-font); color: #fff; font-weight: 700; } 
#informations .tit { display: flex; justify-content: space-between; align-items: center; } 
#informations a.golink { position: relative; width: 35px; height: 35px; background-color: rgba(96, 96, 96, 0.5); border-radius: 50%; } 
#informations a.golink svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
#informations .widget:hover .golink { background-color: var(--accent-color); } 
footer.footer-container { margin-top:0px; } 

@media (max-width: 1356px) { 
 #informations .info-wrap .info-left .main-title { font-size: var(--sub-title-font); } 
 #informations .info-wrap .info-left .loca-lf .des { font-size: var(--small-font); } 
 #informations .contact-wrap .title h3 { font-size: var(--main-section-title-font); } 
 #informations .contact-wrap .contact-content .txt { font-size: var(--small-font); } 
 #clocks-container .info-clock { width: 7vw; height: 7vw; } 
 #informations .contact-wrap { gap: 5vw; } 
 #export .earth { top: 2%; z-index: -1; } 
 #export .earth img { width: auto; } 
 #export .export-content { width: 100%; } 
 #export .earth::before { bottom: 15%; } 
 #export .earth-area { display: none; } 
 #export .export-content-list .content-bar:nth-of-type(1) { margin-left: 20%; } 
 #export .export-content-list .content-bar:nth-of-type(2) { margin-left: 14%; } 
 #export .export-content-list .content-bar:nth-of-type(3) { margin-left: 8%; } 
 #awards .swiper-button-next, .swiper-button-prev { display: none; } 
 #intro .intro-slide .img-box { aspect-ratio: 19/12.5; height : auto; border-radius: 2.5vw; } 
 } 

@media screen and (max-width:1024px) { 
 #main-banner { margin-bottom: 5rem; } 
 #business { margin-bottom: 7rem; } 
 #informations .info-wrap { flex-direction: column; } 
 #informations .info-wrap .info-left, #informations .info-wrap .info-right { width: 100%; } 
 #informations .info-wrap .info-left .int, #informations .info-wrap .info-left .location { height: auto; } 
 #informations .sub-title { font-size: var(--normal-font); margin-bottom: 10px; } 
 #informations .info-wrap .info-left .int, #informations .info-wrap .info-right .info-r-top { margin-bottom: 16px; } 
 #informations .loca-rt { display: none; } 
 #informations .info-wrap, #informations .info-wrap, #informations .info-wrap .info-right .info-r-top { row-gap: 16px; } 
 #informations .info-wrap .info-right .info-r-btm .news { height: auto; } 
 #informations .info-wrap .info-right .info-r-top .clock, #informations .info-wrap .info-right .info-r-top .logo { height: 200px; } 
 #informations .info-wrap .info-left .main-title { margin-block: 0; } 
 #informations .contact-wrap .title h3 { display: none; } 
 #informations .contact-wrap { gap: 0; } 
 #informations .info-wrap .info-right .info-r-top { gap: 16px; } 
 #business .business-list li { height: 342px; } 
 #export .export-content-list .content-bar { height: clamp(80px, 10vw, 120px); } 
  #awards .wrapper-inner { padding: 1rem 2rem; top: 26%;} 
 } 

@media screen and (max-width:768px) { 
 .section-title h2 { font-size: var(--xlarge-font); } 
 #intro .sub-title, #business .sub-title { font-size: var(--small-font); } 
 #intro .intro-contents .img-box { width : 100%; max-width:100%; border-radius : 20px; aspect-ratio : 16/10; height : auto; } 
 #intro .intro-slide .txt-box { padding: 20px 8px 0; } 
 #intro .intro-slide .img-box .txt2 { padding: 20px 8px 0; font-size : var(--main-title-font); bottom: -10px; right: 0px; } 
 #intro .intro-slide .img-box .txt1 { font-size : var(--main-title-font); } 
 #intro { width : 100%; } 
 #business .business-list li:hover { flex: 1; } 
 #business .business-list { flex-direction: column; align-items: unset; } 
 #business .business-list img { height: 300px; width: 100%; object-fit: cover; } 
 #export .earth { top : 2%; } 
 #export .export-content-list .content-bar { padding-left: 48px; } 
 #export .export-content-list .content-bar strong { font-size: var(--semi-large-font); } 
 #export .export-content-list .content-bar p { font-size: var(--micro-font); } 
 #informations .contact-wrap .title h3 { display: none; } 
 #informations .info-wrap { flex-direction:column; } 
 #informations .info-wrap .info-right, #informations .info-wrap .info-left { width:100%; } 
 #clocks-container .info-clock { width: 10vw; height: 10vw; } 
 #informations .info-wrap .info-right .info-r-top .logo img { max-width: 110px; width: 100%; } 
 #clocks-container { justify-content: space-between; } 
 #informations .info-wrap .info-right .info-r-top .clock, #informations .info-wrap .info-right .info-r-top .logo { height: auto; } 
 #informations { margin-top: 5rem; } 
 #clocks-container li { display: flex; flex-direction: column; align-items: center; } 
 #awards .awards_header { top: 17%; } 
 #awards .award_title.sigClr { font-size: var(--large-font); } 
 #awards .award_subtitle { font-size: var(--normal-font); display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;white-space: normal;} 
#awards .award_info, #awards .award_page { font-size: var(--micro-font); } 
#awards .award_page { padding-bottom: 1rem; } 
#awards .award_info {     display: none;} 
 #awards .awards_item img { 
 max-width: 100%; 
} 

 #awards .awards_item { 
 width: 100%; 
 max-width: 320px; 
 margin: 0 auto; 
 } 
#awards .wrapper-inner {flex-direction: column;}

#awards { margin-block: 0; } 
#export { padding-bottom: 3rem; } 
#export::before { content: ""; height: clamp(100px, 20vw, 185px); display: block; width: 100%; position: absolute; bottom: -8%; left: 0px; z-index: 0; background: linear-gradient(0deg, rgb(255 255 255) 0%, rgba(34, 34, 34, 0) 100%); z-index: 1; } 
 } 



 @media (max-width: 572px) { 
 #main-banner .mb_re { display: block; } 
 #main-banner > h1 { line-height: 1.5; } 
 } 

@media (max-width: 480px) { 
 #main-banner > h1 { font-size : var(--xlarge-font); opacity: 1; transition: all 1.2s 0.2s; } 
 #export { padding-bottom: 0; } 
 #informations .info-wrap .info-right .info-r-top .logo { display: none; } 
 #informations .info-wrap .info-right .info-r-top .clock { width: 100%; } 
 #informations .contact-wrap .contact-content { width: 100%; flex-direction: column } 
 #informations .contact-wrap .contact-content .link { width: 100%; text-align: center; padding: 7px; } 
 #informations a.golink svg { width: 16px; } 
 #intro .intro-slide .intro-slide-btn { width: 139px; } 
 #clocks-container { flex-wrap: wrap; row-gap:10px; } 
 #clocks-container .info-clock { width: 16vw; height: 16vw; } 
 #clocks-container li { width: 50%; box-sizing: border-box; } 
 #export .export-content-list .content-bar strong { margin-right: 0; } 
 #export .export-content-list .content-bar { padding-left: 36px; }  
 #business .business-list li::after { font-size: var(--medium-font); } 
 }