@charset "UTF-8";
/*****************************Index Start*****************************************/

/***2022_10_27***/
/*  */
/*************login**************/

#h_contaniner {
    display: block;
    background-image: url("https://www.aibooks.tw/per/images/sys_images/hbg.jpg");
    width: 100%;
    height: 900px;
    /*2022.2.8 Tony 增加網頁高度*/
    position: relative;
    /*background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      background-size: cover;*/
}

.h_img_position {
    width: 100px;
    position: fixed;
    z-index: 1;
    top: -100px;
    /*2022.2.8 Tony 將logo提高位置*/
    border-radius: 10px;
    /*left: 50%;
      transform: translate(-50%,0%);*/
}


/*登入口logo擺放位置 */

.h_img_position > img,
.h_img_position_two > img {
    width: 100%;
}


/*登入口logo img */

.h_index_bg {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.h_login_bg {
    width: 33em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

.login_sec_width {
    width: 100%;
    margin-bottom: -15rem;
}

.h_login_bg_width {
    width: 80%;
    margin: 0 auto;
}

.h_login_title {
    width: 100%;
    height: 4em;
    color: #ffffff;
    background: linear-gradient(to bottom, #277f69 50%, #247564 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
    font-weight: bolder;
    stroke: #ffffff;
    stroke-width: 100em;
    -webkit-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.25);
}

.h_login {
    width: 45%;
    /*justify-content: center !important;*/
}

.h_login_box,
h1.h_login_box {
    font-size: 32px;
    color: #004c5d;
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
    font-weight: bolder;
    stroke: #ffffff;
    stroke-width: 100em;
}


/* onlineService css 1028*/
.onlineService {
    position: fixed;
    right: 45px;
    bottom: 160px;
    z-index: 1000;
    transition: all .7s
}

/*電腦版客服*/
.onlineService--area {
    position: relative;
    right: -40px;
    top: 40px;
}

/*電腦版客服*/
.onlineService-line {
    width: 27%;
    position: absolute;
    top: 170px;
    left: 30px;
}

/*電腦版客服*/
.onlineService-phone {
    width: 27%;
    position: absolute;
    top: 170px;
    left: 90px;
}

.onlineService--list {
    display: none;
    /*position: relative;*/
    /*width: 80px;*/
    /*width: 100%;*/
}

.onlineService--list::before,
.onlineService--list::after {
    /*content: '';*/
    /*display: block;*/
    /*position: absolute;*/
    /*z-index: 1;*/
    /*!*width: 100%;*!*/
    /*height: 10px;*/
    /*background-color: #fff;*/
}

.onlineService--list::before {
    /*top: -30px;*/
    /*border-left: 4px solid #007e7d;*/
    /*border-top: 4px solid #007e7d;*/
    /*border-right: 4px solid #007e7d;*/
    /*border-radius: 100% 100% 0 0;*/
}

.onlineService--list::after {
    /*bottom: -30px;*/
    /*border-left: 4px solid #007e7d;*/
    /*border-bottom: 4px solid #007e7d;*/
    /*border-right: 4px solid #007e7d;*/
    /*border-radius: 0 0 100% 100%;*/
}

/*.onlineService--item {*/
/*    position: relative;*/
/*    z-index: 2;*/
/*    width: 100%;*/
/*    !*height: 50px;*!*/
/*    padding: 5px 8px;*/
/*    background-color: #fff;*/
/*    border-left: 4px solid #007e7d;*/
/*    border-right: 4px solid #007e7d;*/
/*    color: #007e7d;*/
/*    font-weight: 600;*/
/*    font-size: 18px;*/
/*    text-align: center;*/
/*}*/

/*.onlineService--item:not(:first-of-type) {*/
/*    border-top: 1px solid #007e7d;*/

/*}*/

/*.onlineService--item-link_this {*/
/*    !*display: block;*!*/
/*    !*position: relative;*!*/
/*    width: 100% !important;*/
/*    !*height: 0;*!*/
/*    !*padding-bottom: 100%;*!*/
/*}*/

/*.onlineService--item-link_this img {*/
/*    !*position: absolute;*!*/
/*    !*top: 0;*!*/
/*    !*left: 0;*!*/
/*    !*width: 100%;*!*/
/*    !*height: 100%;*!*/
/*    !*object-fit: contain;*!*/
/*    !*object-position: left;*!*/
/*}*/

/* 20221107 alen */
@media (max-width: 992px) {
    body {
        padding-bottom: 48px
    }

    .onlineService--area {
        display: none;
    }

    .onlineService {
        right: unset;
        bottom: -3px !important;
        width: 100%;
        /*border-top: 4px solid #007e7d;*/
    }

    .onlineService.active {
        bottom: 0px;
    }

    .onlineService--list {
        display: block;
        padding-left: 10px;
        padding-right: 10px;
        /*display: flex;*/
        /*width: 100%;*/
        /*margin-bottom: 0;*/
        /*top: -6px;*/
        /*top: 16px;*/
    }

    .onlineService--list::before,
    .onlineService--list::after {
        display: none;
    }

    .onlineService--list .col-sm-12 {
        border: .5px solid #b9b9b9;
        border-radius: 5px;
        /*box-shadow: 1px 1px 5px #727171;*/
    }

    .onlineService--list .col-sm-12 .col {
        /*border: .5px solid #727171;*/
        border: .5px solid #007e7d;
        border-radius: 5px;
    }

    /*.onlineService--item {*/
    /*    flex: 1 1 auto;*/
    /*    display: flex;*/
    /*    align-items: center;*/
    /*    justify-content: center;*/
    /*    width: auto;*/
    /*    border-left: unset;*/
    /*    border-right: unset;*/
    /*}*/
    /*.onlineService--item:not(:first-of-type) {*/
    /*    border-top: unset;*/
    /*    border-left: 1px solid rgba(0, 166, 168, 0.8);*/
    /*}*/
    /*.onlineService--item-link_this {*/
    /*    width: 50px;*/
    /*    height: 50px;*/
    /*    padding-bottom: 0*/
    /*}*/

}

@media (max-width: 576px) {
    .onlineService--item-link_this {
        width: 35px;
        height: 35px;
    }
}

/*login,rigister*/

.login,
.account {
    width: 100%;
    margin: auto;
    background-color: #ffffff;
    border: 1px solid #007e7d;
}

.login-content {
    padding: 30px 40px 30px 40px;
}

.login-content li {
    margin-bottom: 20px;
}

.profilel li {
    margin-bottom: 20px;
    width: 49%;
    display: block;
    padding: 0;
    padding-right: 1.5%;
    float: left;
}

.profilel li:nth-child(even) {
    float: right;
}

.login-content a {
    cursor: pointer;
}

.login-content li button,
.login-content li a button {
    width: 100%;
    font-size: 14px;
    padding: 0.5em 0;
    color: #ffffff;
    height: 49px;
    position: relative;
    display: flex;
    justify-content: center;
}

.login-content li.linebtn,
.login .login-content li.FBbtn {
    display: inline-block;
    width: 49.6%;
}

li.linebtn a,
li.FBbtn a {
    display: block;
}

button {
    background: #007e7d;
}

.login-content li button i {
    font-size: 20px;
    margin-right: 10px;
}

.login-nav {
    width: 100%;
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    display: table;
    border-top: 1px solid #007e7d;
}

.login-nav li {
    display: table-cell;
    text-align: center;
}

.login-nav li a {
    font-size: 18px;
    line-height: 4.5;
    color: #000000;
    background: #ffffff;
    border-right: 1px solid #007e7d;
}

.login-nav li:last-child a {
    border-right: 0;
}

.login-nav li a:hover {
}

.login-nav li a:after {
    top: 7px;
}

.login-nav .active a {
    border-bottom: 1px solid #007e7d;
}

.login-content .login-nav li a {
    line-height: 2;
    width: 150px;
    /*margin: 0 20px;*/
}

.login-content .login-nav li:first-child a {
    text-align: left;
}

.login-content .login-nav li:last-child a {
    float: right;
}

.login-content li button,
.login-content li a button {
    align-items: center;
    height: 43px;
}

/* cms_paper */
.security__wrap {
}

.security__item .name {
    line-height: 1.5;
    font-weight: bold;
}

.security__wrap-title {
    position: relative;
    margin-bottom: 32px;
    color: #212121;
    font-size: 24px;
    text-align: center;
}

.security__wrap-title .txt {
    position: relative;
    z-index: 2;
    padding: 0 15px;
    background-color: #fff;
}

.security__wrap-title:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);

    width: 100%;
    height: 1px;
    background-color: #212121;
}


