@import url('https://fonts.googleapis.com/css?family=Francois+One');

/* loginBox */
#loginBox , #register >div , #memberF , #memberCenter { margin-top: 10px; padding: 50px 30px; background: #F0F0F0; background: -moz-linear-gradient(top,#fff,#F0F0F0 100%); background: -webkit-linear-gradient(top,#fff,#F0F0F0 100%); background:  linear-gradient(to bottom,#fff 1%,#F0F0F0 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#F0F0F0',GradientType=0); border: 1px #F0F0F0 solid; }
#loginBox h4 , #memberF h4 , #memberCenter h4 { position: relative; margin-bottom: 50px; padding-bottom: 5px; text-align: center; font-weight: normal; font-size: 25px; }
#loginBox h4:before , #memberF h4:before , #memberCenter h4:before { position: absolute; width: 40%; height: 1px; background: #e4e4e4; display: block; left: 30%; bottom: 0; content: ""; }

#loginBox form { overflow: hidden; }
#loginBox form > div { float: left; width: 50%; }
#loginBox form > div p { margin: 0 4px 10px 0; text-align: right; }
#loginBox form > div p label , #memberF p label { margin-right: 10px; width: 30px; font-size: 16px; }
#loginBox form > div p input , #memberF p input { padding: 2px 10px; width: 160px; border: 1px #ccc solid; font-size: 16px; }
#loginBox form .btnBox a , #loginBox .fBox .info article a#OKBtn , #register article p a#OKBtn ,#memberF p a#OKBtn { position: relative; float: left; margin-left: 10px; padding: 0 15px; height: 76px; background:#3b61a1; background:-moz-linear-gradient(top,#4385ba 1%,#3b61a1 100%); background:-webkit-linear-gradient(top,#4385ba 1%,#3b61a1 100%); background:linear-gradient(to bottom,#4385ba 1%,#3b61a1 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#43aac6',endColorstr='#3c9abd',GradientType=0); border-radius: 5px; display: block; font-family: 'Noto Sans TC', 'Francois One', sans-serif; font-size: 18px; color: #fff; }
#loginBox form .btnBox a:before , #loginBox .fBox .info article a#OKBtn:before , #register article p a#OKBtn:before , #memberF p a#OKBtn:before { position: absolute; width: calc(100% - 4px); height: calc(100% - 4px); display: block; border-radius: 5px; border: 1px rgba(255, 255, 255, 0.5) solid; top: 2px; left: 2px; content: ""; }
#loginBox form .btnBox a font { margin-top: 16px; display: block; }
#loginBox form .btnBox a span { display: block; text-align: center; }
#loginBox form .btnBox a#openBox , #loginBox .fBox .info article a#OKBtn , #register article p a#OKBtn , #memberF p a#OKBtn {padding: 0 20px;background:#43aac6;background:-moz-linear-gradient(top,rgba(67,170,198,1) 1%,rgba(60,154,189,1) 100%);background:-webkit-linear-gradient(top,rgba(67,170,198,1) 1%,rgba(60,154,189,1) 100%);background: linear-gradient(to bottom,rgb(2, 96, 170) 1%,rgb(1, 69, 144) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#43aac6',endColorstr='#3c9abd',GradientType=0);line-height: 76px;}
#loginBox form#doctorup .btnBox a#openBox { height: 120px; line-height: 120px; }
#loginBox .fBox { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); top: 0; left: 0; z-index: 99999; }
#loginBox .fBox .info { margin: calc(25% - 50px) auto 0; width: 350px; background: #fff; border: 1px #6b6b6b solid; }
#loginBox .fBox .info h5 { position: relative; padding: 2px 10px; background: #d6d6d6; border-bottom: 1px #6b6b6b solid; font-weight: normal; font-size: 18px; color: #464646; }
#loginBox .fBox .info h5 a { position: absolute; right: 10px; top: calc(50% - 15px); color: #464646; }
#loginBox .fBox .info article { padding: 10px; }
#loginBox .fBox .info article label { margin-bottom: 10px; display: inline-block; font-size: 16px; }
#loginBox .fBox .info article input ,#register >div p input, #register >div p select , #register >div p textarea { margin-right: 5px; padding: 2px 10px; width: 160px; border: 1px #ccc solid; }
#loginBox .fBox .info article .remind , #register article.bottom p .remind , #memberF p .remind { font-size: 12px; color: #F00A0E; }
#loginBox .fBox .info article a#OKBtn , #register article p a#OKBtn , #memberF p a#OKBtn { padding: 10px 20px; float: none; height: auto; display: inline-block; border-radius: 0; line-height: inherit; }
#loginBox .fBox .info article a#OKBtn:before , #register article p a#OKBtn:before , #memberF p a#OKBtn:before { border-radius: 0; }

