html,body{
    font-family:Adobe 繁黑體 Std, Microsoft JhengHei, Microsoft YaHei, Arial, 'Times New Roman';
    cursor: default;
    overflow-x: hidden;font-size: 16px;
}
div{
    position: relative;
}
#myDiv{
    /* display: none; */
}

/* 小物件 */
#wrapper{
    background: black;
    opacity:.7;
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    z-index:8888;
    visibility: hidden
}
#gotop{
    position: fixed;
    bottom:20px;
    right:20px;
    cursor: pointer;
    background: #000;
    opacity: .7;
    border-radius: 10px;
    z-index: 999;
    display: none;
}
#gotop:hover{
    opacity: 1;
}    
#gotop img{
    height: 45px;
    width: 45px;
}
button{
    background: #000;
    position:absolute;
    top:150px;
    right:2%;
    border:none;
    cursor: pointer;
    outline: none;
    opacity: .7;
    border-radius: 10px;
    z-index: 5555;
    padding: 15px;
    display: none;
    width: 60px;
    height: 60px;
}
button img{width: 100%;}
#aside-menu{
    position: fixed;
    top:0px;
    width:100%;
    height: 100vh;
    overflow-y: scroll;
    left:0;
    background: linear-gradient(#0393c8, #0d5e9f); 
    background: -moz-linear-gradient(#0393c8, #0d5e9f); 
    background: -webkit-linear-gradient(#0192C8, #0d5e9f); 
    background: -o-linear-gradient(#0393c8, #0d5e9f); 
    padding:20px 30px;
    display: none;
    z-index: 9999;
}
#aside-menu .nav{
    display: block;
    text-align: center;
    width:95%;
    margin:10px auto;
}
#aside-menu .nav .nav-item{
    background:rgba(2, 74, 104, 0.2);
}
#aside-menu .nav .nav-item .nav-link{
    color:#FCFCFC;
    font-size:1.5rem;
    letter-spacing: 10px;
    padding:20px 0
}
#loader{
    position: relative;
    display: flex;
    align-items:center;
    justify-content:center;
    display: none;
}
#loader .smart-glass{
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 450px;
    height: 450px;
}
#loader .logo{
    width: 450px;
    height: 450px;
    position: relative;
}
#loader .circle{
    padding: 20px;
    border: 6px solid transparent;
    border-top-color: #0093c6;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: connect 2.5s linear infinite;
}
#loader .name{
    position: relative;
    animation: fadein 2s;
}
@-webkit-keyframes connect{
    0%{-webkit-transform: rotate(0deg)}
    100%{-webkit-transform: rotate(-360deg)}
}
@keyframes connect{
    0%{transform: rotate(0deg)}
    100%{transform: rotate(-360deg)}
}
@keyframes fadein{
    0%{opacity: 0}
    100%{opacity: 1}
}


/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 
@media (max-width:1024px) and (min-height:1366px){
    button{ display: block }
    #top #top-menu{ display: none; }
}
@media (max-width:1023px){
    #gotop img{ height: 90px; width: 90px; }
    button{ display: block }
}

/* header 開始 */
header{
    border-bottom:1px solid #999; 
    padding:20px;
    padding-bottom:0px;
    position: relative;    
}
header #top-logo{
    width:265px;
    height:110px;
    position: relative;
    margin: 0 auto;
}
header #top-logo img{
    width:100%;
}
header #top-logo p{
    color:#0001f2;
    font-size:28px;
    font-weight: bold;
    position: absolute;
    bottom:0px;
}
header .nav{
    font-family:Microsoft JhengHei;
    position: absolute;
    right: 20px;
    bottom:5px;
}
header .nav .nav-item .nav-link{
    transition: .5s ease;
    color: #3f3f3f;
}
header .nav .nav-item .nav-link:hover{
    color: #ababab;
}
@media (max-width:1024px){
    header .nav .nav-item .nav-link{ padding:.5rem .3rem }
}
@media (max-width:1024px) and (min-height:1366px){
    header .nav{ display: none; }
}
@media (max-width:1023px){
    header .nav{ display: none; }
}    
/* header 結束 */

