@charset "UTF-8";
*{
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
	outline: 0;
}

.margin{
	width:960px;
	margin:0 auto;
	background-color:#fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#phase-two #allAboutEllerun,
#phase-two #editorsJourney{
	display:block;
	max-width: 960px;
	min-width: 320px;
	width: 100%;
}


#layerContent #allAboutEllerun .contentContainer,
#layerContent #editorsJourney #contentContainer{
	height:auto;
}

#layerContent #editorsJourney #contentContainer #contentInside .contentEditorTemplate{
	padding-bottom: 15%;
	margin-bottom: 10%;
}

#layerContent #editorsJourney #contentContainer #contentInside,
#layerContent #editorsJourney #contentContainer #contentInside .contentEditorTemplate .editorName,
#layerContent #editorsJourney #contentContainer #contentInside .contentEditorTemplate .editorTitle,
#layerContent #editorsJourney #contentContainer #contentInside .contentEditorTemplate{
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	word-break: break-word;
}

#layerContent #editorsJourney #contentContainer #contentInside .contentEditorTemplate .editorImg{
	width:100%;
	height: auto;
}

.editor-slide-wrapper{
	float:left;
}

.editor-slide-item{
	display:inline-block;
	width:33.33%;
	text-align: center;
	vertical-align: top;
	padding: 0 2%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 50px;
	cursor: pointer;
}

.editor-slide-item img{
	width:100%;
	border-radius: 500px;
}

#allAboutEllerun .slick-arrow,
#editorsJourney .slick-arrow{
	cursor: pointer;
	position: absolute;
	bottom:0;
	border: 0;
	width: 144px;
	padding-top: 144px;
	padding-bottom: 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	overflow: hidden;
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: transparent;
}	

#allAboutEllerun .slick-disabled,
#editorsJourney .slick-disabled{
	display:none!important;
}

#allAboutEllerun .slick-prev,
#editorsJourney .slick-prev{
	left: 40px;
	background-image: url(../images/arrow_left.png);
	width: 141px;
}

#allAboutEllerun .slick-next,
#editorsJourney .slick-next{	
	right: 40px;	
	background-image: url(../images/arrow_right.png);
}

/*
#phase-two #layerContent #eventInformation #schedule #eventDetail1,
#phase-two #layerContent #eventInformation #schedule #eventDetail2,
#phase-two #layerContent #eventInformation #schedule #eventDetail3,
#phase-two #layerContent #eventInformation #schedule #eventDetail4,
#phase-two #layerContent #eventInformation #schedule #eventDetail5,
#phase-two #layerContent #eventInformation #schedule #eventDetail6{
	background-image: url(../images/phase2/eventdetail_bg.png);
}

#phase-two .eventDetail-container{
	text-align:center;
}

#phase-two .eventDetail-container:before{
	content:'';
	height:100%;
	width: 2px;
	margin-left: -7px;
}

#phase-two .eventDetail-container:before,
#phase-two .eventDetail-container .eventDetailBox{
	display:inline-block;
	vertical-align:middle;
	text-transform: uppercase;
	font-family: LucidaGrande,"微軟正黑體";
}

.eventDetailBox .title{
	font-size: 18px;
}

.eventDetailBox .green-title{
	display: inherit;
	font-size: 24px;
	background-color:#d3fc57;
	padding:5px 10px;
	margin-top: 5px;
}

.eventDetailBox .text{
	font-size: 20px;
	font-weight: bold;
	margin-top:25px;
}

#phase-two #layerContent #eventInformation #schedule #event6{
	background-image: url(../images/phase2/event6.png);
}
*/
@media (min-width:321px){
	#phase-two #allAboutEllerun,
	#phase-two #editorsJourney,	
	#layerContent #eventGallery{
		width:960px;
	}
}


@media (min-width:980px){
	#allAboutEllerun .slick-arrow:hover,
	#editorsJourney .slick-arrow:hover{
		background-position: 0 100%;
	}
}

