@charset "utf-8";
@media screen and (max-width: 1600px){
.menu-button {
	right: 
}

	.social-bar{right:10%;
	}

}
@media screen and (max-width: 1280px){
	.container-fix {
		width: 100%;
	}
	.menu-button {
		zoom: 0.7;
	}	
	.social-bar{
		top:10px;
		right:15%;

	}
	.social-bar img {
		width: 35px;
		height: 35px;
	}	
	.menu-open .menu-close-button {
		position: absolute;
		top: 20px;
		right: 70px;
	}
	.wrapper2{width:100%;}	
}
@media screen and (max-width: 1200px) {
	.social-bar{right:14%;
	}	
	.main{
/*		height:78vh*/
	}
.menu-button {
	top:10px;
}	
.section-5{

	margin-top: 0;
	padding: 10%;

}

}
@media screen and (max-width: 1100px) {
	.logo{
		zoom:.9;
	}

}
@media screen and (max-width: 991px) {
	.main{
/*		height:60vh*/
	}
	.menu-button {
	top:10px;

	    right: 20px;	
	}	
	.social-bar{
		top:10px;
	}
	.social-bar img {
		width: 40px;
		height: 40px;
	}
	.section-1{
		padding: 50px 0;
	}
	/*.section-2{
		background:#be6183;
	}
	.section-3{
		background:#40a2cd;
	}
	.section-4{
		background:#b488db;
	}*/
	.menu-open .menu-close-button {
		position: fixed;
		right: 20px;
		margin: auto;
	}
	.all {
		padding: 0;
	}
	.slick-dotted.slick-slider {
		margin-bottom: 5vh;
	}
	
}

