/* -- 外部字型
--------------------------------------------------*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

/* -- Temporary Setting
--------------------------------------------------*/


/* -- Universal Setting
--------------------------------------------------*/
html {
	height: 100%;
    background: no-repeat center fixed; 
    background-size: cover;
}

body {
	font-family: Arial, "Noto Sans TC", "PingFang TC", "微軟正黑體", "Microsoft JhengHei", "細明體", MingLiU, sans-serif;
	font-weight: normal;
	min-height: 100%;
	margin: 0;
	padding: 0;
    padding-top: 60px;
    padding-bottom: 3.5em;
    font-size: 14px;
    line-height: 1.8;
    color: #221714;
    background: no-repeat center center;
	/* min-width: 1200px; */
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
    font-weight: 600;
}

img {
    width: 100%;
    height: auto;
}

p {
    margin: 0;
    padding: 0;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 2px solid #eee;
    clear: both;
}

a,
a:hover {
    text-decoration: none;
}

ul.no-style {
	list-style-type: none;
}

/* -- Common Usage
--------------------------------------------------*/
.uppercase {
    text-transform: uppercase !important;
}

.lowercase {
    text-transform: lowercase !important;
}

.capitalize {
    text-transform: capitalize !important;
}

.line-through {
    text-decoration: line-through !important;
}

.underline {
    text-decoration: underline !important;
}

.cursor-default {
    cursor: auto !important;
}

div.no-content-div-15px {
	margin: 0 !important;
	padding-bottom: 15px !important;
}

div.no-content-div-30px {
	margin: 0 !important;
	padding-bottom: 30px !important;
}

div.no-content-div-45px {
	margin: 0 !important;
	padding-bottom: 45px !important;
}

div.no-content-div-60px {
	margin: 0 !important;
	padding-bottom: 60px !important;
}

.max-width-10em,
.max-width-20em,
.max-width-30em,
.max-width-40em,
.max-width-50em,
.max-width-60em,
.max-width-70em,
.max-width-80em,
.max-width-1000px {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.max-width-10em { width: 10em !important; }
.max-width-20em { width: 20em !important; }
.max-width-30em { width: 30em !important; }
.max-width-40em { width: 40em !important; }
.max-width-50em { width: 50em !important; }
.max-width-60em { width: 60em !important; }
.max-width-70em { width: 70em !important; }
.max-width-80em { width: 80em !important; }
.max-width-1000px { width: 1000px !important; }

/* -- Color & Font
--------------------------------------------------*/
.font-meta { font-size: 5em; }
.font-h1 { font-size: 3.5em; }
.font-h2 { font-size: 3em; }
.font-h3 { font-size: 2.5em; }
.font-h4 { font-size: 1.75em; }
.font-h5 { font-size: 1.25em; }
.font-h6 { font-size: 1em; }

.font-p-lg { font-size: 1.125em; }
.font-p-md { font-size: 1em; }
.font-p-sm { font-size: 0.875em; }

.color-font-main {
    color: #e6e6e6;
}

.color-bg-main {
    background-color: #e6e6e6;
}

.color-border-main {
    border-color: #e6e6e6;
}

.color-font-white {
    color: #fff;
}

.color-bg-white {
    background-color: #fff;
}

.color-border-white {
    border-color: #fff;
}

.color-font-black {
    color: #000;
}

.color-bg-black {
    background-color: #000;
}

.color-border-black {
    border-color: #000;
}

/* -- Common Setting
--------------------------------------------------*/
.background-cover {
    background-image: url(../images/bg-main.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-color: #e6e6e6;
}

.highlight-text {
    font-size: 24px;
	line-height: 32px;
    color: #736357;
    font-weight: 600;
}

.text-center {
    text-align: center !important;
}

.text-right {
	text-align: right !important;
}

.main-wrap {
    position: relative;
}

.main-wrap .intro-wrap {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 20px;
    color: #221714;
}

.main-wrap .intro-wrap .intro-title {
	font-size: 28px;
	line-height: 40px;
	font-weight: 600;
	color: #796956;
}

.mobile-show {
    display: block !important;
}

.mobile-not-show {
    display: none !important;
}

.hide {
	display: none !important;
}

.show-block {
	display: block !important;
}

.progress {
	margin-top: 8px;
	margin-bottom: 8px;
}

/* input.lg-radio[type=radio] { 
	-webkit-transform: scale(1.8);
	-moz-transform: scale(1.8);
	-ms-transform: scale(1.8);
	-o-transform: scale(1.8);
	transform: scale(1.8);
	margin: 6px 0 0 -25px !important;
}

input.md-radio[type=radio] { 
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

input.lg-checkbox[type=checkbox] { 
	-webkit-transform: scale(1.8);
	-moz-transform: scale(1.8);
	-ms-transform: scale(1.8);
	-o-transform: scale(1.8);
	transform: scale(1.8);
	margin: 6px 0 0 -25px !important;
}

input.md-checkbox[type=checkbox] { 
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
} */
input[type=radio], input[type=checkbox] {
	cursor: pointer;
}

/* -- FontFace 
----------------------------------------*/
.entypo {
	font-family: 'entypo';
	font-size: 30px;
}

/* -- Navbar
----------------------------------------*/
.section-navi {
    display: block;
    position: relative;
    padding: 0 10px;
    z-index: 10;
}

.section-navi a {
    display: inline-block;
    position: relative;
    margin: 0 0.25em 1em;
    padding-left: 1.25em;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #000;
    text-decoration: none;
}

.section-navi a.active::before {
    background-image: url(../images/icon-list-active.png);
}

.section-navi a::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1em;
    height: 1em;
    margin: auto;
    background-image: url(../images/icon-list.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.section-wrap .main-title-word {
	margin: 15px 0;
}

.section-wrap .main-title-word h2 {
    display: inline-block;
    margin: 0 auto;
    padding: 0 15px;
    font-size: 24px;
    height: 1.5em;
    line-height: 1.5em;
}

/* -- Footer
----------------------------------------*/
footer {
    position: fixed;
    left: 0;
    bottom: 0;
	width: 100%;
    height: 3.5em;
    text-align: center;
	background-color: #e6e6e6;
    z-index: 88;
}

footer .copyright {
    font-size: 1em;
    line-height: 3.5em;
    border-top: 1px solid #5f4c3f;
}

/* -- Index
----------------------------------------*/
#fullPageHome {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 60px 0;
    overflow: hidden;
}

#fullPageHome::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(../images/bg-index-00.png);
    background-repeat: repeat-y;
    background-position: right center;
    background-size: auto auto;
    z-index: 9;
}

#fullPageHome .title-wrapper {
    position: absolute;
    top: 6.5em;
    right: 25%;
    margin: auto;
    text-align: right;
    color: #fff;
}

#fullPageHome .title-wrapper .title {
    font-size: 3.5em;
    font-weight: 600;
    line-height: normal;
}

#fullPageHome .title-wrapper .sub-title {
    font-size: 2.25em;
    font-weight: 400;
    line-height: normal;
}

#homeMainAnimation {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
}

#indexVideo {
    display: block;
    position: relative;
    top: 50%;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 8;
}

#indexPage {
	background-color: #000;
}

.index-banner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* height: 106%; */
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.index-banner::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(../images/bg-index-m-00.png), url(../images/bg-index-m-02.png);
    background-repeat: repeat-y, no-repeat;
    background-position: right center, left bottom;
    background-size: 80% auto, cover;
}

.index-banner .banner-wrap {
	position: relative;
	width: 100%;
	height: auto;
}

.index-banner .banner-wrap .banner-container {
	position: relative;
	width: 100%;
	height: auto;
}

.index-banner .banner-container .banner-img {
    position: relative;
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.index-banner .banner-container .banner-img .main-img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 90%;
    height: auto;
    margin: auto;
}

/* -- News
----------------------------------------*/
#news .main-design {
    position: relative;
    text-align: center;
    overflow: hidden;
}

#news .main-design img {
    width: 38%;
    height: auto;
}

.news-card {
    position: relative;
    max-width: 50em;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75em 0;
    font-size: 13px;
    border-top: 1px solid #000;
    overflow: hidden;
}

.news-card:first-child {
    border-top: none;
}

.news-card:not(:last-child) {
    margin-bottom: 2.5em;
}

.news-card .thumb {
    display: block;
    float: none;
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    font-size: 1em;
    overflow: hidden;
}

.news-card .thumb img {
    width: 100%;
    height: auto;
}

.news-card .title {
    display: block;
    float: none;
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 0.5em;
    font-size: 1em;
    /* border-bottom: 1px solid #221714; */
    overflow: hidden;
}

.news-card .title h3 {
    font-size: 1.5em;
    line-height: 1.25em;
    text-align: center;
    color: #998675;
    overflow: hidden;
}

.news-card .title h3:hover {
    color: #736357;
}

#news .marquee {
    position: relative;
    width: 100%;
    height: 36px;
    font-size: 18px;
    line-height: 32px;
    vertical-align: middle;
    border: 2px solid #ab0b20;
    overflow: hidden;
}

#news .marquee  div {
    float: left;
}

#countdown {
    min-width: 120px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-color: #c30d24;
}

#countdownTri {
    float: right;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 32px 32px 0 0;
    border-color: #c30d24 #fff #fff #fff;
}

#marqueeNews {
	width: calc(100% - 120px);
	max-width: calc(100% - 120px);
    padding-left: 10px;
}

#marqueeNews .content {
	font-size: 18px;
	line-height: 32px;
	vertical-align: middle;
}

#newsCarousel {
    margin-top: 20px;
    margin-bottom: 20px;
    background: url(../images/bg-main.png) no-repeat center center fixed;
    background-size: cover;
}

#newsCarousel.carousel {
    height: 0;
    max-height: 0;
    text-align: right;
    overflow: hidden;
}

#newsCarousel.carousel .carousel-inner .item .stills .still-photo,
#newsCarousel.carousel .carousel-inner .item .stills .still-title {
    overflow: hidden;
}

#newsCarousel.carousel .carousel-inner .item .stills .still-title p {
    position: absolute;
    left: 15px;
    bottom: 15px;
    max-width: 100%;
    margin: 0;
    padding-right: 20px;
    font-size: 14px;
    color: #fff;
    text-align: left;
}

#newsCarousel.carousel .carousel-inner, 
#newsCarousel.carousel .carousel-inner .item, 
#newsCarousel.carousel .carousel-inner .item .stills,
#newsCarousel.carousel .carousel-inner .item .stills .still-photo,
#newsCarousel.carousel .carousel-inner .item .stills .still-title,
#newsCarousel.carousel .carousel-inner .item .stills .still-photo img {
    height: 100%;
}

#newsCarousel.carousel .carousel-inner .item .stills .still-photo img {
    width: auto;
}

#news .latest-news {
	margin-top: 15px;
}

#news .latest-news.first-element {
	margin-top: 0;
}

#news .latest-news .each-news .wrap {
    position: relative;
    height: 0;
    max-height: 0;
    overflow: hidden;
    background: no-repeat center top;
    background-size: cover;
}

#news .latest-news .each-news .wrap .intro {
    width: 100%;
    height: 68px;
    padding: 0 10px;
    position: absolute;
    bottom: -48px;
    background-color: rgba(0,0,0,.6);
    overflow: hidden;
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
}

#news .latest-news .each-news .wrap:hover .intro {
    bottom: 0;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

#news .latest-news .each-news .wrap .intro .date {
    display: block;
    height: 20px;
    font-size: 13px;
    line-height: 20px;
    vertical-align: middle;
    color: #fff;
}

#news .latest-news .each-news .wrap .intro .title {
    display: block;
    height: 48px;
    font-size: 14px;
    line-height: 24px;
    vertical-align: middle;
    color: #fff;
}

#news .post-wrap {
	position: relative;
	width: 100%;
	height: 32px;
	line-height: 32px;
	vertical-align: middle;
}

#news .post-wrap span {
	display: inline-block;
}

#news .post-wrap .post-prev {
	float: left;
}

#news .post-wrap .post-prev a {
	font-size: 16px;
	color: #796956;
	text-decoration: none;
}

#news .post-wrap .post-prev a:hover {
	font-weight: 600;
}

#news .post-wrap .post-date {
	float: right;
}

#news .table-lecture {
	width: 60%;
	min-width: 450px;
	font-weight: 600;
}

#news .table-lecture a {
	color: #998675;
}

#news .table-lecture thead > tr > th {
    border-bottom: none;
}

#news .table-lecture thead > tr > th {
    border-bottom: #d2c2b5;
	vertical-align: middle;
}

#news .table-lecture.table-bordered td,
#news .table-lecture.table-bordered th {
    border-color: #d2c2b5;
	vertical-align: middle;
}

#news .table-lecture thead {
	background: url(../images/gold-bar.png) no-repeat center center;
	color: #fff;
}

#news .table-lecture thead tr th:first-child,
#news .table-lecture thead tr th:nth-child(2),
#news .table-lecture thead tr th:nth-child(3) {
	text-align: center;
}

#news .table-lecture tbody tr td:first-child,
#news .table-lecture tbody tr td:nth-child(2),
#news .table-lecture tbody tr td:nth-child(3),
#news .table-lecture tbody tr td:nth-child(5) {
	text-align: center;
}

#news .intro-wrap {
    padding-bottom: 2em;
}

#news .post-container {
    position: relative;
    margin: 0 auto 1.5em;
    padding: 0;
    overflow: hidden;
}

#news .post-container .post-article {
    margin-bottom: 1em;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.5em;
    text-align: center;
    color: #796956;
}

#news .post-container .post-content,
#news .post-container .post-content a {
    font-size: 1em;
    line-height: 1.5em;
    text-align: left;
    color: #333;
    word-wrap: break-word;
}

