@font-face {
	font-family: 'jinxuan';
	src: local('jf-jinxuan-medium'), 
	     local('jf-jinxuan-medium'), 
	     url('../images/font/jf-jinxuan-medium.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	     url('../images/font/jf-jinxuan-medium.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
	font-display: swap;
}

@font-face {
	font-family: 'SweiSpring';
	src: url('../images/font/SweiSpringSugarCJKtc-SemiBold.woff') format("woff2"),
		 url('../images/font/SweiSpringSugarCJKtc-SemiBold.ttf') format("truetype");
	font-display: swap;
}


*{padding: 0; margin: 0;}
body {font-family: '微軟正黑體','Microsoft JhengHei',sans-serif; font-weight:normal; background:#f7f7f7;}
a:link, a:active, a:hover, a:focus, a:visited {outline: none; cursor:pointer !important;}

.cleardiv {clear:both;}
.monst {font-family: 'Montserrat', sans-serif;}

.copy {display:table; margin:30px auto;}
.copyp {font-size:12px !important; line-height:16px !important; color:#9c9c9c !important; text-align:left !important;}


#layout {position:relative; margin-top:80px;}

#kv {display:block; position:relative; width:100%; height:70vh; max-height:550px; background:url(../images/index/kv_bg.jpg) center no-repeat; box-sizing:border-box; padding-top:30px;}

#kv .title {display:block; width:50%; max-width:720px; height:auto; margin:0px auto; opacity:0;}
#kv .sub {display:block !important; width:65%; max-width:450px; height:auto; margin:10px auto; opacity:0;}

#kv .newpd {display:block; width:32%; max-width:580px; height:auto; position:absolute; z-index:2; top:85%; left:50%;
	-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#kv .newpd img {display:block; float:left; width:50%; height:auto;}
#kv .newpd img.newtag {display:block; width:185px; position:absolute; z-index:3; top:-100px; left:-130px; opacity:0;}
#kv .newpd img.similac, #kv .newpd img.totalcomfort {opacity:0;}

#kv .oldpd {display:block; width:70%; max-width:580px; height:auto; position:absolute; z-index:1; top:50%; left:50%; opacity:0;
	-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#kv .oldpd img {display:block; float:left; width:50%; height:auto;}

.pdcopy {display:none;}
.kvcopy {margin:15px 15px 110px 15px; position:relative; z-index:99;}

p.h0 {font-family:'SweiSpring','微軟正黑體','Microsoft JhengHei',sans-serif; font-size:42px; line-height:50px; text-align:center; color:#d89928; text-shadow: -2px 2px 4px white, 2px 2px 4px white, 2px 2px 4px white, 2px -2px 4px white, 0px 3px 6px #c18e31; position:relative; z-index:3;}
p.h0 .h0icon {display:block; margin:auto;}
p.h0 .h0hmo {display:inline-block; vertical-align:middle; margin-bottom:6px; margin-right:-3px;}

h1 {font-family:'SweiSpring','微軟正黑體','Microsoft JhengHei',sans-serif; font-size:36px; line-height:42px; text-align:center; color:#195388; text-shadow: -2px 2px 4px white, 2px 2px 4px white, 2px 2px 4px white, 2px -2px 4px white, 0px 3px 6px #c18e31; position:relative; z-index:3;}
h1 .h1icon {display:block; margin:auto;}
h1 .h1hmo {margin-bottom:-14px; margin-right:-4px;}
h1 .h1pd {width:95%; max-width:633px; margin-bottom:10px;}
h1 .h1icon_drop {display:inline-block; vertical-align:middle; margin-bottom:12px;}

h2 {font-size:24px; line-height:32px; font-weight:300; text-align:center; color:black; position:relative; margin-top:10px; position:relative; z-index:3;}
h2 img.h2_hmo {display:inline-block; margin:0px 3px -3px 3px;}

#circles {display:block; position:relative; box-sizing:border-box; padding:50px 0px; background:url(../images/index/circles_bg.jpg) top -80px center no-repeat; background-size:cover;}
#circles .h1pin {opacity:0;} 

#circles .circles {position:relative; width:95%; max-width:800px; margin:30px auto; /*opacity:0;*/}
#circles .circles.in {opacity:1}
#circles .circles img {display:block; width:100%; height:auto;}
#circles .circles .circle_circle {position:absolute; top:0px; left:0px; z-index:0;}
#circles .circles p {display:block; width:90%; margin:auto; font-size:2.5vh; line-height:3.5vh; text-align:justify; color:#195388; font-weight:400;}
#circles .circles p sup {font-size:12px; margin:0px 2px;}

.molecular_lt {position:absolute; top:20%; left:7%; z-index:0;}
.molecular_rt {position:absolute; top:40%; right:5%; z-index:0;}

#doctor_kv {display:block; position:relative; box-sizing:border-box; padding:50px 0px; background:url(../images/index/doctor_bg.jpg) bottom center no-repeat; background-size:cover;}

.double_drop {display:block; width:95%; max-width:820px; margin:auto;}
.double_drop img {display:block; height:75vh; width:auto; max-height:450px; margin:auto;}
.double_drop p {display:block; width:100%; margin:auto; font-size:2.5vh; line-height:3.5vh; text-align:justify; color:#195388; font-weight:400;}
.double_drop p sup {font-size:12px; margin:0px 2px;}

.doctor {display:block; width:95%; max-width:1200px; margin:auto; padding:50px 0px;}
.doctor img {display:block; height:80vh; max-height:800px; width:auto; margin:auto;}
.doctor img.mb {display:none;}


#compare {display:block; position:relative; box-sizing:border-box; padding:60px 0px; overflow:hidden; background:url(../images/index/compare_bg.jpg) top center no-repeat; background-size:cover;}
#compare h1 sup {font-size:16px; display:inline-flex; vertical-align:middle; margin-top:-30px;}

.sectionposition {display:flex; justify-content:center; width:96%; margin:0px auto 30px auto; position:relative;}

.compare_line {height:400px; width:1px; background:#ccc; align-self:center;}

.compare_section {margin:0px 30px;}
.compare_section .h3icon {display:block; width:35%; max-width:120px; margin:auto;}
.compare_section h3 {font-size:24px; color:#18518a; text-align:center; font-family:'SweiSpring','微軟正黑體','Microsoft JhengHei',sans-serif; margin:20px auto;}
.compare_section .h3p {display:block; width:100%; max-width:540px; margin:auto; margin-bottom:30px; font-size:18px; line-height:24px; text-align:justify;}

.compare_section .compare_normal, .compare_section .compare_hmo {display:block; /*float:left; width:49%;*/ width:100%; max-width:600px; margin:auto; position:relative; box-sizing:border-box; /*border:5px solid #f4da8b; border-radius:10px;*/}
.compare_section .compare_normal {margin-right:2%;}
.compare_section .pics {display:block; width:100%; max-width:520px; margin:auto;}
.compare_section .compare_compare {display:table; font-size:20px; text-align:center; color:white; padding:10px 20px; margin:-46px auto 20px auto; border-radius:100px;}
.compare_normal .compare_compare {background:#8795a2;}
.compare_hmo .compare_compare {background:#18518a;}

#compare sup {font-size:12px;}

#compare .copy {display:flex; justify-content:center; margin-bottom:60px;}
#compare .copyp {display:block; text-align:center;}


#similackv {display:block; width:100%; height:650px; background:url(../images/index/index_similac_kv_1920.jpg) center no-repeat; position:relative;}
#similackv .mb {display:none;}

#similac {display:block; width:100%; position:relative; box-sizing:border-box; padding:100px 50px 20px 50px; background:url(../images/index/con4_bg.jpg) top center no-repeat; background-size:cover;}
#totalcomfort {display:block; width:100%; position:relative; box-sizing:border-box; padding:100px 50px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f7f7+35,e4e0d5+100 */
	background: #f7f7f7; /* Old browsers */
	background: -moz-linear-gradient(top,  #f7f7f7 35%, #e4e0d5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f7f7f7 35%,#e4e0d5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f7f7f7 35%,#e4e0d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#e4e0d5',GradientType=0 ); /* IE6-9 */
}

#similac .similackvcopy {position:absolute; top:5px; left:15px;}

#totalcomfort h1 {color:#BE0282;}

.pd_info {display:block; width:100%; max-width:1200px; margin:50px auto; position:relative;}
.pd_info div {display:inline-block; vertical-align:middle; position:relative;}
.pd_info .pds {width:45%; background:url(../images/index/similac_bg.png) center right no-repeat; background-size:cover; box-sizing:border-box; padding:30px;}
#totalcomfort .pd_info .pds {width:45%; background:url(../images/index/totalcomfort_bg.png) center left no-repeat; background-size:cover; box-sizing:border-box; padding:30px;}
.pd_info .pds img {display:block; width:70%; max-width:326px; margin:auto;}

.pd_info .text {width:53%; margin:0px 5px; box-sizing:border-box;}
.pd_info .text ul.infos, .pd_info .text ul.infos li {list-style:none;}
.pd_info .text ul.infos li img, .pd_info .text ul.infos li span {display:inline-block; vertical-align:middle;}
.pd_info .text ul.infos li img {width:18%; max-width:112px;}
.pd_info .text ul.infos li span {width:80%; max-width:506px;}

.pd_info .text ul.infos h3 {font-size:24px; font-weight:bold; line-height:34px; color:#d89928; text-shadow: -1px 1px 2px white, 1px 1px 2px white, 1px 1px 2px white, 1px -1px 2px white, 2px 2px 4px #c18e31;}
.pd_info .text ul.infos p, .pd_info .text ul.infos li {font-size:17px; line-height:30px; text-align:justify;}
.pd_info .text ul.infos li {margin-bottom:20px;}
.pd_info .text ul.infos sup {font-size:12px; margin:0px 2px;}
.pd_info .text ul.infos li li {list-style-type:"．"; margin-bottom:0px; margin-left:10px !important;}
.pd_info .text ul.infos font {font-weight:400; color:#9e804b;}
.pd_info .text img.word {display:inline-block !important; width:16px !important; height:16px; margin:-4px 0px 0px 1px;}

#similac .pd_info li:first-child {margin-left:-12%;}
#similac .pd_info li:nth-child(2) {margin-left:-5%;}
#similac .pd_info li:nth-child(4) {margin-left:-8%;}

#totalcomfort .pd_info {overflow:visible;}
#totalcomfort .pd_info li:first-child {margin-left:10%; margin-right:-10%;}
#totalcomfort .pd_info li:nth-child(3) {margin-left:5%; margin-right:-5%;}
#totalcomfort .pd_info li:nth-child(4) {margin-left:15%; margin-right:-15%;}

#similac .copy {/* width:100%; max-width:343px; */display:table;}
#totalcomfort .copy {/* width:100%; max-width:150px; */display:table;}

#totalcomfort .pcno {display:none;}

#similacmom {position:relative;}
#similacmom img {width:100%; height:auto;}
#similacmom img.pc {display:block; max-width:1200px; margin:auto;}
#similacmom img.mb {display:none;}

.pdmorlnk {position:relative; display:flex; justify-content:center; align-items:center;}
.pdmorlnk a {display:inline-block; width:220px; font-size:20px; text-align:center; color:white; text-decoration:none; padding:12px 0px; margin:5px 10px; border-radius:50px; -moz-box-shadow: 0px 4px 6px #d1d1d1; -webkit-box-shadow: 0px 4px 6px #d1d1d1; box-shadow: 0px 4px 6px #d1d1d1; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.pdmorlnk a:hover {cursor:pointer; margin:3px 10px 7px 10px; -moz-box-shadow: 4px 4px 6px #d1d1d1; -webkit-box-shadow: 4px 4px 6px #d1d1d1; box-shadow: 4px 4px 6px #d1d1d1;}

#similac .pdmorlnk a {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e6eb8+0,5c9edb+50,2f7ec6+100 */
	background: #1e6eb8; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #1e6eb8 0%, #5c9edb 50%, #2f7ec6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #1e6eb8 0%,#5c9edb 50%,#2f7ec6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #1e6eb8 0%,#5c9edb 50%,#2f7ec6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e6eb8', endColorstr='#2f7ec6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#totalcomfort .pdmorlnk a {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e6eb8+0,5c9edb+50,2f7ec6+100 */
	background: #1e6eb8; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #bf0583 0%, #cf62a3 50%, #be0382 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #bf0583 0%,#cf62a3 50%,#be0382 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #bf0583 0%,#cf62a3 50%,#be0382 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf0583', endColorstr='#be0382',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#similacmom .pdmorlnk {position:absolute; width:100%; bottom:40px; z-index:1;}
#similacmom .pdmorlnk a {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e6eb8+0,5c9edb+50,2f7ec6+100 */
	background: #1e6eb8; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #6c1b7f 0%, #8753a3 50%, #753391 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #6c1b7f 0%,#8753a3 50%,#753391 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #6c1b7f 0%,#8753a3 50%,#753391 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c1b7f', endColorstr='#753391',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}






@media (max-width:1200px) {
	#similackv {background:none; height:auto;}
	#similackv .mb {display:block; width:100%; height:auto;}
}


@media (max-width:1160px) {
	#layout {margin-top:50px;}
}


/* 正常筆電 */
@media (max-height:800px) {
    h1 .h1icon_drop {width:120px;}
    
    #circles .circles {width:70%; margin:auto;}
}


/* 小筆電 */
@media screen and (max-width:1300px) and (min-height:550px) and (max-height:650px) {
    #kv .newpd {max-width:500px; top:85%;}
	#kv .newpd img.newtag {width:160px; top:-70px; left:-120px;}
	
	h1 .h1icon {width:50px;}
	h1 {font-size:30px; line-height:36px;}
	h2 {line-height:28px; margin-top:3px;}

    #circles .circles {width:40%; margin:auto;}
    
}


/* 手機版 */
@media(max-width:768px) {

    #layout {margin-top:50px;}
	
	#kv {margin-bottom:25vh; padding-top:30px; height:35vh; background-size:cover;}
	#kv .title {width:95%; margin:auto;}
	#kv .newpd img.newtag {width:30%; left:-18%; top:-28%;}
	#kv .newpd {width:70%; top:70vw;}
	#kv .oldpd {width:80%;}
	
	.pdcopy {display:block;}
	.kvcopy {display:none;}

    p.h0 {font-size:22px; line-height:28px; text-shadow: -2px 2px 4px white, 2px 2px 4px white, 2px 2px 4px white, 2px -2px 4px white, 0px 3px 5px #c18e31;}
	p.h0 .h0icon {width:35%;}
	p.h0 .h0hmo {height:30px; margin-bottom:4px;}

	h1 {font-size:20px; line-height:28px; text-shadow: -2px 2px 4px white, 2px 2px 4px white, 2px 2px 4px white, 2px -2px 4px white, 0px 3px 5px #c18e31;}
	h2 {font-size:17px; line-height:24px; margin-top:5px;}
	h2 img.h2_hmo {height:17px;}
	
	h1 .h1icon {height:60px; width:auto; margin:0px auto;}
	h1 .h1hmo {height:27px; margin-bottom:-8px; margin-right:-2px;}
	h1 .h1icon_drop {height:70px; width:auto; margin-bottom:7px;}

    #circles .circles {width:95%; margin:20px auto;}

    .molecular_lt {width:20%; top:8%;}
	.molecular_rt {width:20%; top:0.3%;}
	
	.double_drop img {width:80%; height:auto;}
	
	.doctor img {width:100%; height:auto;}
	.doctor img.pc {display:none;}
	.doctor img.mb {display:block;}
	
	#compare h1 sup {font-size:12px; margin-top:-20px;}
	
	.sectionposition {flex-wrap:wrap;}
	.compare_line {display:none;}
	
	.compare_section {position:relative; top:auto; left:auto; margin:0px auto 20px auto;}
	.compare_section .h3icon {width:15%; margin-bottom:5px;}
	.compare_section h3 {font-size:18px; margin:5px auto 10px auto;}
	.compare_section .h3p {width:90%; font-size:15px; line-height:18px;}
	.compare_section .compare_normal, .compare_section .compare_hmo {width:70%; padding:0px;}
	.compare_section .compare_normal {margin-left:0px; margin-right:0px; margin-bottom:20px;}
	.compare_section .compare_compare {font-size:16px; padding:5px 20px; margin:-30px auto 10px auto;}
	.compare_section .pics {width:100%;}
	
	#compare .copyp {width:80%;}
	
	#similac .similackvcopy {width:90%; margin:5px auto 20px auto;}
	
	#similac {padding:60px 20px 40px 20px;}
	#totalcomfort {padding:40px 20px;}
	
	.pd_info {margin:20px auto;}
	.pd_info div {display:block;}
	.pd_info .pds, #totalcomfort .pd_info .pds {width:80%; margin:auto;}
	.pd_info .text {width:100%;}
	
	.pd_info .text ul.infos li img, .pd_info .text ul.infos li span {vertical-align:top;}
	.pd_info .text ul.infos li:nth-child(4) img, .pd_info .text ul.infos li:nth-child(4) span {vertical-align:middle;}
	
	.pd_info .text ul.infos li img {width:28%; margin-left:-2%;}
	.pd_info .text ul.infos li span {width:70%;}
	.pd_info .text ul.infos h3 {font-size:18px; line-height:28px;}
	.pd_info .text ul.infos p, .pd_info .text ul.infos li {font-size:15px; line-height:20px;}
	
	.pd_info .text img.word {width:14px; height:14px; margin:3px 0px 0px 0px;}
	
	#similac .pd_info li:first-child {margin-left:0px;}
	#similac .pd_info li:nth-child(2) {margin-left:0px;}
	#similac .pd_info li:nth-child(4) {margin-left:0px;}
	
	#totalcomfort .pd_info li:first-child {margin-left:0; margin-right:0;}
	#totalcomfort .pd_info li:nth-child(3) {margin-left:0; margin-right:0;}
	#totalcomfort .pd_info li:nth-child(4) {margin-left:0; margin-right:0;}
	
	#totalcomfort .pcno {display:block;}
	#totalcomfort .mbno {display:none;}

	#similacmom img.pc {display:none;}
	#similacmom img.mb {display:block;}

	.pdmorlnk a {font-size:16px; width:45%; margin:0px 2%; padding:10px 0px;}

}


/* 小尺寸手機 */
@media screen and (max-height:700px) and (max-width:400px) {

}