/*****************************************
*                 policy                 *
*****************************************/

body {
	background-image: url(../images/knowledge/bg.jpg);
	background-position: center 0;
	background-repeat: repeat;
	color: #242424;
}

section {
	position: relative;
	box-sizing: border-box;
}
.mb-50{margin-bottom: 50px;}
.mb-100{margin-bottom: 100px;}

 
.kv{display: flex;justify-content: center;align-items: flex-start;z-index: 2;padding-top: 50px;}

.kv-main{margin-right: 45px;padding-top: 80px;padding-left: 150px;}

.kv-main p{
	font-size: 16px;
	line-height: 35px;
	text-align: center;
	margin-top: 1em;
	letter-spacing: .1em;
}
.kv-pro{margin-left: 45px;z-index: 2;}

.story{
	box-sizing: border-box;
	position: relative;
	width:100%;
	max-width: 1200px;
	background: url(../images/knowledge/story-bg.jpg);
	padding: 90px 50px;
	margin:0 auto;
	border-radius: 20px;
	margin-bottom: 100px;
}
.story1{margin-top: -210px;padding-top: 120px;}
.story .title{
	text-align: center;
	margin-bottom: 50px;
}
.story-h2{
	display: flex;
	justify-content: center;align-items: center;
	flex-direction: column;
	margin-bottom: 30px;
}
.story-leaf{margin-bottom: 15px;}

.story-p{
	text-align: center;
	line-height: 2.5em;
	font-size: 16px;
}


.story-type-list{
	display: flex;flex-wrap: wrap;
	width: calc( ( 275px  + 40px ) * 3);
	margin:0 auto;
	margin-bottom: 30px;
}

.story-type-list li{
	width: 275px;
	margin:20px;
}
.story-type-list li > p{
	font-size: 15px;
	margin-top: 10px;
	line-height: 2em; 
}
.story-type-title{
	display: flex;
	justify-content: center;align-items: center;
}
.story-type-title p{margin-left: 15px;font-weight: bold;}


.story-pro-list{
	margin:0 auto;
	margin-top: 50px;
	display: flex;justify-content: center;align-items: flex-start;
	width: calc( ( 162px  + 30px ) * 4);
}

.story-pro-list li{
	display: inline-block;
	text-align: center;
	width: 162px;
	margin:0 15px;
}
.story-pro-list li p{font-size: 14px;font-weight: bold;margin: 10px 0;line-height: 2em;}
.story-pro-list li span{display: block;font-size: 13px;}