@media screen and (max-width:768px) {
	body{
		background-position: top center;
	}	
	
	.main {
		width: 100%;
		background-image: none;

		margin: 0 auto;
		width: 100%;
		height: auto;
		padding-bottom: 0;
	}
	.menu-open .menu {
		  margin: 15vh 0 0 0;
	 }
	.aside-nav {
		right: 0;
		width: 80px;
	}
	.social-bar {
		right: 100px;
		display: flex;
	}
	
	.mobile-kv{
		display: block;
		width: 100vw;
		height: 0;
		padding-bottom:110%;
		background-image:  url(../images/768x950.jpg);
		background-repeat: none;
		background-size: 100% auto;

	}
	.kv1{
		display: none;
	}
	.kv2{
		display: none;
	}
	.pc-title{
		display: none;
	}
	.mobile-title{
		display: block;
	}
/*-----------------------第1區--------------------------*/

	.section-1{
		font-family:Arial, '微軟正黑體', 'Microsoft JhengHei', 'LiHei Pro';
		width: 100%;
		margin: 0;
		padding: 50px 0;
		background-color:#17130f;
	}

	.section-1 h2{
		margin: 0 auto 20px;
		width: 88%;
		display: block;
		min-height: 100px;
		overflow: visible;
		height: auto;
	}

/*-----------------------第2區--------------------------*/

	.section-2{
		font-family:Arial, '微軟正黑體', 'Microsoft JhengHei', 'LiHei Pro';
		width: 100%;
		background-color: #1f281f;
		margin: 0;
		padding: 50px 0;
	}

	.section-2 h2{
		margin: 0 auto 20px;
		width: 88%;
		display: block;
		min-height: 100px;
		overflow: visible;
		height: auto;
	}


/*-----------------------第3區--------------------------*/

	.section-3{
		font-family:Arial, '微軟正黑體', 'Microsoft JhengHei', 'LiHei Pro';
		width: 100%;
		margin: 0;
		padding: 50px 0;
		background-color:#0e0e1a;
	}

	.section-3 h2{
		margin: 0 auto 20px;
		width: 88%;
		display: block;
		min-height: 100px;
		overflow: visible;
		height: auto;
	}

	/*.more-btn a{
		display: block;
		background-color: #fff;
		font-size: 25px;
		color: #40a2cd;
		padding: 18px 42px 15px;
		text-align: center;
		margin: 30px auto 0;
		text-decoration: none;
		width: 188px;
		border-radius: 10px;
	}
	.more-btn a:hover{
		background-color: #40a2cd;
		border: 2px solid #fff;
		padding: 16px 42px 13px;
		color: #fff;
		border-radius: 10px;
		text-decoration: none;
	}*/
	/*.box3{
		background-color: #40a2cd;
	}*/

/*-----------------------第4區--------------------------*/

	.section-4{
		font-family:Arial, '微軟正黑體', 'Microsoft JhengHei', 'LiHei Pro';
		width: 100%;
		margin: 0;
		padding: 50px 0;
		background-color: #201e29;
	}

	.section-4 h2{
		margin: 0 auto 20px;
		width: 95%;
		display: block;
		min-height: 100px;
		overflow: visible;
		height: auto;
	}	
	
/*-----------------------Slide--------------------------*/
	
	.slider {/*
        width:60%;*/
    }
	.slider-items-box {
        flex-wrap: wrap;
    }
	.slider-border {
        width: 100px;
        height: 130px;
    }
	.slider img {/*
        width: 85px;
        height: 115px;*/
    }
	
	.slide-box {
		width: 88%;
		padding: 20px 30px;
		border: 2px solid #fff;
		margin: 0 auto;
		z-index: 800;
	}
	.slider-title {
		width: 88%;
		min-height: 60px;
		overflow: visible;
		font-size: 25px;
		margin:0 auto -6px;
		padding: 0;
		z-index: 995;
	}
	.slider-title a{
		display: inline-block;
		margin:0;
		padding: 15px 30px 12px;
		text-decoration: none;
		color: #fff;
	}
	.slider-title a:hover{
		border-top: 2px solid #fff;
		border-left: 2px solid #fff;
		border-right: 2px solid #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		margin:0 -8px 0 0;
		padding: 15px 32px 12px 30px;
	}
	.slider-title .active {
		border-top: 2px solid #fff;
		border-left: 2px solid #fff;
		border-right: 2px solid #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		margin:0 -8px 0 0;
		padding: 15px 32px 12px 30px;
	}
	.slider-mobile-title {
		color: #fff;
		text-align: center;
		margin-left: 10px;
	}
	
	.slick-prev {
        top: 55%;
        left: -52px;
    }
	.slick-next {
		top: 55%;
		right: -20px;
	}
	
	.note-box {
		width: 88%;
		border-radius: 10px;
		padding: 20px 0 10vh;
		margin: -5vh auto 0;
	}
	.section-5{

		margin-top: 0;
		padding: 20%;
	
	}
	
}


/*------------------------------------Slide效果----------------------------------*/

@media screen and (max-width: 445px) {

/*	.section-1{
		padding: 30px 0;
	}
	.section-2{
		padding: 30px 0;
	}
	.section-3{
		padding: 30px 0;
	}
	.section-4{
		padding: 30px 0;
	}
	.section-1 h2{
		width: 95%;
	}
	.section-2 h2{
		width: 95%;
	}
	.section-3 h2{
		width: 95%;
	}
	.slider {
        width:240px;
    }
	.slide-box {
		width: 95%;
		padding: 20px 30px;
		border: 2px solid #fff;
		margin: 0 auto;
		z-index: 800;
	}
	.slider-title {
		width: 95%;
		font-size: 20px;
		margin:0 auto -16px;
	}
	.slider-title a{
		padding: 12px 20px 10px;
	}
	.slider-title a:hover{
		margin:0 -8px 0 0;
		padding: 12px 22px 10px 20px;
	}
	.slider-title .active {
		margin:0 -8px 0 0;
		padding: 12px 22px 10px 20px;
	}*/
	.note-box ul {
		padding: 15px 10% 0;
	}
	.section-5{
		margin-top: 0;
		background-position: center 50%;
	
	}
	
}

