@charset "utf-8";
/* CSS Document */

html,body{ margin:0; padding: 0; overflow-x: hidden;}
.CAD20328_bg{ position: fixed; z-index: 0; width: 100vw; height: 100vh; background:url(../images/bg.jpg); background-position: center center; background-size: cover;}
.p_only{}
.m_only{ display:none;}
@media(max-width:1200px){
.p_only{ display:none;}
.m_only{ display:block;}
}
	
.zone_01{ position: relative; width: 100vw; height: 100vh;}	
.zone_01>div{ position: absolute; left: 50%; max-width: 49.8%; transform: translate(-50%, -50%); animation: pic01 .5s linear forwards; opacity: 0;}
@keyframes pic01 {
0%{ top: 38%; opacity: 0;}
100%{ top: 40%; opacity: 1;}
}
.zone_01 img{ max-width: 100%;}
.zone_01 .arrow_down{ position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); cursor: pointer; animation: arrow_down 1.5s linear infinite; animation-delay: .5s; opacity: 0;}
@keyframes arrow_down {
0%{ bottom: 10px; opacity: 0;}
50%{ bottom: 5px; opacity: 1;}
100%{ bottom: 0px; opacity: 0;}
}
	
@media(max-width:1200px){
.zone_01>div{ width: 100%; max-width: 80%;}
}	

@media(max-width:500px){
.zone_01 .arrow_down{ width: 50px; animation: arrow_down_500 1s linear infinite; animation-delay: 1s;}
}	
@keyframes arrow_down_500 {
0%{ bottom: 22%; opacity: 0;}
50%{ bottom: 21%; opacity: 1;}
100%{ bottom: 20%; opacity: 0;}
}

.zone_02{ position: relative; width: 100vw; height: 100vh;}
.zone_02>div{ position: absolute; top: 50%; left: 50%; width: 1100px; max-width: 100%; transform: translate(-50%, -50%);}
.zone_02>div>img{ float:right;}

@media(max-width:1200px){
.zone_02>div{ max-width: 90%;}
.zone_02>div>img{ float:none; margin: 0 auto 80px; max-width: 100%;}
}

@media(max-width:500px){
.zone_02>div>img{ margin: 0 auto 20px;}
}	
	

.slick_card{ font-size:0; animation: slick_card .5s linear forwards;}
@keyframes slick_card {
0%{ margin: -30px 0 0 0; opacity: 0;}
100%{ margin: 0; opacity: 1;}
}
	
.slider a{ outline:none; color:#000; text-decoration: none;}
.slick_card .card{ display: inline-block; width: 300px; vertical-align: top; border-radius: 15px; box-shadow: 25px 25px 25px rgba(123,149,158,0.2), 50px 40px 40px rgba(152,165,178,0.5);}
.slick_card .card_info{ display: inline-block; width: calc(100% - 300px); padding: 0 30px 0 0; box-sizing: border-box;}
.slick_card .card_info h4{ font-size: 30px; line-height: 1em; margin: 0 0 20px 0; padding: 0 0 0 130px; box-sizing: border-box;}
.slick_card .card_info h3{ font-size: 50px; line-height: 1em; margin: 0; padding: 0 0 0 160px; box-sizing: border-box;}
.slick_card .card_info p{ height: 270px; font-size: 100px; line-height: 1em; margin: 0; padding: 0 0 0 50px; box-sizing: border-box; color: #2970b9;}
.slick_card .card_info p:first-letter{ font-size: 300px; line-height: 1em;}
.slick_card .card_info span{ font-size:100px;}
.slick_card .card_note{ font-size: 20px; font-family: Microsoft JhengHei;}
	
.slick_card .slick-prev{ position: absolute; z-index: 999; right: 70px; top: 385px; background:url(../images/arrow_left.png); width: 95px; height: 90px; outline: none; border: none; cursor: pointer;}
.slick_card .slick-next{ position: absolute; z-index: 999; right: -25px; top: 385px; background:url(../images/arrow_right.png); width: 95px; height: 90px; outline: none; border: none; cursor: pointer;}

@media(max-width:1200px){
.slick_card .card_info h4{ font-size: 20px; padding: 0 0 0 60px;}
.slick_card .card_info h3{ font-size: 40px; padding: 0 0 0 80px;}
.slick_card .slick-prev{ top: 365px;}
.slick_card .slick-next{ top: 365px;}
}

@media(max-width:900px){
.slick_card .card_info h4{ text-align: center; padding: 30px 0 0 0;}
.slick_card .card_info h3{ text-align: center; padding: 10px 0 0 0;}
.slick_card .card_info p{ padding: 0; text-align: center;}
	
.slick_card .card{ display: block; margin: 0 auto; box-shadow: 0px 25px 25px rgba(123,149,158,0.2), 0px 40px 40px rgba(152,165,178,0.5);}
.slick_card .card_info{ width:100%; padding: 0;}
.slick_card .card_note{ text-align:center;}

.slick_card .slick-prev{ right: auto; top: 268px; left: -25px; bottom: auto;}
.slick_card .slick-next{ top: 268px;}
}

@media(max-width:500px){
.slick_card .card{ box-shadow: 0px 10px 10px rgba(123,149,158,0.2), 0px 20px 20px rgba(152,165,178,0.5);}
.slick_card .card_info h4{ font-size: 14px; padding: 20px 0 0 0; margin: 0;}
.slick_card .card_info h3{ font-size: 20px;}
.slick_card .card_info p{ font-size: 80px; height: 180px;}
.slick_card .card_info p:first-letter{ font-size: 180px; height: 180px;}
.slick_card .card_note{ font-size: 13px;}
}



/*---修復輪播白邊---*/
.slick-slide {
  will-change: transform;
}