#news .post-container .post-content a:hover {
    color: #000;
}

#news .post-container .post-content.ultra-font-size,
#news .post-container .post-content.ultra-font-size a {
    font-size: 16px;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.video-wrapper > iframe,
.video-wrapper > video {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: auto;
}

/* -- Means
----------------------------------------*/
.main-wrap .means {
	display: block;
}

.main-wrap .means ~ .means {
    margin-top: 7.5vh;
}

.main-wrap .means .main-design {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.main-wrap .means .main-design .heading-name {
    margin: 0 auto 0.25em;
    font-size: 1.625em;
}

.main-wrap .means .main-design img {
    width: 40em;
    max-width: 100%;
    height: auto;
}

.main-wrap .means .means-highlight-title {
	margin: 0.5em auto;
	font-size: 1.25em;
	line-height: 1.5;
	font-weight: 600;
	color: #736357;
}

.main-wrap .means.hidden-on-mobile, .main-wrap .means.hidden-on-mobile {
	display: none;
}

.main-wrap .means h3.with-icon {
    padding-left: 1.5em;
    line-height: 29px;
    color: #221714 !important;
}

.main-wrap .means h3.with-icon::before {
	content: url(../images/icon-list.png);
	display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.main-wrap .means .mean-wrap {
	position: relative;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	/* overflow: hidden; */
	clear: both;
}

.main-wrap .means .mean-wrap h3 {
    position: relative;
    margin-bottom: 0.25em;
    color: #796956;
}

.mean-procedure .procedure-wrap {
    width: 12em;
    max-width: 100%;
    margin: auto;
}

.mean-award {
    font-size: 13px;
}

.mean-award .styled-table-title {
    content: '';
    height: 3.6em;
    font-size: 1.25em;
    line-height: 1.2em;
    background-color: #c7b299;
}

.mean-award .each-award-container {
    margin-bottom: 2em;
    padding-bottom: 0;
}

.mean-award .each-award {
    position: relative;
    top: -3.6em;
    margin-bottom: -3.6em;
    font-size: 1.25em;
    background-color: #fff;
    box-shadow: 3px 3px 5px rgba(81%,81%,81%,0.88);
    border-radius: 0.25em;
    overflow: hidden;
}

.mean-award .each-award a {
    color: #221714;
    text-decoration: underline;
}

.mean-award .each-award a:hover {
    color: #796956;
}

.mean-award .each-award .award-title-wrapper {
    display: table;
    position: relative;
    width: 100%;
    height: 3.6em;
    font-size: 1em;
    background-color: #c7b299;
    table-layout: fixed;
    overflow: hidden;
}

.mean-award .each-award .award-title-wrapper h4 {
    display: table-cell;
    height: 3.6em;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2em;
    text-align: center;
    vertical-align: middle;
}

.mean-award .each-award .award-content-wrapper {
    margin: 1em 0;
    padding: 0 1em;
    font-size: 1em;
    text-align: left;
}

.mean-award ul li {
    font-size: 1em;
}

.mean-award ul {
	padding-left: 2em;
    text-align: left;
}

/* -- Judges
----------------------------------------*/
#judge .judge-navi .each-judge {
    padding: 5px;
}

#judge .judge-navi .each-judge .wrap {
    position: relative;
    height: 0;
    max-height: 0;
    overflow: hidden;
    background: no-repeat top center;
    background-size: cover;
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity ease-out .6s;
    -moz-transition: opacity ease-out .6s;
    -ms-transition: opacity ease-out .6s;
    -o-transition: opacity ease-out .6s;
    transition: opacity ease-out .6s;
}

#judge .judge-navi .each-judge .wrap:hover {
    opacity: 0.6;
    -webkit-transition: all ease-out .6s;
    -moz-transition: all ease-out .6s;
    -ms-transition: all ease-out .6s;
    -o-transition: all ease-out .6s;
    transition: all ease-out .6s;
}

#judge .judge-navi .each-judge .wrap .tri-corner {
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 80px 80px;
    border-color: transparent transparent #998675 transparent;
}

#judge .judge-navi .each-judge .wrap .intro {
    width: 100%;
    height: 60px;
    padding: 0 10px;
    position: absolute;
    top: 10px;
    overflow: hidden;
}

#judge .judge-navi .each-judge .wrap .intro .title {
    display: block;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    vertical-align: middle;
    color: #000;
}

#judge .judge-navi .each-judge .wrap .intro .name {
    display: block;
    height: 36px;
    font-size: 28px;
    line-height: 36px;
    vertical-align: middle;
    color: #000;
}

#judge .judge-navi .each-judge .wrap .intro .title.inverse-color,
#judge .judge-navi .each-judge .wrap .intro .name.inverse-color {
    color: #fff;
}

#judge .judges {
    display: none;
    margin-top: 60px;
}

#judge .judges.active {
    display: block;
}

#judge .judges .judge-pic .judge-pic-container {
    position: relative;
    overflow: hidden;
}

#judge .judges .judge-pic .judge-pic-container::after {
    content: '';
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30%;
    padding-top: 30%; 
    background-image: url(../images/bg-triangle-brown.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#judge .judges .judge-pic-intro-wrap {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
    margin-top: 30px;
}

#judge .judges .judge-pic-intro-wrap img {
    height: 100%;
    width: auto;
    float: left;
}

#judge .judges .judge-pic-intro-wrap .judge-pic-intro {
    display: inline-block;
    height: 100%;
    margin-left: 15px;
    overflow: hidden;
}

#judge .judges .judge-pic-intro-wrap .judge-pic-intro strong {
    display: block;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    vertical-align: middle;
    color: #000;
}

#judge .judges .judge-pic-intro-wrap .judge-pic-intro h3 {
    display: block;
    height: 36px;
    font-size: 28px;
    line-height: 36px;
    vertical-align: middle;
    color: #000;
}

#judge .judges .judge-intro {
    margin-left: 0;
	margin-top: 15px;
    font-weight: 600;
}

#judge .judges .judge-intro .judge-intro-title {
    margin-bottom: 10px;
	font-size: 20px;
    height: 50px;
    line-height: 25px;
	color: #796956;
}

#judge .judges .judge-intro .judge-intro-experience {
	margin: 15px 0 10px;
	font-size: 24px;
	font-weight: 600;
    color: #796956;
}

#judge .judges .judge-intro  .experience-wrap {
	position: relative;
	margin-left: 50px;
	margin-bottom: 5px;
	text-align: justify;
}

#judge .judges .judge-intro  .experience-wrap .experience-timeline,
#judge .judges .judge-intro  .experience-wrap .experience-content {
	font-size: 15px;
	line-height: 24px;
}

#judge .judges .judge-intro  .experience-wrap .experience-timeline {
	width: 50px;
	position: absolute;
	top: 0;
	left: -50px;
}

#judge .judges .judge-intro  .experience-wrap .experience-content {
	display: block;
	width: 100%;
}

.stage {
    position: relative;
    float: left;
    width: 100%;
    height: calc(100vh - 130px);
    font-size: 13px;
    -webkit-backface-visibility: hidden;
    z-index: 8;
    overflow: hidden;
}

.cbImage {
    position: absolute;
    top: calc((100vh - 130px - 18.16vw) * 0.5);
    float: left;
    width: 12.5%;
    padding-top: 18.16%;
    color: white;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.cbImage > h5 {
    position: absolute;
    left: 0;
    bottom: -3em;
    width: 100%;
    font-size: 1em;
    line-height: 1.5em;
    text-align: center;
    color: #221714;
    cursor: default;
    pointer-events: none;
}

.inactiveLeft {
    -webkit-transform: perspective(500px) rotateY(50deg);
    -O-transform: perspective(500px) rotateY(50deg);
    transform: perspective(500px) rotateY(50deg);
    -webkit-transition: all .5s ease-out;
    -O-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.inactiveLeft > h5 {
    bottom: -5em;
    -webkit-transform: rotateY(-50deg);
    -O-transform: rotateY(-50deg);
    transform: rotateY(-50deg);
}

.inactiveRight {
    -webkit-transform: perspective(500px) rotateY(-50deg);
    -O-transform: perspective(500px) rotateY(-50deg);
    transform: perspective(500px) rotateY(-50deg);
    -webkit-transition: all .5s ease-out;
    -O-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.inactiveRight > h5 {
    bottom: -5em;
    -webkit-transform: rotateY(50deg);
    -O-transform: rotateY(50deg);
    transform: rotateY(50deg);
}

.cbImage.active {
    z-index: 88;
    -webkit-transform: perspective(500px) rotateY(0deg);
    -O-transform: perspective(500px) rotateY(0deg);
    transform: perspective(500px) rotateY(0deg);
    -webkit-transition: all .5s ease-out;
    -O-transition: all .5s ease-out;
    transition: all .5s ease-out;
    transform: scale(1.38);
}

.cbImage .each-judge {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #000;
    opacity: 0;
}

.cbImage .each-judge h5 {
    position: relative;
    top: 50%;
    font-size: 1em;
    line-height: 1.5em;
    text-align: center;
}

.cbImage.active .each-judge {
    display: block;
    -webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.cbImage.active .each-judge:hover {
    opacity: 0.68;
    -webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
    cursor: pointer;
}

/* -- Seminar
----------------------------------------*/
.main-wrap .seminar-signup-wrap {
	margin-top: 15px;
	font-size: 16px;
	color: #998675;
}

.main-wrap .seminar-signup-wrap:not(:last-child) {
	border-right: 1px solid #d2c2b5;
}

.main-wrap .signup-info {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 32px;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	background-color: #998675;
}

/* -- Join Form
----------------------------------------*/
#joinForm {
	margin-top: 30px;
    color: #221714
}

#joinForm .join-step-wrap {
    display: none;
    position: relative;
    width: 100%;
    height: auto;
}

#joinForm .join-step-wrap.active {
    display: block;
}

#joinForm .btn-upload-file {
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.38;
}

#joinForm .btn-upload-file.active {
	cursor: pointer;
	pointer-events: auto;
	opacity: 1;
}

#joinForm .join-step-wrap .step-btn,
#joinForm .btn-upload-file,
#joinForm .form-styled-btn {
    display: inline-block;
    margin-left: 0.5em;
    margin-bottom: 1em;
    padding: 0.35em 1.8em;
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.5em;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color: #fff;
    border: none;
    border-radius: 0.45em;
    background-color: #5f4c3e;
    box-shadow: 2px 2px 5px #221714;
    cursor: pointer;
}

#joinForm .join-step-wrap .step-btn {
    margin-left: 0;
}

#joinForm .join-step-wrap .step-btn ~ .step-btn {
    margin-left: 0.5em;
}

#joinForm .btn-upload-file,
#joinForm .form-styled-btn {
    padding-left: 0.8em;
    padding-right: 0.8em;
    font-size: 1em;
}

#joinForm .form-styled-btn[disabled] {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

#joinForm .form-styled-btn.cancel {
    background-color: #c30d24;
}

#joinForm .form-styled-btn.cancel:hover {
    opacity: 0.8;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#joinForm .form-styled-btn.fileinput-button {
    color: #221714;
    background-color: #c5b898;
}

#joinForm .form-styled-btn.fileinput-button:hover {
    color: #fff;
    background-color: #796956;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#joinForm .join-step-wrap .step-btn:hover,
#joinForm .btn-upload-file:hover,
#joinForm .form-styled-btn:hover {
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
    background-color: #221714;
}

#joinForm .join-step-wrap .join-block {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 2px solid #bea997;
    clear: both;
}

#joinForm .control-label {
    padding-top: 0;
    padding-bottom: 0;
	padding-right: 0;
	font-size: 13px;
    line-height: 34px;
	text-align: left;
}

#joinForm .highlight-text-color {
    color: #5f4c3e;
	font-size: 16px;
    font-weight: 600;
}

#joinForm .join-stills .upload-photo-wrap {
    position: relative;
	display: inline-block;
    width: 100%;
    height: auto;
}

#joinForm .join-stills .upload-photo-wrap .film-still {
    position: relative;
    display: inline-block;
	float: left;
    width: 20%;
    height: auto;
    margin-bottom: 20px;
}

#joinForm .join-stills .upload-photo-wrap .film-still .film-still-upload {
    position: relative;
	width: 100%;
	height: auto;
    margin: 0 auto;
    padding-top: 56.25%;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
}

#joinForm .join-stills .upload-photo-wrap .film-still .film-still-upload::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    border: 1px solid #5f4c3e;
    border-radius: 6px;
    z-index: 0;
}

#joinForm .join-stills .upload-photo-wrap .film-still .film-still-upload > img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin: auto;
    z-index: 1;
}

#joinForm .join-stills .upload-photo-wrap .film-still .file-name {
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 100%;
    height: 20px;
	padding: 0 6px;
    font-size: 12px;
    line-height: 20px;
    vertical-align: middle;
    word-break: break-all;
    color: #c30d24;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
	overflow: hidden;
}

#joinForm .join-stills .upload-photo-wrap .film-still > input {
    display: none;
}

#joinForm .join-stills .upload-photo-wrap .film-still .add-new-film-still {
    position: absolute;
    right: -30px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    bottom: 40px;
}

#joinForm .join-stills .upload-photo-wrap .film-still:not(:last-child) .add-new-film-still {
    display: none;
}

#joinForm .join-stills .upload-photo-wrap .film-still .progress {
    margin-bottom: 0;
}

#joinForm .join-member .form-group .add-new-member,
#joinForm .join-teacher .form-group .add-new-teacher {
    position: absolute;
    top: 7px;
    right: -35px;
    cursor: pointer;
    z-index: 8;
}

