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

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

.wrapper {
    position: relative;
    width: 94%; max-width: 1400px;
    margin: 0 auto;
    font-size: 14px;
}

img {
    width: 100%;
    border: 0;
    vertical-align: top;
}

a {
    text-decoration: none;
}

@media screen and (min-width:768px) {
    .wrapper { font-size: 16px; }
}









/*header*/
h1{background: url(../images/header.jpg) center top no-repeat;     height: 45vw;  background-size: 215%; text-indent: -9999px; }

@media screen and (min-width:1000px) {
    h1{ background-size: auto;   height: 438px;   }
}



/*set*/
.set{background: white; width: 94%; max-width: 1400px; margin: -8vw auto 0; min-height: 125px; border-radius:20px; }
@media screen and (min-width:1000px) {
    .set{margin: -80px auto 0;}
}




/*point*/
.point{background: #33cccc;}
.point ul{display: flex; justify-content: center;  flex-wrap: wrap; align-items: flex-start; }
.point li{color: white; text-align: center; width: 100%; border-bottom: dashed 2px #96ff00; padding: 1.5em 0;  display: flex; flex-wrap: wrap; justify-content: center;}
.point li:last-child{border: none;}
.point img{width: 3.4em; height: 3.4em; background-color: white; border-radius: 5em; border:solid 2px #2db0b0; display: block;}
.point h2{font-size: 180%; font-weight: bold; padding: 0.5em 0; width: 100%;}
.point p{line-height: 1.5;}



@media screen and (min-width:768px) {
    .point ul{flex-wrap: nowrap; padding: 3em 0;}
    .point li{width: 33%; border-bottom:none; border-right: dashed 2px #96ff00; padding: 0 1.5em; }
    .point p{text-align: left;}
}



/*insurance*/
.insurance{position: relative; background: white;  padding: 3em 0;}


.insurance section{width: 100%; display: flex;     align-items: flex-start;   flex-wrap: wrap; }
.insurance section:first-child{margin-top: 0;}
.insurance section:nth-child(even){text-align: right;}
.insurance .pic{ position: relative;}
.insurance .pic b{ font-size: 100%; display: block; position: relative; background: #eca53d; color: white;     padding: 0.5em 1em; width: 100%;      }
.insurance .pic b img{width: auto; height: 1em;}
.insurance article{ display: flex;  }
.insurance article b{display: block; font-size: 325%;  transform: scaleY(1.1); vertical-align: top;     padding: 0.45em 0.2em 0 0;}
.insurance article .wrap{background: white; padding:1.5em 0;     text-align: left;}
.insurance article h4{font-size: 187%; font-weight: bold;}
.insurance article p{padding: 1em 0; line-height: 1.5; }

@media screen and (min-width:480px) {
    .insurance section{align-items: center;  margin-bottom: 5em;}
    .insurance .pic{ width: 55%; }
    .insurance article{display: block; width:45%; padding: 0 0 0 1em;}
    .insurance section:nth-child(even) article{padding: 0 1em 0 0;}
    .insurance article b{padding: 0;}
    .insurance article .wrap{ text-align:inherit; }
}

@media screen and (min-width:768px) {
    .insurance article{ padding: 0 0 0 3em; }
    .insurance section:nth-child(even) article{padding: 0 3em 0 0;}
    .insurance article .wrap{    padding: 3em 0;}
    .insurance .pic b{width: auto; font-size: 125%; position: absolute;  right: 1em; top: -1em;     transform: translateY(0);}
}

@media screen and (min-width:1200px) {
    .insurance section{ width: 60%;  margin-bottom: 0;}
    .insurance section:nth-child(even){margin-left: 40%;}
    .insurance .line{position: absolute; left: 50%; border:solid 1px black; height: 80%;}
}

@media screen and (min-width:1400px) {
    .insurance section{ margin-top: -4em;}
}



/*title*/
.title{padding-bottom: 1.5em;}
.title h3{font-size: 260%; text-align: center; font-weight: bold;}
.title p{text-align: center; font-weight: bold; padding:1em;}
@media screen and (min-width:1400px) {
    .title{padding-bottom: 3em;}
}




/*explanation*/
.explanation{ padding: 3em 0; }
.explanation h3{color: white;}
.explanation li{line-height: 1.2; padding:0.5em;}