@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
/*全站*/
html, body { font-family: 'Noto Sans TC', sans-serif; font-size:100%; }
img { max-width:100%;}
a:hover{-o-transition: color .20s linear; -webkit-transition: all .20s linear; -moz-transition: all .20s linear; transition: all .20s linear;}
ul{ list-style:none;}
.clear{ clear:both; overflow:hidden;}

.container{ padding:0px; position:relative;}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12,
.col-lg-12 { padding-right: 0px; padding-left: 0px;}

.row { margin-right: 0px; margin-left: 0px;}
iframe{ border-width: 0px; border-style: none;}


/**scroll_icon**/
#myBtn { display: none; position: fixed; top:0px; margin-left:auto; left:0px; margin-right:auto; right:0px; z-index: 9999;}
#myBtn .smo_icon{ margin:0px auto; padding:0px; max-width:630px; width:100%; box-shadow:0px 0px 10px #666;}
#myBtn .smo_icon .smo_icon_text{ border:1px solid #fe931b; background-color:#510001; padding:8px 0px 8px 0px; height:55px;}
#myBtn .smo_icon .smo_icon_text span{ padding-left:5px;}
#myBtn .smo_icon .smo_icon_text a{ display:block; color:#fff; font-size:15px; overflow:hidden; text-align:center;}
#myBtn .smo_icon .smo_icon_text a:hover{ color:#fff000; text-decoration:none;}
#myBtn .smo_icon .smo_icon_text a .tel{ font-size:90%; text-align:left; padding-left:10px;}

/**container**/
#container{ width:100%; margin:auto;}
.width-1170{ max-width:1170px; width:98%; margin:auto;}
.width-1440{ max-width:1440px; width:96%; margin:auto; padding:50px 0px;}
.width-1000{ max-width:1000px; width:85%; margin:auto;}


/**main_area**/
#main_area{ overflow:hidden;}
#main_area .rsDefault {
 background:url(../images/pople.png) no-repeat 30% bottom, url(../images/main_bg.jpg) no-repeat center top #b3162f;
 background-size: auto 94%, 100% 100%; position:relative;}
.main_info_area{ float:inherit !important; overflow: hidden; position:absolute; margin-left:auto; margin-right:auto; left:0px; right:0px;}
.photo_area{ margin:35% 0 0 0;}
.logo{ padding:20px 0px;}
.main_title_img{ padding:3px 0px;}

