@charset "UTF-8";
/* CSS Document */
html, body, div, span,iframe,h1, h2, h3, h4, h5, h6, p,a, abbr,address, big, em, img,small, strong, i, ol, ul, li, form, label,
table, caption, tbody, tfoot, thead, tr, th, td,footer, header, hgroup, nav, section, video { margin: 0; padding: 0; border: 0; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-sizing: border-box; box-sizing: border-box; }
html{ -webkit-text-size-adjust: none; line-height: 1.15; -webkit-text-size-adjust: 100%;}
html, body { font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-size:16px; font-weight:400; color:#313334; line-height:1.6; letter-spacing: 1px;}
ul, li { list-style:none;}
input[type='text'],input[type='submit'],input[type='password']{ outline: none; border: none; }
input.veri {width:calc(100% - 150px);}
::-webkit-input-placeholder { color:#bbb; }
input::-moz-placeholder { color: #bbb; }
:-ms-input-placeholder{ color: #bbb;}
button{ cursor: pointer; border:transparent;font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; }
button:focus,button:active,select:focus,select:active{ outline: 0; box-shadow: none!important;}
img { border-style: none; height: auto; width: auto\9; /* ie8 */}
a { background-color: transparent; line-height: 1.6; text-decoration: none; transition-duration:.3s; -moz-transition: all .3s; -o-transition:all .3s;}
h2{ font-size: 2rem; color:#6b318e; line-height: 1.4; }
section{ width: 100%;}

.small_num{
	font-size: 12px;
	text-align: center;
	margin-top: 50px;
	color: #8a8a8a;
}

.br_mb{display: none;}
.br_mb900{display: none;}

.share_pc{display: block}
.share_m{display: none}

.smalltext{ display: inline-block; font-size: 12px; margin-top: 20px; margin-left: 30px; }
.smalltext2{ display: inline-block; font-size: 12px; text-align: left; margin-left: 20px; }
.mb{ display: none; }
.mbs{ display: block; }
.link{ color:#6b318e;}
.link:hover{ text-decoration: underline; }
.container{ width: 100%; max-width: 1200px; margin: 0 auto;}
.btn_wrap{ width: 100%; text-align: center; }
.btn_s{ /* display: inline-block; width: 125px; padding: 5px; border-radius: 8px; font-size: 16px; text-align: center; position: absolute; top: 0; right: 0; */
line-height: 30px;
    width: 19%;
    height: 48px;
    box-sizing: border-box;
    padding: 8px 15px;
    border-radius: 8px;
    margin-left: 3%;
    font-size: 15px;
    text-align: center;
    background: #e6e9ea;
    color: #313334;
    border: none;
    outline: none; }
.btn{ display: inline-block; padding:10px 7%; border-radius: 10px; font-size: 1rem;  }
.btn_l{ display: inline-block; padding:10px 10%; background: #7b4898; border-radius: 50px; font-size: 1.6rem; color: #fff; text-decoration: none;}
.btn_line { /* background: #e6e9ea; color: #313334; text-align: center; padding: 11px 18px; margin-left: 20px; */
    line-height: 30px;
    width: 130px;
    height: 48px;
    box-sizing: border-box;
    padding: 8px 15px;
    border-radius: 8px;
    margin-left: 10px;
    font-size: 15px;
    text-align: center;
    background: #e6e9ea;
    color: #313334;
    border: none;
    outline: none;}
.btn_ex{ display: inline-block; padding:10px 50px; background: #7b4898; border-radius: 50px; font-size: 1.6rem; color: #fff; text-decoration: none;}
.btn_main{ font-size: 1.8rem; color: #fff; font-weight: 500; text-shadow: 0 0 5px #666;
background: #facd0a; /* Old browsers */ background: -moz-linear-gradient(top,  #facd0a 1%, #ee780e 80%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #facd0a 1%,#ee780e 80%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #facd0a 1%,#ee780e 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#facd0a', endColorstr='#ee780e',GradientType=0 ); /* IE6-9 */
}
.btn_main:hover{
background: #f9d131; /* Old browsers */ background: -moz-linear-gradient(top,  #f9d131 0%, #f48d0e 81%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f9d131 0%,#f48d0e 81%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f9d131 0%,#f48d0e 81%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d131', endColorstr='#f48d0e',GradientType=0 ); /* IE6-9 */
}

.btn_main_b {background:none; color:#6b318e; font-size:1.8rem; font-weight:500;}

.btn_purple{ color: #fff;
background: #c199d7; /* Old browsers */background: -moz-linear-gradient(top,  #c199d7 1%, #6b318e 98%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #c199d7 1%,#6b318e 98%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #c199d7 1%,#6b318e 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c199d7', endColorstr='#6b318e',GradientType=0 ); /* IE6-9 */
}
.btn_purple:hover{
background: #b884d6; /* Old browsers */background: -moz-linear-gradient(top,  #b884d6 2%, #63218c 98%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b884d6 2%,#63218c 98%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b884d6 2%,#63218c 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b884d6', endColorstr='#63218c',GradientType=0 ); /* IE6-9 */
}
.btn_lgray{ border-radius: 8px; background: #E0E0E0; color:#000;}
.t_orange{ color: #ee780e; }
.t_purple{ color: #6b318e; }
.t_24{ font-size: 1.5rem; }
.t_30{ font-size: 1.875rem; }
.t_36{ font-size: 2.25rem; }
.back_to_top { display:none; position:fixed; right:0; bottom:0; border-radius: 10px 0 0 0; background:#63218c; width:60px; padding:10px; cursor:pointer; z-index:9999; font-size:12px; color:#fff; line-height: 1.3; text-transform:none; text-align:center; text-transform:uppercase;}
.clearfix:after{content:'';display:table;clear:both;}

.center {width: 100%; max-width: 1200px; margin: auto; position: relative;}
.cleardiv {clear: both;}

/*new-head*/
header {display:block; width:100%; height:80px; position:fixed; top:0px; background:white; z-index:99999;}
header .hd_logo {display:block; height:80px; margin-left:15px; position:relative;}
header .hd_logo img {display:block; height:80px; width:auto;}
header .mb_abot {display:none;}
header .nav {display:block; position:absolute; right:15px; top:0px; height:80px;}
header .nav .ab_logo_pc {height:80px; width:auto;}
header .nav li {display:inline-block; vertical-align:top; position:relative; height:80px; padding:0px 15px; overflow:visible;}
header .nav li a {display:block; font-size:16px; font-weight: bold; line-height:80px; text-align:center; font-family: '微軟正黑體', 'Microsoft Jhenghei', sans-serif; color:#5e318f; text-decoration:none;}
header .nav .sub {display:block; position:absolute; top:80px; left:0; padding: 15px; background:white;}
header .nav .sub li {height:40px; padding:0px 15px;}
header .nav .sub a {display:block; min-width:190px; font-size:16px; text-align:left; color:black; line-height:40px;}
header .nav .sub2 a {min-width:120px;}
header .nav .sub3 a {min-width:144px;}
header .nav .arrow {display:none;}
header #mbmnu {display:none;}

.kv{ line-height: 1;}
.kv img{ width: 100%;}
.kv_m{ display:none !important; }
#kv_slide .slick-dots li.slick-active button:before { opacity: .85; color:#7b4898;}
#kv_slide { margin-top: 80px; }

#test{ padding-bottom: 60px;}
.test_process { display: inline-block; width: 100%; padding: 5px; background:#f6f4f7; margin-bottom: 10px;}
.test_process li{ display: inline-block; font-size: 14px; color:#c5b1ca;}
.test_process li.step_now{  color:#8d56ad; font-weight: 500; }
.test_content{ position: relative; width: 100%; max-width: 1440px; min-height: 520px; margin: 0 auto; padding: 0 3% 15px 0; overflow: hidden;}
.test_content:after{ content: ''; display: inline-block; position: absolute; left: 0; width: 100%; max-width: 1440px; margin: 0 auto; height: 100%; z-index: -2; background: url('../images/pic-bg01.jpg')top left; background-repeat: no-repeat;}
.test_finish:after{ background: url('../images/pic-bg02.jpg')top left; background-repeat: no-repeat;}
.test_header{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 3%; overflow: hidden; }
.test_header div{ float: left; margin-top: 25px; }
.test_header > img{ float: left; width: 100%; max-width: 460px; }
.test_header p{ display: inline-block; padding-bottom: 10px; padding-left:10px; font-size: 1.1rem;}
.test_header .pd_pic{ max-width: 80px; margin-left: 20px; vertical-align:bottom; }
.test_wrap.card{ clear: both; }
.card{ float: right; display: inline-block; width: inherit; max-width: 800px; border: 2px solid #7b4898; border-radius: 10px; background: #fff; text-align: center; }
.question:after{ content: ''; position: absolute; top: 10px; right:-2px; width: 100%; max-width: 800px; height: 100%; background: #ccb4da; border: 2px solid #7b4898; border-radius: 10px; z-index: -1;}
.question{ position: relative; margin: 0 auto; padding: 20px; }
.test_result .btn_wrap{margin-bottom:20px; border-bottom: dashed 2px #ab7cc5; /* padding-top: 20px; */ }
.step_one h6{ font-size: 1.4rem; }
.step_one ul { width: 100%; margin-bottom: 10px; font-size: 0; }
.step_one ul li{ position: relative; display: inline-block; width: calc(94%/3); margin: 10px 0 10px 20px; vertical-align: top;}
.step_one ul li p{ top: 8px; padding: 15px; line-height: 25px; border-radius: 8px; background: #e5e5e6; color: #999; font-size: 18px; text-align: center; cursor: pointer; }
.step_one #q1 li:nth-child(2) p,.question #q1 li:nth-child(5) p,.step_one #q1 li:nth-child(6) p{ line-height: 50px }
.step_one #q1 li:nth-child(1),.question #q1 li:nth-child(4),.question #q2 li:nth-child(1){ margin-left: 0;  }
.step_one #q1 li span{ display: inline-block; font-size: 12px; line-height:1; }
.step_one .btn_wrap{ padding-top: 15px; border-top:1px dashed #7b4898; }
.step_one li.active p,.step_one li:hover p{ color: #fff;
background: #ab7cc5; /* Old browsers */ background: -moz-linear-gradient(top,  #ab7cc5 0%, #7b4898 60%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ab7cc5 0%,#7b4898 60%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ab7cc5 0%,#7b4898 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab7cc5', endColorstr='#7b4898',GradientType=0 ); /* IE6-9 */
 }

#q2 .radio_button { opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; cursor: pointer;}
#q2 .radio_tile{top: 8px; padding: 15px;line-height: 25px; border-radius: 8px; background: #e5e5e6; color: #999; font-size: 18px; text-align: center;}
#q2 .radio_button:checked + .radio_tile,#q2 li:hover .radio_tile{ color: #fff;
background: #ab7cc5; /* Old browsers */background: -moz-linear-gradient(top,  #ab7cc5 40%, #ab7cc5 40%, #7b4898 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ab7cc5 40%,#ab7cc5 40%,#7b4898 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ab7cc5 40%,#ab7cc5 40%,#7b4898 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab7cc5', endColorstr='#7b4898',GradientType=0 ); /* IE6-9 */}

#result1{ display: none; }/*****隱藏資料***/ 
#trail_form { display: none; }/*****隱藏資料***/ 
.test_send_msg{ min-height: 50vh;}
.test_send_msg h2{ padding: 3%; border-bottom: 2px solid #63218c;}
.test_result .to_trail{ display: none; padding-top: 20px; }
.test_result div .txt{ min-height: 110px; padding: 20px; margin-bottom: 15px; border-radius: 10px; text-align: left; }
.test_result div .txt img{ float: left; display: inline-block; margin-right: 10px; vertical-align: middle; }
#result1 .txt{ background: #f2fbec; }
#result2 .txt{ background: #fff5ec; }
#result3 .txt{ background: #ffe9e9; }

.test_result .re_titleline{ position: relative; }
.test_result .re_titleline .textbox{ display: inline-block; position: relative; background-color: #ab7cc5; font-size: 18px; color: #fff; padding: 3px 18px; border-radius: 30px; margin: auto; margin: 15px 0; z-index: 1; }
.test_result .re_titleline:after{ content: ''; width: 100%; position: absolute; top: 50%; left: 0; border: 1px dashed #6b318e; z-index: 0; }
.test_result .re_resulttitle{ width: 100%; padding: 15px 0 20px; }
.test_result .re_resulttitle img{ width: 100%; }

.day_meal_card{ width: 100%; margin: 10px 0; }
.day_meal_card li{ float: left; width: calc(99%/3) }
.doc_recommend{ display: block; margin: 20px 0; font-size: 15px; text-align:center;}
.doc_recommend img{  margin-right:10px; vertical-align: top; }
.doc_recommend p{ display:inline-block; text-align: left; margin-top: 15px; }
.btn_trail{ display: none; cursor: pointer; }
.menu_icon{ display: none; position: absolute; right:0; top:50%; margin-top:-12px; margin-right: 20px;}
.menu_icon span{ display: block; border: 2px solid #fff; width: 30px; margin-bottom: 8px; -webkit-transition:all .25s; transition:all .25s}

#add_line_box{ display: block;}
#add_line_box p {text-align:center;}
.discount {padding: 18px 10%; border-radius: 50px; background: #facd0a;
    background: -moz-linear-gradient(top, #facd0a 1%, #ee780e 80%);
    background: -webkit-linear-gradient(top, #facd0a 1%,#ee780e 80%);
    background: linear-gradient(to bottom, #facd0a 1%,#ee780e 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#facd0a', endColorstr='#ee780e',GradientType=0 );}
.discount .line_hand_r{ margin-right: 10px; padding-bottom: 5px; vertical-align: middle;}
.discount .line_hand_l{ margin-left: 10px; padding-bottom: 5px; vertical-align: middle;}
.discount i{ font-size: 1.8rem; color:white; text-shadow: 0 0 5px #666;}
.discount p { display: inline-block;padding-bottom: 10px; font-size: 1.7rem; font-weight: 500; color:white; text-shadow: 0 0 5px #666;}

/* 領取頁-表單 */
.trial_tbox{ width: 100%; max-width: 1000px; margin: 0 auto 20px; }
.trial_tbox img{ width: 100%; }
.p_pc{ display: block; }
.p_mb{ display: none; }
.trial_page{margin:50px 0;}
.trial_page .container{max-width: 1000px; padding-top:80px;}
.trial_page .btn_wrap{margin-top: 20px;}
.trial_notice .title{ margin-bottom:3px;  }
.trial_notice{ font-size: 12px; line-height: 1.4; color: #6b318e; text-align: left; border-bottom: 1px dashed #6b318e; padding-bottom: 20px; margin-bottom: 20px;}

.trial_notice ul li{ margin-bottom:3px; list-style: disc; list-style-position: outside; margin-left: 20px; }
.trial_notice ul li::marker{ margin-right: 3px; }

.f_title{ display: block; width: 210px; text-align: left; float: left; color:#272727;}
.f_title h3{ font-weight: normal;} 
.f_input,.checked_infor{ display: inline-block; margin-bottom: 15px; margin-left: 2%; width: calc(98% - 230px); text-align: left; vertical-align: top; position: relative; }
.f_input .required{ width: calc(100% - 150px); margin-bottom: 5px; }
.f_input .input_r{ display: inline-block; font-size: 15px; margin-right: 20px; }
.f_input .input_r input{ margin-left: 0; }
.f_input > div{ font-size: 16px;}
.f_input .data{ font-size: 1rem;}
.two_title{ position: absolute; top: 0; left: 0; }
.two_titlef{ font-size: 18px;  }
.two_small{ font-size: 0.6em; line-height: 1.8em; display: inline-block; color: #a7a7a7; }
.input_box{ padding-left: 22%; }
.input_box2{ padding-left: 22%; }
.input_2{ padding-left: calc(210px + 2%); width: 100%; margin-left: 0; margin-bottom: 5px; }
.input_3{ margin-bottom: 0px; }
.input_4{ width: calc(100% - 18px); margin-left: 2%; margin-bottom: 10px; }
.input_twzip{ width:calc(100% - 180px); display: -webkit-flex; display: -ms-flex; display: flex;display:flex; align-items: center; justify-content: space-between; }
.input_twzip_de{ width:calc(100% - 150px); display: -webkit-flex; display: -ms-flex; display: flex;display:flex; align-items: center; justify-content: space-between; }
.input_add{ width: calc(100% - 168px); }
.input_y{ display: inline-block; }
.input_check{ margin-top: 6px; }
.input_check, .input_l{ display: inline-block; }
.content_group .gil{ font-size: 15px; overflow: hidden; margin-bottom: 0px; }
.box_shop{ padding-left: calc(210px + 3%); }

.td_zip {display:block; width:100%; height:48px; box-sizing:border-box; padding: 8px 15px; margin-bottom:10px; background: #f0f1f2; font-size: 15px; border-radius: 8px; border:0px;}
.input_addin{ width: 49%; }

.content_group input[type='text'],.content_group input[type='password'],.content_group select{ height: 48px; padding: 8px 15px; background: #f1f1f1; font-size: 15px; border-radius: 8px; border:none;}
.content1 input[type='text']{ width: 80%; vertical-align:inherit;}
#trail_form select:first-child{ margin-left: 0;}
#trail_form input[type='radio'],#trail_form input[type='checkbox']{ margin-right: 5px; }
#trail_form .content1 >ul li:first-child .f_input span{ display: inline-block; width:99%; }
#trail_form .content1 >ul li:first-child .f_input{ position: relative; vertical-align: top; }
#trail_form .content1 .btn_line { margin-left: 2%; }
#twzipcode div,#twzipcode2 div{ display: inline-block; width: 25%; margin-left: 1%; vertical-align:middle;}
#twzipcode div:first-child,#twzipcode2 div:first-child{ margin-left: 0;}
#twzipcode input,#twzipcode select,#twzipcode2 input,#twzipcode2 select{ width: 100%; }
.all_address .f_input > div:nth-child(2){ margin-top:15px;}
.all_address .f_input > div:nth-child(2) input{ margin-bottom: 15px; padding: 10px;  margin-right: 1%;}
.check_right{ background-color: #f6f4f7; text-align: left; padding: 20px; border: 1px dashed #6b318e; font-size: 14px; margin: 20px 0 20px; }
.check_rught #chk_read { font-size: 16px; }

.notice{ font-size: 12px; }
.alert_t,.ver_t{ display: none; font-size: 13px; color: #ec2a2a;} /****驗證錯誤訊息***/
.policy_con{ display: block; position: relative; margin-top: 10px; background: #f6f4f7; text-align: left;}
.policy_con p { display: inline-block; vertical-align: middle; width:100%; height: 70px; padding: 5px 10px 5px 3px; overflow-y: scroll; font-size: 13px; line-height: 18px; color: #84898c; font-family: '微軟正黑體','Microsoft Jhenghei',sans-serif;}


/* loading animation */
.load_circle{ display: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background:rgba(255,255,255,.9); z-index: 999;}
.load_circle > div{ position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 100%;}
.load_circle p{ position: absolute; top: 52%; left: 46%;}
@keyframes lds-rolling {
  0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }
  100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
}
@-webkit-keyframes lds-rolling {
  0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }
  100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
}
.l_roll{ position: relative;}
.l_roll div,.lds-roll div:after { position: absolute; width: 90px; height: 90px; border: 10px solid #6b318e; border-top-color: transparent; border-radius: 50%;}
.l_roll div { top: 38px; left: 38px; -webkit-animation: lds-rolling 1s linear infinite; animation: lds-rolling 1s linear infinite;}
.l_roll div:after { -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.l_roll { position: absolute; top: 50%; left: 47%; width: 90px !important; height: 00px!important;
  -webkit-transform: translate(-35px, -35px) scale(0.35) translate(35px, 35px);transform: translate(-35px, -35px) scale(0.35) translate(35px, 35px);
}

.signin_box > div { width: 32%; display: inline-block; vertical-align: top;}
.signin_box div:not(:first-child){ margin-left: 1%;}
.signin_box > div input{ width: 100%; }
.signin_box .btn_wrap a{ display: inline-block; }
#symptom{ text-align: center; padding-bottom: 60px;
background: #f2f2f9; /* Old browsers */background: -moz-linear-gradient(top,  #f2f2f9 0%, #f8f8fc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f2f2f9 0%,#f8f8fc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f2f2f9 0%,#f8f8fc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f9', endColorstr='#f8f8fc',GradientType=0 ); /* IE6-9 */
}
#symptom h2{ padding: 60px 0; font-size: 3rem; text-align: center; }
#symptom h5{ display: inline-block; position: relative; width: auto; margin: 20px 0; font-size: 2.25rem; color:#63218c; }
#symptom h5:after{ content: ''; position: absolute; left: 0; bottom: 2px; width: 100%; height: 2px; background: #63218c; }
#symptom .container p:first-child{ margin: 20px 0; font-size: 1.5rem; }
#symptom .fa-chevron-down{ display: block; font-size: 2.25rem; color:#63218c; }
.symptom_rate{ position: relative; width: 100%; max-width: 865px; margin: 0 auto 20px; min-height: 500px; }
.symptom_rate img:first-child{ position: absolute; top:0; left: 22%;}
.symptom_rate img:nth-child(2){ position: absolute; left: 0; bottom:40px;}
.symptom_rate img:nth-child(3){ position: absolute; right: 0; bottom: 0;}
.symptom_list{ width: 100%; overflow: hidden; text-align: center; }
.symptom_list li:not(:first-child){ margin-left: .5%; }
.symptom_list li{ display: inline-block; position: relative; vertical-align: top;}
.symptom_list li img{ width: 100%; max-width: 225px; }
.symptom_list p{ position: absolute; top:80px; left: 100px; max-width:100px; font-size: 1.2rem; font-weight: 500; color:#63218c; text-align: left;}
.symptom_list span{ display: block; padding-top: 4px; font-size:14px; line-height: 1.4; color: #000; border-top: 3px solid #63218c; }
.symptom_smalltext { width: 95%; max-width: 1100px; font-size: 12px;  text-align: left; margin: 20px auto 0; }


#feature{ display: inline-block; padding-bottom: 10px; margin-bottom:-50px; text-align: center;
background: #6b318e; /* Old browsers */background: -moz-linear-gradient(top,  #6b318e 0%, #c199d7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #6b318e 0%,#c199d7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #6b318e 0%,#c199d7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b318e', endColorstr='#c199d7',GradientType=0 ); /* IE6-9 */
}
#feature .title{ position: relative; transform: translateY(-50%);}
#feature > div > div{ padding:2%; margin-top: -120px; margin-bottom: 140px; background: #fff; border-radius: 20px; }
#feature h2{ margin-bottom: 5px; font-size:2.4rem; line-height: 2rem; padding-bottom: 20px; }


/* 5好 */
.ingridient ul > li{ display: inline-block; width: calc(99%/5); text-align: center; vertical-align: top;}
.ingridient ul { width: 100%; font-size: 0;}

.ingridient ul span{ display: inline-block; padding: 10px 0; font-size: 1rem; color: #000;}
.ingridient li p{ height: 108px; padding: 10px 25px; font-size: 1.3rem; line-height: 1.4em; font-weight: 500; color: #fff; display: flex; align-items: center; justify-content: center;}
.ingridient li p .feature_purple{ font-size: 1.3rem; line-height: 1.4em; font-weight: 500; color: #fff;  }
.ingridient li:first-child p{
    /*background: url(../images/in-bg1.png) repeat-x;*/
    background: #ffbd2f; /* Old browsers */ background: -moz-linear-gradient(top,  #ffbd2f 1%, #ee780e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffbd2f 1%,#ee780e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffbd2f 1% 40%,#ee780e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbd2f', endColorstr='#ee780e',GradientType=0 ); /* IE6-9 */
}
.ingridient li:nth-child(2) p{ 
    /*background: url(../images/in-bg2.png) repeat-x;*/
    background: #ee7411; /* Old browsers */ background: -moz-linear-gradient(top,  #ee7411 1%, #e53808 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ee7411 1%,#e53808 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ee7411 1% 40%,#e53808 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee7411', endColorstr='#e53808',GradientType=0 ); /* IE6-9 */
}
.ingridient li:nth-child(3) p{
    /*background: url(../images/in-bg3.png) repeat-x;*/
    background: #db3035; /* Old browsers */ background: -moz-linear-gradient(top,  #db3035 1%, #9f080a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #db3035 1%,#9f080a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #db3035 1% 40%,#9f080a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db3035', endColorstr='#9f080a',GradientType=0 ); /* IE6-9 */
}
.ingridient li:nth-child(4) p{
    /*background: url(../images/in-bg4.png) repeat-x;*/
    background: #850d86; /* Old browsers */ background: -moz-linear-gradient(top,  #850d86 1%, #460747 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #850d86 1%,#460747 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #850d86 1% 40%,#460747 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#850d86', endColorstr='#460747',GradientType=0 ); /* IE6-9 */
}
.ingridient li:nth-child(5) p{
    background: url(../images/in-bg5.png) repeat-x;
    background: #8c59a7; /* Old browsers */ background: -moz-linear-gradient(top,  #8c59a7 1%, #4f2a78 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #8c59a7 1%,#4f2a78 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #8c59a7 1% 40%,#4f2a78 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c59a7', endColorstr='#4f2a78',GradientType=0 ); /* IE6-9 */
}

.note{ font-size: 12px; vertical-align: top}
.note02{ font-size: 12px; line-height: 1; vertical-align: top; margin-left: -5px;}
.ingridient ul .note2{ font-size: 12px; line-height: 1; vertical-align: top ;margin-top: -5px;}

.adventage h5{ font-size: 2rem; font-weight: 400; color:#63218c;}
.adventage > div{ display: inline-block; width: calc(96%/3); vertical-align: top; }
.adventage > div:not(first-child){ margin-right: 1%; }
.adventage > div ul{ padding: 10px 5px; text-align: left; }
.adventage > div ul li{ font-size: 15px; margin-bottom:5px; letter-spacing: 0; }
.adventage > div ul i{ color: #da3137; }
.adventage > div p{ padding: 5px; width: 100%; border:2px solid #f3cc47; border-radius: 10px; font-size: 1.3rem; color: #000;
background: #ffbd2f; /* Old browsers */ background: -moz-linear-gradient(top,  #ffbd2f 1%, #facd0a 40%, #ee780e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffbd2f 1%,#facd0a 40%,#ee780e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffbd2f 1%,#facd0a 40%,#ee780e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbd2f', endColorstr='#ee780e',GradientType=0 ); /* IE6-9 */
}

.adventage .advantage_five{font-size: 4rem; color:#6b318e;}

/* QRcode頁面 */
#addline_qr {display:block; position:relative; padding:100px 0px 40px 0px; background:#F8F8FC; text-align: center;}
#addline_qr p {font-size:20px; line-height:30px; text-align:center;}
#addline_qr p a {color:#6B318E; border-bottom:1px solid #6B318E;}
#addline_qr p img {margin-top:20px;}

/* 兌換頁面 */
#exchange{ text-align: center; background-color: #f8f8fc; padding: 60px 10px 60px; /*margin-top: 80px;*/ }
#exchan_step1{ display: block; }
.exchan_title{ font-size: 2.4rem; line-height: 1.2; font-weight: 500; color: #8b58a9; margin-bottom: 10px; }
.exchan_title_wrong{ margin-bottom: 50px; }
.exchan_in{ margin: 30px 0;}
.exchan_input{ margin-bottom: 30px; }
.exchan_pic{ max-width: 500px; margin: 0 auto 20px; }
.exchan_pic img{ width: 100%; }
.exchan_input .alert_t{ margin-top: 10px; }
.exchan_input input{ font-size: 20px; width: 300px; text-align: center; padding: 20px; border-radius: 8px; border: 1px dashed #8b58a9; }
.exchan_small{ color: #666; padding: 0 30px; }
#exchan_step2{ display: none; }/*****隱藏資料***/ 
#exchan_step3{ display: none; }/*****隱藏資料***/ 
.exchan_final{ font-size: 1.8rem; line-height: 1.3;  color: #ee780e; margin-top: 20px; }
.exchan_subtext{ color: #666; padding: 0 20px; margin-bottom: 30px; }

/*new-footer*/
footer {display:block; width:100%; position:relative; background:#5e318f; box-sizing:border-box; padding:50px; }

footer .ft_abot {display:block; float:left; position:relative;}
footer .ft_abot img {width:100px; height:auto;}
footer .ft_mid {display:block; float:left; position:relative; margin-left:100px; padding-top:5px;}
footer .ft_sns {display:block; float:right; position:relative;}
footer .ft_sns a {display:inline-block; margin-left:6px;}
footer .ft_sns a img {width:35px; height:auto;}

footer a{ text-decoration: underline; }
footer p, footer a {font-size:14px; line-height:24px; color:white; font-family: '微軟正黑體', 'Microsoft Jhenghei', sans-serif;}
footer p {margin-bottom:15px;}

footer p.copy {font-size:12px; line-height:18px; margin-top:30px;}

footer .ft_lks {position: fixed; right: 80px; bottom: 0px;}
footer .ft_lks a { font-size:16px; font-weight:bold; font-family: '微軟正黑體', 'Microsoft Jhenghei', sans-serif; display: inline-block; vertical-align: bottom; line-height: 1rem; color: white; padding: 17px 20px; text-decoration: none; border-top-left-radius: 10px;border-top-right-radius: 10px;}
footer .ft_lks a:hover {padding:24px 20px;}
footer .ft_lks a i {margin: 0px 10px;}

footer .ft_lks a:first-child {
  background: #69488e;
  background: -webkit-gradient(linear, left top, left bottom, from(#69488e), to(#5e318f));
  background: linear-gradient(to bottom, #69488e 0%, #5e318f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#69488e', endColorstr='#5e318f', GradientType=0);
}
footer .ft_lks a:nth-child(2) {
  background: #238ac3;
  background: -webkit-gradient(linear, left top, left bottom, from(#238ac3), to(#1d709f));
  background: linear-gradient(to bottom, #238ac3 0%, #1d709f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#238ac3', endColorstr='#1d709f', GradientType=0);
}
footer .ft_lks a:nth-child(3) {
  background: #ea6800;
  background: -webkit-gradient(linear, left top, left bottom, from(#ea6800), to(#bd4304));
  background: linear-gradient(to bottom, #ea6800 0%, #bd4304 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ea6800', endColorstr='#bd4304', GradientType=0);
}



/* 健康新知 */
.yt_wrap{ padding: 3%; margin-top: 80px; background: #c199d7; background: -moz-linear-gradient(top,  #c199d7 1%, #6b318e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top,  #c199d7 1%,#6b318e 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  #c199d7 1%,#6b318e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c199d7', endColorstr='#6b318e',GradientType=0 ); /* IE6-9 */}
.yt_box{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 90%; margin: 0 auto;} 
.yt_box iframe, .yt_box object, .yt_box embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.knows_list_wrap{ padding: 3%; background: #f2f2f9; overflow: hidden;}
.knows_list{ width: 100%; max-width:1200px; margin: 0 auto;}
.knows_list li{ float: left; width: calc(94%/3); margin: 0 1% 2%; overflow: hidden;}
.knows_list li a{ position: relative; width: 100%; }
.knows_list li a:hover img{ transform: scale(1.3); transition-duration:.8s; -moz-transition: all .8s; -o-transition:all .8s; }
.knows_list li a img{ display: block; width: 100%; }
.knows_list li a p{ width: 100%; background: #fff; color: #7b4898; padding: 10px; text-align: center; box-shadow:  -1px 0 13px #aba0bd;}
.knows_list li a:hover p{ background: #7b4898; color: #fff; transition-duration:.3s; -moz-transition: all .3s; -o-transition:all .3s;  }

#wrap{ margin-top: 50px; }
.wrap{ margin-top: 80px; }
.qa_wrap{ margin-top: 80px; }
.know6,know1,.know2,.know3,.know4,.know5{ margin-top: 80px; }
.know_wrap{ width: 100%; max-width: 960px; margin: 80px auto 0; overflow: hidden;}
.know_wrap .content { display: inline-block; padding: 0 2%; }
.top_pic{ margin-bottom: 20px; }
.top_pic img{ display: block; width: 100%; max-width: 960px; margin: 0 auto; }
.know_wrap .fword { float: left; font-size: 3rem; color: #593694; line-height: 1.2;}
.know_wrap p{ margin-bottom: 20px; font-size: 1rem; line-height: 1.8; }
.know_wrap .list li{ list-style: inside; list-style-type: disc; font-size: 1.2rem; color: #7D5FA8;}
.know_wrap .list li b { display: inline-block; color: #7D5FA8;}


.know_wrap .txt_mtop{ margin-top: -26px; }
.know_wrap h4 { padding:10px 0; font-size: 22px; font-weight: bold; color: #5f3f99; }
.know_wrap h5 { font-size: 18px; font-weight: 500; color: #522E90;}
.advice_list { margin-top: 20px; max-width: 960px; margin:0 auto;  }
.advice_list li { display: inline-block; padding: 30px 3%; margin-bottom: 20px; background: #fff;}
.advice_list li img{ float: left; width: 33%; margin-right: 2%; }
.advice_list li .advice_pic{ width: 100%; margin-right: 2%; }
.know_wrap .advice_list .txt{ width:65%; }
.know1 { margin-bottom: 50px; }
.know1 .content{ padding: 3%;}
.know1_video{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } 
.know1_video iframe, .know1_video object, .know1_video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.know1_listtitle{ display: inline-block; color: #7D5FA8; width: 140px; }
.know1_listtxt { display: inline-block; width: 80%; font-size: 17px;  color: #313334; vertical-align: top;}

.advice_list h2,.know3 h2,.know4 h2,.know6 h2{ margin-bottom: 10px; font-size: 1.2rem; }
.know2 h4{ padding-bottom: 10px; margin-bottom: 20px; font-size: 1.4rem; color:#7351A1; text-align: center; border-bottom: 2px dashed #bfb9c7; }
.know2,.know3,.know4,.know5,.know6{ background: #f2f2f9; padding: 3% 0; overflow: hidden;}
.know3 h4{ padding-bottom: 10px; margin-bottom: 20px; font-size: 1.5rem; color:#7351A1; text-align: center; border-bottom: 2px dashed #bfb9c7; }
.know3 .know_wrap > div:first-child{ float: left; width: 59%; padding: 3%; }
.know3 .know_wrap div:nth-child(2) div{ float: left; width: 58%; padding: 0; margin-right: 2%; }
.know3 .know_wrap img{ width:40%; max-width: 359px; }
.know3 .need_form{ width: 100%; padding: 3%; border-top: 2px solid #7351A1; overflow: hidden; }
.know3 .need_box{ padding: 20px 15px; }

.know3 .five_form{ width: 100%; padding: 20px 5px; border-top: 2px solid #7351A1; overflow: hidden; }
.know3 .five_form .fpic{ width: 100%; max-width: unset; }
.know3 .five_text p{ color: #fff; margin-bottom: 0; padding: 20px; border-radius: 20px; background-color: #9a7cc3;}
.know3 .need_text { padding: 0 15px; }
.know3 .need_text ol li{ list-style-type: decimal; list-style-position: inside; }
.know3 .need_text ol { margin-bottom: 20px }
.know3 .need_h2 { margin-bottom: 5px; margin-top: 10px; font-size: 16px;}

.know3 .adventage { text-align: center;}
.know3 .adventage h5{ font-size: 2rem; font-weight: 400; color:#63218c; text-align: center;}
.know3 .adventage h2{ margin-bottom: 5px; font-size:2.4rem; line-height: 2rem; text-align: center;}
.know3 .adventage > div{ display: inline-block; width: calc(95%/3); vertical-align: top; }
.know3 .adventage > div:not(first-child){ margin-right: 1%; }
.know3 .adventage > div ul{ padding: 10px 0; text-align: left; }
.know3 .adventage > div ul li{ margin-bottom:10px; }
.know3 .adventage > div ul i{ color: #da3137; }
.know3 .adventage > div p{ padding: 5px; width: 100%; border:2px solid #f3cc47; border-radius: 10px; font-size: 1.3rem; color: #000;
background: #ffbd2f; /* Old browsers */ background: -moz-linear-gradient(top,  #ffbd2f 1%, #facd0a 40%, #ee780e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffbd2f 1%,#facd0a 40%,#ee780e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffbd2f 1%,#facd0a 40%,#ee780e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbd2f', endColorstr='#ee780e',GradientType=0 ); /* IE6-9 */
}



.know4 h4{ padding-bottom: 10px; margin-bottom: 20px; font-size: 1.4rem; color:#7351A1; text-align: center; border-bottom: 2px dashed #bfb9c7; }
.know4 .know_wrap img{ width: 40%; }
.know4 .know4_in ul{ margin-bottom: 20px; list-style-type: disc; list-style-position: inside; }
.know4 .know4_in li{ list-style-type: disc; list-style-position: inside; }
.know4 .know4_in ol li{ list-style-type: decimal; list-style-position: inside; }
.know4 .know4_line{ background-color:#7351A1; width: 100%; height: 2px; margin-bottom: 20px;}
.know4 .know4_section{ padding: 20px; }
.know4 .know4_box{ display: flex; align-items:flex-start; }
.know4 .know4_rbox{ margin-left: 30px; }
.know4 .stitle{ color: #63218c; }

.know5 h4{ padding-bottom: 10px; font-size: 1.4rem; color:#7351A1; text-align: center; border-bottom: 2px dashed #bfb9c7; }
.situation-list { padding: 3%; width: 100%; max-width: 960px; margin: 0 auto; }
.situation-list .content{ display: none; padding: 2%; background: #fff; border: 1px solid #7351A1; margin-top: -1px; }
.situation-list li{ margin-bottom: 20px; }
.situation-list ul li{ list-style-type: disc; list-style-position: inside; }
.situation-list .content ol li{ list-style-type: decimal; list-style-position: inside; }
.situation-list a{ display: block; position: relative; width: 100%; margin-top: 5px; padding: 10px; border: 1px solid #7351A1; border-radius:10px 10px 0 0; background: #fff;}
.situation-list a:hover{ background:#7351A1;}
.situation-list a:hover h2,.situation-list a:hover i{ color:#fff; }
.situation-list i{ position: absolute; right: 10px; top: 10px; width: auto; font-size: 30px; color:#7351A1; }
.know5 h2{ width: 93%; text-align: left; font-size: 1.2rem; }

.know6 h4{ padding-bottom: 10px; margin-bottom: 20px; font-size: 1.5rem; color:#7351A1; text-align: center; border-bottom: 2px dashed #bfb9c7; }
.know6 .know_wrap img{ width:100%;}
.know6 .know_wrap .know6_pic{ padding-top: 10px;}
.know6 .know6_form{ width: 100%; padding: 4%; overflow: hidden; }
.know6 .know6_line{ background-color:#7351A1; width: 100%; height: 2px; }
.know6 .text_bg{ color: #ffffff; background-color: #7569ad; padding: 10px; margin-bottom: 0; }
.know6 .pink_box{ color: #ea64ae; margin-left: 13px;}
.know6 .txt_mtop{ margin-bottom: 30px; }



/* 心得分享 */
.share_wrap{ width: 100%; background: #ffdede; padding: 3% 3% 6% 3%; overflow: hidden;}
.share_wrap h4{ padding-bottom: 10px; font-size: 2rem; color:#7351A1; text-align: center;}
.share_wrap h4 i{ color:#ff8080; }
.share_wrap h6{ margin-bottom: 15px; padding-bottom: 10px; border-bottom: dashed 2px #ffdede; font-size: 1.3rem; color: #7351A1; }
.share_box{ position: relative; width: calc(25% - 20px); margin:0 10px 20px; padding: 20px 20px 50px 20px; background: #fff; box-shadow: 0 3px 7px #f1c1c1; border-radius: 10px; }
.share_box2{ position: relative; width: calc(50% - 20px); margin:0 10px 20px; padding: 20px 20px 50px 20px; background: #fff; box-shadow: 0 3px 7px #f1c1c1; border-radius: 10px; }
.share_box3{ position: relative; width: calc(100% - 20px); margin:0 10px 20px; padding: 20px 20px 50px 20px; background: #fff; box-shadow: 0 3px 7px #f1c1c1; border-radius: 10px; }
.share_wrap .share_fbox{ display: flex; flex-wrap: wrap; }
.top_share  h6{font-size: 1.5rem;}
.share_box .brief{ position: relative;}
.index-share .btn_ex{display: block;margin: 30px auto; width: 300px; padding: 10px 30px; font-size: 20px;text-align: center;}
.top_share img{ float: left; max-width:235px; width: 45%; margin-right: 15px;}
.share_box a{ position: absolute; right: 0; bottom: -30px; margin-left: 5px; padding: 2px 8px; font-size: 13px; color: #7351A1; border-radius: 10px; border: solid 1px #7351A1;}
.share_box a:hover{ background:#7351A1; color: #fff;}
.share_box2 a{ position: absolute; right: 20px; bottom: 20px; margin-left: 5px; padding: 2px 8px; font-size: 13px; color: #7351A1; border-radius: 10px; border: solid 1px #7351A1;}
.share_box2 a:hover{ background:#7351A1; color: #fff;}
.share_box3 a{ position: absolute; right: 20px; bottom: 20px; margin-left: 5px; padding: 2px 8px; font-size: 13px; color: #7351A1; border-radius: 10px; border: solid 1px #7351A1;}
.share_box3 a:hover{ background:#7351A1; color: #fff;}
.share_box3 img{ width: 100%; }
.share_page .txt{ max-width: 640px; max-height: 80vh; border:5px solid #ff8080; }
.share_page .txt h6{ margin-bottom: 10px; font-size: 1.3rem; color: #7351A1;}
.share_page .txt p{ margin-bottom: 10px; line-height: 1.8; }
.share_page .txt ul li{list-style:disc;margin:0 0 10px 20px;}
.share_page .txt ul li span{ font-weight: bold; color:#ff8080;  }
.share_page .txt.txt2{max-width: 850px; }
.share_page .ininlist{ list-style: disc; list-style-position: inside; }
.share_link{ margin-top: 20px; font-size: 10px }
.share_from{ float: left; color: #999; font-size: 14px; margin-top: 20px; margin-left: 5px; }
.share_doctor{ width: 100%; }
.share_page .doctor_txt{ max-width: 80vw; max-height: 80vh; border:5px solid #ff8080; }
.share_doctor_in { padding: 0 10px; }
.share_doctor_ft{ padding: 10px; background: #69358c; color: #ffffff; font-size: 12px; }

.share_article img{width: 100%;}
.share_article .row{display:flex;}
.share_article .row .col-1{ flex:1; padding:10px}
.share_article h3 {font-size: 20px;color:#f5b12a;}
.share_article h3.sec {font-size: 18px;color:#f5b12a;font-weight: normal;}
.share_article p{font-size: 16px; text-indent: 32px;line-height: 2;}
.share_article p span{color:#693686;font-weight: bold;}
.share_article mark{background:#f4da8e;	padding: 2px 1px;}
.share_article sup{font-size: 8px;}
.share_article ol{margin-left: 24px;}
.share_article li{font-size: 16px; list-style: decimal;line-height: 2;}
.share_article li span{color:#693686;font-weight: bold;margin-right: 8px;}

.share_article .sp_block{margin-top: 15px;border:1px solid #693686;border-radius: 20px;padding:15px}
.share_article .sp_block h4{font-size: 18px;color:#693686;text-align: center;}
.share_article .type h4{font-size: 16px;text-align: left;}
.share_article .type p{text-indent: 0px;font-size: 14px;line-height: 1.5;}
.share_article .type p span{font-size: 16px;}
.share_article .type2 h4{color:#f5b12a;}
.share_article .type2 p{text-indent: 0px;}
.share_article .type2 p span{color:#f5b12a;}
.share_article .type img{width: 18px; display: inline-block; vertical-align: middle;}


/* 飲用時機 */
.recipe_wrap{ padding: 3% 3% 6% 3%; background:#7351A1; }
.recipe_wrap h4{ padding-bottom: 10px; font-size: 2rem; color:#fff; text-align: center;}
.recipe_list{ font-size: 0; }
.recipe_list li{ display: inline-block; width: calc(91%/4); border:solid 1px #f1eff3; margin: 1%; font-size: 1rem; text-align: center; }
.recipe_wrap .tabs_wrap{ width: 100%; max-width: 960px; margin:0 auto; }
.recipe_wrap .tab_content{ background: #fff; padding: 2%; margin-top: 15px; border-radius: 15px; box-shadow:0 5px 10px #523679; }
.recipe_wrap .tab_content img{ display: inline-block; width: 100%; }

/* QA */
.extract{ border-top: dashed 1px #d8d8d8; padding-top: 10px;font-size: 12px; color: #888; margin-top: 10px; }
.qa_wrap{ padding: 3% 3% 6% 3%; background:#f2f2f9;}
.qa_wrap h4{ padding-bottom: 10px; font-size: 2rem; color:#7351A1; text-align: center;}
.tabs_wrap{ width: 100%; max-width: 960px; margin:0 auto; }
.tab { overflow: hidden; text-align: center; font-size: 0;}
.tab li{display: inline-block; padding: 15px 3%; background:#bdb7c5; border-radius: 10px; font-size: 1.2rem; color: #fff; cursor: pointer; }
.tab li:not(first-child){ margin-right: 10px; }
.tab li:hover,.tab li.now_tab{ background:#ee780e; color:#fff; }
.qa_wrap .content{ width: 100%; max-width: 960px; margin: 0 auto; }

.qa_wrap .tab_content ul li{ width: 100%; margin-top: 20px; }
.qa_wrap .tab_content ul li:hover a,.qa_wrap .tab_content ul a.tab_open{ background:#7351A1; color: #fff; }
.qa_wrap .tab_content ul a{ position: relative; display: inline-block; width: 100%; padding: 10px; border-bottom:3px solid #7351A1; border-radius: 10px 10px 0 0; font-size: 1.1rem; font-weight: 300; color: #7351A1; line-height: 1;}
.qa_wrap .tab_content ul i{ position: absolute; top:20px; right:20px;font-size: 1.5rem;}
.qa_wrap .tab_content ul h3{ font-weight: 300; padding-right: 30px; }
.qa_wrap .tab_content ul h3 span{ display: inline-block; padding: 10px 13px; margin-right: 10px; background:#7351A1; border-radius:100px; color: #fff; font-size: 15px; line-height: 1}
.qa_wrap .tab_content ul li:hover h3 span,.qa_wrap .tab_content ul a.tab_open h3 span{ background: #fff; color:#7351A1;}

.qa_wrap .tab_content ul .content{ display: none; padding: 3%; margin-top: -1px; background: #fff; border:1px solid #7351A1; } 
.qa_wrap .tab_content ul .content ul li { list-style-type: disc; list-style-position: inside; }
.qa_wrap .tab_content .content p{ margin-bottom: 10px; }
.qa_wrap .tab_content .content ul,.tab_content .content ol{ margin-bottom: 20px; }
.qa_wrap .tab_content .content ol li{ list-style-type: decimal; list-style-position: inside; }

.index-share{ background: #f7f7fc; }
.index-share .share_fbox{ width: 100%; max-width: 1200px; margin: auto; }
.index-share .share_box2{ background: #f7f7fc; box-shadow: 0 3px 7px #b7a9bf; }

/* 兌換成功頁面 */
.success_page { padding:50px 0; }
.success_page .re_thank { padding: 50px 0;}
.success_page .re_thank div { font-size: 30px; color: #7b4898; text-align: center;}
.success_page .re_thank .thank_box{ width: 95%; margin: auto; margin-bottom: 30px; }
.success_page .re_thank .thank_box img{ width: 100%; }
.success_bt { display: block; width: 420px; text-align: center; margin: 30px auto 0; }

.exchange_page{
	padding-top: 80px	
}
/* fancybox */
.fancybox-inner{top:100px !important}



/* Mobile */
@media screen and (max-width:1300px) { 
	#kv_slide{ margin-top: 50px; }

	/* fancybox */
	.fancybox-inner{top:70px !important}
	
}

@media screen and (min-width:1081px) { 
	header nav{ display: block; }
}
@media screen and (max-width:1280px) { 
	.test_content:after{ background-position: -12% 0; background-size: 50%;}
}
@media screen and (max-width:1200px) {
	header .logo img {width:180px; height:auto;} 
	header nav {padding:0px 20px;}
	header nav li a {padding:10px;}
}

@media screen and (max-width:1450px) {
	.share_box{ width: calc(50% - 20px); }
}

@media screen and (max-width:1080px) { 
	.menu_icon{ display:inline; cursor:pointer; top:30px; padding: 10px 10px 2px; margin-right: 25px; background: #7b4898; z-index: 5;}
	.menu_icon.active nav{ position: fixed;}
	.menu_icon.active .first{ transform: rotate(45deg) translate(7.4px, 7.4px); border-color: #fff; box-shadow: none;}
	.menu_icon.active .second{ width: 0%; opacity: 0; border-color: #666; box-shadow: none;}
	.menu_icon.active .third{ transform: rotate(-45deg) translate(9.4px, -9.4px); border-color: #fff; box-shadow: none;}
	
	.test_header> img{ max-width: 390px;}
	.container,.test_header{ max-width: 100%; padding: 3%; }
	.test_header p{ font-size: 1rem; }
	.test_header .pd_pic { margin: 0px 0 0 20px;}

	.ingridient > ul > li { width: calc(99.6%/3);}
	.adventage > div { width: calc(96%/2);}
	.know3 .adventage > div { width: calc(95%/2);}

	.share_page .doctor_txt{ max-width: 80vw; }
	.share_page .doctor_txt{ padding: 20px; }
	
	.exchange_page{
	padding: 50px 0 0 0;	
}
}

@media screen and (max-width:1000px) { 
    .trial_tbox{ padding: 0 3%; }
}

@media screen and (max-width:960px) { 
	.kv_dec{ display: none !important; }
	.kv_m{ display: block !important; }
	
	.test_content{ max-width: 100%; padding: 0 3%; overflow: inherit; text-align: center;}
	.test_content:after{ display: none; }
	.test_header{ padding: 3% 3% 10px; text-align: center; }
	.test_header div{ display: block; width: 100%; margin-top: 0; }
	.test_header > img{ float: none; display: block; margin: 0 auto;}
	.test_header p{ padding-top: 15px; padding-bottom: 15px; text-align: left;}
	.test_header .pd_pic{ float: none; max-width: 60px; margin-bottom: 20px; }
	.card{ float: none; width: 100%; max-width: 100%; }
	.question:after{ max-width: 100%; }
	.symptom_rate{ min-height: 450px;}
	.day_meal_card li { float: left;width: 33.3%;}
	.day_meal_card li img{ width: 100%; max-width: 235px; }

	footer { padding:30px 0px 80px 0px; font-size:12px; line-height:28px;}

	.bg_share{ padding: 3% }
	.share_txt{ max-width: 100%; padding: 30% 3% 3%; background-size: contain;}
	.share_txt>img{ width: 100%; }
	.smalltext{ text-align: left; width: 100%; max-width: 420px; margin: 0 calc(50vw - 220px) 20px; }
}

@media screen and (max-width:1100px) { 
	#symptom{ padding-bottom: 0; }
}


@media screen and (max-width:1280px) {
	.qa_wrap{ margin-top: 50px; }
	#warp{ margin-top: 50px; }
	.warp{ margin-top: 50px; }
	.know_wrap{ margin: 50px auto 0; }
	.know6,.know2,.know3,.know4,.know5{ margin-top: 50px; }
	.know1{ margin-bottom: 50px; }

	header {height:50px; background:white; width:100%;}

	header .nav {display:none; background:white; width:100vw; height:100vh; top:50px; right:0px; padding-top:25px;}
	header .nav li {display:block; width:100%; position:relative; padding:0px; height:auto;}
	header .nav li a {display:block; width:80%; margin:auto; font-size:18px; line-height:60px; text-align:left; border-bottom:1px solid #e9e9e9;}

	header .nav .sub {position:relative; top:0; left:0; transform:translate(0,0); padding:0px; width:100%;}
	header .nav .sub li {height:auto; padding:0px;}
	header .nav .sub a {height:auto; line-height:30px; border-bottom:0px; padding:8px 0px;}

	header .hd_logo img {height:50px; width:auto;}

	header .mb_abot {display:block; position:absolute; top:13px; right:60px;}
	header .mb_abot img {height:25px; width:auto;}

	header .nav .ablogopc {display:none;}
  
	header .nav .arrow {
		width: 15px;
		height: 15px;
		display: inline-block;
		position: absolute;
		top:22px;
		right:10%;
	}

	header .nav .arrow span {
		top: 8px;
		position: absolute;
		width: 9px;
		height: 2px;
		background-color: #5e318f;
		display: inline-block;
		-webkit-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	header .nav .arrow span:first-of-type {
		left: 0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	header .nav .arrow span:last-of-type {
		right: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	header .nav .arrow.active span:first-of-type {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	header .nav .arrow.active span:last-of-type {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	header #mbmnu {display:block; position:absolute; right:17px; top:13px; width:30px; height:25px;}
	header #mbmnu span {display:block; width:30px; height:3px; background:#5e318f;}
	header #mbmnu span:first-child {position:absolute; top:2px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
	header #mbmnu span:nth-child(2) {position:absolute; top:11px; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
	header #mbmnu span:nth-child(3) {position:absolute; top:20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

	header #mbmnu.open span:first-child {top:13px; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
	header #mbmnu.open span:nth-child(2) {display:none;}
	header #mbmnu.open span:nth-child(3) {top:13px; -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
	header .nav .ablogopc {display: none;} 
	.yt_wrap{ margin-top: 50px; }

}

@media screen and (max-width:921px) {
	.know6_form .text_bottom{ padding-bottom: 38px; }
}

@media screen and (max-width:920px) {
	.know1_listtxt{ display: block; width: unset; margin-left: 28px; margin-bottom: 10px; }
}

@media screen and (max-width:920px) {
    .br_mb900{display: block;}
}

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


	footer {padding:20px 20px 60px 20px;}
	footer .ft_abot, footer .ft_mid {float:none;}
	footer .ft_mid {margin-left:0px; margin-top:15px;}
	footer .ft_sns {float:none; position:absolute; right:0px; top:0px;}
	footer p, footer a {font-size:12px; line-height:18px;}

	footer .ft_lks {left: 0px; width: 100vw;}
	footer .ft_lks a {float: left; width: calc(100vw/3); font-size:16px; line-height:16px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 17px 0px; text-align:center;}
    footer .ft_lks a:hover {padding: 15px 0px;}
	footer .ft_lks a:hover {padding: 15px 0px;}
	footer .ft_lks a i {display: none;}
}


@media screen and (max-width:790px) {
	#symptom h2{ font-size: 2.4rem }
	.doc_recommend p{ font-size: 14px;}
	.symptom_rate img:first-child,.symptom_rate img:nth-child(2),.symptom_rate img:nth-child(3){ position: static; }
	.step_one ul li{ width: calc(92%/3);}
	.signin_box > div{ width: 48%; }
	.signin_box .btn_wrap{ width: 100%; margin: 10px 0 0; }
	
	.top_share {max-width:100%;}
	.share_box {width:95%; float:none; margin:20px auto;}
	.share_box2 {width:95%; float:none; margin:20px auto;}

	.share_txt a { display: inline-block; max-width: 48%; position: static; }
	.share_tops { width:100%;}
	.share_t1{ margin-left: 0; }
	
	.back_to_top {width:50px;}

	#feature > div > div{ margin-top: -100px; }
}

@media screen and (max-width:768px) {
	.share_page .txt{max-width: none; width:95%;padding:44px 20px}
	.share_article .row{flex-wrap:wrap;}
	.share_article .row .col-1{ flex:none;width: 100%;padding:0}

    /* 領取頁-表單 */
    .trial_tbox{ width: 94%; margin: 0 auto 20px; padding: 0; }
    .p_pc{ display: none; }
    .p_mb{ display: block; }
    .trial_page{margin:20px 0;}
    .trial_page .btn_wrap{margin-top: 10px;}

	.f_title { float: none; font-size: 16px; width: 100%;  }
	.f_title h3{ display: inline-block;font-weight: normal;border-radius:3px;padding:2px 4px; background:#6b318e;color:#fff;}
	.f_input { width: 100%; display: block; margin: 0; }
	.f_input .input_r{margin-right: 10px;}
	.f_input .required{ width: 100%; }
	.btn_line { font-size: 14px; /* padding: 13px 18px; position: absolute; right: 0; */
	display: block;
    width: 130px;
    margin: 0px 0px 10px 0px; }

	.two_br{ display: none; }
	.two_title{ position: relative; width: 100%; }

    .content_group .gil{ margin-bottom:10px; }
	.input_2{ padding-left:0; width: 100%; margin-left: 0; margin-bottom: 5px; }
	.input_3{ width: calc(100% - 18px);}
    .input_4{ margin-left: 0; width: 100%;}
	.input_twzip{ width: 100%; display: block; margin-bottom: 0; }
    .input_twzip_de{ width: 100%; display: block; margin-bottom: 0; }
	.input_add{ width: 100%; }
    .input_box2{ padding-left: 0; }
    .input_check{ vertical-align: top; }
    .input_l{width: calc(100% - 4rem);}
	.td_zip{ width: 100%; margin-bottom: 5px; }
    .input_addin{ width: 100%; }
	.success_page .re_thank {padding: 10px;}
	.success_page .re_thank div { font-size:20px;}
    .box_shop{ padding-left: 0; }
    .add_group{ margin-left: 20px; }

	.trial_notice .title{ margin-bottom:10px; }
    .trial_notice ul li{ margin-bottom:5px; }
    input.veri{ width: 100%; margin-bottom: 5px; }

    .success_bt { font-size: 1.2rem; width: 320px; padding: 10px 10px; }

}

@media screen and (max-width:729px) {
	.know_wrap .txt_mtop{ margin-top: -26px; }
}

@media screen and (max-width:699px) {
	.know6_form .text_bottom{ padding-bottom: 10px; }
}

@media screen and (max-width:670px) {
	.mb{ display: block; }
	.tab li{  padding: 10px; margin-right: 0; font-size: 1rem; }
	.tab li:not(first-child){ margin-right: 5px; }

}

@media screen and (max-width:640px) {
    .br_mb{display: block;}
	.step_one ul li p{ font-size: 16px }
	.t_24,.ingridient li p,.adventage > div p{ font-size: 1.1rem; }
	.t_30,#symptom h5,.adventage h5{ font-size: 1.575rem; }
	.t_36{ font-size: 1.2rem; line-height: 1.4;}
	#feature h2{ font-size: 1.2rem; line-height: 1.2}
	.step_one ul li { width: 100%; }
	.step_one ul li{ margin: 10px 0 10px 0px;}
	
	.doc_recommend img { width: 95px;}
	.doc_recommend p{ width: 70%; margin-top: 0;}
	#twzipcode div, #twzipcode2 div { width: 30%;}

	.exchan_title{ font-size: 2rem; }

	#feature > div > div { padding:5% 2%; margin-top: -15%;}

	.knows_list li{ width: calc(96%/2);}
	.know_wrap .txt { float:none; width: 100%;}
	.advice_list li img{ float: none; width: 100%; }
	.know_wrap .advice_list .txt{ width: 100%; }
	.advice_list h2{ margin-top: 10px; }
	.know4 > img{ width: 100%; max-width: 360px; }
	.bg_share>img{ float: none; }
	.share_txt { text-align: center;}
	.share_txt a{ position: static; width: auto; max-width: 400px; }
	
	.know4 .know4_box{ display: block; }
	.know4 .know_wrap .know4_pic{ width: 100%; }
	.know4 .know4_rbox{ margin-left: 0; }
	
	.know6 .know6_form .txt{ margin-bottom: 20px; }

	.know_wrap .txt_mtop{ margin-top: 0px; }

	.discount p { font-size: 1.2rem; }

	.know6 .know6_pic02{ display: block; }
	.know6 .know6_pic022{ display: none; }

	.adventage .advantage_five{font-size: 3rem; line-height: 1rem;}

	.qa_wrap .tab_content ul h3{ font-weight: 300; padding-right: 30px; font-size: 1.1em; line-height: 1.5em; }

	.share_page .doctor_txt .dp1{ display: none; }
	.share_page .doctor_txt .dp2{ display: block; }
    .success_bt { width: 260px;}
    .success_page { padding: 30px 0;}
    .success_page .re_thank .thank_box{ width: 100%; }

}

@media screen and (max-width:560px) {
	.mbs{ display: inline; }
	.re_thank p{ text-align: left; }
}
	

@media screen and (max-width:540px) {
	.btn_main{ font-size: 1.5rem; }
	.test_header p{ font-size: 15px; }
	.test_header div > img { max-width: 290px;}
	.test_header .pd_pic {  max-width: 60px;}
	.day_meal_card{ overflow: hidden; }
	.day_meal_card li { float: none; display: inline-block; width: 49%; text-align: center;}
	.f_title,.f_input,.content1 input[type='text'] { width: 100%; margin-left: 0; margin-bottom: 3px; }
	#trail_form .content1 .btn_line { margin-left: 0;}
	#twzipcode div, #twzipcode2 div { width: 31%;}	
	.btn_line{ position: relative; top: 0; right: unset; margin-left: 0; }
	

	.symptom_rate img{ width: 70%; }
	.ingridient > ul > li { width: 100%;}
	.adventage > div{width: 100%;}
	.adventage > div:not(first-child) { margin-right: 0;}

	.two_titlef{ font-size: 16px; }
	.input_2 .input_r{ margin-right: 0; }
	.content_group ul .two_box{ margin-bottom: 5px; }
	.trial_notice ul li{ margin-bottom:5px; }
	
    footer .ft_lks a:nth-child(1),
	footer .ft_lks a:nth-child(2),
    footer .ft_lks a:nth-child(3){ font-size: 12px; }
	.mobile_br { display: none; }
	
}

@media screen and (max-width:500px) {
	.tab .tab_icon{ display: none; }
	.share_page .doctor_txt{ max-width: 90vw; padding: 10px; }
}

@media screen and (max-width:480px) {
	body{ font-size: 15px; }
	.menu_icon { top: 35px;}
	#symptom h2{ font-size: 1.8rem }
	.test_header p{ display: inline-block; width: 78%; padding-left: 0;}
	.test_header .pd_pic { max-width: 60px; margin: 0 10px 0 0; vertical-align: initial;}
	.test_result div div:first-child img{ float: none; display: block; margin: 0 auto 10px;}
	.day_meal_card li { width: 100%; }

	.knows_list li{ width: 100%;}
	.know3 div:nth-child(2) div{ float: none; width: 100%; }
	.know3 .txt{ width: 100%; }
	.discount p { font-size: 1rem; }

	.exchan_title{ font-size: 1.8rem; }
	.exchan_in{ margin: 30px 0;}
	.exchan_final{ font-size: 1.8rem; }
}

@media screen and (max-width:460px) {
	.smalltext{ margin: auto; }

    footer .ft_lks a:first-child {
      width: 35%;
    }
    footer .ft_lks a:nth-child(2) {
      width: 35%;
    }
    footer .ft_lks a:nth-child(3) {
        width: 30%;
    }
}

@media screen and (max-width:414px) {
	.menu_icon { top: 25px; margin-right: 3%;}
	.btn_main { width: 100%; font-size: 1.2rem;}
	.doc_recommend p { width: 60%; font-size: 12px;}
	.t_30, #symptom h5, .adventage h5 { font-size: 1.4rem; line-height: 1.5;}
	
	.test_header { padding: 5% 5% 10px;}
	.test_header > img{ width: 90%;}
	.question { padding: 15px;}
	#trail_form .tab_group label{ width: 50%; font-size: 1rem; }
	#trail_form .content{ padding: 5%;}
	#trail_form .tab_group{ height: 42px; }
	.tab_group [for="r1"] { margin-right: 0px;}
	.signin_box > div,.content_group input[type='text'], input[type='password']{ width: 100%; }
	.signin_box div:not(:first-child){ margin-left: 0; }
	.signin_box > div input{ margin-bottom: 10px }
	.btn_join span{ display: block; }
	.mb_style{ display: block}
	.mb_none{ display: none}

	#exchange{ padding: 40px 10px 60px; }
	.exchan_title{ font-size: 1.6rem; }
	.exchan_final{ font-size: 1.6rem; }
}    

@media screen and (max-width:400px) {
	.tab li{ font-size: 0.8rem; }
}

@media screen and (max-width:375px) {
	.to_trail input[type='submit']{ font-size: 16px; }
	.t_30, #symptom h5, .adventage h5 { font-size: 1.2rem;}
	.test_header p { width: 82%; padding-left: 0; font-size: 12px;}
	.test_header .pd_pic { max-width: 42px; margin: 0 5px 0 0;}
	.ingridient li p { padding: 15px;}
}
@media screen and (max-width:330px) {
	.test_process li { font-size: 12px;}
	.doc_recommend p { width: 100%; text-align: center;}
}