@charset "UTF-8";
/* CSS Document */

html { width:100%; height:100%; overflow:auto; min-height:0 !important; }
body { background:white; color:var(--kol-black); -webkit-text-size-adjust:none; }
html, body { font-family:var(--kol-font-en),var(--kol-font-zh), Helvetica, Arial, sans-serif; }
a {
	text-decoration:none; cursor:pointer; color:var(--ol-yellow);
	transition:color 300ms; -webkit-transition:color 300ms; -ms-transition:color 300ms;
}
a:hover { color:var(--ol-yellow); text-decoration:none; }
a.active { color:var(--ol-yellow); }
a:focus { outline:none; color:var(--ol-yellow); text-decoration:none; }
a:link:after, a:visited:after { content:""; }
:root {
	--swiper-theme-color: white;
	--ss-orange: #ee3124;
	--kol-yellow: #f6c41e;
	--kol-lightblue: #00adf1;
	--kol-lightgray: #f5f5f5;
	--kol-gray: #e5e5e5;
	--kol-black: #1a1a1a;
	--kol-font-zh: "source-han-sans-cjk-hk";
	--kol-font-en: "roboto";
	--kol-font-en-hdr: "raleway";
}
@media (max-width: 959px) {/* Essential */
	
}
@media (max-width: 767px) {/* Essential */
	
}




/* UTIL */



@media (max-width: 767px) {

}




/* GLOBAL */

.h1, h1, .h2, h2 { margin-bottom:2rem; font-weight:600; }
.h3, h3 { font-weight:600; }
.h4, h4 { font-weight:600; }

picture { text-align:center; }

.modal-backdrop.show { opacity:.85; }



@media (min-width: 1200px) {
	.h1, h1, .h2, h2 { font-size:3.5rem; /* letter-spacing:.19em; */ margin-bottom:2.8rem; }
	.h3, h3 { font-size:2.25rem; /* letter-spacing:.19em; */ margin-bottom:2.5rem; }
	p { font-size:1.125rem; /* letter-spacing:.19em; */ }
}
@media (max-width: 767.98px) {
	
}




/* TOP */



.hdr-bar { width:100%; height:20px; background-color:var(--ss-orange); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-left:10px; }
.hdr-bar .logo-img { width:138px; height:16px; float:left; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	
}

@media (max-width: 1399.98px) {
	
}
@media (max-width: 1199.98px) {
	
}
@media (min-width: 992px) {
	
}
@media (max-width: 991.98px) {
	
}




/* MAIN */


.top-bar { margin-top:108px; }
.top-subtitle { font-family:var(--kol-font-en-hdr),sans-serif; margin-bottom:28px; }

.billboard { width:100%; display:flex; margin-bottom:125px; }
.billboard-txt { flex:1; display:flex; justify-content:flex-end; text-align:center; padding-right:118px; }
.billboard-title { writing-mode:vertical-rl; transform:rotate(180deg); font-size:132px; font-family:var(--kol-font-en-hdr),sans-serif; margin:0; display:block; line-height:1; }
.billboard-artwork { flex:0 1 calc(50% + 348px); height:804px; }
.billboard-artwork .billboard-img { width:100%; height:100%; object-fit:cover; object-position:center; }

.intro-highlight { font-family:var(--kol-font-en),var(--kol-font-zh),sans-serif; display:inline; color:white; box-shadow:0 0 0 0 var(--kol-black); background-color:var(--kol-black); box-decoration-break:clone; line-height:1.7em; }
.intro-txt { line-height:2em; font-size:22px; letter-spacing:.04em; margin:2.9em 0 5em; }

.intro-socialmedia { font-size:28px; }
.intro-socialmedia a { margin-right:1rem; }
.intro-socialmedia a:hover { color:var(--ss-orange); }

