* {
    box-sizing: border-box;
}

html,
body {
    font-family: 'Noto Sans TC', Helvetica, Arial, '黑體-繁', 'Heiti TC', '儷黑', 'LiHei', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    font-size: 16px;
    background-color: #fff;
/*    background: url(../demo/mobile.jpg) no-repeat center top;*/
    
}

.wrapper {
    position: relative;
/*    overflow: hidden;max-width: 1200px;*/
    min-width: auto;  min-width: 320px;
    margin: 0 auto;
   
}



/* ----------------------------------------------------
	initial html5 reset
---------------------------------------------------- */
html,body,div,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{border:0;outline:0;font-size:100%;margin:0;padding:0;vertical-align:middle;}
body{line-height:1;}
article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block;}
nav ul{list-style:none;}
ol{list-style:none;}
ul{list-style:none;}
ul ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{text-decoration:none;}del{text-decoration:line-through;}
mark{background:none;}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse;
border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input[type=submit],input[type=button],button{margin:0;padding:0; border:none;vertical-align:middle;}
input,select,a img{vertical-align:middle;}




/*-------------------------

           a

-------------------------*/
a,
button {
    text-decoration:none;

	-webkit-transition:all ease-in-out 0.2s;
	-moz-transition:all ease-in-out 0.2s;
	-ms-transition:all ease-in-out 0.2s;
	-o-transition:all ease-in-out 0.2s;
	transition:all ease-in-out 0.2s;
}
a:focus,
button:focus{
    outline: none;
    text-decoration: none;
}


/*-------------------------

         按鈕  btn

-------------------------*/
.btn{
    display:block; padding:0; border-radius:0;
    font-family: 'Noto Sans TC', '微軟正黑體';
}



/*-------------------------

           表 單

-------------------------*/
.form-1{
    width:100%; 
    
}
.form-box .form-box-list{
    padding: 4% 6.4%;
    background-color: rgba(255, 255, 255, 0.85);
    margin-bottom: 50px;
}


/* ---------------------

---------------------- */
.form-box-list .column{
	position: relative;
	height: 100%;   min-height: 74px;
    
    font-size: 30px; line-height: 74px;
    color: #555; font-weight: 400; letter-spacing: 0px;
    border-bottom: solid 1px #666;
    
    display: flex;
    flex-wrap: wrap;
/*    margin-bottom: 10px;*/
}


.input-txt{
    height: 74px; padding: 0 25px;
    letter-spacing: 0.1em;
    background-color: transparent;
}

.input-txt2{
    height: 85px; padding: 0 25px;
    letter-spacing: 0.1em;
    background-color: #fff;
}
.input-txt3{
    height: 74px; padding: 0;
    letter-spacing: 0.1em;
}

.input-txt4{
    height: 510px; padding: 25px;
    letter-spacing: 0.1em;
    background-color: #fff;
}
.style-select{
   /*  width: 74%;   */ 
/*
    order:1;
    align-self:flex-end;
    justify-content: flex-end;
*/
}

.w1{ width:84.5%;}
.w2{ width:72%;}
.w3{width:38%;}
.w4{ width:100%;}
.w5{ width:22%;}
.w6{ width:78%;}





/**/
input::placeholder {
    color: #969696;
    opacity: 1;
    font-weight: 300;
}


/* ---------------------
         下拉選單
---------------------- */
.style-select{
    position: relative; display: block;
    height: 74px;
    border: none; margin: 0;
	color: #0e4fa1;
    border-radius: none;
    background-color: transparent;
}

/*線
.style-select:before{
    top:0%; right:22%;
    content: " ";
    height: 36px; width:0;
    position: absolute; z-index:1;
    border-left:solid 1px #fff;
}
*/
/*箭頭*/
.style-select:after{/*箭頭*/
	top:44%; right:6%;
    border: solid transparent;
    content: " ";
    height: 0; width: 0;
    position: absolute; z-index:2;
    pointer-events: none;

    border-top-color:#666;
    border-width: 8px;
}