.story-pro-list li span:nth-of-type(2){color: #634121;margin-top: 10px;}

.story-pro-list li img:nth-of-type(2){
	position: relative;
	margin-left: 19px;
	margin-top: 30px;
}


.story-info{
	text-align: center;
	margin: 100px auto;
}

.story-row{
	display: flex;
	justify-content: center;align-items: center;
}
.story-row > :first-child{margin-right: 40px;}
.story-row > :last-child{margin-left: 40px;}



.story-row-con{
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 500px;

}
.story-row-con p{
	font-size: 15px;
	line-height: 2.5em;
	letter-spacing: .1em;
}
.story-row-con p small{font-size: 12px;}
.story-row-con .story-h2{
	align-items: flex-start;
}
.story2-row2 .story-row-con{
	align-items: flex-start;
}
.story2-row2 .story-row-con > img:last-child{
	margin-top: 30px;
}
.story2-row2 > :last-child{
	margin-right: -130px;
	margin-left: 15px;
}
.story2-chart1{position: relative;}
.story2-chart1 p{
	text-align: center;
	margin-top: 40px;
}

.story2-tip{position: absolute;top: 0;right: 0;transform: translate(70%,-60%);}


.story2-row4{
		margin-top:65px
}

.story3 .story-row{margin-bottom: 50px;}
.story3 .story-row .story-h2{flex-direction: row;justify-content: flex-start;align-items: center;}
.story3 .story-row .story-leaf{margin-bottom: 0;margin-right: 20px;}


.story3 .story-row .story-row-con b{font-weight: bold;font-size: 15px;margin: 30px 0 15px 0;}

.story3 .story-row .story-row-con ul{font-size: 12px;line-height: 2em;}

.story3 .story-row.story3-row2{margin-bottom: 0;}

.story3 .story-row.story3-row3{margin-bottom: 0;}
.more-btn{
	font-size: 14px;font-weight: bold;
	margin-top: 50px;
	background: #C6010F;
	border-color: #C6010F;
	color: #fff;
	border-radius: 28px;
	line-height: 45px;
	width: 220px;
	text-align: center;
	transition: all .3s ease-in-out;
}
.more-btn:hover{
    /*color: #fff;*/
    color: #C6010F;
    background-color: #fff;
/*    background-color: #C6010F;
    border-color: #C6010F;*/
    box-shadow: 0 0 20px rgba(0,0,0,.2);
}
.story3{padding-bottom: 0;}
.story3-row3{margin-bottom: -100px;}
.story3-row3 > :first-child{margin-left: -120px;margin-bottom: -80px;}

.story3-row3 > :last-child{margin-top: 200px;}


.deco{position: absolute;}
.deco img{max-width: 100%;}


.kv-deco1{left: 50%;top: -100px;margin-left: -750px;}
.kv-deco2{left: 50%;top: 420px;margin-left: -650px;transform: rotate(-10deg);}
.kv-deco3{top: 80px;left: 50%;transform: scaleX(-1) rotate(10deg);margin-left: 50px;}
.kv-mask{right: 50%;margin-right: -640px;top: -140px;}

.story1-deco1{left: -65px;top: -43px;}
.story1-deco2{left:170px;top: 100px;}
.story1-deco3{top: 330px;left: -160px;}
.story1-deco4{bottom: 600px;left: -210px;}
.story1-deco5{right: 0px;bottom: 570px;}

.story2-deco1{left: -60px;top: -130px;}
.story2-deco2{right: 0;top: -50px;}
.story2-deco3{top: 230px;right: 230px;}
.story2-deco4{top: 290px;right: 139px;}



.story3-deco1{width: 291px;margin-left: -34px;margin-top: -20px;left: 0;top: 0;}
.story3-deco2{right: 0;top: 0;margin-right: -65px;margin-top: -60px;}
.story3-deco3{top: 440px;left: 120px;}
.story3-deco4{top: -260px;left: 110px;}
.story3-deco5{right: -40px;bottom: -55px;}

.story-h2 h2,.story-info{
	font-family:"Noto Serif TC", 微軟正黑體, "Microsoft JhengHei", sans-serif;
    text-align: center;
}

.fadeup{ opacity: 0;transform: translateY(10px);transition: all 1s ease-out;}

.fadein{opacity: 0;transition: all 1s ease-out;}

.is-in{
	opacity: 1;
	transform: translateY(0);
}
.mb{display: none;}


@media screen and (max-width: 1000px) {
	.mb{display: block;}
	.pc{display: none;}
	img { max-width: 100%; }

.story {
    padding: 14.667vw 5.333vw; /* 55 / 3.75, 20 / 3.75 */
    border-radius: 5.333vw; /* 20 / 3.75 */
    margin-bottom: 13.333vw; /* 50 / 3.75 */
}

.story-row {
    flex-direction: column;
}

.story-info,
.story-h2 h2 {
    font-size: 5.867vw; /* 22 / 3.75 */
    letter-spacing: .1em;
    line-height: 1.75em;
    font-weight: 500;
}

.story3 .story-h2 h2 { text-align: left; }

.story-info {
    color: #634121;
}

.story-row > :first-child {
    margin-right: 0;
    margin: 4vw 0; /* 15 / 3.75 */
}

.story-row > :last-child,.story-row-con {
    margin-left: 0;
    width: 100%;
    margin: 4vw 0; /* 15 / 3.75 */
}

.story-p,
.story-row-con p {
    font-size: 3.467vw; /* 13 / 3.75 */
    line-height: 7.467vw; /* 28 / 3.75 */
}

.story-p { text-align: left; }
.story3-row3 .story-row-pic{
	margin: 4vw 0;
}
.story3-row3 .story-row-pic img {
	position: relative;
    margin-left: -50vw;
    left: 50%;
    width: 100vw;
    max-width: initial;
}

.more-btn {
    width: 48vw; /* 180 / 3.75 */
    height: 10.667vw; /* 40 / 3.75 */
    position: relative;
    display: block;
    margin: 0 auto;
    line-height: 10.667vw;
}

.story1 .title { width: 45.067vw; margin: 0 auto 6.667vw auto; } /* 169 / 3.75, 25 / 3.75 */
.story2 .title { width: 64vw; margin: 0 auto 6.667vw auto; } /* 240 / 3.75 */
.story3 .title { width: 71.733vw; margin: 0 auto 6.667vw auto; } /* 269 / 3.75 */

.story-leaf { width: 10.667vw; } /* 40 / 3.75 */

.story3 .story-row .story-leaf { margin-right: 4vw; } /* 15 / 3.75 */
.story3 .story-row .story-row-con b { font-size: 3.733vw; } /* 14 / 3.75 */
.story3 .story-row .story-row-con ul { font-size: 2.933vw; } /* 11 / 3.75 */

.story3-row1 > img,
.story3-row2 > img {
    width: 77.867vw; /* 292 / 3.75 */
}

.story3-row1 .story-h2 > img,.story3-row1 .story-h2 > picture { width: 55.733vw; } /* 209 / 3.75 */
.story3-row2 .story-h2 > img,.story3-row2 .story-h2 > picture { width: 55.467vw; } /* 208 / 3.75 */

.story2-row2 { margin-bottom: 5.333vw; } /* 20 / 3.75 */

.story2 .story-row-con .story-h2 {
    align-items: center;
    margin-bottom: 4vw; /* 15 / 3.75 */
}

.story2-row2 .story-row-con {
    align-items: center;
}

.story-info {
    margin: 14.933vw auto; /* 56 / 3.75 */
    width: 89.333vw; /* 335 / 3.75 */
}

.story2-row2 > .story2-chart1 {
    width: 108.267vw; /* 406 / 3.75 */
    margin-right: -15.467vw; /* -58 / 3.75 */
}

.story2-row4 .story-row-con { width: 100%; }

.story2-row4 .story-row-con img {
    max-width: 114.4vw; /* 429 / 3.75 */
    width: 114.4vw;
    margin-left: -22vw; /* -75 / 3.75 */
    margin-bottom: 8vw; /* 30 / 3.75 */
}

.story2-row3 > picture {
    width: 108.533vw; 
    max-width: initial;
}

.story-type-list {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.story-type-list li {
    width: 42.667vw; /* 160 / 3.75 */
    margin: 0 0 6.667vw 0; /* 25 / 3.75 */
}

.story-type-title img { width: 4.8vw; } /* 18 / 3.75 */
.story-type-title p { font-size: 3.2vw; } /* 12 / 3.75 */
.story-type-list li > p { font-size: 2.933vw; } /* 11 / 3.75 */

.story-pro-list {
    width: 100%;
    flex-wrap: wrap;
    margin-top: 6.667vw; /* 25 / 3.75 */
}

.story-pro-list li {
    width: 44.533vw; /* 167 / 3.75 */
    margin: 6.667vw 0; /* 25 / 3.75 */
}

.story-pro-list li img:nth-of-type(1) { width: 8vw; } /* 30 / 3.75 */
.story-pro-list li p { font-size: 3.2vw; } /* 12 / 3.75 */
.story-pro-list li span { font-size: 2.933vw; } /* 11 / 3.75 */
.story-pro-list li img:nth-of-type(2) {
    width: 25.067vw; /* 94 / 3.75 */
    margin-left: 3.467vw; /* 13 / 3.75 */
    margin-top: 4vw; /* 15 / 3.75 */
}

.kv {
    width: 100%;
    padding: 16vw 0 24vw 5.333vw; /* 60, 0, 90, 20 */
}

.kv-main {
    padding: 0;
    margin-right: 0;
    width: 66.667vw; /* 250 / 3.75 */
}

.kv-main p {
    font-size: 3.467vw; /* 13 / 3.75 */
    text-align: left;
    line-height: 7.467vw; /* 28 / 3.75 */
}

.story1 { margin-top: 0; }

.kv-pro {
    margin-left: 5.333vw; /* 20 / 3.75 */
    width: 31.2vw; /* 117 / 3.75 */
    margin-right: -10.667vw; /* -40 / 3.75 */
}

.kv-deco1 {
    left: 0;
    top: -12vw; /* -45 / 3.75 */
    width: 35.733vw; /* 134 / 3.75 */
    margin-left: -11.467vw; /* -43 / 3.75 */
}

.kv-deco2 {
    left: initial;
    top: initial;
    margin-left: 0;
    transform: rotate(-10deg);
    bottom: 8.533vw; /* 32 / 3.75 */
    right: 10.667vw; /* 40 / 3.75 */
    width: 20vw; /* 75 / 3.75 */
}

.kv-deco3 {
    top: initial;
    left: 0;
    transform: scaleX(-1) rotate(-90deg);
    margin-left: 32vw; /* 120 / 3.75 */
    bottom: 5.867vw; /* 22 / 3.75 */
    width: 8vw; /* 30 / 3.75 */
}

.kv-mask { display: none; }

.story1-deco1 {
    left: -9.333vw; /* -35 / 3.75 */
    top: -6.667vw; /* -25 / 3.75 */
    width: 31.733vw; /* 119 / 3.75 */
}

.story1-deco2, .story1-deco3, .story1-deco5 { display: none; }

.story1-deco4 {
    top: -6.667vw; /* -25 / 3.75 */
    right: -20vw; /* -75 / 3.75 */
    left: initial;
    width: 31.733vw; /* 119 / 3.75 */
    transform: scaleX(-1) rotate(5deg);
    bottom: initial;
}

.story2-deco1, .story2-deco2, .story2-deco3, .story2-deco4 { display: none; }

.story3-deco1 {
    width: 38.933vw; /* 146 / 3.75 */
    margin-left: -9.067vw; /* -34 / 3.75 */
    margin-top: -16vw; /* -60 / 3.75 */
    left: 0;
    top: 0;
}

.story3-deco2 {
    right: 0;
    top: 0;
    margin-right: -17.333vw; /* -65 / 3.75 */
    margin-top: -16vw; /* -60 / 3.75 */
}

.story3-deco3 {
    top: 8vw; /* 30 / 3.75 */
    width: 28.8vw; /* 108 / 3.75 */
    left: initial;
    right: -14.4vw; /* -54 / 3.75 */
}

.story3-deco4 {
    top: 146.667vw; /* 550 / 3.75 */
    left: initial;
    right: -17.333vw; /* -65 / 3.75 */
}

.mb-50 { margin-bottom: 5.333vw; } /* 20 / 3.75 */
.mb-100 { margin-bottom: 10.667vw; } /* 40 / 3.75 */
}