@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: Quartz Regular;
	src: url('./font/Quartz Regular.ttf');
}
#main {  }

#stamps {
	border-radius: 10px;
	background-color: white;
	display: inline-block;
	vertical-align: top;
	padding: 35px;
}
.stamps {
	margin-bottom: 30px;
	background-color: #FFF;
	border-radius: 20px;
}
.stamp {
	display: inline-block;
	/*text-align: center;*/
	vertical-align: top;
}
.stamp>img {
	display: block;
	width: 100%;
}
.stamp_title{
	text-align: center;
	font-size: 24px;
	font-weight: bold;
/*    padding: 13px 0px;
	margin: 1% 0px;*/
}
.new-item-box, .beta-item-box, .new-expansion-box{ /*-- new item --*/
	position: absolute;
	top: 0;
	right: 0;
}
#folksomony {
	margin-top:10px;
	padding: 15px;
	border-radius: 10px;
	background-color: white;
	display: inline-block;
	vertical-align: top; }

.first-eye { padding:20px 0; background-color:white; }
/*------------------------------| lv editor |-------------------------*/

.lveditor {
	/*display: none;*/
	margin: 10px 0;
}
.lveditor .t {
	color: #FFFFFF;
	padding: 10px;
	background-repeat: no-repeat;
	background-size: cover;
}
.lveditor.lv-n .t {
	background-image: url('image/lveditor/background-n.png');
}
.lveditor.lv-e .t {
	background-image: url('image/lveditor/background-e.png');
}
.lveditor.lv-m .t {
	background-image: url('image/lveditor/background-m.png');
}
.lveditor.lv-mh .t {
	background-image: url('image/lveditor/background-mh.png');
}
.lveditor.lv-h .t {
	background-image: url('image/lveditor/background-h.png');
}
.lveditor.lv-l .t {
	background-image: url('image/lveditor/background-l.png');
}
.lveditor .t .icon{
	width: 31px;
	height: 28px;
	margin-right: 10px;
	background: url('image/lveditor/icon.png') no-repeat;
}
.lveditor .t .title {
	margin-top: 7px;
	font-weight: bold;
	font-size: 16pt;
}
.lveditor .t > * {
	vertical-align: top;
	display: inline-block;
}
.lveditor .t .switcher {
	width: 39px;
	height: 17px;
	margin: 7px 0 0 10px;
	background: url('image/lveditor/change.png') no-repeat;
}
.lveditor .m {
	display: none;
	background-color: #4D4D4D;
	margin-top: -5px;
}
.lveditor.open .m { 
	display: flex;
	justify-content: space-around;
	border-radius: 0 0 5px 5px;
}
.lveditor .m .lv {
	color:#FFFFFF;
	font-size: 16pt;
	padding: 15px 20px;
	font-weight: bold;
	cursor:pointer;
}
.lveditor .m .lv:hover{
	color:#000000;
	background-color: #FFFFFF;
}

/*------------------------------| lv box |-------------------------*/
.lv-boxes {
	width: 135px;
	margin: -5px auto 0;
}
.lv-box {
	display: inline-block;
	color: white;
	padding: 1px 8px;
	font-size: 12px;
	line-height: normal;
	font-weight: bold;
	border-radius: 15px;
}
.lv-box-e {
	background-color: #58C69E;
}
.lv-box-m {
	background-color: #E8993D;
}
.lv-box-mh {
	background-color: #A67D42;
}
.lv-box-h {
	background-color: #4078A8;
}
.lv-box-l {
	background-color: #CF596B;
}
.lv-msg {
	font-size: 20pt;
	font-weight: bolder;
	text-align: center;
	padding: 5px 0;
}
.lv-msg-e {
	color: #58C69E;
}
.lv-msg-m {
	color: #E8993D;
}
.lv-msg-mh {
	color: #A67D42;
}
.lv-msg-h {
	color: #4078A8;
}
.lv-msg-l {
	color: #CF596B;
}
/*------------------------------| News |-------------------------*/

#news { 
	vertical-align: top; 
	display: inline-block; }

#news .t .more { position: absolute; right: 0px; }
#news .news { margin: 10px 0; display: block;}
#news .news > * { display: inline-block; vertical-align: top; }
#news .news > .time { color: #ffffff; background-color: #5c9bcc; border-radius: 5px; padding: 0px 3px; }

#news .news:hover { color:#EA563A; cursor:pointer; }
#news .news .title:hover { cursor:pointer; }

/*
#illc {
	height: 140px;
	background-image: url("../illc/img/index-btn.png");
	background-repeat: no-repeat;
	background-position: center;
}
#podcast {
	height: 100px;
	background-image: url("../podcast/img/index-btn.jpg");
	background-repeat: no-repeat;
	background-position: center;
}
*/
#workshop {
	height: 100px;
	background-image: url("../index/image/other/workshop.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/*#eventA {
	height: 100px;
	background-image: url("../index/image/other/script.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-bottom: 10px;
}*/
.event {
	margin-bottom: 10px;
	text-align: center;
}
.event>img {
	width: 100%;
	max-width: 400px;
}
/*------------------------------| Hot Video |-------------------------*/

#hot_video { 
	width: 500px;
	margin-left: 20px;
	vertical-align: top; 
	display: inline-block; }
#hot_video .t .more { position: absolute; right: 0px; }

/*------------------------------| Stamps |-------------------------*/


/*#stamps img { width: 200px; margin: 16px;}*/

#stamps .stamp { display:inline-block; text-align:center; }

/*------------------------------| folksomony |-------------------------*/

