@import 'https://uddlive.ginnet.cloud/cgust/css/reset.css';

body {
    font-family: "Microsoft JhengHei", sans-serif;
    background-image: url('https://uddlive.ginnet.cloud/cgust/images/BG_n_1920_v3.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center 150px;
    background-size: auto 100%;
}

.menu {
    height: 115px;
    width: 100vw;
    background-color: #F49D39;
    float: top;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu .banner .logo {
    background: url('https://uddlive.ginnet.cloud/cgust/images/logo.png') no-repeat;
    background-size: 270px auto;
	align-items: center;
    justify-content: center;
    height: 55px;
    width: 270px;
}

.title {
    padding: 15px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px 0 rgb(245 138 34 / 35%);
    font-weight: bold;
    font-size: 1.8em;
	color: #5C3D1F;
}

.player-content {
    width: 45%;
    margin: 3em auto;
}

.player-embed {
    position: relative;
    padding-bottom: 56.25%;
	margin: 2em auto;
    overflow: hidden;
}

.player-embed-iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

.information {
    margin-top: 30px;
    padding: 20px;
	opacity: 80%;
    background: linear-gradient(#ffb576, #ff7600);
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    font-size: 1.4em;
    border-style: solid;
    border-color: #F49D39;
    border-width: 3px;
}
.grid-container{
	opacity: 85%;
    background: linear-gradient(#c7c5c3, #524d49);
    width: 100vw;
    display: flex;
    align-items: center;
    justify-items: center;
}
.wrapper {
    width: 50%;  
	display: grid;
	margin: auto;
    color: #fff;  
    grid-auto-flow: dense;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px 10px;
    grid-auto-rows: minmax(30px, auto);
    justify-items: center;
    font-size: 1em;
}
.wrapper-2 {
    width: 40%;  
	display: grid;
	margin: auto;
    color: #fff;  
    grid-auto-flow: dense;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px 10px;
    grid-auto-rows: minmax(30px, auto);
    justify-items: center;
    font-size: 1em;
}
.wrapper-3 {
    width: 70%;  
	display: grid;
	margin: auto;
    color: #fff;  
    grid-auto-flow: dense;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px 10px;
    grid-auto-rows: minmax(30px, auto);
    justify-items: center;
    font-size: 1em;
}
.wrapper-4 {
    width: 50%;
    display: grid;
    margin: auto;
    color: #fff;
    grid-auto-flow: dense;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px 10px;
    grid-auto-rows: minmax(30px, auto);
    justify-items: center;
    font-size: 1em;
}
.wrapper-4 .th-1{
    align-self: end;
    grid-column: 1;
    grid-row: 1;
}
.wrapper-4 .th-2{
    align-self: end;
    grid-column: 3;
    grid-row: 1;
}
.wrapper-4 .td-1{
    align-self: start;
    font-size: 1.1em;
    font-weight: bold;
    grid-column: 1;
    grid-row: 2;
}
.wrapper-4 .td-2{
    align-self: start;
    font-size: 1.1em;
    font-weight: bold;
    grid-column: 3;
    grid-row: 2;
}
.wrapper-4 .td-3{
    justify-self:center;
    align-self: center;
    font-size: 0.9em;
    grid-column: 1;
    grid-row: 3;
}
.wrapper-4 .td-4{
    justify-self:center;
    align-self: center;
    font-size: 0.9em;
    grid-column: 2;
    grid-row: 3;
}
.wrapper-4 .td-5{
    justify-self:center;
    align-self: center;
    font-size: 0.9em;
    grid-column: 3;
    grid-row: 3;
}

.wrapper-4 .td-end{
    grid-column: 1;
    grid-row: 4;
}

.th-1{
    align-self: end;
    grid-column: 1;
    grid-row: 1;
}
.th-2{
    align-self: end;
    grid-column: 2;
    grid-row: 1;
}
.td-1{
    align-self: start;
    font-size: 1.1em;
    font-weight: bold;
    grid-column: 1;
    grid-row: 2;
}
.td-2{
    align-self: start;
    font-size: 1.1em;
    font-weight: bold;
    grid-column: 2;
    grid-row: 2;
}
.td-3{
    justify-self:end;
	align-self: center;
    font-size: 0.9em;
    grid-column: span 2;
    grid-row: span 2;
}
.td-31{
    justify-self:end;
	align-self: center;
    font-size: 0.9em;
	grid-column: 3;
    grid-row: span 2;
}
.td-32{
    justify-self:end;
	align-self: center;
    font-size: 0.9em;
    grid-column: 4;
    grid-row: span 2;
}
.btn-link{
    padding: 5px 15px;
    font-size: 16px;
    line-height: 30px;
    font-weight: 700;
    transition: 0.3s ease-in;
    border-radius: 35px;
    background:#fff;
    border: 2px solid transparent;
    color:#F49D39;
    box-shadow: 8px 8px 18px 0 rgb(244 157 57 / 5%);
    -webkit-box-shadow: 8px 8px 18px 0 rgb(244 157 57 / 5%);
    -moz-box-shadow: 8px 8px 18px 0 rgb(244 157 57 / 5%);
}
.btn-link:hover {
  background:#F49D39;
  color: #fff;
  box-shadow: 8px 8px 18px 0 rgb(244 157 57 / 30%);
  -webkit-box-shadow: 8px 8px 18px 0 rgb(244 157 57 / 30%);
  -moz-box-shadow: 8px 8px 18px 0 rgba(244, 157, 57, .3);
}

.info-left {
	/**/
}

.info-right {
    float: right;
}

.info-right a {
    color: white;
}

.info-right a:hover {
    color: #0070db;
}

@media screen and (max-width: 1440px) {
    .player-content {
        margin: 1em auto;
    }
}

@media screen and (max-width: 1080px) {
    .wrapper {
        width: 65%;  
	}
	.wrapper-2 {
        width: 55%;  
	}
	.wrapper-3 {
        width: 85%;  
	}
    .wrapper-4 {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }
    .wrapper-4 .th-2{
        grid-column: 2;
    }
    .wrapper-4 .td-2{
        grid-column: 2;
    }
    .wrapper-4 .td-3 {
        grid-column: span 2;
        grid-row: auto;
        justify-self:center;
        align-self: end;
    }
    .wrapper-4 .td-4 {
        grid-column: span 2;
        grid-row: auto;
        justify-self:center;
    }
    .wrapper-4 .td-5 {
        grid-column: span 2;
        grid-row: auto;
        justify-self:center;
    }
    .wrapper-4 .td-end {
        grid-column: auto;
        grid-row: auto;
    }
}

@media screen and (max-width: 830px) {
    .wrapper {
        width: 75%;  
	}
	.wrapper-3 {
        width: 100%;  
	}
    .wrapper-4 {
        width: 100%;
    }
}
@media screen and (max-width: 720px) {
    .wrapper {
        width: 90%;  
	}
	.wrapper-3 {
        width: 100%;  
        grid-template-columns: repeat(2, 1fr);
    }
	.td-31 {
	    grid-column: span 2;
		justify-self:center;
	}
	.td-32 {
		grid-column: 1;
	    grid-column: span 2;
		justify-self:center;
		align-self: start;
	}
}

@media screen and (max-width: 630px) {
    .player-content {
        width: 100%;
    }

    .info-right-parting {
        display: none;
		margin: 1em;
    }

    .info-right {
        display: block;
        text-align: right;
        padding-top: 10px;
        float: none;
    }
	.wrapper {
        width: 100%;  
        grid-template-columns: repeat(2, 1fr);
    }
	.wrapper-2 {
        width: 100%;  
        grid-template-columns: repeat(2, 1fr);
    }
	.td-3{
        justify-self:center;
	}
}