#joinForm .join-member .form-group .add-new-member img,
#joinForm .join-teacher .form-group .add-new-teacher img,
#joinForm .join-member .form-group .delete-new-member img,
#joinForm .join-teacher .form-group .delete-new-teacher img {
    display: block;
    width: 20px;
}

#joinForm .join-member .form-group .delete-new-member,
#joinForm .join-teacher .form-group .delete-new-teacher {
    position: absolute;
    top: 37px;
    right: -35px;
    cursor: pointer;
    z-index: 8;
}

#joinForm .join-member .form-group .add-new-member:hover,
#joinForm .join-member .form-group .delete-new-member:hover,
#joinForm .join-teacher .form-group .add-new-teacher:hover,
#joinForm .join-teacher .form-group .delete-new-teacher:hover {
    opacity: 0.68;
}

#joinForm .join-step-wrap .join-step {
	font-size: 20px;
	color: #5f4c3e;
	margin-bottom: 1.5em;
}

#joinForm .join-step-title {
	display: block;
	font-size: 1.5em;
	font-weight: 600;
    line-height: 1;
	color: #5f4c3e;
}

#joinForm .join-note {
    padding: 0 15px;
    font-size: 18px;
    font-weight: 600;
	line-height: 34px;
}

#joinForm .label-note {
	font-size: 12px;
	color: #bea997;
    text-decoration: underline;
}

#joinForm .label-note:hover {
	opacity: 0.68;
}

#joinForm .film-style-title {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #998675;
}

#joinForm .film-style-title + div.checkbox-inline {
    /* margin-left: 10px; */
}

#joinForm .join-step-description {
    font-size: 14px;
}

#joinForm .join-step-description .descript-title,
#joinForm .join-step-description .descript-content {
}

#joinForm .join-step-description .descript-content {
}

#joinForm .radio-inline, #joinForm .checkbox-inline {
	margin-left: 0;
	margin-right: 10px;
}

/* form label.error,
#joinForm label.error,
#filmType-error {
	color: #c30d24;
	display: inline-block;
	padding: 3px 3px;
	font-size: 12px;
	line-height: 1;
	width: auto !important;
} */

/* form .error-message,
#joinForm .error-message, */
#joinForm .upload-file-name {
	margin-top: 3px;
	width: auto;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
}

#joinForm .upload-file-name {
	color: #c30d24;
}

#joinForm .join-success-word {
	font-size: 20px;
	line-height: 36px;
	font-weight: 600;
	text-align: center;
	margin: 8% auto 0;
}

#joinFormPreview.focused {
	background-color: #286090 !important;
    border-color: #204d74 !important;
}

#joinFormSubmit,
#joinFormSurveySubmit {
    display: inline-block;
    margin-left: 0.5em;
    margin-bottom: 1em;
    padding: 0.6em 1.8em;
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1em;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color: #fff;
    border: none;
    border-radius: 0.45em;
    background-color: #221714;
    box-shadow: 2px 2px 5px #221714;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#joinFormSubmit:hover,
#joinFormSurveySubmit:hover {
    background-color: #796956;
}

#joinFormSubmit:focus,
#joinFormSurveySubmit:focus {
    box-shadow: 2px 2px 5px transparent;
    outline: none;
}

#joinFormSubmit.disabled,
#joinFormSurveySubmit.disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.18;
}

#joinFormPrintPDF {
    display: inline-block;
    margin-left: 0.5em;
    margin-bottom: 1em;
    padding: 0.6em 1.8em;
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1em;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color: #221714;
    border: none;
    border-radius: 0.45em;
    background-color: #c5b898;
    box-shadow: 2px 2px 5px #796956;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#joinFormPrintPDF:hover {
    color: #fff;
    background-color: #796956;
}

#joinFormPrintPDF:focus {
    box-shadow: 2px 2px 5px transparent;
    outline: none;
}

#joinFormSubmit:hover {
    opacity: 1;
}

#joinFormSaved {
    font-size: 13px;
}

#joinFormSaved .form-content {
    padding-top: 30px;
}

#joinFormSaved .form-content-wrap {
    background-color: #fff;
}

#joinFormSaved .content-block  {
    padding-top: 15px;
    text-align: center;
    border-top: 2px solid #bea997;
    border-left: 2px solid #bea997;
    border-right: 2px solid #bea997;
}

#joinFormSaved .content-block:last-child  {
    border-bottom: 2px solid #bea997;
}

#joinFormSaved .content-block h3 {
    display: inline-block;
    width: auto;
    margin: 0 auto 10px;
    padding: 0 3px 3px;
    border-bottom: 2px solid #bea997;
    color: #796956;
}

#joinFormSaved .content-block-wrap {
    width: -webkit-calc(100% - 15px * 2);
    width: -moz-calc(100% - 15px * 2);
    width: calc(100% - 15px * 2);
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 20px;
    word-break: break-all;
}

#joinFormSaved .content-block .content-block-wrap:not(:last-child) {
    border-bottom: 2px solid #bea997;
}

#joinFormSaved .content-block-wrap h4 {
    display: inline-block;
    width: auto;
    margin: 0 auto 10px;
    color: #221714;
}

#joinFormSaved .content-block-wrap h4 ~ h4 {
    margin-top: 20px;
}

#joinFormSaved .content-block-wrap .item {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

#joinFormSaved .content-block-wrap .item span {
    position: relative;
    display: inline-block;
}

#joinFormSaved .content-block-wrap .item span.item-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 7.5em;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.5;
    text-align: right;
}

#joinFormSaved .content-block-wrap .item span.item-content {
    display: block;
    position: relative;
    width: auto;
    margin-left: 7.5em;
    padding-left: 0.5em;
    font-size: 1em;
    line-height: 1.5;
    text-align: justify;
    word-break: break-word;
}

#joinFormSaved .content-block-wrap .item span.item-content.picURL img {
	display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

#submitPreview .modal-dialog {
    width: 700px;
    max-width: 90%;
    margin-top: 90px;
}

#submitPreview .preview-item-wrap {
    
}

#submitPreview .preview-item-title {
    display: inline-block;
	margin-right: 8px;
	font-size: 15px;
	font-weight: 600;;
}

#submitPreview .preview-item-content {
    display: inline-block;
	font-size: 13px;
}

.join-success-container {
    position: relative;
    padding: 5vh 5vw;
    font-size: 14px;
    border: 2px solid #5f4c3f;
    overflow: hidden;
}

.join-success-container .join-success-title {
    font-size: 2em;
    font-weight: 600;
    line-height: 1em;
    color: #5f4c3e;
}

.join-success-container .join-success-word {
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.8;
    color: #221714;
}

#suggestion {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0 0.5em;
    line-height: 1.5em;
    background: none;
    box-shadow: none;
    outline: none;
    border: none;
    border-bottom: 1px solid #221714;
    border-radius: 0;
    resize: none;
}

.progress-bar-success {
    background-color: #998675;
}

/* #otherTheme {
	display: inline-block;
	width: 60%;
	margin-left: 5px;
}
*/
 
#joinStepsPic {
    display: block;
    width: 36em;
    height: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
 
/* -- Top 100
----------------------------------------*/
#top100 .main-site-login {
	margin-bottom: 15px;
	text-align: center;
}

#top100 .vote-submit {
	position: relative;
	display: inline-block;
	float: none;
	margin-top: 0;
	margin-bottom: 15px;
	text-align: center;
}

#top100 .vote-procedure {
	text-align: left;
}

#top100 .step-circle {
	display: inline-block;
    width: 20px;
    height: 20px;
	line-height: 20px;
    margin: 0 5px;
	text-align: center;
    color: #fff;
    background-color: #998675;
    border-radius: 10px;
}

#top100 .works-wrap {
	position: relative;
	width: 100%;
	height: 300px;
	margin-top: 15px;
	padding: 3px 3px 3px 4px;
	background-color: #efefef;
	box-shadow: 3px 3px 2px #ccc;
}

/* #top100 .works-wrap .works-pic {
	display: block;
	background: url() no-repeat center center;
	background-size: cover;
	width: 100%;
	height: 50%;
	overflow: hidden;
} */

#top100 .works-wrap .works-film {
	display: block;
	width: 100%;
	height: 50%;
	overflow: hidden;
}

#top100 .works-wrap .works-content {
	position: relative;
	width: calc(100% - 10px);
	height: calc(50% - 3px);
	margin: 3px 5px 0;
	font-size: 15px;
	overflow: hidden;
}

#top100 .works-wrap .works-content .works-intro {
	position: relative;
	width: 100%;
	height: calc(100% - 51px);
	overflow: hidden;
}

#top100 .works-wrap .works-content .works-intro .works-id {
	font-size: 12px;
	line-height: 18px;
}

#top100 .works-wrap .works-content .works-intro .works-slogan {
	font-size: 14px;
	line-height: 20px;
}

#top100 .works-wrap .works-content .works-intro .works-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

#top100 .works-wrap .works-content .works-vote {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 51px;
	overflow: hidden;
}

#top100 .works-wrap .works-content .works-vote .works-vote-result {
	position: relative;
	width: 100%;
	height: auto;
	margin-bottom: 3px;
}

#top100 .works-wrap .works-content .works-vote .works-vote-result .works-vote-title {
	font-size: 13px;
	line-height: 21px;
}

#top100 .works-wrap .works-content .works-vote .works-vote-result .works-vote-number {
	font-size: 14px;
	font-weight: 600;
	color: #c30d24;
	line-height: 21px;
}

#top100 .works-wrap .works-content .works-vote .works-vote-btn {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background-color: #998675;
	border-radius: 5px;
	border: 1px solid transparent;
}

#top100 .works-wrap .works-content .works-vote-btn:hover {
    color: #998675;
	background-color: #fff;
	border: 1px solid #998675;
}

#top100 .works-wrap .works-content .works-vote-btn.selected,
#top100 .works-wrap .works-content .works-vote-btn.selected:hover {
    color: #fff;
	background-color: #cb4628;
    border: 1px solid transparent;
}

#votingModal  {
	
}

#votingModal .modal-dialog {
	width: 96%;
	margin: 10% auto 0;
}

#votingModal .modal-dialog .modal-content {
	
}

#votingModal .modal-dialog .modal-content .modal-header {
	padding-left: 15px;
	padding-right: 15px;
}

#votingModal .modal-dialog .modal-content .modal-header h3 {
	font-size: 18px;
	line-height: 1.5em;
}

#votingModal .modal-dialog .modal-content .modal-body {
	padding-left: 10px;
	padding-right: 10px;
}

#votingModal .modal-dialog .modal-content .modal-body .warning-wrap .warning-words {
	font-size: 13px;
	line-height: 20px;
	color: #383838;
}

#votingForm {
	position: relative;
	padding: 15px 0;
}

#votingForm .form-group.input-wrap {
	display: inline-block;
	float: left;
	width: calc(50% - 10px);
	margin: 0 5px;
}

#votingForm .form-btn-group {
	position: relative;
	width: calc(100% - 10px);
	height: auto;
	margin: 0 5px;
	clear: both;
}

#votingForm label.error {
	color: #e4007f;
	display: inline-block;
	padding: 3px 3px;
	font-size: 12px;
	line-height: 1;
	width: auto !important;
}

#votingForm .error-message {
	margin-top: 3px;
	width: auto;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
}

#fbLogin {
    display: none;
    padding: 6px 10px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #222;
    text-decoration: none;
    z-index: 99;
    opacity: 1;
}

#fbLogin.logged {
    display: inline-block;
    color: #fff;
    background-color: #cb4628;
}

#fbLogin.unlogged {
    display: inline-block;
    color: #fff;
    background-color: #3b5998;
}

#fbLogin:hover,
#submitBtn:hover {
    opacity: 0.8;
}

#submitBtn {
    display: inline-block;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-color: #cb4628;
	border: none;
    border-radius: 8px;
    box-shadow: 1px 1px 2px #222;
    text-decoration: none;
    z-index: 99;
    opacity: 1;
}

#recaptcha {
    position: relative;
	min-width: 304px;
    margin-bottom: 15px;
    clear: both;
	transform: scale(0.8);
}

#top100 .works-wrap .works-content .works-vote-btn,
#top100 .works-wrap .works-content .works-vote-btn:hover,
#fbLogin, #fbLogin:hover,
#submitBtn, #submitBtn:hover {
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
 
/* -- Seminar Signup
----------------------------------------*/
#seminarSignup .main-wrap .seminar-signup-title {
	font-size: 30px;
	line-height: 33px;
	margin: 15px 0;
	text-align: center;
}

#seminarSignup .main-wrap .seminar-signup-options {
	margin-top: -16px;
	padding-left: 15px;
	overflow: hidden;
}

#seminarSignup .main-wrap .seminar-signup-options:after {
	content: '';
	width: 100%;
	display: inline-block;
}

#seminarSignup .main-wrap .seminar-signup-options .option {
	margin-bottom: -8888px;
	padding-bottom: 8888px;
	top: 16px;
}

#seminarSignup .main-wrap .seminar-signup-options .option label {
	font-size: 16px;
	color: #998675;
}

#seminarSignup .main-wrap label {
	font-size: 16px;
	color: #585858;
}

#seminarSignup .main-wrap .seminar-signup-form .control-label.label-how {
	text-align: left;
}

#seminarSignup .radio-inline, #seminarSignup .checkbox-inline {
	margin-left: 0;
	margin-right: 10px;
}

#seminarSignup .others {
	vertical-align: bottom;
}

#seminar-signup-confirm {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#other-education,
#other-career,
#other-method {
	display: inline-block;
	width: 60%;
	margin-left: 5px;
}

#other-method {
    background: none;
    box-shadow: none;
    outline: none;
    border: none;
    border-bottom: 1px solid #221714;
    border-radius: 0;
}

