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

.top_noscript{ padding:0 60px; }
.bannerbox{ position:relative; margin-top:150px; padding:0 50px; }
.bannerbox:after{ content:""; display:block; background:#14305b; position:absolute; top:0; left:0; right:0; height:50%; }
.bannerbox .banner{ position:relative; z-index:4; margin:auto; max-width:1820px;  }
.bannerbox .banner .imgbox{ width:100%; padding-bottom:38%; background:#fff; box-shadow: 0 0 15px rgba(0,0,0,0.1); background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.bannerbox .banner .pointbox{ display:flex; justify-content: center; padding:20px 0 0 0; }
.bannerbox .banner .pointbox .point{ width:52px; height:4px; margin:0 15px; background:#eaeaea; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; }
.bannerbox .banner .pointbox .point.hold{ background:#fc8738; }

.banner_slick .banner{ margin-bottom:15px; }
.bannerbox.banner_dot{ margin:-15px 0 0; }
.bannerbox.banner_dot::after{ background:unset;}

.block01{ padding:90px 15px 150px 15px; }
.block01 .mar h1{ font-size:0; }
.block01 .mar{ max-width:1280px; margin:auto; }
.block01 .mar .movbox{ padding:50px 0 0 50px; position:relative; }
.block01 .mar .movbox:before{ content:""; display:block; width:50%; padding-bottom:31%; background:#ffd15f; position:relative; z-index:1; position:absolute; top:0; left:0; }
.block01 .mar .movbox .flexs{ width:100%; border-right:10px solid #ffd15f; display:flex; position:relative; z-index:2; }
.block01 .mar .movbox .flexs .f1{ width:36%; background:#14305b; padding:50px; position:relative; }
.block01 .mar .movbox .flexs .f1 .t1{ font-size:1.125rem; color:#fff; margin:0 0 10px 0; font-weight:300; }
.block01 .mar .movbox .flexs .f1 .t1 a{ color:#fff; font-size:0.938rem; }
.block01 .mar .movbox .flexs .f1 .t2{ font-size:3.125rem; color:#fc8738; font-weight:700; line-height:100%; font-family: 'Noto Serif TC', serif; margin-bottom:30px; }
.block01 .mar .movbox .flexs .f1 .t2 h1{ font-size:3.125rem; color:#fc8738; font-weight:700; line-height:100%; font-family: 'Noto Serif TC', serif; }
.block01 .mar .movbox .flexs .f1 .t3{ font-size:1.125rem; color:#fff; font-weight:bold; }
.block01 .mar .movbox .flexs .f1 .mores{ background:#fc8738; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; line-height:40px; padding:0 20px; color:#fff; display:block; position: absolute; bottom:50px; left:50px; }
.block01 .mar .movbox .flexs .f2{ width:64%; }
.block01 .mar .movbox .flexs .ifbox{ width:100%; padding-bottom:57%; position:relative; }
.block01 .mar .movbox .flexs .ifbox iframe{ width:100%; height:100%; position:absolute; top:0; left:0; margin:auto; }

.block02{ position:relative; padding:100px 15px; }
.block02:before{ content:""; display:block; width:70%; position:absolute; top:0; left:0; bottom:0; margin:auto; z-index:1; background:#fff1e8; }
.block02:after{ content:""; display:block; width:50%; position:absolute; top:20px; bottom:20px; right:0; margin:auto; z-index:2; background-image:url(../images/index/in_bg01.jpg); background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.block02 .mar{ max-width:1280px; margin:auto; position:relative; z-index:5; }
.block02 .mar .title{ display:flex; margin-bottom:30px; align-items: flex-end; }
.block02 .mar .title .hbox{ flex:1; }
.block02 .mar .title .hbox .t1{ font-size:1.125rem; color:#333; margin:0 0 10px 0; font-weight:300; }
.block02 .mar .title .hbox .t2{ font-size:3.125rem; color:#fc8738; font-weight:700; line-height:100%; font-family: 'Noto Serif TC', serif; }
.block02 .mar .title .more{ width:122px; }
.block02 .mar .title .more .btn{ background: #fc8738; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; line-height: 40px; padding: 0 20px; color: #fff; display: block; }
.block02 .mar .flexbox{ margin-left:-15px; display:flex; }
.block02 .mar .flexbox .grids{ padding:0 0 0 15px; width:33.33334%; display:flex; }
.block02 .mar .flexbox .grids .gs{ display:block; background:#fff; width:100%; box-shadow: 0 0 10px rgba(0,0,0,0.1); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.block02 .mar .flexbox .grids .gs .imgs{ width:100%; padding-bottom:72%; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.block02 .mar .flexbox .grids .gs .text{ padding:15px; min-height:110px; }
.block02 .mar .flexbox .grids .gs .text .date{ font-size:0.875rem; color:#333; margin:0 0 5px 0; font-weight:300; }
.block02 .mar .flexbox .grids .gs .text .h1{ font-size:1.125rem; color:#333; font-weight:400; }

.block03{ position:relative; padding:100px 15px; }
.block03 .mar{ max-width:1280px; margin:auto; position:relative; z-index:5; }
.block03 .mar .title{ display:flex; margin-bottom:30px; align-items: flex-end; }
.block03 .mar .title .hbox{ flex:1; }
.block03 .mar .title .hbox .t1{ font-size:1.125rem; color:#333; margin:0 0 10px 0; font-weight:300; }
.block03 .mar .title .hbox .t2{ font-size:3.125rem; color:#fc8738; font-weight:700; line-height:100%; font-family: 'Noto Serif TC', serif; }
.block03 .mar .title .more{ width:122px; }
.block03 .mar .title .more .btn{ background: #fc8738; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; line-height: 40px; padding: 0 20px; color: #fff; display: block; }
.block03 .mar .flexbox{ display:flex; flex-wrap:wrap; margin-left:-15px; }
.block03 .mar .flexbox .grids{ width:25%; padding:0 0 60px 15px; }
.block03 .mar .flexbox .grids .gs{ display:block; background:#fff; width:100%; }
.block03 .mar .flexbox .grids .gs .imgs{ width:100%; padding-bottom:100%; background-position:center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; position:relative; }
.block03 .mar .flexbox .grids .gs .imgs .more{ background: #fc8738; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; line-height: 32px; height:32px; width:100px; text-align:center; color: #fff; display: block; font-size: 0.938rem; font-weight: 300; position:absolute; margin:auto; left:0; right:0; top:20%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; opacity: 0; z-index:2; }
.block03 .mar .flexbox .grids .gs .imgs:after{ content:""; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; }

.block03 .mar .flexbox .grids .gs .text{ padding:15px 0 0 0; }
.block03 .mar .flexbox .grids .gs .text .h1{ font-size:1.125rem; color:#333; margin:0 0 10px 0; }
.block03 .mar .flexbox .grids .gs .text .h2{ font-size:0.875rem; color:#777; font-weight:300; }


/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1024px){
	
.block02 .mar .flexbox .grids .gs:hover{ transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); animation:boxmove 0.7s; -webkit-animation:boxmove 0.7s; -moz-animation:boxmove 0.7s; }

@keyframes boxmove{
	0%{ opacity:1; }
	50%{ opacity:0.5; }
	100%{ opacity:1; }
}
@-webkit-keyframes boxmove{
	0%{ opacity:1; }
	50%{ opacity:0.5; }
	100%{ opacity:1; }
}
@-moz-keyframes boxmove{
	0%{ opacity:1; }
	50%{ opacity:0.5; }
	100%{ opacity:1; }
}

.block03 .mar .flexbox .grids .gs:hover .imgs .more{ top:50%; opacity:1;  }
.block03 .mar .flexbox .grids .gs:hover .imgs:after{ position: absolute; background: rgba(20,48,91,0.8); top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 1; }

}

/*================================●●●●●●●●●●●●電腦●●●●●●●●●●●●================================*/
@media screen and (max-width:1280px){
.top_noscript{ padding:0 25px; }
.bannerbox{ padding:0 15px; }
}

/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (max-width:1200px){
.block01 .mar .movbox{ padding: 20px 0 0 20px; }
.block01 .mar .movbox .flexs .f1{ padding:15px; }
.block01 .mar .movbox .flexs .f1 .mores{ bottom: 20px; left: 20px; }
}

/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
.bannerbox{ margin-top:100px; }

.block01 .mar .movbox .flexs{ display:block; width:auto; }	
.block01 .mar .movbox .flexs .f1{ width:auto; }
.block01 .mar .movbox .flexs .f1 .mores{ left:auto; right:15px; }
.block01 .mar .movbox .flexs .f2{ width:100%; }

.block03 .mar .flexbox .grids{ width:33.33334%; }

}

/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
.bannerbox{ margin-top:70px; }
.bannerbox .banner .pointbox .point{ width:40px; margin:0 10px; }	

.block01{ padding:40px 15px 40px 15px; }
.block01 .mar .movbox { padding: 10px 0 0 10px; }
.block01 .mar .movbox .flexs{ display:block; width:auto; border-right:5px solid #ffd15f; }	
.block01 .mar .movbox .flexs .f1{ width:auto; padding: 15px 15px 60px 15px; }
.block01 .mar .movbox .flexs .f1 .t1{ font-size:0.875rem; margin:0 0 5px 0; }
.block01 .mar .movbox .flexs .f1 .t2{ font-size:1.5rem; margin-bottom:15px; }
.block01 .mar .movbox .flexs .f1 .t2 h1{ font-size:1.5rem; }
.block01 .mar .movbox .flexs .f1 .t3{ font-size:0.938rem; }
.block01 .mar .movbox .flexs .f1 .mores{ left:auto; right:15px; font-size: 0.875rem; padding: 0 15px; line-height: 32px; }
.block01 .mar .movbox .flexs .f2{ width:100%; }

.block02{ padding: 40px 15px; }
.block02:after{ width:40%; }
.block02 .mar .title .hbox .t1{ font-size:0.875rem; margin-bottom:5px; }
.block02 .mar .title .hbox .t2{ font-size:1.5rem; }
.block02 .mar .title .more{ width:100px; }
.block02 .mar .title .more .btn{ font-size: 0.875rem; padding: 0px; text-align:center; line-height: 32px; }
.block02 .mar .flexbox .grids{ width:50%; }
.block02 .mar .flexbox .grids:last-child{ display:none; }
.block02 .mar .flexbox .grids .gs .text .h1{ font-size:1rem; }
.block02 .mar .flexbox .grids .gs .text .date{ margin:0; font-size:0.75rem; }

.block03{ padding:40px 15px; }
.block03 .mar .title .hbox .t1{ font-size:0.875rem; margin-bottom:5px; }
.block03 .mar .title .hbox .t2{ font-size:1.5rem; }
.block03 .mar .title .more{ width:100px; }
.block03 .mar .title .more .btn{ font-size: 0.875rem; padding: 0px; text-align: center; line-height: 32px; }
.block03 .mar .flexbox .grids{ width:50%; padding: 0 0 40px 15px; }
.block03 .mar .flexbox .grids .gs .text{ padding:10px 0 0 0; }
.block03 .mar .flexbox .grids .gs .text .h1{ margin-bottom:5px; }

}