@charset "utf-8";

/* CSS Document */



@media all and (max-width: 1500px) {

	

}



@media all and (max-width:1150px) {

	

	

	

	

}



@media all and (max-width: 1140px){

	.header { width: 100%;}

	nav { width: 100%;}

	.mainWidth {

		width: 100%;

		padding: 1em;

		margin: auto;

	}

	/*選單*/

	[off-canvas] { z-index:99999!important;}

	header { display:none;}

	

	.fixed-header-offset {

		margin-top: 90px;

		height:auto;

	}

	.fixed-header {

		display: block;

		width: 100%;

		height: 70px;

		position: fixed;

		top: 0px;

		z-index: 1080; /* Must be higher than canvas container of 1 */

		background:url("../../images/mobile-nav-bg-c.png") bottom repeat-x;

		background-size: 100px 100px;	

	

	}

	.fixed-header.shadow{

	-webkit-box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.2);

    -moz-box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.2);

    box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.2);}

	.menu-link { position:absolute; top: 1.2em; right:1em; cursor:pointer;}

	.menu-link img { width:45px; }	

	

	.mobileMenu{display: block; padding:0.3em 0 0 0; }

	.mobileMenu .logo {  z-index:16; }

	.mobileMenu .logo img{ width: 235px; height: auto; margin:1.4% 0 0 3%;}

	.mobileMenu a.donate {position: absolute; right: 7em; top: 1.5em;   background: #00acb2; color: #fff; font-weight: bold; text-align: center; padding: 0.3em 0.9em; z-index: 999}

	

	.mobileMenu .searchBtn  { right: 4.8em; top: 1.8em; width:35px; height:35px;z-index: 999;}

	

	.menu ul li:hover, .menu ul ul > li a:hover {}

    .menu { }

    .menu > ul ul { overflow: hidden; max-height: 0;}

    .menu > ul > li{ 

		width: 100%;

		border:0; 

		padding: .65em; 

		margin:0 ;

		border-bottom: 1px solid #ebebeb; 

		text-align:left;

	}

    .menu > li > ul.sub-menu { padding: 0px; border: none; }

    .menu.active, .menu > ul ul.active { max-height: 100%; }

    .menu ul {  }

    .menu li, .menu > ul > li { display: block; background: #fff ;}



	.menu > ul > li:hover > a { color: #212121;}

    .menu li a { }

    .menu li li a{border-top:0;}

    .menu li.has-sub-menu > a:after {

		position: absolute;

        top: 20px;

        right: 35px;	

	    background-image: url('../../images/mobile_arrow.png');

        background-size: 14px 9px;

		-webkit-background-size: 14px 9px;

        -moz-background-size: 114px 9px;

        -o-background-size: 14px 9px;

        display: inline-block;

        width: 14px; 

        height: 9px;

        content:"";

	}

	.menu li.has-sub-menu li a:before {content: "·"; padding-right: 8px}

	

	.menu li.has-sub-menu > a.active:after {}

	@keyframes subm{

		from{opacity: 1;}

        to{opacity: 1;}

     }

	.menu > ul > li > a {color:#212121;border-bottom: 0;}

	.menu > ul > li > a:hover {color:#212121; border-bottom: 0; background-color:transparent;}

	

	.menu ul ul > li a:hover {color:#212121;}

	.menu > ul > li a.active { background-color: transparent; border-bottom: 0px}

	.menu ul ul, .menu ul ul ul, .menu > ul > li > ul { display: inherit; position: relative; left: auto; top:auto; border:none; }

	.menu ul li a { 

		height:auto; width: 100%;

		display: block;

		padding: 5px;

	}

	.menu ul ul > li a {  font-size: 0.92em; padding:10px 25px 10px 10px; height: auto; background-color: transparent;border-left:0px; color: #666666;}

	.menu li li a, .menu > ul > li.active li a { background-color: transparent; padding: 19px 18px 19px 30px; 

	filter:alpha(opacity=100); -moz-opacity:100;  opacity: 1;   color: #212121; border-top: 0px ; border-bottom: 0;}

	.menu > ul > li.active a {border-bottom: 0;}

	.nav .flex_row {

		flex-direction: column;

	}

	nav > ul {

		position: absolute;

		z-index: 9;

		width: 100%;

		padding: 1em 0;

	}

	nav ul ul {

		margin-left: auto;

		padding-top: 0;

	}

	nav ul ul li {

		width: 110px;

		height:45px;

		display: block;

		position: relative;

		background: none;

		margin-top: -4px;

		padding-top: 12px;

	}

	.menu ul ul li { text-align: left;}

	nav ul ul li::before, nav ul ul li::after, nav ul ul li a::after {

		background: none;

		display:none;

	}



	.menu li.login_style, .menu > ul > li.login_style {

		position: absolute;

		left: 150px; top: 26px;

		background:#76b4b7;

		border-radius: 15px;

		width: 70px!important; height: 30px;

		color:#fff;

		padding: 2px; 

		text-align: center;
		z-index: 999;

	}

	.menu > ul > li.login_style > a {

		color:#fff;

	}

	.logo {

		background: url("../../images/logo-han-tsi.png") top no-repeat ;

		background-size: 198px 70px;

		width: 198px; height: 66px;

		display: block;

		margin-left: 1em;

	}

	.impactBox { padding-top: 20px;} 

	.impact { 

		width: 95%;

		height: auto;

		margin-top: 70px;

	}

	.innerPage .top { padding-top: 150px;}

	.event-pic { margin: 25px auto 0 auto;}

	.innerEvent.innerBanner::after { right: 40px;}

	.innerResources.innerBanner::after { bottom:-45px; left:25px;}

	.top_bg { 

		background-size: 900px auto;

	}

	.top { padding-bottom:90px;}

	.top_bg { bottom: -78px;}

	

	

	.contResources .contPic { width: 100%; height: auto;}

	.contResources .contPic::before { 

		width: 100%; height: 0;

		top: 0; left: 0;

		padding-bottom: 65%;

	}

	.contFile .contPic { width: 100%; height: auto;}

	.contFile .contPic img { width: 100%;}

	.contFile .contPic::before {

		width: 100%; height: 0;

		top: 0; left: 0;

		padding-bottom: 89%;

	}

	.contCompetition::before { width: 25px; }

}



@media all and (max-width:1130px) {

	.slogan {

		background: url("../../images/index-slogan-s.png") center no-repeat;

		background-size: 711px auto;

		width: 711px; height: 82px;

		margin: auto;

	}

}



@media all and (max-width:1110px) {

	.innerPaper .btn {

			margin: 10px 65px;

	}

}



@media all and (max-width:970px) {

	.innerPaper .btn {

			margin: 10px 55px;

	}

}



@media all and (max-width:950px) {

	.innerResources .item {

		width: 100%;

	}

	.innerResources .item.flex_row {

		justify-content: flex-start;

	}

	.innerResources .contSide { width: auto;}

	.innerResources .item:nth-child(odd) {

		background:url("../../images/lineHorizontal.png") repeat-x;

		background-position: bottom 0 left 0;

		background-size: 546px auto;

	}

}



@media all and (max-width: 900px) {

	.footer .flex_row {

		flex-direction: column;

	}

	.footer { font-size: .8em; }

	.f_box { min-height: 191px; }

	.footer p { text-align: center;}

}



@media all and (max-width:890px) {

	.innerPaper .btn {

			margin: 10px 45px;

	}

}





@media all and (max-width:800px) {

	.innerReference.innerBanner::before { left: 20px;}

	.innerReference.innerBanner::after { right: 20px;}

	.swiper-slide { width: 46%;}

}



@media all and (max-width:810px) {

	.innerPaper .btn {

			margin: 10px 35px;

	}

	.f_box { min-height: 210px; }

}



@media all and (max-width:768px) {

	.swiper-container3 .swiper-slide {

		display:flex;

		justify-content: center;

	}

	

	.contCompetition .swiper-slide { width:100%!important; }

	.contCompetition .swiper-slide::after { display: none;}

	.contCompetition::before { display: none;}

	

	

}



@media all and (max-width:767px) {

	.contCompetition .contTxt { width: auto;}

	

}





@media all and (max-width: 760px) {

	.event-pic { width: 100%; height: auto; }

	.event-pic::before {

		width: 101%; height: inherit;

		padding-bottom: 67.5%;

		top: 0; left: 0;

	}

}



@media all and (max-width:740px) {

	.slogan {

		background: url("../../images/index-slogan-ss.png") center no-repeat;

		background-size: 306px auto;

		width: 306px; height: 108px;

		margin: auto;

	}

	.innerReference .item { 

		margin-bottom: 2em;

		background: none;

	}

	.innerReference .item.flex_row {

		flex-direction: column;

	}

	.sort { 

		text-align: center;

		flex: 0 0 auto;

		margin: auto;

	}

	.innerReference .contTxt {

		width: 100%;

	}

	.innerPaper .btn {

			margin: 10px 25px;

	}

}



@media all and (max-width: 650px) {

	.innerPaper .mainWidth { padding: 0 75px;}

}



@media all and (max-width: 640px) {

	.impact .swiper-slide .ph {  

		/*padding-bottom: 56.25%;*/

	}

	

	.innerResources .item.flex_row {

		flex-direction: column;

		align-items: center;

	}

	.innerResources .contSide { width: 100%;}

	.innerNews .item { width: 100%;}

	.innerNews .item:nth-child(odd) {

		background:url("../../images/lineHorizontal.png") repeat-x;

		background-position:bottom 0 left 0;

		background-size: 546px auto;

	}

	.innerNews.innerBanner::before { left: 10px;}

	.innerNews.innerBanner::after { right: 10px;}

	.innerCompetition .item { width: 100%;}

	.innerCompetition .item:nth-child(odd) {

		background:url("../../images/lineHorizontal.png") repeat-x;

		background-position: bottom 0 left 0;

		background-size: 546px auto;

	}



}



@media all and (max-width: 605px) {

	.f_box { min-height: 230px; }

}

@media all and (max-width: 550px) {

	.innerEvent.innerBanner::before { left: 10px; transform: scale(0.8);}

	.innerEvent.innerBanner::after { right: 10px; /*transform: scale(0.8);*/ width: 86px;}

	.innerNews.innerBanner::before { transform:scale(0.8);}

	.innerNews.innerBanner::after { transform:scale(0.8); top: 55px;}

	.innerCompetition.innerBanner::after {transform: scale(0.8); right: 20px;}

	.innerCompetition.innerBanner::before {  transform: scale(0.8); left: 10px;}

	.t2-competition { margin-bottom: 60px;}

	.dd-menu { top: 180px; left:calc(50% - 45px);}

	.innerCompetition.mainWidth { margin-top: 20px;}

	.innerReference.innerBanner::before { transform: scale(0.8); top: 92px;}

	.innerReference.innerBanner::after {transform: scale(0.8); top: 80px;}

	.innerResources.innerBanner::before {transform: scale(0.8); right:10px;}

	.innerResources.innerBanner::after {transform: scale(0.8); left: 15px;}

	

}



@media all and (max-width: 500px){

	.innerCompetition .item.flex_row {

		flex-direction: column;

		

	}

	.innerCompetition .btn { margin-top: 16px;}

	.innerCompetition .contTxt { width: 100%;}

}



@media all and (max-width: 450px){

	.contCalendar .swiper-container3 .swiper-wrapper.flex_row { align-items: center;}

	.cal_month { margin-right: 1em;}

	.item_date.flex_row {

		flex-direction: column;

		just-content: flex-start;

		align-items: flex-start;

	}

	.cal_date {

		width: auto;

		display: flex;

		flex-direction: row;

	}

	.t-date { margin-right: 1em;}

	.t-name { text-align: left;}

	.t-name span { margin-right:10px;}

	.f_box { min-height: 245px; }

}