.security__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    /*    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));*/
}

.security__item {
    flex: 1 1 auto;
    width: calc(16.66% - 12px);
    text-align: center;
}

@media (max-width: 1280px) {
    .security__item {
        width: calc(33.33% - 12px);
    }
}

@media (max-width: 768px) {
    .security__item {
        width: calc(50% - 12px);
    }
}

.security__item--inner {
    padding: 12px;
    max-width: 150px;
    margin: auto;
}

.security__item .pic {
    margin-bottom: 12px;
}


.security__item .name {
    line-height: 1.5;
    font-weight: bold;
}

/*.login-nav li.active a{color:#213652;border-bottom:2px solid #007e7d;}*/

.login-nav li.active a {
    color: #000000;
    background: #ffffff;
    /*box-shadow: inset 0 2px 0px 1px rgba(128,128,128,0.6); border:0;*/
}

.login > hr {
    border-top: 1px solid #b9b9b9;
    position: relative;
    top: -30px;
}

.login-content h5 {
    padding-left: 20px;
    margin-bottom: 10px;
}

.bdr5 {
    /*border-radius: 30px !important;*/
    border-radius: 5px !important;
}

.login-content select {
    padding: 1px 5px;
    width: 100%;
    border: 1px solid #ccc;
}

.login-content input[type="text"],
.login-content input[type="email"],
.login-content input[type="password"] {
    width: 100%;
    color: #333;
    line-height: 2;
    padding: 0.5em;
    resize: none;
    background: #fff;
    letter-spacing: 0.1em;
    border: 1px solid #cbcbcb;
    /*border-radius: 25px;*/
    border-radius: 5px;
    font-size: 14px;
}

.login-content select:hover,
.login-content select:active,
.login-content select:focus,
.login-content input:hover,
.login-content input:active,
.login-content input:focus {
    box-shadow: 0px 0px 6px rgba(53.3%, 71.4%, 95.7%, 1);
}

.login li input[type="checkbox"] {
    margin: 0 5px 0 13px;
    width: 18px;
    height: 18px;
}

.verifycode {
    width: 100%;
    display: flex;
    align-items: center;
}

.verifycode input {
    width: 65.66% !important;
}

.verifycode img {
    width: 33.33%;
    margin-left: 1%;
}

.playline {
    display: flex;
    justify-content: space-between;
}

.btnLine {
    background-color: #00c300;
}

.btnFB {
    background-color: #345087;
    color: #ffffff !important;
}

.btnLine > img,
.btnFB > img {
    height: 36px;
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0%, -50%);
    border-radius: 5px;
    /*margin-right:.5em;*/
}

.btnLine > img {
    box-shadow: 0 0 2px 0 rgba(253, 253, 253);
}

