@charset "utf-8";

body{ 
	overflow-x:hidden;
}

.share{margin:8px 0;}
.share img{margin:0 2px;}

.backtop{
	position:fixed;
	z-index:99;
	width:48px;
	height:48px;
	left:100%;
	top:100%;
	margin-top:-130px;
	margin-left:-64px;
	padding:10px ;
	background-color:rgba(96,56,19,0.5);
	text-align:center;
	color:#fff;
	font-size:1.3rem;
	border-radius:50%;
	cursor:pointer;
	-webkit-transition: background 0.3s; /* Safari */ 
	transition: background 0.3s;
}
.backtop:hover{ background-color:#603813;}

@media (min-width:992px){
	.backtop{margin-top:-130px;}
}


/*==========header css==========*/

.fadeInRight{
  -webkit-animation: fadeInRight 0.4s; /* Safari 4+ */
  -moz-animation:    fadeInRight 0.4s; /* Fx 5+ */
  -o-animation:      fadeInRight 0.4s; /* Opera 12+ */
  animation:         fadeInRight 0.4s; /* IE 10+, Fx 29+ */
}

.social_content{ position:fixed; z-index:99; top:100%; left:0; margin-top:-68px; height:68px; width:100%; background-color:#443e89; text-align:center;}
.social_content .social_item{ float:left; width:25%; margin:8px 0;}
.social_content .social_item a{ color:#fff; font-size:1.3rem; text-decoration:none;}
.social_content .social_item a:hover{ color:#7a75b8;}

.social_content .social_item a span{ font-size:0.8rem; display: block;}

@media (min-width:992px){
	.social_content{ position:fixed; z-index:99; top:33%; left:100%; /*margin-top:-350px;*/ margin-left:-90px; width:330px; padding:15px; border-radius:30px; background-color:transparent; text-align:center;}
	.social_content .social_item{ float:none; text-align:center; border-bottom:1px solid #443e89; padding:15px 8px;}
	.social_content .social_item:last-child{ border-bottom:none;}
	.social_content .social_item a{ color:#443e89;}
	.social_item_fb{ padding-left:3px;}
}
@media (min-width:1920px){
	.social_content{ top:30%;}
}

/*========================================================
                     main css
=========================================================*/
.view_lg{ display:none;}
@media (min-width:768px){
	.view_sm{ display:none;}
	.view_lg{ display:block;}
}

/*.prev-alt{ background-color:transparent; color:#fff; text-shadow: 0px 0px 5px #000, 0px 0px 10px #333, 0px 0px 15px #555; position:absolute; z-index:555; cursor:pointer; top:50%; left:0%; padding:14px 15px 16px 15px; transform:translate(0,-50%); opacity:0.75;}
.prev-alt:hover{ opacity:1;}
.next-alt{ background-color:transparent; color:#fff; text-shadow: 0px 0px 5px #000, 0px 0px 10px #333, 0px 0px 15px #555; position:absolute; z-index:555; cursor:pointer; top:50%; left:100%; padding:14px 15px 16px 15px; transform:translate(-100%,-50%); opacity:0.75;}
.next-alt:hover{ opacity:1;}*/

/*========================================================
                     top_banner
=========================================================*/
.top_banner_block{ 
	/*background:url(../img/top_banner_bg.jpg) top center no-repeat; 
	background-size:cover;*/
	position:relative;
	min-height:40vh;
	overflow: hidden;
	/*padding:5% 0;*/
}
.top_banner_block .logo{ position:absolute; top:10%; left:5%; z-index:10; max-width:45%;}
.top_banner_block .textbox{ position:absolute; right:10%; bottom:10%; z-index:10; max-width:45%; }
.top_banner_block .textbox .text1{ padding-bottom:5%;}
.top_banner_block .bg img{ 
	position:absolute;
    z-index:3;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:auto;
    height:190%;
    object-fit: cover;

    transform-origin: center;
    animation: kaleidoscope-animate 160s linear infinite;
}
@keyframes kaleidoscope-animate {
	0% {
       	transform:translate(-50%,-50%) rotate(0);
    }
    100% {
       	transform:translate(-50%,-50%) rotate(360deg);
    }
}

@media (min-width:768px){
	.top_banner_block .bg img{ height:220%;}
	.top_banner_block .logo{ max-width:25%; left:7%;}
	.top_banner_block .textbox{ max-width:32%;}
}
@media (min-width:1024px){
	.top_banner_block{ min-height:50vh;}
}
@media (min-width:1920px){
	.top_banner_block{ min-height:100vh;}
}

/*========================================================
                     內頁設定
=========================================================*/
.top_block{}
.top_block img{ width:100%;}
.top_block .container-fluid{ padding:40px 20px;}
@media (min-width:1024px){ .top_block .container-fluid{ padding:100px;}}
@media (min-width:1440px){ .top_block .container-fluid{ padding:100px 190px;}}

.text_block{ color:#603813; text-align:center;}
.text_block .title{ padding-bottom:20px;}
.text_block .title h3{ font-size:1.7rem; font-weight:bold;}

.block1{ background:url(../img/block1_bg.jpg) center right no-repeat; background-size:100%; background-color:#f9f0dc;}
.block1 .text_block{ text-align:left;}
.block1 .text_block .title h2{ line-height:1.7rem; font-weight:bold;}
.block1 .text_block .title h2 span{ font-size:19px;}
.block1 .text_block .text p{ font-size:0.9rem; line-height:2rem; font-weight:bold;}

.block2{ background:url(../img/block2_bg.jpg) top center no-repeat; background-size:cover; padding:7% 0;}
.block2 .pic_row .picbox .pic{ padding-bottom:20px;}
.block2 .pic_row .picbox .pic img{ border-radius:50%;}
.block2 .pic_row .picbox .text{ color:#603813; text-align:center;  font-weight:bold;}

.block3{ background:url(../img/block3_bg.jpg) top center no-repeat; background-size:cover;}
.block4{ background:url(../img/block4_bg.jpg) top center no-repeat; background-size:cover;}
.block5{ background:url(../img/block5_bg.jpg) top center no-repeat; background-size:cover;}
.block6{ background-color:#f9f0dc;}
.block6 .pic_block{ padding-bottom:20px;}
.block6 .pic_block .pic{ padding-bottom:15px;}
.block6 .text h4{ text-align:center; color:#603813; font-weight:bold;}


.case_block{ padding-bottom:20px; display:inline-flex; }
.case_block .left{ width:30%; background-color:#fff;}
.case_block .right{ width:70%;}

.case_row .casebox{ padding:5%;}
.case_row .text{ width:100%; background-color:#fff; padding:10px 0;}
.case_row .text h2{ font-size:0.9rem; font-weight:bold; color:#603813; padding-bottom:5px;}
.case_row .text .link{}
.case_row .text .link a{ text-decoration:none; color:#603813; font-size:0.8rem;}
.case_row .text .link img{ max-width:25px; padding-right:5px;}
.case_row .text .link a:hover{ color:#c9a163; transition:all .3s;}
.case_row .right .slide .carousel-item{ padding:43%; background-size:cover;}


@media (min-width:768px){
	.text_block .title{ padding-bottom:40px;}
	.text_block .title h3{ font-size:2.3rem;}
	
	.block1{ background-size:cover;}
	.block1 .text_block .title h2{ font-size:2.2rem; line-height:2rem;}
	.block1 .text_block .text p{ font-size:1.2rem; line-height:2.2rem;}
	.block2 .pic_row .picbox .text{ font-size:1.2rem;}
	
	.case_block{ padding-bottom:30px;}
	.case_block .left{ width:100%;}
	.case_row .casebox{ padding:0;}
	.case_row .text{ padding:25px 15px;}
	.case_row .text h2{ font-size:1.4rem; padding-bottom:10px;}
	.case_row .text .link a{ font-size:1rem;}
	.case_row .text .link img{ max-width:30px; padding-right:7px;}
	
	.block6{ padding:0 15%;}
	.block6 .text h4{ font-size:1.8rem;}
	
}
@media (min-width:1440px){
	.block2 .pic_row .picbox .text{ font-size:1.4rem;}
}


/*========================================================
                         footer
=========================================================*/
.footer{ color:#fff; background-color:#c9a163; padding:40px 0; text-align:center; /* margin-bottom:67px; */}
.footer .logo{ padding-bottom:20px;}
.footer .logo img{ width:100%; max-width:55%;}
.footer .text p{ margin:0; line-height:1.5rem;}

@media (min-width:768px){ 
	.footer{ padding:30px 15%; text-align:left; /*margin-bottom:0;*/}
	.footer .logo img{ max-width:80%;}
	.footer .text p{ font-size:1.1rem; line-height:1.8rem;}
}
@media (min-width:1440px){ 
	.footer{ padding:30px 25%;}
	.footer .logo img{ max-width:60%;}
}




/*========================================================
                         contact
=========================================================*/

.contact_section{ font-family:"jf金萱鮮摘", Geneva, sans-serif; /*padding: 30px 15px 120px 15px;*/ background-image:url(../img/bg1.jpg); background-size:cover; background-position:center;}
.contact_section_wrapper{ margin:0 auto; padding: 15px; background-color:rgba(255,255,255,0.8); font-family: 'Noto Serif TC', Arial, Verdana, Helvetica, sans-serif;}

.contact_section_wrapper h2 {
	color:#443e89;
    font-weight:bold;
    margin-bottom:30px;
    letter-spacing:0.5rem;
}
.contact_section_wrapper h2 span{ 
	display:block; 
	color:#7a75b8; 
	font-weight:400; 
	font-size:0.8rem; 
	letter-spacing:0.1rem; 
	padding:10px 0;
}

.contact_section_wrapper #form1 .btn-send {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    color: #fff;
    font-size: 1.2rem;
    background-color: #443e89;
    border-radius: 0;
    width: auto;
    letter-spacing: 0.5rem;
}
.contact_section_wrapper #form1 .btn-send:hover{ cursor:pointer; background-color:#7a75b8; transition:all .3s;}

.contact_section_wrapper #form1 input::placeholder{letter-spacing: 0.4rem; color:#443e89;}
.contact_section_wrapper #form1 .col-msg label{letter-spacing: 0.4rem; color:#443e89; margin-left: 10px;}
.contact_section_wrapper #form1 .col-time label{letter-spacing: 0.4rem; color:#443e89; margin-left: 10px;}
.contact_section_wrapper #form1 .col-time select{
    letter-spacing: 0.4rem;  
    color:#414966; 
    padding-left: 10px;
    background-image: url(../img/arrow.png);
    background-position: center right;
    background-size: 16px auto;
    background-repeat: no-repeat;
}


@media (min-width: 768px){
    /*.contact_section{ padding:60px 0;}*/
    .contact_section_wrapper{ max-width:960px; padding:30px 60px;}
	.contact_section_wrapper h2 span{ font-size:1.2rem;}
	
    .contact_section_wrapper #form1 .col-time .time_wrapper{ border-bottom:1px solid #ccc;}
    .contact_section_wrapper #form1 .col-time label{ float:left;}
    .contact_section_wrapper #form1 .col-time select{margin-left: calc( 50% + 15px); width: calc( 50% - 15px); border: none;}
}

@media (min-width: 1400px){
    .contact_section_wrapper{ max-width:1376px; padding: 60px 100px;}

}

#form1 label {
    color: #414966;
    text-align: left;
    margin-bottom: 0;
}
#form1 .form-control {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #c2c0bf;
}
#form1 input, #form1 textarea {
    background: transparent;
    color: #111;
}
#form1 .btn-send {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    color: #fff;
    font-size: 1.2rem;
    background-color: #BB5730;
    width: 100%;
    border-radius: 20px;
}
#form1 .btn-send:hover {
    background-color: #dd621c;
}
#form1 select {
    color: #111;
    width: 100%;
    height: 38px;
    padding: 4px 5px;
    font-size: 1rem;
    background: transparent;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url(../img/arrow.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 24px auto;
}
#form1 select option {
    color: #111;
}
#form1 .custom-control-label::before {
    border-radius: 0;
    border: 1px solid #C2C0BE;
    background-color: transparent;
    color: #000;
    margin-top: 4px;
}
#form1 .custom-control-label::after {
    margin-top: 4px;
}
#form1 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #424866;
}

/*--google recaptcha 隱藏----*/
.grecaptcha-badge{ 
	visibility:hidden;
}


@media (min-width:768px){
	.form_block{ padding:20px;}
	.form_block .content{ padding:18px 100px;}
}
@media (min-width:1920px){
	.form_block .content{ padding:18px 150px;}
}

/*========================================================
                  隱私權聲明
=========================================================*/
.fancybox-container {z-index: 9999999;}
.modal-body{ overflow-y:auto; padding:20px;}
.modal-header{ border-bottom:none;}
.modal-body h3{ text-align:center; margin-bottom:20px; font-weight:bold;}
.modal-body p span{ font-weight:bold; font-size:1.1rem;}
.modal-dialog{ margin-bottom:80px;}

@media (min-width:576px){
	.modal-body{ padding:20px 40px;}
	.modal-dialog{ max-width:1000px;}
}
@media (min-width:1024px){
	.modal-dialog{ max-width:1200px; margin-bottom:0;}
}