/* top 開始 */
#top{
    padding:0px 30px;
    padding-bottom: 25px;
}
#top #top-menu{
    background: #fff;
    position: relative;
    width: 100%;
    z-index: 555;
    top:0;
}
#top p{
    font-family: Arial;
    font-size: 250%;
    font-weight: 600;
    position: absolute;
    top:10px;
}    
#top .nav .nav-item{
    position: relative;
}
#top .nav .first::before{
    position: absolute;
    top:8px;
    width:100%;
    height:25px;
    content: "";
    border-left:2px solid #E0E0E0;
}    
#top .nav .nav-item::before{
    position: absolute;
    top:8px;
    width:100%;
    height:25px;
    content: "";
    border-right:2px solid #E0E0E0;
}    
#top .nav .nav-item a{
    color: #333;
    font-weight: bolder;
    font-size: 18px;
    position: relative;
}
#top .nav .nav-item a::after {
    position: absolute;
    bottom: 2px;
    left: 11px;
    content: "";
    display: inline-block;
    width: 0;
    height: 2px;
    background: #333;
    transition: 0.5s;
}
#top .nav .nav-item a:hover::after {
    width: 80%;
}
#top #slogan{
    margin:20px auto;
    text-align: center;
}
#top #slogan img{
    display: block;
    margin: 0 auto;
}    
#top #slogan p{
    font-family: Adobe 繁黑體 Std;
    position: relative;
    font-size:150%;
}    
@media (max-width:1366px){
    #top p{ font-size:200%; top:16px; }
}
@media (max-width:1024px){
    #top p{ display: none }
    #top #slogan p{ display: block; }
}
@media (max-width:1023px){
    #top #top-menu{ display: none; }    
}    
/* one 結束 */

/* five-image 開始 */
#five-image ul, #two li{
    list-style: none;
    padding:0px;
    margin: 0px;
}
#five-image ul{
    width:100%;
    display: flex;
}

#five-image li{
    width:20%;
    position: relative;
    overflow: hidden;
    display: inline-block;
}
#five-image ul li img{
    transition: 0.5s;
}
#five-image ul li .person-text{
    position: absolute;
    color: #fff;
    bottom: 4%;
    width:100%;
    text-align: center;
    cursor: default;
} 
#five-image ul li .person-text .title{
    color: #d4711a;
    font-size: 40px;
    font-weight: bolder;
    margin-bottom:0;
    text-shadow: 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5)
}
#five-image ul li .person-text hr{
    display: block;
    width: 170px;
    border: 1px solid #fff;
    margin-top:0rem;
    margin-bottom:.5rem;
}
#five-image ul li .person-text .article{
    font-size: 24px;
    text-shadow: 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5),
                 0px 0px 8px rgba(0,0,0,.5)
}
#five-image #control{
    position: absolute;
    bottom:3%;
    width:100%;
    text-align: center;
    display: none;
}
#five-image #control .dot{
    display: inline-block;
    height: 15px;
    width: 15px;
    background: #9fa0a2;
    border-radius: 50px;
    margin:0 10px;
    box-shadow: 5px 5px 5px rgba(0,0,0,.5),
                0px 5px 5px rgba(0,0,0,.5);
}
#five-image #control .act{
    background: #00abd9;
}
.ui-loader-default{
    display: none;
}
@media (max-width:1440px){
    #five-image ul li .person-text .title{ font-size:35px }
    #five-image ul li .person-text hr{ width: 140px;}
    #five-image ul li .person-text .article{ font-size: 20px}
}
@media (max-width:1280px){
    #five-image ul li .person-text{top:calc(100% - 140px)}
    #five-image ul li .person-text .title{ font-size:30px }
    #five-image ul li .person-text hr{ width: 120px;}
    #five-image ul li .person-text .article{ font-size: 16px}
}
@media (max-width:1023px){
    #five-image ul{ width: 250% }
    #five-image ul li{ align-items: center; justify-content: center; display: flex; }
    #five-image ul li .person-text{ bottom: 8%; top: auto; }
    /* #five-image ul li .person-text .title{ font-size:50px } */
    #five-image ul li .person-text hr{ width:250px; }
    /* #five-image ul li .person-text .article{ font-size:40px } */
    #five-image #control{display: block}
}
/* five-image 結束 */

