@charset "utf-8";
/* CSS Document */
body.home .content.small{font-size: 95%;}
body.home .content.medium{font-size:100%;}

body.home .content {padding: 0 10px;}
body.home .content.big{font-size:105%}
/*內頁*/
.main_home {
    background-color: #f0f0f0;
    background-image: url(../images/template/fat_bg.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    padding-bottom: 30%;
    position: relative;
}

.main_home .container {padding: 15px;}
.bread {
    position: relative;
    display: inline-block;
    width: 100%;
}

.bread a.accesskey {
    position: absolute;
    left: 0;
    top: 10px;
    opacity: 0.5;
    color: #555;
}

.bread .breadcrumb {
    background-color: transparent;
    margin: 0;
}

.bread .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "-";
}

.bread .breadcrumb li:nth-child(1) a {
    text-indent: -9999px;
    background-image: url(../images/home/ic_home.svg);
    background-position: center;
    width: 15px;
    height: 23px;
    display: block;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.bread .breadcrumb li a {
    color: #808080;
}

.bread .breadcrumb li.active,.bread .breadcrumb li.active a {
    color: #000;
}

.bread .back svg{
    width: 21px;
    margin: -3px 5px 0 0;
    height: 21px;
}

.bread .back a {
    color: #525151;
}

.bread .back a:hover svg .a {
    fill: #000;
}

.bread .back a:hover svg .b {
    stroke: #fff;
}
.home_title {
    border-bottom: 2px #318ac0 solid;
}

.home_title h2 {
    font-size: 160%;
    font-weight: bold;
    padding: 5px 0;
}
.set_box {
    position: relative;
    text-align: right;
    padding: 10px 0;
    display: inline-block;
    width: 100%;
}

.set_box .share,.set_box .set {
    position: relative;
}



.set_box .share ul, .set_box .set ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.set_box .share ul li, .set_box .set ul li {
    float: left;
    padding: 3px;
}

.set_box .share ul li a,.set_box .set ul li.print a {
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px;
    color: transparent;
    background-size: cover;
    overflow: hidden;
}

.set_box .share ul li a:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}


.set_box .share ul li.s_line a {
    background-image: url(../images/home/ic_line.svg);
}
.set_box .share ul li.s_plurk a {
    background-image: url(../images/home/ic_plurk.svg);
}
.set_box .share ul li.s_fb a {
    background-image: url(../images/home/ic_fb.svg);
}
.set_box .share ul li.s_twitter a {
    background-image: url(../images/home/ic_twitter.svg);
}
.set_box .share ul li.s_weibo a {
    background-image: url(../images/home/ic_weibo.svg);
}
.set_box .share ul li.s_gamil a {
    background-image: url(../images/home/ic_gamil.svg);
}
.set_box .share ul li.s_outlook a {
    background-image: url(../images/home/ic_outlook.svg);
}
.set_box .share ul li.s_yahoo a {
    background-image: url(../images/home/ic_yahoo.svg);
}
.set_box .set ul li.print a {
    background-image: url(../images/home/ic_print.svg);
    width: 25px;
    height: 25px;
    opacity: 0.4;
}

.set_box .set ul li.print {
    padding: 3px 5px 3px 3px;
}

.set_box .set ul li.w_size a {
    background-color: #e0e0e0;
    display: block;
    width: 25px;
    height: 25px;
    text-align: center;
    color: #000;
    text-decoration: none;
}

.set_box .set ul li.w_size a:hover {
    background-color: #000;
    color: #fff;
}

.set_box .set ul li.w_size.active a {
    background-color: #338ec6;
    color: #fff;
}

.set_box .set ul li.print a:hover {
    opacity: 1;
}
.main_list .list {
    display: -webkit-flex;
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
}

.main_list .list a {
    border-radius: 5px;
    background-color: #fff;
    padding: 20px 45px 20px 20px;
    height: 100%;
    color: #000;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    text-decoration: none;
    position: relative;
}

.main_list .list a::after,.main_list .list02 .s_title::after {content: "";width: 20px;height: 20px;background-image: url(../images/home/ic_arrow01.svg);background-repeat: no-repeat;position: absolute;}

.main_list .list a::after {
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
}

.main_list .list02 .s_title::after {
    bottom: -9px;
    left: 50%;
    transform: translate(-50%);
}

.main_list .list a:hover {
    background-color: #e2e0e0;
}

.main_list .list a p,.main_list .list02 .s_title {
    margin: 0;
    font-size: 120%;
    font-weight: bold;
    line-height: 120%;
}

.main_list .list02 .s_title {
    border-bottom: 1px #cdcdcd solid;
    padding: 0 5px 20px 5px;
    position: relative;
    text-align: center;
}

.main_list .list .col {
    padding: 5px;
}

.main_list .list02 .col {
    padding: 10px;
}
.main_list .list02 .box {
    border-radius: 7px;
    background-color: #fff;
    padding: 15px;
    height: 100%;
}

.main_list .list02 .box .item-icon {
    text-align: center;
    padding: 0 0 7px 0;
    height: 80px;
    position: relative;
}

.main_list .list02 .box .item-icon svg {
    width: 72px;
    fill: #338ec6 !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
height: 65px;}

.main_list .list02 .box ul {
    padding: 5px;
    margin: 10px 0 0 0;
    list-style-type: none;
}

.main_list .list02 .box ul li {
    padding: 5px 0;
    text-align: center;
}

.main_list .list02 .box ul li a {
    color: #555;
    position: relative;
}


.re_pic .list .box .pic {
    background-color: #e1e1e1;
    position: relative;
}

.re_pic .list .box p {
    margin: 0;
    padding: 10px;
    color: #000;
}

.re_pic .list .box {
    height: 100%;
    background-color: #fff;
}

.re_pic .list .box a {
    text-decoration: none;
}

.re_pic .list .col {
    padding: 10px;
}
.repic_box .b_pic img {
    /* width: 100%; */
    /* max-height: 100%; */
    margin: auto;
    /* height: 100%; */
}

.repic_box .b_pic {
    text-align: center;
}

.repic_box .modal-content {
}

.repic_box p {
    margin: 0;
    padding: 5px 0;
}
@media screen and (min-width: 992px) {

    .bread .back {
    position: absolute;
    right: 0;
    bottom: 13px;
}
.set_box .share,.set_box .set {
    display: inline-block;
}
.set_box .share {
    padding: 0 10px 0 0;
}

.set_box .set {
    padding: 0 0 2px 10px;
}
.set_box .share::after {content: "";position: absolute;width: 1px;top: 3px;bottom: 3px;background-color: #bdbdbd;right: 0;}

}
@media screen and (max-width: 992px) {
    .main_home{
    margin-top: 80px;
}
 .bread .back {
    text-align: right;
    padding: 0 15px 10px 0;
}
.set_box .share,.set_box .set {
    clear: both;
    float: right;
    padding: 7px 0 0 0;
}
}
@media screen and (min-width: 576px) {
.re_pic .list .box .pic {
    height: 200px;
}
.re_pic .list  .box .pic img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
}
@media screen and (max-width: 576px) {

.re_pic .list  .box .pic img {
    width: 100%;
}
}
@media screen and (max-width: 320px) {
    .set_box .share,.set_box .set {
    clear: both;
    float: left;
}
}