@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Noto+Sans+TC:wght@400;500&display=swap');
@import url(animate-custom.css);

/*============reset===============*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td, iframe, figure, figcaption { margin: 0; padding: 0; font-size: 100%; }
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; }
table, table td { border-collapse: collapse; border-spacing: 0; border: none; }
fieldset, img { border: 0; vertical-align: bottom; width: 100%;}
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; }
a, del, ins { text-decoration: none; }
ol, li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
abbr, acronym { border: 0; font-variant: normal; }
sup, sub { vertical-align: baseline; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; border: 0; }
/*============clear===============*/
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*============animate===============*/
a, .visible, .header-tel, a i, .icon-box, .img-box img, .img-over-box img, a:before, #fp-nav,form input { -webkit-transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; transition: all 250ms ease-in; }
.button-icon a:hover{-ms-transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);}
.hidden { opacity: 0; }
.visible { opacity: 1; }
.fade { display: none; }
.delay-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-2 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; }
.delay-3 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delay-4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delay-list li { opacity: 0;opacity:1\9\0;/*IE9hack*/ -webkit-animation: fadeInUp 0.9s 1;  animation: fadeInUp 0.9s 1;  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards;}
.delay-list li:nth-child(10n+1) {-webkit-animation-delay: 0.2s;  animation-delay: 0.2s;}
.delay-list li:nth-child(10n+2) {-webkit-animation-delay: 0.4s;  animation-delay: 0.4s;}
.delay-list li:nth-child(10n+3) {-webkit-animation-delay: 0.6s;  animation-delay: 0.6s;}
.delay-list li:nth-child(10n+4) {-webkit-animation-delay: 0.8s;  animation-delay: 0.8s;}
.delay-list li:nth-child(10n+5) {-webkit-animation-delay: 1.0s;  animation-delay: 1.0s;}
.delay-list li:nth-child(10n+6) {-webkit-animation-delay: 1.2s;  animation-delay: 1.2s;}
.delay-list li:nth-child(10n+7) {-webkit-animation-delay: 1.4s;  animation-delay: 1.4s;}
.delay-list li:nth-child(10n+8) {-webkit-animation-delay: 1.6s;  animation-delay: 1.6s;}
.delay-list li:nth-child(10n+9) {-webkit-animation-delay: 1.8s;  animation-delay: 1.8s;}
.delay-list li:nth-child(10n+10) {-webkit-animation-delay: 2.0s;  animation-delay: 2.0s;}

/*============iframe===============*/
.iframe-16x9 { position: relative; padding-bottom: 56.24%; height: 0; overflow: hidden; }
.iframe-4x3 { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
.iframe-16x9 iframe, .iframe-4x3 iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*============grids===============*/
.grid-full, .grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid-content { width: 80%; margin: 0 auto; position: relative; }
.grid-full { max-width: 1920px; }
.grid-large { max-width: 1680px; }
.grid-middle { max-width:950px; }
.grid-small { max-width: 400px; }
.grid-1-12, .grid-2-12, .grid-3-12, .grid-4-12, .grid-5-12, .grid-6-12, .grid-7-12, .grid-8-12, .grid-9-12, .grid-10-12, .grid-11-12, .grid-3-8, .grid-5-8, .grid-1-2 { float: left; display: block; position: relative; }
.grid-1-12 { width: 8.3%; }
.grid-2-12 { width: 16.6%; }
.grid-3-12 { width: 25%; }
.grid-4-12 { width: 33.3%; }
.grid-5-12 { width: 41.6%; }
.grid-6-12 { width: 50%; }
.grid-7-12 { width: 58.3%; }
.grid-8-12 { width: 66.6%; }
.grid-9-12 { width: 75%; }
.grid-10-12 { width: 83.3%; }
.grid-11-12 { width: 91.6%; }
.grid-12-12{width: 100%;}
.grid-3-8 { width: 38%; }
.grid-5-8 { width: 62%; }
.grid-1-2 { width: 47%; }
.grid-1-8{width: 12.5%;}
.grid-2-8{width: 25%;}
.grid-3-8{width: 37.5%;}
.grid-4-8{width: 50%;}
.grid-5-8{width:62.5%;}


/*============CSS script===============*/
:root{
	--body-color:#fff;
	--background:#e9e8e8;
	--button-hover-color:#fff;
	--gary-color:#474747;
	--skyblue-color:#aedfff;
	--darkblue-color:#42728e;
	--brown-color:#946134;
	--pink-color:#E74381;
	--font-base-size:10px;}
::selection { background: var(--brown-color); color: var(--body-color); }

/*============style===============*/
body { font-family: "Lato","Noto Sans CJK TC","Helvetica Neue", "Microsoft JhengHei", "Pingfang TC",  sans-serif;font-size: 1em; word-wrap: break-word; background: var(--background);}
p { font-size: calc(var(--font-base-size)*2); line-height: 30px; letter-spacing: 0.5px; color: var(--gary-color); margin-top: 25px;}
p span, .br, h1 span, h2 span { display: inline-block; }
a:hover { color:var(--darkblue-color);}
a.button-line:before, .footer-info a:before{ position: absolute; content: ''; display: block; bottom:0; left:50%; width: 0px; height: 2px;}
a.button-line:hover:before, .footer-info a:hover:before{ width: 100%; left:0;}
strong { font-weight: bold; }
em, i { font-style: normal; }
big { font-size: 1.1em; }
small { font-size: 0.85em; }
h1 { font-size:calc(var(--font-base-size)*5);letter-spacing: calc(var(--font-base-size)/3); position: relative;font-weight: 400;white-space:pre-wrap; color: var(--brown-color); transform: scale(1,1.05);}
h2{font-size:calc(var(--font-base-size)*3.0);color: var(--brown-color); font-weight: 400;transform: scale(1,1.05);letter-spacing: calc(var(--font-base-size)/5); line-height: calc(var(--font-base-size)*4.0);}
.line{display: block; width: 100%; height: 1px; background-color:var(--gary-color); opacity: 0.5; filter: alpha(opacity=50); margin: 25px auto;}

.offscreen{position: absolute;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);padding: 0;border: 0;height: 1px;width: 1px;overflow: hidden;}
.img-caption{font-size: 17px; text-shadow: -4px 3px 7px black,-4px 3px 7px black; position: absolute;bottom: 20px; right: 20px; color: var(--body-color); }