/* one 開始 */
 /* #one{
    background: url('../images/one-1.jpg') no-repeat left top/ cover;
    padding:40px 0;
    padding-bottom:0;
    opacity: 1;
}
#one #person{
    position: relative;
    z-index:2;
    width:40%;
    left:0%;
}
#one #title{
    text-align: center;
    color:#fff;
    font-size:50px;
    position: absolute;
    border:5px solid #f39800;
    border-radius: 10px;
    padding:20px 5%;
    background: rgba(0,0,0,.1);
    left:28%;
    top:5%;
}
#one #exa{
    position: absolute;
    top:35%;
    width:45%;
    right:5%;
}
#one #article{
    width:55%;
    height:30%;
    position: absolute;
    color:#fff;
    font-size:30px;
    background: rgba(100,100,100,.8);
    padding:10px 2%;
    bottom:0px;
    right:5%;
    z-index: 4;
}
@media (max-width:1280px){
    #one #title{ font-size:40px; }
}
@media (max-width:1024px){
    #one #title{ font-size:30px; }
}
@media (max-width:1023px){
    #one #title{ left:2%; width:96%; font-size:50px; padding:5px }
    #one #person{visibility: hidden; width:70% }
    #one #exa{ top:30%; width:90%; }
    #one #article{ width:90%; max-width:none; height:33%; }
    #one img:nth-child(5){ display: none }
}  */



.section-one{
    position: relative;
    background: url('../images/one-1.jpg') no-repeat left top/ cover;
    padding-top: 5%;
    padding-right: 5%;
    padding-left: 5%;
}
.section-one .person{
    position: absolute;
    z-index: 2;
    background: url(../images/one-2.png) no-repeat left top/ cover;
    width: 43%;
    left: 0;
    bottom: 0;
    padding-top: 65%;
    display: none;
}

  
.one-title{
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
    margin: auto ;
    border: 5px solid #f39800;
    
    border-radius: 10px;
    padding: 1rem;
    background: rgba(0,0,0,.1);
    
}

.one-box{ display: flex; justify-content: flex-end; flex-wrap: wrap;margin-top: 3%;}
.one-box .img{margin-bottom: 3%; }
.one-box .img img{width: 100%;}
.one-box .txt{
color: #fff;
font-size: 1rem;
background: rgba(100,100,100,.8);
padding: 10px 2%;
}
.one-box .txt h3{font-size: 1.2rem;}

@media (min-width:1024px){
    .one-title{font-size: 38px;}
    .one-box .txt{font-size: 1.3rem;}
    .one-box .txt h3{font-size: 2rem;}
}
@media (min-width:1024px){
.section-one .person{ display: block;}
.one-title{width: 60%;transform: translateX(18%);}
.one-box .img{flex: 0 0 44%;}
.one-box .txt{flex: 0 0 58%;}
.section-one:after{content:''; background: url('../images/one-4.png')no-repeat left top/ cover; position: absolute; left: 0; bottom: 0; z-index: 3;    height: 170px;
    display: block;
    width: 100%;}  
}
@media (min-width:1080px){
    .one-title{font-size: 40px;width: 66%;}
}


/* one 結束 */

/* two 開始 */
#two{
    background: transparent;
    z-index: 3;
    padding:3% 0%;
    opacity: 1;
}
#two font[id=title]{
    padding:10px 20px;
    font-size:1.5rem;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    letter-spacing: 3px;
    border:5px solid #f39800;
    position: absolute;
    top:-10%;font-weight: 600;
    left:5%;
    opacity: 1;
}
@-webkit-keyframes zoom {
    0% { -webkit-transform: scale(0); }
    100% { -webkit-transform: scale(1); }
}
  
@keyframes zoom {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
} 
#two #article{
    font-size:30px;
    width:75%;
    left:20%;
    height:0%;
    opacity: 1;
}
#two #article #title{
    position: relative;
    -webkit-writing-mode: unset;
    writing-mode: unset;
    border:none;
    font-size:1.5rem;
    letter-spacing: 1px;
    top:0px;
    left:0px;
    padding:0;
}
#two #article p{ font-size:1rem;}
#two .row{
    margin-top:60px;
    margin-right:0;
    margin-left:0;
    opacity: 1;
}    
#two .row img{
    display: block;
    width:85%;
    margin:0 auto;
}
@media (min-width:1024px){
    #two font[id=title]{font-size:2rem;}
    #two #article p{ font-size:1.3rem;}
    #two #article #title{font-size:2rem;}
}
@media (max-width:1024px){
    #two #article{ font-size:25px; }
}  
@media (max-width:1023px){
    #two #title{ top:1%; writing-mode:horizontal-tb; -webkit-writing-mode:horizontal-tb }
    #two #article{ width:90%; left:5%; top:100px; font-size:34px; top:80px }
    #two .row{ margin-top:120px }
}    
/* two 結束 */