#folksomony .t { }
#folksomony .t .switcher { margin: 0 10px 0 10px; }

#folksomony .t .folk { 
	width: 174px;
	padding: 10px 0;
	font-weight: bold;
	margin-right: 2px;
	text-align: center;
	display: inline-block;
	vertical-align: bottom;
}

#folksomony .t .folk.selected,
#folksomony .t .folk:hover {
	background-color: #FCDD06;
	border-radius: 10px 10px 0 0; }
	
#folksomony .m {
	padding: 15px 15px 0 15px;
	background:url(image/folksonomy/line.png) no-repeat; }
	
#folksomony .m .folk { display: none; }
#folksomony .m .folk.selected { display: block; }

#folksomony .m .item{
	width: 197px;
	margin: 10px 5px;
	padding-left: 20px;
	vertical-align: top;
	display: inline-block;
	background: url(image/folksonomy/bullet.png) no-repeat;
}

#countdown.hidden { display: none; }
#countdown { padding: 20px; text-align: center; border: 1px solid #CCC; background-color: #F9FF9F; position: relative; }
#countdown > *:nth-child(2) { margin: 25px auto; text-align: center; }
#countdown > * { display: block; width: 550px; margin: auto; }
#countdown > * > * { display: inline-block; vertical-align: bottom; }
#countdown .title > * { display: inline-block; vertical-align: bottom; }
#countdown .title p.name { font-size: 24pt; color: #7B0D0D; font-weight: bold; }
#countdown timer { }
#countdown timer .v { margin: 0 10px; font-size: 48pt; font-family: 'Quartz Regular'; }
#countdown timer .l { font-size: 20pt; font-weight: bold; color: #C9C271; }
#countdown .links a {
	margin: 0 3px;
	font-size: 18pt;
	color: #817E07;
	font-weight: bold;
	padding: 10px 20px;
	border-radius: 10px;
	vertical-align: top;
	display: inline-block;
	background-color: #DEDA63;
	box-shadow: 2px 2px #98932F;
}
#countdown .links a:hover { background-color: #898510; color: #FFFFF3; box-shadow: 2px 2px #A09C2E; }
#countdown .links a.apply { font-size: 30pt; border-radius: 10px; padding: 15px 25px;  }
#countdown .links a.apply timer .l { color: #B7B34D; }
#countdown .links a.apply timer .v { color: #9A9728; font-size: 32pt; }
#countdown .links a.apply:hover timer .v { color: #E6E5B0; }
#countdown .hint {
	color: red;
	right: 20px;
	bottom: 18px;
	width: inherit;
	font-size: 16pt;
	font-weight: bold;
	text-align: right;
	position: absolute;
}
#countdown .hint span:first-child { padding-bottom: 5px; color: #9C1526; }
#countdown .stop_time { font-size: 10pt; padding-top: 10px; }
#countdown .exam_time { font-size: 12pt; padding-top: 10px; color: #6B7112; font-weight: bold; }

/*------------------------------| popup |-------------------------*/

#popup {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0px;
	left: 0px;
	background-color: #00000099;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}
#popup>div {

}
#text-box img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 75vh;
}
#close-popup-x {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 1em;
	font-weight: bold;
}
button {
	border: 0;
	background-color: transparent;
	cursor: pointer
}
button img {
	height: 100%;
}
#go-btn, #close-popup {
	height: 80px;
}
.poster-link {
	cursor: pointer;
}

#text-box{
	max-height: 95vh;
	width: fit-content;
	max-width: 80%;
	margin: auto;
	font-size: 2em;
	text-align: center;
	color: white;
}
.checkbox-wrapper {
	display: block;
	margin-top: 15px;
	text-align: center;
}
#text-box label {
	display: inline-block;
	cursor: pointer;
	padding: 5px 10px;
}
#popup-cb{
	width: 30px;
	height: 30px;
	vertical-align: middle;
	margin-right: 10px;
}
.img-container {
	position: relative;
	display: inline-block;
}
/*------------------------------| RWD |-------------------------*/
@media screen and (min-width: 1000px) {
	#news { width: 450px; margin-left: 15px; }
	#news .news .title {
		width: 360px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	#news .news { font-size: 11pt; line-height: 16pt; }
	#stamps {
		padding: 35px;
	}
	.stamp{
		margin: 1% 2.4%;
		width: 200px;
	}
	#stamps img { width: 154px; margin: 16px;}
}
@media only screen and (min-width: 480px) and (max-width: 1000px) {
	#news { width: 94%; padding: 3%; }
	#news .news { font-size: 14pt; line-height: 20pt; }
	.stamp{
		margin: 1% 3.4%;
		width: 43%;
	}
	.stamp_title >img{
		margin-left: 50%;
		transform: translateX(-50%);
	}
	#popup {
		width: 100%;
	}
	#go-btn, #close-popup {
		height: 60px;
	}
	#text-box {
		top: 4%;
		width: 80%;
		padding: 1%;
	}
}
@media screen and (max-width: 480px){
	#news { width: 94%; padding: 3%;}
	#news .news { font-size: 10pt; line-height: 16pt; }
	.stamp{
		margin: 3% 3%;
		width: 44%;
	}
	.stamp_title >img{
		margin-left: 50%;
		transform: translateX(-50%);
	}
	#popup {
		width: 100%;
	}
	#go-btn, #close-popup {
		height: 60px;
	}
	#text-box {
		width: 90%;
		padding: 1%;
	}
	#text-box label {
		font-size: 0.8rem;
	}
}