/*EWAYS 2020*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700|Noto Serif TC:wght@400;700|Felipa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;900&display=swap');


html{
	font-family:sans-serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%; 
	font-size:62.5%;
	-webkit-tap-highlight-color:rgba(0,0,0,0);}
body{
	margin:0; 
	font-family: 'Noto Sans TC', 'Microsoft JhengHei';
	font-size:14px;
	line-height:1.428571429;
	color:#555;
	background-color:#fff;
	background: url(../images/bg_pink.jpg) top center no-repeat;}
	
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
	display:block}

a{
	background:transparent; 
	color:#1850a3; 
	text-decoration:none;
	outline: none; /* for Firefox Google Chrome  */
	behavior:expression(this.onFocus=this.blur()); /* for IE */}
a:active,a:hover{
	outline:0; 
	color:#CCC; 
	-webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
	text-decoration:none;}
a:visited{
	text-decoration:none;}
a:focus{
	outline:thin dotted;
	outline:5px auto -webkit-focus-ring-color;
	outline-offset:-2px;
	text-decoration:none;}

h1{
	font-size:2em;
	margin:.67em 0;}

img{
	border:0;
	vertical-align:middle;}
	
input,button,select,textarea{
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	outline: none; /* for Firefox Google Chrome  */
	behavior:expression(this.onFocus=this.blur()); /* for IE */}

::selection {
    background: #e40073;
    color: #fff;}
::-moz-selection {
    background: #e40073;
    color: #fff;}
	
#toTop a{
	position: fixed !important;
	right:30px;
	bottom: 0;
	width: 123px;
	height: 61px;
	text-align:center;
	_position:absolute;
	_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-4);
	z-index:100000;
	color: #FFF;
	background: url(../images/icon_top.png) no-repeat;
	font-weight: 600;}
#toTop {
	z-index:1;
    opacity: 1;
    position: fixed;
    display: none;}
#toTop:hover{
    opacity: 0.8;
    cursor: pointer;}
@media (max-width:767px){
#toTop a{
	right:10px;
	width: 80px;
	height: 40px;
	background: url(../images/icon_top.png) no-repeat;
	background-size: 100% auto;}}
	
.site-main{
	margin-top: 8px;}
.carousel{
	position:relative;}
.carousel-indicators {
	left: 70px;}
