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

html { width:100%; height:100%; overflow:auto; min-height:0 !important; }
body { background:white url('../img/bg-dot.png'); background-repeat:repeat; color:#525252; -webkit-text-size-adjust:none; }
html, body { font-family: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-zh-round: "m-plus-rounded-1c";
	--kol-font-en: "itc-american-typewriter";
}
@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; }



@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 */



.main-top { height:740px; background-color:var(--kol-yellow); background-image:url('../img/bg-main-top.png'); background-size:cover; background-position:center center; }

.main-profile { margin-top:-600px; }

.main-profile-avartar { position:relative; width:100%; max-width:416px; margin:0 auto; }
.main-profile-pic { position:relative; padding-bottom:100%; width:100%; display:block; margin-bottom:1.75em; }
.main-profile-pic-img { position:absolute; width:100%; height:100%; top:0; left:0; }

.main-profile-name {
	font-family:var(--kol-font-zh-round),sans-serif; font-weight:bold; font-size:72px; /* text-orientation:upright; writing-mode:vertical-rl; */ position:absolute; width:min-content; width:calc(1em + 28px); right:0; top:0; /* height:max-content; */ background-color:var(--kol-lightblue); color:white; border-radius:8px; line-height:1; padding:14px;
	transform:translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%);
}

.main-profile-deco { position:absolute; width:215%; bottom:32%; right:-63%; }
.main-profile-deco .deco-wrapper { position:relative; display:block; width:100%; padding-bottom:41.8%; }
.main-profile-deco .deco-img { position:absolute; top:0; left:0; width:100%; height:100%; }

.main-profile-name.en { width:auto; }
.en .main-profile-deco { position:absolute; width:75%; bottom:89%; right:-25%; }