/*內容*/
.style-select > select {
    width: 100%; height: 74px; line-height: 74px;
    border: 0px; padding: 0 25px;
	-webkit-appearance: none; outline: inherit;
    cursor:pointer;
    background-color: transparent;
    border-radius: 0px;
    font-weight: 400;
    letter-spacing: 0.1em;
}
.style-select > select > option {  color:#0e4fa1; background-color: transparent; border:none; border-radius: 0;}
.style-select > select > option:hover { color:#0e4fa1; background-color: transparent; border:none; border-radius: 0;}






/* ---------------------
        checkbox
---------------------- */
input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}

label.side-label {
    display: block; position: relative;
    padding-left: 43px;
    margin: 30px 0 0 4px;
    padding-bottom: 5px;
    cursor: pointer;
    font-size: 26px; line-height: 40px;
	font-weight: 400; color: #555;
    letter-spacing: 0.05em;
    text-align: justify;
}

label.side-label::before,
label.side-label::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
}

label.side-label::before {
    display: block;
    width: 30px; height: 30px;
    border: 1px solid #000;
}

input:focus + label.side-label::before {
    border-color: #000;
}

label.side-label::after {
    display: none;
    width: 30px; height: 30px;
    background: url(../images/data/check.jpg) no-repeat;
    background-size: cover;
    border: 1px solid #555;
}

input:checked + label.side-label::after {
    display: block;
    
}


/*連結*/
label.side-label a{
    margin: 0 4px;
    vertical-align: bottom;
    color: #555; font-weight: 400;
    border-bottom: solid 2px #666;
}
label.side-label a:hover{
    color: #000;
    border-bottom: solid 2px #000;
}