/*============base===============*/
body, html { height: 100%;}
.wrapper { min-height: 100%; width: 100%; position: relative;}

/*============header===============*/
#header { position: fixed; display: block; top: 10%; right:1%; z-index: 101;}
.button-icon a{background: var(--skyblue-color); position: relative; display: block; width: 50px; height: 50px; overflow: hidden; text-align: center; -webkit-border-radius: 70%; -moz-border-radius: 70%; border-radius:750%; filter: alpha(opacity=70); opacity: 0.7; margin-bottom: 5px;}
.button-icon i{ color: var(--darkblue-color); display: block;font-size: calc(var(--font-base-size)*2.5); line-height: 50px;}
.button-icon small{ display: block; font-size: calc(var(--font-base-size)*1.3); line-height: calc(var(--font-base-size)*1.6);; margin-top: 10px;}
.button-icon a:hover{ background:var(--darkblue-color);  filter: alpha(opacity=100); opacity: 1; color: var(--button-hover-color);}
.button-icon a:hover i{ margin-top: -50px;}

/*============load===============*/
.load-box{ position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 101; overflow: hidden; font-size: 0; line-height: 0;background:rgba(168, 216, 255, 0.849); -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; -moz-transition: all 500ms ease-in; transition: all 500ms ease-in;}
.load-box.active{ height: 0px;top: -2px;}
.loader{position: absolute;top:40%; left: 50%; width: 80px;margin-left: -40px; font-size: 12px; padding-top: 50px; text-align: center; color: var(--body-color); }
.loader .dot {width: 10px; height: 10px;background:var(--body-color); border-radius: 50%; position: absolute; top: calc(50% - 5px);}
.loader .dot1 {left: 15px;-webkit-animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;}
.loader .dot2 { left: 35px;-webkit-animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;}
.loader .dot3 { left: 55px;-webkit-animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;}
@-webkit-keyframes dot-jump {
0% {-webkit-transform: translateY(0);transform: translateY(0);}
100% { -webkit-transform: translateY(-15px); transform: translateY(-15px);}
}

/*============lightBox-img===============*/
.lightBox-img img{width: 100%;}
.img-box, .img-over-box { position: relative; display: block; text-align: center; overflow: hidden;}
.img-box img, .img-over-box img { width: 100%; height: auto; -ms-transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1000ms ease-out; -o-transition: all 1000ms ease-out; -moz-transition: all 1000ms ease-out; transition: all 1000ms ease-out; }

