@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

/* RESET
-------------------------------------------------- */
html{color:#000;background:#FFF}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{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}.cf:before, .cf:after {content:""; display:table; } .cf:after {clear:both; } .cf {zoom:1; }

/* default */
body, html { -webkit-font-smoothing: antialiased; margin: 0 auto; font-size: 18px; color: #000; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%;
  min-height: 100%; font-family: 'Noto Sans TC', sans-serif; font-weight: 300;}
::selection { background: #ffffff; color: #EC2E85; }
header { width: 100%; position: relative; z-index: 9999999; }

@font-face
{
	font-family:myFirstFont;
	src:url('../font/mellehk-xbold.eot');
	src:url('../font/mellanhk-xbold.eot');
	src:local('☺'),
		url('../font/mellehk-xbold.eot?#iefix') format('embedded-opentype'),
		url('../font/mellehk-xbold.woff') format('woff'),
		url('../font/mellehk-xbold.ttf') format('truetype'),
		url('../font/mellehk-xbold.ttf') format('truetype'),
		url('../font/mellehk-xbold.svg#webfontOTINA1xY') format('svg');
		url('../font/mellanhk-xbold.eot?#iefix') format('embedded-opentype'),
		url('../font/mellanhk-xbold.woff') format('woff'),
		url('../font/mellanhk-xbold.ttf') format('truetype'),
		url('../font/mellanhk-xbold.ttf') format('truetype'),
		url('../font/mellanhk-xbold.svg#webfontOTINA1xY') format('svg');

}
ul, ol { list-style: none; }
ul li, ol li { color: #000 }
ul li p, ol li p { color: #fff; margin: 0; }
ol.ol_no { list-style: decimal; margin-left: 40px; }
ul.ul_doc { list-style: disc; margin-left: 40px; }

b { font-weight:bold; }
/*background-color: #ec2e85; background-color: #2e69b4; */
a { display: inline-block;color: #000; font-weight: 300; text-decoration: none; border-bottom: 1px solid #000; }
.btn_submit, .btn_r, .btn_b, .btn_back { text-align: center; color: #fff; }
.btn_submit button, .btn_submit a, .btn_r a, .btn_r button, .btn_b a, .btn_b button, .btn_back a, .btn_back button { text-align: center; color: #fff; font-weight: 900; letter-spacing: 4px; border-bottom: none; }
.btn_r a {display: inline-block; line-height: 126px;;height: 132px; width: 187px; letter-spacing: 5px;  font-size: 36px; text-align: center; }
.btn_b a {display: inline-block; line-height: 126px; width: 187px;height: 132px; letter-spacing: 5px; font-size: 36px; text-align: center;}
a.tnc { color: #7b7b7b; border-bottom: 1px #7b7b7b solid; font-weight: 400; line-height: 35px; font-size: 22px;  }
a.logo, a.logo_mama { border:none; }
.btn_submit button, .btn_submit a{line-height: 126px; width: 182px;height:132px; border: none;  font-size: 36px;  text-align: center; } 
.buttom_bg{background: url(../images/btn_sure_violet_config.png) center no-repeat;text-align: center;background-size:98%;}
.buttom_green{background: url(../images/btn_green.png) center no-repeat!important;text-align: center;}
.buttom_violet{background: url(../images/btn_sure_violet.png) center no-repeat!important;text-align: center;}
.buttom_violet_yellow{background: url(../images/btn_sure_violet_yellow.png) center no-repeat!important;text-align: center;}
.buttom_bg_yellow{background: url(../images/btn_sure_violet_yellow.png) center no-repeat;text-align: center;}
.btn_back a, .btn_back button{line-height: 126px; width: 358px; background-color: #fff;  border: none;  font-size: 36px; margin:40px 0;  } 
a.btn_link {border:none; display: block;word-break:break-all}
.btn_morebb a, .btn_morebb button { line-height: 70px; padding: 0 70px; background: #2e69b4; color: #fff; font-size: 22px; font-weight: 900; text-align: center;border-radius: 60px;border-bottom:0;}

::-webkit-input-placeholder { color: #bcbcbc; }
::-moz-placeholder { color: #bcbcbc;}
:-ms-input-placeholder { color: #bcbcbc; }
:-moz-placeholder { color: #bcbcbc;}

input, textarea, select { border: none; background: none; outline: none; font-weight: bold;   }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select::-ms-expand { display: none; }

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill  { background: #fff !important; }

.icon { display: inline-block; }

h1, h2, h3, h4, h5, h6 { color: #000;  margin: 0; }
h1 { color: #fff; text-align: center; font-weight: 500; font-size: 32px; height: 128px; line-height: 109px; letter-spacing: 4px;font-family: "myFirstFont";  }
h2 { font-size: 30px; line-height: 48px; color: #124a85; letter-spacing: 4px; text-align: center; font-weight: 600 }
h3 { font-size: 37px; line-height: 48px; color: #ec2e85; text-align: center; font-weight: 900; }
h4 { font-size: 28px; color: #fff; text-align: center; height: 128px; font-weight: 900; }
h5 { font-size: 48px; }
h6 { font-size: 18px; }

p { font-size: 24px; line-height: 48px; letter-spacing: 3px; font-weight: 300;}

.page_content { width: 750px; margin: 0 auto; background: url(../images/bg1.png) top center no-repeat #0761ad;background-size:cover; min-height: 100vh;}
.page_content.hall_bg{background: url(../images/bg1.png) top center no-repeat #89cae5;background-size:cover;}
.content { text-align: center;  }
.hall_bg .content { text-align: center;}
/*background: url(../images/hall_bg.jpg) top center no-repeat #A0F0CB; */
.right_logo{position: absolute;top: 36px;right: 30px;}
.title { text-align: center; padding:0; margin-bottom:25px;}
.title_img{width: 85.6%;}
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.hide { display: none !important; }
.show { display: block !important; }
.clean { clear: both !important; }
.main_top{margin-top: 80px;}
footer p{  font-size: 18px; line-height: 30px; height: 30px; color: #005da9;padding:5px 0; }
footer .copyright{display: flex;justify-content: space-between;padding: 0 50px;}

/* ------------------------------------------
Header //  Normal  for all
--------------------------------------------- */

header { position: relative; /*background-color: #fff;*/ z-index: 9;  }
header a.logo { margin: 36px 40px 0;}
header .logo_img { width: 43%; } 
header a.logo_mama {float: right;margin-right: 40px;width: 32%;text-align:  right;margin-top: 48px;vertical-align:;}
header a.logo_mama img {width: 100%}

/* ------------------------------------------
content-img
--------------------------------------------- */
.content-img{
	padding: 4px 0 24px;
}

nav { display: none; }

.btn-menu {  position: absolute; right: 0; width: 50px; height: 50px; line-height: 50px; display: table-cell; text-align: center; background-color: rgba(0, 0, 0, .5);  }

/* ------------------------------------------
popup_box
--------------------------------------------- */
.popup_end{position: fixed;background-color: rgba(0,0,0,0.5);top: 0;width: 750px;height: 100%;z-index: 999999;margin: auto;}
.popup_end .popup_content{position: relative;margin-top: 55%;font-size: 38px;color: #134a86;text-align: center;font-weight: 600;}
.popup_end .popup_content_word{margin: 0 50px; }
.popup_end .popup_content_word p{font-weight: 600;font-size: 36px;color: #134a86;text-align: center;margin: 70px auto 60px;letter-spacing: 2px;line-height: 50px;width: 430px;}
.popup_end .popup_content h1{font-size: 38px;letter-spacing: 1px;}
.popup_end .section_content_bottom_web { background: #fff; margin:0 auto; width: 650px; padding: 120px 0 60px;border-radius: 0 0 30px 30px;  }




/*.popup_box{position: fixed;background-color: rgba(0,0,0,0.8);top: 0;max-width: 750px;width: 100%;height: 100%;z-index: 999999;}
.popup_content{position: relative;margin-top: 55%;font-family:"myFirstFont" ;font-size: 32px;color: #134a86;text-align: center;}
.popup_content_word{ }
.popup_content_word p{font-family:"myFirstFont" ;font-size: 32px;color: #134a86;text-align: center;margin-top: 20px;}
.popup_content h1{font-size: 36px;}*/



.weight_word{font-weight: 600;}
.text_index{text-indent: 1em;display: block;}
/* ------------------------------------------
contect 
*title_ribbon_big_db.png*
--------------------------------------------- */
.section {margin-top:0;position: relative;z-index: 1000;}
.main_content{position: relative;}/*new add*/ 
.title_ribbon_b { background: url(../images/title_ribbon_little.png) top center no-repeat;top: -18px; width: 100%;position: absolute;  }
.title_ribbon_db { background: url(../images/title_ribbon_big_db.png) top center no-repeat;position: absolute;top: -6px; width: 100%;}
.title_ribbon_db h1{    font-family: 'Noto Sans TC', sans-serif; color: #fff; text-align: center; font-weight: 900; font-size: 32px; height: 100px; line-height: 30px; letter-spacing: 4px;  }
.title_ribbon_db p{ color: #fff; text-align: center; font-weight: 300; font-size: 32px; height: 78px; line-height: 78px; letter-spacing: 4px;  }
.title_ribbon_db2 { background: url(../images/title_ribbon_little.png) top center no-repeat;position: absolute;top: -6px; width: 100%; }
.title_ribbon_db2 h1{font-family: 'Noto Sans TC', sans-serif; color: #fff; text-align: center; font-weight: 900; font-size: 32px; height: 100px; line-height: 30px; letter-spacing: 4px;  }
/*.title_ribbon_db3 { background: url(../images/title_ribbon_db3.png) top center no-repeat; padding: 25px 0; }
.title_ribbon_db3 h4 { line-height: 40px;  }
.title_ribbon_db3 h4 span { display: block; font-size: 24px; font-weight: 400; }*/
.title_margin{padding-bottom: 0px;}
.text_content h3.word_color{color: #734894!important;}

.prompt-box { position: relative;}
.content-header { height:128px;background: url(../images/title_violet_little.png) top center no-repeat;top: -6px; width: 100%;position: absolute;  }
/* ------------------------------------------
input-info
--------------------------------------------- */
.input-info{text-align: right;margin-right:40px;color:#020202;font-size:18px;}

.title_ribbon_db3 { background: url(../images/title_ribbon_big_db.png) top center no-repeat;position: absolute;top: -6px; width: 100%;}
.title_ribbon_db3  h4 { font-family: 'Noto Sans TC', sans-serif; color: #fff; text-align: center; font-weight: 900; font-size: 32px; height: 172px; line-height: 30px; letter-spacing: 4px;  }
.title_ribbon_db3 h4 span { display: block; font-size: 24px; font-weight: 400;height: 78px;line-height: 78px; }
.title_ribbon_r { background: url(../images/title_ribbon_little.png) top center no-repeat;position: absolute;top: -4px; width: 100%;}
.title_ribbon_r2 { background: url(../images/title_ribbon_little.png) top center no-repeat; min-height: 138px;position: absolute;top: -2px; width: 100%; }
.title_ribbon_r2 h1,.title_ribbon_db2 h1{ height: 128px; line-height: 100px; font-size: 36px; }
.title_ribbon_r2 h4 { padding: 12px 0; }
.section_content { background: #fff; margin:0 auto; width: 650px; padding: 100px 0 50px; }
.section_content_bottom { background: #fff; margin:0 auto; width: 650px; padding: 120px 0 50px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;padding-top:0; }
.section_content_border{border-radius: 0 0 30px 30px;}
.section_content_bottom .btn_r, .section_content_bottom .btn_b { margin-bottom: 36px; }
.section_content_bottom_new{margin:0 auto; width: 420px;overflow: hidden}/*new add*/ 
.section_content_bottom_new>div{float:left;}
.section_content_bottom_new .btn_r{ margin-right: 38px; }/*new add*/ 
.btn_r_a_bg{background: url(../images/new_memder.png) top center no-repeat;text-align: center;}
.btn_b_a_bg{background: url(../images/push.png) top center no-repeat;text-align: center;}
.btn_r_a_green{background: url(../images/green_member.png) top center no-repeat!important;text-align: center;}
.btn_b_a_push{background: url(../images/violet_member.png) top center no-repeat!important;text-align: center;}
.text_content { padding: 20px 40px 0; padding-top:118px;}
.text_content_center{text-align: left;}
.text_content input{    width: 285px;text-align: center;font-weight: 600;}
.text_content .gift { margin-bottom:20px; }
.text_content p { margin-bottom: 20px;}
.text_content_center .text_center{text-align: center!important;}
.text_content .p_weight{font-weight: 600;}
.text_content .span_color{color: blue;-webkit-user-select: text}
.text_content p.margin{margin-bottom: 0;font-weight: 400;}
.no_title .content { padding-top: 90px; background: url(../images/bg.jpg) 0 -270px no-repeat;  }

.no_title.hall_bg .content { padding-top: 90px; background: url(../images/hall_bg.jpg) 0 -270px no-repeat #eee5ff;  }

span.date { font-family: Arial, Helvetica, sans-serif;font-weight: 600; }
.tnc h2, .tnc p { text-align: left; }
/*199146*/
.tnc ol li { list-style: decimal; color:#000; text-align: left; font-size: 20px; font-weight: 300; margin-left: 35px; }
.tnc ol li p { color:#020202; font-size: 22px; line-height: 30px; margin-bottom: 20px; }
.word_list ol li{ list-style: decimal; color:#EC2E85; text-align: left; font-size: 20px; font-weight: 700; margin-left: 35px; }
.input_checkbox_position{float: right;width: 520px;}



/* ------------------------------------------
form 
---------------------------------#2E69B4------------ */
.star { text-align: right; color:#000; margin-bottom: 0px;padding-right: 50px; font-size: 20px;}

.form { padding: 0 40px; text-align: left; }
.missing, .error-msg { text-align: left; color: #ec2e85; margin-top: 10px; display: none; font-size: 24px; }
.tips { text-align: justify;  font-size: 20px; line-height: 36px; margin-top: 20px; display: inline-block; }
.remind { font-size: 24px; color: #ec2e85; text-align: left; }
/*.baby_birth { display: none;}*/

.input_title { font-size: 24px; color: #000; text-align: left; margin: 22px 0; }
.input_title p{ line-height:35px; letter-spacing: 0px;}
.input_title_p{font-weight: 500;margin-bottom: 15px;}
.input_title sup { font-size: 14px; vertical-align: text-top !important;}
.input_title img { margin: 0 5px; margin-bottom: -5px; }
.input_box, .input_select { border-radius: 10px; border: 2px solid #2e69b4; }
.input_box input, .input_select select { line-height: 70px; height: 70px; color: #606060; width: calc(100% - 40px); padding: 0 20px; font-size: 22px; font-weight: 400;  }
.input-box::placeholder{font-size:22px;color: #606060;}
.input_select select { padding: 0; padding-left: 10px; padding-right: 65px; background: url(../images/btn_select.jpg) right center no-repeat; width: 100%; }
.input_tnc { margin-top: 40px; text-align: left; }
.input_tnc .input_title { display: inline-block; }

.input_verification { margin-top: 50px; }
.input_verification .code, .input_verification .input_box {  width: 47%; }
.input_verification .code .reload { background-color: #2e69b4; border-radius: 10px; width: 75px; height: 75px; float: right;  }
.input_verification .code .reload img { width: 60%; margin: 20%;  }
.btn_submit { margin-top: 78px; margin-bottom: 20px;}

.input_appellation, .input_baby_birth { text-align: left;  }
.input_appellation .input_title, .input_baby_birth .input_title { display: inline-block; margin-right: 50px;  }
.input_radio { display: inline-block; }
.input_radio label { padding: 0 10px; margin-right: 30px; color: #606060; font-size: 22px; font-weight: 400; }
.input_c_name .input_box { width: 47%;}
.input_e_name { clear: both; }
.input_baby_birth { margin-top: 10px; }
.input_c_address .input_select{ width: 30%; }
.input_date .input_select { width: 47%; }
.input_c_address .input_select.pull-left, .input_date .input_select.pull-left  { margin-right: 3.5%; }
.input_c_address .input_box { margin-top: 20px; }
.input_milk .input_select { width: 47%; }
.input_time .input_select { width: 100%;}
.input_milk{ margin-top: 30px; }
.input_phone .input_select { width: 30%; float: left; }
.input_phone .input_box {  width: calc(70% - 40px); float: right; }
.input_no_baby, .input_date { margin-bottom: 10px; }

.input_wrap.error .missing,
.input_wrap.error .error-msg{display: block;}
.input_wrap.error .missing,
.input_wrap.error .err{font-size: 0.5rem;}

.btn_morebb { margin-top: 40px; }

.input_checkbox label { font-size: 24px; padding-left: 20px;  }
.input_checkbox li { margin-bottom: 20px; }

.input_tick .remind { color: #606060; font-size: 20px;}
.input_tick .remind_next { color: #000; font-size: 24px;margin-top: 20px;}

.input_baby_upload .input_title { font-size: 24px; color: #000; float: left;  }
.input_baby_upload .input_title p { font-size: 18px; color: #606060; letter-spacing: 0; }
.input_upload { position: relative; overflow: hidden; line-height: 70px; padding: 0 70px; background: #2e69b4; color: #fff; font-size: 22px; font-weight: 900; border-radius: 60px; text-align: center; width: 10%; float: right; margin-top: 20px; }
.input_upload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); width: 100%; height: 100%; }

.icheckbox_flat-aero,
.iradio_flat-aero { display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 44px; height: 44px; background: url(../images/aero.png) no-repeat; border: none; cursor: pointer; }
.icheckbox_flat-aero { background-position: 0 0;float: left; }
.icheckbox_flat-aero.checked { background-position: -44px 0; }
.icheckbox_flat-aero.disabled { background-position: -88px 0; cursor: default; }
.icheckbox_flat-aero.checked.disabled { background-position: -132px 0; }
.iradio_flat-aero { background-position: -176px 0; }
.iradio_flat-aero.checked { background-position: -220px 0; }
.iradio_flat-aero.disabled { background-position: -132px 0; cursor: default; }
.iradio_flat-aero.checked.disabled { background-position: -154px 0; }

.qr_band_logo { color: #2e69b5; letter-spacing: 8px; font-weight: 600; font-size: 32px; }

.loader { position: fixed; top: 0; left: 0; z-index: 9999999; width: 100%; height: 110%; background-color: rgba(0,0,0,.8); text-align: center; display: none; }
.loader .content { text-align: center;  color: #fff; }
.loader img {  width: 60px; height: 60px; position: absolute; top: 40%; left: 45%;/*  margin: -30px 0 0 */}



/* ------------------------------------------
prompt-box
---------------------------------#2E69B4------------ */
/* <div class="prompt-box">
    <div class="prompt-content">
        <div class="content-header">
            <img src="" alt="">
        </div>
        <div class="content-body">
            <p>你還未成為會員，現在立即
登記成為雅培媽媽會會員！</p>
            <div>
                <a href="#"></a>
            </div>
        </div>
    </div>
</div> */
.prompt-box{
	position: fixed;
	top: 20%;
	left: 50%;
	margin-left: -300px;
	width: 600px;
	height: 300px;
	background:#fff;
	box-sizing: border-box;
}
.prompt-box .content-body{
	padding: 0 120px;
}
.prompt-box .content-body>p{
	font-size: 27px;
	color:#4b0b82;
}


.prompet-content{
	width: 650px;
	background:#fff;
	border-radius: 0 0 30px 30px;
}
.prompet-title{
	background: url(../images/title_violet_little.png) top center no-repeat;
	top: -6px; 
	left: -36px;
	width: 100%;
	position: absolute; 
}
.prompet-position{
	width: 100%;
	position: fixed;
	top: 15%;
	left: 50%;
	margin-left: -325px;
}
.prompet-content{
	
}
.prompet-content .content-txt{
	text-align: center;
	width: 410px;
	margin: 0 auto;
}
/*d8a533*/
.prompet-content .content-txt>p{
	font-size: 30px;
	color: #000;
	padding-top: 155px;
	font-weight: 600;
}
.prompet-content .content-btn{
	padding-top: 56px;
	padding-bottom: 94px;
}
.prompet-content .content-btn>a{
	text-align: center;
	display: block;
	width: 324px;
	height: 110px;
	line-height: 110px;
	border: 6px solid #f3ab4a;
	border-radius: 110px;
	color: #fff;
	font-size: 36px;
	margin: 0 auto;
	font-weight: bold;
	background: #ffba40;
}

/*
check 
 */
.popup_check{
	position:fixed;
	width:750px;
	width: 100%;
	margin: auto;
	height:100%;
	background-color:rgba(0,0,0,0.6);
	top:0;
	z-index:999;
}
.popup_check_box{
	width:100%;
	height:auto;
	margin-top:45%;
	position:relative;
}
.check_content{
	padding-top: 140px;
}
.check_content p{
	padding-top:20px!important;
	}
/* ------------------------------------------
Hide popup
--------------------------------------------- */
,cc{
	display: none;
}

/* ------------------------------------------
Header image left distance.
--------------------------------------------- */
.title-left-distance{
	left: 14px;
}
.tnclist{
	overflow: hidden;
}
.tnclist p{
	color:#020202;
}
.tnclist span{
	float:left;
	width:5%;
	text-align:left;
	margin-top:7px;
	text-align: center;
}
.tnclist p{
	float:left;
	width:95%;
}
.selecarea{
	background:url(../images/slowdown.png) 148px center no-repeat;
	border-radius: 10px;
	border: 2px solid #2e69b4;
	width:calc(40% - 40px);
	height:70px;
	float:left;
	position: relative;
	font-size: 22px;
	color:#606060;
	line-height:70px;
	padding-left:10px;
	box-sizing: border-box;
}
.selecarea::after{
	content:'';
	position: absolute;
	height:50px;
	border-left:1px solid #2e69b4;
	right: 54px;
	top: 9px;
}
.selecarea ul{
	position: absolute;	
	width:100%;
	left:0;
	top:69px;
	text-align: center;
	background:#fff;
	display:none;
}
.selecarea ul li{
	width:100%;
	height:40px;
	line-height:40px;
	background:#fff;
	color:#000;
	border-bottom:1px solid #2e69b4;
}
.selecarea .current{
	display:block;
}