@media (max-width: 640px){
	.editor-slide-item{
		font-size:13px;
		margin-bottom: 20px;
	}

	#layerContent #editorsJourney #contentContainer #contentInside .contentEditorTemplate .editorName{
		font-weight:bold;
	}

	#layerContent #editorsJourney #contentContainer #contentInside .contentEditorTemplate{
		padding-left:10px;
		padding-right:10px;
		padding-bottom: 48px;
	}
	#allAboutEllerun .slick-arrow,
	#editorsJourney .slick-arrow{
		width: 48px;
		padding-top: 48px;
	}

	#allAboutEllerun .slick-prev,
	#editorsJourney .slick-prev{
		left:10px;	
	}
	
	#allAboutEllerun .slick-next,
	#editorsJourney .slick-next{
		right:10px;	
	}

	#layerContent #editorsJourney #contentContainer #contentInside .contentEditorTemplate .editorTitle{		
		word-break: break-word;
	}
}

/* editor popup */
.popup-container,
.popup{
	position: relative;
	display:none;
}

.popup:after,
#editor-detail-view-popup > .margin:after,
#gallery-detail-view-popup > .margin:after{
	content:'';
	position:absolute;
	width: 100%;
	top:100%;
	left: 0;
	height:999px;
	background-color:#fff;
}

.popup-container{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	min-height: 100%;
	overflow: hidden;
	font-family: "Microsoft JhengHei", "微軟正黑體", 'Open Sans';
}

.popup-wrapper{
	width: 960px;
	margin:0 auto;
	background-color:#fff;
}

.popup-content{
	position:relative;
	overflow: hidden;
	padding: 0 20px;
}

.popup-title{
	color:#fff;	
	font-size:30px;
	font-weight:bold;
	text-align:center;
	margin-top:20px;
}

.show-editor-detail #layerContent,.show-editor-detail #layerPopup,.show-editor-detail #layerFooter,
.show-editor-popup #layerTopPart,.show-editor-detail #layerTopPart,
.show-editor-popup #layerContent,.show-editor-popup #layerPopup,.show-editor-popup #layerFooter{
	display:none;
}

.show-editor-detail #editor-popup-container,
.show-editor-detail #gallery-popup-container{
	display:none!important;
}

#editor-popup-container .popup:before{
	content:'';
	position:absolute;
	left: 0;
	right: 0;
	top:0;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 250px 460px 0 460px;
	border-color: #333333 transparent transparent transparent;
}

#editor-popup-container .popup-profile{
	text-align:center;
}

#editor-popup-container .profile-pic{
	
	margin-top:20px;
}

#editor-popup-container .profile-pic > img{
	width:200px;
	border-radius:100px;
}

#editor-popup-container .profile-name{
	font-weight:bold;
	font-size: 28px;
}

#editor-popup-container .profile-title{
	font-size:18px;
}

#editor-popup-container .profile-desc{
	max-width:85%;
	margin-left:auto;
	margin-right:auto;
	font-size: 18px;
}

.editor-instagram-container{
	overflow:hidden;
	margin-bottom: 310px;
}

.editor-instagram-item{
	float:left;
	width:33.33%;
	padding: 0 4px;
	margin-bottom: 2%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-repeat:no-repeat;
	background-position:center;
	background-image:url('../images/loading_001.gif');
	cursor: pointer;
}

.editor-instagram-item .figure{
	padding-top:100%;
	background-repeat:no-repeat;
	background-size:cover;
}

.fixed-bottom-container{
	position:fixed;
	bottom:0;
	left:0;
	width: 100%;
	z-index: 1;
}

.fixed-bottom-container > .margin{
	position:relative;
	padding: 40px 25px 0;
	overflow: hidden;
	min-height: 156px;
}

.btn-loadmore{
	display: none;
	width:145px;
	height: 144px;
	margin:0 auto;
	background-repeat:no-repeat;
	background-position: top center;
	background-size:100%;
	background-image: url('../images/btn_loadmore.png');
	cursor: pointer;
}

