@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');

html,body {
    padding: 0px; margin: 0px; min-height:100%; font-size:17px; color: #333; line-height:24px;
	font-family: "微軟正黑體", sans-serif, "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	height:100%;
}
a{transition: all 0.3s ease 0s;}
a:link, a:visited {color: #0b5d18; text-decoration: none;}
a:hover {color: #ffa800 ; text-decoration: underline; }
.clear{clear:both}

img {border:0;}
div, ul li{ margin:0px auto; padding:0px;}

.wrap{ width:100%;  height:100%; background: #fbfbfb; overflow:hidden; position:relative;  min-height:860px}
.screen{  position:relative; padding:0px 15px; }
.container{   }

.screen{  max-width:1580px; }

.left { float: left; width:45%; text-align: center; padding:16% 2.5%; position:relative; }
.right { float:right; width:45%; text-align: center; padding:16% 2.5%; position:relative; }

.wrap{ border-top:5px solid #030f77}
.logo { position:absolute; top:30px; width:90%; text-align: center;}
.logo a { display: inline-block; background:#f8f8fa;  }

.fooeter { background:#030f77; padding:15px 0; position:absolute; bottom:0; width:100%; color:#fff;}
.fooeter a { color:#fff; }
.fooeter span { padding:0 20px;}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.content {}
#primary { -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear; 
   background:url(../images/primary.jpg) no-repeat  center center; background-size: 100% 100%; width:100%; height:420px; position:relative; box-shadow: 0 0 3px rgba(0,0,0,.2)}
#primary a{ background:rgba(27,38,132,.0) ; display:block;  width:100%; height:420px;}
#primary h2{ background:rgba(27,38,132,.7) ; color:#fff; font-size:33px; line-height:36px; position:absolute; bottom:-50px; z-index:1; width:50%; left:20%; z-index:2; border-radius:8px; padding:40px 5%;
 -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear; }
#primary h2 span{ font-size:15px; display:block }
#primary p{ border:3px solid #fff; position:absolute; z-index:1; width:calc(100% - 36px); margin:15px 15px; height:385px;}

#primary:hover { background:url(../images/primary.jpg) no-repeat center center; background-size:110% 110%;  box-shadow: 0 0 3px rgba(0,0,0,.5)}
#primary:hover a { background:rgba(27,38,132,.65) ; }
#primary:hover  p{ border:3px solid #cddc39; }
#primary:hover h2{ bottom:100px;}

#secondary { -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear; 
   background:url(../images/secondary.jpg) no-repeat  center center; background-size: 100% 100%; width:100%; height:420px; position:relative; box-shadow: 0 0 3px rgba(0,0,0,.2)}
#secondary a{ background:rgba(27,38,132,.0) ; display:block;  width:100%; height:420px;}
#secondary h2{ background:rgba(103,58,183,.7) ; color:#fff; font-size:33px; line-height:36px; position:absolute; bottom:-50px; z-index:1; width:50%; left:20%; z-index:2; border-radius:8px; padding:40px 5%;
 -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear; }
#secondary h2 span{ font-size:15px; display:block }
#secondary p{ border:3px solid #fff; position:absolute; z-index:1; width:calc(100% - 36px); margin:15px 15px; height:385px;}

#secondary:hover { background:url(../images/secondary.jpg) no-repeat center center; background-size:110% 110%;  box-shadow: 0 0 3px rgba(0,0,0,.5)}
#secondary:hover a { background:rgba(0,0,0,.65) ; }
#secondary:hover  p{ border:3px solid #cddc39; }
#secondary:hover h2{ bottom:100px;}

@media screen and (max-width: 1420px) {
#secondary , #primary, #primary a, #secondary a {height:360px;}
#secondary p,#primary p { height:325px;}
#secondary h2 span, #primary h2 span{ font-size:13px; }
#primary h2, #secondary h2 {left:22.5%; z-index:2; border-radius:8px; padding:20px 2.5%; font-size:26px; line-height:28px;}
.left, .right { width:45%; padding:18% 2.5%; }
.wrap{  min-height:700px ; height:auto; }

}
@media screen and (max-width: 1100px) {
.left, .right { width:45%; padding:22% 2.5%; }	
#primary h2, #secondary h2 {left:12.5%; width:70%; z-index:2; border-radius:8px; padding:20px 2.5%; font-size:26px; line-height:28px;}
}
@media screen and (max-width: 800px) {
.left { width:95%; padding:25% 2.5% 10% 2.5%; }	
.right { width:95%; padding:25% 2.5% 30% 2.5%; }	
.logo { top:0; width:100%; left:0;}
.logo  img{ height:90px;}
#secondary , #primary, #primary a, #secondary a {height:320px;}
#secondary p,#primary p { height:285px;}
}