#mtkContainer {
    text-align: left;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;
}

#mtkContainer * {
    transition: all 0.2s , font-size 0s;
}

.wrapper {
    position: relative;
    width: 94%; max-width: 1220px;
    margin: 0 auto;
}

img {
    border: 0;
    vertical-align: top;
}

a {
    text-decoration: none;
}


/*normal*/

#mtkContainer h1{ background:#0561c0 url(../images/main.jpg) center top no-repeat;
 text-indent: -9999px;
 background-size: 160%; height: 72vw;
 }

.span{height: 50px}
@media screen and (min-width:1220px) {
#mtkContainer h1{background-size: auto;  height: 925px;}
}



.wrapper h3{font-size: 22px;     line-height: 1.2; font-weight: bold; text-align: center;     letter-spacing: 0.05em;
width: 95%; background: white; padding: .8em; border: solid 4px black; border-radius: 5px;
position: relative;
}

.wrapper h3:after{content: ''; display: inline-block; position: absolute; z-index: -1; right: -5%; top: 0.8em;
    width: 95%; height: 100%; background: #ffef23; border: solid 4px black; border-radius: 5px;}

@media screen and (min-width:1220px) {
.wrapper h3{font-size: 28px; }
}






/*main*/
.main{ background: #0561c0;  position: relative;  z-index: 0;  }
.main .wrapper{overflow: hidden;}
.main .title{
    text-align: center; color: #fff; font-size: 22px; font-weight: bold; line-height:1.2; letter-spacing: 0.05em;
    padding: 3%;
    border: 10px solid transparent;
    border-image-source: url(../images/borderA.png);
    border-image-slice: 100; 
    border-image-width: 10;
    border-image-repeat: round;

}
.main .title b{display: block; font-size: 246%; color: #ffef23;}
.main .title small{font-size: 64%; }


.main ul{ font-size: 18px; line-height: 1.2; letter-spacing: 0.05em;  
        padding: 3% 1.5%;
 background: white; border: solid 4px #ffef23; border-radius: 5px; }
.main ul > li{     margin: 0 3%;     padding: 3% 0; display: flex; border-bottom: dotted 2px;}
.main ul > li:last-child{   border-bottom: none;}
.main ul > li b{ background: black; color: white; padding: .3em 0;  width: 30%; margin-right: 5%;text-align: center; }
.main ul > li:nth-child(even) b{background: #fd5858;}
.main ul > li mark{background: none; color: #0561c0; font-weight: bold;}
.main ul > li span{width: 65%;}
.main ul > li a{  color: #0561c0; text-decoration: underline; }
.main ul > li a:hover{  color: #fd5858; }

.main ul > li.detail{background: #e5e5e5; display: block; padding: 0; text-align: center;}
.main ul > li.detail p{display: inline-block; margin: 0 auto; font-weight: bold; background: #0561c0; color: white; padding: 0.5em 2.5em; border-radius: 0 0 2em 2em; letter-spacing: 0.1em;}
.main ul > li.detail ol{display: flex; justify-content: space-between; padding: 1em; text-align: center; flex-wrap: wrap;}
.main ul > li.detail ol li{width: 100%;}
.main ul > li.detail ol strong{display: inline-block; line-height: 1.5; width: 100%; }
.main ul > li.detail ol strong i{ font-style: normal; font-weight: bold; color: #0561c0;}
.main ul > li.detail ol img{border-radius: 15px; border:solid 3px #0561c0; box-shadow: 3px 3px 0px rgba(5,97,192,0.3);     margin: 0.5em 0;     vertical-align: middle;}
.main ul > li.detail ol a{display: inline-block; transition: all 0.2s;}
.main ul > li.detail ol a:hover{transform: scale(0.97); }
.main ul > li.detail ol a:hover img{border:solid 3px #fd5858;}

@media screen and (min-width:500px) {
   .main ul > li.detail ol strong{width: 35%; }
}

@media screen and (min-width:768px) {
    .main .title{ width: 30%; float: left;     padding: 5% 1.5%; }
    .main ul{  width: 70%; float: left; }
}

@media screen and (min-width:1220px) {
    .main .title{ font-size: 28px; }
    .main ul{ font-size: 22px; }
    .main ul > li.detail ol{ flex-wrap: nowrap;  }
    .main ul > li.detail ol li{width: auto;}
    .main ul > li.detail ol strong{ display: block; width: auto; }
}





/*enter*/
.enter .wrapper{background: #fd5858; border: solid 4px; border-radius: 5px; padding: 1%;}
.enterWrap {background: white; border: solid 4px; border-radius: 5px; font-size: 18px;}
.enterWrap h5{text-align: center; font-size: 218%; font-weight: bold; letter-spacing: 0.05em; padding: 0.7em 1.5%; border-bottom:solid 4px; }
.enterWrap a{display: block; background: #ffed00; border-top:solid 4px; text-align: center; font-size: 218%; font-weight: bold; letter-spacing: 0.05em; padding: 0.7em 1.5%; color: black; box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.3);
    animation:enterBtn 0.3s linear infinite alternate;
 }
.enterWrap a:hover{ box-shadow: inset 0 -0.1em 0 rgba(0,0,0,0.4); background: #c1e2ff; animation: paused;  }
.enterWrap a img{ height: 1em; animation:iconA 0.3s linear infinite alternate; }
.enterWrap a:hover img{  }
@keyframes enterBtn {
   from {  }
     to { box-shadow: inset 0 -0.1em 0 rgba(0,0,0,0.4); }
}
@keyframes iconA {
   from { transform: rotate(5deg); }
     to { transform: rotate(-5deg); }
}

.enterWrap article{display: flex; justify-content: center;     flex-wrap: wrap;}
.enterWrap article section img{width: 100%;}
.enterWrap article section[data-content="man"] img{max-width: 250px}
.enterWrap article section[data-content="equipment"]{align-self: flex-end;}
.enterWrap article section p{border-bottom:solid 4px; border-top:solid 4px; line-height: 1.5; padding: 1em 2em;}

@media screen and (min-width:768px) {
    .enterWrap article{   justify-content: flex-end;  flex-wrap: nowrap; }
    .enterWrap article section[data-content="man"]{border-right:solid 4px;}
    .enterWrap article section[data-content="man"] img{max-width: inherit;}
    .enterWrap article section p{border-bottom:solid 4px; border-top:none;}
}

@media screen and (min-width:1220px) {
   .enterWrap{ font-size: 22px; }
}






/*ex*/
.ex{background: #ff7070; position: relative; z-index: 0;}
.ex ul{font-size: 14px; letter-spacing: 0.05em; line-height: 1.5;     padding-left: 2em; }
.ex li{list-style-type: decimal; padding: 0.7em 0; }
.ex li a{color: #0033c5; text-decoration: underline;}
.ex li a:hover{text-decoration: none;}

@media screen and (min-width:1220px) {
   .ex ul{font-size: 18px;}
}