.btn-close-popup{
	width: 57px;
	height: 105px;
	background-repeat:no-repeat;
	background-position: 0 top;
	background-size:100%;
	background-image: url('../images/btn_close_popup.png');
	margin:10px 0;
	cursor: pointer;
}

.popup-container .btn-goto-top{
	cursor: pointer;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 156px;
    height: 156px;    
    background-image: url(../images/btn_backtotop.png);
    background-repeat:no-repeat;
    background-size:100%;
}
.no-result{
	font-size:30px;
	padding:10% 0;
	text-align:center;
}

.no-result strong{
	font-size:1.5em;
}

#gallery-detail-view-popup,
#editor-detail-view-popup{
	display: none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	padding-bottom: 165px;
	min-height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	z-index: 1;
}
#gallery-detail-view-popup > .margin,
#editor-detail-view-popup > .margin{
	position: relative;
	padding: 20px 100px 0;
	background-repeat:no-repeat;
	background-position: center 20%;
	background-image:url('../images/loading_001.gif');
}

#gallery-detail-view-popup > .margin{
	background-image:none;
}



#editor-detail-view-popup .figure{
	display: block;
	width:100%;
	padding-top: 86%;
	background-repeat:no-repeat;
	background-position: top center;
	margin: 0 auto 20px;
}

#editor-detail-view-popup .editor-info{
	font-size: 18px;
	overflow: hidden;
	padding-bottom: 20px;
}

#editor-detail-view-popup .profile-pic{
	float: left;
	width:120px;
	padding-top:120px;
	background-size:100%;
	border-radius:100px;
	margin-right: 20px;
}

#gallery-detail-view-popup .fixed-bottom-container > .margin,
#editor-detail-view-popup .fixed-bottom-container > .margin{
	min-height:0;
	padding-left: 100px;
}

#editor-detail-view-popup .profile-info{
	overflow:hidden;
	padding: 5px 0;
	word-break: break-word;
}

#editor-detail-view-popup .name{
	font-size:1.4em;
	margin-bottom:10px;
}

/* all about */
#allAboutEllerun{
	padding-bottom:80px;
}
#allAboutEllerun .title{
	display: block;
	position: relative;
	width: 549px;
	height: 36px;
	margin: 0px auto 12px;
	background-image: url(../images/title_allaboutellerun.png);
	background-repeat: no-repeat;
}

#allAboutEllerun .subtitle{
    width: 960px;
    height: 50px;
    background-color: #333333;
    background-image: url(../images/title_allaboutellerun2.png);
	background-repeat: no-repeat;
	background-position:center;
}

.player-slide-item{
	display:inline-block;
	vertical-align:top;
	width:33.33%;
	padding:0 5px;
	margin-bottom: 10px;
	background-repeat:no-repeat;
	background-position: center;
	background-image:url('../images/loading_001.gif');
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.player-slide-item .figure{
	padding-top:100%;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
}

#player-slick{
	padding: 0 20px 185px;
	margin-top: 50px;
}

@media (min-width:981px){
	.popup-container .btn-goto-top:hover,
	.btn-close-popup:hover,
	.btn-loadmore:hover{
		background-position:0 100%;
	}
}