a:hover .img-box img, a.img-box:hover img, a:hover .img-over-box img, .button-in .img-over-box:hover img { -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); }
.icon-box { color: #fff; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: alpha(opacity=0); opacity: 0; z-index: 1; }
.icon-box span { position: absolute; display: block; top: 0px; right: 0; bottom: 0; left: 0; margin: auto; height: 60px; -moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); -webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); text-shadow: 0px 0px 4px rgba(0,0,0,0.9);}
.icon-box span:after { content: ''; display: block; text-align: center; font-size: 0.7em; }
.icon-box i { display: block; font-size: 5em; line-height: 50px; }
a:hover .icon-box, .button-in .img-over-box:hover .icon-box { filter: alpha(opacity=85); opacity: 0.85; background-position: right top; }
a:hover .icon-box i, .button-in .img-over-box:hover .icon-box i { font-size: 2em; }

/*============owl-carousel===============*/
.owl-prev, .owl-next{ position:absolute; display:block; top:50%; height:50px; width:50px; margin-top:-25px; z-index:1; text-align:center;font-size:18px; color:#fff;filter: alpha(opacity=80); opacity: 0.8; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}
.owl-prev .fa, .owl-next .fa{line-height: 50px;}
.owl-prev:hover, .owl-next:hover, #portfolio-list .owl-prev:hover, #portfolio-list .owl-next:hover{filter: alpha(opacity=100); opacity: 1; color: #fff;}
.owl-prev{left:0px;}
.owl-next{right:0px;}
.owl-prev i, .owl-next i{font-size: 45px;}
/* .owl-carousel.off {display: block;} */
.owl-prev.disabled, .owl-next.disabled{filter: alpha(opacity=0); opacity: 0;}
.owl-button{position: absolute; left:10px; bottom:40px; z-index:3;}
.owl-button a{ display:block; width: 50px; padding-top:8px; height: 42px; overflow: hidden; font-size:14px; text-align:center;color: #fff;}
.owl-button i{ font-size:10px; width:16px; height:16px; line-height:16px; border: solid 2px #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.owl-stage {display: -webkit-box;display: -moz-box;display: -ms-box;display: box;}
.owl-carousel.off {display: block;}
.owl-prev.disabled, .owl-next.disabled{filter: alpha(opacity=0); opacity: 0;}
.owl-dots { text-align: center; -webkit-tap-highlight-color: transparent;position: absolute; bottom:0; width: 100%;}
.owl-dots .owl-dot {display: inline-block; zoom: 1; *display: inline; }
.owl-dots .owl-dot span { width: 5px; height: 5px; margin: 10px 5px; background: transparent; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border: solid 2px #fff;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background: #FFF; width: 5px; height: 5px; margin: 10px 5px;}

/*============main===============*/
.mobile-hide{display: block;}
.pc-hide,.company-mobile{display: none!important;}
#main{ background: url(../images/bg.gif) repeat-y center; }
.box{ max-width: 1920px; width: 100%; margin: 0 auto; overflow: hidden; }

/*==============bubble==================*/
.section{z-index: 1; overflow: visible;}
.bubble{position: absolute; z-index: -1;}
.overpage{z-index: 80;}
.bubble-21{max-width: 150px; width: 20%;top:0%;left: 10px;}
.bubble-22{max-width: 150px; width: 10%;bottom:0%;right:0px; z-index: 2;}
.bubble-31{max-width: 150px; width: 20%;top:70%;right:-50px;}
.bubble-41{max-width: 150px; width: 20%;top:-30%;left: 70%;right: 20%;}
.bubble-51{max-width: 150px; width: 20%;top:10%;left: 80%;right: 20%;}
.bubble-61{max-width: 150px; width: 20%;top: 10%;left: 27%;right: 53%;}
div:has(img.bubble){position: relative;}
.bubble-g1{ max-width: 185px; width: 50%; bottom: -150px; right: -10%;}
.bubble-71{display: none; max-width: 130px; width: 20%; top: 250px; left: 10%; right: 60%; }
.bubble-g2{max-width: 185px; width: 100%; bottom: 30px; right: -40px;}
.bubble-81{max-width: 130px; width: 20%; top: 250px; left: 20px;}

/*==============section1==================*/
.fp-tableCell{height: auto!important; width:90%;}
/*.section1 { background: #0550a1;
	background: -moz-linear-gradient(top,  #0550a1 0%, #2989d8 50%, #228bcc 100%);
	background: -webkit-linear-gradient(top,  #0550a1 0%,#2989d8 50%,#228bcc 100%);
	background: linear-gradient(to bottom,  #0550a1 0%,#2989d8 50%,#228bcc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0550a1', endColorstr='#228bcc',GradientType=0 );
	display: flex!important; align-items: center; justify-content: center;  position: relative;}*/

.section1 {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: relative;
	background-image: url("../images/bg.jpg");
	background-position: center bottom;
	background-size: cover;
}

.section1 .fp-tableCell{ width: 80%; display: flex;}
.first-cloud1,.first-cloud2,.first-cloud3{position: absolute;}
.first-cloud1{top: 70%;right: -50%; width: 100%;}
.first-cloud2{left: -60%;bottom: 49%;width: 100%;}
.first-cloud3{left: -50%; top: 60%;width: 80%;}
.section1 .case-logo{width: 20%; top: 10%; right: 10%; }
.section1 .case-logo,.section1 .text{position: absolute; }
.section1 .text{
	position: relative;
	width: 40%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	-webkit-justify-content: center;
	-webkit-align-items: center;
	margin: 0 auto;
	padding-bottom: 180px;
}
.section1 .case-title{width: 75%; float: right;}
.section1 .case-con{width: 86.7%;  margin: 4% auto 4%;}
.section1 .case-price{width: 75%;}

/*==============section2==================*/
/* #second,.section2 .fp-tableCell {overflow:visible;} */
.box,.fp-tableCell{display: flex!important; justify-content: center; align-items: center; overflow: hidden;}
.text-box{width: 85%;float: right; z-index: 8;}
.owl-carousel .img-caption{left: auto; right: 20px;}

/*==============section3==================*/
#third,.section3 .fp-tableCell {overflow:visible;}
.section3 .fp-tableCell {overflow:visible;}
.section3 .text-box{text-align: right; float: left;}

/*=========.section5==========*/

/* #fiveth,.section5 .fp-tableCell {overflow:visible;} */
.section5 .text-box,.section6 .text-box{text-align: center;}
.section5 .text-box h2,.section6 .text-box h2{margin-bottom: 30px;}
.pay-compare, .facility-compare{display: flex; flex-direction: column; align-items: center;}
.section5 .text-box{flex-direction: column;}
.section5 .img-box{width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.section5 .img-box .pay-img{ width: 50%; box-sizing: border-box; padding: 0 2px 4px;}

/*=========.section6==========*/
.section6 .img-box{width: 85%;}

/*=========.section7==========*/
.section7 .fp-tableCell,#contact .fp-tableCell {overflow:visible;}
.com-logo{display: block; width: 90%; max-width: 760px;}
.section7 h2{color: var(--darkblue-color);}
.section7 .fp-tableCell{width: 80%; flex-wrap: wrap;}
/* .section7 .fp-tableCell{flex-direction: column;} */
/* .section7 .lightBox-img{ padding: 0 0 0 10%;overflow: hidden;} */
.section7 .content{display: flex; align-items: self-start;}
.section7 .lightBox-img a{display: block;float: left;}
.section7 .text-box{float: none;}
.portfolio-img1{width: 50.5%; padding-right: 10px;}
.portfolio-img2,.portfolio-img3{width: 46%;}
.portfolio-img3{padding-top: 10px;}
.small-box{display: flex; flex-direction: column; float: left;}
.right{width: 40%;}
.left{width: 60%; display: flex;}
.section7 ul span{display: inline-block;}
.section7 .con{margin: 10px 0 20px; text-align: justify;}
.portfolio, .award {display: flex; flex-wrap: wrap;  color: var(--gary-color);}
.portfolio{margin-top: 25px;}
.section7 ul li:first-child{width: 100%; font-size: calc(var(--font-base-size)*1.8); margin-left: -5px; padding-bottom: 5px;}
.portfolio li{width:45%;}
.award li{width: 100%;}

/*============contact===============*/
#contact {align-items: center; justify-content: center;}
#contact ,#contact .fp-tableCell, #contact .text-box{display: flex;}
#contact .fp-tableCell{height: auto!important;}
#contact .text-box{align-items: center; justify-content: center;}
#contact .text-box,#contact .text{display: flex; flex-direction: column; }
#contact .text{width: 75%; color: #fff; align-items: flex-start;}
#contact .text h2{margin-top:15px;}
/* #contact .text h2 span::before{content: "．";} */
.tel-btn,.adress-btn {height: 60px; font-size: calc(var(--font-base-size)*2); color: #666; letter-spacing: 1px; font-weight: 500; text-align: center;  line-height: 20px; display: flex;margin: 10px auto 0; align-items: center;}
.tel-btn span,.adress-btn span{ font-weight: 500; font-size: calc(var(--font-base-size)*5); line-height:calc(var(--font-base-size)*5); letter-spacing: normal; padding-top: 10px; margin-left: 20px; display: flex; flex-direction: column;-webkit-transition: all 550ms ease-in-out; -o-transition: all 550ms ease-in-out; -moz-transition: all 550ms ease-in-out; transition: all 550ms ease-in-out;}
.tel-btn span hr{margin: 5px 0; width: 0; height: 0px; background-color: transparent; -webkit-transition: all 550ms ease-in-out; -o-transition: all 550ms ease-in-out; -moz-transition: all 550ms ease-in-out; transition: all 550ms ease-in-out;}
.tel-btn:hover span hr{width: 100%; height: 2px; padding-bottom: 0px; background-color:var(--darkblue-color); -webkit-transition: all 550ms ease-in-out; -o-transition: all 550ms ease-in-out; -moz-transition: all 550ms ease-in-out; transition: all 550ms ease-in-out;}
.tel-btn:hover span{color: var(--darkblue-color); padding-top: 0px; -webkit-transition: all 550ms ease-in-out; -o-transition: all 550ms ease-in-out; -moz-transition: all 550ms ease-in-out; transition: all 550ms ease-in-out;}
#contact.box{  height: 100%;}
.adress-btn i, .tel-btn i{font-size: calc(var(--font-base-size)*4); display: flex;}
.adress-btn i span, .tel-btn i span{display: flex; margin-left: 20px;}
.com-logo2{width: 52%; margin: 0 auto;}
.case-text,.case-text2,.case-text3{width: 53%; margin: 40px auto 0;}

.case-price2{ width: 45%;margin-top: 50px; margin: 50px auto 0;}


.form{float: none;  margin: 0 auto;}
.form-box{width: 80%; float: none;margin: 0 auto;/*padding-top: 100px;*/}
form { position: relative; display: block;}
form .input-column,form .input-row,form .input-row2,form .input-button,form .select-row { position: relative; display: flex; line-height:0; margin:0 0.8% 20px 0.8%; width:48%; float:left; min-height: 46px; color:rgb(0, 0, 0);/* background-color: #fff;*/}
form .input-row2,form .select-row{background: transparent; width: 100%;}
form .input-row,form .input-button,form .select-row{ width:98%; clear:both;}
form .input-button{ margin-top: 40px;}
form label { position: relative; width:15%; height: 46px; line-height: 20px; display: flex; align-items: center;}
form input[type="text"], form input[type="password"], form select, form textarea, .input-box{display: flex; font-size: 20px; font-family: "Noto Sans TC", Arial; line-height: 20px; padding-top: 13px; padding-bottom: 13px; height: 46px; width: 85%; padding-left: 10px; background-color:#fff; color:#000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
form textarea { height: 120px; line-height: 24px; padding-top: 8px;}
form select {  width: 75%; /*margin-left: 20%;*/ float: right; line-height: 46px; padding:0;}
.input-box{line-height: 24px; padding-top: 8px;height: inherit; min-height:50px;}
form small { font-size: 16px; width: 15px; display: inline-block; color:#FF9A1E; font-weight:bold;text-align: center;}
form input:focus, form textarea:focus, form select:focus { border-bottom: solid 1px #D9E476;}
form input.error, form textarea.error, form select.error { border-bottom: solid 1px #CC3333; }
img.rand-img { position: absolute; right: 0px; bottom:0px; width:90px; height:100%;cursor: pointer;}
.input-button input[type="submit"],#submit{ float: right;}
.input-button input[type="reset"]{filter: alpha(opacity=80); opacity: 0.8; width:48.5%; margin-right:1%;}
input[type="reset"], input[type="submit"],input[type="button"],input[type="file"],#submit{float: none; margin: 0 auto;display: inline-block; min-height: 20px; line-height:20px; padding:13px 0;width:100%; text-align: center; cursor: pointer;font-size: 20px; letter-spacing: 10px; color:#fff; background:#002942;}
input[type="reset"]:hover, input[type="submit"]:hover, input[type="reset"]:focus, input[type="submit"]:focus,input[type="button"]:hover,#submit:hover{background:#005689;}
#result{ color: var(--darkblue-color); font-size: calc(var(--font-base-size)*1.6); font-weight: 600;}
@-webkit-keyframes autofill { to {color: #fff; background: transparent;} }
input:-webkit-autofill {-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;}
.en-box{width:80%; display: flex; margin: 70px 0 0px; align-items: flex-end;box-sizing: border-box;}
.en-box img:first-child{margin-right: 20px;width:40%;}
.en-box img{display: block;box-sizing: border-box;}
.en-box img:last-child{width: 37%;}
.small-text{width: 95%; font-size: 16px;  margin: 5px auto; letter-spacing: 1px;  line-height: normal; color: #555; text-align: justify;}
.small-text-con{ display: flex; flex-direction: row; justify-content:left;width: 100%; box-sizing: border-box;}
.small-text-con li{margin-right: 15px;}
.right_text{ margin-top: 15px; line-height: 20px;}
.right_text input[type="checkbox"]{margin-right: 10px;}
.right_text a,.right_text i{color:var(--darkblue-color); }
.right_text a:hover{color:var(--brown-color); }
.notice{width: 99%; display: block; margin: 0 auto 13%;}
form .select-row label{position: relative;}
form .select-row,form .select-row label,form .checkbox-row,form .select-row li{display: flex; align-items: center;}
.checkbox-row{width: 85%;}
form .select-row li{width: 25%; align-items: center; list-style: none; line-height: 20px; }
form .select-row input{margin-right: 5px;}
form .notice label{width: 100%; position: relative;}
/* form .notice label,form .notice .small-text{display: flex;} */
form .notice{display: flex; flex-direction: column;}

@media screen and (orientation:portrait) {

}
@media screen and (orientation:landscape) {

}
@media screen and (max-width: 1600px){

.section7 .right,.section7 .left{width: 50%;}
}
@media screen and (min-width: 1400px){

}

@media screen and (max-width: 1400px){
	h1{font-size:calc(var(--font-base-size)*4);letter-spacing: calc(var(--font-base-size)/2.4);}

	/* .tel-btn{display: block;}
	.tel-btn span{margin: 10px auto;}*/
	.section7 .content{display: block;}
	.section7 .right,.section7 .left{width: 100%;}
	/* #contact .text-box{margin: 0 -.5% 0 auto;} */
	.tel-btn,.adress-btn {height: auto;}


}

@media screen and (max-width: 1400px) and (orientation:landscape){
	h1{font-size: calc(var(--font-base-size)*3.6);}
	h2{font-size: calc(var(--font-base-size)*2.4);}
	form select{width: 75%; margin-left: 24%;}
	.section7 .right,.section7 .left,.section7 .text-box{width: 100%;}
	.section7 .small-box{flex-direction: row;}
	/* .section7 .award{margin:0;} */
	.section7 .con{margin-bottom: 40px;}
	.section7 .lightBox-img{display: flex; margin-top: 20px;}
	.portfolio-img1{width: 21.6%;}
	.portfolio-img2,.portfolio-img3{width: 40%;}
	.portfolio-img2, .portfolio-img3{padding-right: 10px; padding-top: 0;}
	.disappear-1400{display: none;}
	.appear-1400{display: block;}
	.portfolio li{width: 33%;}
	.award li{width: 33%;}
	.section7 .fp-tableCell{height: auto!important;}
}
@media screen and (max-width: 1400px)and (max-height: 800px){

	/* .logo{width: 40%;}
	.form-box{padding-top:15%;}
	.section6{background-size:70%;}
	.section6 .img-box{width: 70%;}*/

}
@media screen and (min-width: 400px) {
	.section6 .img-box{width: 70%;}
}
@media screen and (max-width: 1300px) {

	.text-box{width: 88%; }

}

@media screen and (max-width: 1500px) and (max-height: 1100px){


form select{margin-left: 24%;}
form label{width: 20%;}
.checkbox-row,form input[type="text"], form input[type="password"], form select, form textarea, .input-box{width: 80%;}



}


@media screen and (max-width: 1100px) {
	.mobile-hide{display: none!important;}
	.pc-hide{display: block!important;}
	.grid-1-12,.grid-5-12,.grid-6-12,.grid-7-12{width: 100%;}
	p{font-size:16px; line-height: 24px;}
	/* .con{margin-top: 50px;} */

	/*==============footer==================*/
	#footer{ position: fixed; width: 100%; display: flex!important; bottom: 0; z-index: 99; }
	#footer.button-icon a{width: 25%; height: 60px; border-radius: 0;margin: 0; opacity: 1;border-right: 1px solid white; background-color: #666; display: flex; justify-content: center; align-items: center;}
	#footer.button-icon a:last-child{border-right: none;}
	#footer.button-icon i{color: var(--body-color); margin: 0;line-height: 25px;}
	#footer.button-icon a:hover {transform: scale(1); background-color: var(--darkblue-color);}
	#footer.button-icon a:hover i{transform: scale(1.1);}

	#footer.button-icon small{margin-top: 5px;}

	/*==============bubble==================*/
	.bubble{position: absolute;}
	.right:has(img.bubble){position: relative;}
	.bubble-g1{ max-width: 185px; width:40%; bottom: 0px; right: 0;}
	.bubble-21{width: 18%; top: 50px; left: 50px;}
	.bubble-22{max-width: 150px; width: 13%;bottom:auto; top:15%; right:10%; z-index: 2;}
	.bubble-31{width: 15%; top: -50px; left: 20%;}
	.bubble-41{top: 60%; left: 10%; z-index:2;}
	/* .bubble-51{top: -15%; left: 75%;} */
	.bubble-71,.bubble-61{display: block; width: 15%; top: 150px; left: 8%;}
	.bubble-g2{max-width: 185px; width: 100%; bottom: 30px; right: -40px;}
	.bubble-81{max-width: 130px; width: 20%; top: 250px; left: 10%; right: 60%; }

	/*=========.section1==========*/
	.section1 .fp-tableCell,.section1 .box{height: 100vh!important;}
	.section1 .fp-tableCell{display: flex!important; align-items: center;}
	.section1 .text{width:80%; /*position: absolute; bottom: 10%; left: 5%;*/ }
	.section1 .case-logo{width:35%; top: 5%;}
	.first-cloud1{top: auto;bottom: -13%;right: -60%;}
	.first-cloud3{left: -54%;top: 84%;width: 80%; opacity: .7; filter: (alpha=opacity(70));}
	.first-cloud2{left: -51%;top: -141px;}

	/*=========.section2==========*/
	.box, .fp-tableCell,.section7 .fp-tableCell{display: block!important; height: auto!important; width: 100%; margin: 0 auto;}

	.section3 .text-box, .text-box,.section7 .text-box{width: 90%; margin: 100px auto 40px; float: none; text-align: center;}
	.line{height: 3px; opacity: 1; filter: alpha(opacity=100);
		background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */}

	/*=========.section5==========*/
	.section5 .text-box,.section6 .text-box{margin: 100px auto 0;}
	.section5 .img-box{width: 80%;}
	/*=========.section6==========*/
	/* .section6 .img-box{width: 65%;} */

	/*=========.section7==========*/
	/* .section7 .fp-tableCell{display: flex!important;} */
	.com-logo-box{margin-top: 100px;}
	.com-logo{width: 80%; max-width: 350px; margin: 0 auto;}
	.section7 .text-box{margin-top: 50px;}
	.section7 .con{text-align: center;}
	.section7 .small-box,.portfolio,.award{flex-direction: column; text-align: center; float: none;}
	.portfolio li{width: 100%;}
	.section7 .small-box small{display: none;}
	.section7 .award{margin-top: 15px;}
	.portfolio-img1,.portfolio-img2, .portfolio-img3{width: 100%;}
	.portfolio-img3{padding: 0;}
	.section7 .content small{display: none;}
	.section7 ul li:first-child{margin-left: 0;}
	.section7 .award li{width: 100%;}
	/*=========#contact==========*/
	#contact, #contact .fp-tableCell{height: auto!important;}
	#contact .fp-tableCell{flex-direction: column;}
	#contact .text{width: 80%;margin: 70px auto; justify-content: center; align-items: center;}
	.form{width: 90%;display: flex; margin-bottom:70px;}
	.form-box{margin: 0 auto;}
	.en-box{flex-direction: column; justify-content: center; align-items: center; margin-top: 10%;}
	.en-box img:first-child{margin: 0 0 15px 0; /*width: 50%;*/}
	.en-box img:last-child{width: 55%; margin: 10% auto 0;}
	#contact .text h2{text-align: center;}
	.btn-box{margin-top: 50px;}
	.tel-btn,.adress-btn{display: flex!important; font-size: calc(var(--font-base-size)*2.4); color: var(--darkblue-color); padding:10px 25px; margin-left: 10px; margin-right: 10px; background-color:var(--body-color); border:.5px solid var(--darkblue-color); }
	#contact br{display: none;}
	.tel-btn:hover,.adress-btn:hover{ background-color: var(--button-hover-color); color: var(--pink-color); border-color: var(--pink-color); }
	.adress-btn i,.tel-btn i{font-size: calc(var(--font-base-size)*3.5);-moz-transform:rotate(245deg);-webkit-transform:rotate(245deg);-o-transform:rotate(245deg);-ms-transform:rotate(245deg);transform:rotate(245deg);}
	.adress-btn i{-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
	.btn-box{display: flex;}
	.case-price2{margin: 50px auto;}

}
@media screen and (max-width: 1100px) and (orientation:landscape) {

	/* .section1 .case-name{width: 50%;} */
	.section1 .case-logo{width: 35%; top: 0;}
	.section1 .text{width: 50%; top: 0; bottom: 0;}
	.first-cloud2{top: -50%;}

}
@media screen and  (max-width: 480px) and (min-height: 780px) and (orientation:portrait){
	/* .section1 .case-name{width:90%; top: 0;}
	.section1 .case-title{width: 70%;}
	.section1 .case-con{width: 100%;}
	#header{top: 5%;}*/

}
@media screen  and (max-height:850px){
	.bubble-31{top: 90%;}

}

@media screen  and (max-height: 520px){

	.section1 .first-cloud1{width: 80%;bottom: -40%;left: -40%;}
	.section1 .first-cloud3{width: 60%;}

}

@media screen and (max-width: 920px) and (orientation:landscape) {

	/* .section1 .case-name{width:35%;}
	.section1 .text{width: 80%; margin: 0 auto;}
	.section1 .case-title{margin-top: 0;} */

}

@media screen and (max-width: 650px){

	.bubble-g1{right: 0px; width: 25%;}
	.bubble-21{width: 15%; top: 50px; left: 25px;}
	.bubble-22{right: 20px;}
	.bubble-71{top: 100px; left: 0px;}
	.bubble-81{top: 20px; left: 10px;}

	h2{font-size: calc(var(--font-base-size)*2.8); line-height: calc(var(--font-base-size)*3.5);}
	.com-logo2,.case-text,.case-price2{width: 70%;}
	.case-text, .case-text2, .case-text3{width: 70%;}
}

@media screen and (max-width: 560px){

	.section1 .text{width: 100%;/* bottom: 25%; top: 75%;*/}

		form select{width: 65%;}
		.form-box{width: 100%;}
		.com-logo{width: 65%;}
		.en-box img:first-child{width: 60%;}
		.en-box img:last-child{width: 70%;}
		/* #contact .text h2{font-size: calc(var(--font-base-size)*2.5);line-height: calc(var(--font-base-size)*3.2);} */


	}
	@media screen and (max-width:540px){
		/* h2{font-size: calc(var(--font-base-size)*2.2); line-height: calc(var(--font-base-size)*2.8);} */
		#contact h2 small:first-child{display: none;}
		.case-text, .case-text2, .case-text3{width: 80%; margin-top: 10%;}
	}
@media screen and (max-width: 480px){
	h1{font-size: calc(var(--font-base-size)*3.2); line-height: calc(var(--font-base-size)*4);}
	h2{font-size: calc(var(--font-base-size)*2.24); line-height: calc(var(--font-base-size)*4);}

	.bubble-41{left: 5px; top: 10px;}
	.bubble-71{left: -10px; top: 10px; width: 18%;}
	/* .bubble-g1{bottom: 70px;} */

	/* .section1 .text{width: 75%;} */
	form label{width: 35%;}
	form .checkbox-row{flex-wrap: wrap;}
	form .select-row li{width: 50%;}
	.btn-box{display: block;}

	}

@media screen and (max-height: 620px) and (orientation:landscape){
	/* .section1 .case-name{width: 40%;} */


}

@media screen and (max-width: 420px) {
	h1{font-size: calc(var(--font-base-size)*3.2);letter-spacing:0;}
	h2 {font-size: calc(var(--font-base-size)*2.20);line-height: calc(var(--font-base-size)*2.8); letter-spacing: 0;}

	/*.section3 .text-box,.text-box,.section7 .text-box{width: 80%; float: none;}
	 .section7 .text-box{width: 100%;} */
}
@media screen and (max-height: 420px){
	/* .section1 .case-name{width:30%;} */
	.section1 .case-logo{width: 25%;}
	.first-cloud2{display: none;}
}
@media screen and (max-width: 400px) {
	/* .text-box{text-align: left;} */
	h1{font-size: calc(var(--font-base-size)*2.8);letter-spacing:0;}
	h2 {font-size: calc(var(--font-base-size)*2);line-height: calc(var(--font-base-size)*2.8);}
	.line{margin: 15px auto;}



	.btn-box{margin-top: 40px;}
	.com-logo2,.case-text,.case-price2{width: 85%;}
}
@media screen and (max-width: 380px){
	/* p{font-size: 18px;} */
	.bubble{display: none;}
	form label{ width: 40%; font-size: 15px;}
	form select{width: 60%;}
	#contact .text h2{font-size: calc(var(--font-base-size)*2.0);line-height: calc(var(--font-base-size)*2.5);}

	p span{display:inline;}
	p br{display: none;}
	.section7 .con,p{line-height: 28px; text-align:justify; letter-spacing: 0;}
}

@media screen and (max-width: 320px) and (max-height:800px){


}