@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
*{-webkit-box-sizing:border-box;box-sizing:border-box;}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{font-size:16px;}
body{
    margin:0 auto;
    padding:0;
    font-size:100%;
    font-weight:400;
    font-family: "Noto Sans TC", sans-serif;
    background:#2A2E38;
    line-height:1.8;
    letter-spacing:0.5px;
}

p{font-size:1.125rem; color: #393834;letter-spacing: 0.5px;}
@media (max-width:37.5rem){p{font-size:1rem;}}
@media (max-width:20rem){p{font-size:.875rem;}}
a{color:#fff;text-decoration:none;}
a:hover{opacity:.9;-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
img{max-width:100%;height:auto;display:-webkit-box;display:-ms-flexbox;display:flex;}
/*@media (max-width:64rem){.wrapper{width:95%;}}*/
.wrap {
    max-width: 750px;
    margin: 0 auto;
    margin-bottom: 80px;
}

.wrap .p-h {
    margin-bottom: 80px;
}

.wrap p {
    color: #384743;
    text-align: justify;
    font-family: "Noto Sans TC", sans-serif;
    font-size: 18px;;
    font-weight: 500;
    margin: 20px 0 40px;
}

h3 {
    margin: 0 auto;
    color: #384743;
    text-align: center;
    font-family: "Noto Serif TC";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    margin-bottom: 40px;
}

h4 {
    color: #3072A8;
    text-align: center;
    font-family: "Noto Serif TC";
    font-size: 32px;;
    font-weight: 700;
}

.img-wrap {
    max-width: 950px;
    margin: 0 auto;

}
.img-wrap .img-pc{
    display: block;
}
.img-wrap .img-mb{
    display: none;
}

figure {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

figure .caption {
    color: #3072A8;
    text-align: justify;
    font-family: "Noto Sans TC", sans-serif;
    font-size:16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin: 16px 0 40px;
    width: 240px;
}

.area {
    margin: 0 auto;
    text-align: center;
    color: #3072A8;
    font-family: "Noto Serif TC";
    font-size: 40px;
    font-weight: 700;
    margin-top: 160px;
    margin-bottom: 20px;
}

.area svg {
    vertical-align: sub;
}

.earth01 {
    background: url(../img/Europe.svg) no-repeat right;
    background-size: contain;
    mix-blend-mode: multiply;
}

.earth02 {
    background: url(../img/usa.svg) no-repeat right;
    background-size: auto;
    mix-blend-mode: multiply;
}

.earth03 {
    background: url(../img/ipef.svg) no-repeat right;
    background-size: contain;
    mix-blend-mode: multiply;
}

/*infogram*/
.infogram-box, .flourish-box {
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 80px;
}
.flourish-box .flourish-title,
.infogram-box .infogram-title {
    color: #3072A8;
    text-align: center;
    font-family: "Noto Serif TC";
    font-size: 32px;
    font-weight: 700;
    line-height: 160%;
    margin-bottom: 20px;

}
.infogram-box iframe{
    max-width: 600px;
    margin: 0 auto;
    max-height: 827px;
}

.chart-Trump{
    display: block;
}
.chart-Trump-s{
    display: none;
}
@media (max-width: 1280px) {
    .earth01,.earth02,.earth03 {
        background-size: 33%;
    }
}

@media (max-width: 992px) {
    .infogram-iframe{
    width: 100%;
    margin: 0 auto;
    }
    .wrap,.img-wrap,.infogram-box, .flourish-box {
        width: 90%;
    }
    .wrap {
    margin-bottom: 60px;
}
    .wrap .p-h {
    margin-bottom: 40px;
}
figure .caption {
    margin: 16px 0 20px;
    font-size: 16px;
}
.img-wrap .img-pc{display: none!important;}
.img-wrap .img-mb{display: block;}
}
.subtitle{
    color: #FFF;
    text-align: center;
    font-family: "Microsoft JhengHei";
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    padding-top: 12px;

}
@media (max-width: 769px) {
    h3 {
        font-size: 24px;
    }
    .area {
        font-size: 32px;
    }
    h4 {
        font-size: 24px;
    }
    .earth01,.earth02,.earth03 {
        background-size: 40%;
    }
    .flourish-box .flourish-title,
    .infogram-box .infogram-title {
        font-size: 24px;
    }
    .chart-Trump{
    display:none;
    }
    .chart-Trump-s{
    display: block;
    }
    .subtitle{
    font-size: 20px;
    }

}
@media (max-width: 576px) {
	.area {
		margin-top: 120px;

	}
	 .earth01,.earth02,.earth03 {
        background-size: 45%;
    }
    .earth01{
    background-position: 100% 30%;
    }
    .earth02{
    background-position: 100% 51%;
    }    
    .earth03{
    background-position: 100% 45%;   
    }
}