.btnFB .fa-facebook {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.grayColor {
    color: #000;
}


/*  banner */
.swiper {
    /* height: 445px; */
}

.swiper-wrapper {
    height: auto;
}

.swiper-button-next,
.swiper-button-prev {
    color: #fff;
}

.swiper-slide .pic {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 30.73%;
}

.swiper-slide .pic img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/*mobile APP ICON連結 Tony 2022.1.5*/

.onlineApp {
    margin-bottom: 20px;
    justify-content: space-around;
}


/*服務項目*/

.swiper-slide > h2 {
    font-size: 2rem;
}

.in-service {
    text-align: center;
    margin-bottom: 90px;
}

.in-service > div {
    padding: 0;
}

.in-service .zone-header {
    max-width: 920px;
    width: auto;
    margin-bottom: 30px;
    padding: 0 20px;
}

.in-service .zone-header .mainTitle {
    margin: 0.1em auto 0;
}

.in-service .zone-header dt {
    text-align: left;
    width: 50%;
}

.in-service .zone-header dd {
}

.in-service .zone-header dd p {
    font-weight: 400;
}

.in-service .zone-header dd .app-download {
    border-left: 1px solid #ccc;
    padding-left: 30px;
    margin-top: 30px;
}

.in-service .zone-header dd .app-download img {
    margin-right: 5px;
}

.prdList-swiper .swiper-slide aside {
    padding-bottom: 90%;
}

.prdList-swiper .swiper-slide aside nav {
    color: #fff;
    text-align: center;
    position: absolute;
}

h2,
.customerList h2,
.customerList h3 {
    color: #0dc8a7;
    font-family: 微軟正黑體;
}

.prdList-swiper .swiper-slide aside nav h4 {
    font-weight: 300;
    width: 7em;
    margin-bottom: 1em;
}

.prdList-swiper .swiper-slide:nth-child(even) nav {
    top: 30px;
    left: 60px;
}

.prdList-swiper .swiper-slide:nth-child(odd) nav {
    bottom: 30px;
    right: 60px;
}


/*新聞專區*/

.in-news {
    margin-bottom: 90px;
    width: 100%;
}

.in-news > div {
    display: table-cell;
    vertical-align: top;
}

.in-news > div.famous {
    width: 750px;
}

.in-news > div.famous > article {
    width: inherit;
}

.in-news > div.news {
    padding: 0 80px;
    text-align: left;
}


/*famous*/

.famous-swiper {
}

.famousList {
    padding-left: 80px;
    position: relative;
}

.famousList nav {
    width: 250px;
    height: 250px;
    background-color: #007e7d;
    color: #fff;
    padding: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 99;
}

.famousList nav * {
    position: relative;
    z-index: 10;
}

.famousList nav:after {
    width: 0;
    height: inherit;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    background-color: #ff8c00;
    z-index: 0;
    transition: all 0.3s;
}

.famousList nav h2 {
    font-size: 42px;
    margin: 0.5em 0 0.2em;
}

.famousList nav p {
    font-size: 20px;
    color: #fff;
    line-height: 1.5;
    font-weight: 300;
}

.famousList aside {
    height: 550px;
    margin-bottom: 50px;
    z-index: 0;
}

.famousList date {
    position: absolute;
    right: 10px;
    bottom: 0px;
    color: #333;
}

.famousList a:hover nav:after {
    width: inherit;
}


/*學習中心*/

.in-learning > div {
    padding: 0 80px;
    text-align: center;
}

.in-learning .zone-header {
    display: inline-block;
    text-align: left;
    margin-bottom: 30px;
}


/*****************************Index End*****************************************/


/*****************************MainPage Start*****************************************/


/*kv-img*/

.learning-kv {
    background-image: url(../images/kv/learning.jpg);
}

.writer-kv {
    background-image: url(../images/kv/writer.jpg);
}

.news-kv {
    background-image: url(../images/kv/news.jpg);
}

.service-kv {
    background-image: url(../images/kv/service.jpg);
}

.about-kv {
    background-image: url(../images/kv/about.jpg);
    /* 202210/3 關於我們 footer width: 2300px; */
}

.links-kv {
    background-image: url(../images/kv/links.jpg);
}

.solution-kv {
    background-image: url(../images/kv/solution.jpg);
}

.privacy-kv {
    background-image: url(../images/kv/privacy.jpg);
}

.contact-kv {
    background-image: url(../images/kv/contact.jpg);
}

.follow-kv {
    background-image: url(../images/kv/follow.jpg);
    background-size: cover;
}


/*共用區*/

.textZone {
}

.textZone > div {
    max-width: 900px;
}

.textZone > div p {
    font-weight: 400;
    margin-bottom: 1.5em;
}

.textZone > div .text-header {
    font-weight: 900;
    margin-bottom: 0.5em;
    text-align: center;
    letter-spacing: 0.5em;
}


/*分類*/

.category {
    text-align: center;
    /*display:none;*/
    margin-bottom: 50px;
}

.category ul {
    border-bottom: 1px solid #ccc;
}

.category ul li {
    text-align: center;
    margin: 0 0.9em;
}

.category ul li a {
    color: #333;
    letter-spacing: 0.2em;
    line-height: 2.5;
    position: relative;
    text-align: center;
}

.category ul li a:after {
    content: "";
    display: block;
    background: #ff8c00;
    height: 4px;
    transition: all 0.7s;
    width: 0;
}

.category ul li.active a {
    color: #ff8c00;
}

.category ul li a:hover:after,
.category ul li.active a:after {
    width: 100%;
}

.category2 {
}

.category2 ul {
    border-top: 1px solid #ccc;
    border-bottom: none;
    padding-top: 10px;
}

.category2 ul li {
    margin: 0;
}

.category2 ul li:not(:first-of-type) {
    border-left: 1px solid #ccc;
}

/* .category2 ul li+li a {
    border-left: 1px solid #ccc;
} */

.category2 ul li a {
    line-height: 1;
    padding: 0.5em 2em 0;
}

.category2 ul li a:after {
    margin-top: 0.5em;
    background: #007e7d;
}

.category2 ul li.active a {
    color: #007e7d;
}


/*news*/

.newsZone {
}

.newsList {
}

.newsList li {
    font-family: 'Microsoft JhengHei', sans-serif;
    font-weight: 600;
    margin-bottom: 1.4em;
    padding-bottom: 1.4em;
    text-align: left;
    border-bottom: 1px solid #ccc;
}

.newsList li a {
    font-family: 'Microsoft JhengHei', sans-serif;
    font-weight: 600;
    display: block;
    color: #333;
    position: relative;
}

.newsList li p {
    font-family: 'Microsoft JhengHei', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.2em;
    margin: 0.5em 50px 0 0;
    line-height: 1.5;
}

.newsList li span {
    font-family: 'Microsoft JhengHei', sans-serif;
    font-weight: 600;
    border: 1px solid #333;
    padding: 0.1em 0.8em;
    margin-right: 1em;
    font-size: 13px;
}

.newsList li date {
    font-family: 'Microsoft JhengHei', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5em;
}

.newsList li a.arrowBtn:after {
    background-image: url(../images/ico/arrow-g.svg);
    top: auto;
    bottom: 2px;
}

.newsList li a:hover p {
    color: #ff9600;
}

.newsList li a:hover span {
    background-color: #ff9600;
    color: #fff;
    border-color: #ff9600;
}


/*週報List*/

.newsPaperList {
}

.newsPaperList li {
    float: left;
    width: 50%;
    margin: 1% 0;
    border-bottom: none;
    padding: 2%;
}

.newsPaperList li aside {
    margin: 10px 0;
}

.newsPaperList li p {
    letter-spacing: 0em;
    text-align: center;
    margin: 0;
}

.newsPaperList li date {
    letter-spacing: 0em;
}

.newsPaperList li a.arrowBtn:after {
    display: none;
}

@media (min-width: 768px) {
    .newsPaperList li {
        float: left;
        width: 25%;
    }

    .newsPaperZone {
    }

    .newsPaperZone .news-article-img {
        float: left;
        width: 30%;
        margin: 0;
        padding: 30px 0;
    }

    .newsPaperZone .news-article-edit {
        float: right;
        width: 70%;
        margin: 0;
        padding: 30px 0 30px 50px;
    }
}


/*Bgg*/

.Bgg {
    font-family: sans-serif;
    font-size: 15px;
    padding-right: 0;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 2px;
}

.Bgg li {
    display: inline-block;
    margin-bottom: 3px;
}

.Bgg li .nav-link {
    border: 1px solid #aaaaaa;
    border-radius: 3px;
    padding: 5px 10px;
}

.Bgg > li > a:hover,
.Bgg > li > a:hover i,
.Bgg a.active,
.Bgg a.active i {
    background-color: #eee;
    color: #23527c;
}


/* end Bgg */


/*news-content*/

.newsHead {
    letter-spacing: 0.2em;
    font-size: 24px;
    font-weight: 500;
    margin: 0.5em 0 1em;
    border-bottom: 3px solid #007e7d;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
}

.newsTag {
    border: 1px solid #333;
    padding: 0em 0.5em;
    font-size: 13px;
    display: inline-block;
    text-align: center;
}

.newsTime {
    letter-spacing: 0.5em;
    border-left: 1px solid #333;
    padding-left: 1em;
    margin-left: 1em;
}

.newsSocialbox {
    margin: 0;
    display: flex;
    align-items: center;
}

.newsSocial {
    width: 90px;
    display: block;
    font-size: 0;
    margin-left: auto;
}

.social2 {
    margin-top: -20px;
    margin-bottom: 20px;
}

.socialAbout {
    margin-top: -40px;
    margin-bottom: 20px;
}

.newsSocial a {
    font-size: 30px;
    display: inline-block;
    line-height: 1;
}

.newsSocial a:hover {
    opacity: 0.8;
}

.newsSocial .navFB {
    color: #4384dc;
}

.newsSocial .navLine {
    color: #6cb100;
}

.newsSocial .copy-share {
    width: 26px;
    height: 26px;
    line-height: 20px;
    border-radius: 5px;
    background: #999;
    color: #fff;
    text-align: center;
}

.newsSocial .copy-share i {
    font-size: 16px;
}

.news-article-img {
    margin: 2em;
    text-align: center;
}

.news-article-edit {
    margin: 2em;
}

.news-article-edit p {
    display: block;
    font-size: 17.5px;
    font-weight: 400;
    word-break: break-all;
    text-align: justify;
    font-family: poppins, "noto sans kannada", 微軟正黑體, sans-serif;
    color: rgb(104, 104, 104);
    margin: 0px 0px 1.75em;
}

.news-article-edit h2 {
    margin-bottom: 1em;
}

.news-article-edit h3 {
    margin-bottom: 1em;
}

.news-function {
    background-color: #f6f6f6;
    margin-bottom: -100px;
    padding: 20px 0;
}


/*learning*/

.learningZone {
}

.learningList {
    margin-bottom: 30px;
}

.learningList li {
    width: 31%;
    /*margin:0 1% 2%;*/
}

.learningList li a {
    color: #333;
    display: block;
    position: relative;
    padding-bottom: 30px;
    text-align: left;
}

.learningList li .titleList {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.learningList li .titleList:last-child {
    margin-bottom: 10px;
}

.learningList li h4 {
    /*color:#007e7d;*/
    font-size: 18px;
    /*margin-bottom:-1.2em;height:3.5em;*/
    line-height: 1.5;
    z-index: 99;
    position: relative;
    font-weight: 400;
}

.learningList li date {
    /*float:right;*/
    font-weight: 500;
    font-size: 18px;
    /*padding-left: 15px;*/
}

.learningList li aside {
    height: 345px;
    background: no-repeat center center;
    background-size: cover;
    border: 20px solid #efefef;
}

.learningList li i {
    background: #ff9600;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 20px;
    bottom: 0;
    z-index: 99;
}

.learningList li i:before {
    content: "";
    background: url(../images/ico/arrow.svg) no-repeat center center;
    background-size: contain;
    width: 30px;
    height: 30px;
    position: absolute;
    left: calc(50% - 15px);
    top: calc(50% - 15px);
    z-index: 99;
    filter: invert(100%);
}

.learningList li a:hover aside {
    opacity: 0.8;
}

.learningList li a:hover i {
    background-color: #007e7d;
    transform: translateX(50px);
}

.learnList-swiper .swiper-button-next,
.learnList-swiper .swiper-button-prev {
    transform: translate(0%, -50%);
}

.learningList-other {
    margin-bottom: 0;
}

.learningList-other li {
    /*margin:0 .5% 0%;*/
    width: 32.2%;
}

.learningList-other li aside {
    border: 10px solid #efefef;
    padding-bottom: 65%;
    height: 0;
}

.learningList-other li h4 {
    font-size: 15px;
    margin: 1em 0.5em;
}

.learningList-other li a {
    padding-bottom: 0px;
}

.learningList-other li i {
    width: 50px;
    height: 50px;
    right: 0px;
    left: auto;
    bottom: 68px;
}

.learningList-other li a:hover i {
    transform: translateX(0px);
}


/*學習中心產品*/

.prdContent {
    margin-bottom: 50px;
}

.prdImg {
    margin-bottom: 50px;
}

.prdTxt {
    text-align: left;
}

.prdTxt .prdName {
    font-size: 34px;
    font-weight: 600;
    margin-top: 0.5em;
}

.prdTxt .prdPurchase {
    margin: 1.5em 0;
}

.prdTxt .prdPurchase dt {
    width: 55%;
    font-size: 30px;
    border: 1px solid #333;
    border-right: none;
    border-left: none;
}

.prdTxt .prdInfo {
    margin-bottom: 1em;
}

.prdTxt .prdInfo dl {
    margin-bottom: 0.5em;
}

.prdTxt .prdInfo dt {
    width: 4em;
    padding-right: 1em;
    border-right: 1px solid #333;
}

.prdTxt .prdInfo dd {
    padding-left: 1.5em;
}

.prdTxt article p {
    margin-bottom: 2em;
}


/*名家專欄*/

.famousList-group {
}

.famousList-group li {
    width: 31%;
    margin: 0 1% 50px;
    padding-left: 20px;
}

.famousList-group li aside {
    background: no-repeat center center;
    background-size: cover;
    position: relative;
    height: 400px;
    margin-bottom: 30px;
}

.famousList-group li nav {
    width: 210px;
    height: 210px;
    text-align: left;
}

.famousList-group li nav h2 {
    font-size: 30px;
}

.famousList-group li nav {
    font-size: 16px;
}

.famousList-group li nav hr {
    margin: 10px auto;
    border-color: #fff;
}


/*營業項目*/

.serviceZone {
}

.serviceZone > div {
    max-width: 1400px;
    margin: auto;
}

.serviceList li {
    width: 30%;
    margin: 0 1% 50px;
}

.serviceList li a {
    display: block;
    margin-bottom: 20px;
}

.serviceList li a aside {
    padding-bottom: 100%;
    margin-bottom: 1em;
    border: 1px solid #eee;
}

.serviceList li nav {
    border-left: 8px solid #007e7d;
    padding-left: 30px;
    /*min-height:100px;*/
}

.serviceList li h4 {
    font-weight: bolder;
    margin-bottom: 0.5em;
    color: black;
}

.serviceList li h4:hover {
    font-weight: bolder;
    margin-bottom: 0.5em;
    color: #0EC4A3;
}

.serviceList li p {
    line-height: 1.5;
    color: #999;
    display: none;
}


/*解決方案*/

.solutionZone {
    margin: auto;
    display: block;
    font-size: 0;
}

.solutionZone > div {
    max-width: none;
}

.solutionList {
    margin: auto;
}

.solutionList li {
    margin: 1% 0.5%;
    background: #fff;
    width: 23.6%;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0.5px 2px 5px 0.5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0.5px 2px 5px 0.5px rgba(0, 0, 0, 0.5);
    box-shadow: 0.5px 2px 5px 0.5px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    display: inline-table;
    cursor: pointer;
}

.solutionList li:active,
.solutionList li:focus {
    position: relative;
    top: 1px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.solutionarticle {
    background: #69e0c3;
    padding-bottom: 50px;
    padding: 16px 16px 50px;
    border-radius: 20px;
}

.solutionList li dt {
    width: 80px;
    height: 80px;
    /*background: #69e0c3;*/
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    /*color:#fff;*/
    font-size: 50px;
    transition: all 0.5s;
    border-radius: 10px 0px 0px 10px;
}

.solutionList li dt img {
    max-width: 45px;
    max-height: 45px;
    filter: invert(1) brightness(2);
}


/* Tony 2022.1.24 修改超連結型態*/


/* .solutionList li dd h4 {
    color: #000;
} */

.solutionList a {
    color: #000;
    transition: all 0.5s
}

.solutionList a:hover {
    color: #fff
}


/*						
  .solutionList li dt i{filter: drop-shadow(0px 0px 4px rgba(0,0,0,.5));}
  */

.solutionList li dd {
    padding: 0 0.5em;
    vertical-align: middle;
    display: table-cell;
    transition: all 0.7s;
    border-radius: 0px 10px 10px 0px;
}

.solutionList li dd h4 {
    margin-bottom: 0em;
    font-weight: 500;
    font-size: 14.2px;
}

.solutionList li dd .solution-content {
    font-size: 13px;
    color: #999;
    display: none;
}

.solutionList li:hover {
    background-color: #f68b02;
    color: white;
}

.solutionList li dd h4:hover {
    color: white;
}

.solutionList li:hover img {
    filter: invert(0);
}


/*.solutionList li:hover dd{background:#f68b02; opacity:0.5; }*/

.qaList li input[type="checkbox"] {
    display: none;
}

.qaList li section {
    margin-bottom: 24px;
    -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
}

.qaList li label {
    font-size: 30px;
    font-weight: 500;
    padding: 10px 15px;
    border: 1px solid #ff9600;
    color: #ff9600;
    background-color: #fcfcfc;
    cursor: pointer;
    border-radius: 2px 2px 0 0;
}

.qaList li label dt {
    width: 50px;
    padding: 0 0 0 0.5em;
    line-height: 2;
    position: relative;
}

.qaList li label dd {
    position: relative;
}

.qaList li label dd i {
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0.6;
    position: absolute;
    /*right:16px;*/
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.qaList li label dd i:before {
    font-size: 30px;
}

input[type="checkbox"]:checked + label i::before {
    content: "\f106";
    transition: 0.5s;
}


/*.qaList li label dd:after{
      content:"\f078";
      width: 0;
      height: 0;
      /*border-style: solid;
      border-width: 12px 0 12px 16px;
      border-color: transparent transparent transparent #ff9500;*/


/*position:absolute;
      right:16px;
      top:calc(50% - 12px);
  }
  
  /*
  .qaList li p{font-size:18px;margin-left:40px;margin-right:20px;}
  */

.qaList {
}

.qaList li label {
    font-size: 20px;
}

.qaList li label dt {
    width: 50px;
}

.qaList li label dd {
    padding: 0.2em 0;
    /*padding-left:1em;*/
}

.qaList li ul {
    list-style: disc;
    margin-left: 1.5em;
}

.qaList li ol {
    margin-left: 1.5em;
}

.qaList li li {
    margin-bottom: 0.3em;
}

input[type="checkbox"]:checked ~ article {
    opacity: 1;
    min-height: 60px;
    display: block;
    transition: 0.5s;
}

.qaList li article {
    font-size: 15px;
    padding: 15px 60px;
    position: relative;
    background-color: #fcfcfc;
    border: 1px solid #ff9600;
    border-top: 0;
    border-radius: 0 0 2px 2px;
    display: none;
    transition: all 10s ease;
}

.qaList li article .qaicon {
    position: absolute;
    left: 0px;
    background: #fcfcfc;
    display: block;
    width: 30px;
    text-align: center;
    border-radius: 8px;
    font-weight: 900;
    color: #fff;
    margin-left: 20px;
}

.qaList li article h4 {
    margin-bottom: 0.5em;
}

.qaList li article p {
    margin-bottom: 0.5em;
    line-height: 2.2;
}

.qaList li article aside {
    text-align: center;
}

.qaList li article aside img {
    max-width: 800px;
    width: 100%;
    margin-bottom: 20px;
}


/*隱私權政策*/

.termsZone {
}

.termsList {
    list-style: cjk-ideographic;
    /*list-style-position:inside;*/
    padding: 0 20px;
}

.termsList > li {
    margin-bottom: 2em;
    font-size: 15px;
    line-height: 1.7;
    color: #f68b02;
}

.termsList li h4 {
    font-size: 130%;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}


/*
  .termsList li article {font-weight:400;margin-bottom:1.5em;line-height:1.8;}
  */

.termsList li > ol,
.termsList li > article,
.termsList li > p {
    color: #333;
}

.termsList li > ol {
    margin-left: 1.4em;
}

.termsList li li {
    margin-bottom: 1em;
}

.termsList li li ul {
    margin: 1em 0.7em 1em 1.2em;
    list-style: disc;
}

.termsList li li ul li {
    margin-bottom: 0.3em;
}


/*聯絡我們*/

.contactZone {
    text-align: center;
    background-color: #e5f3ef;
    margin: -80px 0 -100px;
    padding: 80px 0 50px;
}

.contactZone h3 {
    margin-bottom: 1em;
}

.contactZone > div p {
    margin-bottom: 0;
}

.contactList {
    margin-bottom: 30px;
}

.contactList li {
    width: 48%;
    margin: 1%;
    float: left;
}

.contactList li:last-child {
    width: 98%;
}

.contactList li input,
.contactList li select,
.contactList li textarea {
    font-size: 18px;
    padding: 1.5em;
    background-color: #fff;
    border: 1px solid #ccc;
    font-weight: 400;
}

.contactList li textarea {
    height: 10em;
}

#ajax_contact_submit:disabled,
#ajax_contact_submit[disabled] {
    background-color: #cccccc;
    color: #666666;
    cursor: no-drop;
}

#ajax_contact_submit:disabled::before,
#ajax_contact_submit[disabled]::before {
    background-color: #333;
}


/*相關網站連結*/

.linksZone > div {
    max-width: 1400px;
    margin: auto;
}

.links-group {
    margin-bottom: 50px;
    padding: 0 30px;
}

.links-group h4 {
    font-size: 25px;
    border-bottom: 4px solid #007e7d;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
}

.links-group ul li {
    float: left;
    width: 25%;
    margin-bottom: 0.5em;
    padding-left: 1em;
}

.links-group ul li a {
    color: #000;
    display: block;
}

.links-group ul li a {
    display: inline-block;
    position: relative;
    font: 700 16px/2.5 Arial;
    max-width: 100%;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #000;
    padding: 5px;
    padding-left: 25px;
    border: 1px solid #ff8c00;
    border-radius: 6px;
}


/*.links-group ul li a:before {
    content: "-";
    padding-right: 0.5em;
  }*/

.links-group ul li a:hover {
    color: #ff8c00;
}


/*about*/

.aboutZone {
}

.aboutZone .btnAll {
    text-align: right;
}

/*20221004*/

.termsZone {
}

.termsList {
    list-style: cjk-ideographic;
    /*list-style-position:inside;*/
    padding: 0 20px;
}

.termsList > li {
    margin-bottom: 2em;
    font-size: 15px;
    line-height: 1.7;
    color: #f68b02;
}

.termsList li h4 {
    font-size: 130%;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

/*about*/

.introArea {
    text-align: justify;
}

.introTop {
}

.introTop aside {
    width: 250px;
}

.introTop article {
    padding-left: 5em;
}

.introArea > h4 {
    margin: 2em 0 1em;
    display: table;
    text-align: center;
}

.introArea > h4 b {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    padding: 0 0.5em;
    transform: translateY(-0.5em);
    font-size: 20px;
    font-weight: 900;
    color: #007e7d;
}

.introArea > h4:before,
.introArea > h4:after {
    display: table-cell;
    vertical-align: middle;
    content: "";
    width: 50%;
    border-top: 1px solid #007e7d;
}

.introArea dfn {
    color: #ff8a00;
}

.introList li {
    width: 50%;
    padding: 1em 2em;
}


/*
  .introList li>div{height:180px;width:180px;margin:0 auto 20px;
                          background-color: #62cab0;
                          border-radius:100%;}
  */

.introList li > div {
    display: block;
    text-align: left;
}

.introList li > div figure i {
    display: block;
    margin: 0 auto 0.3em;
    font-size: 30px;
}

.introList li > div figure {
    text-align: left;
    font-size: 18px;
    letter-spacing: 0.3em;
    color: #007e7d;
}

.introList li p {
    font-size: 13px;
    line-height: 1.5;
}


/*品牌故事*/

.brandList {
}

.brandList dl + dl {
    border-top: 1px solid #eee;
}

.brandList dt {
    width: 200px;
    padding: 30px 15px;
}

.brandList dd {
    padding: 0 5em;
    vertical-align: middle;
}

.brandList dd p {
    line-height: 1.8;
}

.brand-logo {
}


/*團隊*/


/* .teamList {}

.teamList>li {
    width: 31%;
    margin: 0 1% 50px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: 0.5s;
} */


/*Tony 2022.1.6*/


/*加上hover時box-shadow*/


/* about new */

.teamList {
    display: flex;
    flex-wrap: wrap;
    gap: 50px 16px;
}

.teamItem {
    flex: 0 0 calc(33.33% - 16px);
    position: relative;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.5s;
}

.teamItem-inner {
    position: relative;
    max-width: 230px;
    margin: auto;
    padding: 20px;
}

.teamItem:hover {
    box-shadow: 0 0 15px #0EC4A3;
}

.teamItem .pic {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin-bottom: 16px;
}

.teamItem .pic img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.teamItem .team-name {
}

.teamItem .team-txt {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

@media (max-width: 768px) {
    .teamItem {
        flex: 0 0 calc(50% - 16px);
    }
}

@media (max-width: 375px) {
    .teamItem {
        flex: 0 0 100%;
    }
}


/* 舊版about 團隊舊版 */


/* .teamList>li:hover {
    box-shadow: 0 0 15px #0EC4A3;
}

.teamList>li aside {
    padding-bottom: 100%;
    border: 1px solid #eee;
}

.teamList>li .team-name {
    position: relative;
    width: 230px;
    bottom: 0;
    left: 0;
    text-align: left; */


/* background: rgba(14, 201, 168, 0.8); */


/* z-index: 10;
    color: #000000;
    padding: 0.5em 1em;
    transition: all 0.7s;
    opacity: 1;
    text-align: center;
}

.teamList>li .team-name h4 {
    margin-bottom: 0.2em;
    font-weight: 500;
} */


/* .teamList>li .team-txt {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.7s;
    background: rgba(14, 201, 168, 0.9);
    text-align: left;
    left: 0;
    top: 0;
    color: #fff;
    padding: 20px;
    line-height: 1.5;
}

.teamList>li .team-txt ol {
    list-style: disc;
}

.teamList>li .team-txt ol li {
    margin-bottom: 0.5em;
}

.teamList>li:hover .team-name {
    opacity: 1;
} */


/* .teamList > li:hover .team-txt {
    opacity: 1;
  } */


/* lod */


/*old line*/

.historyList dl {
    margin-bottom: 40px;
}

.historyList dt {
    width: 120px;
    color: #ff8c00;
    font-size: 26px;
    border-right: 1px solid #a8a8a8;
    font-weight: 700;
    position: relative;
}

.historyList dt:before {
    font-size: 13px;
    content: "AD.";
}

.historyList dt:after {
    width: 12px;
    height: 12px;
    background: #007e7d;
    right: -6px;
    top: calc(50% - 6px);
    position: absolute;
    content: "";
    /*border-radius:100%;*/
}

.historyList dd {
    padding-left: 50px;
}

.historyList dd ul li {
    margin: 0.5em 0;
}

.historyList dd ul li span {
    display: inline-block;
    vertical-align: top;
    width: 55px;
    font-weight: 600;
    background: #e5e5e5;
    text-align: center;
    border-radius: 10px;
    line-height: 1.8;
}

.historyList dd ul li span:after {
    content: "月";
    font-weight: 500;
    font-size: 12px;
}

.historyList dd ul li p {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 70px);
    margin-left: 3px;
    margin-bottom: 0;
    font-size: 14px;
}


/*榮譽事蹟*/

.honorList {
    display: flex;
    flex-wrap: wrap;
}

.honorList li {
    width: 23%;
    margin: 1% 1%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.honorList li aside {
    /*height:120px;*/
    padding: 10px;
}

.honorList li p {
    padding: 0 1em;
    font-size: 15px;
    margin-bottom: 0;
    height: 3em;
    line-height: 3;
    text-align: center;
    display: none;
}

.honorList li a {
}

.honorList li a button {
    line-height: 2;
    max-width: none;
    display: none;
}


/*mapList*/

.mapList {
}


/* honor */

.honor__wrap {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.honor__row {
}

.honor__row-title {
    position: relative;
    margin-bottom: 32px;
    color: var(--main-color);
    text-align: center;
}

.honor__row-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: var(--main-color);
    display: block;
}

.honor__row-title .txt {
    position: relative;
    z-index: 2;
    /* background-color: #fff; */
    padding: 0.5rem;
    background-color: #fff;
}

.honor__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}

.honor__item {
    flex: 0 1 calc(33.33% - 32px);
}

.honor__item-inner {
    border: 1px solid #F5F5F5;
    padding: 10px;
    box-shadow: 0px 5px 10px rgba(129, 129, 129, 0.15);
    border-radius: 8px;
}

.honor__item-img {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 140.625%;
    overflow: hidden;
}

.honor__item-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.honor__item-name {
    color: #212121;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: calc(17px * 2 * 2);
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.honor__item-name:after {
    content: '...';
    text-align: right;
    bottom: 0;
    right: 0;
    width: 25%;
    display: block;
    position: absolute;
    height: calc(1em * 1.5);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}

:root {
    --main-color: #007e7d;
}

.mapList > li {
    margin-bottom: 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 9px 0px rgba(0, 0, 0, 0.11);
}

.mapList li dt {
    width: 320px;
    padding: 0 20px;
    position: relative;
}

.mapList li dt li {
    font-weight: 500;
    margin-bottom: 0.2em;
    font-size: 13px;
}

/* 20221205alen */
.mapList li dt h3 {

    font-size: 15px;
    padding: 0 1em;
    font-weight: 400;
    color: #fff;
    position: absolute;
    line-height: 2.2;
    left: 20px;
    top: 15px;
    width: 140px;
    background: #007e7d;
}

/* 20221205alen */
.mapList li:first-child dt h3 {
    background: #007e7d;
}

.mapList li dd .map {
    padding-bottom: 30%;
    position: relative;
}

.mapList li dd .map iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.mapbtn {
    font-weight: 400;
    border-width: 2px;
    font-style: normal;
    letter-spacing: 1px;
    margin: 0.4rem 0;
    white-space: normal;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    padding: 1rem 3rem;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    background-color: #2099b6;
    color: #ffffff;
    border: 1px solid rgba(156, 39, 176);
}

.mapbtn:hover {
    color: #fff !important;
    background-color: #0d6786 !important;
    border-color: #0d6786 !important;
}


/*sitemapList*/

.sitemapList {
    max-width: 1300px;
    margin: auto;
}

.sitemapList .about,
.sitemapList .service,
.sitemapList .solution,
.sitemapList .learning,
.sitemapList .news,
.sitemapList .Terms,
.sitemapList .Others,
.sitemapList .Fanstalk {
    float: left;
    width: 25%;
    text-align: center;
    min-height: 250px;
}

.sitemapList h2 {
    color: #2099b6;
    margin-bottom: 5px;
}


/* cookiealert */

.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #ecf0f1;
    background: #007e7d;
}

.alert {
    padding: 10px;
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
    text-decoration: underline;
}

.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
}


/*end cookiealert */


/*人才招募*/

.resourceZone {
}

.resourceZone .container {
    max-width: 1000px;
}

.resourceList > div {
    margin-bottom: 10px;
}

.resourceList > div aside {
    height: 140px;
    background: #fff;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
    position: relative;
    border-radius: 10px;
    border: 1px solid #eee;
}

.resourceList > div aside:after {
    background: #999;
    height: 8px;
    width: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    transition: all 0.5s;
}

.resourceList > div:hover aside:after {
    background: #007e7d;
    width: 100%;
}

.resourceList > div a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    padding: 20px;
}

.resource-txt {
    margin-bottom: 2em;
}


/*---*/

.green {
    color: #007e7d;
}


/* 20221004 AuOzzy */


/* about*/

.follow_us__wrap {
    gap: 16px 0;
}

.follow_us__item-link {
    display: block;
    max-width: 150px;
    margin: auto;
    /* display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; */
}

.follow_us__item-link img {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 120%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* web_map */
.web_map_title {
    text-align: center;

}

.web_map_li {
    font-size: 20px;
    display: block;
}

.web_map_ul_box {
    display: flex;
    width: 100%;
}

.web_map_ul {
    width: 100%;
}

.web_map_title:after {
    display: table-cell;
    vertical-align: middle;
    content: "";
    width: 50%;
    border-top: 1px solid #007e7d;
}

.web_map_list {
}