/* ---------------------
        共用input
---------------------- */
input[type="text"],
input[type="tel"],
input[name="email"],
input[type="number"],
select, textarea,
.style-select>select{
    color:#0e4fa1; font-size: 30px; font-weight: 400;
/*    background-color: transparent;*/
    border: none;
    border-radius: 0;
    font-family:'Noto Sans TC','儷黑 Pro','微軟正黑體', 'Arial', sans-serif;
    vertical-align: bottom;

    /* border: solid 1px #999; */
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[name="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
button:focus,
input[type='radio']:focus{
    outline: none;
}




/* ---------------------
         上傳照片
---------------------- */
.uploader{
    position: relative;
    width: 100%;  height: 100px;
    background-color: #a79f9f;
    display: block;
    border-radius: 10px;
    margin-top: 20px;
}

.uploader button{
    position: relative;
    display: block;
    width: 100%; height: 100px;
    background-color: transparent;
    color: #fff; font-size: 32px; font-weight: 400;  
    line-height: 30px;
    text-align: left;
    padding-left: 20%;
    cursor: pointer;
    
}
.uploader button > span{
    display: inline-block;
    color: #fff; font-size: 22px; font-weight: 300;  
    line-height: 20px;
    letter-spacing: 0.08em;
}


.uploader button:before{
    position: absolute; z-index: 2; top:15%; left: 7%;
    content: "";
    width: 53px; height: 67px;
    background: url(../images/data/uploader-pic.png) center top no-repeat;
    background-size: contain;
}


/*-------------------------


          內  容


-------------------------*/
/* 共用框 */
.inner{
	position: relative; z-index: 2;
    width:750px; min-width: 750px; max-width: none !important;
    margin: 0 auto;
    padding: 0;
}





/*-------------------------

           kv

-------------------------*/
.kv {
    position: relative;
    width:auto; height: 1127px;
    background: url(../images/kv/kv-bg.jpg) center top no-repeat;
}


.ahc-logo{
    position: absolute; top:108px; right: 60px;
}
.kv-pd{
    position: absolute; top:405px; right: -140px;
}
/*標題*/
.kv h1{
    position: absolute; top: 270px; right: 0px; z-index: 10;
    font-size: 42px; letter-spacing: 0.06em;
    line-height: 1.3em;
    color: #3e3935;
    font-weight: 500;
    text-align: center;
}
.kv h2{
    position: absolute;
/*  top: 939px; 招募*/
    top: 906px; /*回填*/
    right: 105px; z-index: 10;
    font-size: 36px; letter-spacing: 0.07em;
    line-height: 1.3em;
    color: #00459c;
    font-weight: 500;
    text-align: center;
}
.kv .btn{
    position: relative; top: 1000px; left: 220px;
    width: 303px; height: 78px;
    font-size: 36px; letter-spacing: 0.06em;
    line-height:  77px;
    color: #fff;text-align: center;
    background: url(../images/kv/btn-bg.jpg) center top no-repeat;
}
.kv .btn2{
    position: relative; top: 1010px; left: 170px;
    width: 427px; height: 78px;
    font-size: 36px; letter-spacing: 0.06em;
    line-height:  77px;
    color: #fff;text-align: center;
    background: url(../images/kv/btn-bg2.jpg) center top no-repeat;
    display:block; padding:0; border-radius:0;
}
.kv .btn:after{
    position: absolute; top: 90px; left: 126px;
    content: "";
    display: block;
    width: 56px; height: 23px;
    background: url(../images/kv/btn-arrow.png) center top no-repeat;
    animation: 1s arrow1 infinite;
}
.kv .btn2:after{
    position: absolute; top: 90px; left: 190px;
    content: "";
    display: block;
    width: 56px; height: 23px;
    background: url(../images/kv/btn-arrow.png) center top no-repeat;
    animation: 1s arrow1 infinite;
}
@keyframes arrow1{
  100%{
    top: 90px;
  }
  50%{
    top: 95px;
  }
  0% {
    top: 90px;
  }
}






/*-------------------------

           ahc

-------------------------*/
.ahc {
    position: relative;
    width:auto; height: 1700px;
    background: url(../images/ahc/ahc-pic.jpg) center 270px no-repeat;
/*    padding: 460px 0 0 0 ;*/
}
.ahc .title{
    position: relative;
    margin: 76px 0 96px; 
}
.ahc .title:after{
    position: absolute; top: 200px; left: 50%;
    content: "";
    display: block;
    width: 1px; height: 133px;
    background-color: #999;
}
.ahc p{
    font-size: 32px; letter-spacing: 0.05em;
    line-height: 48px;
    color: #555;
    font-weight: 400;
    text-align: center;
}
.ahc p b{
    color: #b17d16;
    font-weight: 400;
    vertical-align: baseline;
}

/*護膚金三角平衡美學*/
.ahc .aesthe_balance{
    position: relative; left: 54px;
    padding-top: 100px;
    margin-top: 548px; 
    width: 652px; height: 587px;
}
.ahc .aesthe_balance img{
    position: absolute;   
}
.ahc .aesthe_balance .ab-logo{
    top: 310px; left: 215px;
}
.ahc .aesthe_balance .ab-1{
    top: 0px; left: 240px;
}
.ahc .aesthe_balance .ab-2{
    bottom: 0; left: 0px;
}
.ahc .aesthe_balance .ab-3{
    bottom: 0; right: 0;
}
.ahc .aesthe_balance .ab{
    top: 188px; left: 142px;
}

.ahc .aesthe_balance p{
    margin-top: 500px;
}



/*-------------------------

           pd

-------------------------*/
.pd{
    position: relative;
    padding-top: 80px;
    margin-bottom: 50px;
}
.pd:after{
    position: absolute; top: 0px; left: 0px; z-index: 1;
    content: "";
    display: block;
    width: 100%; height:713px;
    background-color: #dbe7f2;
}

.pd .title h2{
    font-size: 52px; letter-spacing: 0.05em;
    line-height: 64px;
    color: #555;
    font-weight: 400;
    text-align: center;
}
.pd .title h3{
    width: 635px; 
    margin: 38px auto 44px auto;
    font-size: 32px; letter-spacing: 0.1em;
    line-height: 64px;
    color: #fff;
    font-weight: 200;
    text-align: center;
    border-radius: 50px;
    background: #a79f9f;
}
.pd .title p{
    position: relative;
    font-size: 26px; letter-spacing: 0.1em;
    line-height: 1.5em;
    color: #231f20;
    font-weight: 400;
    padding-left: 180px;
}
.pd .title p:after{
    position: absolute; top: 20px; left: 60px; z-index: 3;
    content: "";
    display: block;
    width: 89px; height:96px;
    background: url(../images/pd/pd-ahc-icon.png) center no-repeat;
}
.pd .title p b{
    font-size: 42px; line-height: 1.35em;letter-spacing: 0.1em;
    vertical-align: baseline;
}

/**/
.pd .materials{
    display: flex;
    justify-content: space-around;
    margin: 50px 0;
}
.pd .materials div{
    text-align: center;
}

.pd .materials h4{
    font-size: 26px; letter-spacing: 0.1em;
    line-height: 1.5em;
    color: #231f20;
    font-weight: 400;
    margin: 7px 0;
}
.pd .materials p{
    font-size: 23px; letter-spacing: 0.1em;
    line-height: 1.5em;
    color: #555;
    font-weight: 400;
}




/*-------------------------

           DATA

-------------------------*/
.data{
    position: relative;
    width: 100%; min-height: 500px; 
    
    /*招募用*/
/*   background: url(../images/data/data-bg.jpg) top center no-repeat #f9f6f4; */
    /*回填用*/
    background: url(../images/data/data-bg2.jpg) top center no-repeat #f9f6f4;
}

/**/
.data .inner{
    position: relative;
    width: 750px;
    margin: 0 auto;
    padding: 350px 52px 40px 52px;
}



.form-box-list h2{
    font-size: 31px; letter-spacing: 0.03em;
    line-height: 1.4em;
    color: #555555;
    font-weight: 400;
    text-align: justify;
    margin-bottom: 30px;
}
.form-box-list h2 b{
    color: #0e4fa1;
}
.form-box-list h2 a{
    color: #000;
    border-bottom: solid 1px #999;
    vertical-align: baseline;
}
.form-box-list h2 a:hover{
    color: #0e4fa1;
    border-bottom: solid 1px #999;
}

.form-box-list>p{
    font-size: 22px; letter-spacing: 0.03em;
    line-height: 1.65em;
    color: #666;
    font-weight: 300;
}

/*送出按鈕*/
.data .send button{
    width: 500px; height: 96px;
    background-color: #0e4fa1;
    font-size: 40px; letter-spacing: 0.2em;
    line-height: 96px;
    color: #fff;
    font-weight: 400;
    margin: 50px auto 20px auto;
}




/*注意事項*/
.rule{
    width: 750px;
    margin: 0 auto;
    padding: 50px 7.5% 150px;
    color: #555; font-weight: 400;
    font-size: 28px; line-height: 1.6em;
    text-align: justify;
    background-color: #fff;

}
.rule ul li:nth-child(1){
    margin-top: 20px;
}
.rule ul li{
    list-style:decimal; margin-left: 35px;
    margin-bottom: 20px;
}
.rule a,
.rule ul li a{
    color: #000; font-weight: 500;
    border-bottom: solid 1px #000;
    margin: 0 0 0 2px;
    vertical-align: baseline;
}
.rule ul li a:hover{
    color: #333;
}


/*-------------------------
           qa
-------------------------*/
.qa{
    margin-bottom: 60px;
}
.qa .title{
    position: relative;
    color: #555; font-weight: 400;
    font-size: 38px; line-height: 1.5em;
    text-align: center;
    margin-bottom: 70px;
}
.qa .title:before{
    position: absolute; left: 38.5%; bottom: -20px;
    display: block;
    content: "";
    width: 142px; height: 1px;
    background-color: #adadad;
}

.qa .list{
    margin-bottom: 40px;
}

.qa .list .question{
    position: relative;
    color: #555; font-weight: 400;
    font-size: 38px; line-height: 55px;
    padding: 15px 0 15px 90px;
    border-bottom: solid 1px #595959;
    text-align: justify;
}
.qa .list .question:before{
    position: absolute; left: 0; top: 0;
    display:flex;
    align-items: center;
    justify-content: center;
    content: "";
    color: #333; font-weight: 300;
    text-align: center;
    width: 72px; height: 99%;
    background-color: #e8e8e8;
}

/*7
.qa .list:nth-child(8) .question{
    position: relative;
    color: #555; font-weight: 400;
    font-size: 38px; line-height: 55px;
    padding: 15px 0 15px 90px;
    border-bottom: solid 1px #595959;
}
.qa .list:nth-child(8) .question:before{
    position: absolute; left: 0; top: 0;
    display: block;
    content: "";
    color: #333; font-weight: 300;
    text-align: center;
    width: 72px; height: 140px; line-height: 140px;
    background-color: #e8e8e8;
}
*/
.qa .list .question b{
    color: #0e4fa1; 
    font-weight: 400;
    vertical-align: baseline;
}

/*1*/
.qa .style2 .question{
    position: relative;
    color: #555; font-weight: 400;
    font-size: 38px; line-height: 55px;
    padding: 15px 0 15px 90px;
    border-bottom: solid 1px #595959;
    
}

.qa .style2 .question:before{
    position: absolute; left: 0; top: 0;
    display:flex;
    align-items: center;
    justify-content: center;
    content: "";
    color: #333; font-weight: 300;
    text-align: center;
    width: 72px; height: 100%;
    background-color: #e8e8e8;
}

.qa .list:nth-child(2) .question:before{
    content: "1";
}
.qa .list:nth-child(3) .question:before{
    content: "2";
}
.qa .list:nth-child(4) .question:before{
    content: "3";
}
.qa .list:nth-child(5) .question:before{
    content: "4";
}
.qa .list:nth-child(6) .question:before{
    content: "5";
}
.qa .list:nth-child(7) .question:before{
    content: "6";
}
.qa .list:nth-child(8) .question:before{
    content: "7";
}


/**/
.answer{
    padding: 10px 0 0 90px;
}

.answer2{
    padding: 0px 0 0 72px;
}




.radio-input {
    color: #555; font-weight: 400;
    font-size: 36px; line-height: 70px;
    letter-spacing: 0.01em;
    cursor: pointer;
    margin-right: 20px;
}

/* radio btn */
input[type='radio'] {
    position: relative; top: 0px;
    display: inline-block;
    width: 50px; height: 50px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
}

input[type='radio']:before {
    position: absolute; 
    content: '';
    display: block;
    width: 70%; height: 70%;
    border-radius: 50%;
    border: 3px solid #dcdcdc;
    background-color: transparent;
    
}
input[type='radio']:after {
    position: absolute;
    content: '';
    display: block;
    width: 50%; height: 50%;
    border-radius: 50%;
    margin-top: 16%;
    margin-left: 16%;
    transition: all 0.3s linear;
/*    background: url(../images/check.jpg) no-repeat;*/
    background-size: cover;
    background-color: #555;
    opacity: 0;
}

input[type='radio']:checked:after,
label input:checked:after {
  opacity: 1;
}






/*-------------------------

         lightbox

-------------------------*/
/* ---------------------
           共用
---------------------- */
.modal{ background-color: transparent;}


/*背景底色*/
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #3d3834;
}
.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}
.modal-backdrop.in {
  opacity: 0.9;
  filter: alpha(opacity=88);
}