/**photo_area**/
.intro_01_slogn{ padding:30px 0px; max-width:850px; width:96%; margin:auto; font-size:20px; color:#940010; font-weight:400; text-align:center;}
.intro_01_slogn_title{ font-size:50px; color:#ef0b0c; font-weight:900; letter-spacing:2px; text-shadow:0px 3px 0px #ebebeb;}
.intro_01_slogn_title span{ font-size:40px; color:#4e0001; padding:0px 20px;}
.intro_01_slogn p{ padding:10px 0px;}
.map_area img{ width:100%;}

.swiper-pagination-bullet { width: 12px; height: 12px;}
#photo_01{ background:url(../images/intro_01_photo_bg.jpg) no-repeat center top; background-size:cover;}
.photo_style{ background:url(../images/photo_bo-top.png) no-repeat left top, url(../images/photo_bo-bottom.png) no-repeat right bottom; padding:21px; margin:0 5%;}
.photo_style img{ box-shadow:0px 0px 2px #666;}
.photo_title{ color:#FFF; font-size:30px; padding: 3px 0px; margin:25% 5% 0 5%; box-shadow:6px 6px 0px #ccc; text-align:center; font-weight:700; letter-spacing:1px; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffda53+0,f01a01+100 */
background: rgb(255,218,83); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(255,218,83,1) 0%, rgba(240,26,1,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,218,83,1) 0%,rgba(240,26,1,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,218,83,1) 0%,rgba(240,26,1,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffda53', endColorstr='#f01a01',GradientType=1 ); /* IE6-9 */
}
#intro_02{ background: url(../images/intro_02_photo_bg.jpg) no-repeat center top; background-size:100% 100%; }
.intro_02_slogn{ padding:5% 0; color:#FFF;}
.intro_02_photo{ padding:10px;}
.intro_02_photo img{ box-shadow:10px 10px 0px #7d120b;}
.intro_02_text_area{ margin:25% 0; padding:0px 20px;}
.intro_02_title{ font-size:42px; font-weight:700; letter-spacing:1px; border-bottom:1px solid #fff; padding-bottom:10px; text-align:center;}
.intro_02_sec{ font-size:24px; font-weight:400; padding-top:10px;}

#photo_02{ padding:2% 0;}
.photo_02_photo_title{}
.photo_02_text p{ color:#1a336f; font-size:52px; letter-spacing:3px; font-weight:400;}
.photo_02_text p span{ color:#c01920;}
.list_info{ font-size:16px; font-weight:500; line-height:34px; max-width:720px; width:96%;}
.list_info span{ color:#c01921; padding-right:5px;}

.photo_02_bg{ text-align:center; padding:10px; box-shadow:0px 0px 10px #c6c4c5; margin:10px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffda33+0,ef6a17+100 */
background: rgb(255,218,51); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(255,218,51,1) 0%, rgba(239,106,23,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(255,218,51,1) 0%,rgba(239,106,23,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(255,218,51,1) 0%,rgba(239,106,23,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffda33', endColorstr='#ef6a17',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.photo_02_bg img{ width:100%;}
.photo_02_dec{ text-align:center; font-size:22px; font-weight:400; color:#ac0100;}
#photo_02 .swiper-pagination-fraction, #photo_02 .swiper-pagination-custom, #photo_02 .swiper-container-horizontal > .swiper-pagination-bullets{ bottom:0px;}
#photo_02 .swiper-wrapper .swiper-slide{ padding:25px;}

#intro_03{ background: url(../images/intro_03_photo_bg.jpg) no-repeat center top; background-size:100% 100%;}
.intro_03_slogn{ max-width:850px; width:98%; margin:10px auto;}
.intro_03_slogn_title{ padding-left:50px;}

.intro_03_slogn_title span{ font-size:68px; color:#ff4800; font-weight:700; display:block; float:left; padding:5px; background-color:#FFF; margin:0px 5px; line-height:78px; width:78px;}
.intro_03_slogn_sec{ font-size:44px; color:#FFF; letter-spacing:2px; font-weight:500;}
.intro_03_slogn_sec span{ font-size:20px; letter-spacing:inherit; font-weight:300; display:block;}
.intro_03_list{ margin:3% auto; overflow:hidden;}
.intro_03_list ul.nav-tabs{ margin:0px auto; padding:0px 0px 40px 0px; width:98%; border-bottom:none;}
.intro_03_list ul.nav-tabs li{ text-align:center; width:12.5%;}
.intro_03_list ul.nav-tabs li a{ color:#d70002; border-radius:150px; width:150px; height:150px; background-color:#FFF; border:0px; box-shadow:0px 0px 8px #a6170c, 0px 0px 8px #a6170c inset; margin:10px auto; padding:20px 0;}
.intro_03_list ul.nav-tabs li.active:after { content: " "; position: absolute; left: 43%; opacity: 1; margin: 0 auto; bottom: -10px; border: 10px solid transparent; border-bottom-color: #fff;}
.intro_03_list ul.nav-tabs li a:hover, .intro_03_list ul.nav-tabs li a:focus{ background-color:#ffead9; color:#333;}
.intro_03_list ul.nav-tabs li.active a { color:#000; background-color:#f1ff56; cursor: default; border:1px solid #fff;}
.intro_03_list ul.nav-tabs li span{ display:block; padding-top:10px;}

#intro_03 .tab-content{ background:url(../images/tab-content_bg.png) no-repeat center top; padding:4% 0 0 0;}
.intro_03_8_title{ font-size:34px; color:#FF0; font-weight:500; margin-left:20px; text-shadow:2px 2px 0px #900; letter-spacing:2px;}
.intro_03_8_title span{ display:block; color:#FFF; font-size:20px; font-weight:300; padding:20px 0px; line-height:32px; text-shadow:1px 1px 0px #900;}

#photo_03{ padding:3% 0 0 0;}
.photo_03_title{ text-align:center; border-bottom:1px solid #eeeeee; color:#ff4200; font-size:48px; font-weight:700; padding-top:10px;}
.photo_03_title span{ display:block; color:#886a5f; font-size:24px; font-weight:500; padding-bottom:20px;}

#photo_03 ul.nav-tabs{ margin:10px auto 10px auto; padding:0px; max-width:800px; width:100%; border-bottom:none;}
#photo_03 ul.nav-tabs li{ text-align:center;}
#photo_03 ul.nav-tabs li a{ font-size:20px; color:#fff;  background-color:#F03;}
#photo_03 ul.nav-tabs li.active a{ background-color:#333;} 
#photo_03 .tab-content{ border-top:1px solid #eeeeee; padding-top:5px;}

/**contact_bg**/
#contact_bg{ background:url(../images/contact_bg.jpg) no-repeat center top; background-size:cover; clear:both;}
.contact_area{ padding:3% 0;}
.contact_slogin{ background:url(../images/slogin_bg.png) no-repeat center top; font-size:48px; color:#FFF; font-weight:700; text-align:center; letter-spacing:2px; max-width:1440px; width:100%; margin:auto; padding:50px 0px 30px 0px; line-height:60px;}
.contact_slogin span{ font-size:60px !important;}

.contact_title_line{ background:url(../images/contact_title_line.png) repeat-x left top; line-height:40px; max-height:40px; margin-bottom:50px;}
.contact_title { text-align:center; color:#FFF; font-size:40px; font-weight:bold; letter-spacing:4px; line-height:40px;}

.form-horizontal{ font-size:22px; color:#FFF; font-weight:bold;}
.form-horizontal .form-group { margin-right:0px; margin-left:0px;}
.control-group span{ padding-right:20px;}
input {outline:medium;}
input[type=text] {width: 100%; color:#888889; padding:7px 10px;}
input[type=text]:focus { border: 2px solid #fff600;}
input[type=radio], input[type=checkbox]{ width:22px; height:22px;}
input[type=submit]{ font-size:24px; font-weight:bold; border:2px solid #fff; background:none; padding:10px 30px; margin:30px auto; box-shadow:0px 0px 5px #666;}
input:hover[type="submit"]{ color:#FF0; border: 2px solid #fff600;-o-transition: color .20s linear; -webkit-transition: all .20s linear; -moz-transition: all .20s linear; transition: all .20s linear;}

/**footer**/
#footer{ padding:50px 0px 0px 0px; background:#fff; overflow:hidden;}
.foot_info{ max-width:900px; width:98%; margin:10px auto 30px auto;}
.foot_info ul{ margin:0px auto; padding:0px; max-width:800px; width:98%;}
.foot_info ul li{ color:#FFF; font-size:20px; line-height:36px; padding-left:50px;}
.foot_info ul li strong{ font-size:24px; color:#fff000; padding-right:10px;}
.design_area{ background-color:#6c0b05; color:#FFF; font-size:18px; text-align:center; line-height:50px;}
.design_area span{ padding:0px 20px;}

/**RWD**/
@media all and (max-width : 1500px){
#intro_03 .tab-content{ background-size:100% auto;}
.intro_03_list ul.nav-tabs li a{ width:140px; height:140px;border-radius: 140px;}
.intro_03_list ul.nav-tabs li a img{ width:48%;}
}
@media all and (max-width : 1280px){
#main_area .rsDefault{ background:url(../images/pople.png) no-repeat 10% bottom, url(../images/main_bg.jpg) no-repeat center top #b3162f; background-size: auto 96%, 100% 100%;}
.photo_style{ background-size: 30%, 30%;padding: 14px;}
.photo_title{font-size: 24px; padding:5px 0px;}
.photo_02_text p{font-size: 48px; text-align:center;}
.list_info{font-size: 15px;line-height: 30px;}
}
@media all and (max-width : 991px){
.royalSlider  { height: 600px !important;}
.photo_area{margin: 18% 2% 0 0;}
.photo_title{ margin:10px auto;}
.photo_style img{ width:100%; display:block; margin:auto;}
.photo_style { background-size:20%, 20%; padding:17px;}
.intro_02_title{font-size: 63px;}
.intro_02_text_area{margin: 18% 0;}
.photo_02_photo_title { text-align: center;}
.list_info{font-size: 18px; line-height:36px; margin:auto;}
.intro_03_list ul.nav-tabs li a{ width:100px; height:100px; line-height:50px; margin:0px;}
.intro_03_list ul.nav-tabs li span{ display:none;}
.intro_03_list ul.nav-tabs li.active:after{ left:34%; bottom:-20px;}
}
@media all and (max-width : 870px){
.intro_03_slogn_sec { font-size: 40px;}
.intro_03_slogn_sec span { font-size: 18px;}
.intro_03_list ul.nav-tabs li a{ width:80px; height:80px; line-height:40px;}
.intro_03_list ul.nav-tabs li.active:after{ left:29%;}
.photo_03_title span{ padding:0px 20px;}
}
@media all and (max-width : 767px){
.intro_02_photo{ padding:25px; text-align:center;}
.intro_02_text_area{ margin:3% 0;}
.intro_02_title{ font-size:42px;}
.list_info{line-height: 30px;}
.intro_03_slogn_sec{ text-align:center;}
.intro_03_slogn_title{ width:370px; margin:auto; padding:0px;}
#photo_03 ul.nav-tabs{max-width: 670px;}
#photo_03 ul.nav-tabs li a{font-size: 16px;}
.photo_03_title span{font-size: 20px;}
.intro_01_slogn_title span{ display:block;}
.intro_01_slogn p { padding: 10px 20px;}
}
@media all and (max-width : 676px){
.intro_03_list ul.nav-tabs li{ width:25%; padding-bottom:20px; padding:10px;}
.intro_03_list ul.nav-tabs li.active:after{ display:none;}
.intro_03_list ul.nav-tabs li a img { width: 55%;}
.intro_03_list ul.nav-tabs li a{ margin:auto;}	
.intro_03_list ul.nav-tabs li a{ width:80px; height:80px; line-height:40px;}
.intro_03_list ul.nav-tabs li.active:after{ left:24%;}
.photo_03_title{ font-size:40px;}
.photo_03_title span { font-size: 18px;}
}
@media all and (max-width : 586px){
.photo_area { margin: 25% 5% 0 5%; text-align:center;}
.main_title_img { padding:0px;}
.photo_area img{ width:80%;}
.logo { padding: 0px 0px 20px 0px;}
.list_info{ max-width:400px; width:96%; margin:auto;}
.intro_03_8_title{ font-size:26px;}
.intro_03_8_title span{font-size: 18px; line-height:24px; padding-top:10px;}
.list_info .col-xs-6{ width:100%;}
#photo_03 ul.nav-tabs li a{ font-size:15px;}
#photo_03 .nav > li > a{ padding:5px 10px;}
.contact_slogin{font-size: 36px;}
.contact_slogin span { font-size: 40px !important;}
.contact_slogin{padding: 42px 0px 25px 0px;}
.contact_title{font-size: 30px;}
input[type="submit"]{font-size: 20px; padding: 5px 30px;}
#myBtn .smo_icon .smo_icon_text a{ font-size:80%;}
#myBtn .smo_icon .smo_icon_text a .tel{ font-size:76%;}
.swiper-button-prev, .swiper-button-next{top: 35%; width: 15px; height: 24px; background-size: 15px 24px;}
.width-1440{ padding:20px 0px;}
.photo_title { font-size: 18px;}

}
@media all and (max-width : 414px){
.royalSlider { height: 430px !important;}
#main_area .rsDefault{background-size: auto 101%, 100% 100%;}
.contact_title { font-size: 24px; letter-spacing: 1px;}
.contact_area { padding: 30px 0px;}
.contact_title_line{max-height: 25px; margin-bottom: 35px;}
.form-horizontal{font-size: 18px;}
.intro_02_title { font-size: 28px;}
.intro_02_sec { font-size: 20px;}
.intro_03_slogn_title { width: 360px;}
.photo_03_title { font-size: 27px;}
.photo_03_title span { font-size: 16px;}
#photo_03 ul.nav-tabs{ width:90%; margin:auto;}
#photo_03 .nav > li > a { padding: 5px;}
#photo_03 ul.nav-tabs li { margin-bottom:2px;}
#photo_03 ul.nav-tabs li a { font-size:90%;}
#photo_03 ul.nav-tabs li a span{ display:block;}
.contact_slogin{font-size: 30px; background-size: 100%; padding:30px 0px 0px 0px;}
.contact_slogin span { font-size: 24px !important;}
.contact_area { padding: 0px;}
.photo_02_text p{font-size: 35px; letter-spacing: 3px;}
}
@media all and (max-width : 360px){
.foot_info ul li{padding-left: 0px;}
}