#seminarSignup .text-answer {
	font-size: 16px;
	margin-left: 3px;
}

#seminarSignup #name {
	margin-bottom: 15px;
}

#seminar-signup-form label[for="optradio-age"] ~ .input-wrap label {
	width: 68px;
}

#seminar-signup-form label.error {
	color: #e4007f;
	display: inline-block;
	padding: 3px 3px;
	font-size: 12px;
	line-height: 1;
	width: auto !important;
}

#seminar-signup-form .error-message {
	margin-top: 3px;
	width: auto;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
}

/* -- Contact
----------------------------------------*/
.main-wrap .contact-wrap p {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
}

.main-wrap .sponsor-wrap {
    /* position: absolute; */
    bottom: 0;
    padding: 15px;
    border-top: 1px solid #ccc;
}

.main-wrap .contact-wrap > .wrapper ~ .wrapper {
    margin-top: 5vh;
}

.main-wrap .contact-wrap .contact-title {
    color: #fff;
}

.main-wrap .contact-wrap .contact-phone, .main-wrap .contact-wrap .contact-email {
    background-color: #fff;
    box-shadow: 3px 3px 5px rgba(81%,81%,81%,0.88);
}

.main-wrap .contact-wrap .contact-phone h3, .main-wrap .contact-wrap .contact-email h3 {
	font-size: 28px;
    font-weight: 500;
    line-height: 1.5;
    background-color: #5f4c3f;
}

.main-wrap .contact-wrap .contact-phone h4, .main-wrap .contact-wrap .contact-email h4 {
	font-size: 1.5em;
    font-weight: 500;
    line-height: 1.5;
    color: #c7b299;
}

.styled-btn-1 {
    display: inline-block;
    padding: 0.25em 0.75em;
    font-size: 1.25em;
    font-weight: 600;
    line-height: normal;
    color: #fff;
    background-color: #998675;
    border-radius: 0.25em;
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
}

.styled-btn-1:hover {
    color: #fff;
    background-color: #5f4c3f;
    text-decoration: none;
    box-shadow: 2px 2px 5px #221714;
}

.styled-btn-1:focus {
    color: #fff;
    text-decoration: none;
    box-shadow: none;
    outline: none;
}

ul.styled-nav-1 {
    display: none;
    position: absolute;
    left: -2em;
    right: -2em;
    top: 100%;
    margin: auto;
    padding: 1.5em;
    list-style: none;
    text-align: center;
    background: -webkit-linear-gradient(to right, #36373b 75%, transparent);
    background: -moz-linear-gradient(to right, #36373b 75%, transparent);
    background: -ms-linear-gradient(to right, #36373b 75%, transparent);
    background: -o-linear-gradient(to right, #36373b 75%, transparent);
    background: linear-gradient(to right, #36373b 75%, transparent);
    overflow: hidden;
}

ul.styled-nav-1 > li {
    display: inline-block;
    vertical-align: bottom;
}

ul.styled-nav-1 > li ~ li {
    padding-top: 1.5em;
}

ul.styled-nav-1 > li > a {
    display: block;
    position: relative;
    padding-left: 1.25em;
    font-size: 1.25em;
    line-height: normal;
    color: #fff;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

ul.styled-nav-1 > li > a:hover,
ul.styled-nav-1 > li.active > a {
    color: #888;
}

ul.styled-nav-1 > li > a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 0.5em 0.6em 0.5em 0;
    border-color: transparent #fff transparent transparent;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

ul.styled-nav-1 > li > a:hover::before,
ul.styled-nav-1 > li.active > a::before {
    content: '';
    left: -0.25em;
    border-color: transparent #888 transparent transparent;
}

/* -- Bootstrap
----------------------------------------*/
.btn-success {
    background-color: #5f4c3e;
    border: none;
    box-shadow: 2px 2px 5px #221714;
}

.btn-success:hover {
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
    background-color: #221714;
}

@media screen and (orientation: portrait) {
    #fullPageHome {
        display: none;
    }
    
    #sectionIndex {
        display: none;
    }

    #sectionIndexM {
        display: block;
    }
    
    .portrait-img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .landscape-img {
        display: none;
        margin-left: auto;
        margin-right: auto;
    }
    
    @media screen and (max-width: 767px) {}
}

@media screen and (orientation: landscape) {
    #fullPageHome {
        display: block;
    }
    
    #sectionIndex {
        display: block;
    }

    #sectionIndexM {
        display: none;
    }
    
    .portrait-img {
        display: none;
        margin-left: auto;
        margin-right: auto;
    }
    
    .landscape-img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    @media screen and (max-width: 991px) {
        #fullPageHome {
            display: none;
        }
        
        #sectionIndex {
            display: block !important;
        }
        
        #sectionIndex * {
            display: none !important;
        }
        
        #sectionIndex::before {
            top: 64px;
            bottom: 4em;
            background-image: url(../images/banner-pc-01.png);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
        }
    }
    
    @media screen and (max-width: 767px) {
        #sectionIndex::before {
            top: 56px;
            bottom: 0;
        }
    }
}

@media screen and (min-width: 768px) {
	/* -- Universal Setting
	--------------------------------------------------*/
    body {
        padding-bottom: 4em;
        font-size: 14px;
    }
    
    p {
        font-size: 15px;
    }
    
    li {
        font-size: 13px;
    }
	
	/* -- Common Setting
	--------------------------------------------------*/
	.highlight-text {
		font-size: 18px;
		line-height: 28px;
	}
    
    /* -- Customized Style
    --------------------------------------------------*/
    .content-text {
        font-size: 16px;
    }
    
    .content-text p {
        font-size: inherit;
        line-height: 1.8;
    }
    
    .mobile-show {
        display: none !important;
    }
    
    .mobile-not-show {
        display: block !important;
    }
	
	.section-wrap {
		position: relative;
		height: auto;
	}
	
	.section-wrap .main-title {
		/* margin-bottom: 30px; */
	}
	
	.section-wrap .main-cover-image {
		margin-bottom: 50px;
	}
	
	.section-wrap .main-title-word {
		width: 100%;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	
	.section-wrap .main-title-word h2 {
		font-size: 28px;
	}
	
	.section-navi a {
        margin: 0 0.25em;
		font-size: 24px;
	}
    
    .section-navi a.active::before, .section-navi a:hover::before {
		background-image: url(../images/icon-list-active.png);
	}
	
	.main-wrap {
		position: relative;
		z-index: 9;
	}
    
    /* -- Footer
    ----------------------------------------*/
    footer {
        height: 4em;
        background-color: #fff;
    }

    footer .sponsor-container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: 1.75em;
        margin: auto;
    }

    footer .sponsor-container > .wrapper {
        display: inline-block;
        position: relative;
        height: 100%;
        vertical-align: bottom;
        overflow: hidden;
    }

    footer .sponsor-container img.sponsor-logo {
        float: left;
        width: auto;
        height: 100%;
        margin: 0 0.5em;
    }
    
	/* -- Index
	----------------------------------------*/
    #fullPageHome {
        padding: 64px 0 56px;
    }

	#indexPage {
		background: url(../images/bg-index.png) no-repeat center center;
		background-size: cover;
		background-color: #000;
	}
    
    .index-banner {
        height: 100%;
    }
    
    .index-banner::before {
        background-image: url(../images/bg-index-00.png), url(../images/bg-index-01.png);
        background-repeat: repeat-y, no-repeat;
        background-position: right center, left center;
        background-size: auto auto, cover;
    }
    
    .index-banner .banner-wrap {
        top: 64px;
    }
    
    .index-banner .banner-container .banner-img {
        position: relative;
        width: 100%;
        height: -webkit-calc(100vh - 64px - 4em);
        height: -moz-calc(100vh - 64px - 4em);
        height: calc(100vh - 64px - 4em);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        overflow: hidden;
    }
    
    .index-banner .banner-container .banner-img .main-img {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 66.67%;
        height: auto;
    }
    
	/* -- News
	----------------------------------------*/
    .news-card {
        font-size: 12px;
    }
    
    .news-card:not(:last-child) {
        margin-bottom: 0;
    }
    
    .news-card .thumb {
        display: inline-block;
        float: left;
        width: 16em;
        height: 9em;
    }

    .news-card .thumb img {
        width: auto;
        height: 100%;
    }

    .news-card .title {
        display: inline-block;
        float: left;
        width: -webkit-calc(100% - 16em);
        width: -moz-calc(100% - 16em);
        width: calc(100% - 16em);
        height: 9em;
        padding-left: 3.5em;
        padding-top: 1.5em;
        padding-bottom: 1.5em;
        border: none;
    }
    
    .news-card .title h3 {
        max-height: 3.75em;
        font-size: 1.6em;
        line-height: 1.25em;
        text-align: left;
    }
    
    /* .news-card:not(:last-child) .title {
        border-bottom: 1px solid #221714;
    } */
    
	#marqueeNews .content {
		font-size: 12px;
	}
    
    #news .post-container {
        margin: 1.5em auto;
    }
    
    #news .post-container .post-article {
        font-size: 2em;
        line-height: 1.2em;
        text-align: center;
    }
    
    #news .post-container .post-content {
        text-align: justify;
    }
    
    #news .post-container .post-content.ultra-font-size {
        font-size: 1.75em;
    }
	
	/* -- Means
	----------------------------------------*/
	.main-wrap .means {
		display: none;
	}
	
	.main-wrap .means.active {
		display: block;
	}
    
    .main-wrap .means ~ .means {
        margin-top: 0;
    }
	
	.main-wrap .means .means-highlight-title {
		font-size: 28px;
		line-height: 40px;
	}
	
	.mean-procedure .procedure-wrap {
        width: 36em;
        max-width: 90%;
        margin: auto;
	}
	
	.main-wrap .means .procedure-word {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 30%;
		color: #998675;
		overflow: hidden;
	}
	
	.main-wrap .means .procedure-word h4 {
		font-size: 24px;
		font-weight: 600;
	}
	
	.main-wrap .means .procedure-word p {
		font-size: 16px;
	}
    
    .mean-award {
        font-size: 12px;
    }
    
    .mean-award .each-award-container {
        margin-bottom: -88888px;
        padding-bottom: 88888px;
        background-color: #ececec;
        border-right: 1px solid #fff;
    }
    
    .mean-award .each-award {
        box-shadow: none;
        border-radius: 0;
        background: none;
    }
    
    .mean-award .each-award .award-title-wrapper {
        background: none;
    }
    
    .mean-award .each-award .award-content-wrapper {
        margin: 1em 0 1em 0.5em;
        padding: 0;
        font-size: 0.8em;
        text-align: left;
    }

    .mean-award ul {
        text-align: left;
    }
	
	/* -- Seminar
	----------------------------------------*/
	.main-wrap .seminar-signup-wrap {
		font-size: 14px;
	}
    
    .main-wrap .intro-wrap {
        margin-top: 0;
    }
	
	/* -- Join Form
	----------------------------------------*/
	#joinForm .join-note {
		font-size: 15px;
	}
    
    #joinFormSaved {
        font-size: 14px;
    }

    #joinFormSaved .content-block h3 {
        margin: 0 auto 15px;
    }

    #joinFormSaved .content-block-wrap {
        width: 85%;
        margin-left: 7.5%;
        margin-right: 7.5%;
        margin-bottom: 15px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 30px;
        word-break: break-all;
    }

    #joinFormSaved .content-block-wrap h4 {
        display: inline-block;
        width: auto;
        margin: 0 auto 15px;
        color: #221714;
    }

    #joinFormSaved .content-block-wrap h4 ~ h4 {
        margin-top: 30px;
    }

    #joinFormSaved .content-block-wrap .item {
        margin-top: 15px;
    }

    #joinFormSaved .content-block-wrap .item span.item-title {
        width: 8em;
        font-size: 1.25em;
        line-height: 1.4;
    }

    #joinFormSaved .content-block-wrap .item span.item-content {
        margin-left: 10em;
        padding-top: 0.125em;
        padding-left: 2em;
        font-size: 1em;
        line-height: 1.5;
    }

    #submitPreview .preview-item-wrap {
        
    }

    #submitPreview .preview-item-title {
        display: inline-block;
        margin-right: 8px;
        font-size: 15px;
        font-weight: 600;;
    }

    #submitPreview .preview-item-content {
        display: inline-block;
        font-size: 13px;
    }
    
    .join-success-container {
        font-size: 16px;
    }
	
	/* -- Top 100
	----------------------------------------*/
	#top100 .main-site-login {
		margin-bottom: 15px;
		text-align: left;
	}
	
	#top100 .vote-submit {
		float: right;
		margin: -60px 15px 0 0;
	}
	
	#top100 .vote-procedure {
		text-align: center;
	}
	
	#votingForm {
		padding: 15px 10px;
	}
	
	#votingModal .modal-dialog {
		width: 75%;
		max-width: 700px;
		margin: 120px auto 0;
	}

	#votingModal .modal-dialog .modal-content .modal-header h3 {
		font-size: 24px;
	}
	
	#votingModal .modal-dialog .modal-content .modal-body {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	#recaptcha {
		margin-left: 0;
		float: right;
		transform: initial;
	}
	
	/* -- Seminar Signup
	----------------------------------------*/
	#seminarSignup .main-wrap .seminar-signup-title {
		font-size: 28px;
		line-height: 36px;
		font-weight: normal;
		margin: 0 0 30px 0;
	}
	
	#seminarSignup .main-wrap .seminar-signup-options {
		text-align: center;
	}

	#seminarSignup .main-wrap .seminar-signup-options .option label {
		text-align: left;
	}

	#seminarSignup .main-wrap .seminar-signup-options .option:not(:last-child) {
		border-right: 2px solid #bea997;
	}
	
	#seminarSignup .main-wrap .seminar-signup-options .option:nth-child(2) {
		text-align: right;
	}
	
	#seminarSignup .main-wrap .seminar-signup-options .option:nth-child(4) {
		text-align: left;
	}
	
	#seminar-signup-confirm {
		float: right;
	}
	
	#seminarSignup #name {
		margin-bottom: 0;
	}
	
    /* -- Judges
    ----------------------------------------*/
	#judge .judges .judge-intro {
		margin-left: 35px;
		margin-top: 0;
	}
    
    .stage {
        font-size: 12px;
    }
        
    /* -- Contact
    ----------------------------------------*/
    .main-wrap .contact-wrap p {
        margin: 15px 0;
        font-size: 24px;
        line-height: 1.8;
    }

    .main-wrap .contact-wrap .contact-phone, .main-wrap .contact-wrap .contact-email {
        box-shadow: 4px 4px 6px rgba(81%,81%,81%,0.88);
    }

    .main-wrap .contact-wrap .contact-phone h3, .main-wrap .contact-wrap .contact-email h3 {
        font-size: 32px;
    }
}

