.headerSpace{height: 85px;}
#header{position: fixed; top: 0px; height: 0px; left: 0px; width: 100%; z-index: 55;}
#header .hMain{width: 90%; max-width: 1100px; position: relative; top: 25px; border-radius: 50px; background: rgba(0, 0, 0, 0.2); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3);}
#header .hMobile{background: rgb(86 86 86 / 20%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: fixed; top: 0px; left: 0px; width: 80%; max-width: 350px; height: 100%; display: none;}
#header .hMobile .hmHead{height: 30px; position: relative;}
#header .hMobile .hmHead > div{width: 15px; height: 15px; cursor: pointer; position: absolute; top: 10px; right: 15px;}
#header .hMobile .hmOpt > a{width: 100%; font-size: 15px; font-weight: bold; color: var(--text_white);}
#header .hMobile .hmOpt > a > div{padding: 15px;}
#header .hMobile .hmOpt > a > div.active{text-decoration: underline;}
#header .hBar{display: grid; padding: 0px 10px; box-sizing: border-box; grid-template-columns: 150px 1fr 150px; height: 55px;}
#header .hBar > div{width: 100%;}
#header .hBar .hbLogo{width: 85px; margin-top: 11px; float: left; margin-left: 12px;}
#header .hBar .hbLogo > div{padding-bottom: 39%;}
#header .hBar .hbHamburger{height: 45px; width: 45px; float: left; display: none;}
#header .hBar .hbHamburger > div{width: 20px; height: 20px; position: relative; top: 12px;}
#header .hBar .hbMenu{display: flex; justify-content: center; align-items: center; gap: 20px; width: min-content;}
#header .hBar .hbMenu > a > div{height: 53px; padding-top: 2px; font-size: 15px; color: var(--text_silver); display: flex; justify-content: center; white-space: nowrap; align-items: center;}
#header .hBar .hbMenu > a > div.active{text-decoration: underline; color: var(--text_white);}
#header .hBar .hbMenu > a > div > div{display: inline-block;}
#header .hBar .hbMenu > a > div > div:not(:last-child){margin-right: 5px;}
#header .hBar .hbBtn{margin-top: 10px;}
#header .hBar .hbProfile{width: 35px; position: relative; height: 35px; background: var(--bg_white); border-radius: 10px; float: right; margin-right: 20px;}
#header .hBar .hbProfile > div{position: relative; top: 8px; width: 20px; height: 20px;}

.header2Space{height: 50px;}
#header2{height: 50px; position: fixed; background: var(--bg_silverbold); top: 0px; left: 0px; width: 100%; z-index: 55;}
#header2 > div{display: inline-block;}
#header2 .hLogo{position: relative; width: 85px; top: 7px; left: 15px;}
#header2 .hLogo > div{padding-bottom: 39%;}

.footerSpace{height: 50px;}
#footer{padding: 50px; background: #000000; position: relative; z-index: 1;}
#footer > div{max-width: 700px;}
#footer .fMenu{text-align: center;}
#footer .fMenu > a{color: var(--text_white);}
#footer .fMenu > a:not(:last-child){margin-right: 15px;}
#footer .fLogo{margin-top: 45px; height: 60px;}
#footer .fLogo > div{width: 130px; height: 31px;}

.bodyContent{max-width: 1000px; width: 100%; margin-top: 25px;}
.bodyContent .bcBox{padding: 15px; min-height: 250px; border-radius: 10px; margin: 0px 20px; background: rgba(0, 0, 0, 0.2); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3);}

.body_layout{width: 100%; position: absolute; background-size: cover; z-index: -1;}
.body_layout.bl1{background-image: url('../../../images/background/bg_coming.png'); padding-bottom: 69%;}
.body_layout_ab1_a{width: 100%; position: absolute; padding-bottom: 30%; top: 0px; left: 0px; background-size: cover; z-index: -1; background-image: url('../../../images/background/front_layout_top_1.png');}
.body_layout_ab2_a{width: 100%; position: fixed; padding-bottom: 30%; bottom: 0px; left: 0px; background-size: cover; z-index: -1; background-image: url('../../../images/background/front_layout_bottom_1.png');}
.body_layout_batik{width: 100%; position: fixed; height: 100%; top: 0px; left: 0px; background-size: cover; z-index: -1; background-image: url('../../../images/background/bg_batik.png');}

.headTitle{padding: 45px 10px; font-size: 25px; font-family: 'extrabold'; text-align: center;}
.content{padding: 0px 25px 25px 25px;}

#popup{width: 100%; top: 0px; left: 0px; height: 100%; position: fixed; z-index: 90; background: rgba(239, 239, 239, 0.55); overflow: auto;}
#popup table{width: 100%; height: 100%;}
#popup .p_canvas{max-width: 400px; width: 80%; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); border-radius: 5px; overflow: hidden; background: var(--bg_black); color: var(--text_white);}

.popup_login{padding: 20px;}
.popup_login > div:first-child{font-size: 17px; font-family: 'bold';}

