/* Page-specific layout adapted from the KOI Thé reference. */ .aboutWrap .about-animation{position:relative;z-index:5;-ms-touch-action:pan-y;touch-action:pan-y} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-animation{background-color:#fff} } .aboutWrap .about-animation .text-area-outter{position:relative;width:100vw;height:100vh;overflow:hidden} .aboutWrap .about-animation .text-area{position:relative;z-index:5;width:100%;height:100vh;-webkit-transform:scale(10);-ms-transform:scale(10);transform:scale(10);background-color:#fff} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-animation .text-area{padding:0 83px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-animation .text-area{padding:0 50px} } .aboutWrap .about-animation .text-area div{margin:0 12px} @media print, screen and (max-width: 39.99875em){.aboutWrap .about-animation .text-area div{margin:0 3px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-animation .text-area div.letter-k{margin:0 1px} } @media print, screen and (max-width: 99.99875em){.aboutWrap .about-animation .text-area div img{height:140px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-animation .text-area div img{height:120px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-animation .text-area div img{height:43px} } .aboutWrap .about-animation .text-area .space{width:120px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-animation .text-area .space{width:40px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-animation .text-area .space{width:30px} } .aboutWrap .about-animation .scroll{position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);bottom:45px;cursor:pointer;z-index:5;opacity:0;pointer-events:none;-webkit-transition:0.75s all;transition:0.75s all} .aboutWrap .about-animation .scroll.is-show{opacity:1;pointer-events:all} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-animation .scroll{bottom:20px} } .aboutWrap .about-animation .scroll .d{fill:#0d131a;stroke:#0d131a;stroke-width:2.5px;-webkit-transition:0.5s all;transition:0.5s all} .aboutWrap .about-animation .scroll .arrow{-webkit-animation:arrow-down 1.8s infinite ease-in-out;animation:arrow-down 1.8s infinite ease-in-out} .aboutWrap .about-animation .scroll:hover .d{fill:#ea5504} .aboutWrap .about-animation .number-area{height:2000px;position:relative;z-index:5;background-color:#fff} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-animation .number-area{height:3000px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-animation .number-area{height:2500px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-animation .number-area{padding:0px 20px;height:200vh} } .aboutWrap .about-animation .number-area .inner-sticky{position:sticky;top:0;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column} @media screen and (min-width: 75em) and (max-width: 99.99875em){.aboutWrap .about-animation .number-area .inner-sticky{height:125vh;zoom:0.8} } @media print, screen and (min-width: 64.0625em) and (max-width: 74.99875em){.aboutWrap .about-animation .number-area .inner-sticky{height:100vh;zoom:0.8} } .aboutWrap .about-animation .number-area div{margin:30px 0} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-animation .number-area div{width:90vw;margin:0 auto;padding:15px 0} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-animation .number-area div{width:initial;padding:13px 0} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-animation .number-area div img{width:100%} } @media print, screen and (min-width: 40em) and (max-width: 64.06125em){.aboutWrap .about-animation .number-area div.hollow{width:calc(90vw - 5px);margin:0 auto} } .aboutWrap .about-animation .drink-area{position:relative;height:3000px;background-color:#faeede;margin-bottom:-100vh} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-animation .drink-area{height:300vh;padding:0;margin-bottom:0vh} } .aboutWrap .about-animation .drink-area .inner-sticky{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:4;padding:0 120px;pointer-events:none} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-animation .drink-area .inner-sticky{padding:0px 80px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-animation .drink-area .inner-sticky{padding:0px 40px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-animation .drink-area .inner-sticky{padding:0px 80px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-animation .drink-area .inner-sticky{padding:0} } .aboutWrap .about-animation .drink-area .inner-sticky li:nth-child(odd){-webkit-transform:translateY(150vh);-ms-transform:translateY(150vh);transform:translateY(150vh)} @media print, screen and (max-width: 39.99875em){.aboutWrap .about-animation .drink-area .inner-sticky li:nth-child(odd){-webkit-transform:translateY(85vh);-ms-transform:translateY(85vh);transform:translateY(85vh)} } .aboutWrap .about-animation .drink-area .inner-sticky li:nth-child(even){-webkit-transform:translateY(-150vh);-ms-transform:translateY(-150vh);transform:translateY(-150vh)} @media print, screen and (max-width: 39.99875em){.aboutWrap .about-animation .drink-area .inner-sticky li:nth-child(even){-webkit-transform:translateY(-70vh);-ms-transform:translateY(-70vh);transform:translateY(-70vh)} } @media print, screen and (max-width: 99.99875em){.aboutWrap .about-animation .drink-area .inner-sticky li img{width:150px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-animation .drink-area .inner-sticky li img{width:140px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-animation .drink-area .inner-sticky li img{width:80px} } .aboutWrap .about-animation .drink-area .bg-change{position:absolute;width:100%;height:100%;background-color:#99d3c1;z-index:1;left:0;top:0;opacity:0} .aboutWrap .about-info-preview{position:relative;height:300vh;background-color:#99d3c1;z-index:3;margin-bottom:-100vh} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-info-preview{height:200vh;margin-bottom:0} } .aboutWrap .about-info-preview.is-not-show{opacity:0 !important} .aboutWrap .about-info-preview .about-infoWrap{height:100vh;position:sticky;top:0;opacity:0} .aboutWrap .about-info-preview li{height:100vh} .aboutWrap .infoWrap{width:100vw;overflow:hidden} .aboutWrap .about-infoWrap{position:relative;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-ms-touch-action:pan-y;touch-action:pan-y} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-infoWrap{display:block;width:initial;z-index:2} } .aboutWrap .about-infoWrap li{min-width:100vw;height:100vh;min-height:100vh;padding:100px 168px} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-infoWrap li{padding:80px 100px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-infoWrap li{padding:50px 80px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-infoWrap li{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:auto;height:100vh;padding:120px 60px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-infoWrap li{height:667px;padding:95px 20px} } .aboutWrap .about-infoWrap li .pic-area{width:707px;aspect-ratio:1/1} @media print, screen and (min-width: 40em) and (max-width: 64.06125em){.aboutWrap .about-infoWrap li .pic-area{width:550px;margin:0 auto} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-infoWrap li .pic-area{margin-bottom:150px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-infoWrap li .pic-area{width:300px;margin-bottom:27px} } .aboutWrap .about-infoWrap li .article-area{margin-right:215px} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-infoWrap li .article-area{margin-right:150px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-infoWrap li .article-area{margin-right:100px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-infoWrap li .article-area{margin:0} } .aboutWrap .about-infoWrap li .article-area .title{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:60px} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-infoWrap li .article-area .title{margin-bottom:40px} } .aboutWrap .about-infoWrap li .article-area .title .ch{font-family:"Noto Sans SC",sans-serif;font-size:18px;letter-spacing:20px;color:#fff} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-infoWrap li .article-area .title .ch{font-size:16px} } .aboutWrap .about-infoWrap li .article-area .title .en{font-family:"Red Hat Display",sans-serif;font-size:45px;font-weight:900;letter-spacing:2px;color:#fff;text-align:center;line-height:1.2} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-infoWrap li .article-area .title .en{font-size:30px} } .aboutWrap .about-infoWrap li .article-area .title .deco.top{margin-bottom:55px} .aboutWrap .about-infoWrap li .article-area .title .deco.bottom{margin-top:58px} .aboutWrap .about-infoWrap li .article-area .content{max-width:590px;font-family:"Red Hat Display",sans-serif;font-size:16px;letter-spacing:1px;line-height:1.8;color:#fff;text-align:justify;font-weight:500} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-infoWrap li .article-area .content{font-size:15px;line-height:1.6} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-infoWrap li .article-area .content{max-width:500px;margin:0 auto;font-size:14px;letter-spacing:1px;line-height:1.7} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-infoWrap li .article-area .content{max-width:100%;font-size:12px;letter-spacing:0.5px;line-height:1.5} } .aboutWrap .about-infoWrap li.green{background-color:#009265;position:relative} .aboutWrap .about-infoWrap li.green .article-area{position:sticky;left:0} .aboutWrap .about-infoWrap li.blue{background-color:#54c0e8} .aboutWrap .about-infoWrap li.yellow{background-color:#f6ac2d} .aboutWrap .about-infoWrap li.orange{background-color:#ea5504} .aboutWrap .about-infoWrap .slick-dots{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;bottom:30px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%} @media print, screen and (min-width: 40em) and (max-width: 64.06125em){.aboutWrap .about-infoWrap .slick-dots{bottom:60px} } .aboutWrap .about-infoWrap .slick-dots li{position:relative;width:12px;height:12px;border-radius:50%;min-width:auto;min-height:auto;padding:0;margin-right:25px;background-color:#faeede} .aboutWrap .about-infoWrap .slick-dots li:last-child{margin-right:0} .aboutWrap .about-infoWrap .slick-dots li:after{position:absolute;content:"";width:6px;height:6px;left:3px;top:3px;background-color:#000;border-radius:50%;opacity:0;-webkit-transition:0.3s all;transition:0.3s all} .aboutWrap .about-infoWrap .slick-dots li.slick-active:after{opacity:1} .aboutWrap .about-ingredient{position:relative;z-index:2;height:100vh;-ms-touch-action:pan-y;touch-action:pan-y} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient{display:block;height:1200px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-ingredient{height:667px} } .aboutWrap .about-ingredient .pic-area{position:relative;-webkit-box-flex:1.25;-ms-flex:1.25 1 0px;flex:1.25 1 0;height:100%;background-color:#fff} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .pic-area{width:100%;height:700px;-webkit-box-flex:initial;-ms-flex:initial;flex:initial} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-ingredient .pic-area{width:100%;height:375px} } .aboutWrap .about-ingredient .pic-area li{height:100vh} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .pic-area li{width:100%;height:700px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-ingredient .pic-area li{width:100%;height:375px} } .aboutWrap .about-ingredient .pic-area li img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover} .aboutWrap .about-ingredient .pic-area .triangle{width:480px;height:450px;position:relative;margin:0 auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:1} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-ingredient .pic-area .triangle{width:400px;height:380px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .pic-area .triangle{position:absolute;left:calc(50% - 200px);width:400px;height:380px;top:calc(50% - 190px);-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-ingredient .pic-area .triangle{left:calc(50% - 147.5px);width:295px;height:250px;top:45px;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)} } .aboutWrap .about-ingredient .pic-area .triangle div{position:absolute;opacity:0.5;border-radius:50%;width:260px;height:260px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:32px;font-weight:800;letter-spacing:0px;background-color:#faeede;color:#999999;font-family:"Red Hat Display",sans-serif;cursor:pointer;-webkit-transition:0.5s all;transition:0.5s all} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .pic-area .triangle div{letter-spacing:0.5px} } .aboutWrap .about-ingredient .pic-area .triangle div:after{position:absolute;content:"";width:500px;height:500px;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background:radial-gradient(ellipse at center, #faeede 0%, rgba(250,238,222,0) 70%);z-index:-1;border-radius:50%;-webkit-transition:0.5s all;transition:0.5s all;opacity:0;pointer-events:none} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .pic-area .triangle div:after{width:250px;height:250px} } @media print, screen and (max-width: 99.99875em){.aboutWrap .about-ingredient .pic-area .triangle div{width:220px;height:220px;font-size:20px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-ingredient .pic-area .triangle div{width:152px;height:152px;font-size:16px} } .aboutWrap .about-ingredient .pic-area .triangle div:hover{opacity:1} .aboutWrap .about-ingredient .pic-area .triangle div:hover:after{opacity:1} .aboutWrap .about-ingredient .pic-area .triangle div.is-show{opacity:1} .aboutWrap .about-ingredient .pic-area .triangle div.is-show:after{opacity:1} .aboutWrap .about-ingredient .pic-area .triangle .one{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)} .aboutWrap .about-ingredient .pic-area .triangle .two{left:0;bottom:0} .aboutWrap .about-ingredient .pic-area .triangle .three{right:0;bottom:0} .aboutWrap .about-ingredient .pic-area .bg{position:absolute;left:0;top:0;z-index:0;width:100%;height:100%} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .pic-area .bg{position:relative} } .aboutWrap .about-ingredient .article-area{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;padding:88px 75px 95px 85px;background-color:#fff} @media print, screen and (max-width: 74.99875em){.aboutWrap .about-ingredient .article-area{padding:80px 50px 85px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .article-area{padding:60px 80px 30px;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;height:300px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-ingredient .article-area{padding:25px 20px 30px} } .aboutWrap .about-ingredient .article-area .title{margin-bottom:135px} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-ingredient .article-area .title{margin-bottom:50px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .article-area .title{margin-bottom:30px} } .aboutWrap .about-ingredient .article-area .title .en{font-family:"Red Hat Display",sans-serif;font-size:50px;font-weight:900;letter-spacing:1px;margin-bottom:40px;line-height:1.4} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-ingredient .article-area .title .en{font-size:36px;margin-bottom:25px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .article-area .title .en{font-size:24px;margin-bottom:7px;line-height:1.3;letter-spacing:0px} } .aboutWrap .about-ingredient .article-area .title .en .orange{color:#ff4d00} .aboutWrap .about-ingredient .article-area .title .ch{font-family:"Red Hat Display",sans-serif;font-size:25px;letter-spacing:0px;color:#000;font-weight:900;margin-bottom:18px;line-height:1.2} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-ingredient .article-area .title .ch{font-size:22px;margin-bottom:10px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-ingredient .article-area .title .ch{font-size:14px;margin-bottom:0px} } .aboutWrap .about-ingredient .article-area .slick-article{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between} .aboutWrap .about-ingredient .article-area .slick-article .slick-list{max-width:520px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .article-area .slick-article .slick-list{max-width:100%} } .aboutWrap .about-ingredient .article-area .slick-article li.slick-slide{position:relative;height:150px;margin-bottom:10px;opacity:0.2;-webkit-transition:0.5s all;transition:0.5s all;cursor:pointer} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-ingredient .article-area .slick-article li.slick-slide{height:130px;margin-bottom:20px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .article-area .slick-article li.slick-slide{height:auto;padding-bottom:18px;margin-bottom:10px} } .aboutWrap .about-ingredient .article-area .slick-article li.slick-slide:hover{opacity:1} .aboutWrap .about-ingredient .article-area .slick-article li.slick-slide:hover:after{width:100%} .aboutWrap .about-ingredient .article-area .slick-article li.slick-slide:after{position:absolute;content:"";width:0%;height:3px;background-color:#000000;-webkit-transition:0.5s all;transition:0.5s all;left:0;bottom:0px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .article-area .slick-article li.slick-slide:after{height:1px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .article-area .slick-article li.slick-slide .title-area{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:3px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline} } .aboutWrap .about-ingredient .article-area .slick-article li.slick-slide .en{font-family:"Red Hat Display",sans-serif;font-size:32px;font-weight:900;letter-spacing:1px;margin-bottom:13px;line-height:1.4} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-ingredient .article-area .slick-article li.slick-slide .en{font-size:28px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .article-area .slick-article li.slick-slide .en{font-size:27px;margin-bottom:0;margin-right:6px} } .aboutWrap .about-ingredient .article-area .slick-article li.slick-slide .content{font-family:"Red Hat Display",sans-serif;font-size:15px;letter-spacing:0.5px;line-height:1.3;color:#999999;text-align:justify} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-ingredient .article-area .slick-article li.slick-slide .content{font-size:14px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .article-area .slick-article li.slick-slide .content{font-size:13px;line-height:1.3;letter-spacing:0px} } .aboutWrap .about-ingredient .article-area .slick-article li.slick-slide.slick-current{opacity:1} .aboutWrap .about-ingredient .article-area .slick-article li.slick-slide.slick-current:after{width:100%} .aboutWrap .about-ingredient .article-area .slick-dots{position:relative;z-index:6} @media print, screen and (max-width: 74.99875em){.aboutWrap .about-ingredient .article-area .slick-dots{margin-left:25px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-ingredient .article-area .slick-dots{display:none !important;margin-left:0} } .aboutWrap .about-ingredient .article-area .slick-dots li{position:relative;height:auto;border-bottom:none;padding:0;margin-bottom:0;font-size:0;width:12px;height:12px;background-color:#000;border-radius:50%;margin-bottom:20px;cursor:pointer} .aboutWrap .about-ingredient .article-area .slick-dots li::after{content:"";border-radius:50%;position:absolute;width:5px;height:5px;background-color:#faeede;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);opacity:0;-webkit-transition:0.5s all;transition:0.5s all} .aboutWrap .about-ingredient .article-area .slick-dots li.slick-active::after{opacity:1} .aboutWrap .about-event{position:relative;width:100%;height:100vh;background-color:#000000;padding:155px 200px 0 0px;overflow:hidden;z-index:2;-ms-touch-action:pan-y;touch-action:pan-y} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-event{padding:120px 100px 0 0px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-event{padding:60px 80px 0 0px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event{height:100vh;padding:200px 20vw 30px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-event{height:667px;padding:100px 15px 30px} } .aboutWrap .about-event::before{position:absolute;content:"";width:50%;height:470px;background:-webkit-gradient(linear, left top, left bottom, color-stop(15%, #000), color-stop(95%, rgba(0,0,0,0)));background:linear-gradient(180deg, #000 15%, rgba(0,0,0,0) 95%);top:0;left:0;z-index:2} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event::before{background:-webkit-gradient(linear, left top, left bottom, color-stop(15%, #000), color-stop(95%, rgba(0,0,0,0)));background:linear-gradient(180deg, #000 15%, rgba(0,0,0,0) 95%);width:100%;height:200px} } .aboutWrap .about-event::after{position:absolute;content:"";width:300px;height:100%;background:-webkit-gradient(linear, left top, right top, color-stop(15%, #000), color-stop(95%, rgba(0,0,0,0)));background:linear-gradient(90deg, #000 15%, rgba(0,0,0,0) 95%);top:0;left:0;z-index:2} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event::after{width:100px;height:50%;background:-webkit-gradient(linear, right top, left top, color-stop(15%, #000), color-stop(95%, rgba(0,0,0,0)));background:linear-gradient(270deg, #000 15%, rgba(0,0,0,0) 95%);left:auto;right:0} } .aboutWrap .about-event .pic-area{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;width:100%;-webkit-transform:rotate(35deg);-ms-transform:rotate(35deg);transform:rotate(35deg);margin-left:-98px;margin-top:236px;margin-right:-283px} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-event .pic-area{margin-left:-214px;margin-top:154px;margin-right:-300px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-event .pic-area{margin-left:-247px;margin-top:230px;margin-right:-389px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event .pic-area{width:670px;margin-left:-200px;margin-right:-90px;margin-top:0;-webkit-transform:rotate(-15deg);-ms-transform:rotate(-15deg);transform:rotate(-15deg)} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-event .pic-area{width:670px} } .aboutWrap .about-event .pic-area li{position:relative;width:25%;height:389px;z-index:1;margin-left:-225px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event .pic-area li{width:350px;height:350px;margin-left:0;margin-right:-300px;-webkit-filter:brightness(20%);filter:brightness(20%)} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-event .pic-area li{width:248px;height:248px;margin-left:0;margin-right:-200px} } .aboutWrap .about-event .pic-area li.is-show img{opacity:1} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event .pic-area li.is-selected{-webkit-filter:brightness(100%);filter:brightness(100%)} } .aboutWrap .about-event .pic-area li.is-selected::after{opacity:0} .aboutWrap .about-event .pic-area li.is-selected img{-webkit-filter:grayscale(0);filter:grayscale(0)} .aboutWrap .about-event .pic-area li img{-webkit-transition:0.5s all;transition:0.5s all;-webkit-filter:grayscale(1);filter:grayscale(1);-webkit-transform:rotate(-35deg);-ms-transform:rotate(-35deg);transform:rotate(-35deg);opacity:0;border-radius:50%} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event .pic-area li img{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)} } .aboutWrap .about-event .pic-area li:first-child{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)} .aboutWrap .about-event .pic-area li.slick-current img{-webkit-filter:grayscale(0);filter:grayscale(0)} .aboutWrap .about-event .pic-area li:nth-child(1){z-index:28} .aboutWrap .about-event .pic-area li:nth-child(2){z-index:27} .aboutWrap .about-event .pic-area li:nth-child(3){z-index:26} .aboutWrap .about-event .pic-area li:nth-child(4){z-index:25} .aboutWrap .about-event .pic-area li:nth-child(5){z-index:24} .aboutWrap .about-event .pic-area li:nth-child(6){z-index:23} .aboutWrap .about-event .pic-area li:nth-child(7){z-index:22} .aboutWrap .about-event .pic-area li:nth-child(8){z-index:21} .aboutWrap .about-event .pic-area li:nth-child(9){z-index:20} .aboutWrap .about-event .pic-area li:nth-child(10){z-index:19} .aboutWrap .about-event .pic-area li:nth-child(11){z-index:18} .aboutWrap .about-event .pic-area li:nth-child(12){z-index:17} .aboutWrap .about-event .pic-area li:nth-child(13){z-index:16} .aboutWrap .about-event .pic-area li:nth-child(14){z-index:15} .aboutWrap .about-event .pic-area li:nth-child(15){z-index:14} .aboutWrap .about-event .pic-area li:nth-child(16){z-index:13} .aboutWrap .about-event .pic-area li:nth-child(17){z-index:12} .aboutWrap .about-event .pic-area li:nth-child(18){z-index:11} .aboutWrap .about-event .pic-area li:nth-child(19){z-index:10} .aboutWrap .about-event .pic-area li:nth-child(20){z-index:9} .aboutWrap .about-event .pic-area li:nth-child(21){z-index:8} .aboutWrap .about-event .pic-area li:nth-child(22){z-index:7} .aboutWrap .about-event .pic-area li:nth-child(23){z-index:6} .aboutWrap .about-event .pic-area li:nth-child(24){z-index:5} .aboutWrap .about-event .pic-area li:nth-child(25){z-index:4} .aboutWrap .about-event .pic-area li:nth-child(26){z-index:3} .aboutWrap .about-event .pic-area li:nth-child(27){z-index:2} .aboutWrap .about-event .pic-area li:nth-child(28){z-index:1} .aboutWrap .about-event .article-area{max-width:520px;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;margin-left:100px;padding-top:150px} @media print, screen and (max-width: 74.99875em){.aboutWrap .about-event .article-area{max-width:400px;padding-top:200px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event .article-area{max-width:100%;margin-left:0;padding-top:20px} } .aboutWrap .about-event .article-area .number{position:relative;font-family:"Red Hat Display",sans-serif;font-size:145px;letter-spacing:2px;color:#fff;font-weight:900;margin-bottom:45px} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-event .article-area .number{font-size:100px;margin-bottom:25px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-event .article-area .number{font-size:80px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event .article-area .number{margin-bottom:20px} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-event .article-area .number{font-size:60px} } .aboutWrap .about-event .article-area .number li{width:100%;position:relative} .aboutWrap .about-event .article-area .ch{position:relative;font-family:"Noto Sans SC",sans-serif;font-size:20px;letter-spacing:2px;font-weight:600;color:#fff;margin-bottom:20px} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-event .article-area .ch{font-size:18px;margin-bottom:15px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-event .article-area .ch{line-height:1.4} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event .article-area .ch{margin-bottom:12px;line-height:1.6} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-event .article-area .ch{font-size:17px} } .aboutWrap .about-event .article-area .ch li{position:relative} .aboutWrap .about-event .article-area .en{position:relative;max-width:520px;height:130px;font-family:"Red Hat Display",sans-serif;font-size:18px;letter-spacing:1px;line-height:1.6;color:#fff} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-event .article-area .en{font-size:16px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event .article-area .en{height:50px;line-height:1.4} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-event .article-area .en{font-size:15px} } .aboutWrap .about-event .article-area .en li{position:relative} .aboutWrap .about-event .article-area .en .flickity-page-dots{position:static;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:80px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center} @media print, screen and (max-width: 39.99875em){.aboutWrap .about-event .article-area .en .flickity-page-dots{margin-top:85px} } .aboutWrap .about-event .article-area .en .flickity-page-dots li{width:12px;height:12px;background-color:#fff;margin-right:20px} @media print, screen and (max-width: 39.99875em){.aboutWrap .about-event .article-area .en .flickity-page-dots li{margin-right:15px} } .aboutWrap .about-event .article-area .en .flickity-page-dots li:last-child{margin-right:0} .aboutWrap .about-event .arrow-area{max-width:480px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event .arrow-area{position:absolute;max-width:100%;width:100%;bottom:12.75%;left:0;padding:0 20vw} } @media print, screen and (max-width: 39.99875em){.aboutWrap .about-event .arrow-area{bottom:23px;padding:0 20px} } .aboutWrap .about-event .arrow-area .cls-1{fill:#fff;-webkit-transition:0.3s all;transition:0.3s all} .aboutWrap .about-event .arrow-area .cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:3px;-webkit-transition:0.3s all;transition:0.3s all} .aboutWrap .about-event .arrow-area div{cursor:pointer} @media print, screen and (min-width: 40em) and (max-width: 64.06125em){.aboutWrap .about-event .arrow-area div{zoom:1.5} } .aboutWrap .about-event .arrow-area div:hover .cls-1{fill:#ea5504} .aboutWrap .about-event .arrow-area div:hover .cls-2{stroke:#ea5504} .aboutWrap .about-event .arrow-area .prev{margin-right:75px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-event .arrow-area .prev{margin-right:20px} } .aboutWrap .about-brandmap{padding-top:100px;-ms-touch-action:pan-y;touch-action:pan-y} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap{padding:85px 0px 60px;margin:0 20px;-ms-touch-action:initial;touch-action:initial} } .aboutWrap .about-brandmap .title{text-align:center;margin-bottom:100px;user-drag:none;-ms-user-select:none;user-select:none;-moz-user-select:none;-webkit-user-drag:none;-webkit-user-select:none} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-brandmap .title{margin-bottom:80px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .title{margin-bottom:40px} } .aboutWrap .about-brandmap .title .overflow{overflow:hidden;margin:37px 0 43px} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-brandmap .title .overflow{margin:30px 0} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .title .overflow{margin:28px 0} } .aboutWrap .about-brandmap .title .overflow .en{font-family:"Red Hat Display",sans-serif;font-size:55px;letter-spacing:1px;color:#0b0b0b;font-weight:900;-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left;-webkit-transform:translate(10px, 100%) rotate(10deg);-ms-transform:translate(10px, 100%) rotate(10deg);transform:translate(10px, 100%) rotate(10deg)} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-brandmap .title .overflow .en{font-size:48px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .title .overflow .en{font-size:40px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .title .overflow .en{font-size:28px;-webkit-transform:translate(0px, 100%) rotate(10deg);-ms-transform:translate(0px, 100%) rotate(10deg);transform:translate(0px, 100%) rotate(10deg)} } .aboutWrap .about-brandmap .title .cls-1{fill:#54c0e8} .aboutWrap .about-brandmap .brandmapWrap{position:relative;max-width:1400px;margin:0 auto 50px} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-brandmap .brandmapWrap{max-width:1250px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapWrap{max-width:1000px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapWrap{display:block;max-width:100%;margin-bottom:25px} } .aboutWrap .about-brandmap .brandmapWrap .brandmap{margin:0 100px} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-brandmap .brandmapWrap .brandmap{margin:0 60px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapWrap .brandmap{margin:0 40px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapWrap .brandmap{margin:0px;display:block} } .aboutWrap .about-brandmap .brandmapWrap .brandmap li{cursor:pointer;margin-right:55px;opacity:0.2;-webkit-transition:0.5s all;transition:0.5s all} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-brandmap .brandmapWrap .brandmap li{margin-right:40px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapWrap .brandmap li{margin-right:30px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapWrap .brandmap li{width:100%;margin:0px;text-align:center;opacity:1;-webkit-transition:initial;transition:initial} } .aboutWrap .about-brandmap .brandmapWrap .brandmap li:hover{opacity:1} .aboutWrap .about-brandmap .brandmapWrap .brandmap li:last-child{margin-right:0} .aboutWrap .about-brandmap .brandmapWrap .brandmap li.current{opacity:1} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapWrap .brandmap li img{height:30px} } .aboutWrap .about-brandmap .brandmapWrap .prev,.aboutWrap .about-brandmap .brandmapWrap .next{cursor:pointer} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapWrap .prev,.aboutWrap .about-brandmap .brandmapWrap .next{position:absolute;z-index:1} .aboutWrap .about-brandmap .brandmapWrap .prev svg,.aboutWrap .about-brandmap .brandmapWrap .next svg{width:21px} } .aboutWrap .about-brandmap .brandmapWrap .prev .b,.aboutWrap .about-brandmap .brandmapWrap .next .b{fill:#0c131b;-webkit-transition:0.5s all;transition:0.5s all} .aboutWrap .about-brandmap .brandmapWrap .prev .c,.aboutWrap .about-brandmap .brandmapWrap .next .c{fill:none;stroke:#0c131b;stroke-miterlimit:10;stroke-width:3px;-webkit-transition:0.5s all;transition:0.5s all} .aboutWrap .about-brandmap .brandmapWrap .prev{-webkit-transition:0.5s all;transition:0.5s all} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapWrap .prev{left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)} } .aboutWrap .about-brandmap .brandmapWrap .prev:hover{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapWrap .prev:hover{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)} } .aboutWrap .about-brandmap .brandmapWrap .prev:hover .b{fill:#ea5406} .aboutWrap .about-brandmap .brandmapWrap .prev:hover .c{stroke:#ea5406} .aboutWrap .about-brandmap .brandmapWrap .next{-webkit-transition:0.5s all;transition:0.5s all} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapWrap .next{right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)} } .aboutWrap .about-brandmap .brandmapWrap .next:hover{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapWrap .next:hover{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)} } .aboutWrap .about-brandmap .brandmapWrap .next:hover .b{fill:#ea5406} .aboutWrap .about-brandmap .brandmapWrap .next:hover .c{stroke:#ea5406} .aboutWrap .about-brandmap .countryWrap .country-select{position:relative;width:150px;padding:6px 0 8px;border-radius:0;line-height:1;color:#606060;font-size:13px;font-weight:500;font-family:"Montserrat",sans-serif;letter-spacing:0.5px;float:inherit;margin:0 auto 20px} .aboutWrap .about-brandmap .countryWrap .country-select::before{position:absolute;content:"";width:135px;height:4px;bottom:0;left:0;background-color:#606060} .aboutWrap .about-brandmap .countryWrap .country-select::after{position:absolute;content:"";width:4px;height:4px;right:6px;top:9px;border-bottom:1px solid #0c131b;border-right:1px solid #0c131b;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:0.3s all;transition:0.3s all} .aboutWrap .about-brandmap .countryWrap .country-select .list{width:calc(100% + 4px);border-radius:0;background-color:#fff;margin-top:0;border:1px solid #231815;-webkit-transform:scale(1) translateY(-50px);-ms-transform:scale(1) translateY(-50px);transform:scale(1) translateY(-50px);left:-2px;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;z-index:9;top:100%;-webkit-box-shadow:0 0 0 1px rgba(68,68,68,0.11);box-shadow:0 0 0 1px rgba(68,68,68,0.11);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition:0.3s all;transition:0.3s all;margin-top:-4px} .aboutWrap .about-brandmap .countryWrap .country-select .list .option{position:relative;color:#0c131b;font-size:13px;padding:10px 8px;background-color:#fff;font-family:"Noto Sans SC",sans-serif} .aboutWrap .about-brandmap .countryWrap .country-select .list .option::after{position:absolute;content:"";width:calc(100% - 16px);height:1px;background-color:#0c131b;margin:0 8px;left:0;bottom:0} .aboutWrap .about-brandmap .countryWrap .country-select .list .option:last-child::after{display:none} .aboutWrap .about-brandmap .countryWrap .country-select .list .option:hover{background-color:#0c131b;color:#fff} .aboutWrap .about-brandmap .countryWrap .country-select .list .option:focus{background-color:#0c131b;color:#fff} .aboutWrap .about-brandmap .countryWrap .country-select.open{color:#ea5406} .aboutWrap .about-brandmap .countryWrap .country-select.open::before{background-color:#ea5406} .aboutWrap .about-brandmap .countryWrap .country-select.open::after{border-color:#ea5406;-webkit-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg)} .aboutWrap .about-brandmap .countryWrap .country-select.open .list{opacity:1;pointer-events:auto;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)} .aboutWrap .about-brandmap .countryWrap .country-select .current{font-family:"Noto Sans SC",sans-serif} .aboutWrap .about-brandmap .brandmapListWrap{position:relative} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapListWrap{overflow-x:auto;direction:rtl} } .aboutWrap .about-brandmap .brandmapListWrap::-webkit-scrollbar{display:none} .aboutWrap .about-brandmap .brandmapList{position:relative;width:100%;aspect-ratio:1902/700;background:url("/images/pages/en/images/a-map-bg.jpg") right bottom/cover no-repeat} @media print, screen and (max-width: 99.99875em){.aboutWrap .about-brandmap .brandmapList{zoom:0.75} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList{zoom:0.62} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList{width:1920px;height:700px;zoom:0.6} } .aboutWrap .about-brandmap .brandmapList img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover} .aboutWrap .about-brandmap .brandmapList li{position:relative;width:100%;height:100%} .aboutWrap .about-brandmap .brandmapList .pin{position:absolute;z-index:1} .aboutWrap .about-brandmap .brandmapList .pin .dot{width:22px;height:22px;position:relative;background-color:#ff4d00;border-radius:50%} .aboutWrap .about-brandmap .brandmapList .pin .dot::after{position:absolute;content:"";width:7px;height:7px;border-radius:50%;background-color:#faeede;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)} .aboutWrap .about-brandmap .brandmapList .pin .name{font-family:"Red Hat Display",sans-serif;font-size:12px;letter-spacing:1px;color:#ff4d00;text-wrap:nowrap;font-weight:600;margin-top:-5px;margin-left:7px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .pin .name{font-size:10px} } .aboutWrap .about-brandmap .brandmapList a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;position:relative} .aboutWrap .about-brandmap .brandmapList .japan{right:24px;top:232px} @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList .japan{right:188px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .japan{right:10px} } @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList .japan a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} } .aboutWrap .about-brandmap .brandmapList .china{right:261px;top:295px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .china{right:329px} } .aboutWrap .about-brandmap .brandmapList .bangladesh{top:370px;right:320px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .bangladesh a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} } .aboutWrap .about-brandmap .brandmapList .myanmar{right:344px;top:389px} @media print, screen and (min-width: 64.0625em) and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList .myanmar{top:400px} } .aboutWrap .about-brandmap .brandmapList .thailand{right:360px;top:433px} @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList .thailand{top:436px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .thailand{top:430px;right:365px} } .aboutWrap .about-brandmap .brandmapList .thailand a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .thailand a{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row} } .aboutWrap .about-brandmap .brandmapList .thailand .name{margin-left:0px;margin-right:7px} @media print, screen and (min-width: 64.0625em) and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList .thailand{top:430px} } .aboutWrap .about-brandmap .brandmapList .laos{right:293px;top:407px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .laos a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} } @media print, screen and (min-width: 64.0625em) and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList .laos{top:410px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .laos{right:265px} } .aboutWrap .about-brandmap .brandmapList .cambodia{right:330px;top:464px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .cambodia{right:335px;top:461px} } .aboutWrap .about-brandmap .brandmapList .cambodia .name{margin-left:0px;margin-right:7px} .aboutWrap .about-brandmap .brandmapList .cambodia a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .cambodia a{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row} } .aboutWrap .about-brandmap .brandmapList .vietnam{right:227px;top:475px} @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList .vietnam{right:185px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .vietnam{top:450px;right:200px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .vietnam .name{margin-left:0px;margin-right:7px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .vietnam a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} } .aboutWrap .about-brandmap .brandmapList .philippines{right:111px;top:441px} @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList .philippines{right:70px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .philippines{top:420px;right:80px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .philippines a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} } .aboutWrap .about-brandmap .brandmapList .malaysia{right:270px;top:511px} @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList .malaysia{right:220px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .malaysia{right:253px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .malaysia a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} } .aboutWrap .about-brandmap .brandmapList .singapore{right:246px;top:533px} @media print, screen and (max-width: 74.99875em){.aboutWrap .about-brandmap .brandmapList .singapore{right:190px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .singapore{right:250px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .singapore a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} } .aboutWrap .about-brandmap .brandmapList .indonesia{right:133px;top:567px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .indonesia{right:210px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .indonesia a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} } .aboutWrap .about-brandmap .brandmapList .dubai{right:639px;top:373px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .dubai{right:610px} } @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .dubai a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} } .aboutWrap .about-brandmap .brandmapList .usa{left:141px;top:258px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .usa{left:120px} } .aboutWrap .about-brandmap .brandmapList .canada{left:82px;top:93px} @media print, screen and (max-width: 64.06125em){.aboutWrap .about-brandmap .brandmapList .canada{left:70px} } .aboutWrap .about-brandmap .scroll{margin-top:10px;-webkit-box-pack:right;-ms-flex-pack:right;justify-content:right} .aboutWrap .about-brandmap .scroll .line{width:40px;height:1px;background-color:#dadbdb;position:relative;margin-right:10px} .aboutWrap .about-brandmap .scroll .line::after{position:absolute;content:"";width:9px;height:9px;background:url("/images/pages/en/images/about-scroll-circle.svg") center/cover no-repeat;top:calc(50% - 4.5px);left:0px;-webkit-animation:a-scroll 2s ease-out infinite;animation:a-scroll 2s ease-out infinite} .aboutWrap .about-brandmap .scroll .text{font-family:"Red Hat Display",sans-serif;font-size:12px;color:#ea5406} @media print, screen and (max-width: 99.9988em) { .aboutWrap .about-event .pic-area { margin-top: 25px; } } @media screen and (max-width: 63.9375em) { } /* Motion controls and carousel layout; retain the reference's page geometry. */ .aboutWrap .about-animation .text-area { transform: none; } .aboutWrap .about-animation .scroll { opacity: 1; pointer-events: auto; } .aboutWrap #horizontalWrap .pic-area { will-change: transform; } .aboutWrap .ingredient-background { position: absolute; inset: 0; width: 100%; height: 100%; } .aboutWrap .ingredient-background .bg { height: 100%; } .aboutWrap .ingredient-background .bg > li, .aboutWrap .ingredient-background .bg img { width: 100%; height: 100%; object-fit: cover; } .aboutWrap .about-ingredient .article-area { position: relative; } .aboutWrap .ingredient-copy { height: 375px; padding-right: 48px; } .aboutWrap .ingredient-copy .slick-article { max-width: 520px; justify-content: flex-start; } .aboutWrap .ingredient-copy .slick-article > li { margin: 0; flex-shrink: 0; } .aboutWrap .ingredient-pagination { position: absolute; top: 0; right: 0; left: auto; bottom: auto; width: 12px; display: flex; flex-direction: column; gap: 20px; transform: none; } .aboutWrap .ingredient-pagination .swiper-pagination-bullet { position: relative; width: 12px; height: 12px; margin: 0; background: #000; opacity: 1; } .aboutWrap .ingredient-pagination .swiper-pagination-bullet-active::after { content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--cream); } .aboutWrap .about-motion-pause { position: absolute; z-index: 2; bottom: 14px; right: 30px; font-size: 12px; padding: 8px; } .aboutWrap .about-event .pic-area { min-width: 0; overflow: visible; } .aboutWrap .about-event::before, .aboutWrap .about-event::after { pointer-events: none; } .aboutWrap .about-event .pic-area .swiper-wrapper { align-items: flex-start; } .aboutWrap .about-event .pic-area .swiper-slide { margin: 0; direction: ltr; } .aboutWrap .about-event .pic-area li img { width: 389px; height: 389px; max-width: none; object-fit: cover; } .aboutWrap .about-event .history-year { margin: 0 0 45px; } .aboutWrap .about-event .article-area .number { line-height: 1; margin-bottom: 0; } .aboutWrap .about-event .history-description { height: 130px; } .aboutWrap .about-event .en { height: 100%; } .aboutWrap .about-brandmap .title .overflow .en { transform: none; } .aboutWrap .country-select.open .list { display: block; opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .aboutWrap .brandmapList > li:not([hidden]) { animation: about-map-in .5s ease both; } .content-page:not(.content-motion) .about-animation .number-area { height: auto; padding: 70px 0; } .content-page:not(.content-motion) .about-animation .number-area .inner-sticky { position: relative; height: auto; } .content-page:not(.content-motion) .about-animation .number-area [class*="hollow"] { display: none; } .content-page:not(.content-motion) .about-animation .drink-area { height: 100svh; margin: 0; overflow: hidden; } .content-page:not(.content-motion) .about-animation .drink-area .inner-sticky { position: relative; } .content-page:not(.content-motion) .about-animation .drink-area li { transform: none; } .content-page:not(.content-motion) .about-info-preview { display: none; } .content-page:not(.content-motion) #horizontalWrap { width: 100%; flex-wrap: wrap; } .content-page:not(.content-motion) .about-infoWrap li { width: 100%; } @media (max-width: 1599px) { .aboutWrap .about-event .history-year { margin-bottom: 25px; } } @media (max-width: 1024px) { .aboutWrap .about-ingredient.flex-container { display: block; } .aboutWrap .about-event .pic-area li img { width: 350px; height: 350px; } .aboutWrap .about-event .pic-area { flex: 0 0 350px; } .aboutWrap .about-event .history-description { height: 50px; } .aboutWrap .ingredient-copy { height: 300px; padding-right: 0; } .aboutWrap .ingredient-copy .slick-article { max-width: 100%; } .aboutWrap .about-motion-pause { position: static; display: block; margin-left: auto; } .aboutWrap .ingredient-pagination { display: none; } .aboutWrap .about-brandmap .brandmap > li:not(.current) { display: none; } .aboutWrap .about-brandmap .brandmap img { margin: auto; } } @media (max-width: 639px) { .aboutWrap .about-event .pic-area li img { width: 248px; height: 248px; } .aboutWrap .about-event .pic-area { flex-basis: 248px; } .aboutWrap .ingredient-copy { height: 135px; } } @keyframes about-map-in { from { opacity: 0; } to { opacity: 1; } } /* Keep copy and controls inside flowing sections when the viewport is short. */ .aboutWrap .about-ingredient { height: auto; min-height: 100svh; } .aboutWrap .about-ingredient .article-area { height: auto; } @media (min-width: 1025px) { .aboutWrap .about-ingredient .pic-area { height: auto; align-self: stretch; } .aboutWrap .about-ingredient .pic-area .triangle { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); } } @media (max-width: 1024px) { .aboutWrap .about-infoWrap li { height: auto; min-height: 100svh; } .aboutWrap .about-infoWrap li .pic-area { flex-shrink: 0; } .aboutWrap .about-event { height: auto; min-height: 100svh; } .aboutWrap .about-event .history-description { height: auto; min-height: 50px; } .aboutWrap .about-event .arrow-area { position: static; width: auto; margin-top: 24px; padding: 0; } } @media screen and (min-width: 1280.02px) { .aboutWrap .about-brandmap .brandmapList .pin.japan { right: 1.9453%; top: 33.1429%; } .aboutWrap .about-brandmap .brandmapList .pin.china { right: 13.7224%; top: 42.1429%; } .aboutWrap .about-brandmap .brandmapList .pin.bangladesh { right: 15.3481%; top: 52.8571%; } .aboutWrap .about-brandmap .brandmapList .pin.thailand { right: 20.6109%; top: 58.4286%; } .aboutWrap .about-brandmap .brandmapList .pin.laos { right: 15.4048%; top: 58.1429%; } .aboutWrap .about-brandmap .brandmapList .pin.cambodia { right: 17.8265%; top: 63.1429%; } .aboutWrap .about-brandmap .brandmapList .pin.vietnam { right: 10.6688%; top: 63.5714%; } .aboutWrap .about-brandmap .brandmapList .pin.philippines { right: 4.3596%; top: 65.2857%; } .aboutWrap .about-brandmap .brandmapList .pin.malaysia { right: 12.9317%; top: 72.4286%; } .aboutWrap .about-brandmap .brandmapList .pin.singapore { right: 11.4059%; top: 75%; } .aboutWrap .about-brandmap .brandmapList .pin.indonesia { right: 8.142%; top: 80.8571%; } .aboutWrap .about-brandmap .brandmapList .pin.dubai { right: 33.5962%; top: 53.2857%; } .aboutWrap .about-brandmap .brandmapList .pin.usa { left: 7.4132%; top: 36.8571%; } .aboutWrap .about-brandmap .brandmapList .pin.canada { left: 4.3113%; top: 13.2857%; } .aboutWrap .about-brandmap .brandmapList .pin.France { left: 45.4784%; top: 28.5714%; } .aboutWrap .about-brandmap .brandmapList .pin.Brunei { right: 11.041%; top: 77.8571%; } .aboutWrap .about-brandmap .brandmapList .pin.australia { right: 3.572%; top: 95%; } } @keyframes a-scroll{0%{-webkit-transform:translateX(35px);transform:translateX(35px)}85%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}} @keyframes arrow-down{0%{-webkit-transform:translateY(10px);transform:translateY(10px);opacity:1}39.9%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}40%{-webkit-transform:translateY(0px);transform:translateY(0px);opacity:0}80%{-webkit-transform:translateY(10px);transform:translateY(10px);opacity:1}100%{-webkit-transform:translateY(10px);transform:translateY(10px);opacity:1}}