@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
/* CSS Document */
body{opacity: 0;}
body.fullWidthContent{background:#FFF !important;}
.row{margin:0 auto;}

.page-container{padding-left:0;padding-right:0;}
.page-container a:active,.page-container a:link,.page-container a:visited{font-family: 'Roboto Condensed','Noto Sans','Noto Sans TC', sans-serif;font-weight: inherit;font-size: inherit;color:inherit;}
.page-container p{font-family: 'Roboto Condensed','Noto Sans','Noto Sans TC', sans-serif;font-size: inherit;font-style: inherit;font-weight: inherit;font-variant: inherit;color: inherit;line-height: inherit;letter-spacing: inherit;}
.page-container *{box-sizing:border-box;-webkit-box-sizing:border-box;}
.content-block{width:100%;position: relative;font-family: 'Roboto Condensed','Noto Sans','Noto Sans TC', sans-serif;}
.content-block.fullWidth{}
.main_container_big{min-width:988px;max-width:1280px;margin:0 auto;position: relative;width:100%;}
.inIframe {}
.inIframe .main_container{width:100%;padding:0 60px;}
.bg-img{position: relative;}
.page-container .btn{border-radius: 0;font-family: 'Roboto Condensed','Noto Sans','Noto Sans TC', sans-serif;font-size:14px !important;color:#FFF !important;}
.page-container .btn:active{font-family: 'Roboto Condensed','Noto Sans','Noto Sans TC', sans-serif;font-size:14px;}

.select-style{display:inline-block;position: relative;width:100%;}
.select-style p{position: absolute;margin-bottom:0;top:0;left:0;width:100%;height:45px;background:#FFF;color:#333;font-size:15px;padding: 13px 15px;}
.select-style p:after{content: '';position: absolute;top: 50%;right: 10px;border: 6px solid transparent;border-top-color: #333;margin-top: -5px;}
.select-style select{position:relative;opacity: 0;font-size:15px;color:#333;width: 100%;height: 45px;}

.club-canon-nav{background:#f1f2f4;padding: 0px 10px;font-size:0;z-index: 15;}
.club-canon-nav .icon{padding-right:20px;margin-right:20px;position: relative;display:inline-block;vertical-align: middle;}
.club-canon-nav .icon:after{content:'';position: absolute;top:20px;right:0;height:14px;width:1px;background:#c5c7cb;}
.club-canon-nav br{display:none;}
.club-canon-nav a,.club-canon-nav a:link{font-size:16px;margin-right:20px;display:inline-block;vertical-align: middle;padding-top:20px;padding-bottom:20px;}
.club-canon-nav a.on,.club-canon-nav a.on{color:#e21b22;}
.club-canon-nav a.btn-login{background: #e21b22;color: #FFF;padding: 3px 15px;border-radius: 20px;font-weight: bold;text-transform: uppercase;}
.club-canon-nav a.icon{padding-right:20px;}
.club-canon-nav .mobile-holder{display:inline-block;}
.club-canon-nav .mob-text{display:none;}
.club-canon-nav .btn-holder{display:none;}.club-canon-nav .dropdown{display: inline-block; vertical-align: middle; font-weight: 400; min-width:unset; padding:unset;}
.club-canon-nav .contact_hotline {margin-right:0px;}
.club-canon-nav .dropdown a.dropdown-toggle:after {content: '';position: absolute;border: 5px solid transparent;border-top-color: #333;top: 50%;right: 0px;margin-top: -2px;}
.club-canon-nav .dropdown-menu {border-radius: 0px;border: none;line-height: 30px;min-width: 165px;padding:5px 15px;background-color: #fff;float: right;left:-15px;top: 60px;}
.club-canon-nav .dropdown-menu a {display: block !important; padding:5px 0px; margin-right:unset !important;}

#banner-slider{}
#banner-slider .sp-slide .text{position: absolute;top:45%;left:50%;color:#FFF;}
#banner-slider .sp-slide .text h2{font-size:38px;text-transform: uppercase;margin-bottom:5px;font-weight: bold;}
#banner-slider .sp-slide .text p{font-size:25px;font-weight: 200;margin-bottom:20px;}
#banner-slider .sp-slide .text .btn-more{display:inline-block;padding:15px 30px;background:#e21b22;text-align: center;}
#banner-slider .sp-slide .text .btn-more:after{content:'';background:url(../images/icon-arrow.png);width:57px;height:15px;display:inline-block;vertical-align: middle;}
#banner-slider .sp-buttons{position: absolute;bottom: 40px;}
#banner-slider .sp-buttons .sp-button{border:none;width:20px;height:20px;background:none;position: relative;}
#banner-slider .sp-buttons .sp-button:before{content:'';width:10px;height:10px;background:#FFF;opacity: 0.7;border-radius: 50%;position: absolute;top:50%;left:50%;margin-left:-5px;margin-top:-5px;}
#banner-slider .sp-buttons .sp-button.sp-selected-button:before{display:none;}
#banner-slider .sp-buttons .sp-button .chart{position: absolute;top:50%;left:50%;margin-top:-10px;margin-left:-10px;}

.date-mark{position: absolute;top: 10px;right: 20px;background:#FFF;padding: 6px 9px;font-size:20px;font-weight: bold;color:#000;text-align: center;line-height: 18px;}
.date-mark span{display:block;font-size:11px;line-height: 11px;text-transform: uppercase;}
.item .level{position: absolute;top:10px;left:20px;padding:10px;display: inline-block;background:#FFF;}
.item.introduction .level:before{content:'Intro';color:#000;font-size:15px;font-weight: bold;}
.item.beginner .level:before{content:'Beginner';color:#000;font-size:15px;font-weight: bold;}
.item.advanced .level:before{content:'Advanced';color:#000;font-size:15px;font-weight: bold;}

.tc .item.introduction .level:before{content:'入門';}
.tc .item.beginner .level:before{content:'初階';}
.tc .item.advanced .level:before{content:'進階';}

.photo-holder{position: relative;font-size:0;margin: 0 -10px;}
.photo-holder .item{display:inline-block;vertical-align: top;padding:0 10px;margin-bottom:20px;position: relative;}
.photo-holder .item:hover{text-decoration: none;}
.photo-holder .item img{width:100%;max-height: 300px;}
.photo-holder .item .text{position: relative;width:100%;padding:20px;text-align: left;color:#FFF;}
.photo-holder .item .text:before{content:'';width:100%;height:100%;background:#61558d;position: absolute;top:0;left:0px;}
.photo-holder .item .text .catalog{font-size:12px;font-weight: 500;text-transform: uppercase;position: relative;letter-spacing: 1.5px;margin-bottom: 5px;}
.photo-holder .item .text p{font-size: 15px;font-weight: 300;position: relative;margin-bottom: 0;line-height: 19px;min-height: 38px;}
.photo-holder .item.highlight img{max-height:380px;}
.photo-holder .item.highlight .text{position: absolute;bottom:0;left:10px;width:calc(100% - 20px);padding-top: 60px;}
.photo-holder .item.highlight .text:before{
	background: -moz-linear-gradient(top, rgba(68, 68, 114,0) 0%, rgba(68, 68, 114,0.01) 1%, rgba(68, 68, 114,1) 100%); 
	background: -webkit-linear-gradient(top, rgba(68, 68, 114,0) 0%,rgba(68, 68, 114,0.01) 1%,rgba(68, 68, 114,1) 100%); 
	background: linear-gradient(to bottom, rgba(68, 68, 114,0) 0%,rgba(68, 68, 114,0.01) 1%,rgba(68, 68, 114,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00454573', endColorstr='#61558d',GradientType=0 );
}
.photo-holder .item.highlight .text p{font-size:20px;font-weight: 100;line-height: 26px;letter-spacing: 1px;}
.photo-holder.twoCol .item{width:50%;}
.photo-holder.threeCol .item{width:33.33%;}
.photo-holder.fourCol .item{width:25%;}
.photo-holder.twoCol .highlight{width:100%;}
.photo-holder.threeCol .highlight{width:66.6%;}
.photo-holder.fourCol .highlight{width:50%;}

.photo-holder .item.introduction .text:before{background:#88bbf0;}
.photo-holder .item.introduction.highlight .text:before{
	background: -moz-linear-gradient(top, rgba(136, 186, 240,0) 0%, rgba(136, 186, 240,0.01) 1%, rgba(136, 186, 240,1) 100%); 
	background: -webkit-linear-gradient(top, rgba(136, 186, 240,0) 0%,rgba(136, 186, 240,0.01) 1%,rgba(136, 186, 240,1) 100%); 
	background: linear-gradient(to bottom, rgba(136, 186, 240,0) 0%,rgba(136, 186, 240,0.01) 1%,rgba(136, 186, 240,1) 100%);
	/*background: linear-gradient(to bottom, rgba(163, 204, 121,0) 0%,rgba(163, 204, 121,0.01) 1%,rgba(163, 204, 121,1) 100%);*/
}
.photo-holder .item.beginner .text:before{background:#43c8b5;}
.photo-holder .item.beginner.highlight .text:before{
	background: -moz-linear-gradient(top, rgba(65, 199, 179,0) 0%, rgba(65, 199, 179,0.01) 1%, rgba(65, 199, 179,1) 100%); 
	background: -webkit-linear-gradient(top, rgba(65, 199, 179,0) 0%,rgba(65, 199, 179,0.01) 1%,rgba(65, 199, 179,1) 100%); 
	background: linear-gradient(to bottom, rgba(65, 199, 179,0) 0%,rgba(65, 199, 179,0.01) 1%,rgba(65, 199, 179,1) 100%);
}
.photo-holder .item.advanced .text:before{background:#f3890f;}
.photo-holder .item.advanced.highlight .text:before{
	background: -moz-linear-gradient(top, rgba(242, 137, 17,0) 0%, rgba(242, 137, 17,0.01) 1%, rgba(242, 137, 17,1) 100%); 
	background: -webkit-linear-gradient(top, rgba(242, 137, 17,0) 0%,rgba(242, 137, 17,0.01) 1%,rgba(242, 137, 17,1) 100%); 
	background: linear-gradient(to bottom, rgba(242, 137, 17,0) 0%,rgba(242, 137, 17,0.01) 1%,rgba(242, 137, 17,1) 100%);
}

.photo-month{}
.photo-month .img-holder{position: relative;width:70%;min-height:350px;left:30%;display:inline-block;vertical-align: top;overflow: hidden;}
.photo-month .img-holder img{width:100%;}
.photo-month .img-holder img.bg-img{position: absolute;}
.photo-month .text{position: relative;width:30%;left:-70%;display:inline-block;vertical-align: top;color:#FFF;background:#2e4b73;text-align: left;padding:60px 38px;}
.photo-month .text h2{font-size:22px;color:#FFF;padding-bottom:15px;margin-bottom:30px;position: relative;font-weight: bold;}
.photo-month .text h2:after{content:'';width:40px;height:2px;background:#FFF;position: absolute;bottom:0;left:0;}
.photo-month .text h3{font-size:30px;font-weight: 100;margin-bottom:10px;}
.photo-month .text p{font-size:16px;margin-bottom:30px;font-weight: 300;}
.photo-month .text .by{font-size:14px;margin-bottom:20px;opacity: 0.6;}
.photo-month .text .share-holder{margin-bottom:20px;}
.photo-month .text .share-holder .btn-like{display:inline-block;width:25px;height:25px;background:url(../images/icon-like.png);margin-right:10px;}
.photo-month .text .share-holder .btn-share{display:inline-block;width:25px;height:25px;background:url(../images/icon-share.png);}
.photo-month .text .btn-more{padding: 7px 18px;border:1px solid #FFF;text-transform: uppercase;font-weight: bold;font-size:13px;color:#FFF;display: inline-block;}
.photo-month .text .btn-more:after{content:'>';margin-left:10px;display:inline-block;vertical-align: middle;}
.photo-month.photo-hotspots .img-holder{left:auto;}
.photo-month.photo-hotspots .text{left:auto;background:#454573;}

.banner{overflow: hidden;width:100%;height:500px;}
.banner .bg-img{position: absolute;}
.banner .text{position: absolute;top:50%;left:50%;color:#FFF;width:620px;margin-left:-310px;}
.banner .text h2{font-size: 45px;text-transform: uppercase;margin-bottom: 10px;font-weight: 500;}
.banner .text p{font-size: 20px;margin-bottom: 0px;font-weight: 300;}
.banner .sub-nav{width:100%;position: absolute;top:0;left:0;background:#333333;color:#FFF;text-align: center;font-size:0;padding:15px 0;z-index: 10;}
.banner .sub-nav a{text-transform: uppercase;font-size:14px;display:inline-block;margin: 0 20px;color: #FFF;}

.share-wrapper{background: #DBDBDB;color: #FFF;padding: 10px;position: absolute;font-size:0;border-radius: 20px;left:-100%;top:-100%;}
.share-wrapper a{width:32px !important;height:32px !important;display:inline-block;margin:0 5px;}
.share-wrapper a .at-icon-wrapper{width:100% !important;height:100% !important;}
.share-wrapper a .at-icon-wrapper svg{width:100% !important;height:100% !important;}
.share-wrapper .at-share-tbx-element{display: none !important;}

.col-md-3 {padding:unset;}

@media screen and (max-width: 768px) {
	.row{margin:0 auto;}
	.main_container_big{min-width:0;}

	.content-block .main_container{padding-left:20px;padding-right:20px;}
	.profile-holder .profile-left .text .btn-edit{margin-top: -35px;margin-right: -25px;}

	.club-canon-nav {position: relative; padding:20px 10px;}
	.club-canon-nav .main_container{position: static;}
	.club-canon-nav .mobile-holder{position: absolute;top: 100%;width: 100%;left: 0px;text-align: left;background: #F1F2F4;padding:20px;display:none;height:0;overflow: hidden;}
	.club-canon-nav .mobile-holder br{display:block;}
	.club-canon-nav .mobile-holder a{padding:unset; margin-bottom:10px;}
	.club-canon-nav .mob-text{display:inline-block;vertical-align: middle;font-size: 17px;margin-bottom: 0;position: relative;padding-right:20px;margin-right: 20px;cursor: pointer;}
	.club-canon-nav .mob-text:after{content: '';position: absolute;border: 6px solid transparent;border-top-color: #000;top: 9px;right: 0;}
	.club-canon-nav .btn-holder {display:inline-block; margin-bottom:unset;}
	.club-canon-nav a:link {margin-right:unset;}
	.club-canon-nav a.icon {margin-right:20px; padding:unset; padding-right:20px;}
	.club-canon-nav a.icon:after{top:0px;}
	.club-canon-nav .btn.btn-login{font-weight:normal;}
	.club-canon-nav .contact_hotline {display: block;}
	.club-canon-nav .dropdown a.dropdown-toggle:after{top: 8px;right: -20px;border-left-color: #333;border-top-color: #fff0;}
	.club-canon-nav .dropdown-menu { position:absolute; top: -144px;left: 240%;min-width: 250px;}
	.club-canon-nav .dropdown-menu a {margin: unset;padding: 1px 0px;}

	.photo-holder.threeCol .item{width:50%;}
	.photo-holder.threeCol .highlight{width:100%;}

	.photo-holder.fourCol .item{width:50%;}
	.photo-holder.fourCol .highlight{width:100%;}

	.banner{height:400px;}
	.banner .text{width:400px;margin-left:-200px;}
	.banner .text h2{font-size: 35px;}
	.banner .text p{font-size: 17px;}
	
	.mobile-holder .btn.btn-login{display:none;}
}


@media screen and (max-width: 480px) {
	.photo-holder.twoCol .item {width: 100%;}
	.photo-holder.threeCol .item{width:100%;}
	.photo-holder.fourCol .item{width:100%;}

	.banner{height:300px;}
	.banner .text{width:300px;margin-left:-150px;}
	.banner .text h2{font-size: 30px;}
	.banner .text p{font-size: 15px;}
	
	.club-canon-nav .btn-holder{display:block; margin-top: 10px;}
	.club-canon-nav .mob-text{margin-right:unset;}
	.club-canon-nav .main_container{padding:unset;}
	.club-canon-nav.is_stuck{padding-bottom:4px;}
}