@charset "UTF-8";
*:first-child + html .clearfix {
    min-height: 1%;
}

a {
    text-decoration: none;
    outline: none;
    -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

a:hover {
    text-decoration: none;
}

*:link,
*:visited,
*:hover,
*:active,
*:focus,
* {
    border: none;
    outline: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: "Noto Sans TC", Arial, "微軟正黑體", "新細明體", sans-serif;
    font-weight: normal;
    color: #8b8b8b;
}

p {
    font-size: 0.9375em;
}

a {
    cursor: pointer;
    text-decoration: none;
    outline: none;
    -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

a:hover {
    text-decoration: none;
}

body {
    font-size: 100%;
}

.about-container {
    margin-top: 70px;
    width: 100%;
}

.about-container .bg-content {
    width: 100%;
}

.about-container .the-middle {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px;
}

.about-container .the-middle .btn {
    border: none;
    padding: 25px 0;
}

.about-container .the-middle .btn a {
    background-color: #58c3e0;
    width: 200px;
    height: 60px;
    line-height: 60px;
    display: block;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.about-container .the-middle .btn a:hover {
    background-color: #1fb6de;
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
}

.about-container .the-middle .top-title {
    width: 100%;
    text-align: left;
    padding-bottom: 30px;
}

.about-container .the-middle .top-title .maintitle {
    display: inline-block;
    vertical-align: middle;
}

.about-container .the-middle .top-title .maintitle h3 {
    width: 80px;
    height: 80px;
    background-color: #202b59;
    border-radius: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 45px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 28px;
}

.about-container .the-middle .top-title .subtitle {
    vertical-align: middle;
    display: inline-block;
}

.about-container .the-middle .top-title .subtitle h4 {
    color: #333333;
    font-size: 22px;
    font-weight: bold;
    line-height: 30px;
}

.about-container .the-middle .infobox p {
    font-size: 17px;
    line-height: 24px;
    text-align: justify;
}

.about-container .the-middle .infobox ul.item {
    list-style-type: decimal;
    padding-left: 25px;
}

.about-container .the-middle .infobox ul.item li p {
    line-height: 26px;
}

@media all and (max-width: 640px) {
    .about-container .the-middle .top-title {
        text-align: center;
    }
    .about-container .the-middle .top-title .maintitle {
        display: block;
        padding-bottom: 20px;
    }
    .about-container .the-middle .top-title .maintitle h3 {
        margin: 0 auto;
    }
}

@media all and (max-width: 500px) {
    .about-container .the-middle {
        padding: 30px;
    }
}

.about-container .for-brand {
    background: url(../images/bg_main.png) center top no-repeat;
    background-size: contain;
    -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.about-container .for-brand .for-f-w {
    padding-top: 60px;
}

.about-container .for-brand .for-f-w .top-title .subtitle h4 {
    color: #fff;
    text-shadow: 2px 1px 10px rgba(0, 0, 0, 0.4);
}

.about-container .for-brand .for-f-w .infobox {
    max-width: 600px;
    min-height: 400px;
}

.about-container .for-brand .for-f-w .infobox p {
    color: #fff;
    font-weight: bold;
    text-shadow: 2px 1px 10px rgba(0, 0, 0, 0.4);
}

.about-container .for-brand .both {
    width: 100%;
}

.about-container .for-brand .both .l-box {
    float: left;
    width: calc(100% - 500px);
}

.about-container .for-brand .both .l-box .logo {
    width: 100%;
    max-width: 154px;
    margin: 0 auto;
}

.about-container .for-brand .both .l-box .logo-color {
    padding-top: 20px;
}

.about-container .for-brand .both .l-box .logo-color p {
    padding-left: 35px;
    color: #333;
    line-height: 25px;
    position: relative;
}

.about-container .for-brand .both .l-box .logo-color p::after {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background-color: #58c3e0;
    position: absolute;
    left: 0;
    top: 5px;
}

.about-container .for-brand .both .r-box {
    width: 100%;
    float: right;
    max-width: 500px;
}

.about-container .for-brand .both .r-box .infobox {
    min-height: 260px;
}

@media all and (min-width: 1800px) {
    .about-container .for-brand {
        background: url(../images/bg_main_2000.png) center top no-repeat;
        background-size: contain;
    }
}

@media all and (max-width: 1400px) {
    .about-container .for-brand .for-f-w .infobox {
        min-height: 250px;
    }
}

@media all and (max-width: 1200px) {
    .about-container .for-brand .for-f-w .infobox {
        min-height: 200px;
    }
}

@media all and (max-width: 950px) {
    .about-container .for-brand {
        background: url(../images/bg_main_800-1.png) center top no-repeat;
        background-size: contain;
    }
    .about-container .for-brand .for-f-w .infobox {
        min-height: 300px;
    }
}

@media all and (max-width: 800px) {
    .about-container .for-brand .both .l-box {
        float: none;
        margin: 0 auto;
        width: 100%;
    }
    .about-container .for-brand .both .r-box {
        float: none;
        max-width: 100%;
    }
    .about-container .for-brand .both .r-box .top-title {
        padding-top: 25px;
        text-align: center;
    }
    .about-container .for-brand .both .r-box .infobox {
        min-height: inherit;
    }
}

@media all and (max-width: 750px) {
    .about-container .for-brand {
        background: url(../images/bg_main_800-2.png) center top no-repeat;
    }
}

@media all and (max-width: 400px) {
    .about-container .for-brand .for-f-w {
        padding-top: 30px;
    }
}

.about-container .for-Theme {
    position: relative;
}

.about-container .for-Theme::after {
    position: absolute;
    right: 0;
    top: 50px;
    content: "";
    width: 167px;
    height: 452px;
    display: block;
    background: url(../images/bg-ill.png) right center no-repeat;
    background-size: contain;
    -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.about-container .for-Theme .infobox ul.the-class {
    max-width: 740px;
    height: 612px;
    margin: 0 auto;
    margin-top: 40px;
    position: relative;
    background: url(../images/dotted.png) center center no-repeat;
    background-size: contain;
}

.about-container .for-Theme .infobox ul.the-class li {
    position: absolute;
    display: block;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.about-container .for-Theme .infobox ul.the-class li:hover {
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
}

.about-container .for-Theme .infobox ul.the-class li .class-title {
    position: relative;
    height: 100%;
}

.about-container .for-Theme .infobox ul.the-class li .class-title p {
    color: #333;
    font-size: 25px;
    line-height: 30px;
    position: absolute;
    right: 40px;
    top: 30px;
}

.about-container .for-Theme .infobox ul.the-class li.i-00 {
    left: calc(50% - 100px);
    top: calc(50% - 90px);
    width: 205px;
    height: 197px;
    background-image: url(../images/class-00.png);
}

.about-container .for-Theme .infobox ul.the-class li.i-00 .class-title p {
    width: 100%;
    text-align: center;
    left: 0;
    top: 72px;
    color: #fff;
    font-weight: bold;
}

.about-container .for-Theme .infobox ul.the-class li.i-01 {
    left: 15px;
    top: 70px;
    width: 205px;
    height: 197px;
    background-image: url(../images/class-01.png);
}

.about-container .for-Theme .infobox ul.the-class li.i-01 p {
    right: inherit;
    left: 28px;
    top: 50px;
}

.about-container .for-Theme .infobox ul.the-class li.i-02 {
    left: calc(50% - 60px);
    top: 0px;
    width: 188px;
    height: 188px;
    background-image: url(../images/class-02.png);
}

.about-container .for-Theme .infobox ul.the-class li.i-03 {
    right: 0;
    top: 95px;
    width: 200px;
    height: 204px;
    background-image: url(../images/class-03.png);
}

.about-container .for-Theme .infobox ul.the-class li.i-04 {
    right: 0;
    bottom: 70px;
    width: 200px;
    height: 181px;
    background-image: url(../images/class-04.png);
}

.about-container .for-Theme .infobox ul.the-class li.i-05 {
    left: calc(50% - 110px);
    bottom: -40px;
    width: 221px;
    height: 220px;
    background-image: url(../images/class-05.png);
}

.about-container .for-Theme .infobox ul.the-class li.i-05 p {
    top: 40px;
}

.about-container .for-Theme .infobox ul.the-class li.i-06 {
    left: 0;
    bottom: 80px;
    width: 205px;
    height: 197px;
    background-image: url(../images/class-06.png);
}

.about-container .for-Theme .infobox ul.the-class li.i-06 p {
    right: 55px;
}

@media all and (max-width: 1200px) {
    .about-container .for-Theme::after {
        top: -200px;
        width: 100px;
    }
}

@media all and (max-width: 750px) {
    .about-container .for-Theme .infobox ul.the-class {
        height: 600px;
    }
    .about-container .for-Theme .infobox ul.the-class li .class-title p {
        font-size: 20px;
        line-height: 24px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-00,
    .about-container .for-Theme .infobox ul.the-class li.i-01,
    .about-container .for-Theme .infobox ul.the-class li.i-02,
    .about-container .for-Theme .infobox ul.the-class li.i-03,
    .about-container .for-Theme .infobox ul.the-class li.i-04,
    .about-container .for-Theme .infobox ul.the-class li.i-05,
    .about-container .for-Theme .infobox ul.the-class li.i-06 {
        width: 27vw;
        height: 27vw;
    }
}

@media all and (max-width: 600px) {
    .about-container .for-Theme .infobox ul.the-class {
        height: 500px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-00 {
        left: calc(50% - 13vw);
    }
    .about-container .for-Theme .infobox ul.the-class li.i-00 .class-title p {
        top: calc(50% - 24px);
    }
    .about-container .for-Theme .infobox ul.the-class li.i-01 {
        left: -10px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-01 .class-title p {
        left: 14px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-03 {
        right: -10px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-03 .class-title p {
        top: 10px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-04 .class-title p {
        right: 30px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-05 {
        left: calc(50% - 18vw);
        bottom: 0;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-05 .class-title p {
        top: 18px;
        right: 30px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-06 {
        bottom: 100px;
        left: -10px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-06 .class-title p {
        top: 18px;
        right: 40px;
    }
}

@media all and (max-width: 500px) {
    .about-container .for-Theme .infobox ul.the-class {
        height: 440px;
    }
    .about-container .for-Theme .infobox ul.the-class li .class-title p {
        font-size: 15px;
        line-height: 20px;
    }
}

@media all and (max-width: 420px) {
    .about-container .for-Theme .infobox ul.the-class li.i-00 {
        width: 24vw;
        height: 24vw;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-01 {
        width: 30vw;
        height: 30vw;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-02 {
        width: 30vw;
        height: 30vw;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-02 .class-title p {
        top: 10px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-03 {
        width: 30vw;
        height: 30vw;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-04 {
        width: 30vw;
        height: 30vw;
        bottom: 100px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-04 .class-title p {
        right: 15px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-05 {
        width: 30vw;
        height: 30vw;
        bottom: 40px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-05 .class-title p {
        top: 10px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-06 {
        width: 30vw;
        height: 30vw;
        bottom: 120px;
    }
    .about-container .for-Theme .infobox ul.the-class li.i-06 .class-title p {
        top: 10px;
    }
}

@media all and (max-width: 400px) {
    .about-container .for-Theme::after {
        width: 60px;
    }
}

.about-container .for-goal {
    padding: 100px 0;
    background: url(../images/dotted-2.png) center center no-repeat;
}

.about-container .for-goal .the-middle {
    padding: 40px 50px;
    background-color: #f3f3f3;
    border-radius: 100px 175px 92px 197px;
}

.about-container .for-goal .the-middle .top-title {
    float: left;
    width: 33%;
    position: relative;
}

.about-container .for-goal .the-middle .top-title::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 80px;
    display: block;
    background-color: #fff;
    right: 35px;
    top: 0;
}

.about-container .for-goal .the-middle .infobox {
    float: left;
    width: 60%;
}

.about-container .for-goal .the-middle .infobox p {
    padding: 10px 0;
    min-height: 90px;
}

.about-container .for-goal .the-middle .infobox .SDGs-icons {
    padding-top: 10px;
    width: 100%;
    max-width: 340px;
}

.about-container .for-goal .the-middle .infobox .SDGs-icons img {
    width: 100%;
}

@media all and (max-width: 1080px) {
    .about-container .for-goal {
        padding: 50px;
    }
    .about-container .for-goal .the-middle .top-title {
        text-align: center;
        padding-right: 30px;
    }
    .about-container .for-goal .the-middle .top-title::after {
        content: "";
        display: none;
    }
    .about-container .for-goal .the-middle .top-title .maintitle {
        text-align: center;
    }
    .about-container .for-goal .the-middle .top-title .maintitle h3 {
        margin-right: 0;
    }
    .about-container .for-goal .the-middle .top-title .subtitle {
        display: block;
    }
    .about-container .for-goal .the-middle .top-title .subtitle h4 {
        padding: 10px 0;
    }
}

@media all and (max-width: 650px) {
    .about-container .for-goal .the-middle .top-title {
        width: 100%;
        float: none;
        padding: 0;
    }
    .about-container .for-goal .the-middle .top-title .maintitle {
        padding-bottom: 0;
    }
    .about-container .for-goal .the-middle .top-title .maintitle h3 {
        margin: 0 auto;
    }
    .about-container .for-goal .the-middle .infobox {
        width: 100%;
        float: none;
    }
    .about-container .for-goal .the-middle .infobox p {
        padding: 10px 0 20px 0;
        min-height: initial;
    }
    .about-container .for-goal .the-middle .infobox .SDGs-icons {
        text-align: center;
        margin: 0 auto;
        padding: 0;
    }
}

@media all and (max-width: 500px) {
    .about-container .for-goal {
        padding: 0 30px 30px 30px;
    }
    .about-container .for-goal .the-middle {
        padding: 30px;
    }
}

.about-container .bg-bottom {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0f9ff+0,eefafe+100 */
    background: #fff;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fff),
        to(#eefafe)
    );
    background: linear-gradient(to bottom, #fff 0%, #eefafe 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f9ff', endColorstr='#eefafe', GradientType=0);
    /* IE6-9 */
}

.about-container .for-support {
    background: url(../images/bg_bottom.png) center bottom no-repeat;
    background-size: contain;
}

.about-container .for-support .the-middle {
    padding: 80px 0;
}

.about-container .for-support .both .l-box {
    float: left;
    width: 45%;
    padding-right: 5%;
}

.about-container .for-support .both .l-box img {
    width: 100%;
    max-width: 470px;
}

.about-container .for-support .both .r-box {
    float: left;
    width: 50%;
}

.about-container .for-support .both .r-box .f-blue {
    font-size: 28px;
    color: #58c3e0;
    font-weight: bold;
}

.about-container .for-support .both .r-box .infobox p {
    max-width: 450px;
}

.about-container .for-support ul.info-circle {
    width: 100%;
    padding-left: 20px;
}

.about-container .for-support ul.info-circle li {
    float: left;
    width: 200px;
    height: 194px;
    display: block;
    background: url(../images/bg-circle.png) center center no-repeat;
    background-size: contain;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.about-container .for-support ul.info-circle li:hover {
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
}

.about-container .for-support ul.info-circle li:first-child {
    margin-top: 50px;
    margin-right: 40px;
}

.about-container .for-support ul.info-circle li p {
    font-size: 19px;
    text-align: center;
    line-height: 25px;
}

.about-container .for-support ul.info-circle li p span {
    display: block;
    padding-top: 10px;
}

@media all and (max-width: 1000px) {
    .about-container .for-support .the-middle {
        padding: 0 50px;
    }
    .about-container .for-support .both .l-box {
        width: 35%;
    }
    .about-container .for-support .both .r-box {
        width: 65%;
    }
    .about-container .for-support .both .btn {
        padding: 20px 0 0px 0;
    }
    .about-container .for-support ul.info-circle {
        padding-left: 0;
    }
    .about-container .for-support ul.info-circle li {
        width: 45%;
    }
    .about-container {
        margin-bottom: 110px;
    }
    .about-container .for-support .both .r-box .infobox .btn {
        width: 100%;
    }
}

@media all and (max-width: 800px) {
    .about-container .for-support .both .l-box {
        width: 100%;
        padding-right: 0;
        text-align: center;
    }
    .about-container .for-support .both .l-box img {
        display: inline-block;
        max-width: 75%;
    }
    .about-container .for-support .both .r-box {
        width: 100%;
    }
    .about-container .for-support .both .r-box .top-title {
        padding: 30px 0;
        text-align: center;
    }
    .about-container .for-support .both .r-box .top-title .maintitle h3 {
        margin-right: 0;
    }
    .about-container .for-support .both .r-box .infobox p {
        max-width: 100%;
    }
    .about-container .for-support .both .r-box .infobox .btn {
        text-align: center;
        padding: 20px 0;
    }
    .about-container .for-support .both .r-box .infobox .btn a {
        display: inline-block;
    }
    .about-container .for-support ul.info-circle li {
        width: 33%;
    }
}

@media all and (max-width: 640px) {
    .about-container .for-support .r-box {
        width: 100%;
    }
    .about-container .for-support .r-box .top-title .maintitle {
        display: inline-block;
    }
    .about-container .for-brand .for-f-w .infobox p {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media all and (max-width: 500px) {
    .about-container .for-support .both .r-box .f-blue {
        font-size: 25px;
    }
    .about-container .for-support ul.info-circle li {
        width: 48%;
        height: 150px;
    }
    .about-container .for-support ul.info-circle li p {
        font-size: 17px;
    }
    .about-container .for-support ul.info-circle li:first-child {
        margin-right: 3%;
    }
}
/*# sourceMappingURL=style.css.map */