@charset "UTF-8";
    /* CSS Document */
    
    .banPos {position: relative; width:100%; height: 600px; overflow: hidden; background-image: url(../img/HeadBanner_1600_470_29.jpg); background-size: cover; background-position: center; }
	#livePlayer { position: relative; width:70%; height: auto; margin: 35px auto 0 auto; overflow: hidden;}

    .chBtnWrap { position: relative; width: 100%; height: auto; }
    .chBtnBar { position: relative; width:100%; height: 60px; background-color: #DEDFE0; }
    .chBarCon { 
		position: relative; 
		max-width: 1178px; 
		margin: 0 auto;  
	}

	.chLeftCon { 
		position: relative; float: left;
		box-sizing: border-box;
		/* width: 58.4%; */
		width: 25%;  
		height:60px;
		margin: 0 0 0 0.1%;  
		text-align: center; 
		vertical-align: middle; 
		background-color: #6D7B95; 
	}
	.chLeftBlk { position: relative; width:100%; height: 100%; }
	.chLiveIcon { position: relative; float: left; width:60px; box-sizing: border-box; padding: 12px; background-color: #B1BABF; }
	.chTxtWrap { 
		position: relative; float: left; 
		width: calc(100% - 60px); height:60px;
		display: flex; align-items: center; justify-content: center; text-align: center;
	}
	.chTxtBlk { position: relative; display: inline-block; }
	.liveTxt {  display: inline; font-family: ProximaNova_Thin, Arial, Helvetica, sans-serif; vertical-align: middle;  font-size: 32px; letter-spacing: 4px; color: aliceblue; }
	.liveTxt.en { 
		/* font-size: 38px; */
		font-size: 32px;  
		letter-spacing: 4px; 
	}
	.chRightCon { 
		position: relative; float: left;  
		display: flex; align-items: center; justify-content: center; 
		/* width: 41.4%; */
		width: 74.8%;
		height:60px;
		margin: 0 0.1% 0 0; 
		text-align: center; vertical-align: middle; 
		background-color: #475368; 
	}
	.timeTxt {  display: inline; font-family: ProximaNova_Thin, Arial, Helvetica, sans-serif; vertical-align: middle; font-size: 38px; letter-spacing: 4px; color: aliceblue; }
	.chButtonContainer { 
		position: relative; 
		max-width: 1178px;
		margin: 0 auto;
		height: auto;
		display: flex; 
		flex-flow: row nowrap;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	.chBx { 
		position: relative;
		width: 8.3%;  
		margin: 0 0.1%; 
		flex: 0 1 auto;
		align-self: auto;
		min-width: 0;
		min-height: auto;
		cursor: pointer;

		display: flex; 
		flex-flow: row nowrap;
		justify-content: center;
		align-content: center;
		align-items: center;

		background-color: #C1CBD2;
		transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	}
	.chBx:after {
		content: "";
		display: block;
		padding-bottom: 100%;
	}
	.chBx:hover {
		-webkit-border-radius: 50%;
		-khtml-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	.chBx.active {
		background: #b83821;
		-webkit-border-radius: 50%;
		-khtml-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	.chBx.active .chNum{ color: rgb(229, 238, 247); font-size: 28px; }
	.chBx:hover .chNum{ 
		font-size: 26px;
	}
	.chNum {
		font-family: ProximaNova_Thin, Arial, Helvetica, sans-serif;
		color: rgb(37, 44, 51);
		font-size: 24px; text-align: center; letter-spacing: 4px;
		vertical-align: middle;
	}
	.chNum.tx { font-size: 22px; }

	.chButtonControl { 
		position: relative; 
		max-width: 1178px;
		margin: 0 auto;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-around;
	}
	.chButton {
		position: relative; 
		width:8.8%; 
    	background:gold;

		display: flex; 
		flex-flow: row nowrap;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	.chButton:after {
		content: "";
		display: block;
		padding-bottom: 100%;
	}
	.chHiBx {
		position: absolute;
		top:0; bottom: 0; right: 0; left:0;
		background-color: #ce381e;
		opacity: 0;
		cursor: pointer;
		color: rgb(37, 44, 51);
		transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

		display: flex; 
		flex-flow: row nowrap;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	.chHiBx:hover {
		color: #fff;
		line-height: 52px;
		opacity: 1;
		-webkit-border-radius: 50%;
		-khtml-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	.chHiBx:hover .chNumBx { font-size: 28px; }
	.chHiBx:hover .chNumBx { color: #fff; font-weight: 900;}
	.chNumBx {
		position: relative; 
		font-family: ProximaNova_Thin, Arial, Helvetica, sans-serif;
		color: rgb(37, 44, 51);
		font-size: 24px; text-align: center; letter-spacing: 4px;
		vertical-align: middle;
		pointer-events: none;
	}
	.chButtonContainer ul { display: inline;}
	@media screen and (max-width: 1200px) {
		.banPos{ height: 450px;}
		.chBtnBar {height: 50px; }
		.chLeftCon { height: 50px; }
		.chRightCon { height: 50px; }
		.chTxtWrap {float: left; width: calc(100% - 50px); height: 50px; }
		.chLiveIcon { width: 50px; }
		.liveTxt { font-size: 28px; }
		.liveTxt.en { font-size: 32px;}
		.timeTxt { font-size: 28px }
	}
	@media screen and (max-width: 1000px) {
		.mainWrap.land { margin-top: 1px !important;  }
		.chNum { font-size: 20px; letter-spacing: 1px; }
		.chNum.tx { font-size: 18px; }
		.chBx.active .chNum{ color: rgb(229, 238, 247); font-size: 20px; }
		.chBx:hover .chNum{ 
			font-size: 20px; 
			letter-spacing: 1px;
		}
		.chBx.active .chNum.tx {  font-size: 19px; }
		.chBx:hover .chNum.tx { font-size: 19px; }
	}
	@media screen and (max-width: 825px) {
		.chNum { font-size: 18px; letter-spacing: 1px;}
		.chNum.tx { font-size: 17px; }
		.chBx:hover .chNum{ 
			font-size: 20px; 
			letter-spacing: 1px;
		}
	}
	@media screen and (max-width: 760px) {
		.chNum { font-size: 17px; letter-spacing: 1px;}
		.chNum.tx { font-size: 16px; }
		.chBx:hover .chNum{ font-size: 20px; letter-spacing: 1px; }
		.timeTxt { font-size: 24px; letter-spacing: 1px; }
	}
	@media screen and (max-width: 625px) {

		.tt_slider .ttNavNext { position: absolute; top: -1px; right: 0px; z-index: 1; }
		.tt_slider .ttNavPrev { position: absolute; top: -1px; left: 0px; z-index: 1; }

		.chBtnBar { height: 40px; }
		.chLeftCon { height: 40px; }
		.chRightCon { height: 40px; }
		.chLiveIcon { width: 40px; padding: 8px; }
		.chTxtWrap { width: calc(100% - 40px); height: 40px; }
		.liveTxt { font-size: 22px; }
		.liveTxt.en { font-size: 21px; }
		/* .timeTxt { font-size: 22px; } */
		.timeTxt { font-size: 18px; letter-spacing: 0px; }
		.chButtonContainer { 
			flex-flow: wrap;
			justify-content: start;
			background-color: #e7e7ef;
		}
		.chBx { width:16.4%; margin: 0.1% 0.1%; }
		.chBx::after { padding-bottom: 50%; }
		.chBx:hover { -webkit-border-radius: 15px; -khtml-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
		.chBx.active {
		background: #b83821;
		-webkit-border-radius: 15px;
		-khtml-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		}
		.chBx.active .chNum { font-size: 20px; }
		.chNum { font-size: 18px; letter-spacing: 1px; }
		.chNum.tx { font-size: 16px; }
		.chBx:hover .chNum{ font-size: 20px; }
	}
	@media screen and (max-width: 425px) {
		.chBtnBar { height: 30px; }
		.chLeftCon { height: 30px; width: 28%; }
		.chRightCon { height: 30px; width: 71.8%; }
		.chLiveIcon { width: 30px; padding: 6px; }
		.chTxtWrap { width: calc(100% - 30px); height: 30px; }
		.liveTxt { font-size: 17px; letter-spacing: 2px; }
		.liveTxt.en { font-size: 18px; letter-spacing: 1px; }
		.timeTxt { font-size: 15px; letter-spacing: 0px; }

		.chBx { width:16.2%; margin: 0.2% 0.2%; }
		.chBx::after { padding-bottom: 70%; }
		.chBx:hover { -webkit-border-radius: 6px; -khtml-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
		.chNum { font-size: 16px; letter-spacing: 1px;}
		.chNum.tx { font-size: 14px; }
		.chBx:hover .chNum{ font-size: 18px; }
		.chBx.active .chNum{ font-size: 18px; }
		.chBx:hover .chNum.tx{ font-size: 17px; }
		.chBx.active .chNum.tx{ font-size: 17px; }
	}