@font-face {
    font-family: 'Cocon';
    src: url('../fonts/font.woff2') format('woff2'),
        url('../fonts/font.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

* {
	/* -webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease; */
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
body {padding: 0px; margin:0px; font-family: 'Cocon'; background-color: #ffffff; color: #085818; font-size: 28px; line-height: 35px;}

h1 {font-weight: bold; color: #085818; font-size: 1.9vw;}
h2 {color: #085818; font-size: 40px; line-height: 48px;}
h3 {color: #085818}
h4 {color: #085818;}
a, a:hover, a:checked {color: #085818;}
p {margin: 0px 0px 20px;}
img {max-width: 100%; height: auto; vertical-align: top;}


.tl {text-align: left;}
.tr {text-align: right;}

.more-arrow {
	font-size: 25px;
	color: white;
	position: fixed;
	right: 10px;
	bottom: 10px;
	opacity: 0;
	display: none;
	z-index: 100;
	transition: all 0.3s ease 0s, font-size 0ms;
	-webkit-transition: all 0.3s ease 0s, font-size 0ms;
	-moz-transition: all 0.3s ease 0s, font-size 0ms;
	-o-transition: all 0.3s ease 0s, font-size 0ms;
}

.more-arrow i { text-shadow: rgba(0, 0, 0, 0.3) 0px 5px 5px; }

#wrap {margin:0px auto; max-width: 1920px;}

#header {background-color: #ea0a2a; height: 127px; width: 100%; position: relative;}

	#logo {position: absolute; top: 30px; left: 30px;}

	#nav {font-family: 'Cocon'; font-size: 18px; position: absolute; right: 30px; top: 50px;}

		#nav .nt { line-height: 27px; color: #ffffff;} 
			#nav .nt a { padding: 0px 10px 5px; text-decoration: none; color: #ffffff;}
			#nav .nt a.active, #nav .nt a:hover {color: #ffe400; border-bottom: 1px solid #ffe400}

		#nav .nb {font-size: 16px; color: #ffffff; right: 0px; top: 90px; z-index: 99}
			#nav .nb a { padding: 0px 10px 5px; text-decoration: none; color: #ffffff;}
			#nav .nb a.active, #nav .nb a:hover {color: #ffe400;}

		#nav .nav-close {text-align: right; font-size: 36px; cursor: pointer; color: #ffffff; display: none;}

	#nav-btn {position: absolute; right: 20px; top: 17px; cursor: pointer; display: none;}
		#nav-btn img {height: 30px;}

.no-wrap { white-space: nowrap;}

.row {
	margin: 0;
	padding: 0;
}
.greenbg { background-color: #085818; }
.greentext { color: #085818; }
.whitetext { color: #fff; }
.stick-to-top {margin-top: -1px;}
.text-container {text-align: center; margin: 3rem 0;}

.digital { display: inline-block; width: 9.5vw; max-width: 182px; height: auto;}
.digital-container .digital:not(:last-child) {
	margin-right: 10px;
}

.title {    
	position: absolute;
    margin: auto;
    top: 5.5vw;
    left: 50%;
    transform: translate(-50%, 0);
	width: 22vw;
	max-width: 452px;
    text-align: center;
}

.title.en {    
	top: 6.5vw;
	width: 19vw;
	max-width: 380px;
}

.middle-container {
	color: #fff;
	/* font-size: 2vw;
	line-height: 2.2vw; */
	margin: auto;
	/* width: 57vw; */
	padding: 0 20vw;
	margin-top: -5vw;
}

.middle-container p { margin-top: 3vw}

.middle-title {
	color: #fff;
	text-shadow: rgba(0, 0, 0, 0.3) 9px 5px 7px;
	/* font-size: 2.5vw; */
}

.middle-s-container {width: 100%; text-align: right;}
.middle-separator {width: 64.79vw; max-width: 1244px; height: auto;}

.bottom-container {
	width: 100%;
	margin-top: -11vw;
	/* padding: 0 4rem; */
}


.titlebg {
	width: 40.36vw; max-width: 775px; height: auto;
}

.ytbg {
	width: 40.73vw; max-width: 782px; height: auto;
}

.shopbg { 
	background: url('../img/shops_bg.png') top center no-repeat; 
	/* background-size: cover;  */
	margin: 0; 
	padding: 3rem 3rem 7rem;
}

/* .shopbg h2 {
	font-size: 2.5rem;
	line-height: 2.7rem;
} */

.shop-container {
	padding: 0 6vw;
	margin: 0;
}

.shop-container .glide__arrow {
    border: none;
    box-shadow: none;
	text-shadow: none;
	color: #085818;
}
.shop-container .glide__arrow--left {
	left: -3vw;
}
.shop-container .glide__arrow--right {
	right: -3vw;
}

.shopicon {
	width: 20vw; 
	max-width: 400px;
	height: auto;
}
.footer-container {
	background-color: #fff; 
	padding: 3rem; 
	width: 70%; 
	text-align: left; 
	margin: auto;
	margin-top: 5rem;
}

.footer-container .left {
	float: left;
	width: 69.99%;
	padding-right: 1rem;
}
.footer-container .left .link {margin-top: 10px;}
.footer-container .right {
	float: right;
    width: 29.99%;
	text-align: right;
}
.footer-container img {
	width: 100%;
	height: auto;
}

.embed-container {
	position: absolute;
	left: 49%;
	transform: translate(-50%, 0);
	top: 5vw;
	width: 28vw;
	max-width: 538px;
	height: 16vw;
	max-height: 307px;
}

.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;	
}

.thumb-container {
	margin-left: 6vw;
	margin-right: 6vw;
}
.thumb-holder {
	width: 21vw;
	max-width: 432px;
	height: auto;
	margin: auto;
}

.thumb-holder p {
	margin-top: 0.5em;
}

@media only screen and (min-width: 1921px) {
	h1 { font-size: 37px ;}
	.title {    
		top: 114px;
	}
	.title.en {    
		top: 130px;
	}
	.middle-container {
		padding: 0 423px;
		margin-top: -7rem;
	}
	.middle-container p { margin-top: 3rem}

	.bottom-container {
		margin-top: -14rem;
	}

	.shop-container {
		padding: 0 115px;
	}
	.shop-container .glide__arrow--left {
		left: -57px;
	}
	.shop-container .glide__arrow--right {
		right: -57px;
	}
	.embed-container {
		top: 96px;
	}
	.thumb-container {
		margin-left: 115px;
		margin-right: 115px;
	}
				
}

@media only screen and (min-width: 1280px) {
	.footer-container .left {
		width: 79.99%;
	}
	.footer-container .right {
		width: 18.99%;
	}
}

@media only screen and (max-width: 1279.98px) {
	body {font-size: 21px; line-height: 25px;}
	h2 {font-size: 30px; line-height: 36px;}
}

@media only screen and (max-width: 991.98px) {

	.middle-container {
		width: 100%;
		margin-top: 0;
	}

	.middle-container p { margin-top: 2rem}		

	.bottom-container {
		margin-top: -8vw;
	}
	.shopbg { 
		padding: 0 2rem 2rem;
	}
}

@media only screen and (max-width: 767.98px) {
	.footer-container {
		padding: 2rem;
		margin-top: 2rem;
		text-align: center;
		width: 85%;
	}
	.footer-container .left {
		float: none;
		width: 100%;
		padding: 0;
	}
	.footer-container .right {
		float: none;
		text-align: center;
		width: 100%;
	}
	.footer-container img {
		width: 100%;
		margin-top: 3rem;
	}
	.shopicon {
		width: 77vw; 
	}	
}

@media only screen and (max-width: 575.98px) {
	body {font-size: 4vw; line-height: 4.8vw;}
	h2 {font-size: 5vw; line-height: 6vw;}

	h1 { font-size: 4vw;}

	#header {height: 65px;}

	#logo {top: 10px; left: 20px;}
	#logo img {height: 45px;}

	#nav {width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0.88); z-index: 999; padding: 25px; display: none;}

	#nav .nb {position: relative; top: 0px; font-size: 22px;}
	#nav .nb a {display: block; text-align: center; line-height: 60px; border-bottom: 1px solid #ffffff;}
	#nav .nb a:last-child {border-bottom: 0px}
	#nav .nb span {display: none;}

	#nav .nav-close {display: block;}
	#nav-btn, #nav.active {display: block;}

	.more-arrow {
		display: block;
	}

	.titlebg {
		width: 90%;
	}
	
	.ytbg {
		width: 90%;
	}

	.title { top: 11.5vw; width: 45vw; }
	.title.en { top: 14.5vw; width: 45vw; }

	.text-container {margin: 2rem 0;}

	.digital-container .digital:not(:last-child) {
		margin-right: 5px;
	}

	.middle-container {
		padding: 0 1.5rem;
	}

	.middle-separator {margin-bottom: 1rem !important;}

	.embed-container {
		top: 9vw;
		width: 59vw;
		height: 34vw;
	}	

	.shopbg {
		margin-bottom: 0;
	}
	.shop-container {
		margin: 0;
	}
	.thumb-holder {
		width: 100%;
		margin-top: 2rem;
	}
	.footer-container {
		padding: 1.5rem;
	}
}