/* three 開始 */
/* #three{
    background: url('../images/three-1.png') no-repeat top left / cover;
    font-size:34px;
    opacity: 1;
}
#three #top{
    width:60%;
    position: absolute;
    right:5%;
    top:5%;
}
#three #top #title{
    padding:10px 20px;
    font-size:1.5rem;
    letter-spacing: 3px;
    border:5px solid #f39800;
    display: table;
    margin:0 auto;
    opacity: 1;
}
#three #top #article{
    opacity: 1;
}    
#three #person{
    margin-top:5%;
    width:70%;
}
#three #exa{
    position: absolute;
    right:5%;
    top:22%;
    width:60%;
    opacity: 1;
}
#three #bottom-bg{
    margin-top:-15%;
    position: relative;
}    
#three #bottom-bg img{
    width:100%
}    
#three #bottom-bg #article{
    display: block;
    position: absolute;
    width:70%;
    right:5%;
    top:20%;
    text-align: justify;
}
#three #bottom-bg #ps{
    display: block;
    position: absolute;
    width:25%;
    right:5%;
    top:60%;
    text-indent:-1em;
}
@media (max-width:1600px){
    #three{font-size:25px}    
}
@media (max-width:1280px){
    #three{font-size:23px}    
}    
@media (max-width:1024px){
    #three{font-size:20px}
    #three #exa{ top:28%; width:55%; }
}    
@media (max-width:1023px){
    #three{ font-size:35px }
    #three #person{ visibility: hidden; width:120% }
    #three #top{ width:90%; font-size:37px }
    #three #exa{ top: 30%; width: 80%; left: 10%; }
    #three #bottom-bg #article{ width:90%; top:-50%;}
    #three #bottom-bg #ps{ width:40%; top:30%; }
}   */

/* ========================= */
.section-three{
    background: #e4e4e4;
    position: relative;
    padding-top: 8%;
}
.section-three:after{ content:'';background: url(../images/three-4.png) no-repeat left top; width: 100%; position: absolute; bottom: 0;left: 0;     height: 16%;}
.section-three .people{     
    background: url(../images/three-2.png) no-repeat left top;
    position: absolute;
    background-size: cover;
    width: 70%;
    padding-top: 60%;
    display: none;}
.section-three .txt-box{display: flex; justify-content: flex-end;    width: 100%;
    padding-right: 5%;
    padding-left: 5%;}