@media screen and (min-width: 992px) {
    /* -- Universal Setting
    --------------------------------------------------*/
    body {
        font-size: 14px;
    }
    
	li {
        font-size: 15px;
    }
    
    .section-wrap .main-title-word h2 {
		font-size: 28px;
	}
    
    /* -- Customized Style
    --------------------------------------------------*/
    .section-navi a {
        margin: 0 0.375em;
		font-size: 24px;
	}
    
    /* -- Footer
    ----------------------------------------*/
    footer .sponsor-container {
        height: 2em;
    }

    footer .sponsor-container img.sponsor-logo {
        margin: 0 1em;
    }
    
    /* -- Index
    ----------------------------------------*/
    #fullPageHome {
        padding: 60px 0 56px;
    }
    
    .index-banner .banner-wrap {
        top: 60px;
    }
    
    .index-banner .banner-container .banner-img {
        height: -webkit-calc(100vh - 60px - 4em);
        height: -moz-calc(100vh - 60px - 4em);
        height: calc(100vh - 60px - 4em);
    }
    
    .index-banner .banner-container .banner-img .main-img {
        width: auto;
        height: 100%;
    }
	
	/* -- News
	----------------------------------------*/
    .news-card {
        font-size: 12px;
    }
    
	#marqueeNews .content {
		font-size: 12px;
	}
	
	#newsCarousel.carousel .carousel-inner .item .stills .still-title p {
		font-size: 15px;
	}
	
	#news .latest-news .each-news .wrap .intro .date {
		font-size: 14px;
	}

	#news .latest-news .each-news .wrap .intro .title {
		font-size: 15px;
	}
    
    /* -- Means
	----------------------------------------*/
    .mean-award {
        font-size: 12px;
    }
    
    /* -- Judges
	----------------------------------------*/
    .stage {
        font-size: 12px;
    }
	
	/* -- Join Form
	----------------------------------------*/
    #joinFormSaved {
        font-size: 14px;
    }
    
    .join-success-container {
        font-size: 14px;
    }
}

@media screen and (min-width: 1200px) {
    /* -- Universal Setting
    --------------------------------------------------*/
    body {
        font-size: 15px;
    }
    
    /* -- Index
    ----------------------------------------*/
    #fullPageHome {
        padding: 60px 0;
    }
    
	/* -- News
	----------------------------------------*/
    .news-card {
        font-size: 13px;
    }
    
	#marqueeNews .content {
		font-size: 14px;
	}
    
    .section-wrap .main-title-word h2 {
		font-size: 32px;
	}
    
    /* -- Means
	----------------------------------------*/
    .mean-award {
        font-size: 12px;
    }
    
    /* -- Judges
	----------------------------------------*/
    .stage {
        font-size: 13px;
    }
	
	/* -- Join Form
	----------------------------------------*/
	#joinForm .control-label {
		/* font-size: 13px; */
	}
	
	#joinForm .highlight-text-color {
		/* font-size: 15px; */
	}
	
	#joinForm .label-note {
		font-size: 12px;
	}
	
	#joinForm .join-note {
		font-size: 18px;
	}

    #joinFormSaved {
        font-size: 15px;
    }
    
    .join-success-container {
        font-size: 15px;
    }
}

@media screen and (min-width: 1600px) {
    /* -- Universal Setting
    --------------------------------------------------*/
    body {
        font-size: 16px;
    }
    
    /* -- Index
    ----------------------------------------*/
    .section-wrap .main-title-word h2 {
		font-size: 40px;
	}
    
	/* -- News
	----------------------------------------*/
    .news-card {
        font-size: 16px;
    }

	#marqueeNews .content {
		font-size: 18px;
	}
    
    /* -- Means
	----------------------------------------*/
    .mean-award {
        font-size: 16px;
    }
    
    /* -- Judges
	----------------------------------------*/
    .stage {
        font-size: 16px;
    }

	/* -- Join Form
	----------------------------------------*/
	#joinForm .control-label {
		/* font-size: 16px; */
	}
	
	#joinForm .highlight-text-color {
		/* font-size: 20px; */
	}
	
	#joinForm .label-note {
		font-size: 15px;
	}
	
	#joinForm .join-note {
		font-size: 24px;
	}
    
    #joinFormSaved {
        font-size: 16px;
    }
    
    .join-success-container {
        font-size: 16px;
    }
}



/* -- Customized Style
--------------------------------------------------*/
html._locked,
body._locked {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

#pageMeans #mainContent {
    margin-top: 5vh;
}

#pageMeans .section-wrap {
    padding-top: 5vh;
}

#mainContent {
    margin-top: 5vh;
    margin-bottom: 5vh;
}

#containerSponsor {
    margin-top: 10vh;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #ccc;
}

#containerSponsor ul {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    vertical-align: bottom;
}

#containerSponsor ul > li {
    display: block;
}

#containerSponsor ul > li ~ li {
    margin-top: 10px;
}

#containerSponsor ul > li > a {
    display: inline-block;
    height: 30px;
    vertical-align: bottom;
}

#containerSponsor ul > li > a img {
    display: block;
    position: relative;
    top: 50%;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0 auto;
    -webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
	transform: translateY(-50%);
}

#containerJudge {
    position: relative;
    padding-bottom: 5%;
}

#containerJudge .styled-card-container .styled-card {
    float: left;
    width: -webkit-calc(20% + 25px * 2);
    width: -moz-calc(20% + 25px * 2);
    width: calc(20% + 25px * 2);
    margin-left: -25px;
    margin-right: -25px;
}

#containerJudge .styled-card-container .styled-card:nth-child(odd) {
    margin-top: 25vh;
}

#containerJudge .bg-img {
    position: absolute;
    left: 15%;
    bottom: 0;
    width: 70%;
    height: auto;
    z-index: -1;
}

#detailJudge .styled-card {
    font-size: 16px;
}

#containerGallery .styled-card-container:not(.active) {
    display: none;
}

#containerGallery .styled-card-container .styled-card {
    float: left;
    width: -webkit-calc(((100% - 1em * 3) / 4) - 0.01px);
    width: -moz-calc(((100% - 1em * 3) / 4) - 0.01px);
    width: calc(((100% - 1em * 3) / 4) - 0.01px);
    margin: 0.5em auto;
}

#containerGallery .styled-card-container .styled-card ~ .styled-card {
    margin-left: 1em;
}

#containerGallery .styled-card-container .styled-card:nth-child(4n+1) {
    margin-left: auto;
    clear: both;
}

#detailGallery.styled-modal,
#detailTop100.styled-modal {
    padding: 5vh 15px;
}

#detailGallery.styled-modal .modal-content-container,
#detailTop100.styled-modal .modal-content-container {
    width: 125vh;
    padding-top: 1.5em;
}

#detailGallery.styled-modal .modal-content-container .modal-main-content,
#detailTop100.styled-modal .modal-content-container .modal-main-content {
    padding: 0;
}

#containerTop100 .styled-card-container .styled-card {
    float: left;
    width: -webkit-calc(((100% - 1em * 3) / 4) - 0.01px);
    width: -moz-calc(((100% - 1em * 3) / 4) - 0.01px);
    width: calc(((100% - 1em * 3) / 4) - 0.01px);
    margin: 0.5em auto;
}

#containerTop100 .styled-card-container .styled-card ~ .styled-card {
    margin-left: 1em;
}

#containerTop100 .styled-card-container .styled-card:nth-child(4n + 1) {
    margin-left: auto;
    clear: both;
}

#detailTop100 .card-content {
    padding: 0;
}

#detailFilmType .modal-content-container {
    padding-left: 0;
    padding-right: 0;
}

#detailFilmType .modal-content-container .modal-main-content {
    padding-left: 30px;
    padding-right: 30px;
}

#containerFilmType {
    position: relative;
    overflow: hidden;
}

#containerFilmType .title {
    margin: 0 auto 0.5em;
    font-size: 24px;
    font-weight: 600;
}

#containerFilmType .each-group {
    float: left;
    width: 50%;
}

#containerFilmType ul {
    display: block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

#containerFilmType ul > li {
    display: block;
}

#containerFilmType ul > li ~ li {
    margin-top: 0.25em;
}

#containerFilmType ul > li label {
    display: block;
    font-size: 16px;
}

#containerFilmType p {
    margin: 0 auto;
    font-size: 20px;
    font-weight: 600;
}

#containerFilmType button {
    margin: 1em;
}

#submitPreview .preview-worksPhoto,
#submitPreview .preview-img {
    display: block;
    position: relative;
    overflow: hidden;
}

#submitPreview .preview-worksPhoto img,
#submitPreview .preview-img img {
    display: block;
    width: 360px;
    height: auto;
    max-width: 80%;
    margin: 0 auto;
}

#submitPreview .preview-worksPhoto img ~ img {
    margin-top: 10px;
}


/* -- Header
--------------------------------------------------*/
#siteHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 10px 15px;
    font-size: 15px;
    text-align: center;
    background-color: #fff;
    background-image: -webkit-linear-gradient(top, #fff 50%, #ccc 100%);
    background-image: -moz-linear-gradient(top, #fff 50%, #ccc 100%);
    background-image: -ms-linear-gradient(top, #fff 50%, #ccc 100%);
    background-image: -o-linear-gradient(top, #fff 50%, #ccc 100%);
    background-image: linear-gradient(to bottom, #fff 50%, #ccc 100%);
    z-index: 88888;
}

#siteHeader #siteBrand {
    height: 40px;
    margin: 0 auto;
}

#siteHeader #siteNav {
    display: inline-block;
    margin-left: 3vw;
    vertical-align: middle;
}

#siteHeader #otherLink {
    display: inline-block;
    height: 3em;
    line-height: 1.5;
    text-align: left;
    vertical-align: middle;
    color: #000;
}

body.hasHover #siteHeader #otherLink:hover {
    color: #666;
}

#siteHeader #otherLink img {
    float: left;
    width: auto;
    height: 100%;
}

#siteHeader #otherLink span {
    float: left;
    margin-left: 0.25em;
}

.site-brand {
    display: inline-block;
    vertical-align: middle;
}

.site-brand .brand-name {
    width: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
}

.site-brand .brand-img {
    width: auto;
    height: 100%;
}

.site-brand .brand-img > img {
    display: block;
    width: auto;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* -- Nav
--------------------------------------------------*/
ul.nav-main {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    vertical-align: bottom;
}

ul.nav-main > li {
    display: inline-block;
    position: relative;
    float: left;
    margin: 0 0.75em;
}

ul.nav-main > li ~ li::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 1.41421em;
    margin: auto;
    text-align: center;
    background-color: #000;
    -webkit-transform: rotateZ(45deg) translateX(-0.5em) translateY(0.5em);
    -moz-transform: rotateZ(45deg) translateX(-0.5em) translateY(0.5em);
    -ms-transform: rotateZ(45deg) translateX(-0.5em) translateY(0.5em);
    -o-transform: rotateZ(45deg) translateX(-0.5em) translateY(0.5em);
    transform: rotateZ(45deg) translateX(-0.5em) translateY(0.5em);
}

ul.nav-main > li > a {
    display: block;
    position: relative;
    font-size: 1.125em;
    line-height: 1.5em;
    color: inherit;
}

body.hasHover ul.nav-main > li > a:hover {
    color: #666;
}

ul.nav-main li.with-dropdown > a {
    cursor: default;
}

ul.nav-main li.with-dropdown > a::after {
    content: '';
    display: none;
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
    width: 0.75em;
    height: 0.75em;
    margin: auto;
    vertical-align: bottom;
    border-right: 1px solid #bbdfc8;
    border-top: 1px solid #bbdfc8;
    cursor: pointer;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

ul.nav-main li.with-dropdown > a._open::after {
    -webkit-transform: rotateZ(135deg);
    -moz-transform: rotateZ(135deg);
    -ms-transform: rotateZ(135deg);
    -o-transform: rotateZ(135deg);
    transform: rotateZ(135deg);
}

ul.nav-main li.with-dropdown > a._open._disabled {
    pointer-events: none;
}

ul.nav-main li.with-dropdown > a._open._disabled::after {
    display: none;
}

ul.nav-dropdown {
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0;
    max-height: 0;
    margin: auto;
    padding: 0 1.5em;
    list-style: none;
    text-align: center;
    vertical-align: bottom;
    white-space: nowrap;
    background-color: #5f4c3f;
    border-radius: 0.5em;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.88);
    overflow: hidden;
}

