html, body {
	height: 100vh;
	height: 100dvh;
}

body{
    margin:0px;
    font-family:  'Noto Sans TC';
}

*{
	box-sizing: border-box;
}

.bg {
	position: relative;
	width:100%;
    height: 100vh;
    height: 100dvh;
    position: relative;
	background-image:linear-gradient(#FFE0BD, #FFEFC6, #FFF4E3);
}

.leftLogoPart{
	position:absolute;
	top:1%;
	left:0%;
}

.leftLogoPartLow{
	position:absolute;
	top:8%;
	left:0%;
	z-index:2;
}

.rightLogoPart{
	position:absolute;
	top:1%;
	right:1%;
    display: inline-grid;
    justify-items: end;
}

.logo{
    width: calc(100vh / 1024* 426);
    height: calc(100vh / 1024* 59);
    background-image: url(../img/bg_EDB_logo.svg);
    background-size: 100% 100%;
}

.chistLogoPart{
	position:absolute;
	top:1%;
	left:0%;
	width:100%;
}
.chistLogoPartLow{
	position:absolute;
	top:8%;
	left:0%;
	width:100%;
}

.competitionlogo{
    width: calc(100vh / 1024* 596);
    height: calc(100vh / 1024* 239);
    background-image: url(../img/logo.png);
    background-size: 100% 100%;
	margin:0 auto;
	margin-top: calc(100vh / 1024* 34);
}

.entercompetitionBtn{
    width: calc(100vh / 1024* 211);
    height: calc(100vh / 1024* 66);
    background-image: url(../img/btn_start.png);
    background-size: 100% 100%;
	cursor:pointer;
}

.entercompetitionBtn:hover{
    background-image: url(../img/btn_start_hi.png);
}

.previouscompetitionBtn{
    width: calc(100vh / 1024* 173);
    height: calc(100vh / 1024* 61);
    background-image: url(../img/btn_history.png);
    background-size: 100% 100%;
	margin-top:5%;
	cursor:pointer;
}

.previouscompetitionBtn:hover{
    background-image: url(../img/btn_history_hi.png);
}

.leftCloud{
    width: calc(100vh / 1024* 324);
    height: calc(100vh / 1024* 357);
    background-image: url(../img/bg_cloud_L.png);
    background-size: 100% 100%;
	
	position:absolute;
	top:8%;
	left:0%;
}

.rightCloud{
    width: calc(100vh / 1024* 177);
    height: calc(100vh / 1024* 100);
    background-image: url(../img/bg_cloud_R.png);
    background-size: 100% 100%;
	
	position:absolute;
	top:12%;
	right:0%;
}

.detailPart{
	position:absolute;
	top:28%;
	left:0%;
	width:100%;
	z-index: 1;
}

.detailPartLow{
	position:absolute;
	top:32%;
	left:0%;
	width:100%;
	z-index: 1;
}

.boxTopLeftImg{
	width: calc(100vh / 1024* 382);
	height: calc(100vh / 1024* 180);
    background-image: url(../img/popup_top_img_L.png);
    background-size: 100% 100%;
	position:absolute;
	top:calc(100vh / 1024 * 163 * -1);
	left:0px;
}

.boxTopRightImg{
	width: calc(100vh / 1024* 281);
	height: calc(100vh / 1024* 192);
    background-image: url(../img/popup_top_img_R.png);
    background-size: 100% 100%;
	position:absolute;
	top:calc(100vh / 1024 * 175 * -1);
	right:0px;
}

.boxTopPart{
	width: calc(100vw / 1440 * (1440 - 250 - 250));
	height: calc(100vh / 1024 * 104);
	margin:0 auto;
	display:flex;
	margin-bottom:-1px;
}

.boxTopPartLow{
	width: calc(100vw / 1440 * (1440 - 250 - 250));
	height: calc(100vh / 1024 * 51);
	margin:0 auto;
	display:flex;
	margin-bottom:-1px;
}

.boxTopLeft{
	width: calc(100vh / 1024 * 91);
	height: calc(100vh / 1024 * 104);
    background-image: url(../img/popup_top_L.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	position:relative;
	margin-right:-1px;
}

.boxTopMid{
	width: calc(100% - 100vh / 1024 * (91 + 91));
	height: calc(100vh / 1024* 104);
    background-image: url(../img/popup_top_M.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	position:relative;
	z-index:2;
}

.boxTopRight{
	width: calc(100vh / 1024* 91);
	height: calc(100vh / 1024* 104);
    background-image: url(../img/popup_top_R.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	position:relative;
	margin-left:-1px;
}

.boxTopLeftLow{
	width: calc(100vh / 1024 * 91);
	height: calc(100vh / 1024 * 51);
    background-image: url(../img/popup_top_w_L_low.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	position:relative;
	margin-right:-1px;
}

.boxTopMidLow{
	width: calc(100% - 100vh / 1024 * (91 + 91));
	height: calc(100vh / 1024* 51);
    background-image: url(../img/popup_top_w_M_low.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	position:relative;
	z-index:2;
}

.boxTopRightLow{
	width: calc(100vh / 1024* 91);
	height: calc(100vh / 1024* 51);
    background-image: url(../img/popup_top_w_R_low.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	position:relative;
	margin-left:-1px;
}

.boxMidPart{
	width: calc(100vw / 1440 * (1440 - 250 - 250));
	margin:0 auto;
	display:flex;
}

.boxMidPartLow{
	width: calc(100vw / 1440 * (1440 - 250 - 250));
	margin:0 auto;
	display:flex;
}

.boxMidLeft{
	width: calc(100vh / 1024 * 91);
	height: calc(100vh / 1024 * 400);
    background-image: url(../img/popup_loop_L.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	margin-right:-1px;
}

.boxMidMid{
	width: calc(100% - 100vh / 1024 * (91 + 91));
	height: calc(100vh / 1024* 400);
    background-image: url(../img/popup_loop_M.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	z-index:2;
}

.boxMidRight{
	width: calc(100vh / 1024* 91);
	height: calc(100vh / 1024* 400);
    background-image: url(../img/popup_loop_R.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	margin-left:-1px;
}

.boxBottomPart{
	position: relative;
	width: calc(100vw / 1440 * (1440 - 250 - 250));
	height: calc(100vh / 1024 * 174);
	margin:0 auto;
	display:flex;
	margin-top:-1px;
}

.boxBottomLeft{
	width: calc(100vh / 1024 * 91);
	height: calc(100vh / 1024 * 174);
    background-image: url(../img/popup_lower_L.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	position:relative;
	margin-right:-1px;
}

.boxBottomMid{
	width: calc(100% - 100vh / 1024 * (91 + 91));
	height: calc(100vh / 1024* 174);
    background-image: url(../img/popup_lower_M.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	position:relative;
}

.boxBottomRight{
	width: calc(100vh / 1024* 91);
	height: calc(100vh / 1024* 174);
    background-image: url(../img/popup_lower_R.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	position:relative;
	margin-left:-1px;
}

.boxBottomLeftImg{
	width: calc(100vh / 1024* 420);
	height: calc(100vh / 1024* 86);
    background-image: url(../img/popup_lower_img_L.png);
    background-size: 100% 100%;
	position:absolute;
	bottom:0;
	left:0;
	
	bottom: calc(100vh / 1024* 10);
    left: calc(100vh / 1024* 12);
}

.boxBottomMidImg{
	width: calc(100vh / 1024* 459);
	height: calc(100vh / 1024* 165);
    background-image: url(../img/popup_lower_img_M.png);
    background-size: 100% 100%;
	margin:0 auto;
	
	position: absolute;
	left: 50%;
    margin-left: calc(100vh / 1024* 459 / -2);
}

.boxBottomRightImg{
	width: calc(100vh / 1024* 355);
	height: calc(100vh / 1024* 86);
    background-image: url(../img/popup_lower_img_R.png);
    background-size: 100% 100%;
	position:absolute;
	bottom:0;
	right:0;
	
	bottom: calc(100vh / 1024* 14);
    right: calc(100vh / 1024* 16);
}

.mainPageContainer{
	width: 100%;
    height: 100%;
	margin:0 auto;
	padding-top:10px;
	padding-bottom:10px;
	overflow-y:scroll;
	margin-top:20px;
}

.textItemContainer{
	padding-right:20px;
}

.containerScrollbar::-webkit-scrollbar {
    position: absolute;
    margin-right: 20px;
    width: 13px;

}

.containerScrollbar::-webkit-scrollbar-track {
    background-color: rgba(227, 204, 155, 1);
    border-radius: 5px;
}

.containerScrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FFDA7E 0%, #D39F24 100%);
    border-radius: 5px;
}

.title {
    margin-bottom: 1%;
    color: rgba(74, 58, 46, 1);
    font-size: 20px;
    font-weight: bold;
}

.title2 {
    margin-bottom: 1%;
    color: rgba(74, 58, 46, 1);
    font-size: 20px;
    font-weight: bold;
    background: -webkit-linear-gradient(90deg, #D41900 -44.64%, #FC8D3D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 1px solid black;
}

.title::after {
    content: "";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid rgba(74, 58, 46, 1);
}

.boxBottom{
	width: calc(100vh / 1024* 962);
	height: calc(100vh / 1024* 176);
    background-image: url(../img/popup_lower.png);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	margin:0 auto;
}

.menuBtnPart{
	width:100%;
	height:100%;
	left:0%;
	top:8%;
	display:flex;
    align-items: center;
    justify-content: space-evenly;
	position:absolute;
}

.menuBtn{
	width: calc(100vh / 1024* 158);
	height: calc(100vh / 1024* 56);
    background-size: 100% 100%;
	background-repeat:no-repeat;
	cursor:pointer;
}

.mainPageBtn{
    background-image: url(../img/btn_main.png);
}

.mainPageBtn.clicked{
    background-image: url(../img/btn_main_hi.png);
}

.mainPageBtn:hover{
    background-image: url(../img/btn_main_hi.png);
}

.detailPageBtn{
    background-image: url(../img/btn_detail.png);
	margin-left:10px;
}

.detailPageBtn.clicked{
    background-image: url(../img/btn_detail_hi.png);
}

.detailPageBtn:hover{
    background-image: url(../img/btn_detail_hi.png);
}

.resultPageBtn{
    background-image: url(../img/btn_result.png);
	margin-left:10px;
}

.resultPageBtn.clicked{
    background-image: url(../img/btn_result_hi.png);
}

.resultPageBtn:hover{
    background-image: url(../img/btn_result_hi.png);
}

.pressPageBtn{
    background-image: url(../img/btn_report.png);
	margin-left:10px;
}

.pressPageBtn.clicked{
    background-image: url(../img/btn_report_hi.png);
}

.pressPageBtn:hover{
    background-image: url(../img/btn_report_hi.png);
}

.photoAlbumBtn{
    background-image: url(../img/btn_album.png);
	margin-left:10px;
}

.photoAlbumBtn.clicked{
    background-image: url(../img/btn_album_hi.png);
}

.photoAlbumBtn:hover{
    background-image: url(../img/btn_album_hi.png);
}
.leftBottomImgLow{
	position:absolute;
	bottom:0%;
	left:0%;

    width: calc(100vh / 1024* 433);
    height: calc(100vh / 1024* 447);
    background-image: url(../img/bg_lower_L.png);
    background-size: 100% 100%;

	z-index:0;
}

.leftBottomImg{
	position:absolute;
	bottom:0%;
	left:0%;
	
    width: calc(100vh / 1024* 433);
    height: calc(100vh / 1024* 447);
    background-image: url(../img/bg_lower_L.png);
    background-size: 100% 100%;
	
	z-index:0;
}

.RightBottomImgLow{
	position:absolute;
	bottom:0%;
	right:0%;

    width: calc(100vh / 1024* 434);
    height: calc(100vh / 1024* 447);
    background-image: url(../img/bg_lower_R.png);
    background-size: 100% 100%;

	z-index:0;
}

.RightBottomImg{
	position:absolute;
	bottom:0%;
	right:0%;
	
    width: calc(100vh / 1024* 434);
    height: calc(100vh / 1024* 447);
    background-image: url(../img/bg_lower_R.png);
    background-size: 100% 100%;
	
	z-index:0;
}

.QRCodeImg {
    width: 100px;
}
	
.linkWrap {
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

.posterImg{
	max-width:100%;
}

.press_title{
    margin-bottom: 1%;
    color: rgba(74, 58, 46, 1);
    font-size: 20px;
    font-weight: bold;
	text-align:center;
}

.press_photo{
	width:100%;
	max-width:100%
}