.section-three .txt{position: relative;z-index: 2;    padding-bottom: 10%;}
.section-three .txt h2{font-size: 1.5rem; padding: 10px 20px; display: inline-block;
    letter-spacing: 3px;font-weight: 600;
    border: 5px solid #f39800;}
.section-three .txt p {font-size: 1.5rem;margin-bottom: 1rem;}
.section-three .txt img{width: 100%;}
.bottom-txt{
    background: #e4e4e4;
    display: flex;
    justify-content: flex-end;
    padding-right: 5%;
    padding-left: 5%;
    width: 100%;
    padding-bottom: 8%;
    margin-top: -4%;
    z-index: 3;
    position: relative;}
.bottom-txt:after{
    content: '';
    position: absolute;
    background: url(../images/three-4.png) no-repeat bottom;
    background-size: cover;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44%;
    z-index: -1;
}
/* .bottom-txt .txt{width:90%;} */
.bottom-txt .txt h2{font-size: 1rem;font-weight: normal;line-height: 1.5;}
.bottom-txt .txt p{text-align: right;}
@media (min-width: 1024px){
    .section-three .people{display: block;}
    .section-three .txt{width: 60%;}
    .section-three .txt h2{font-size: 40px; }
    .bottom-txt .txt{width:65%;}
    .bottom-txt .txt h2{font-size: 1.3rem; }
    .section-three .txt p {font-size: 2rem;}
}

/* three 結束 */

/* four 開始 */
/* #four{
    background: url('../images/four-1.jpg') no-repeat top left / cover;
    font-size:34px;
    padding-bottom:22%;
    opacity: 1;
}
#four #top{
    position: absolute;
    top:1%;
    left:5%;
}    
#four #top #title{
    font-family:Adobe 繁黑體 Std;
    padding:10px 20px;
    font-size:1.4em;
    letter-spacing: 3px;
    border:5px solid #f39800;
    margin:0 auto;
    position: relative;
    top: 0;
    opacity: 1;
}
#four #top font{
    opacity: 1;
}    
#four #article{
    background: rgba(255,255,255,.6);
    padding:20px 30px;
    position: relative;
    left:5%;
    font-size:1.28em;
    width:90%
}
@media (max-width:1280px){
    #four{ font-size:30px; }
}    
@media (max-width:1024px){
    #four{ font-size:24px }
    #four #top{ top:0% }
    #four #top #title{display: block}
} 
@media (max-width:1023px){
    #four #top .none{ display: none; }
    #four #top{ left:0%; font-size:40px }
    #four #top font{ font-size:.9em; }
    #four img{width:140%}
    #four #article{ width:90%; font-size:1.6em; display: block }
    #four #article p{ text-indent:-1em; margin-left:1em }
}  */

/* ================================== */

.section-four .txt-box{padding: 5% 5% 0;}

.section-four .txt-box .txt h2{
    font-size: 1.5rem; padding: 10px 20px; display: inline-block;
    letter-spacing: 3px;font-weight: 600;
    border: 5px solid #f39800;}
.section-four .txt-box .txt p,.four-content ul li{font-size: 1.3rem;}
.section-four .four-content{background: url('../images/four-1.jpg') no-repeat top left / cover;position: relative;
    padding:10% 5%;}
.section-four .four-content:before{ content:''; background: url(../images/four-2.png) no-repeat bottom; background-size: cover; width: 100%; height: 8%; position: absolute; top: 0; left: 0;z-index: 2;}
.four-content ul  {background: rgba(255,255,255,.6); padding: 5%;margin: 0; list-style: none;}  
.four-content ul li {margin-bottom: .5rem;}
@media (min-width: 1024px){
    .section-four .txt-box{padding: 2% 5% 0;}
    .section-four .txt-box .txt h2{  font-size: 40px;}
    .section-four .txt-box .txt p,.four-content ul li{font-size: 2rem;}
    .section-four .four-content:before{height: 16%;}
}

/* four 結束 */

/* five 開始 */
#five{
    overflow: hidden
}
#five img{
    /* -webkit-filter:blur(50px);
    filter:blur(50px);
    -webkit-transform: scale(2);
    transform: scale(2); */
}    
@-webkit-keyframes clear {
    0% { -webkit-filter:blur(50px); }
    100% { -webkit-filter:blur(0px); }
}
@keyframes clear {
    0% { filter:blur(50px); }
    100% { filter:blur(0px); }
}
  
@-webkit-keyframes small {
    0% { -webkit-transform: scale(2); }
    100% { -webkit-transform: scale(1); }
}
@keyframes small {
    0% { transform: scale(2); }
    100% { transform: scale(1); }
} 
#five #title{
    position: absolute;
    background: #b2b2b2;
    width:100%;
    color:#fff;
    font-size:1.5rem;
    text-align: center;
    padding:1% ;
    bottom:10%;
    letter-spacing: 5px;
    right:0%;
}
@media (min-width:1024px){
    #five #title{ font-size:45px;}
}    
   
/* five 結束 */

/* info 開始 */