#loginBox .links { margin-top: 20px; text-align: center; }
#loginBox .links a {padding: 0 15px 0 10px;border-right: 1px #707070 solid;font-size: 16px;color: #009FCC;}
#loginBox .links a:first-child { color: #009FCC; }
#loginBox .links a:last-child { border-right: 0; }

#loginBox p { text-align: center; }

/* doctorup */
#loginBox form#doctor , #loginBox form#doctorup { text-align: center; }
#loginBox form#doctor .logBox , #loginBox form#doctorup .logBox { float: none; width: auto; display: inline-block; vertical-align: top; }

/* register */
#register h3 {margin-top: 20px;padding: 2px 10px;background: #28b3cf;background: -moz-linear-gradient(left,#21a1c4,#28b3cf 100%);background: -webkit-linear-gradient(left,#21a1c4,#28b3cf 100%);background: linear-gradient(to right,#0d69bc 1%,#0b65bd 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#21a1c4',endColorstr='#28b3cf',GradientType=0);font-size: 16px;color: #fff;}
#register h3.first { background: #ff7342; background: -moz-linear-gradient(left,#ff8706,#ff7342 100%); background: -webkit-linear-gradient(left,#ff8706,#ff7342 100%); background:  linear-gradient(to right,#ff8706 1%,#ff7342 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8706',endColorstr='#ff7342',GradientType=0); }
#register >div { margin-top: 5px; padding: 30px 150px 30px 70px; }
#register >div p { position: relative; margin-bottom: 30px; }
#register >div p label { display: block; font-size: 18px; color: #5a5a5a; line-height: 18px; }
#register >div p label:before { margin-right: 10px; width: 5px; height: 5px; background: #2b8ea9; border-radius: 50%; display: inline-block; vertical-align: middle; content: ""; }
#register >div p span { min-height: 5px; display: block; font-size: 12px; color: #f00; }
#register >div p span#totalTxt { margin-left: 5px; display: inline-block; font-size: 16px; vertical-align: inherit; }
#register >div p label span { display: inline-block; }
#register >div p input , #register >div p select , #register >div p textarea { padding: 5px 10px; width: calc(100% - 20px); }
#register >div p font { margin: 5px 10px 0 0; display: inline-block; font-size: 16px; }
#register >div p.sgBox font { margin-top: 20px; }
#register >div p select { width: auto; }
#register >div p input[type="radio"] , #register >div p input[type="checkbox"] , #register article p input#IsAgree { width: 15px; height: 15px; }
#register >div p textarea { min-height: 180px; }
#register >div p i { position: absolute; right: 5px; bottom: 10px; color: #35b100; }
#register >div p i.fa-times-circle { color: #ec0808; }

#register article { padding: 20px 0; }
#register article.bottom p { text-align: center; }
#register article h2 { margin-bottom: 10px; text-align: center; font-weight: normal; font-size: 25px; }
#register article >div { overflow-y: scroll; margin: 10px auto; padding: 10px 15px; width: 60%; height: 190px; border: 1px #7d7d7d solid; }
#register article >div::-webkit-scrollbar { width: 7px; }
#register article >div::-webkit-scrollbar-track { background: #c5c5c5; }
#register article >div::-webkit-scrollbar-thumb { background: #004e63; }
#register article >div::-webkit-scrollbar-thumb:hover { background: #4e5656; }
#register article p { margin: 15px 0; font-size: 16px; }
#register article p label { font-size: 16px; }
#register article p input[type="text"] { padding: 5px 10px; width: 60px; border: 1px #ccc solid; font-size: 16px; }
#register article.bottom p .remind , #memberF p .remind { display: block; }
#register article p a#OKBtn { padding: 15px 30px; font-size: 20px; }