/*@media screen and (max-width: 768px) {
    .slick-prev {
        top: 55%;
        left: -52px;
    }
}
*/
@media screen and (max-width: 1060px) {
    .coverflow {
        transform: scale(.8);
        top: -170px;
        right: -10px;
    }
}

@media screen and (max-width: 768px) {
    /*.my-test.slider {
        height: 280px;
        margin-bottom: 80px;
    }*/
}

@media screen and (max-width: 768px) {
   /* .slider-containt {
        margin: 10px 10px;
    }*/
}

/*@media screen and (max-width: 768px) {
    .slick-next {
        top: 55%;
        right: -30px;
    }
}*/

@media screen and (max-width: 768px) {
.logo,.social-bar {
	top:4%;
}	
.menu-button{
	top:35px;
	right:10px;

		zoom: 0.8;	
}

   /* .coverflow {
        transform: scale(.6);
        top: -190px;
        right: -20px;
    }*/
}

@media screen and (max-width: 360px){

/*	.mobile-kv{
		padding: 10vh 0 5vh;
	}
	.slider {
		width: 220px;
	}
	.slick-prev {
		top: 55%;
		left: -36px;
	}
	.slick-next {
		top: 55%;
		right: -14px;
	}*/
}

/*------------------------------------上方header----------------------------------*/

@media screen and (max-width: 600px){

	.aside-nav {
		right: 5px;
		width: 60px;
	}
	.menu-button {

	}
	.menu-open .menu-close-button {
		zoom: 0.8;
	}
.menu-button {
	top:20px;
	}	
	.social-bar {
		top:23px;
		right: 70px;
		display: flex;
	}
	.line-icon {
		zoom:0.8;
	}
	.fb-icon {
		zoom:0.8;
	}
	.logo img{
		width: 150px;
	}
	.mobile-kv img {
    	padding-top: 2vh;
	}
}
@media screen and (max-width: 460px){
	.wrapper2{width:100%;}	
			h2{width:90%;}
/*	.mobile-kv{
		padding: 8vh 0 5vh;
	}*/
}
@media screen and (max-width: 410px){
	/*.mobile-kv img {
    	padding-top: 4vh;
	}*/
	.menu-button {
		top:20px;
		zoom: 0.6;
	}
	.menu-open .menu-close-button {
		zoom: 0.7;
	}
	.line-icon {
		zoom:0.7;
	}
	.fb-icon {
		zoom:0.7;
	}
/*	.logo img{
		width: 80%;
	}*/
}
@media screen and (max-width: 375px){
	.aside-nav {
		top: 10px;
		right: 0;
		width: 50px;
	}
	.social-bar {
		top: 15px;
		right: 50px;
		display: flex;
	}
	.fb-icon {
		margin: 0 0 0 15px;
	}
	.logo {
		width: 160px;
		top: 10px;
		left: 5px;
	}
	.footer {
		font-size: 12px;
		line-height: 1.5em;
	}
}
@media screen and (max-width: 339px){
	.mobile-kv img {
    	padding-top: 2vh;
	}
	.menu-button {
		zoom: 0.5;
	}
	.menu-open .menu-close-button {
		zoom: 0.6;
	}
	.line-icon {
		zoom:0.6;
	}
	.fb-icon {
		zoom:0.6;
	}
	.logo img{
		width: 70%;
	}
	.footer {
		font-size: 10px;
	}
}

/*-----------------------跳出選單RWD--------------------------*/

@media screen and (max-width: 750px) and (max-height:1200px){
	.menu-open .menu {
		  margin: 10vh 0 0 0;
	 }
}
@media screen and (max-width: 600px) and (max-height:940px){
	.menu-open .menu {
		  margin: 7vh 0 0 0;
	 }
}

@media screen and (max-width: 480px) and (max-height:750px){
	.menu-open .menu {
		  margin: 6vh 0 0 0;
		  font-size: 80%;
	 }
}