.carousel-indicators li {
    width: 12px;
	height: 12px;
	margin-top:30px;
    background-color: #FFF \9;
    border: 2px solid #FFF;}
.carousel-indicators .active {
    width: 12px;
    height: 12px;
    background-color: #FFF;
    border: 2px solid #FFF;}	
.carousel-control{
	width: 12%;}
.carousel-control.left, .carousel-control.right{
	background:none;}
.banner_content{
	min-height:930px;
	font-family: 'Montserrat', 'Noto Sans TC', 'Microsoft JhengHei';
	position:relative;}
.banner_content p{
	position:absolute; 
	top:40%; 
	left:0; 
	width:50%;
	color:#FFF;
	line-height: 160%;
	font-size:2.2em; 
	font-weight:600;}
.banner_content p span{
	display:inline-block; 
	width:auto; 
	background:rgba(45, 45, 45, 0.6);
	padding:10px 30px; 
	margin-bottom:10px;}
.banner_content p span.title{
	font-style:italic;
	font-size: 1.3em;}
.banner_content p span.title:first-letter{
	color: #e40073;}
@media (max-width:1199px){
.banner_content p{
	width:52%;}}
@media (max-width:991px){
.banner_content p{
	width:70%;}}
@media (max-width:767px){
.site-main{
	margin-top: 50px;}
.banner_content{
	min-height:500px;}
.banner_content p{
	position:absolute; 
	bottom:160px; 
	left:0; 
	width:100%; 
	text-align:center; 
	color:#FFF; 
	font-size:1.5em; 
	font-weight:500; 
	font-style:italic;}
.banner_content p span.title{
	font-style:italic;
	font-size: 1.1em;}}

/*PADDING*/
.padding_0{
	padding:0}
.index_padding{
	padding-top:70px !important; 
	padding-bottom:60px !important;}
.page_padding{
	padding-top:70px !important; 
	padding-bottom:60px !important;}
.footer_padding {
	padding-top:75px !important; 
	padding-bottom:30px !important;}
@media (max-width:767px){
.padding_turn5{
	padding:5px;}
.padding_turn0{
	padding:0;}
.index_padding{
	padding-top:50px !important; 
	padding-bottom:30px !important;}
.page_padding{
	padding-top:30px !important; 
	padding-bottom:20px !important;}
.footer_padding {
	padding-top:50px !important; 
	padding-bottom:10px !important;}}

/*FOOTER*/
.mask_footer{
	margin-bottom: -64px;
	height: 64px;
	z-index: 1;
	background: url(../images/mask_footer.png) center top no-repeat;}
@media (max-width:767px){
.mask_footer{
    background: url(../images/mask_footer.png) center top no-repeat;
	background-size: contain;}}

footer {
	position: relative;
    color: #FFF;}
footer a, footer a:visited {
	  color: #FFF;}
footer a:hover, footer a:active, footer a:focus  {
	color: #ffbfa5;}
footer h2 {
	font-weight:600;
	font-size: 1.5em;
	font-family: 'Noto Serif TC', 'Noto Sans TC', "Microsoft JhengHei";
	margin: 0 0 20px;
	padding: 0;}
footer p {
	font-size: 1.15em;
	margin-bottom:15px;
	margin-left: 5px;}
footer p  i{
	font-size: 1.2em;}
footer .links_style a {
	display: inline-block;
	padding-right: 20px;
	margin-bottom:15px;}
.footer_box{
	margin-bottom:35px;}
.copyright_area{
	border-top: 1px rgba(255,255,255,0.3) solid;
	padding: 15px 20px;}
.copyright_area p{
	font-size: 1em;
	line-height: 180%;
	margin-bottom: 0 !important;
	font-family: 'Noto Serif TC', 'Noto Sans TC', "Microsoft JhengHei";
	color: #fff;}
.copyright_area p a{
	color: #fff;}
.copyright_area p a:hover{
	color: #e40073;}
@media (max-width:767px){
footer p {
	font-size: 1.1em;
	margin-bottom:10px;}
footer .links_style a {
	margin-bottom:10px;}
.copyright_area{
	padding: 20px 20px;}}

.txt_red{
	color:#e40073 !important;}
.txt_black{
	color:#555 !important;}
	
.animatedDelay1{
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;}
.animatedDelay2{
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;}
.animatedDelay3{
	-webkit-animation-delay: 0.9s;
	animation-delay: 0.9s;}
.animatedDelay4{
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;}
.animatedDelay5{
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;}
.animatedDelay6{
	-webkit-animation-delay: 1.8s;
	animation-delay: 1.8s;}
.animatedDelay7{
	-webkit-animation-delay: 2.1s;
	animation-delay: 2.1s;}
.animatedDelay8{
	-webkit-animation-delay: 2.4s;
	animation-delay: 2.4s;}
.animatedDelay9{
	-webkit-animation-delay: 2.7s;
	animation-delay: 2.7s;}
.animatedDelay10{
	-webkit-animation-delay: 3.0s;
	animation-delay: 3.0s;}

/*modal*/
.modal_header{
	background:#e40073; 
	color:#FFF;
	-webkit-border-top-left-radius: 5px; 
	-webkit-border-top-right-radius: 5px; 
	-moz-border-radius-topleft: 5px; 
	-moz-border-radius-topright: 5px; 
	border-top-left-radius: 5px; 
	border-top-right-radius: 5px;}
.modal_body{
	font-size:1.05em;
	padding-bottom:0;}
.modal_body img{
	/*margin:5px auto 10px;*/
	text-align:center;}

.modal_body_content{
	padding-bottom:10px;}
@media (max-width:767px){
.modal_body_content{
	padding:0 10px 10px;}}
.modal_body_content h3{
	margin: 0 0 7px;
    padding: 0;
    color: #333;
    line-height: 140%;
    font-weight: 500;
    font-size: 1.3em;}
.modal_body_content p{
    line-height: 180%;
    color: #7a7a7a;}
.modal_product_detail_list{
	float:left;
	list-style-type:none;
	padding:0;}
.modal_product_detail_list li{
	padding-bottom:5px;}
.modal_product_detail_list li a{
	color:#272b5b;}
.modal_product_detail_list li a:hover{
	color:#CCC;}

.text_content{
	padding:10px 15px 0;}

.btn-first {
  color: #fff;
  background-color: #e40073;
  border-color: #e40073;}
.btn-second {
  color: #fff;
  background-color: #686d71;
  border-color: #686d71;}
.btn-first:hover, .btn-first:active, .btn-first:focus,
.btn-second:hover, .btn-second:active, .btn-second:focus{
  color: #ccc !important;}
  
.modal-footer .btn-first, .modal-footer .btn-second{
	padding:12px 5px;
	font-size:1em;}
	
.btn_left{
	border-radius: 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;}

/*----------------------------------------------------------------------------------INDEX AREA*/

/*MAIN_TITLE*/
.main_title{
	margin-bottom: 30px;
	text-align: center;}
.main_title h2{
	margin: 0;
	padding: 47px 0 0;
	font-size: 2.2em;
	color: #111;
	text-transform:uppercase;
	line-height: 160%;
	background: url(../images/icon_title.png) top center no-repeat;
	font-weight: bold;
	font-family: 'Noto Serif TC', 'Noto Sans TC', 'Microsoft JhengHei';}
.page_padding .main_title h2{
	font-size: 1.8em;}
.main_title.white_style h2{
	color: #FFF;
	background: url(../images/icon_title_white.png) top center no-repeat;}
.main_title span{
    display: inline-block;
    width: 70px;
    height: 5px;
    margin: 8px 0 15px;
    border-top: 1px #e40073 solid;
    border-bottom: 1px #e40073 solid;}
.main_title.white_style span{
    border-top: 1px #FFF solid;
    border-bottom: 1px #FFF solid;}
.main_title p{
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 1.15em;
	line-height: 180%;}
@media (max-width:767px){
.main_title{
	margin-bottom: 20px;
	padding: 0 20px;}
.main_title h2{
	font-size: 1.8em;}
.page_padding .main_title h2{
	font-size: 1.6em;}
.main_title p{
	font-size: 1.2em;}
.page_padding .main_title p{
	line-height: 200%;
	font-size: 1.15em;
	margin-top: 12px;}}

/*FIXED BG*/
.fixed-bg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;}	
.fixed-bg.index_target{
	background-image: url(../images/bg_target.jpg);} 
footer.fixed-bg{
	background-position: top center;
	background-image: url(../images/bg_footer.jpg);} 
@media (max-width:1199px) and (min-width:768px){
.fixed-bg {
	background-attachment:scroll;}} 

/*INDEX NEW*/
.mask_new{
	margin-top: -170px;
	height: 171px;
	z-index: 1;
	background: url(../images/mask_new.png) center bottom no-repeat;}
@media (min-width:768px) {
.bg_hand{	
	background: url(../images/bg_new.png) left bottom 20% no-repeat;
	background-size: contain;}}
@media (max-width:767px) {	
.mask_new{
    background: url(../images/mask_new.png) left bottom no-repeat;
	background-size: auto 70%;}
.bg_hand{	
	background: url(../images/bg_new.png) right -200px top 20% no-repeat;}}
.index_new{
	position: relative;
	color: #FFF;
	padding-bottom: 20px;
	background: linear-gradient(90deg, #F49496 0%, #E40073 100%);
	background: -moz-linear-gradient(90deg, #F49496 0%, #E40073 100%);
	background: -webkit-linear-gradient(90deg, #F49496 0%, #E40073 100%);
	background: -o-linear-gradient(90deg, #F49496 0%, #E40073 100%);}
.index_new h2{
	margin: -70px 0 10px;
	padding: 0 30px;
	font-family: 'Noto Serif TC', 'Noto Sans TC', "Microsoft JhengHei";}
.index_new span{
	display: inline-block;
	width: 70px;
	height: 5px;
	margin: 0 0 20px 30px;
	border-top:1px #FFF solid;
	border-bottom:1px #FFF solid;}
.index_new .pic{
	position: relative;}
.index_new .pic img{
	border: 20px #fff solid;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);}
.index_new .pic .photo_style{
	position: absolute;
	top: -12px;
	right: -10px;
	width: 138px;
	height: 138px;
	background: url(../images/icon_new_top.png) no-repeat;
	background-size: contain;}
.index_new .pic .photo_style.bottom_style{
	top: inherit;
	right: inherit;
	bottom: -37px;
	left: -10px;
	background: url(../images/icon_new_bottom.png) no-repeat;
	background-size: contain;}
@media (max-width:767px) {
.index_new .pic .photo_style{
	top: -8px;
	right: 0;
	width: 68px;
	height: 68px;}
.index_new .pic .photo_style.bottom_style{
	top: inherit;
	right: inherit;
	bottom: -21px;
	left: 0;}}
.index_new .pic img{
	border: 10px #fff solid;}
.index_new h3{
	margin: 30px 0 15px;
	padding: 0;
	line-height: 120%;
	font-size: 1.5em;
	font-family: 'Noto Serif TC', 'Noto Sans TC', "Microsoft JhengHei";}
.index_new p{
	margin: 0;
	padding: 0;
	line-height: 180%;
	font-size: 1.15em;
	font-family: 'Noto Serif TC', 'Noto Sans TC', "Microsoft JhengHei";}
.index_new a h3, .index_new a p{
	color: #FFF;}
.index_new a:hover h3, .index_new a:hover p, .index_new a:hover img {
    -webkit-filter: opacity(.8);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;}
.index_new .pic_truck img{
	position: absolute;
	bottom: -25%;
	right: 6%;
	z-index: 1;}
@media (max-width:1499px){
.index_new .pic_truck img{
	bottom: -15%;
	width: 200px;}}
@media (max-width:767px){
.index_new .pic_truck img{
	bottom: -10%;
	width: 150px;}}

/*INDEX SERVICES*/
.index_services{
	margin-top:	-20px;
	margin-bottom: 20px;}
.index_services img{
	background: #b0b0b0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 15px #FFF solid;}
.index_services img:hover{
	background: linear-gradient(90deg, #E40073 0%, #ffbfa5 100%);
	background: -moz-linear-gradient(90deg, #E40073 0%, #ffbfa5 100%);
	background: -webkit-linear-gradient(90deg, #E40073 0%, #ffbfa5 100%);
	background: -o-linear-gradient(90deg, #E40073 0%, #ffbfa5 100%);
	border: 15px #fce5f1 solid;}
.index_services p{
	font-family: 'Noto Serif TC', 'Noto Sans TC', "Microsoft JhengHei";
	font-size: 1.2em;
	font-weight: 600;
	margin: 15px 0;}
.page_padding .index_services{
	margin-bottom: 0;}
.page_padding .index_services img{
	margin-bottom: -10px !important;}
.page_padding .index_services p{
	line-height: 160%;}
@media (max-width:1199px){
.index_services img{
	border: 13px #FFF solid;}
.index_services img:hover{
	border: 13px #fce5f1 solid;}
.page_padding .index_services img{
	border: 10px #FFF solid;}
.page_padding .index_services img:hover{
	border: 10px #fce5f1 solid;}}
@media (max-width:767px){
.index_services p{
	margin: 0 0 15px;
	font-size: 1.15em;}
.page_padding .index_services{
	margin-bottom: 10px;}
.page_padding .index_services p{
	margin: 10px 0 15px;
	font-size: 1.1em;}}

/*INDEX TARGET*/
.mask_target_top{
	margin-bottom: -69px;
	height: 69px;
	z-index: 1;
	background: url(../images/mask_target_top.png) center top no-repeat;}
.mask_target_bottom{
	margin-top: -64px;
	height: 64px;
	z-index: 1;
	background: url(../images/mask_target_bottom.png) center bottom no-repeat;}
@media (max-width:767px){
.mask_target_top{
    background: url(../images/mask_target_top.png) center top no-repeat;
	background-size: contain;}
.mask_target_bottom{
    background: url(../images/mask_target_bottom.png) center bottom no-repeat;
	background-size: contain;}}

.index_target{
	padding-top: 50px;
	padding-bottom: 40px;}
.index_target img{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;}
.index_target p{
	font-family: 'Noto Serif TC', 'Noto Sans TC', "Microsoft JhengHei";
	font-size: 1.3em;
	font-weight: 500;
	margin: 15px 0;
	color:#FFF;}
@media (max-width:767px){
.index_target{
	padding-top: 0;
	padding-bottom: 10px;}
.index_target p{
	margin: 10px 0 20px;
	font-size: 1.15em;}}
@media (min-width: 768px){
.index_target .col-xs-6 img:hover {
    transform: translateY(-10px);
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;}}

/*INDEX CLIENTS*/
.clients_area{
	-webkit-filter:grayscale(1);
	margin-bottom: 35px;
	position: relative;}
.index_clients .col-sm-3{
	-webkit-filter:brightness(.92);}
@media (min-width:768px){
.index_clients .col-sm-3.num2,
.index_clients .col-sm-3.num4,
.index_clients .col-sm-3.num5,
.index_clients .col-sm-3.num7{
	-webkit-filter:brightness(.97);}}
@media (max-width:767px){
.clients_area{
	margin-top: 0;
	margin-bottom: 80px;}
.page_padding .clients_area{
	margin-top: 0;
	margin-bottom: 35px;}
.index_clients .col-sm-3.num2,
.index_clients .col-sm-3.num3,
.index_clients .col-sm-3.num6,
.index_clients .col-sm-3.num7{
	-webkit-filter:brightness(.97);}}
.index_clients img{
	-webkit-filter: opacity(0.7);}
@media (min-width:768px){
.index_clients .col-sm-3:hover .pic{
	overflow: hidden;}
.index_clients .col-sm-3:hover .pic img{
    left: -50px;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
	-webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;}}
.clients_area span{
	position: absolute;
	display: inline-block;
	top: -50px;
	right: 30px;
	font-size: 1.5em;}
@media (max-width:767px){
.clients_area span{
	position: absolute;
	top: inherit;
	right: 0;
	width: 100%;
	text-align: center;
	bottom: -50px;}}

/*----------------------------------------------------------------------------------PAGE*/

/*banner標題*/
.page_banner{
	background: url(../images/bg_banner.jpg) center center no-repeat;
	padding:175px 0 0;
	height: 300px;
	position: relative;
    float: left;
    width: 100%;
	text-align: center;
    text-transform: uppercase;
    font-family: 'Noto Serif TC', 'Noto Sans TC', "Microsoft JhengHei";}
.page_banner .pic_truck img{
	position: absolute;
	bottom: -105px;
	left: 0;
	z-index: 2;
	width: 200px;}
@media (max-width:767px){
.page_banner .pic_truck img{
	bottom: -105px;
	width: 150px;}}

.page_banner h2{
	margin: 0;
	padding: 0 0 15px;
	display:block; 
	width:auto; 
	color: #FFF;
	text-transform:uppercase;
	font-weight: 700;
	font-size: 2em;}
.page_banner .container{
	position: relative;}
.page_banner .container > span {
    display: inline-block;
    width: 70px;
    height: 5px;
    margin: 0 0 25px;
    border-top: 1px #FFF solid;
    border-bottom: 1px #FFF solid;}
@media (max-width:991px) and (min-width:768px){
.page_banner{
	padding:125px 0 0;
	height: 250px;}}
@media (max-width:991px){
.page_banner{
	background-size: auto 100%;}}
@media (max-width:767px){
.page_banner{
	padding:30px 0 0;
	height: 120px;}
.page_banner h2{
	padding: 0 0 10px;
	font-size:1.4em;}
.page_banner .container > span {
    width: 60px;
    height: 4px;
    margin: 0 0 25px;}}

/*路徑*/	
#pathway {
	position: absolute;
	bottom: -55px;
	right: 0;
	z-index: 2;
	padding:10px;
	line-height:180%;
	float: left;
	width: 100%;
	font-size: 0.9em;
	color:#FFF;
	text-align: right;}
#pathway span{
	font-weight:400;}
#pathway a{
	color:#FFF;}
#pathway a:hover{
	color:#e40073;}
#pathway i{
	color:#e40073;
	padding: 0 11px;}
@media (max-width:767px){
#pathway {
	bottom: -35px;
	font-size: 0.85em;
	padding:10px 40px;
	text-align: center;
    overflow:hidden; 
    white-space:nowrap;
    text-overflow:ellipsis;}}

/*PAGE TITLE*/
.page_title{
	padding: 20px 15px 30px;}
.page_title h2{
	display:inline-block;
	margin:0;
	padding:0;
	width:auto;
	color:#333;
	font-style: italic;
    font-size: 1.7em;
	font-weight: 600;
	line-height:150%;}
.page_title h2 i{
	color: #e40073;
	padding-right: 10px;}
@media (max-width:767px){
.page_title h2{
	font-size: 1.5em;}}

/*網頁編輯內容*/	
.page_content{
	float:left; 
    width: 100%;
	height:auto;}
.page_content h3{
	margin:0 0 10px;
	font-size:1.3em;
	color: #111;
	line-height:160%;
    font-weight: 500;}
.page_content h4{
	padding: 0;
	margin:10px 0 0px;
	font-size:1.35em;
	color: #e40073;
	line-height:160%;
    font-weight: 500;}
.page_content p{
	font-size:1.15em;
	margin-bottom:20px;
	line-height:200%;
	color: #555;}
.page_content a{
	color:#e40073 ;}
.page_content a:hover{
	color: #111;}
.page_content .box{
    padding: 0 8px;}
.page_content img{
	margin-top:5px;
	margin-bottom:20px;}

/*小頁籤*/
.sort {
	float:left;
	text-align: center;
	width:100%;
    margin: 0 0 30px;}
.sort a {
	display:inline-block;
    margin: 0 4px 10px;
    color: #848484;
	background:#fff;
    border: 1px solid #CCC;
    text-decoration: none;
    padding: 5px 15px;
    position: relative;
    vertical-align: top;
    text-align: center;
    border-radius: 6px;
    transition: all .5s;
    font-size: 1.2em;}
.sort a.active, .sort a:hover{
    color: #643a77;
    border: 1px solid #643a77;
    background-color: #fff;}
@media (max-width:767px){
.sort {
    margin: 0 0 15px;}
.sort a {
    font-size: 1.1em;}}

/*INFO2*/
.aboutus_area{}
.aboutus_area > .col-xs-12{
	margin-bottom: 60px;}
.aboutus_area .col-md-4{
	position: relative;}
.aboutus_area h2{
	display: inline-block;
	font-family: 'Noto Serif TC', 'Noto Sans TC', 'Microsoft JhengHei';
	text-align: center;
	padding: 0;
	margin: 20px 30px 0;
	line-height: 150%;
	font-size: 1.8em;
	position: relative;}
.aboutus_area h2 i{
	position: absolute;}
.aboutus_area h2 i.fa-quote-left{
	top: -20px;
	left: -50px;}
.aboutus_area h2 i.fa-quote-right{
	bottom: -20px;
	right: -50px;}
@media (max-width:991px){
.aboutus_area h2{
	margin: 50px 30px 20px;}
.aboutus_area h2 i.fa-quote-left{
	top: -20px;
	left: -20px;}
.aboutus_area h2 i.fa-quote-right{
	bottom: -20px;
	right: -20px;}}
@media (max-width:767px){
.aboutus_area h2{
	font-size: 1.5em;}}
.aboutus_area h3{
	font-family: 'Noto Serif TC', 'Noto Sans TC', 'Microsoft JhengHei';
    font-weight: 500;
    font-size: 2em;
	color: #272727;
    margin: 10px 0 15px;
    padding: 0;}
.aboutus_area h4{
	font-family: 'Noto Serif TC', 'Noto Sans TC', 'Microsoft JhengHei';
    font-weight: 500;
    font-size: 1.3em;
	color: #e40073;
    margin: 10px 0;
    padding: 0;}
.aboutus_area h5{
	display: inline-block;
    font-weight: 500;
    font-size: 1.25em;
	color: #FFF;
	background: #e40073;
    margin: 10px 0 30px;
    padding: 10px 25px;}
.aboutus_area  p{
	font-size: 1.15em;
	line-height: 180%;
	margin-bottom: 0;}
.aboutus_area .box{
	padding: 40px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	border-top: 3px #e40073 solid;
	color: #555;}
.aboutus_area.products_style .box{
	border-top: 0;
	border-bottom: 6px transparent solid;
       -moz-border-image: -moz-linear-gradient(top left, #fad0a8 30%, #e40073 100%);
	  -webkit-border-image: -webkit-linear-gradient(top left, #fad0a8 30%, #e40073 100%);
	          border-image: linear-gradient(to bottom right, #fad0a8 30%, #e40073 100%);
	  border-image-slice: 1;}

@media (min-width:992px) {
.aboutus_area .col-xs-12:hover .box{
	transform: translateY(-10px);
	-webkit-transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	-ms-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;}}

@media (min-width:992px){
.aboutus_area .box{
	position: absolute;
	top: 0;
	left: -45px;
	z-index: 3;}
.aboutus_area .col_L .box{
	left: inherit;
	right: -45px;}
.aboutus_area.products_style .box{
	position: absolute;
	top: 50px;
	right: 0;
	left: inherit;
	width: 120%;}
.aboutus_area.products_style .col_L .box{
	right: inherit;
	left: 0;}}

@media (min-width:1900px){
.aboutus_area .box{
	padding: 50px;
	top: 0;
	left: -180px;
	width: 100%;}
.aboutus_area .col_L .box{
	right: -180px;}
.aboutus_area.products_style .box{
	padding: 50px;
	top: 60px;
	right: 0;
	left: inherit;
	width: 120%;}
.aboutus_area.products_style .col_L .box{
	right: inherit;
	left: 0;}}

@media (min-width:1500px) and (max-width:1899px){
.aboutus_area .box{
	padding: 50px;
	top: 0;
	width: 100%;}
.aboutus_area.products_style .box{
	padding: 50px;
	top: 50px;
	width: 120%;}}

@media (min-width:1200px) and (max-width:1499px){
.aboutus_area .box{
	top: 0;/*30px*/
	left: -50px;
	width: 100%;}
.aboutus_area .col_L .box{
	right: -50px;}
.aboutus_area.products_style .box{
	top: 30px;
	right: 0;
	left: inherit;
	width: 120%;}
.aboutus_area.products_style .col_L .box{
	right: inherit;
	left: 0;}}

@media (min-width:992px) and (max-width:1199px){
.aboutus_area .box{
	top: 0;
	left: -100px;
	width: 120%;}
.aboutus_area .col_L .box{
	right: -100px;}
.aboutus_area.products_style .box{
	top: 0;
	right: 0;
	left: inherit;
	width: 120%;}
.aboutus_area.products_style .col_L .box{
	right: inherit;
	left: 0;}}

@media (max-width:991px){
.aboutus_area > .col-xs-12{
	margin-bottom: 20px;}
.aboutus_area .box{
	padding: 25px;
	border: 0;}
.aboutus_area.products_style .box.text-right{
	text-align: center;}
.aboutus_area  h3{
    margin: 5px 0 10px;
	font-size: 1.8em;}
.aboutus_area > .col-xs-12.products_info {
	margin-top: 15px;
	margin-bottom: 0;}}
@media (max-width:767px){
.products_info .sumu_style .col-xs-12{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px #e40073 solid;}}

/*登入表單*/
.form-signin {}
.form-signin .tip {
  margin: 20px 0;
  padding-left:10px;
  font-size:1.15em;
  color:#607579;}
.form-signin .tip a{
  color:#333;}
.form-signin .tip a:hover{
  color:#607579;}
.form-signin .tip p{
  font-size:1em;
  line-height:175%;}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 1.15em;}
.form-signin .form-control:focus {
  z-index: 2;}
.form-signin .top {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;}
.form-signin .middle {
  margin-bottom: -1px;
  border-radius: 0;}
.form-signin .bottom {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;}

.contact-form{
	padding:15px 15px 25px;}
.contact-form .form-control{
	height:auto;
	font-size:1.1em;
	/*border:0;
	border-bottom:1px #DDD solid;
	box-shadow:none;*/}		
.contact-form .btn-lg{
	font-size: 1.2em;
	border-radius: 4px;
	margin-bottom: 6px;}
.form-control{
	font-family: 'Noto Sans TC';
	color: #333;}

@media (min-width: 992px){
.contactus_line{
	border-right:1px #DDD solid;
	min-height: 500px;
	margin-bottom: 30px;}
.contactus_blank{
	padding-left: 70px;}}
@media (max-width: 991px){
.contactus_blank{
	margin-top: 15px;
	padding-top: 30px;
	border-top:1px #DDD dashed;}}
@media (max-width: 767px){
.contactus_blank{
	margin-top: 5px;
	padding-top: 20px;}
.contactus_line, .contactus_blank{
	padding-left: 0;
	padding-right: 0;}}

/*INDEX LOGISTICS*/
.services_imex{
	margin: 0 0 10px;}
.services_imex a{
	position: relative;
	display: block;
	padding-bottom: 1px;
	background: #fff;}
.services_imex .pic{
	position: relative;}
.services_imex .pic img{
	margin: 0 auto;}
.services_imex .box{
	display: block;
	padding: 0;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	background: #FFF;}
.services_imex ul{
	list-style-type: none;
	margin: 15px 0;
	padding: 0 0 10px;}
.services_imex li{
	margin: 0 15px 10px;
	padding: 0;
	line-height: 160%;
	font-size: 1.15em;
	color: #333;
	position: relative;}
.services_imex.list_style li {
	margin: 0 25px 10px 45px;}
.services_imex.list_style li i{
	position: absolute;
	top: 4px;
	left: -27px;
	color: #ffd040;}
.services_imex span{
	-webkit-filter: opacity(0);
	position: absolute;
	bottom: -10px;
	left: 0;
	padding: 15px 0;
	font-size: 1.2em;
	display: block;
	text-align: center;
	width: 100%;
	background: rgba(250, 190, 0, 0.85);
	color: #fff;}
.services_imex:hover span{
	-webkit-filter: opacity(1);
	bottom: 0;
	-webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;}
.services_imex h4{
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 12px 15px;
	line-height: 140%;
	font-size: 1.25em;
    font-family: 'Noto Serif TC', 'Noto Sans TC', 'Microsoft JhengHei';
	font-weight: 600;
	display: block;
	width: 100%;
	background: rgb(101 56 115 / 0.7);
	color: #fff;}
.services_imex.list_style h4 {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: rgb(101 56 115 / 0.9);}
.services_imex h4 span.num{
	-webkit-filter: opacity(1);
	position: absolute;
	top: -20px;
	left: 10px;
	text-align: center;
	width: 100%;
    padding: 0;
    font-size: 2.2em;
    background: rgba(250, 190, 0, 0);}
@media (max-width:767px){
.services_imex{
	padding: 0 10px;}
.services_imex span{
	-webkit-filter: opacity(1);
	bottom: 0;}}
.services_imex:hover h4 span.num{
	left: 25px;}
.services_imex:hover h4{
	background: rgb(228 0 115 / 0.9);
	-webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;}

/*attachment area*/
p.attachment_area {
	padding: 15px;
	margin-top: 20px;
	margin-bottom: 0;
	line-height:180%;
	   border: 1px #643a77 solid;
	   border-radius: 4px;}
   @media (max-width:767px){
   p.attachment_area {
	margin-top: 10px;
	margin-bottom: 30px;}}
   p.attachment_area span{
	color:#643a77;}
   p.attachment_area span i{
	margin-right: 8px;}

	/* 20211104 */
.index_video .video_box{
	border: 5px solid #fff;}