/* memberF */
#memberF h4.forgeth4 { margin-bottom: 0; }
#memberF p { margin: 10px 0; text-align: center; color: #525151; }
#memberF p.forgetp { margin-bottom: 50px; font-size: 16px; color: #8e8e8e; }
#memberF p:last-child { margin-top: 40px; }
#memberF p label { width: 100px; display: inline-block; text-align: right; }
#memberF p.chk label { width: auto; }
#memberF p.chk input#Checknum { width: 60px; }

/* memberCenter */
#memberCenter h5 { overflow: hidden; margin-bottom: 10px; }
#memberCenter h5 font {float: left;padding: 4px 15px 4px 15px;display: block;background: #43aac6;background: -moz-linear-gradient(top,rgba(67,170,198,1) 1%,rgba(60,154,189,1) 100%);background: -webkit-linear-gradient(top,rgba(67,170,198,1) 1%,rgba(60,154,189,1) 100%);background: linear-gradient(to bottom,rgb(2, 96, 170) 1%,rgb(1, 69, 144) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#43aac6',endColorstr='#3c9abd',GradientType=0);font-size: 16px;color: #fff;}
#memberCenter h5 font:nth-child(2) { padding: 0; float: right; background: none; }
#memberCenter h5 font a {margin-right: 10px;padding: 4px 15px 4px 15px;background: #4599dc;display: inline-block;vertical-align: middle;color: #fff;}
#memberCenter h5 font:nth-child(2) a:last-child { margin-right: 0; background: #a0a0a0; }
#memberCenter .imgBox { background-position: 50%; background-repeat: no-repeat; border: 1px #737373 solid; display: inline-block; }
#memberCenter p { margin: 10px 0; font-size: 16px; color: #464545; }
#memberCenter p label { margin-right: 10px; font-size: 16px; color: #0d69c1; vertical-align: middle; }
#memberCenter p font { font-size: 16px; vertical-align: middle; }
#memberCenter p font.fbok i { color: #35b100; }

/* memberCenter myList */
#memberCenter .textBox , #memberCenter .myList { margin-bottom: 35px; color: #464545; }
#memberCenter .myList ul li { position: relative; margin-bottom: 10px; padding: 10px 0; background: #fff; border: 1px #dadada solid; text-align: center; }
#memberCenter .myList ul li h3 , #memberCenter .myList ul li a { display: block; font-size: 16px; color: #7b7b7b; }
#memberCenter .myList ul li h3 i ,
#memberCenter .myList ul li h3 font ,
#memberCenter .myList ul li a i ,
#memberCenter .myList ul li a font { margin-right: 10px; width: 18px; display: inline-block; text-align: right; line-height: 23px; vertical-align: middle; }
#memberCenter .myList ul li h3 font , #memberCenter .myList ul li a font { margin-right: 0; width: 97px; }
#memberCenter .myList ul li a font.text-clamp ,
#memberCenter .myList ul li h3 font.text-clamp { width: calc(100% - 175px); height: 23px; display: -webkit-inline-box; text-align: left; -webkit-line-clamp: 1;}

/* mail */
#memberCenter #mail ul li { padding: 0; margin-bottom: 0; border: 0; background: none; }
#memberCenter #mail ul li h3 { margin-bottom: 10px; padding: 10px 0; background: #fff; border: 1px #dadada solid; text-align: center; }
#memberCenter #mail ul li .menu_body { margin-bottom: 10px; padding: 10px 30px; background: #fff; border: 1px #dadada solid; display: none; font-size: 16px; transition: none; }
#memberCenter #mail ul li.current .menu_body { display: block; }
#memberCenter #mail ul li b , #memberCenter .myList ul#contactList li b { position: absolute; padding: 4px 12px; background: #fff; display: inline-block; border: 1.5px #FF6666 solid; border-radius: 20px; font-style: normal; font-size: 16px; color: #FF6666; top: -20px; right: -25px; }
#memberCenter #mail ul li b:before ,
#memberCenter #mail ul li b:after ,
#memberCenter .myList ul#contactList li b:before ,
#memberCenter .myList ul#contactList li b:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 11px 14px 0 0; border-color: #ff6666 transparent transparent transparent; top: 35px; right: 26px; content: ""; }
#memberCenter #mail ul li b:after , #memberCenter .myList ul#contactList li b:after { border-color: #fff transparent transparent transparent; top: 31px; right: 24px; }
#memberCenter .myList ul#contactList li b:before { top: 32px; }
#memberCenter .myList ul#contactList li b:after { top: 28px; }