.popup_submit_success > div:first-child > div{width: 200px; height: 200px; background-size: cover; background-image: url('../../../images/background/submit-success.gif');}
.popup_submit_success > div:nth-child(2){margin-top: 10px; text-align: center; font-size: 15px; font-weight: bold;}

.popupProfile .ppHead{padding: 15px; background: var(--bg_red);}
.popupProfile .ppOpt{padding: 10px 0px;}
.popupProfile .ppOpt > a > div{padding: 10px 15px; color: var(--text_white);}

.popup_head_close{display: grid; grid-template-columns: 1fr 15px; grid-gap: 10px; align-items: center; padding: 10px 15px; box-sizing: border-box; background: var(--bg_red);}
.popup_head_close > div{width: 100%;}
.popup_head_close .phcTitle{font-weight: bold; font-size: 15px;}
.popup_head_close .phcBtn > div{width: 15px; height: 15px;}

.popupMovie{padding: 20px 0px;}
.popupMovie .pmHead{padding: 30px 0px;}
.popupMovie .pmHead .phCover{width: 100px;}
.popupMovie .pmHead .phCover > div{padding-bottom: 150%; border-radius: 10px; background-color: var(--bg_silvercalm);}
.popupMovie .pmHead .phInfo{padding: 20px 0px; text-align: center;}
.popupMovie .pmHead .phInfo > div:first-child{font-size: 20px; font-family: 'bold';}
.popupMovie .pmHead .phInfo > div:nth-child(2){margin-top: 10px;}
.popupMovie .pmHead .phInfo > div:nth-child(2) span{padding: 3px 10px 2px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.2);}
.popupMovie .pmBody{margin: 0px 20px 20px 20px; padding: 10px; border: 1px solid var(--bg_gray); border-radius: 10px;}
.popupMovie .pmBody > div{padding: 15px 10px;}
.popupMovie .pmBody > div:not(:last-child){border-bottom: 1px solid var(--bg_gray);}
.popupMovie .pmBody .pbList{display: grid; grid-template-columns: 100px 1fr; grid-gap: 15px; box-sizing: border-box;}
.popupMovie .pmBody .pbList > div{width: 100%;}
.popupMovie .pmBody .pbList > div:first-child{color: var(--text_silver);}
.popupMovie .pmBody .pbMain{margin-top: 5px;}
.popupMovie .pmBody .pbMain > div{display: inline-block;}
.popupMovie .pmBody .pbMain > div:not(:last-child){margin-right: 10px;}
.popupMovie .pmBody .pbMain .pmList > div{display: inline-block;}
.popupMovie .pmBody .pbMain .pmList > div:first-child{color: var(--text_silver);}

#alert{width: 100%; height: 0px; position: fixed; top: 0px; left: 0px; z-index: 100;}
#alert > div{width: 90%; max-width: 450px; transition: 0.2s; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); position: relative; top: -100px; border-radius: 20px;}
#alert > div > div{padding: 9px 15px 11px 15px; text-align: center; color: var(--text_white);}
#alert > div.success{background: var(--bg_alert_green);}
#alert > div.warning{background: var(--bg_alert_orange);}
#alert > div.failed{background: var(--bg_alert_red);}

.info{padding: 7px 10px 8px 15px; background: var(--bg_silvercalm); border-left: 2px solid var(--bg_blue);}

.listCheck > div{display: grid; grid-template-columns: 15px 1fr; grid-gap: 15px;}
.listCheck > div:not(:last-child){margin-bottom: 10px;}
.listCheck > div > div{width: 100%;}
.listCheck > div > div:first-child > div{width: 15px; height: 15px;}

.scroll_card{opacity: 0; transition: all 0.2s ease;}
.scroll_card > div{height: 100%; width: 0px; top: 0px; position: absolute; z-index: 1;}
.scroll_card > div:first-child{left: 25px; display: none;}
.scroll_card > div:last-child{right: 30px;}
.scroll_card > div > div{width: 40px; height: 40px; cursor: pointer; border-radius: 50%; position: absolute; top: 32%; background: var(--bg_white); border: 3px solid var(--bg_blue);}
.scroll_card > div:last-child > div{right: 0px;}
.scroll_card > div > div > div{width: 20px; height: 20px; margin-top: 9.5px;}
.scroll_card > div:hover:first-child > div > div{margin-left: 5px;}
.scroll_card > div:hover:last-child > div > div{margin-right: 5px;}

.boxCheck{display: none;}
.boxCheck.active{display: inline-block;}
.boxCheck > div{display: grid; margin: 10px 0px 9px 0px; grid-template-columns: 15px min-content; width: min-content; white-space: nowrap; grid-gap: 5px; align-items: center; padding: 5px 10px; border-radius: 50px; font-size: 11px; font-weight: bold; background: var(--bg_greencalm);}
.boxCheck > div > div:first-child > div{width: 15px; height: 15px;}

