/* CSS Document */
* {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
   margin: 0;
   padding: 0;
   background: #feeedf;
}

.navbar {
   background: #ef8e8e;
}

.footer {
   background: #feeedf;
   color: #666666;
}

.navbar .yfclogo:hover {
   background: #ca6767 url(../../images/yfclogo2.png) no-repeat 10px center;
   background-size: auto 30px;
}

.navbar .contact:hover {
   background: #ca6767;
}

.navbar .contact_cont {
   border: 5px solid #ef8e8e;
}

.navbar .contact_cont .material-icons {
   background: #ef8e8e;
}

.navbar .contact_cont .title {
   color: #ef8e8e;
   border-bottom: 1px solid #ef8e8e;
}

.navbar .menu,
.navbar .menu_cont>li {
   display: none;
}

.navbar .menu_cont>.list_support {
   display: block;
}

.navbar ul li:hover {
   background: #ca6767;
}

.navbar ul li ul {
   background: #ca6767;
}

.page_container {
   margin: 30px auto;
   width: 94%;
   max-width: 1024px;
   line-height: 1.8;
   text-align: justify;
   font-size: 1rem;
}

.header {
   position: relative;
   background: url(https://www.yfc.tw/page/ymc/images/header.jpg);
   background-size: cover;
   width: 100%;
   height: 0;
   padding-bottom: 56.25%;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

.header_button {
   cursor: pointer;
   position: absolute;
   width: 20%;
   height: 20%;
}

.header1 {
   top: 10%;
   left: 6%;
}

.header2 {
   bottom: 10%;
   left: 6%;
}

.header3 {
   top: 10%;
   right: 6%;
}

.header4 {
   bottom: 10%;
   right: 6%;
}

.bar {
   margin: 20px 0 0 0;
   text-align: center;
}

.note {
   font-size: 27px;
   margin: 0 auto 10px auto;
   font-weight: 500;
   padding: 15px 0;
   color: #327265;
   text-align: left;
}

.note span {
   display: inline-block;
   padding: 0 10px;
   font-size: 17px;
   color: #666666;
}

.note .material-icons {
   vertical-align: sub;
}

.button1,
.button2,
.button3 {
   transition: 0.3s;
   text-align: center;
   display: inline-block;
   border-radius: 12px;
   padding: 12px 24px;
   cursor: pointer;
   font-size: 21px;
   font-weight: 500;
   border-bottom: 3px solid rgba(0, 0, 0, 0.4);
   margin-bottom: 20px;
   background: #fdfcf5;
   color: #0b4564;
}

.button1 {
   transition: 0.3s;
   background: linear-gradient(90deg, #feb483, #cbc2f9);
   color: #0b4564;
}

.button2 {
   transition: 0.3s;
   background: #95c4d4;
   color: #0b4564;
}

.button3 {
   transition: 0.3s;
   background: #ef8ead;
   color: #0b4564;
}

.cont {
   border-radius: 10px;
   background: #fdfcf5;
   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
   padding: 20px 5%;
   margin-bottom: 20px;
   border: 10px solid #ffffff;
}

.cont>img {
   width: 100%;
   max-width: 350px;
}

.cont>a {
   transition: 0.3s;
   display: inline-block;
   padding: 5px 20px;
   text-decoration: none;
   color: #333333;
   background: #ffd8a8;
   border-bottom: 3px solid rgba(0, 0, 0, 0.2);
   border-radius: 20px;
   margin-bottom: 10px;
}

.cont>a:hover {
   transition: 0.3s;
   background: #ff8e02;
   color: #fdfcf5;
}

.button1_cont {
   background: linear-gradient(90deg, #fff3eb, #f9f8ff);
}

.button2_cont {
   background: #f5fcff;
}

.button3_cont {
   background: #fff2f6;
}

.title {
   font-size: 21px;
   font-weight: 500;
   border-bottom: 1px solid #327265;
   margin-bottom: 10px;
}

.cont span {
   font-weight: 500;
}

.link {
   transition: 0.3s;
   background: #ef8e8e;
   position: relative;
   text-align: center;
   border-radius: 12px;
   padding: 12px 24px;
   font-size: 21px;
   font-weight: 500;
   border-bottom: 3px solid rgba(0, 0, 0, 0.3);
   margin-bottom: 20px;
   margin-top: 20px;
}

.link:hover {
   transition: 0.3s;
   background: #da6969;
}

.link a {
   display: block;
   width: 100%;
   height: 100%;
   text-decoration: none;
   color: #fdfcf5;
}

@media screen and (max-width: 880px) {

   .navbar .menu,
   .navbar .menu_cont {
      display: none;
   }

   .navbar .contact {
      position: absolute;
      top: 0;
      right: 0px;
   }

   .navbar .m_support_us {
      position: absolute;
      top: 0;
      right: 50px;
   }

   .cont>img {
      width: 100%;
   }

   .cont>a {
      width: 100%;
      text-align: center;
   }

}