.modal-open .modal {
  overflow-x: auto;
  overflow-y: auto;
}
.modal .modal-content {
	position: relative;
	background-color: transparent;
	border-radius: 0px;
   /* border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  -webkit-background-clip: padding-box;
          background-clip: padding-box; */
  outline: 0;
}

.style-box .modal-dialog{
	min-width: 750px; min-height: 500px; 
    padding: 0; margin: 0 auto;
     
}

.style-box .modal-content{
    min-width:100%;
    border: none;
    background-color: transparent;
}
.style-box .modal-body{
    width: 90%; margin: 50px auto;
    background-color: #fff;
    border-radius: 10px;
}
.style-box .modal-body p{
    font-size: 32px;  color:#000;
    font-weight:400; line-height: 1.5em;
    letter-spacing: 0.04em;
    padding: 10% 7%;
}



/* 關閉按鈕 */
.style-box .close{
    position: absolute; z-index: 10; top: -30px; right: -30px;
    width: 100px; height: 100px;
    background-color: #000;
	font-size:3em;  color:#fff;
	font-family:'Noto Sans TC';  font-weight:100;
	text-shadow: none;
    opacity: 1;
    cursor: pointer;
	transition:all ease-in-out 0.2s;
    text-align: center;
    border-radius: 120px;
    line-height: 100px;
}




/*-------------------------

          footer

-------------------------*/
footer.mobile {
    position: absolute; bottom: 0px; left: 0;
    height: 100px;
    line-height: 100px;
    color: #000;
    background-color: transparent;
}
footer.mobile .logo{
    font-size: 50px;
    height: 100px;
    line-height: 100px;
}
footer .logo.icon-elle-logo {
    color: #000;
}