ul.nav-main li.with-dropdown > a._open + ul.nav-dropdown,
body.hasHover ul.nav-main > li:hover > ul.nav-dropdown {
    max-height: 200vh;
    -webkit-transition: max-height 0.5s ease-in-out;
	-moz-transition: max-height 0.5s ease-in-out;
    -ms-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
	transition: max-height 0.5s ease-in-out;
}

ul.nav-dropdown > li {
    display: block;
    position: relative;
    margin: 0 auto;
}

ul.nav-dropdown > li ~ li {
    margin-top: 0.25em;
    padding-top: -webkit-calc(0.25em + 1px);
    padding-top: -moz-calc(0.25em + 1px);
    padding-top: calc(0.25em + 1px);
}

ul.nav-dropdown > li ~ li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    margin: auto;
    background-color: #fff;
}

ul.nav-dropdown > li:first-child {
    margin-top: 0.25em;
}

ul.nav-dropdown > li:last-child {
    margin-bottom: 0.25em;
}

ul.nav-dropdown > li > a {
    display: block;
    position: relative;
    padding: 0.5em 0;
    line-height: 1.5em;
    white-space: nowrap;
    color: #fff;
}

body.hasHover ul.nav-dropdown > li > a:hover {
    color: #ccc;
}

#navToggle {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5vw;
    margin: auto;
}

.styled-hamburger {
    display: inline-block;
    width: 30px;
    height: 22px;
    margin: auto;
    vertical-align: bottom;
    cursor: pointer;
}

.styled-hamburger .bar {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px auto;
    background-color: #000;
    border-radius: 4px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.styled-hamburger._active .bar.top {
    -webkit-transform: translateY(6px) rotateZ(45deg);
    -moz-transform: translateY(6px) rotateZ(45deg);
    -ms-transform: translateY(6px) rotateZ(45deg);
    -o-transform: translateY(6px) rotateZ(45deg);
    transform: translateY(6px) rotateZ(45deg);
}

.styled-hamburger._active .bar.bottom {
    -webkit-transform: translateY(-6px) rotateZ(-45deg);
    -moz-transform: translateY(-6px) rotateZ(-45deg);
    -ms-transform: translateY(-6px) rotateZ(-45deg);
    -o-transform: translateY(-6px) rotateZ(-45deg);
    transform: translateY(-6px) rotateZ(-45deg);
}

.styled-hamburger._active .bar.middle {
    width: 0;
}


/* -- Components
--------------------------------------------------*/
/* -- Animation Effect -- */
.effect-zoom-in .zoom-in-img {
    -webkit-transition: transform 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    -moz-transition: transform 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    -ms-transition: transform 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    -o-transition: transform 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    transition: transform 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
}

body.hasHover .effect-zoom-in:hover .zoom-in-img {
    -webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

/* -- Form -- */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: #5f4c3e;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(95,76,62,.6);
}

form .form-group .error-message {
	display: block;
    position: absolute;
    right: 15px;
    bottom: 100%;
	max-height: 0;
	font-size: 12px;
    line-height: 1.5em;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

form .form-group .error-message.visible {
	max-height: 4.5em;
    opacity: 1;
}

form .form-group .error-message label.error {
	display: block;
    position: relative;
    width: auto;
    margin: 0 auto 5px;
    padding: 2px 0.75em;
    font-size: 1em;
    line-height: inherit;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

form .form-group .error-message label.error::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-width: 3px 3px 0 3px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent transparent;
}

/* -- Form | Input -- */
#inputContainerFilmType {
    position: relative;
    cursor: pointer;
}

#inputContainerFilmType input {
    padding-right: 30px;
    background-color: #fff;
    cursor: pointer;
}

#inputContainerFilmType .glyphicon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    width: 15px;
    height: 15px;
    margin: auto;
    line-height: 1;
    text-align: center;
}

.input-wrap {
    position: relative;
}

.form-check-label {
    position: relative;
    width: auto;
    margin: 0 auto;
    padding: 0 0 0 1.25em;
    font-size: 1em;
    line-height: 1.5;
    cursor: pointer;
}

.hidden-input-field {
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    outline: none !important;
    border: none !important;
    overflow: hidden !important;
    z-index: -1 !important;
}

input[type="checkbox"].form-check-input {
    display: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

input[type="checkbox"].form-check-input ~ .check {
    display: inline-block;
    position: absolute;
    top: -webkit-calc((1.5em - 12px) * 0.5);
    top: -moz-calc((1.5em - 12px) * 0.5);
    top: calc((1.5em - 12px) * 0.5);
    left: 0;
    width: 12px;
    height: 12px;
    margin: auto;
    text-align: initial;
    background-color: #fff;
    border: 1px solid #5f4c3f;
    cursor: pointer;
}

input[type="checkbox"].form-check-input ~ .check::before,
input[type="checkbox"].form-check-input ~ .check::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 2px;
    height: 0;
    margin: auto;
    background-color: #000;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
}

input[type="checkbox"].form-check-input ~ .check::before {
    top: 9px;
    left: 0;
    right: 0;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

input[type="checkbox"].form-check-input ~ .check::after {
    top: 5px;
    left: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input[type="checkbox"].form-check-input:checked ~ .check::before {
    height: 8px;
}

input[type="checkbox"].form-check-input:checked ~ .check::after {
    height: 5px;
}

/* -- Styled Modal -- */
.styled-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding-top: -webkit-calc(60px + 15px);
    padding-top: -moz-calc(60px + 15px);
    padding-top: calc(60px + 15px);
    padding-bottom: 4em;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
    z-index: 88888;
}

.styled-modal .modal-close-btn-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.styled-modal .modal-close-btn-container::after {
    content: '';
    display: block;
    clear: both;
}

.styled-modal .modal-close-btn-container .modal-close-btn {
    float: right;
    width: 3em;
    height: 3em;
    cursor: pointer;
}

.styled-modal .modal-close-btn-container .modal-close-btn > img {
    display: block;
}

.styled-modal .modal-content-container {
    position: relative;
    width: 60em;
    max-width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 4em 4em 0;
    overflow: hidden;
}

.styled-modal .modal-content-container .modal-main-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 5vh;
    overflow-x: hidden;
}

.styled-modal-info {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0;
    overflow: hidden;
    z-index: 88888;
}

.styled-modal-info .modal-close-btn-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}

.styled-modal-info .modal-close-btn-wrapper .close-btn {
    width: 4em;
    height: 4em;
    cursor: pointer;
}

.styled-modal-info .modal-close-btn-wrapper .close-btn > img {
    display: block;
}

.styled-modal-info .modal-content-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.styled-modal-info .modal-content-container .modal-main-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 4em 0 0;
}

.styled-modal-info .modal-content-container .modal-center-img {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px;
    overflow: hidden;
}

.styled-modal-info .modal-content-container .modal-center-img > .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}

.styled-modal-info .modal-content-container .modal-center-img .center-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    font-size: 0;
}

.styled-modal-info .modal-content-container .modal-center-img .center-img::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.styled-modal-info .modal-content-container .modal-center-img .center-img .img-wrapper {
    display: inline-block;
    position: relative;
    height: 100%;
    padding-top: 50px;
    vertical-align: middle;
}

.styled-modal-info .modal-content-container .modal-center-img .center-img .img-wrapper img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}

.styled-modal-info .modal-content-container .modal-center-img .center-img .img-wrapper .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
}