.info .info-content{
    background: url(../images/info-1.jpg) bottom left no-repeat;
    padding:  8% 5%;
    display: flex;
    background-size: cover;
    flex-wrap: wrap;
    justify-content: space-between;
}
.info .info-content .img{margin-top: 0;    margin-bottom: 3%;}
.info .info-content .txt-content a{color: #221815; font-size: 1.5rem; }

.info .info-content .txt-content{
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    flex-wrap: wrap;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 3%;
}
.map{height: 360px;margin-bottom: 1rem;position: relative;}
.map iframe{position: absolute;   
    width: 100%;
    height: 360px; }
@media (min-width:1024px){
    .info .info-content .txt-content a~a{margin-left: 5%;}
    .info .info-content{padding: 5px 5%;}
    .info .info-content .img{margin-top: -5%; 
    }
    .info .info-content .txt-content{
        flex: 0 0 60%;background-color: transparent;
    }
}
.company-info{background-color: #e4e4e4;padding: 5%;}
/* #info div #top{
    font-size: 30px;
    bottom: calc(35% - 35px);
    left: calc(50% - 250px);
    position: absolute;
    margin-bottom:0px;
}
#info div #top a{
    color: #333;
    font-weight: bold;
    text-decoration: none;
    transition: .5s ease;
}
#info div #top a:hover{
    transition: .5s ease;
    color: #777;
} */
#info .intro-title{
    font-size: 30px;
    font-weight: bold;
    border: 5px solid #f39800;
    display: inline-block;
    padding: 5px 50px; 
    width: 300px;
    margin:0 auto 20px; 
}
#info .form-group {
    text-align: right;
}
#info .form-group label {
    width: 100px;
}
#info .form-group label[for=message] {
    position:absolute;
    left:15px;
}    
#info .form-group input, #info .form-group textarea {
    width: calc(100% - 105px);
    outline-color: #E69001;
    padding: 4px;
    resize: none;
    border: none;
}
#info .form-group input[type="button"] {
    width: 100px;
    background: #fff;
    cursor: pointer;
    margin-left:10px;
    transition: .5s ease;
}
#info .form-group input[type="button"]:hover {
    transition: .5s ease;
    background: #f39800;
    color: #fff;
}
#info .form-group #verification{
    width:100%;
}
#info #article{
    background: #fff;
    padding:30px 5%;
    text-align: left;
}
#info #article img{
    height:100%
}    
#info #article p{
    position: absolute;
    top:30px;
    left:calc(20% + 150px);
    font-size:24px;
    line-height: 47px;
} 
@media (min-width:1024px){#info .form-group #verification{ width:390px }}   
@media (max-width:1440px){
    #info #article p{ font-size:21px; line-height: 48px; }
}    
@media (max-width:1024px){
    #info div #top{ font-size: 22px; bottom: calc(35% - 35px); left: calc(50% - 200px); }
    #info #article p{ font-size:16px; line-height: 37px; left:30%; }
    #info #article img{ width:25%}
}
@media (max-width:1023px){
    #info .intro-title{ margin-top:5% }
    #info #article {text-align: center;}
    #info #article p{ line-height: 1.5; position: relative; left:0px; font-size:1.3rem; margin-bottom:30px; text-align:justify }
    #info #article p br{ display: none }
    #info #article img{ width:50% }
    #info div #top{ font-size:45px; bottom:-23px }
    #info #top #address{display: none;}
    #info .col-lg-6{ width:100%; max-width:100%; flex:100% }
    #info .form-group .col-lg-6:nth-child(1){ margin-bottom: 1rem }
    #info .form-group label{ width:100%; text-align:left; font-size:1.3rem; }
    #info .form-group input, #info .form-group textarea{ width:100%; }
    #info .form-group label[for=message] { position: relative; left:0 }
    #info .form-group .col-lg-12{ font-size: 1.3rem; text-align: left; }
    
    #info .form-group img{ width:180px }
    #info .form-group input[type="button"]{width:100%; margin-top:40px; padding:15px 0;}
}    
/* info 結束 */

/* footer 開始 */
footer{
    background: #e4e4e4;
    font-size:20px;
    font-weight: bold;
    padding: 2rem 5% 1rem;
    position: relative;
}
footer .row{
    margin-right: 0px;
    margin-left: 0px;
}
footer a{
    color:#333;
    font-weight: bold;
    transition: .5s ease;    
 }
footer a:hover{
    transition: .5s ease;    
    color:#777;
    text-decoration: none;
}
footer ul{
    font-family: Microsoft JhengHei;
    position: absolute;
    right:3%;
    bottom:35px;
}
footer ul li a{
    font-size:16px;
    color:#3f3f3f;
    font-weight: normal
}
footer ul li a:hover{
    color: #7D7D7D;
}
footer .col-lg-9 #tel-intro{
    display: none
}
footer .copy{padding: 5% 0;}
@media (min-width:1024px){
    footer .copy{padding: 5% ;}
}
@media (max-width:1280px){
    footer .nav-item .nav-link{ padding:.5rem .5rem }
}    
@media (max-width:1024px){
    footer{ font-size:14px }
    footer ul li a{ font-size: 14px; }
}
@media (max-width:1023px){
    footer{ text-align: center; padding:2% 0 }
    footer #tel{ display: none }
    footer .col-lg-9 #tel-intro{ display: block; text-align: center }
    footer .col-lg-9 .col-sm-6{ display: inline }
    footer ul{height:70px; bottom: -80px; background: #fff; width: 100%; left: 0; text-align: center;}    
    footer ul li:nth-child(1){ margin-left:100px }
    footer ul li a{ font-size: 34px; }
    footer .col-lg-3, footer .col-lg-9{ max-width:100%; flex:100%; width:100% }
    footer .nav-item .nav-link, footer a{ text-decoration: underline }
}
/* footer 結束 */