@media (max-width:640px){
	.margin,.popup-wrapper{
		width:100%;
		min-width:320px;
	}

	.popup-title{
		font-size:18px;
		margin-top: 10px;
	}

	.popup-content{
		padding:0 10px;
	}

	#editor-popup-container .popup:before{
		border-width: 120px 150px 0 150px;
	}

	#editor-popup-container .profile-pic{
		margin-top:10px;
	}

	#editor-popup-container .profile-pic > img{
		width:100px;
	}

	#editor-popup-container .profile-name{
		font-size:20px;
	}

	#editor-popup-container .profile-title{
		font-size:14px;
	}

	#editor-popup-container .profile-desc{
		font-size:18px;
		max-width: 100%;
	}

	.fixed-bottom-container > .margin{
		padding-top: 10px;
		min-height: 100px;
		padding-left: 20px;
	}

	.btn-loadmore{
		width: 50px;
		height: 50px;
	}

	.btn-close-popup{
		width: 30px;
		height: 55px;
	}

	.popup-container .btn-goto-top{		
		width: 100px;		
		height: 100px;
	}
	
	.no-result{
		font-size:25px;
	}
	
	#editor-detail-view-popup > .margin{
		padding: 20px 20px 0;
	}

	#gallery-detail-view-popup > .margin{
		padding: 10px 10px 0;
	}

	#editor-detail-view-popup .profile-pic{
		width: 60px;
		padding-top: 60px;
	}

	#editor-detail-view-popup .editor-info{
		font-size:15px;
	}

	#editor-detail-view-popup .name{
		margin-bottom:5px;
	}
	#gallery-detail-view-popup .fixed-bottom-container > .margin,
	#editor-detail-view-popup .fixed-bottom-container > .margin{
		padding-left: 20px;
	}

	#allAboutEllerun .title{		
		width: 200px;		
		height: 15px;		
		background-size: 100%;		
		margin-bottom: 4px;
	}

	#allAboutEllerun .subtitle{
		width:100%;
		height: 17px;
		background-size: 230px;
	}

	#player-slick{
		margin-top: 10px;
		padding: 0 10px 65px;
	}

	#allAboutEllerun{
		padding-bottom:40px;
	}

	.player-slide-item{
		background-size:30px;
	}

	.editor-instagram-container{
		margin-bottom: 135px;
	}
	#gallery-detail-view-popup,
	#editor-detail-view-popup{
		padding-bottom:95px;
	}
}

@media (max-width:320px){
	.eventDetailBox .title{
		font-size: 7px;
	}

	.eventDetailBox .green-title{
		font-size: 8px;
	}

	.eventDetailBox .text{
		font-size: 8px;
		margin: 5px 0;
	}
}


/* phase 4 */
.event-gallery-show #homeBtn{display:none;}
.event-gallery-show #eventGalleryBtn{display:block;}
.event-gallery-show #layerTopPart #content{position:absolute;}
#eventGallery{position: relative;padding-top: 196px;background-color: #fff;margin: 0 auto;overflow: hidden;min-width:320px;}
.eg-title{position: relative;top: 0px;left: 0px;width: 115px;height: 12px; margin: 0px auto 5px;background: url(../images/phase4/title_eventgallery.png) no-repeat center;background-size: 100%;}
#eventGallery .subtitle{background-color:#333333;background-image: url(../images/phase4/subtitle_eventgallery.png);background-repeat:no-repeat;background-position:center;padding-top: 17px;background-size: 70px;}
#eventGallery .contentInside{padding: 10px 15px;}
#eventGallery .gallery-category{overflow:hidden;margin-bottom: 20px;}
#eventGallery .gallery-category > a{display:block;float:left;width: 100%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;font-size:0;text-indent:-9999px;overflow:hidden;margin-bottom: 3px;padding-left: 1px;padding-right: 1px;cursor: pointer;}
#eventGallery .gallery-category > a.dim{cursor:default;}
#eventGallery .gallery-category > a:before{content:'';display:block;width: 100%;background-repeat:no-repeat;background-size:100%;padding-top: 29%;}
#eventGallery .gallery-category > a.half{width: 50%;}
#eventGallery .gallery-category > a.half:before{padding-top: 58%;}

.gc-1:before{background-image:url('../images/phase4/gallery_1_readysetgorun.jpg');}
.gc-2:before{background-image:url('../images/phase4/gallery_2_ntc.jpg');}
.gc-3:before{background-image:url('../images/phase4/gallery_3_speedrun.jpg');}
.gc-4:before{background-image: url('../images/phase4/gallery_4_shakeoutrun.jpg?v=1');}
.gc-5:before{background-image:url('../images/phase4/gallery_5_10K.jpg?v=1');}

