@charset "utf-8";
/*Noto Sans TC*/
@import url(https://fonts.google.com/specimen/Noto+Sans+TC);
/*reset*/
html, body { height: 100%;  margin: 0px;}
.headerEAO input, .main input, .footerEAO input, .pop input, .headerEAO select , .main select , .footerEAO select , .pop select {  font-family: 'Noto Sans TC', Helvetica, "微軟正黑體"; font-size: 16px;line-height: 1.2; color:#fff; background-color:#fff; margin:0; padding:0;  }
.headerEAO a, .main a, .footerEAO a, .pop a{ text-decoration:none; }
.headerEAO ul, .main ul, .footerEAO ul, .pop ul{list-style: none;margin: 0; padding: 0;border: none; box-sizing: border-box; } 
.headerEAO p, .main p, .footerEAO p, .pop p, .headerEAO img, .main img, .footerEAO img, .pop img{ margin: 0; padding: 0; border: none; box-sizing: border-box; }

.web{display: block;}
.mobile{display: none;}

h1.EAOh1{ margin: 0; padding: 0;border: none; box-sizing: border-box; position: relative;width:320px; height: 85px; display: block; background: url("../images/logo.png") center top no-repeat; background-siize: 100% auto;}
h1.EAOh1 a.mainInd{position: absolute; bottom: 10px; left: 0; width:187px; height: 60px;display: block;}
h1.EAOh1 a.eaoInd{position: absolute; bottom:10px; right: 30px; width:90px; height: 60px;display: block; }

/*pageSize*/
#pageSize{position: relative;}
/*in*/
.in{width:1280px; margin: 0 auto; box-sizing: border-box;}
/*header*/
.headerEAO{ font-family: 'Noto Sans TC', Helvetica, "微軟正黑體"; font-size: 16px;line-height: 1.2; color:#fff; background-color:#fff; margin:0; padding:0;  box-sizing: border-box;
    position: -webkit-sticky; position: sticky; top:0; z-index: 2; width: 100%; height: 85px; display: block;background: url("../images/hd_bg.jpg") center top no-repeat;}
.headerEAO .in{display: flex; justify-content: space-between; align-items: center;}
.headerEAO ul{display: flex; justify-content:flex-end;align-items: center;list-style: none;}
.headerEAO ul a{color:#fff; font-size:1em ; padding: 0 10px; border-right: 1px solid #fff;}
.headerEAO ul li:last-child a{border-right: none;padding: 0 0 0 10px;}
.headerEAO .menu { position: relative;width:40px ; height:40px ; display: none;  }
.headerEAO .in .menu a{ display: block; height: 40px; position: absolute; top: 0; left:0; right:0; bottom:0; }
.icon_menu { margin: 22px 7px; width: 26px;}
.icon_menu::after, .icon_menu::before, .icon_menu span { background-color: #fff; border-radius: 3px; content: ''; display: block; height: 2px; margin: 6px 0;transition: all .2s ease-in-out;}
.icon_menu::before { transform: translateY(0) rotate(0);}
.icon_menu::after { transform: translateY(0) rotate(0);}
.mm-opened .icon_menu::before { transform: translateY(8px) rotate(135deg);}
.mm-opened .icon_menu::after { transform: translateY(-8px) rotate(-135deg);}
.mm-opened .icon_menu span { transform: scale(0);}
/*footer*/
.footerEAO{ font-family: 'Noto Sans TC', Helvetica, "微軟正黑體"; font-size: 14px;line-height: 1.2; color:#c8d3ed; background:#3c4f7a; margin:0; padding:30px; 
    font-weight: 400; text-align: center; }
.footerEAO ul{display: flex; justify-content: center;flex-wrap: wrap;list-style: none;}
.footerEAO li{padding:3px 10px; border-right:1px solid #c8d3ed;}
.footerEAO li:last-child{border-right:none;}
.footerEAO li a{color:#fff; background: #102757;padding: 3px 5px; margin: 0 5px 0 0;}
.footerEAO li span:first-child::after{content: ":";}
.footerEAO li, .footerEAO p{margin: 0 0 10px;}
.footerEAO .ft_logo a{ width:174px; height:34px; display: block; margin: 0 auto; background: url("../images/footer_logo.png") center top no-repeat; background-size: cover;}

/*btnSet*/
.btnSet{display: flex; justify-content: center; align-items: center; margin: 0 0 50px;}
.btnSet a{font-size: 1.5em; font-weight: bold; text-align: center;padding: 13px 60px; margin: 0 15px; border-radius: 99em;transition: all .3s; }
.btnSet a.org{border:3px solid #f16342; color:#fff; background: #f16342;}
.btnSet a.org:hover{border:3px solid #d64220;  color:#fff;   background: #d64220;}
.btnSet a.bl{border:3px solid #4d83c8; color:#4d83c8; background: #fff;}
.btnSet a.bl:hover{border:3px solid #4d83c8; color:#fff; background: #4d83c8; }


/*pop*/
.pop{position: fixed;top:0; left: 0; width:100%; height: 100%; display: flex;background: rgba(15,22,31,.7);z-index: 5;box-sizing: border-box; font-family: 'Noto Sans TC', Helvetica, "微軟正黑體"; }
.popIn{position: absolute; top:100px; left: 50%; margin: 0 -350px;width:700px; border-radius: 24px;  background: #fff; color:#53617f; transition: all .3s; box-sizing: border-box;}
.popIn h3{ border-top-left-radius: 24px; border-top-right-radius: 24px; background: #ffe96f; display: flex; justify-content: center; align-items: center; margin: 0; padding: 20px;border: none; box-sizing: border-box; }
.popIn h3 img{margin: 0 5px 0 0;}
.popIn h4{font-size: 1.5em;text-shadow: none; margin: 0 0 10px; padding: 0;border: none; box-sizing: border-box; }
.popIn p{ color:#53617f;font-size: 1.125em; margin: 0; padding: 0;border: none; box-sizing: border-box; }
.popIn .withPic{display: flex; justify-content: center; align-items: center; padding: 30px 60px; font-size: 1.5em;}
.popIn .withPic img{margin: 0 30px 0 0;}
.popIn ul.good{width:auto; padding: 20px 0 0; margin: 0 auto  10px;display: table;list-style: none;}
.popIn ul.good h4{ color:#333333; margin: 0; padding: 0;border: none; box-sizing: border-box; }
.popIn ul.good li{position: relative;padding: 0 0 0 50px; margin: 10px 0 20px;}
.popIn ul.good li::before{position: absolute; top:0; left: 0; content: ' '; width:40px; height: 40px; display: block;border-radius: 99em;  }
.popIn ul.good li:nth-child(1)::before{background:#ff8a80 url("../images/pop-ico02.png") center  no-repeat;  }
.popIn ul.good li:nth-child(2)::before{background:#80d8fe url("../images/pop-ico02.png") center  no-repeat;  }
.popIn ul.good li:nth-child(3)::before{background:#6e97d0 url("../images/pop-ico02.png") center  no-repeat;  }
.popIn ul.dot{width:auto; padding: 20px 0 0; margin: 0 auto  10px;display: table;list-style: none;}
.popIn ul.dot li{position: relative;color:#53617f;font-size: 1.5em;padding: 8px 0 8px 30px;}
.popIn ul.dot li::before{position: absolute; top:16px; left: 8px; content: ' '; width:10px; height: 10px; display: block;border-radius: 99em;  background: #fc8981;}
.popIn ul.dot h4{ color:#53617f; margin: 0 0 10px;}

/*route*/
ul.route{width:990px; padding: 0; margin: 0 auto; display: flex; align-items: center;list-style: none;border: none;  box-sizing: border-box;}
ul.route li{display: flex; align-items: center;}
ul.route li::after{content: ">"; display: block; margin: 0 5px; color:#cccccc;}
ul.route li:last-child::after{content: " "; }
ul.route li a{ font-size: 0.875em; color:#cccccc;text-decoration: none;}
ul.route li a:hover{  color:#333333;}
ul.route li:first-child a {display: flex;align-items: center;}
ul.route li:first-child a:before {
            content: ' ';
            width: 20px;
            height: 20px;
            display: block;
            margin: 0 3px 0 0;
            background: url("../images/ind.svg") 1px 0px no-repeat;
 }


/*forEmbed*/
.forEmbed{width:990px; padding: 0; margin: 0 auto 30px; box-sizing: border-box;}

@media screen and (max-width: 1320px){
    /*in*/
    .in{width:100%;padding: 0 20px;}
    /*header*/
    .headerEAO ul a{ font-size:1em ; padding: 0 5px; border-right: 1px solid #fff;}
   
}
@media screen and (max-width: 1030px){
    /*route*/
    ul.route{width:100%;padding: 0 20px;}
    /*forEmbed*/
    .forEmbed{width:100%;padding: 0 20px;}
}
@media screen and (max-width: 767px){
    h1.EAOh1{width:202px; height: 36px; background: url("../images/logo_eoa.svg") center top no-repeat; background-siize: 100% auto;  }
    h1.EAOh1 a.mainInd{ bottom: 0px; width:130px; height: 36px;}
    h1.EAOh1 a.eaoInd{bottom:0px; right: 0; width:60px; height: 36px;}
    .main h3{letter-spacing: 0px; }
    /*in*/
    .in{width:100%;padding: 0 20px;}
    /*header*/
    .headerEAO{height: 60px;background-image: linear-gradient(to right, #003084 , #009fe8);}
    .headerEAO .in{border-top: 3px solid #f5721d; height: 57px; padding: 0 0 0 10px;}
    .headerEAO ul{display: none;}
    .headerEAO .menu {display: block;  }
    /*footer*/
    .footerEAO{padding: 40px 15px;}
    .footerEAO ul{display: block;}
    .footerEAO li{padding:0; border-right:none;}
    .footerEAO li span{display: block;}
    .footerEAO li span:first-child{color:#fff; font-size:1.125em ;}
    .footerEAO li span:first-child::after{content: "";}
    .footerEAO li a{display: block; width:240px;height: 40px; line-height: 40px;  padding:0; margin: 0 auto 5px;font-size:1.125em ;}
    .footerEAO li, .footerEAO p{margin: 0 0 20px;}
    /*btnSet*/
    .btnSet{  margin: 0 0 20px;}
    .btnSet a{font-size: 1.375em; padding: 10px 0; margin: 0 5px; transition: all 0s; width:calc((100% - 10px)/2);}
    /*pop*/
    .popIn{ top:30px;  margin: 0 -150px;width:300px;  }
    .popIn h3{letter-spacing: 0; font-size: 1.4em;}
    .popIn h3 img{width:30px; height: auto;}
    .popIn .withPic{flex-direction: column; padding: 15px; }
    .popIn .withPic img{margin: 0  0 10px;}
    .popIn ul.good {width:260px;margin: 0 auto ;}
    .popIn ul.dot {width:260px;margin: 0 auto ;}
    .popIn .btnSet{padding: 0 15px;}

}