body {
    min-height: 100%;
}

* {
    padding: 0;
    margin: 0;
    font-size: 17px;
    font-family: LiHei pro, Arial, helvetica,"微軟正黑體";
    list-style: none;
    text-decoration: none;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -webkit-text-size-adjust: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#clear {
    clear: both;
}

/*Header*/
.banner {
    height: 285px;
    width: 100%;
    background-image: url(https://attach.setn.com/website/event/2016olympic/img/banner.jpg);
    background-repeat: no-repeat;
    background-position: center 0%;
}

.title_img_box {
    text-align: center;
    padding-top: 85px;
    padding-right: 50px;
}

.title_img {
    width: 100%;
    height: auto;
    max-width: 550px;
}

.title_bg {
    width: 100%;
    height: 15px;
    background-image: url(https://attach.setn.com/website/event/2016olympic/img/title_bg.gif);
}

.sign_img {
    top: -5px;
    position: relative;
}

/*section*/
#Sports-Girl, #Contestant, #Focus, #message, #Winners {
    width: 100%;
    padding-bottom: 50px;
    padding-top: 50px;
}

#Sports-Girl {
    background-color: #02779E;
    background-image: url(https://attach.setn.com/website/event/2016olympic/img/bg_blue.gif);
    background-position: center 15%;
}

#Contestant {
    background-color: #0fa655;
    background-image: url(https://attach.setn.com/website/event/2016olympic/img/bg_green.gif);
    background-position: center 15%;
}
#Winners {
	width: 100%;
	background-color: #e8171f;
	background-image: url(https://attach.setn.com/website/event/2016olympic/img/bg_red.gif);
}

#Focus {
    width: 100%;
    background-color: #ff8400;
    background-image: url(https://attach.setn.com/website/event/2016olympic/img/bg_yellow.gif);
}

#message {
    width: 100%;
    background-color: #B612CC;
    background-image: url(https://attach.setn.com/website/event/2016olympic/img/bg_purple.gif);
}

.img_all {
    width: 100%;
}

.star_title {
    text-align: center;
    padding-bottom: 10px;
    color: #FFFFFF;
    font-size: 35px;
    font-weight: bold;
}

.star_title2 {
    color: #f6ff00;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 28px;
    font-weight: bold;
    background-image: url(https://attach.setn.com/website/event/2016olympic/img/star2.png);
    background-repeat: no-repeat;
    background-position: 0% 48px;
}

/*banner*/
.banner_bgcolor_box, .banner_bgcolor_box2 {
    justify-content: center;
    width: 100%;
    height: 130px;
    display: inline-flex;
    align-items: center;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.banner_bgcolor_box {
    background-color: #00536f;
}

.banner_bgcolor_box2 {
    background-color: #0a6325;
}

.banner_728x90 {
    width: 100%;
    max-width: 728px;
}

.banner_320x100 {
    display: none;
}

/*Winners*/
.Winners_box {
    width: 95%;
    max-width: 960px;
    margin: 0 auto;
}
.Winners_list_box{
	width: 100%;
	align-content: flex-start;
	display: inline-flex;
	flex-wrap: wrap;
	}
.Winners_list{
	width: 48.5%;
	border: 5px solid #FFFFFF;
	margin-bottom: 5px;
	margin-top: 5px;
	margin-right: 5px;
	margin-left: 5px;
	}
.Winners_img{
	width: 100%;
	}

/*Sports-Girl*/
.vedio_box {
	width: 100%;
	border-top: 5px solid #FFFFFF;
	border-right: 5px solid #FFFFFF;
	border-left: 5px solid #FFFFFF;
	background-color: #FFFFFF;
}

.Sports-Girl_box {
    width: 95%;
    max-width: 960px;
    margin: 0 auto;
}

.vedio_main {
    width: 100%;
}

.Carousel_box {
    width: 95%;
    max-width: 960px;
    margin: 0 auto;
    justify-content: space-between;
    display: flex;
}

.Sports-Girl_box2 {
    width: 95%;
    max-width: 980px;
    margin: 0 auto;
}

.sign_Turn_box {
    align-items: center;
    display: inline-flex;
    padding-right: 10px;
    padding-left: 10px;
}

.sign_Turn {
    width: 35px;
}

.vedio_list_box {
    width: 100%;
    justify-content: space-between;
    display: flex;
}

.vedio_list, .vedio_list2 {
    width: 24%;
    border: 5px solid #FFFFFF;
}

.vedio_list3 {
    width: 23.8%;
    border: 5px solid #FFFFFF;
    align-items: flex-end;
    display: flex;
    background-image: url(http://amedia.sanlih.com.tw/mouse/test/Sports_Girls1.jpg);
    height: 250px;
    background-position: center 0%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

.Sports_Girls_information {
    width: 100%;
    background-color: #000000;
    opacity: 0.8;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 3px;
    color: #FFFFFF;
    height: 80px;
    overflow: auto;
    overflow-X: hidden;
}

.vedio_list3:hover .Sports_Girls_information, .vedio_list4:hover .Sports_Girls_information, .vedio_list5:hover .Sports_Girls_information {
    background-color: #148787;
}

.Sports_Girls_name {
    color: #FF5A5A;
	justify-content: space-between;
	align-items: flex-end;
	display: flex;
}

.Sports_Girls_fb_img {
    width: 18px;
}

    .Sports_Girls_fb_img:hover {
        opacity: 0.4;
    }

.Sports_Girls_word {
    font-size: 15px;
}

.more_img {
    width: 70px;
    height: 28px;
    background-image: url(https://attach.setn.com/website/event/2016olympic/img/more_img.png);
    background-size: 100% 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 13px;
    padding-top: 5px;
    margin-top: 5px;
}

    .more_img:hover {
        background-image: url(https://attach.setn.com/website/event/2016olympic/img/more_img_hover.png);
    }

/*Contestant*/
.Contestant_box {
    width: 95%;
    max-width: 980px;
    margin: 0 auto;
}

.Contestant_menu {
    width: 100%;
    align-content: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
}

.Contestant_button {
    width: 10.4%;
    background-image: url(https://attach.setn.com/website/event/2016olympic/img/button.png);
    background-size: 100% 100%;
    text-align: center;
    line-height: 35px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 5px;
}

    .Contestant_button:hover, .Contestant_button:active {
        background-image: url(https://attach.setn.com/website/event/2016olympic/img/button_hover.png);
    }

    .Contestant_button a {
        color: #FFFFFF;
    }

.Contestant_list_box {
    width: 100%;
    align-content: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    height: auto;
}

.Contestant_list {
    width: 24%;
    border: 2px solid #086023;
    background-color: #FFFFFF;
    height: auto;
    margin-bottom: 10px;
    margin-left: 8px;
}

.Medals_img {
    width: 50px;
}

.Medals_img_box {
    position: relative;
    left: 25px;
    z-index: 999;
    height: 0px;
}

.Contestant_img {
    width: 100%;
    border-radius: 50%;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.Contestant_information {
    width: 100%;
    background-color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    height: 135px;
    overflow-y: hidden;
}

.Contestant_information2 {
    width: 100%;
    background-color: #086023;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    height: 135px;
    overflow-y: hidden;
    display: none;
}

.Contestant_name {
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    color: #1F1F1F;
}

.Contestant_title {
    font-size: 21px;
    font-weight: bold;
    text-align: left;
    color: #fff;
}

.Contestant_word {
    text-align: center;
    color: #4E4E4E;
    line-height: 30px;
}

.Contestant_word2 {
    text-align: left;
    color: #fff;
    line-height: 30px;
}

.Contestant_list:hover .Contestant_information2 {
    display: block;
}

.Contestant_list:hover .Contestant_information {
    display: none;
}

/*message*/
.message_box {
    width: 95%;
    max-width: 980px;
    margin: 0 auto;
}

.fb_message_box {
    width: 100%;
    justify-content: center;
    display: flex;
    background-color: #FFFFFF;
}

.message_box2 {
    width: 100%;
    justify-content: space-between;
    display: flex;
}

.fb_message {
    width: 100%;
    border: 1px solid #D8D8D8;
    height: 400px;
    padding-top: 10px;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.fb_box {
    width: 100%;
    padding-right: 20px;
}

.fans_box {
    width: 400px;
}


/*Focus*/
.Focus_box {
    width: 95%;
    max-width: 980px;
    margin: 0 auto;
}

.Focus_img_box {
    width: 100%;
    background-color: #FFFFFF;
    border: 5px solid #BE5000;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.Focus_img {
    width: 100%;
}

/*footer*/
footer {
    height: 100px;
    width: 100%;
    text-align: center;
    background-image: url(https://attach.setn.com/website/event/2016olympic/img/bg_footer.jpg);
    background-position: center 0%;
    color: #FFFFFF;
    padding-top: 15px;
}

/*gotop*/
#gotop {
    margin: 0;
    display: none;
    ;
    position: fixed;
    right: 20px;
    bottom: 60px;
    padding: 10px 15px;
    color: white;
    cursor: pointer;
    background-image: url(https://www.setn.com/images/black40.png);
    text-align: center;
    font-size: 30px;
    border-radius: 6px;
    z-index: 601;
}

    #gotop h6 {
        margin: 0px;
        padding: 0px;
        font-size: 13px;
        display: block;
    }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .vedio_list3 {
        width: 48.6%;
        height: 350px;
    }

    .Contestant_list {
        margin-left: 5px;
    }

    .Contestant_button {
        width: 10.2%;
    }
	.Sports_Girls_information {
    height: 65px;
}
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
	.Winners_list{
	width: 48%;
	margin-right: 4px;
	margin-left: 4px;
	}
    .Carousel_box {
        width: 95%;
    }

    .vedio_list {
        width: 49%;
    }

    .Sports-Girl_box2 {
        width: 95%;
    }

    .vedio_list3 {
	height: 220px;
	width: 47.7%;
    }

    .vedio_list2 {
        display: none;
    }

    .Contestant_list {
        width: 48%;
        margin-left: 5px;
    }

    .Medals_img {
        width: 65px;
    }

    .Medals_img_box {
        left: 5px;
    }

    .Contestant_button {
        width: 15.2%;
    }

    .fb_box {
        padding-right: 10px;
    }
	.Sports_Girls_information {
    height: 60px;
}
}

@media only screen and (max-width: 480px) {
	/*Winners*/
.Winners_list_box{
	flex-direction:column;
	}
.Winners_list{
	width: 100%;
	margin-right: 0px;
	margin-left: 0px;
	}
	
	
    .banner {
        width: 100%;
        height: 98vh;
        background-image: url(https://attach.setn.com/website/event/2016olympic/img/banner_m.jpg);
        background-repeat: no-repeat;
        background-position: center 0%;
        background-size: 100% auto;
        background-color: #D64923;
    }

    .title_img_box {
        padding-top: 15vh;
        padding-right: 0px;
    }

    .title_bg {
        height: 25px;
    }

    .star_title {
        font-size: 28px;
    }

    .Carousel_box {
        width: 95%;
    }

    .sign_Turn {
        width: 25px;
    }

    .sign_Turn_box {
        padding-right: 5px;
        padding-left: 5px;
    }

    .vedio_list {
        width: 49%;
    }

    .Sports-Girl_box2 {
        width: 95%;
    }

    .vedio_list3 {
        width: 100%;
        height: 280px;
		margin-left: 0px;
		margin-right: 0px;
    }

    .vedio_list2, .vedio_list4, .vedio_list5 {
        display: none;
    }

    .Contestant_list {
        width: 97%;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    .Medals_img {
        width: 70px;
    }

    .Medals_img_box {
        left: 15px;
    }

    .Contestant_button {
        margin-left: 2px;
        margin-right: 2px;
        width: 15%;
    }

        .Contestant_button a {
            font-size: 13px;
        }

    .Contestant_information2 {
        display: block;
    }

    .Contestant_list:hover .Contestant_information {
        display: block;
    }

    .message_box2 {
        flex-direction: column-reverse;
        display: inline-flex;
    }

    .fb_box {
        width: 100%;
        padding-right: 0px;
    }

    .fans_box {
        width: 100%;
    }

    .fans_box2 {
        width: 300px;
        margin: 0 auto;
    }

    footer {
        padding-right: 15px;
        padding-left: 15px;
    }
    /*banner*/
    .banner_bgcolor_box {
        height: 120px;
        padding-right: 9px;
        padding-left: 9px;
    }

    .banner_728x90 {
        display: none;
    }

    .banner_320x100 {
        width: 100%;
        max-width: 320px;
        display: block;
    }

    /*gotop*/
    #gotop {
        padding-top: 5px !important;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
        right: 10px !important;
        bottom: 40px !important;
        width: 50px;
        height: 50px;
        background: rgba(0,0,0,.6) !important;
        font-size: 22px !important;
        border-radius: 3px;
        line-height: 1.125em;
    }
}