.styled-modal-info .modal-content-container .modal-center-img .center-img .img-wrapper .close-btn > img {
    display: block;
    position: relative;
    top: 50%;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0 auto;
    -webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.styled-modal-info .modal-arrow-btn .arrow-btn {
    position: absolute;
    top: -webkit-calc(50% - 3.5em * 0.5);
    top: -moz-calc(50% - 3.5em * 0.5);
    top: calc(50% - 3.5em * 0.5);
    height: 3.5em;
    margin: auto;
    cursor: pointer;
}

.styled-modal-info .modal-arrow-btn .arrow-btn img {
    width: auto;
    height: 100%;
}

.styled-modal-info .modal-arrow-btn .arrow-l {
    left: 0;
}

.styled-modal-info .modal-arrow-btn .arrow-r {
    right: 0;
}

/* -- Styled Pagination -- */
.styled-pagination .page-link {
    color: #000;
    border-color: #000;
}

.styled-pagination .page-item.active .page-link,
body.hasHover .styled-pagination .page-link:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.styled-pagination .page-item.active .page-link,
.styled-pagination .page-item.dots .page-link {
    pointer-events: none;
    cursor: default;
}

/* -- Styled Table -- */
table {
    width: 100%;
    border-collapse: separate;
}

table > tbody > tr > th,
table > tbody > tr > td {
    vertical-align: top;
    border: none;
}

table.table-fixed-width {
    table-layout: fixed;
}

table.styled-table-2 {
    border-collapse: collapse;
    border-spacing: 0;
}

table.styled-table-2 .col-50 {
    width: 50%;
}

table.styled-table-2 .col-40 {
    width: 40%;
}

table.styled-table-2 .col-30 {
    width: 30%;
}

table.styled-table-2 .col-20 {
    width: 20%;
}

table.styled-table-2 .col-15 {
    width: 15%;
}

table.styled-table-2 .col-10 {
    width: 10%;
}

table.styled-table-2 > thead > tr > th,
table.styled-table-2 > tbody > tr > td {
    position: relative;
    text-align: center;
    word-wrap: break-word;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    color: #231816;
    overflow: hidden;
}

table.styled-table-2 > thead > tr > th {
    padding: 0.5em 0.25em;
    font-size: 20px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(top, #fff 0%, #5f4c3f 100%);
    background-image: -moz-linear-gradient(top, #fff 0%, #5f4c3f 100%);
    background-image: -ms-linear-gradient(top, #fff 0%, #5f4c3f 100%);
    background-image: -o-linear-gradient(top, #fff 0%, #5f4c3f 100%);
    background-image: linear-gradient(to bottom, #fff 0%, #5f4c3f 100%);
}

table.styled-table-2 > thead > tr > th.with-icon {
    position: relative;
    color: #fff;
    background: #000;
    overflow: visible;
}

table.styled-table-2 > thead > tr > th.with-icon img {
    position: absolute;
    bottom: -webkit-calc(100% - 0.5em);
    bottom: -moz-calc(100% - 0.5em);
    bottom: calc(100% - 0.5em);
    right: -1.5em;
    width: 3em;
    height: auto;
}

table.styled-table-2 > tbody > tr > td {
    padding: 0.75em 0.25em;
    font-size: 14px;
    background-color: #efefef;
}

table.styled-table-2 > tbody > tr > td a,
table.styled-table-2 > tbody > tr > td a:hover {
    color: inherit;
}

table.styled-table-2 > tbody > tr > td a:hover {
    text-decoration: underline;
}

/* -- Styled List -- */
ol.styled-list {
    counter-reset: item;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

ol.styled-list > li {
    position: relative;
    margin-left: 1em;
    font-size: inherit;
    line-height: 1.8;
}

ol.styled-list > li::before {
    content: counter(item)".";
    counter-increment: item;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    text-align: center;
    vertical-align: bottom;
}

ol.styled-list > li ~ li {
    margin-top: 0.25em;
}

ul.styled-list {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

ul.styled-list > li {
    position: relative;
    padding-left: 1em;
    font-size: inherit;
    line-height: 1.8;
}

ul.styled-list > li ~ li {
    margin-top: 0.25em;
}

ul.styled-list > li::before {
    content: '';
    position: absolute;
    top: -webkit-calc((1.8em - 4px) * 0.5);
    top: -moz-calc((1.8em - 4px) * 0.5);
    top: calc((1.8em - 4px) * 0.5);
    left: -webkit-calc((1em - 4px) * 0.5);
    left: -moz-calc((1em - 4px) * 0.5);
    left: calc((1em - 4px) * 0.5);
    width: 4px;
    height: 4px;
    margin: auto;
    background-color: #231816;
    border-radius: 50%;
}

/* -- Styled Heading -- */
.styled-heading {
    position: relative;
    height: 1.5em;
    margin-bottom: 0.5em;
    font-size: 2em;
    text-align: center;
    overflow: hidden;
}

.styled-heading .heading-name {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 8em;
    height: 1em;
    margin: auto;
    font-size: 1em;
    font-weight: 600;
    line-height: 1;
    text-indent: 0.125em;
    letter-spacing: 0.125em;
    overflow: hidden;
}

.styled-heading .heading-img {
    display: block;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

/* -- Styled Card -- */
.styled-card-container::after {
    content: '';
    display: block;
    clear: both;
}

.styled-card-circle-thumbnail .card-img {
    box-shadow: 3px 3px 5px #5f4c3f;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}

.styled-card-circle-thumbnail .card-img img {
    display: block;
    width: 100%;
    height: auto;
}

.styled-card-circle-thumbnail .card-content {
    padding-top: 10px;
    text-align: center;
}

.styled-card-circle-thumbnail .card-title {
    height: 1em;
    margin: 0 auto;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
}

.styled-card-circle-thumbnail .card-subtitle {
    height: 1.5em;
    margin: 0 auto;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
}

.styled-card-judge-abstract {
    position: relative;
    overflow: hidden;
}

.styled-card-judge-abstract .card-title-img {
    float: left;
    width: 35%;
}

.styled-card-judge-abstract .card-title-img .card-img {
    position: relative;
    margin: 0 auto 0.5em;
    border-radius: 0;
}

.styled-card-judge-abstract .card-title-img .card-img::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30%;
    padding-top: 30%;
    background-image: url(../images/bg-triangle-brown.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.styled-card-judge-abstract .card-title-img .card-img > img {
    display: block;
    width: 100%;
    height: auto;
}

.styled-card-judge-abstract .card-title-img .card-title {
    margin: 0 auto;
    font-size: 2em;
    font-weight: 600;
    line-height: normal;
}

.styled-card-judge-abstract .card-title-img .card-subtitle {
    font-size: 1.125em;
    margin: 0 auto;
    line-height: normal;
}

.styled-card-judge-abstract .card-content {
    float: left;
    width: 65%;
    padding-left: 2em;
}

.styled-card-judge-abstract .card-content .content-block ~ .content-block {
    margin-top: 1.5em;
}

.styled-card-judge-abstract .card-content .title {
    margin-bottom: 0.25em;
    font-size: 1.25em;
    font-weight: 600;
    line-height: normal;
    color: #796956;
}

.styled-card-judge-abstract .card-content p {
    font-size: 1em;
    line-height: 1.8;
}

.styled-card-gallery {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.styled-card-gallery .card-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 1em 0.5em;
    text-align: center;
    color: #fff;
    z-index: 1;
}

.styled-card-gallery .card-cover::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #5f4c3f;
    opacity: 0.5;
    -webkit-transition: all 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    -moz-transition: all 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    -ms-transition: all 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    -o-transition: all 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    transition: all 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    z-index: -1;
}

body.hasHover .styled-card-gallery:hover .card-cover::before {
    background-color: #000;
    opacity: 0.7;
}

.styled-card-gallery .card-cover .cover-text {
    margin: 0 auto;
    font-size: 1em;
    font-weight: 400;
    line-height: normal;
    color: #ececec;
}

.styled-card-gallery .card-cover .cover-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1em;
    margin: auto;
}

.styled-card-gallery .card-title {
    margin: 0 auto;
    font-size: 1.25em;
    font-weight: 500;
    line-height: normal;
}

.styled-card-gallery .card-subtitle {
    margin: 0 auto;
    font-size: 1.25em;
    font-weight: 500;
    line-height: normal;
    color: #c9aa71;
}

.styled-card-gallery .card-img {
    position: relative;
    width: 100%;
    padding-top: 75%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.styled-card-gallery .card-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
}

.styled-card-gallery hr {
    width: 50%;
    margin: 3px auto;
    border-top: 1px dashed #fff;
}

.styled-card-video .styled-card-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.styled-card-video .styled-card-video .video-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.styled-card-video .styled-card-video .video-wrapper > iframe {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

.styled-card-video .card-content {
    position: relative;
    padding: 2.5vh 15px 0;
    color: #fff;
    overflow: hidden;
}

.styled-card-video .card-content .side-left {
    float: left;
    width: 36vh;
    padding-right: 3vh;
}

.styled-card-video .card-content .side-right {
    float: left;
    width: -webkit-calc(100% - 36vh);
    width: -moz-calc(100% - 36vh);
    width: calc(100% - 36vh);
}

.styled-card-video .card-title {
    margin: 0.125em auto;
    font-size: 4vh;
    font-weight: 500;
    line-height: normal;
}

.styled-card-video .card-subtitle {
    margin: 0 auto;
    font-size: 2vh;
    font-weight: 400;
    line-height: normal;
    color: #c9aa71;
}

.styled-card-video .card-text {
    margin: 0 auto;
    font-size: 2.25vh;
    font-weight: 400;
    line-height: normal;
    color: #ececec;
}

.styled-card-video .card-description {
    margin: 1.25vh auto 0;
    font-size: 1.75vh;
    font-weight: 400;
    line-height: 1.5;
}

.styled-card-video .card-bottom {
    position: relative;
    margin-top: 5vh;
    overflow: hidden;
}

.styled-card-video .card-text-number {
    float: left;
    height: 3vh;
    font-size: 2vh;
    line-height: 3vh;
    overflow: hidden;
}

.styled-card-video .card-text-number > .number {
    font-size: 2.75vh;
    line-height: 3vh;
    color: #ba2042;
}

.styled-card-video .card-btn {
    float: right;
    height: 3vh;
    padding: 0 0.5em;
    font-size: 2vh;
    line-height: 3vh;
    color: #fff;
    background-color: #5f4c3f;
    border: none;
    border-radius: 0.25em;
    cursor: pointer;
}

body.hasHover .styled-card-video .card-btn:hover {
    opacity: 0.8;
}

.styled-card-video .card-btn._disabled {
    pointer-events: none;
    cursor: default;
}

.styled-card-top100 {
    position: relative;
    padding: 0.5em;
    background-color: #fff;
    box-shadow: inset -0.25em -0.5em 2.5em #eee;
    cursor: pointer;
    overflow: hidden;
}

.styled-card-top100 .card-main-img {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 65%;
    cursor: pointer;
    overflow: hidden;
}

.styled-card-top100 .card-main-img > .wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.styled-card-top100 .card-main-img > .wrapper > img {
    display: block;
    position: relative;
    top: 50%;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0 auto;
    -webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
	transform: translateY(-50%);
    opacity: 0;
    z-index: -1;
}

.styled-card-top100 .card-main-img > .wrapper > .cover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.styled-card-top100 .card-top {
    position: relative;
    overflow: hidden;
}

.styled-card-top100 .card-number {
    float: left;
    height: 1em;
    font-size: 1em;
    line-height: 1;
    overflow: hidden;
}

.styled-card-top100 .card-share {
    float: right;
    height: 1em;
    overflow: hidden;
}

.styled-card-top100 .card-share img.card-share-btn {
    display: block;
    width: auto;
    height: 100%;
    margin: 0 auto;
    cursor: pointer;
}

.styled-card-top100 .card-content {
    margin-top: 0.25em;
    /* padding: 0.5em; */
}

.styled-card-top100 .card-content .card-heading {
    height: 1.5em;
    margin: 0 auto;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5;
	overflow: hidden;
}

.styled-card-top100 .card-content .card-title {
    height: 3em;
    margin: 0 auto;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    /* white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis; */
	overflow: hidden;
}

.styled-card-top100 .card-content .card-subtitle {
    margin: 0 auto;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
	overflow: hidden;
}

.styled-card-top100 .card-bottom {
    position: relative;
    margin-top: 1.5em;
    overflow: hidden;
}

.styled-card-top100 .card-text-number {
    float: left;
    font-size: 13px;
    line-height: 21px;
    overflow: hidden;
}

.styled-card-top100 .card-text-number > .number {
    font-size: 16px;
    line-height: 21px;
    color: #ba2042;
}

.styled-card-top100 .card-btn {
    float: right;
    height: 21px;
    padding: 0 0.5em;
    font-size: 14px;
    line-height: 21px;
    color: #fff;
    background-color: #5f4c3f;
    border: none;
    border-radius: 0.25em;
    cursor: pointer;
}

body.hasHover .styled-card-top100 .card-btn:hover {
    opacity: 0.8;
}

.styled-card-top100 .card-btn._disabled {
    pointer-events: none;
    cursor: default;
}

/* -- Styled Button -- */
.styled-btn-rounded {
    display: inline-block;
    padding: 0 2em;
    font-weight: 400;
    line-height: 2;
    text-align: center;
    vertical-align: bottom;
    color: #fff;
    border: none;
    border-radius: 0.45em;
    background-color: #5f4c3e;
    box-shadow: 2px 2px 5px #221714;
    cursor: pointer;
}

.styled-btn-rounded:focus {
    outline: none;
}

body.hasHover .styled-btn-rounded:hover {
    background-color: #221714;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1599px) {
    /* -- Customized Style
    --------------------------------------------------*/
    #detailJudge .styled-card {
        font-size: 15px;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Styled Card -- */
    .styled-card-circle-thumbnail .card-title {
        font-size: 33px;
    }

    .styled-card-circle-thumbnail .card-subtitle {
        font-size: 22px;
    }
}

@media only screen and (max-width: 1399px) {
    /* -- Customized Style
    --------------------------------------------------*/
    #containerJudge {
        padding-left: 15%;
        padding-right: 15%;
        padding-bottom: 2.5%;
    }

    #containerJudge .styled-card-container .styled-card {
        width: -webkit-calc(20% + 15px * 2);
        width: -moz-calc(20% + 15px * 2);
        width: calc(20% + 15px * 2);
        margin-left: -15px;
        margin-right: -15px;
    }

    #containerJudge .bg-img {
        left: 25%;
        width: 50%;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Styled Card -- */
    .styled-card-circle-thumbnail .card-title {
        font-size: 30px;
    }

    .styled-card-circle-thumbnail .card-subtitle {
        font-size: 20px;
    }
}

@media only screen and (max-width: 1199px) {
    /* -- Customized Style
    --------------------------------------------------*/
    #detailJudge .styled-card {
        font-size: 14px;
    }
    
    /* -- Nav
    --------------------------------------------------*/
    ul.nav-main > li > a {
        font-size: 1em;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Styled Card -- */
    .styled-card-circle-thumbnail .card-title {
        font-size: 27px;
    }

    .styled-card-circle-thumbnail .card-subtitle {
        font-size: 18px;
    }
    
    @media only screen and (orientation: portrait) {
        
    }

    @media only screen and (orientation: landscape) {
        
    }
}

@media only screen and (max-width: 991px) {
    /* -- Universal Setting
	--------------------------------------------------*/
    body {
        padding-top: 64px;
    }
    
    /* -- Customized Style
    --------------------------------------------------*/
    #containerJudge {
        display: none;
    }
    
    #detailJudge {
        display: block !important;
    }
    
    #detailJudge.styled-modal {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: auto !important;
        padding: 0 !important;
        background: none !important;
        z-index: auto !important;
    }
    
    #detailJudge.styled-modal .modal-close-btn-container {
        display: none !important;
    }
    
    #detailJudge.styled-modal .modal-content-container {
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    #detailJudge.styled-modal .modal-content-container .modal-main-content {
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }
    
    #detailJudge .styled-card-container .styled-card {
        display: block !important;
    }
    
    #detailJudge .styled-card-container .styled-card ~ .styled-card {
        margin-top: 7.5vh;
    }
    
    #containerGallery .styled-card-container .styled-card {
        width: -webkit-calc(((100% - 1em * 2) / 3) - 0.01px);
        width: -moz-calc(((100% - 1em * 2) / 3) - 0.01px);
        width: calc(((100% - 1em * 2) / 3) - 0.01px);
    }
    
    #containerGallery .styled-card-container .styled-card:nth-child(4n+1) {
        margin-left: 1em;
        clear: none;
    }

    #containerGallery .styled-card-container .styled-card:nth-child(3n+1) {
        margin-left: auto;
        clear: both;
    }
    
    #containerTop100 .styled-card-container .styled-card {
        width: -webkit-calc(((100% - 1em * 2) / 3) - 0.01px);
        width: -moz-calc(((100% - 1em * 2) / 3) - 0.01px);
        width: calc(((100% - 1em * 2) / 3) - 0.01px);
    }
    
    #containerTop100 .styled-card-container .styled-card:nth-child(4n+1) {
        margin-left: 1em;
        clear: none;
    }

    #containerTop100 .styled-card-container .styled-card:nth-child(3n+1) {
        margin-left: auto;
        clear: both;
    }
    
    #submitPreview .modal-dialog {
        margin-top: 94px;
    }
    
    /* -- Header
    --------------------------------------------------*/
    #siteHeader {
        height: 64px;
        padding: 1em 5vw;
        font-size: 16px;
        text-align: left;
    }

    #siteHeader #siteBrand {
        width: auto;
        height: 2em;
        vertical-align: bottom;
    }
    
    #siteHeader #siteNav {
        position: fixed;
        top: 64px;
        bottom: auto;
        left: 0;
        right: 0;
        height: -webkit-calc(100% - 64px);
        height: -moz-calc(100% - 64px);
        height: calc(100% - 64px);
        max-height: 0;
        margin: auto;
        padding: 0;
        -webkit-transition: max-height 0.6s ease-in-out, background-color 0.6s ease-in-out;
        -moz-transition: max-height 0.6s ease-in-out, background-color 0.6s ease-in-out;
        -ms-transition: max-height 0.6s ease-in-out, background-color 0.6s ease-in-out;
        -o-transition: max-height 0.6s ease-in-out, background-color 0.6s ease-in-out;
        transition: max-height 0.6s ease-in-out, background-color 0.6s ease-in-out;
        overflow-x: hidden;
    }
    
    #siteHeader #siteNav._open {
        max-height: -webkit-calc(100% - 64px);
        max-height: -moz-calc(100% - 64px);
        max-height: calc(100% - 64px);
        background-color: #e6e6e6;
        -webkit-transition: max-height 0.6s ease-in-out, background-color 0 ease-in-out;
        -moz-transition: max-height 0.6s ease-in-out, background-color 0 ease-in-out;
        -ms-transition: max-height 0.6s ease-in-out, background-color 0 ease-in-out;
        -o-transition: max-height 0.6s ease-in-out, background-color 0 ease-in-out;
        transition: max-height 0.6s ease-in-out, background-color 0 ease-in-out;
    }
    
    #siteHeader #siteNav > * {
        opacity: 0;
    }
    
    #siteHeader #siteNav._open > * {
        opacity: 1;
        -webkit-transition: opacity 1.6s ease-in-out;
        -moz-transition: opacity 1.6s ease-in-out;
        -ms-transition: opacity 1.6s ease-in-out;
        -o-transition: opacity 1.6s ease-in-out;
        transition: opacity 1.6s ease-in-out;
    }
    
    #siteHeader #otherLink {
        display: none;
    }
    
    #navToggle {
        display: block;
    }
    
    /* -- Nav
    --------------------------------------------------*/
    ul.nav-main {
        display: block;
        margin-top: 5vh;
        margin-bottom: 5vh;
        text-align: center;
        vertical-align: baseline;
    }
    
    ul.nav-main > li {
        display: block;
        float: none;
        margin: 0 auto;
    }
    
    ul.nav-main > li ~ li {
        border-top: 1px solid #5f4c3f;
    }
    
    ul.nav-main > li > a {
        padding: 15px 0.5em;
        font-size: 3em;
    }
    
    ul.nav-main li.with-dropdown > a::after {
        display: none;
    }
    
    ul.nav-dropdown {
        display: block;
        position: relative;
        top: 0;
        left: auto;
        right: auto;
        width: auto;
        max-height: 0;
        padding: 0;
        -webkit-transition: max-height 0.3s ease-in-out;
        -moz-transition: max-height 0.3s ease-in-out;
        -ms-transition: max-height 0.3s ease-in-out;
        -o-transition: max-height 0.3s ease-in-out;
        transition: max-height 0.3s ease-in-out;
        box-shadow: none;
        border-radius: 0;
    }

    ul.nav-dropdown > li {
        margin: 0 auto !important;
    }
    
    ul.nav-dropdown > li ~ li {
        padding-top: 1px;
    }
    
    ul.nav-dropdown > li > a {
        padding: 15px 0.5em;
        font-size: 2.5em;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Styled Modal -- */
    .styled-modal {
        padding-top: -webkit-calc(64px + 15px);
        padding-top: -moz-calc(64px + 15px);
        padding-top: calc(64px + 15px);
    }
    
    @media only screen and (orientation: portrait) {
        /* -- Customized Style
        --------------------------------------------------*/
        #detailJudge .styled-card {
            font-size: 16px;
        }
        
        #detailGallery .card-content {
            text-align: center;
        }
    
        /* -- Components
        --------------------------------------------------*/
        /* -- Styled Modal -- */
        .styled-modal-info .modal-arrow-btn .arrow-btn {
            top: 0;
            height: 4em;
        }

        .styled-modal-info .modal-arrow-btn .arrow-r {
            left: 6.5em;
            right: auto;
        }
        
        /* -- Styled Card -- */
        .styled-card-judge-abstract .card-content {
            padding-left: 1.5em;
        }
        
        .styled-card-video .card-content {
            padding: 0;
        }

        .styled-card-video .card-content .side-left {
            float: none;
            width: auto;
            padding: 0;
        }

        .styled-card-video .card-content .side-right {
            float: none;
            width: auto;
            margin-top: 2.5vh;
            text-align: left;
        }
        
        .styled-card-video .card-subtitle {
            font-size: 2.5vh;
        }
        
        .styled-card-video .card-description {
            margin: 0 auto;
        }
    }

    @media only screen and (orientation: landscape) {
        /* -- Customized Style
        --------------------------------------------------*/
        #detailJudge .styled-card {
            font-size: 13px;
        }
    }
}

