/*body*/
body {font-family: Microsoft JhengHei;font-size: 12px;margin: 0px;color: #666666;}

a {color: #666666;text-decoration: none;}

a:hover{}

input,textarea{border: 1px solid #E1CFB9;color: #725c46;background-color: #FFFFFF;}

img {border: none;}

hr {}

h1, h2{font-size: 25px;font-weight: bold; padding: 0 0 0 20px;color: #343434;border-left:5px solid #ffb141;}

/*content*/

#content{margin: auto;width: 100%;max-width:1300px;overflow:hidden;}

#banner{display:block;width:100%;overflow:hidden;position:relative;text-align: center;}

#banner .banner_img{width:100%;border-bottom:5px solid #ffb129;}
#banner .logo_img{display:inline-block;vertical-align: middle; width:350px;margin: 0 20px 0 0;}

#banner .slogan{display:block;width: 100%;position: relative;}
#banner .slogan .banner_img{display:block;width: 100%;position: relative;}

#banner .slogan .slogan_art{display: block;position: absolute;top:50%;left: calc(100% / 3);transform: translate(-50%, -50%);font-size: 15px;z-index: 1;text-align: center;}
#banner .slogan .slogan_art p{font-size: 55px;margin:0;padding: 5px 0;font-weight: bold;color: #343434;}
#banner .slogan .slogan_art span{display: block;padding: 5px 0;width: 100%;font-size: 40px;}
#banner .slogan .slogan_art a{display: block;padding: 5px 0;width: 100%;font-size: 45px;color: #550a0a;}

#banner .main_menu{display:inline-block;vertical-align: middle;width:calc(100% - 400px);margin:15px auto;padding:0;font-size:0;text-align:center;padding: 10px 0;background:#f39f1a;border-radius:75px;}
#banner .main_menu li{display:inline-block;list-style:none;padding: 10px 10px;}
#banner .main_menu li a{font-family: Microsoft JhengHei;font-size:18px;font-weight:bold;color:#fff;letter-spacing:3px;}

#content2{padding:20px;box-sizing:border-box;}

#nav{color: #949494; padding-right:35px;}
#nav a{color: #000;}
#nav a:hover{}

#main{float: right;width: calc(100% - 300px);padding: 0 0 0 30px;box-sizing:border-box;}
#main p{font-size:16px;line-height:25px;}

#column1{float: left;width: 300px;padding-bottom: 30px;background:#F5F5F5;padding:20px;box-sizing:border-box;border-radius:15px;margin: 0 0 30px 0;}
#column1 .des_img{display:block;width:100%;border-radius:15px;}

#main-text{}
#main-text p{font-size: 18px;line-height:30px;}

.SiteLinks{display: block; width: 100%; margin: 0; padding: 0; font-size: 0!important; margin: 80px 0 0 0;}
.SiteLinks .title{display: block; width: 100%; font-size: 25px; margin: 0 0 15px 0; color: #343434;}
.SiteLinks a{display: inline-block; vertical-align: middle; width: calc(100% / 5 - 20px); font-size:16px; font-weight: bolder; margin: 10px; padding: 10px; overflow: hidden; box-sizing: border-box; overflow: hidden; border-radius: 10px; text-align: center; border:1px solid #FFB300; color: #343434;}

#main-box1{font-size:0!important;}

#main-box1 p{line-height:25px;font-size:15px;padding: 0 10px;}

#main-box1 img{display:inline-block;width:200px;}
#main-box1 .first_p{display:inline-block;width:calc(100% - 220px);font-size:15px;}


#subject ul{margin: 0px;padding-left: 30px;}
#subject li{border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #CCCCCC;padding: 8px 3px;color: #5f9acb;}
#subject li a{color: #757575;font-size:16px;}
#subject li a:hover{color: #343434;}

.box_wrapper{display:block;overflow:hidden;}

#main-box2{width: calc(100% / 2);float: left;padding:10px;box-sizing:border-box;}
#main-box3{width: calc(100% / 2);float: right;padding:10px;box-sizing:border-box;}
#main-box2 ul,#main-box3 ul{margin: 0px;padding-left: 30px;}
#main-box2 li,#main-box3 li{border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #CCCCCC;padding: 8px 3px;color: #5f9acb; font-size:6px;}
#main-box2 li a,#main-box3 li a{display:block; width: 100%; color: #949494;font-size:16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#main-box2 li a:hover,#main-box3 li a:hover{color: #5f9acb;font-weight: bold;}

#main-box2 .case_href, #main-box3 .service_href{display:block;font-size:25px;font-weight:bold;letter-spacing:8px;color:#343434;margin: 20px 0 10px 0;padding: 10px 20px;box-sizing:border-box;border-bottom:1px solid #343434;}

#main-box2 .case_img, #main-box3 .service_img{display:block;vertical-align:middle;width:100%;}

#service-item{}
#service-item ul{margin: 20px 0 0 0;padding: 0px;}
#service-item li{display:inline-block;width:100%;margin: 5px 0;list-style:none;background:#fff;padding: 10px 8px;letter-spacing: 1px;border-radius: 15px;box-sizing:border-box;}
#service-item li a{display:inline-block;vertical-align:middle;color: #343434;font-size:16px;}
#service-item li:before{content:'';display:inline-block;vertical-align:middle;width:5px;height:5px;margin: 0 8px 0 5px;background:#ffb141;border-radius:50%;}
#service-item li a:hover{}

/*footer*/
#footer{background-image: url(image/footer-bg.gif);height: 60px;padding-left: 150px;clear: both;padding-top: 25px;text-align: center;color: #949494;}
.footer{display:inline-block;overflow:hidden;width:100%;background:#343434;min-height: 56px;clear: both;line-height:28px;color:#fff;text-align: center;font-size:0;padding: 25px 0;}
.footer ul{display:block;width:90%;margin: 0 auto 20px auto;padding:0;text-align:left;}
.footer ul li{list-style:none;display:inline-block;width:calc(100% / 6);text-align:center;padding:5px 0;}
.footer ul li a{display:inline-block;vertical-align:middle;font-size:16px;color:#e3e3e3;}
.footer p{width:100%;font-size:16px;margin: 0;padding:0;}

.phone_h3{display:block;width:100%;font-size:18px;margin: 20px 0;padding:0;text-align:left;color:#343434;}
.phone_block{display:block;width:100%;overflow:hidden;margin: 10px 0 30px 0;padding: 0;}
.phone_block li{margin: 5px 0;padding:0;list-style:none;}
.phone_block span, .phone_block a{display:inline-block;vertical-align:middle;font-size:16px;}
.phone_block span{}
.phone_block a{letter-spacing:2px;font-weight:bold;color:#550a0a;margin:0 0 0 10px;font-size:18px;}

/*style*/
.txtcolor-red{color: #FF0000;}
.txtcolor-white{color: white;}
.textcolor1{color: #A65998;}
.textcolor2{color: #828200;}
.title1{color: #343434;font-size: 16px;font-weight: bold;border: none;margin:0;padding:0;}

.textlink1{font-size: 0;padding: 30px 0 0 0;}
.textlink1 .single{display: block;width: 100%;border-bottom: 1px solid #ccc;margin: 0 0 20px 0;}
.textlink1 .single:last-child{border: none;}
.textlink1 .single .first_layer{display: inline-block;vertical-align: middle;width: 200px;min-height: 30px;padding: 10px 0;border: 2px solid #ffb129;box-sizing: border-box;font-size: 18px;line-height: 30px;text-align: center;border-radius: 75px;margin: 0 0 15px 0;}
.textlink1 .single .sec_block{display: inline-block;vertical-align: top;width: calc(100% - 200px);}
.textlink1 .single .sec_block a{display: inline-block;vertical-align: top;width: calc(100% / 3 - 20px);min-height: 30px;padding: 10px 0;border: 2px solid #ffdb9d;box-sizing: border-box;font-size: 18px;line-height: 30px;text-align: center;border-radius: 75px;margin: 0 10px 10px 10px;}
.textlink1 a{color: #343434;}
.textlink1 a:hover{}

div.mmenu { display:none;}
div.mobile { display:none;}
.banner2 { display:none;}

.licensetitle{ display:block; margin:0 auto 15px auto; clear: both; text-align:center; font-size:25px; line-height:32px; font-weight: bold; letter-spacing:1;}
.indexlicense{ display:block; width:90%; max-width:950px; margin:0 auto 30px auto; padding: 20px 50px; position:relative; clear: both; border-radius:25px;background:#ffb129;}
.indexlicense .scrollable { position:relative; top:0px; overflow:hidden; width:100%; height:180px; padding:0; margin:0 auto;background:#fff;}
.indexlicense .scrollable .items { width:1000%; position:absolute; clear:both;}
.indexlicense .scrollable .items div{ display:block; float:left; width:10%; height:180px; position:relative; overflow:hidden; padding:0px; color:#333;}
.indexlicense .scrollable .items div ul{ display:block; width:100%; overflow:hidden; padding:0;}
.indexlicense .scrollable .items div ul li{ display:block; width:25%; height:180px; margin:0; float:left; text-align:center;position:relative;}
.indexlicense .scrollable .items div ul li img{ max-width:100%; max-height:180px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
.indexlicense a.next, .indexlicense a.prev{ display:block; width:30px; height:48px;text-indent:-5000px; position:absolute; top:calc(50% - 24px); z-index:2; cursor:pointer; opacity:.6; -webkit-transition:all .5s ease;  -moz-transition:all .5s ease;  -o-transition:all .5s ease;  -ms-transition:all .5s ease;  transition:all .5s ease;}

.indexlicense a.next{background: url(image/next_btn.png) no-repeat center center;right:0;}
.indexlicense a.prev{background:url(image/prev_btn.png) no-repeat center center;left:0;}

.indexlicense a.prev:hover,.indexlicense a.next:hover{ opacity:1;}
.indexlicense a.disabled{ opacity:0.3;}

div.middle04{ display:block; width: 100%; height: auto; margin:50px 0 50px 0; padding:30px 5%; position:relative; overflow:hidden; background:#ffb12a; border-radius:13px;box-sizing:border-box;}
div.middle04 a.more{ display:block; width:100%; height:40px; max-width:300px; margin:30px auto 0 auto; background:#FFF; color:#ffb12a; text-align:center; line-height:40px; text-decoration: none; font-weight: bolder; border-radius:20px;}
div.middle04 .album{ display: inline-block; vertical-align:middle!important; width:55%; letter-spacing:-6px;}
div.middle04 .album img{ width:100%;}
div.middle04 .album p.img{ width:100%; margin:0 0 8px 0; padding:0 0px; font-size:0; line-height:0; border-radius:20px; overflow:hidden;}
div.middle04 .album p.imgs{ display:inline-block; width:calc(50% - 10px); margin:0 5px; padding:0 0; font-size:0; line-height:0; border-radius:20px; overflow:hidden;}
div.middle04 .right{ display: inline-block; vertical-align:middle!important; width:calc(45% - 13px); height:auto!important; padding:0 0 0 10px; margin:0;}
div.middle04 .right img{ width:100%;}
div.middle04 ul { overflow:hidden; text-align:center;margin:0;padding:0;width:100%;}
div.middle04 ul li { width: 100%; padding:5px 20px !important; margin: 0 auto 5px auto; font-size:16px; color:#FFF; border:1px solid rgba(255,255,255,0.7); border-radius:5px; display:inline-block;line-height:25px; text-align:center;box-sizing:border-box;}

.other_service{width:100%;font-size:0;border-radius:15px;overflow:hidden;margin:30px 0 30px 0;box-sizing:border-box;}
.other_service .fake_title{display:block;width:100%;font-size:25px;font-weight:bolder;color:#343434;margin: 15px 0;}
.other_service ul{margin:0;padding:0;width:100%;}
.other_service ul li{display:inline-block;vertical-align:middle;width:calc(100% / 4 - 2%);margin: 5px 1%;background:#fff;border-radius:75px;overflow:hidden;border: 1px #D3D3D3 solid;box-sizing: border-box;}
.other_service ul li:before{content:'';display:inline-block;vertical-align:middle;width:8px;height:8px;margin:0 10px;background:#ffb129;border-radius: 50%;}
.other_service ul li a{display:inline-block;vertical-align:middle;width:calc(100% - 28px);font-size:16px;padding: 10px 0;box-sizing:border-box;}

.page_menu{margin:30px 0 0 0;text-align: center;}
.page_menu a, .page_menu span{display: inline-block;width: 100px;height: 30px;margin: 10px 5px 10px 5px;color: #b89f8c;border: 1px solid #d8cfc8;border-radius: 5px;font-size: 15px;line-height: 28px;vertical-align: middle;text-decoration:none;text-align:center;box-sizing: border-box;}
.page_menu .active{background: #d2c7bf;color: #FFF!important;border: 1px solid #d2c7bf;}

.price_table{width:100%;border-collapse: collapse;font-size: 16px;}
.price_table tr td{padding: 15px 8px;}
.price_table tr td:first-child{background: #FFECB3;}
.price_table tr:first-child td{background: #343434;}
.price_table, .price_table tr, .price_table tr td{border: 1px #e3e3e3 solid;}

@media screen and (max-width: 639px) {
    /*body*/
    body {font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 20px;margin: 0px;color: #666666;}

    a {color: #666666;text-decoration: none;}

    a:hover{}

    input,textarea{border: 1px solid #E1CFB9;color: #725c46;background-color: #FFFFFF;}

    img {border: none;}

    hr {}

    h1, h2{font-size: 25px;font-weight: bold;letter-spacing: 5px;padding: 0 0 0 20px;color: #343434;border-left:5px solid #ffb141;line-height: 30px;}

    /*content*/

    #content{ width: 100%;}
    div.mmenu{ display:block; width:40px; height:40px; position:fixed; top:10px; right:10px; z-index:1001;background: #f39f1a;border-radius: 50%;box-sizing: border-box;}

    div.mmenu span{display: block;width: 60%;height: 4px;background: #fff;position: absolute;left: 50%;transform: translate(-50%, -50%);border-radius: 75px;}
    div.mmenu span:nth-child(1){top:calc(50% - 8px);}
    div.mmenu span:nth-child(2){top:calc(50% - 0px);}
    div.mmenu span:nth-child(3){top:calc(50% + 8px);}

    .close_btn span:nth-child(1){top:50%!important;left:50%;transform: translate(-50%, -50%) rotate(45deg);}
    .close_btn span:nth-child(2){display: none;top:50%!important;left:50%;transform: translate(-50%, -50%) rotate(0deg);}
    .close_btn span:nth-child(3){top:50%!important;left:50%;transform: translate(-50%, -50%) rotate(-45deg);}

    div.mobile { display: none; width:100%; position:absolute; top:-50px; left:0; background:#2e96a1; opacity:0; z-index:9999;}
    div.mobile a.close{ display:block; width:50px; height:50px; margin:0 auto; background: url(images/close.png) no-repeat center center;}
    div.mobile ul{ display:block; width:100%; margin:0 auto; padding:0;}
    div.mobile ul li{ display:block; width:100%; margin:0; border:0; }
    div.mobile li a { display:block; text-align:center; border-bottom: 1px solid #50a8b1;color:#fff; text-decoration:none; padding:10px 0; font-family:"微軟正黑體";}
    #banner{ display:inline-block;}

    #banner .slogan{display:inline-block;position: relative;left:auto;top:auto;transform:translate(0, 0);font-size: 50px;font-size: 16px;}
    #banner .logo_img{display:inline-block;vertical-align: middle; width:50%;margin: 30px 20px 0 0;}
    #banner .slogan .banner_img{width:200%;border-bottom:5px solid #ffb129;margin:30px 0 0 0;position: relative;left: -70%;}
    #banner .slogan .slogan_art{display: block;position: absolute;top:calc(50% + 15px);left: 10px;transform: translate(0, -50%);font-size: 15px;z-index: 1;text-align: left;overflow: hidden;}
    #banner .slogan .slogan_art p{font-size: 18px;margin:0;padding: 5px 0;font-weight: bold;color: #343434;}
    #banner .slogan .slogan_art span{display: block;width: 100%;padding: 5px 0;font-size: 16px;}
    #banner .slogan .slogan_art a{display: block;width: 100%;padding: 5px 0;font-size: 16px;font-size: 20px;}


    #banner .main_menu{display:none;position: fixed;top:0;right:0;width:60%;height: 100vh;margin: 0;font-size:0;text-align:center;padding: 50px 0;background:#f39f1a;border-radius:0;text-align: left;z-index: 999;}
    #banner .main_menu li{display:inline-block;width: 100%;list-style:none;padding: 10px 15px;}
    #banner .main_menu li a{font-family: Microsoft JhengHei;font-size:18px;font-weight:bold;color:#fff;letter-spacing:3px;}

    .banner2 { display:none; height:285px; position:relative; text-align:center; padding:15px 0 0 40px;}
    .banner2 span { font-family:"Microsoft JhengHei"; font-size:30px; color:#1c5488; font-weight:bold;}
    .banner2 a { font-size:42px; position:absolute; top:100px; left:40px; color:#333; }
    #content2{}

    #nav{ padding:0 20px 0 0;}
    #nav a{color: #5f9acb;}
    #nav a:hover{font-weight: bold;}

    #main{ float:none; width: auto; padding: 0 20px;}
    img.indexabout { margin:0;}
    img.subjectpic { display:none;}
    #column1{ float: none; width: auto; padding: 20px 10px; margin:20px 0 0 0;}

    .indexlicense{ display:block; width:95%; max-width:950px; margin:0 auto 30px auto;padding: 0 30px; position:relative; clear: both; background: #FFF; border-radius:25px;background:none;box-sizing: border-box;}
    .indexlicense .scrollable { position:relative; top:0px; overflow:hidden; width:100%; height:100px; padding:0; margin:0 auto;background:#fff;}
    .indexlicense .scrollable .items { width:1000%; position:absolute; clear:both;}
    .indexlicense .scrollable .items div{ display:block; float:left; width:10%; height:100px; position:relative; overflow:hidden; padding:0px; color:#333;}
    .indexlicense .scrollable .items div ul li{ display:block; width:25%; height:100px; margin:0; float:left; text-align:center;position:relative;}
    .indexlicense .scrollable .items div ul li img{ width:100%!important; max-height:100px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}


    div.middle04 .album{ display: inline-block; vertical-align:middle!important; width:100%; letter-spacing:-6px;}
    div.middle04 .right{ display: inline-block; vertical-align:middle!important; width:calc(100% - 13px); height:auto!important; padding:0 0 0 10px; margin:0;}

    #main-text{}

    #main-box1{ background:none; padding: 0; overflow:hidden;}
    #main-box1 img{display:block;width:50%;margin:0 auto;}
    #main-box1 .first_p{display:inline-block;width:100%;font-size:15px;}

    #subject ul{margin: 0 20px 0 0; padding:0 0 0 15px;}
    #subject li{border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #CCCCCC;padding: 3px;color: #5f9acb;}
    #subject li a{color: #949494;}
    #subject li a:hover{color: #5f9acb;font-weight: bold;}

    #main-box2{ width: auto; float: none; padding:0; margin:0 0 20px 0;}
    #main-box3{ width: auto; float: none; padding:0; margin:0 0 20px 0;}
    #main-box2 ul,#main-box3 ul{margin: 0px;padding-left: 15px;}
    #main-box2 li,#main-box3 li{border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #CCCCCC;padding: 3px;color: #5f9acb;}
    #main-box2 li a,#main-box3 li a{color: #949494;}
    #main-box2 li a:hover,#main-box3 li a:hover{color: #5f9acb;font-weight: bold;}

    #service-item{}
    #service-item ul{margin: 20px 0 0 0px;padding: 0px;list-style-position: inside;}
    #service-item li{}
    #service-item li a{color: #949494;}
    #service-item li a:hover{color: #5f9acb;font-weight: bold;}

    /*footer*/
    #footer{ background:none; height: auto; padding:10px 20px; border-top:1px solid #ccc;}

    /*style*/
    .txtcolor-red{color: #FF0000;}
    .txtcolor-white{color: white;}
    .textcolor1{color: #A65998;}
    .textcolor2{color: #828200;}
    .title1{color: #FF6699;font-size: 13px;font-weight: bold;}
    .textlink1 a{color: #828200;}
    .textlink1 a:hover{font-weight: bold;}

    .other_service{width:100%;font-size:0;border-radius:15px;overflow:hidden;margin:30px 0 30px 0;box-sizing:border-box;}
    .other_service .fake_title{display:block;width:100%;font-size:25px;font-weight:bolder;color:#343434;margin: 15px 0;}
    .other_service ul{margin:0;padding:0;width:100%;}
    .other_service ul li{display:inline-block;vertical-align:middle;width:100%;margin: 5px 0;background:#fff;border-radius:75px;overflow:hidden;border: 1px #D3D3D3 solid;box-sizing: border-box;}
    .other_service ul li:before{content:'';display:inline-block;vertical-align:middle;width:8px;height:8px;margin:0 10px;background:#ffb129;border-radius: 50%;}
    .other_service ul li a{display:inline-block;vertical-align:middle;width:calc(100% - 28px);font-size:16px;padding: 10px 0;box-sizing:border-box;}

    .footer{display:inline-block;overflow:hidden;width:100%;background:#343434;min-height: 56px;clear: both;line-height:28px;color:#fff;text-align: center;font-size:0;padding: 25px 0;}
    .footer ul{display:block;width:90%;margin: 0 auto 20px auto;padding:0;text-align:left;}
    .footer ul li{list-style:none;display:inline-block;width:calc(100% / 2);text-align:center;padding:5px 0;}
    .footer ul li a{display:inline-block;vertical-align:middle;font-size:16px;color:#e3e3e3;}
    .footer p{width:100%;font-size:16px;margin: 0;padding:0;}

}