.menu_horizontal{padding: 5px 0px; white-space: nowrap;}
.menu_horizontal > a:not(:last-child){margin-right: 10px;}
.menu_horizontal .mhItem{display: inline-block; padding: 10px 15px; border-radius: 10px; transition: var(--transition); color: var(--text_white); background: var(--bg_black);}
.menu_horizontal .mhItem:hover{box-shadow: inset 0px 0px 0px 1.5px var(--bg_silver);}
.menu_horizontal .mhItem.active{background: var(--bg_red);}

.pageTitleBig{padding: 15px 0px; font-size: 35px; font-weight: bold;}
.pageTitleMini{padding: 15px 0px; font-size: 15px; font-weight: bold;}

.page_empty{padding: 50px 0px; text-align: center;}

/**WELCOME**/
.welcome_content{position: relative; z-index: 2;}
.welcome_content > section{min-height: 70vh;}
.welcome_content > section.wVideo{min-height: 0px;}
.welcome_content > section.wWatch{background-image: linear-gradient(to top, #340502, transparent);}
.welcome_content > section.wMoment{background-image: linear-gradient(to bottom, #340502, transparent);}
.welcome_content > section.wCatalog{background-image: linear-gradient(to top, #340502, transparent);}

.welcome_competition{min-height: 450px; max-width: 1000px; align-items: center; padding-top: 95px; display: grid; grid-template-columns: 430px 1fr; grid-gap: 25px;}
.welcome_competition > div{width: 100%;}
.welcome_competition > div:nth-child(2){text-align: right;}
.welcome_competition .wcBanner{width: 430px; position: relative; top: 20px;}
.welcome_competition .wcBanner > div:first-child{padding-bottom: 98%; background-image: url('../../../images/background/front_competition.png'); background-size: cover;}
.welcome_competition .wcBanner > div:nth-child(2){text-align: center; position: absolute; bottom: -10px; color: var(--text_silver); left: 0px; width: 100%;}
.welcome_competition .wcTitle{font-size: 55px;}
.welcome_competition .wcLogo{max-width: 650px; width: 90%; position: relative; margin-bottom: 20px;}
.welcome_competition .wcLogo > div{padding-bottom: 24%;}
.welcome_competition .wcDesc{margin-top: 25px;}
.welcome_competition .wcBtn{margin-top: 25px;}
.welcome_competition .wcBtn > div > a{display: inline-block;}
.welcome_competition .wcBtn > div > a:not(:last-child){margin-right: 15px;}

.welcome_competition2{max-width: 1000px; text-align: center; padding-top: calc(100vh / 3); padding-bottom: calc(100vh / 3);}
.welcome_competition2 > div{width: 100%;}
.welcome_competition2 > div:nth-child(2){text-align: center; margin-top: 25px;}
.welcome_competition2 .wcLogo{max-width: 650px; width: 90%; position: relative; top: 20px;}
.welcome_competition2 .wcLogo > div{padding-bottom: 12%;}
.welcome_competition2 .wcDesc{margin-top: 25px; max-width: 500px; padding: 0px 25px;}
.welcome_competition2 .wcBtn{margin-top: 35px;}
.welcome_competition2 .wcBtn > a:not(:last-child){margin-right: 15px;}

.welcome_cv{padding: 65px 0px; text-align: center;}
.welcome_cv .wcLogo{width: 650px; margin-bottom: 25px;}
.welcome_cv .wcLogo > div{padding-bottom: 33%; background-size: cover; background-image: url('../../../images/background/front_campus_visit.png');}
.welcome_cv .wcTxt{white-space: nowrap; margin-bottom: 35px;}
.welcome_cv .wcTxt > div{display: inline-block; position: relative;}
.welcome_cv .wcTxt > div:first-child:before{content: ''; position: absolute; top: 0px; right: -16px; width: 1px; height: 100%; background: var(--bg_gray);}
.welcome_cv .wcTxt > div:not(:last-child){margin-right: 25px;}

.welcome_coming{max-width: 1000px; text-align: center; position: relative; padding-top: 35px;}
.welcome_coming .wcBg{position: absolute; top: -50px; left: 0px; width: 100%;}
.welcome_coming .wcBg > div{padding-bottom: 85%; background-image: url('../../../images/background/front_coming.png'); background-size: cover;}
.welcome_coming .wcContent{position: relative; z-index: 1;}
.welcome_coming .wcContent .wcKf{width: 80px; margin-bottom: 15px;}
.welcome_coming .wcContent .wcKf > div{padding-bottom: 36%;}
.welcome_coming .wcContent .wcJwc{width: 200px;}
.welcome_coming .wcContent .wcJwc > div{padding-bottom: 73%;}
.welcome_coming .wcContent .wcTxt{margin-top: 45px; font-size: 35px;}
.welcome_coming .wcContent .wcCount{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 25px; max-width: 800px; margin-top: 35px;}
.welcome_coming .wcContent .wcCount > div{width: 100%; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 15px; box-sizing: border-box; border: 1px solid #312A2A; border-radius: 15px;}
.welcome_coming .wcContent .wcCount .wcTitle{font-size: 17px; margin-bottom: 15px; text-align: center; font-family: 'bold';}
.welcome_coming .wcContent .wcCount .wcAt{display: grid; grid-gap: 5px; align-items: center; grid-template-columns: 90px 20px 90px 20px 1fr;}
.welcome_coming .wcContent .wcCount .wcAt > div{width: 100%;}
.welcome_coming .wcContent .wcCount .wcAt .waBox{padding: 15px 0px; background: rgba(0, 0, 0, 0.5); text-align: center; border-radius: 10px; border: 1px solid #312A2A;}
.welcome_coming .wcContent .wcCount .wcAt .waBox > div:first-child{font-size: 30px;}
.welcome_coming .wcContent .wcCount .wcAt .waBox > div:nth-child(2){font-size: 11px; margin-top: 3px;}
.welcome_coming .wcContent .wcCount .wcAt .waLogo .wlItem{max-width: 75px;}
.welcome_coming .wcContent .wcCount .wcAt .waLogo .wlItem > div{padding-bottom: 63%;}
.welcome_coming .wcContent .wcCount .wcAt .waLogo .wlDesc{font-size: 11px;}

.welcome_backto{max-width: 1000px; text-align: center; position: relative; margin-top: 150px;}
.welcome_backto .wbHead{margin-bottom: 45px;}
.welcome_backto .wbHead .whTitle > div:first-child{font-size: 45px;}
.welcome_backto .wbHead .whTitle > div:nth-child(2){font-size: 15px; margin-top: 10px;}
.welcome_backto .wbHead .whMenu{margin-top: 15px;}
.welcome_backto .wbHead .whMenu > div{display: inline-block; padding: 5px 25px; cursor: pointer; border-radius: 5px; border: 1px solid var(--bg_white);}
.welcome_backto .wbHead .whMenu > div:not(:last-child){margin-right: 10px;}
.welcome_backto .wbHead .whMenu > div.active{background: var(--bg_red); border: 1px solid var(--bg_red);}
.welcome_backto .wbContent > div:not(.active){display: none;}
.welcome_backto .wbBox{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; margin: 0px 20px;}
.welcome_backto .wbBox.wb5{grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.welcome_backto .wbBox > div{width: 100%; background: rgba(0, 0, 0, 0.2); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); padding: 25px 10px; border-radius: 10px; box-sizing: border-box;}
.welcome_backto .wbBox .wbIcon > div{width: 25px; height: 25px;}
.welcome_backto .wbBox .wbHead{margin-top: 10px;}
.welcome_backto .wbBox .wbHead > div:first-child{font-size: 35px;}
.welcome_backto .wbBox .wbSpecial{padding: 20px 0px; font-size: 23px;}
.welcome_backto .wbBox .wbSpecial2{margin-top: 20px;}
.welcome_backto .wbBox .wbSpecial2 > div:first-child{font-size: 20px; margin-bottom: 15px;}
.welcome_backto .wbBox .wbDesc{margin-top: 10px; font-size: 11px; color: var(--text_silver);}

.welcome_backto2{max-width: 1000px; position: relative; margin-top: 150px; z-index: 1; display: grid; grid-template-columns: 150px 1fr; grid-gap: 25px;}
.welcome_backto2 > div{width: 100%;}
.welcome_backto2 .wbTitle{font-size: 25px; font-family: 'bold';}
.welcome_backto2 .wbBox{display: grid; text-align: center; grid-template-columns: 1fr 1fr; grid-gap: 20px; margin: 0px 20px;}
.welcome_backto2 .wbBox > div{width: 100%; background: rgba(0, 0, 0, 0.2); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); padding: 25px 10px; border-radius: 10px; box-sizing: border-box;}
.welcome_backto2 .wbBox .wbIcon > div{width: 25px; height: 25px;}
.welcome_backto2 .wbBox .wbHead{margin-top: 10px;}
.welcome_backto2 .wbBox .wbHead > div:first-child{font-size: 35px;}
.welcome_backto2 .wbBox .wbSpecial{padding: 20px 0px; font-size: 23px;}
.welcome_backto2 .wbBox .wbSpecial2{margin-top: 20px;}
.welcome_backto2 .wbBox .wbSpecial2 > div:first-child{font-size: 20px; margin-bottom: 15px;}
.welcome_backto2 .wbBox .wbDesc{margin-top: 10px; font-size: 11px; color: var(--text_silver);}

.welcome_gallery{max-width: 1000px; position: relative; padding-top: 150px; z-index: 1;}
.welcome_gallery .wgTitle{font-size: 25px; font-family: 'bold'; margin-bottom: 15px;}

.welcome_video2{padding-bottom: 45px; max-width: 1000px; position: relative; padding-top: 150px; z-index: 1; display: grid; grid-template-columns: 150px 1fr; grid-gap: 25px;}
.welcome_video2 > div{width: 100%;}
.welcome_video2 .wvTitle{font-size: 25px; font-family: 'bold';}

.welcome_inside{max-width: 1000px; position: relative; padding-top: 150px; z-index: 1;}
.welcome_inside .wiTitle{font-size: 25px; font-family: 'bold'; margin-bottom: 15px;}

.welcome_archive{max-width: 1000px; position: relative; padding-top: 150px; z-index: 1;}
.welcome_archive .waTitle{display: grid; margin-bottom: 25px; grid-template-columns: 1fr min-content; align-items: center;}
.welcome_archive .waTitle > div{width: 100%;}
.welcome_archive .waTitle > div:first-child{font-size: 25px; font-family: 'bold';}

.welcome_video_txt{text-align: center; margin-top: 50px; margin-bottom: 30px; font-size: 25px; font-weight: bold;}
.welcome_video{max-width: 800px;}
.welcome_video > div:nth-child(2){display: none;}
.welcome_video .video-cover{width: 100%;}
.welcome_video .video-cover > div{padding: 26%; border-radius: 10px; background-size: cover;}
.welcome_video .video-cover > div.y2024{background-image: url('../../../images/background/front_video.png?t=1');}
.welcome_video .video-cover > div.y2023{background-image: url('../../../images/background/front_video_2023.png?t=1');}
.welcome_video .video-cover > div.y2022{background-image: url('../../../images/background/front_video_2022.png?t=1');}
.welcome_video .video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	border-radius: 10px; overflow: hidden;
}

.welcome_video .video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.welcome_watch{text-align: center; margin-top: 65px;}
.welcome_watch .wwTitle{font-size: 35px; padding: 0px 15px;}
.welcome_watch .wwDesc{max-width: 700px; color: var(--text_silver); padding: 0px 15px;}
.welcome_watch .wwBox{margin-top: 45px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 25px;}
.welcome_watch .wwBox > div{width: 100%; background-image: linear-gradient(to bottom, transparent, #360805); box-sizing: border-box; padding: 20px 15px; border-radius: 10px; border: 1px solid #431816;}
.welcome_watch .wwBox .wbIcon{margin-bottom: 15px;}
.welcome_watch .wwBox .wbIcon > div{width: 100px; height: 100px;}
.welcome_watch .wwBox .wbtitle > div:first-child{font-size: 35px; font-weight: bold;}
.welcome_watch .wwBox .wbDesc{margin-top: 10px; color: var(--text_silver);}

.welcome_moment{padding: 55px 0px; text-align: center;}
.welcome_moment .wmTitle > div:first-child{font-size: 35px;}
.welcome_moment .wmTitle > div:nth-child(2){max-width: 700px; color: var(--text_silver);}
.welcome_moment .wmBox{margin-bottom: 35px; display: grid; margin-top: 45px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 15px;}
.welcome_moment .wmBox > div{width: 100%;}
.welcome_moment .wmBox > div > div{padding-bottom: 100%; background-color: var(--bg_silvercalm);}

.welcome_catalog{max-width: 1100px; padding: 25px 0px; text-align: center;}
.welcome_catalog .wcTitle{font-size: 35px;}
.welcome_catalog .wcTag{display: flex; max-width: 800px; flex-wrap: wrap; justify-content: center;}
.welcome_catalog .wcTag > div{border: 1px solid var(--bg_gray); transition: var(--transition); cursor: pointer; padding: 7px 13px; border-radius: 10px; margin: 5px; white-space: nowrap;}
.welcome_catalog .wcTag > div:hover{background: var(--bg_gray);}
.welcome_catalog .wcTag > div.active{background: var(--bg_red);}
.welcome_catalog .wcDesc{margin-top: 35px; color: var(--text_silver);}
.welcome_catalog .wcItems{margin-top: 35px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 20px;}
.welcome_catalog .wcItems > a{width: 100%;}
.welcome_catalog .wcItems > a > div{padding-bottom: 150%; background-color: var(--bg_black); border-radius: 10px;}

.welcome_footer{height: 150px;}

/**AUTH**/
.auth_layout{max-width: 420px; padding: 55px 20px 55px 20px;}
.auth_layout .alLogo{width: 110px;}
.auth_layout .alLogo > div{padding-bottom: 85%;}
.auth_layout .alContent{margin-top: 25px;}

.auth_box{margin-top: 35px;}
.auth_box .abTitle{font-size: 25px;}
.auth_box .abForm{margin-top: 15px;}
.auth_box .abBtn{margin-top: 20px;}

/**COMPETITION**/
.competition_layout{padding-top: 35px; padding-bottom: 45px; position: relative;}
.competition_runningtext{opacity: 0.4; width: 100%; overflow: hidden; position: absolute; top: 260px; font-size: 60px; color: #7d211b; font-weight: bold;}
.competition_runningtext .marquee {white-space: nowrap; overflow: hidden; display: inline-block; animation: marquee 150s linear infinite;}
.competition_runningtext .marquee p {display: inline-block;}

.competition_layout .clBanner{width: 430px; position: relative; top: -10px;}
.competition_layout .clBanner > div{padding-bottom: 98%; background-image: url('../../../images/background/front_competition.png'); background-size: cover;}
.competition_layout .clContent{max-width: 900px; text-align: center; margin-top: 25px;}
.competition_layout .clContent .ccTitle{margin-bottom: 25px;}
.competition_layout .clContent .ccTitle > div:first-child{font-size: 20px;}
.competition_layout .clContent .ccTitle > div:nth-child(2){font-size: 30px; margin-top: 5px;}
.competition_layout .clContent .ccDesc{color: var(--text_silver); max-width: 500px;}
.competition_layout .clContent .ccJudges{display: grid; max-width: 700px; margin-top: 45px; margin-bottom: 55px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 20px;}
.competition_layout .clContent .ccJudges > div{width: 100%;}
.competition_layout .clContent .ccJudges > div > div{padding-bottom: 74%; background-size: cover;}
.competition_layout .clContent .ccJudges .cj1{background-image: url('../../../images/background/jury_1.png');}
.competition_layout .clContent .ccJudges .cj2{background-image: url('../../../images/background/jury_2.png');}
.competition_layout .clContent .ccJudges .cj3{background-image: url('../../../images/background/jury_3.png');}
.competition_layout .clContent .ccJudges .cj4{background-image: url('../../../images/background/jury_4.png');}
.competition_layout .clContent .ccJudges .cj5{background-image: url('../../../images/background/jury_5.png');}
.competition_layout .clContent .ccInfo{color: var(--text_silver);}
.competition_layout .clContent .ccBtn{margin-top: 25px;}
.competition_layout .clContent .ccBtn > div > a{display: inline-block;}
.competition_layout .clContent .ccBtn > div > a:not(:last-child){margin-right: 15px;}

.competition_submit{display: grid; margin-bottom: 35px; grid-template-columns: 250px 1fr; grid-gap: 20px; width: 900px;}
.competition_submit > div{width: 100%;}
.competition_submit > div:first-child > div{padding-bottom: 157%; background-image: url('../../../images/background/competition_submit.png'); background-size: cover; border-radius: 10px;}
.competition_submit .csBody{padding-top: 15px; background: var(--bg_white); border-radius: 10px;}
.competition_submit .csBody .cbTimeline{display: grid; margin: 0px 15px 15px 15px; border: 1px solid var(--bg_silver); border-radius: 10px; grid-gap: 10px; padding: 15px; box-sizing: border-box; grid-template-columns: min-content 1fr min-content 1fr min-content; align-items: center;}
.competition_submit .csBody .cbTimeline > div{width: 100%;}
.competition_submit .csBody .cbTimeline .ctItem{display: grid; grid-template-columns: 15px min-content; grid-gap: 5px; align-items: center;}
.competition_submit .csBody .cbTimeline .ctItem > div{width: 100%; white-space: nowrap;}
.competition_submit .csBody .cbTimeline .ctItem > div:first-child > div{width: 15px; height: 15px; background: var(--bg_silver); border-radius: 50%;}
.competition_submit .csBody .cbTimeline .ctItem > div:first-child > div > div{font-size: 10px; text-align: center; position: relative; top: 3px;}
.competition_submit .csBody .cbTimeline .ctItem.saved > div:first-child > div{background: var(--bg_green); color: var(--text_white);}
.competition_submit .csBody .cbTimeline .ctItem.active > div:first-child > div{background: var(--bg_blue); color: var(--text_white);}
.competition_submit .csBody .cbTimeline .ctLine{height: 1.5px; width: 100%; background: var(--bg_silver);}
.competition_submit .csBody .cbContent{padding: 15px; min-height: 250px; border-radius: 10px; background: var(--bg_silvercalm); margin: 0px 15px 0px 15px;}
.competition_submit .csBody .cbContent > div{display: none;}
.competition_submit .csBody .cbContent > div.active{display: block;}
.competition_submit .csBody .cbBtn{display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 15px;}
.competition_submit .csBody .cbBtn > div{width: 100%;}
.competition_submit .csBody .cbBtn > div:nth-child(2){text-align: right;}

.competition_submit_img_still{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
.competition_submit_img_still > div{width: 100%;}
.competition_submit_img_still .csisPreview{padding-bottom: 100%; background-color: var(--bg_silverbold); border-radius: 10px}
.competition_submit_img_still .csisBtn{margin-top: 10px;}
.competition_submit_img_still .csisBtn button{width: 100%;}

.competition_submit_file{margin-top: 15px;}
.competition_submit_file .csfBar{display: grid; grid-template-columns: 1fr 65px; align-items: center; grid-gap: 10px;}
.competition_submit_file .csfBar > div{width: 100%;}
.competition_submit_file .csfBar > div:nth-child(2){font-size: 11px; text-align: right; font-weight: bold; white-space: nowrap;}
.competition_submit_file .csfBar progress{width: 100%;}
.competition_submit_file .csfStatus{display: grid; grid-template-columns: 1fr min-content; align-items: center; grid-gap: 5px; margin-top: 5px;}
.competition_submit_file .csfStatus > div{width: 100%;}
.competition_submit_file .csfStatus > div:nth-child(2){font-size: 11px; font-weight: bold; white-space: nowrap;}
.competition_submit_file .csfStatus .csSignal{padding: 3px 5px; background: var(--bg_white); border-radius: 5px; display: grid; grid-template-columns: 15px min-content; grid-gap: 5px; align-items: center; width: min-content;}
.competition_submit_file .csfStatus .csSignal > div{width: 100%; white-space: nowrap;}
.competition_submit_file .csfStatus .csSignal > div:first-child > div{width: 15px; height: 15px;}

.competition_mysubmit{padding: 20px 15px; max-width: 400px; margin-top: 35px; margin-bottom: 45px; text-align: center; border-radius: 10px; border: 1px solid var(--bg_silver);}
.competition_mysubmit > div:first-child{width: 100px; height: 100px;}
.competition_mysubmit > div:nth-child(2){margin-top: 20px; margin-bottom: 25px;}

.competition_account{padding: 15px; border-radius: 10px; margin-top: 15px; border: 1px solid var(--bg_silver);}
.competition_account .caBox{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
.competition_account .caBox > div{width: 100%;}
.competition_account .caBox > div > div:first-child{color: var(--text_silver); margin-bottom: 3px;}
.competition_account .caBox > div > div:nth-child(2){font-weight: bold; min-height: 15px;}
.competition_account .caBtn{margin-top: 15px;}
.competition_account .caBtn > div{display: inline-block;}
.competition_account .caBtn > div:not(:last-child){margin-right: 15px;}

/**CAMPUSVISIT**/
.campusvisit{padding-top: 35px; padding-bottom: 45px; position: relative;}
.campusvisit .cvLogo{max-width: 650px; width: 95%; margin-bottom: 75px; margin-top: 55px;}
.campusvisit .cvLogo > div{padding-bottom: 33%; background-size: cover; background-image: url('../../../images/background/front_campus_visit.png');}
.campusvisit .cvTxt{margin-bottom: 35px; text-align: center; padding: 0px 20px;}
.campusvisit .cvTxt > div:first-child{font-size: 25px; margin-bottom: 10px; font-weight: bold;}

.campusvisit_tl{max-width: 1000px; padding: 0px 20px;}
.campusvisit_tl .ctItem{padding: 45px 0px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; align-items: center;}
.campusvisit_tl .ctItem > div{width: 100%;}
.campusvisit_tl .ctItem > div:first-child > div:first-child{font-size: 30px; width: 200px;}
.campusvisit_tl .ctItem > div:first-child > div:nth-child(2){width: 200px; margin-top: 3px; color: var(--text_silver);}
.campusvisit_tl .ctItem .ciList{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.campusvisit_tl .ctItem .ciList > div{width: 100%; border: 1px solid var(--bg_red); border-radius: 10px; background-image: linear-gradient(to bottom, transparent, #360805);}
.campusvisit_tl .ctItem .ciList > div > div:first-child{border-bottom: 1px solid var(--bg_red); padding: 10px 0px;}
.campusvisit_tl .ctItem .ciList .clStatus{font-size: 11px; display: grid; grid-template-columns: 10px min-content; white-space: nowrap; grid-gap: 5px; width: max-content; align-items: center; color: var(--text_silver);}
.campusvisit_tl .ctItem .ciList .clStatus > div{width: 100%;}
.campusvisit_tl .ctItem .ciList .clStatus > div:first-child > div{width: 10px; height: 10px;}
.campusvisit_tl .ctItem .ciList .clContent{padding: 15px 0px;}
.campusvisit_tl .ctItem .ciList .clContent > div:first-child{max-width: 150px; width: 90%;}
.campusvisit_tl .ctItem .ciList .clContent > div:first-child > div{padding-bottom: 50%;}
.campusvisit_tl .ctItem .ciList .clContent > div:nth-child(2){margin-top: 15px; text-align: center;}
.campusvisit_tl .ctItem .ciList .clContent .ccDate{margin: 15px 10px 15px 10px; padding: 10px 0px; background: var(--bg_red); border-radius: 10px;}
.campusvisit_tl .ctItem .ciList .clContent .ccDate .cdItem{display: grid; grid-template-columns: 15px min-content; white-space: nowrap; grid-gap: 5px; width: max-content; align-items: center;}
.campusvisit_tl .ctItem .ciList .clContent .ccDate .cdItem > div{width: 100%;}
.campusvisit_tl .ctItem .ciList .clContent .ccDate .cdItem > div:first-child > div{width: 15px; height: 15px;}

.campusvisit_fest{background-size: cover; background-image: url('../../../images/background/bg_red.png');}
.campusvisit_fest > div{max-width: 900px; padding: 0px 20px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.campusvisit_fest > div > div{width: 100%; text-align: center; box-shadow: 0px 0px 0px 1px var(--bg_silver); border-radius: 10px; padding: 15px 0px;}
.campusvisit_fest .cfItem > div:first-child{max-width: 150px; width: 90%;}
.campusvisit_fest .cfItem > div:first-child > div{padding-bottom: 50%;}
.campusvisit_fest .cfItem > div:nth-child(2){margin-top: 15px;}
.campusvisit_fest .cfItem > div:nth-child(3){margin-top: 15px; font-size: 11px; color: var(--text_silver); padding: 0px 15px;}

.campusvisit_detail{max-width: 610px; padding: 0px 20px; margin-top: 130px; text-align: center;}
.campusvisit_detail .cdCampus{font-size: 17px;}
.campusvisit_detail .cdLogo{width: 250px; margin-top: 35px;}
.campusvisit_detail .cdLogo > div{padding-bottom: 50%;}
.campusvisit_detail .cdTitle{margin-top: 35px; font-size: 25px;}
.campusvisit_detail .cdDesc{margin-top: 25px;}
.campusvisit_detail .cdTag{margin-top: 25px;}
.campusvisit_detail .cdTag > div{display: inline-block; margin: 10px;}
.campusvisit_detail .cdTag .ctItem{display: grid; grid-template-columns: 15px 1fr; border-radius: 5px; border: 1px solid var(--bg_silver); padding: 5px 10px 4px 10px; font-size: 11px; grid-gap: 10px; align-items: center;}
.campusvisit_detail .cdTag .ctItem > div{width: 100%;}
.campusvisit_detail .cdTag .ctItem > div:first-child > div{width: 15px; height: 15px;}

.campusvisit_running{width: 100%; overflow: hidden; margin: 90px 0px; font-size: 50px; color: #881414; font-weight: bold;}
.campusvisit_running .marquee {white-space: nowrap; overflow: hidden; display: inline-block; animation: marquee 200s linear infinite;}
.campusvisit_running .marquee p {display: inline-block;}

/**MASTERCLASS & FILMTALKS**/
.mcft_layout{max-width: 800px; padding: 150px 15px 0px 15px; text-align: center;}
.mcft_layout .mlTitle{font-size: 45px; font-weight: bold;}
.mcft_layout .mlDesc{padding: 30px 0px;}
.mcft_layout .mlBtn{margin-top: 35px;}

/**HISTORY**/
.history_menu{margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--bg_gray); border-radius: 10px; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
.history_menu > a{position: relative; width: 100%; color: var(--text_white);}
.history_menu > a > div{padding: 10px 0px; text-align: center;}
.history_menu > a > div.active{color: var(--text_red);}
.history_menu > a:not(:last-child):before{content: ''; position: absolute; right: 0px; top: 0px; height: 100%; width: 1px; background: var(--bg_gray);}

.history_tab_menu{width: min-content; display: grid; margin-top: 25px; margin-bottom: 25px; grid-template-columns: min-content min-content min-content; grid-gap: 15px;}
.history_tab_menu > div{padding: 10px 15px; text-align: center; border-radius: 10px; box-sizing: border-box; width: 100%; cursor: pointer;}
.history_tab_menu > div.active{background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}

.history_tab_content > div{display: none;}
.history_tab_content > div.active{display: block;}

.history_overview{display: grid; grid-template-columns: 250px 1fr; grid-gap: 25px;}
.history_overview > div{width: 100%;}
.history_overview .hoCover > div{padding-bottom: 150%; border-radius: 15px; background-color: var(--bg_gray);}
.history_overview .hoBody{padding: 15px; border-radius: 15px; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid var(--bg_gray);}
.history_overview .hoBody .hbList > div{padding: 15px 0px; display: grid; grid-template-columns: 150px 1fr; grid-gap: 15px;}
.history_overview .hoBody .hbList > div:not(:last-child){border-bottom: 1px solid var(--bg_gray);}
.history_overview .hoBody .hbList > div > div{width: 100%;}
.history_overview .hoBody .hbList > div > div:first-child{color: var(--text_silver);}

/**ABOUT**/
.about_layout{max-width: 610px; padding: 0px 20px; margin-top: 40px;}
.about_layout .alTitle{font-size: 25px; text-align: center; font-weight: bold;}
.about_layout .alIcon{max-width: 400px; width: 90%; margin-top: 45px; margin-bottom: 50px;}
.about_layout .alIcon > div{padding-bottom: 23%;}
.about_layout .alDesc{font-size: 20px; margin-top: 15px; text-align: center;}
.about_layout .alContent{margin-top: 25px;}
.about_layout .alContent .acTitle{font-size: 17px; margin-bottom: 10px; font-weight: bold;}
.about_layout .alContent .acItem{margin-bottom: 20px;}
.about_layout .alContent .acItem.justify{text-align: justify;}
.about_layout .alContent .acItem .aiDesc{font-size: 15px; margin-bottom: 10px;}

/**ERROR**/
.error_page{max-width: 500px; background: var(--bg_silvercalm); border-radius: 10px; margin-top: 70px; margin-bottom: 100px;}
.error_page > div{padding: 30px 35px 35px 30px; font-size: 17px;}
.error_page > div > div:first-child{font-size: 25px; font-weight: bold;}

.error_login{max-width: 570px; padding: 10px 15px; background: var(--bg_orangecalm); border-radius: 10px; margin-top: 80px; margin-bottom: 200px;}
.error_login > div:first-child{font-family: 'bold'; font-size: 15px;}
.error_login > div:nth-child(2){margin-top: 5px;}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}