/* personalise */
#personalise .imgBox { margin-bottom: 30px; }
#personalise .imgBox font { position: relative; width: calc(100% - 220px); display: inline-block; vertical-align: bottom; }
#personalise .imgBox font#result { margin-right: 15px; width: 200px; background-position: 50%; background-repeat: no-repeat; background-size: cover; }
#personalise .imgBox font input[type="file"] { position: absolute; width: 119px; height: 37px; top: 0; left: 0; opacity: 0; cursor: pointer; }
#personalise .imgBox font a#chImages ,
#personalise .container .row #UpdateImg {position: relative;padding: 5px 0;width: 119px;background: #43aac6;background: -moz-linear-gradient(top,rgba(67,170,198,1) 1%,rgba(60,154,189,1) 100%);background: -webkit-linear-gradient(top,rgba(67,170,198,1) 1%,rgba(60,154,189,1) 100%);background: linear-gradient(to bottom,rgb(2, 96, 170) 1%,rgb(1, 69, 144) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#43aac6',endColorstr='#3c9abd',GradientType=0);display: block;text-align: center;font-weight: bold;color: #fff;}
#personalise .container { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.56); top: 0; left: 0; z-index: 9999; }
#personalise .container .row { position: relative; margin: 10% auto 0; padding: 30px 0 20px; width: 630px; background: #fff; }
#personalise .container .row a#closeRow { position: absolute; right: -10px; top: -10px; background: #3fa4c3; font-size: 18px; color: #fff; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; }
#personalise .container .row #crop { text-align: center; }
#personalise .container .row #UpdateImg { margin: 20px auto 0; padding: 10px 0; font-size: 16px; }

/* google_form */
#google_form { margin-top: 35px; }
#google_form article { margin-bottom: 15px; }
#google_form article * { line-height: 140%; vertical-align: bottom; }
#google_form iframe { width: 100%; height: 1460px; }

@media screen and (max-width: 960px) {
	#register >div { padding: 30px; }
	#personalise .container .row { width: 90%; }
}
@media screen and (max-width: 640px) {
	#loginBox form > div { float: none; width: 100%; text-align: center; }
	#loginBox form > div p { text-align: center; }
	#loginBox form .btnBox a { float: none; display: inline-block; vertical-align: middle; }
}
@media screen and (max-width: 540px) {
	#personalise .imgBox font { margin-right: 0; margin-bottom: 10px; width: 100%; display: block; text-align: center; }
	#personalise .imgBox font#result { margin: 0 auto 10px; }
	#personalise .imgBox font a#chImages { display: inline-block; }
	#loginBox form#doctorup > div p label { width: 96px; display: inline-block; text-align: right; }
	#loginBox form#doctorup .btnBox a#openBox { padding: 7px 20px; height: auto; line-height: 170%; }
}
@media screen and (max-width: 518px) {
	#google_form iframe { height: 1520px; }
}
@media screen and (max-width: 400px) {
	#memberF p { text-align: left; }
	#memberF p label { display: block; text-align: left; }
	#personalise .imgBox font span { display: block; text-align: center; }
	#loginBox form .btnBox a#openBox { padding: 10px 20px; height: auto; line-height: 170%; }
	#loginBox form#doctorup > div p input { width: 120px; }
	#memberCenter h5.memTxt { position: relative; padding-top: 45px; }
	#memberCenter h5.memTxt font:nth-child(2) { position: absolute; top: 0; right: 0; }
}
@media screen and (max-width: 320px) {
	#loginBox { padding: 20px; }
}