.works { width:100%; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:flex-start; margin-bottom:6rem; padding-top:20px; padding-bottom:20px; }
.work { flex:0 1 31%; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.work-img { display:block; width:100%; padding-bottom:100%; margin-bottom:24px; position:relative; box-shadow:0 0 24px rgba(0,0,0,.18); }
.work-img img { position:absolute; top:0; left:0; width:100%; height:100%; }
.work-caption { font-weight:bold; text-align:center; }

.video-bar { margin-bottom:8rem; }
.video-slide { position:relative; cursor:grab; }
.video-slide-container { width:100%; padding-bottom:56.25%; position:relative; }
.video-slide-content { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; }
.video-btn { color:white; font-size:72px; z-index:1; position:relative; }
.video-thumb { display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
.video-thumb-img { width:100%; height:100%; object-fit:contain; }
.modal-dialog {	max-width:800px; width:90%; margin:0 auto; }
.modal-dialog-centered { min-height:100%; }
.modal-body { position:relative; padding:0px; }
.btn-close { position:absolute; right:-35px; top:0; z-index:999; font-size:2rem; font-weight:normal; color:#fff; opacity:1; font-size:20px; }

.section-hdr { width:100%; display:flex; margin-bottom:125px; }
.section-hdr-txt { flex:1; display:flex; justify-content:flex-start; align-items:flex-start; text-align:center; padding-left:82px; }
.section-hdr-title { writing-mode:vertical-rl; font-family:var(--kol-font-en-hdr),sans-serif; margin:0; display:block; line-height:1; color:white; background-color:var(--kol-black); padding:10px 8px 10px 4px; }
.section-hdr-artwork { flex:0 1 calc(50% + 348px); height:504px; max-height:504px; }
.section-hdr-artwork-img { width:100%; height:100%; object-fit:cover; object-position:right center; }

.catalog { display:flex; flex-wrap:wrap; margin-bottom:120px; }
.product { flex:0 1 25%; margin:4%; display:flex; flex-direction:column; align-items:flex-start; }
.product-art { width:100%; max-width:220px; box-shadow:0 0 24px rgba(0,0,0,.18); margin-bottom:2.25rem; }
.product-picture { display:block; position:relative; padding-bottom:100%; }
.product-picture-img { position:absolute; top:0; left:0; width:100%; height:100%; }
.product-title { font-weight:bold; background-color:var(--kol-black); padding:2px 4px; color:white; }
.product-price { margin-bottom:1em; }
.product-desc { margin-bottom:.5em; }
.product-buy { background-color:var(--ss-orange); color:white; padding:0 4px; padding:.5em; }

.catalog.large { max-width:1650px; }
.large .product { flex:0 1 46%; margin:2%; }
.large .product-art { max-width:none; }
.large .product-picture { padding-bottom:64.05%; }

.section-subhdr { text-align:center; }
.section-subhdr-title { background-color:var(--kol-black); color:white; padding:4px; display:inline-block; }
.section-subhdr-title br { display:none; }


@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	
}

@media (max-width: 1899.98px) {
	.top-bar { margin-top:5.68vw; }
	.billboard { margin-bottom:6.5vw; }
	.billboard-artwork { height:50vw; }
	.billboard-title { font-size:6.94vw; }
}
@media (min-width: 1649.99px) {
	.intro-highlight { font-size:62px; }
}
@media (max-width: 1649.98px) {
	
}
@media (min-width: 1399.99px) {
	.top-bar { padding-left:74px; }

	.intro { padding-left:312px !important; padding-right:230px !important; }
}
@media (max-width: 1399.98px) {
	.top-bar { padding-left:0; }
	.billboard-title { font-size:96px; }
}
@media (max-width: 1319.98px) {
	
}
@media (max-width: 1219.98px) {
	
}
@media (max-width: 1199.98px) {
	.top-bar { padding:0 4vw; }

	.billboard-txt { padding-right:unset; justify-content:flex-start; padding-left:4vw; }
	.billboard-artwork { flex:0 1 calc(50% + 32vw); }

	.intro-txt { font-size:inherit; }

	.section-hdr-txt { padding-left:unset; justify-content:flex-end; padding-right:4vw; }

	.product { flex:0 1 30%; margin:4% 1.5%; }
}
@media (max-width: 1199.98px) and (min-width: 575.99px) {

}
@media (max-width: 991.98px) {
	.billboard-title { font-size:9.6vw; }

	.section-hdr { margin-bottom:12.6vw; }
	.section-hdr-artwork { flex:0 1 calc(50% + 32vw); height:50.85vw; }
}
@media (min-width: 767.99px) {
	.large .product-title { font-size:24px; }
}
@media (max-width: 767.98px) {
	.top-bar { margin-top:45px; }

	.video-bar-swiper-wrapper { flex-direction:column; transform:none !important; }
	.swiper-button-prev, .swiper-button-next { display:none; }

	.video-slide { cursor:default; }

	.product { flex:0 1 46%; margin:6% 2%; }
	.product-art { margin-bottom:4.68vw; }

	.catalog { margin-bottom:15.62vw; }
	.catalog.large { margin-bottom:0; }

	.large .product { flex:0 1 96%; margin:6% 2%; }
}
@media (min-width: 575.99px) {
	.works { transform:none !important; }
}
@media (max-width: 575.98px) {
	.billboard-txt { text-align:right; }
	.billboard-artwork { height:65vw; }

	.works { cursor:grab; }
	.work { flex:unset; flex-shrink:0; width:40%; margin:0 2%; }

	.product { flex:0 1 42%; margin:6% 4%; }
	.product-art { max-width:190px; }

	.section-subhdr-title br { display:block; }
}
@media (max-width: 479.98px) {
	.work { flex-basis:62%; }
}




/* BOTTOM */




.footer { text-align:center; padding:72px 18px 72px; }
.copyright { font-size:14px; color:gray; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	
}

@media (max-width: 991.98px) {
	
}