@media only screen and (max-width: 767px) {
    /* -- Universal Setting
	--------------------------------------------------*/
    body {
        padding-top: 56px;
    }
    
    /* -- Header
    --------------------------------------------------*/
    #siteHeader {
        height: 56px;
        font-size: 14px;
    }
    
    #siteHeader #siteNav {
        top: 56px;
        height: -webkit-calc(100% - 56px);
        height: -moz-calc(100% - 56px);
        height: calc(100% - 56px);
    }
    
    #siteHeader #siteNav._open {
        max-height: -webkit-calc(100% - 56px);
        max-height: -moz-calc(100% - 56px);
        max-height: calc(100% - 56px);
    }
    
    /* -- Nav
    --------------------------------------------------*/
    ul.nav-main {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
    ul.nav-main > li > a {
        padding: 10px 0.5em;
        font-size: 2em;
    }
    
    ul.nav-dropdown > li > a {
        padding: 10px 0.5em;
        font-size: 1.75em;
    }
    
    /* -- Customized Style
    --------------------------------------------------*/
    #pageMeans #mainContent {
        margin-top: 15px;
    }
    
    #pageMeans .section-wrap {
        padding-top: -webkit-calc(5vh - 15px);
        padding-top: -moz-calc(5vh - 15px);
        padding-top: calc(5vh - 15px);
    }
    
    #detailJudge .styled-card {
        font-size: 14px;
    }
    
    #detailTop100 .card-title {
        font-size: 1.5em;
    }
    
    #detailTop100 .card-subtitle {
        font-size: 1.125em;
    }
    
    #detailFilmType {
        padding: 15px;
    }
    
    #detailFilmType.styled-modal .modal-content-container {
        width: 100%;
        padding: 30px 0 15px;
    }

    #detailFilmType.styled-modal .modal-close-btn-container .modal-close-btn {
        width: 25px;
        height: 25px;
    }
    
    #detailFilmType .modal-content-container .modal-main-content {
        padding-left: 0;
        padding-right: 0;
    }

    #containerFilmType .title {
        font-size: 20px;
    }
    
    #containerFilmType ul > li ~ li {
        margin-top: 0.5em;
    }

    #containerFilmType ul > li label {
        font-size: 14px;
    }

    #containerFilmType p {
        font-size: 16px;
    }
    
    #joinForm .join-note {
        font-size: 14px;
    }
    
    #joinForm .control-label.text-right {
        text-align: left !important;
    }
    
    #joinForm .join-member .form-group .add-new-member,
    #joinForm .join-teacher .form-group .add-new-teacher {
        top: 5px;
        right: 0;
    }
    
    #joinForm .join-member .form-group .delete-new-member,
    #joinForm .join-teacher .form-group .delete-new-teacher {
        top: 5px;
        right: 40px;
    }
    
    #submitPreview .modal-dialog {
        width: auto;
        max-width: none;
        margin-top: 66px;
    }

    /* -- Components
    --------------------------------------------------*/
    /* -- Form | Input -- */
    .control-label {
        margin-bottom: 0;
    }
    
    .form-group {
        margin-bottom: 0;
    }
    
    .input-wrap {
        margin-bottom: 1em;
    }
    
    /* -- Styled Modal -- */
    .styled-modal {
        padding-top: -webkit-calc(56px + 15px);
        padding-top: -moz-calc(56px + 15px);
        padding-top: calc(56px + 15px);
        padding-bottom: 3.5em;
    }
    
    .styled-modal-info .modal-content-container .modal-center-img {
        padding: 15px;
    }
    
    .styled-modal-info .modal-content-container .modal-center-img .center-img .img-wrapper {
        padding-top: 35px;
    }

    .styled-modal-info .modal-content-container .modal-center-img .center-img .img-wrapper .close-btn {
        width: 30px;
        height: 30px;
    }
    
    /* -- Styled Table -- */
    table.styled-table-2 > thead {
        display: none;
    }
    
    table.styled-table-2,
    table.styled-table-2 > tbody,
    table.styled-table-2 > tbody > tr,
    table.styled-table-2 > tbody > tr > td {
        display: block;
        width: 100%;
    }
    
    table.styled-table-2 > tbody > tr > td {
        position: relative;
        padding: 50px 15px 10px;
        font-size: 14px;
        background-color: #fff;
    }
    
	table.styled-table-2 > tbody > tr > td::before {
        content: attr(data-th);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        margin: auto;
        padding: 10px 15px;
        font-size: 18px;
        font-weight: 600;
        line-height: 20px;
        color: #fff;
        background-image: -webkit-linear-gradient(bottom, #fff 0%, #5f4c3f 50%);
        background-image: -moz-linear-gradient(bottom, #fff 0%, #5f4c3f 50%);
        background-image: -ms-linear-gradient(bottom, #fff 0%, #5f4c3f 50%);
        background-image: -o-linear-gradient(bottom, #fff 0%, #5f4c3f 50%);
        background-image: linear-gradient(to top, #fff 0%, #5f4c3f 50%);
        overflow: hidden;
    }
    
    table.styled-table-2 > tbody > tr > td.with-icon {
        overflow: visible;
    }
    
    table.styled-table-2 > tbody > tr > td.with-icon::before {
        background: #000;
    }
    
    table.styled-table-2 > tbody > tr > td.with-icon img {
        position: absolute;
        top: -10px;
        right: 0;
        width: auto;
        height: 60px;
    }
    
    /* -- Styled Card -- */
    .styled-card-judge-abstract .card-title-img {
        float: none;
        width: 100%;
        text-align: center;
    }
    
    .styled-card-judge-abstract .card-title-img .card-img {
        width: 60%;
        max-width: 20em;
    }

    .styled-card-judge-abstract .card-content {
        float: none;
        width: 100%;
        margin-top: 1em;
        padding-left: 0;
    }
    
    .styled-card-video .card-content {
        padding: 0;
    }

    .styled-card-video .card-content .side-left {
        float: none;
        width: auto;
        padding: 0;
    }

    .styled-card-video .card-content .side-right {
        float: none;
        width: auto;
    }
    
    .styled-card-video .card-description {
        margin: 0 auto;
        font-size: 1em;
    }

    .styled-card-video .card-text-number {
        height: 24px;
        font-size: 16px;
        line-height: 24px;
    }

    .styled-card-video .card-text-number > .number {
        font-size: 20px;
        line-height: 24px;
    }

    .styled-card-video .card-btn {
        height: 24px;
        font-size: 16px;
        line-height: 24px;
    }
    
    @media only screen and (orientation: portrait) {
        /* -- Customized Style
        --------------------------------------------------*/
        #containerGallery .styled-card-container .styled-card {
            width: -webkit-calc(((100% - 2vw * 1) / 2) - 0.01px);
            width: -moz-calc(((100% - 2vw * 1) / 2) - 0.01px);
            width: calc(((100% - 2vw * 1) / 2) - 0.01px);
            margin: 1vw auto;
        }
        
        #containerGallery .styled-card-container .styled-card ~ .styled-card {
            margin-left: 2vw;
        }
        
        #containerGallery .styled-card-container .styled-card:nth-child(3n+1) {
            margin-left: 2vw;
            clear: none;
        }

        #containerGallery .styled-card-container .styled-card:nth-child(2n+1) {
            margin-left: auto;
            clear: both;
        }
        
        #detailGallery.styled-modal .modal-content-container,
        #detailTop100.styled-modal .modal-content-container {
            width: 100%;
            padding: 30px 0 15px;
        }

        #detailGallery.styled-modal .modal-close-btn-container .modal-close-btn,
        #detailTop100.styled-modal .modal-close-btn-container .modal-close-btn {
            width: 25px;
            height: 25px;
        }
        
        #detailGallery .styled-card,
        #detailTop100 .styled-card {
            margin-top: 2.5vh;
        }
        
        #containerTop100 .styled-card-container .styled-card {
            width: -webkit-calc(((100% - 2vw * 1) / 2) - 0.01px);
            width: -moz-calc(((100% - 2vw * 1) / 2) - 0.01px);
            width: calc(((100% - 2vw * 1) / 2) - 0.01px);
            margin: 1vw auto;
        }
        
        #containerTop100 .styled-card-container .styled-card ~ .styled-card {
            margin-left: 2vw;
        }
        
        #containerTop100 .styled-card-container .styled-card:nth-child(3n+1) {
            margin-left: 2vw;
            clear: none;
        }

        #containerTop100 .styled-card-container .styled-card:nth-child(2n+1) {
            margin-left: auto;
            clear: both;
        }
        
        #containerFilmType .each-group {
            float: none;
            width: 100%;
        }
        
        #containerFilmType .each-group ~ .each-group {
            margin-top: 1.5em;
        }
        
        #joinFormSubmit {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        #joinForm .join-stills .upload-photo-wrap {
            padding-left: 30px;
            padding-right: 30px;
        }
        
        #joinForm .join-stills .upload-photo-wrap .film-still {
            width: 50%;
        }
        
        /* -- Components
        --------------------------------------------------*/
        /* -- Styled Modal -- */
        .styled-modal-info .modal-close-btn-wrapper .close-btn {
            width: 3em;
            height: 3em;
        }

        .styled-modal-info .modal-content-container .modal-main-content {
            padding: 3em 0 0;
        }
        
        .styled-modal-info .modal-content-container .modal-center-img .center-img .img-wrapper {
            width: 100%;
            height: 100%;
        }

        .styled-modal-info .modal-arrow-btn .arrow-btn {
            height: 3em;
        }

        .styled-modal-info .modal-arrow-btn .arrow-r {
            left: 5em;
        }
        
        /* -- Styled Pagination -- */
        .styled-pagination .page-item:not(.active) {
            display: none;
        }
        
        .styled-pagination .page-item.page-prev,
        .styled-pagination .page-item.page-next {
            display: inline;
        }
    }

    @media only screen and (orientation: landscape) {
        
    }
}

@media only screen and (max-width: 575px) {
    
    
    @media only screen and (orientation: portrait) {
        
    }

    @media only screen and (orientation: landscape) {
        
    }
}

@media only screen and (max-width: 320px) {
    /* -- Components
    --------------------------------------------------*/
    /* -- Styled Table -- */
    table.styled-table-2 > tbody > tr > td::before {
        font-size: 16px;
    }
    
    table.styled-table-2 > tbody > tr > td.with-icon img {
        top: -5px;
        height: 50px;
    }
    
    /* -- Styled Card -- */
    .styled-card-gallery .card-cover {
        padding: 0.5em;
    }

    .styled-card-gallery .card-cover .cover-bottom {
        bottom: 0.5em;
    }

    .styled-card-gallery .card-title {
        font-size: 1em;
    }

    .styled-card-gallery .card-subtitle {
        font-size: 1em;
    }
    
    @media only screen and (orientation: portrait) {
        
    }

    @media only screen and (orientation: landscape) {
        
    }
}

@media print {
    body {
        padding: 0 !important;
    }
    
    #siteHeader,
    #siteFooter {
        display: none !important;
    }
}