@import url('/css/icheck/icheck-material-custom.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Poiret+One&family=Source+Sans+Pro:wght@200;300;400&family=Cormorant+Garamond&display=swap');

* { margin: 0; padding: 0; }
*:focus { outline: none; }

body { margin: 0; }
body ::selection { background: #191919; text-shadow: none; color: #fff; }
body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: #c0c0c0; }
body::-webkit-scrollbar-thumb { background: #191919; }
body::-webkit-scrollbar-thumb:hover { background: #000; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, select, textarea, ul, li, img, span, font, strong, b, a, i{ text-align: left; word-wrap: break-word; word-break: keep-all; vertical-align: middle; margin: 0; padding: 0; line-height: 170%; border-width: 0; font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-size: 18px; color: #222; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

hr { noshade:noshade; }

th { font-weight: normal; }

ul { list-style: none; margin: 0; padding: 0; overflow:hidden; }

a , a:hover { text-decoration: none; cursor: pointer; outline:none; color:#000; }

img { max-width:100%; }

br { font-family:Arial !important; }

.pageh1 { position:fixed; z-index:-8989898; opacity:0; color:#fff; }

/* index */
.wrapper #index { overflow: hidden; margin: 0 auto; width: 960px; min-height: 700px; background: url(/images/01/bg-index.jpg) no-repeat 0 bottom; }
.wrapper #index #title { margin-top: 60px; }
.wrapper #index ul.mainService { margin: 40px 0; padding: 15px; width: 480px; background: url(/images/01/bg-mainService.jpg) no-repeat 0 0 #093961; overflow: hidden; }
.wrapper #index ul.mainService li { padding: 10px; border-bottom: 1px #e1e1e1 solid; background: #fff; color: #5b5b5b; font-size: 18px; }
.wrapper #index ul.mainService li a { position: relative; display: block; }
.wrapper #index ul.mainService li a i { position: absolute; top: calc(50% - 9px); right: 10px; }

/* index font */
.wrapper #index #search { margin: 40px 0; padding: 20px; width: 480px; height: 100px; background: #fff; background: -moz-linear-gradient(top, #fff 0%, #f5f5f5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f5f5f5)); background: -webkit-linear-gradient(top, #fff 0%,#f5f5f5 100%); background: -o-linear-gradient(top, #fff 0%,#f5f5f5 100%); background: -ms-linear-gradient(top, #fff 0%,#f5f5f5 100%); background: linear-gradient(to bottom, #fff 0%,#f5f5f5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f5f5f5',GradientType=0 ); border: 1px solid #cccccc; box-shadow: 0px 2px 1px #e8e8e8; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
.wrapper #index #search p { overflow: hidden; }
.wrapper #index #search p label { margin: 0 0 10px; display: block; font-size: 18px; font-weight: bold; }
.wrapper #index #search p input { margin: 0 0 10px; padding: 0 5px; width: 90%; height: 30px; border: 1px #ccc solid; line-height: 30px; font-size: 15px; }
.wrapper #index #search p a { width: 70px; height: 25px; background: #525252; background: -moz-linear-gradient(top, #525252 0%, #747474 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#525252), color-stop(100%,#747474)); background: -webkit-linear-gradient(top, #525252 0%,#747474 100%); background: -o-linear-gradient(top, #525252 0%,#747474 100%); background: -ms-linear-gradient(top, #525252 0%,#747474 100%); background: linear-gradient(to bottom, #525252 0%,#747474 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#525252', endColorstr='#747474',GradientType=0 ); display: inline-block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center; line-height: 25px; font-size: 12px; color: #fff; }

/* main */
.wrapper #main { margin: 15px auto; width: 980px; font-size: 16px; }
.wrapper #main #logoBox { text-align: center; }

/* contractWrap */
#contractWrap .page_top h2 { font-weight: 400; letter-spacing: 20px; font-size: 46px; }
#contractWrap .page_top h4 { margin-bottom: 20px; font-weight: 300; letter-spacing: 4px; font-size: 33px; }
#contractWrap .page_top p { display: inline-block; }
#contractWrap .item { margin-top: 25px; overflow:hidden; position:relative}
#contractWrap .item-1, #contractWrap .box-2 { border:1px solid #000; padding:15px 30px }

/* contractInfo */
.contractInfo ul.a {list-style-type: circle;}
.contractInfo ul.b {list-style-type: disc;}
.contractInfo ul.c {list-style-type: square;}
.contractInfo ol.d {list-style-type: armenian;}
.contractInfo ol.e {list-style-type: cjk-ideographic;}
.contractInfo ol.f {list-style-type: decimal;}
.contractInfo ol.g {list-style-type: decimal-leading-zero;}
.contractInfo ol.h {list-style-type: georgian;}
.contractInfo ol.i {list-style-type: hebrew;}
.contractInfo ol.j {list-style-type: hiragana;}
.contractInfo ol.k {list-style-type: hiragana-iroha;}
.contractInfo ol.l {list-style-type: katakana;}
.contractInfo ol.m {list-style-type: katakana-iroha;}
.contractInfo ol.n {list-style-type: lower-alpha;}
.contractInfo ol.o {list-style-type: lower-greek;}
.contractInfo ol.p {list-style-type: lower-latin;}
.contractInfo ol.q {list-style-type: lower-roman;}
.contractInfo ol.r {list-style-type: upper-alpha;}
.contractInfo ol.s {list-style-type: upper-greek;}
.contractInfo ol.t {list-style-type: upper-latin;}
.contractInfo ol.u {list-style-type: upper-roman;}
.contractInfo ol.v {list-style-type: none;}
.contractInfo ol.w {list-style-type: inherit;}

/* ol ul */
.contractInfo ol , .contractInfo ul { margin-left: 30px; }
.contractInfo ol >li , .contractInfo ul >li { margin: 8px 0; padding-left: 15px; }

.topBox { margin-bottom: 20px; }
.title { font-size: 30px; }
.center { text-align: center; }
.underline { text-decoration: underline; }
.bold { font-weight: bold; }
.inputbox { padding: 0 40px; min-width: 50px; min-height: 31px; display: inline-block; border-bottom: 1px #000 solid; text-align: center; }
.justify { min-width: 70px; text-align: justify; text-justify: distribute-all-lines; text-align-last: justify; }

/* .agent_box */
.agent_box { margin: 50px 0 30px; font-size: 0; }
.agent_box .row { display: inline-block; }
.agent_box .row:first-child { margin-right: 50px; font-weight: 300; letter-spacing: 5px; font-size: 22px; }
.agent_box .row p , .agent_box .row p * { font-weight: 300; letter-spacing: 5px; font-size: 22px; }
.agent_box .row p:first-child { margin-bottom: 15px; }

/* time */
#contractWrap #bottomInfo .item ul { padding-left: 32px; }
#contractWrap .infoBox { position: relative; padding: 30px 0; }
#contractWrap .infoBox .item { position: relative; z-index: 2; }
#contractWrap .infoBox p { margin-bottom: 5px; }
#contractWrap .infoBox p label { display: inline-block; }
#contractWrap .infoBox p font { margin-left: 10px; display: inline-block; }
#contractWrap .infoBox .seal { position: absolute; width: 400px; right: 0; bottom: 30px; z-index: 1; }

#contractWrap .infoBox .upload_file .listrow { margin: 10px 0; }
#contractWrap .infoBox .upload_file font { margin-right: 20px; display: inline-block; }
#contractWrap .infoBox .upload_file font.imgBox { display: none; }
#contractWrap .infoBox .upload_file font img { width: 80px; height: 80px; object-fit: cover; }
#contractWrap .infoBox .upload_file .upbtn { position: relative; margin-right: 15px; padding: 5px 10px; width: 135px; background: #383939; display: inline-block; text-align: center; font-weight: 300; color: #fff; }
#contractWrap .infoBox .upload_file input[type="file"] { position: absolute; width: 156px; height: 40px; top: 0; left: 0; opacity: 0; cursor: pointer; }

/* agree_box */
.agree_box [class*="icheck-material"] { display: block; }
.agree_box [class*="icheck-material"] > label { padding-left: 33px; width: calc(100% - 33px); }
.agree_box [class*="icheck-material"] > label span { font-size: 19px; color: #696969; }
.agree_box [class*="icheck-material"] > label a { margin: 0 2px; text-decoration: underline; font-size: 19px; color: #4478d7; }
.agree_box [class*="icheck-material"] > input:first-child ,
.agree_box [class*="icheck-material"] > input:first-child + label::before ,
.agree_box [class*="icheck-material"] > input:first-child + input[type="hidden"] + label::before { width: 23px; height: 23px; top: 5px; }
.agree_box [class*="icheck-material"] > input[type="checkbox"]:first-child:checked + label::after ,
.agree_box [class*="icheck-material"] > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::after { width: 8px; height: 17px; top: 5px; transform: translate(8px, 1px) rotate(45deg); -ms-transform: translate(8px, 2px) rotate(45deg); }

/* signatureWrap */
#signatureWrap { position: relative; margin: 20px 0; padding: 10px; background: #fff; border-radius: 2px; box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27); -moz-box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27); -webkit-box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27); }
#signatureWrap h4 { margin-bottom: 50px; text-align: center; font-size: 30px; color: #7E7E7E; }
#signatureWrap h4:before , #signatureWrap h4:after { position: absolute; width: 40%; height: 1px; top: 45px; content: ""; }
#signatureWrap h4:before { background: rgb(126,126,126); background: -moz-linear-gradient(right,rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(right,rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: -moz-linear-gradient(right,rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(right,rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(right,rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); left: 0px; }
#signatureWrap h4:after { background: rgb(126,126,126); background: -moz-linear-gradient(left,rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(left,rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: -moz-linear-gradient(left,rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(left,rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(left,rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); right: 0px; }
#signature { margin: 0 auto 50px; width: 100%; background: #e4e4e4; box-shadow: 0 0 5px #868686; }
#signature > div { position: relative !important; }
#signature > div input { padding: 5px 60px; background: #e26b02; color: #fff; font-size: 18px; top: -1.5em !important; left: calc(50% - 90px) !important; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; }

#tools { text-align: center; }
#tools a { margin: 0 10px; padding: 5px 60px; background: #dc1818; color: #fff; font-size: 18px; display: inline-block; }
#tools a#btnClear { background: #444; }

#signatureWrap .box .sImage { text-align: center; }
#signatureWrap .box .sImage img { width: 50%; }

/* sign-seal */
.sign-seal { position: absolute; right: 0; top: 100px; z-index: -1; }

/* upform1 */
#upform1 { width: 400px; }
#upform1 .title { width: 80px; display: inline-block; }
#upform1 p { overflow: hidden; position: relative; padding-left: 6px; width: calc(100% - 200px); display: inline-block; border: 1px #e68080 solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#upform1 p label { position: absolute; padding: 6px 10px; background: #d33d3d; display: inline-block; border: 1px #e68080 solid; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; font-size: 14px; color: #fff; top: -1px; left: -3px; }
#upform1 #userfile { padding: 8px 0 3px; }
#upform1 button { margin-left: 10px; padding: 7px 10px; background: #000; border: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; appearance:none; -moz-appearance:none; -webkit-appearance:none; color: #fff; }

/* gotop */
#gotop { position: fixed; right: 10px; bottom: 10px; }
#gotop a { width: 30px; height: 30px; background: rgba(0, 0, 0, 0.58); display: block; line-height: 30px; font-size: 20px; text-align: center; color: #fff; }

@media screen and (max-width:1024px) {
	.wrapper #main { width: 90%; }
}
@media screen and (max-width:980px) {
	.wrapper #index { width: 100%; background-position: right bottom; }
	.wrapper #index #title , .wrapper #index ul.mainService , .wrapper #index #search { margin-left: 50px; }
	#contractWrap .infoBox .seal { width: 270px; }
}
@media screen and (max-width:680px) {
	.wrapper #index ul.mainService , .wrapper #index #search { width: calc(90% - 65px); }
	#contractWrap .infoBox .seal { position: relative; margin: 0 0 0 auto; bottom: auto; }
}
@media screen and (max-width:480px) {
	.wrapper #index { background-position: 90% bottom; }
	.wrapper #index #title { margin: 10px 20px; }
	.wrapper #index ul.mainService , .wrapper #index #search { margin: 20px; padding: 10px; width: calc(100% - 60px); }
	#bottomInfo .item:first-child { background-position: 50%, right 50%; }
	.sign-seal{ position: initial; }
}
@media screen and (max-width:3750px) {
	#tools a { padding: 5px 40px; }
}