.main-profile-desc { width:100%; max-width:645px; position:relative; margin:0 auto; }
.main-profile-desc strong { color:var(--kol-lightblue); }
.main-profile-text { color:#1a1a1a; position:relative; z-index:2; padding:60px; font-family:var(--kol-font-en),var(--kol-font-zh),san-serif; margin-bottom:3rem; }
.main-profile-text .title { line-height:1.5em; }
.main-profile-text .caption { line-height:1.5em; }
.main-profile-frame {
	background-color:white; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; border-radius:18px; border:10px solid lightgray;
	transform:rotate(-2deg);
}

.main-profile-socialmedia { font-size:28px; text-align:center; margin-bottom:2rem; }
.main-profile-socialmedia a { margin-right:1rem; }
.main-profile-socialmedia a:hover { color:var(--kol-yellow); }

/* .ning_video { padding: 30px; margin-bottom: 2rem; border:5px solid var(--kol-lightgray); border-radius:36px; background-color: white;} */
.ning_video { position: relative; padding: 40px; max-width: 650px; margin-right: auto; margin-left: auto; margin-bottom: 100px;}
.main-profile-video { position:relative; max-width:560px; width:100%; margin:0 auto 0; }
.main-profile-video-container { position:relative; padding-bottom:56.25%; width:100%; margin-bottom:2em; }
.main-profile-video-container .video_body { position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; border-radius:1.5em; cursor:pointer; }
.main-profile-video-container .video_icon { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; pointer-events:none; }
.main-profile-video-container .video_icon img { width:15%; }
.main-profile-video-container .video_border { position:absolute; top:-1em; left:-1em; bottom:-1em; right:-1em; border:2px solid var(--kol-beige); padding:1em; border-radius:2em; z-index:1; }
.main-video-frame {
	background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 18px;
    border: 10px solid lightgray;
    transform: rotate(-2deg);
}

.pdp-share-btn-txt{
    font-weight: bold;
    background-color: var(--kol-lightblue);
    color: white;
    border-radius: 1em;
    padding: 0.3em 12px;
    line-height: 1em;
}
.copyvideopath {
	font-size: 18px;
    align-self: flex-end;
    background-color: var(--kol-black);
    border-radius: 20px;
    color: var(--kol-yellow);
    padding: 4px 24px;
}
.copyvideopath a:hover { background-color: var(--kol-yellow); }
.main-profile-video-container .video_icon img{ filter: drop-shadow(1px 1px 5px rgba(102, 102, 102, 0.66) );}

.main-gallery { margin-bottom:200px; display:inline-block; }
.main-gallery:last-child { margin-bottom:0; }
.gallery-head { display:flex; flex-direction:column; justify-content:center; align-items:center; }

.gallery-title { display:flex; justify-content:center; align-items:center; width:100%; margin-bottom:1.5rem; }
.gallery-title-img { width:175px; height:104px; }
.gallery-divider { height:6px; flex:1; background-color:var(--kol-lightblue); border-radius:10px; }
.gallery-title-txt { font-family:var(--kol-font-en),var(--kol-font-zh-round),sans-serif; font-weight:normal; font-size:48px; color:var(--kol-black); padding:0 2rem; display:flex; align-items:center; text-align:center; }

.gallery-caption { font-family:var(--kol-font-en),sans-serif; background-color:var(--kol-yellow); color:var(--kol-black); padding:5px 26px; border-radius:100px; margin-bottom:2rem; }

.gallery-grid { width:100%; background-color:var(--kol-yellow); }
.gallery-cards { display:flex; flex-wrap:wrap; flex-direction:row; padding:45px 0; margin:0 -1.5%; justify-content:center; }
.gallery-card { flex:0 1 30%; margin:1.5%; padding:12px 18px; padding-bottom:24px; background-color:white; border:5px solid var(--kol-lightgray); border-radius:36px; display:flex; flex-direction:column; }

.card-hero { width:100%; margin-bottom:24px; }
.card-img-wrapper { display:block; width:100%; padding-bottom:98.652%; position:relative; }
.card-img { width:100%; height:100%; position:absolute; top:0; left:0; }
.card-img.disable { background-color:var(--kol-gray); border-radius:25px; }
.card-info { color:var(--kol-black); display:flex; flex-direction:column; flex:1; }
.card-head { display:flex; flex-direction:row; justify-content:space-between; align-items:center; margin-bottom:12px; }
.card-name { font-size:28px; font-weight:bold; background-color:var(--kol-lightblue); color:white; border-radius:1em; padding:.3em 12px; line-height:1em; }
.card-price { font-size:24px; font-family:var(--kol-font-en), sans-serif; line-height:1.1em; text-align:right; white-space:nowrap; margin-left:.5em; }
.card-desc { font-size:16px; font-family:var(--kol-font-zh),sans-serif; flex:1; }
.card-action { font-size:18px; align-self:flex-end; background-color:var(--kol-black); border-radius:20px; color:var(--kol-yellow); padding:4px 24px; }
.card-action:hover { color:var(--kol-black); background-color:var(--kol-yellow); }


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

@media (max-width: 1649.98px) {
	
}
@media (max-width: 1399.98px) {
	.gallery-cards { margin:0 -1%; }
	.gallery-card { flex-basis:31%; margin:1%; }
}
@media (max-width: 1399.98px) and (min-width: 1199.99px) {
	.card-name { font-size:24px; }
	.card-price { font-size:18px; }
}
@media (max-width: 1319.98px) {
	
}
@media (max-width: 1219.98px) {
	
}
@media (max-width: 1199.98px) {
	.gallery-cards { margin:0 -.5%; }
	.gallery-card { flex-basis:32%; margin:.5%; }
}
@media (max-width: 1199.98px) and (min-width: 575.99px) {
	.card-name { font-size:18px; }
	.card-price { font-size:16px; }
}
@media (max-width: 991.98px) {
	.gallery-divider { display:none; }
	.gallery-title-txt { flex-direction:column; }

	.gallery-card { flex-basis:49%; margin:.5%; }
}
@media (max-width: 767.98px) {
	.main-gallery { margin-bottom:26vw; }
}
@media (max-width: 575.98px) {
	.main-top { height:530px; }

	.main-profile { margin-top:-430px; padding:0; }

	.main-profile-avartar { max-width:300px; width:80%; }
	.main-profile-pic { margin-bottom:5vw; }
	.main-profile-name { font-size:calc(48 * .2vw); }
	.main-profile-text { padding:36px; }
	.main-profile-text .title { font-size:18px; }
	.main-profile-text .caption { font-size:18px; }

	.gallery-title-txt { font-size:24px; }

	.gallery-cards { margin:0; }
	.gallery-card { flex-basis:100%; margin:1.5% 0; border-radius:24px; padding:8px 12px; }

	.card-hero { margin-bottom:18px; }
	.card-name { font-size:18px; }
	.card-price { font-size:18px; }
	.card-action { font-size:16px; }

	.ning_video { padding: 10px;}
	.main-video-frame { display: none;}
	.copyvideopath-container {justify-content: center;}

}
@media (max-width: 479.98px) {
	.card-name { font-size:16px; }
	.card-price { font-size:16px; }
	.card-action { font-size:14px; }
}




/* BOTTOM */




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

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

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