@charset "utf-8";

#main-col ul li div.clearfix { background: #fff; }
#Wrapper { margin-bottom: 40px; }
#Wrapper .row { position: relative; }


/*----------封面底圖----------*/
/*----------slider----------*/
.owl-theme .owl-nav [class*=owl-] { padding: 6px 0 !important; }
#slider { margin-bottom: 20px; }
/*#slider .owl-item i {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0)80%, rgba(255, 255, 255, 0.7)100%);
    background: -moz-linear-gradient(270deg, rgba(255, 255, 255, 0)80%, rgba(255, 255, 255, 0.7)100%);
    background: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0)80%, rgba(255, 255, 255, 0.7)100%);
    background: -o-linear-gradient(270deg, rgba(255, 255, 255, 0)80%, rgba(255, 255, 255, 0.7)100%);
}*/
#slider .owl-dots, #slider .owl-nav { display: none; }
#slider .item .photo {
    /*width: 100vw;*/
    height: 43vw;
    background-repeat: no-repeat;
    background-position: center center;
    /*background-color: #fff;*/
    background-size: cover;
    /*text-align: right;*/
    padding-top: 250px;
    padding-right: 10px;
    /*font-size: 1.2rem;
    line-height: 4rem;*/
    /*border-radius: 17px !important;*/
}



@media only screen and (min-width: 768px) {
    #slider .item .photo { height: calc((100vw - 30px) * 0.43); }
}

@media only screen and (max-width: 1199px) and (min-width: 990px) {
    ul.new-article-index li:nth-child(6) { display: none; }
    #slider .item .photo { height: 396px; border-radius: 17px !important; } /*width: 940px;*/
}

@media only screen and  (min-width: 1199px) {
    ul.new-article-index li:nth-child(6) { display: none; }

/*    #slider { margin-top: 40px; }*/
    #slider .item .photo { height: 480px; border-radius: 17px !important; } /*1140px*/
}

/*#slider {
    background: url('../img/temp/001.png') top center no-repeat;
    background-size: 100% auto;
    height: 350px;
    margin-top: -80px;
}
#slider:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 398px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

@media only screen and (max-width: 768px) {
    #slider { height: 220px; margin-top: -20px; }
    #slider:before { height: 218px; }
}
@media only screen and (max-width: 1199px) and (min-width: 990px) {
    #slider { height: 350px; }
    #slider:before { height: 348px; }
}
@media only screen and (min-width: 1199px) {
    #slider { height: 400px; }
    #slider:before { height: 398px; }
}*/


/*----------文章----------*/
#Wrapper { background: #fff; border-radius: 6px; margin-top: -50px; position: relative; z-index: 99; padding: 30px 20px; }

#part1 .title { margin-bottom: 20px; line-height: 1.2; }
#part1 .title h1 { font-size: 30px; }
#part1 .author { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #432370; }
#part1 .content { font-size: 18px; line-height: 1.5; padding-top: 10px; }
#part1 .content img { max-width: 600px; }
#part1 .content p { margin: 20px 0 20px 0; }
#part1 .content h2 { margin: 20px 0 20px 0; font-size: 24px; font-weight: bold; }
#part1 .content h3 { margin: 20px 0 20px 0; font-size: 20px; font-weight: bold; }
#part1 .content a { color: #337ab7; }

@media only screen and (max-width: 768px) {
    #part1 .content img { max-width: 100%; }
}


/*----------用戶----------*/
hgroup.subject { display: flex; justify-content: space-between; align-items: center; color: #fff; padding: 5px 0; border-radius: 3px; margin: 20px 15px 0; }
hgroup.subject h2 { font-weight: bold; margin: 0; font-size: 22px; }
hgroup.subject div { font-size: 16px; color: #fff; }

.section-new-user { margin-bottom: 60px; }
.section-new-user li .item { background-color: #000; }
.section-new-user li img { position: relative; border-radius: 17px; width: 100%; height: 204.25px; }
.section-new-user li p { position: absolute; color: #fff; }
.section-new-user li p.name { bottom: 30px; left: 15px; background: linear-gradient(to right, #6928BB, #FF1474); border-radius: 30px; font-size: 16px; padding: 5px 10px 5px; max-width: calc(100% - 60px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.section-new-user li p.greeting { bottom: 5px; left: 15px; max-width: calc(100% - 30px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

ul.new-user-index { padding:0; }
ul.new-user-index li { width: 20%; padding: 0; float: left; display: block; }
@media only screen and (min-width: 1199px) {
    ul.new-user-index li:nth-child(6) { display: none; }
}
@media only screen and (max-width: 1199px) and (min-width: 990px) {
    ul.new-user-index li { width: 20%; }
    ul.new-user-index li .item .photo a > img { height: 167.47px; }
    ul.new-user-index li:nth-child(6) { display: none; }
}
@media only screen and (max-width: 990px) and (min-width: 768px) {
    ul.new-user-index li { width: 33.3%; }
    ul.new-user-index li .item .photo a > img { height: calc((90.5vw - 60px) * 0.333); }
}
@media only screen and (max-width: 768px) and (min-width: 640px) {
    ul.new-user-index li { width: 33.3%; }
    ul.new-user-index li .item .photo a > img { height: calc((90.5vw - 60px) * 0.333); }
}
@media only screen and (max-width: 640px) and (min-width: 500px) {
    ul.new-user-index li { width: 50%; /*float: none;*/ }
    ul.new-user-index li .item .photo a > img { width: 100%; height: 44.5vw; }
    hgroup.subject h2 { font-size: 24px; padding: 2px 0; }
    #Wrapper.container, #Wrapper #main-col { padding: 0 }
}

@media only screen and (max-width: 500px) and (min-width: 400px) {
    ul.new-user-index li { width: 50%; /*float: none;*/ }
    ul.new-user-index li .item .photo a > img { width: 100%; height: 44.5vw; }
    hgroup.subject h2 { font-size: 24px; padding: 2px 0; }
    #Wrapper.container, #Wrapper #main-col { padding: 0 }
}

@media only screen and (max-width: 400px) {
    ul.new-user-index li { width: 50%; /*float: none;*/ }
    ul.new-user-index li .item .photo a > img { width: 100%; height: 44.5vw; }
    hgroup.subject h2 { font-size: 24px; padding: 2px 0; }
    #Wrapper.container, #Wrapper #main-col { padding: 0 }
}


/*----------footer----------*/
footer { background: #e21882; }
footer .link { display: flex; flex-direction: row; align-items: center; justify-content: center; }
footer .left { margin-right: 20px; }
footer .right { margin-left: 20px; }
footer .right div { margin-bottom: 10px; }
footer .right .web { background: #a71e93; padding: 10px 5px; border-radius: 10px; }
footer img { width: 100px; }