#gallery-popup-container .title{margin-top:20px;}
#gallery-popup-container .subtitle{padding:2px;margin-left:-20px;margin-right:-20px;margin-top: 5px;background-color:#000;color:#fff;text-align:center;font-weight:bold;font-size:12px;font-family: 'Open Sans';}

.gallery-photo-container{margin-top:10px;}

.gallery-slide-wrapper{margin-bottom: 135px;font-size:0;width: 100%;vertical-align: top;}
.gallery-slide-item{display: inline-block;vertical-align:top;width:33.33%;background-repeat: no-repeat;background-position: center;background-image: url('../images/loading_001.gif');-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;background-size: 25px;padding: 2px;cursor: pointer;}
.gallery-slide-item > .figure{padding-top: 100%;background-size: cover;background-repeat: no-repeat;background-position: center;width: 100%;}

#gallery-detail-view-popup .btn-prev,#gallery-detail-view-popup .btn-next,#gallery-popup-container .btn-prev,#gallery-popup-container .btn-next{position:absolute;bottom: 21px;padding-top: 48px;cursor: pointer;background-size:100%;}
#gallery-popup-container .btn-prev,#gallery-detail-view-popup .btn-prev{background-image: url(../images/arrow_left.png);right: 100px;width: 48px;}
#gallery-popup-container .btn-next,#gallery-detail-view-popup .btn-next{background-image: url(../images/arrow_right.png);right:20px;width: 48px;}

#gallery-detail-view-popup .figure{display: block;/* padding-top: 65%; */background-repeat: no-repeat;background-position: center;background-image:url('../images/loading_001.gif');min-height:200px;}
#gallery-detail-view-popup .figure > img{max-width:100%;}


@media (min-width:981px){
	#gallery-popup-container .btn-prev:hover,#gallery-popup-container .btn-next:hover,#gallery-detail-view-popup .btn-prev:hover,#gallery-detail-view-popup .btn-next:hover{background-position: 0 100%;}
	.gc-1:hover:before{background-image:url('../images/phase4/gallery_1_readysetgorun_on.jpg');}
	.gc-2:hover:before{background-image:url('../images/phase4/gallery_2_ntc_on.jpg');}
	.gc-3:hover:before{background-image:url('../images/phase4/gallery_3_speedrun_on.jpg');}
	.gc-4:hover:before{background-image:url('../images/phase4/gallery_4_shakeoutrun_on.jpg');}
	.gc-5:hover:before{background-image:url('../images/phase4/gallery_5_10K_on.jpg');}
}

@media (min-width: 640px){
	#gallery-popup-container .btn-prev,#gallery-popup-container .btn-next,#gallery-detail-view-popup .btn-prev,#gallery-detail-view-popup .btn-next{padding-top: 144px;bottom: 7px;}
	#gallery-popup-container .btn-prev,#gallery-detail-view-popup .btn-prev{width: 141px;right: 250px;}
	#gallery-popup-container .btn-next,#gallery-detail-view-popup .btn-next{width: 144px;}
}

@media (min-width: 321px){
	#eventGallery{padding-top: 570px;}
	#eventGallery .gallery-category > a{padding-left: 2px;padding-right: 2px;margin-bottom: 3px;}
	.eg-title{width: 378px;height: 36px;margin-bottom: 10px;}
	#eventGallery .subtitle{padding-top: 40px;background-size: 173px;}
	#eventGallery .contentInside{padding:25px 35px;}
	#eventGallery .gallery-category{margin-bottom: 100px;}

	#gallery-popup-container .popup-wrapper,#gallery-popup-container .fixed-bottom-container > .margin{width:960px;}
	#gallery-popup-container .title{margin-top:40px;}
	#gallery-popup-container .subtitle{font-size:28px;}

	.gallery-slide-item{background-size:64px;}

	#gallery-popup-container .subtitle{margin-top:10px;}
	.gallery-photo-container{margin-top:20px;}

	.gallery-slide-wrapper{margin-bottom:310px;}
}

@media (max-width:640px){
	

}