@import url(./common.css);

	body {
		background: #0e0e0e;
		padding-top: 156px;
	}

	a {
		color: #fff;
	}

	.flex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	.topWrap{
		width: 100%;
		left: 0;
		top: 0;
		position: fixed;
		z-index: 9;
		background-color: #0e0e0e;
	}
	.topTitle {
		padding: 15px 5%;
	}

	.topUser {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		color: #fff;
		text-transform: uppercase;
	}

	.signIn {
		font-size: 10px;
		line-height: 14px;
		padding: 8px 16px;
		margin-left: 20px;
		background-color: rgba(50, 53, 56, 0.64);
		border-radius: 100px;
		cursor: pointer;
	}

	.signIn:hover {
		background: rgba(73, 75, 78, 0.16);
	}

	.topNav {
		padding: 15px 10%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: rgb(10, 27, 27);
	}

	.topNav .list {
		padding: 8px 18px;
		font-size: 16px;
		line-height: 30px;
		color: rgba(255, 255, 255, 0.6);
		cursor: pointer;
		white-space: nowrap;
	}

	.topNav .list:hover {
		color: #fff;
	}

	.plan {
		padding: 15px 15%;
		color: #fff;
	}

	.planBox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 15px 0%;
	}

	.planList {
		background: linear-gradient(45deg, rgb(0, 18, 17) 0%, rgb(0, 18, 17) 50%, rgb(1, 47, 47) 100%);
		padding: 24px;
		border-radius: 24px;
		border: 2px solid rgba(255, 255, 255, 0.16);
		width: 48%;
		margin: 15px 1%;
	}

	.plan .con {
		font-size: 16px;
		    line-height: 18px;
		    height: 72px;
	}

	.stream {
		background: #ebeae9;
		padding: 15px 15%;
		border-bottom: 1px solid #dbd9d7;
	}

	.stream .con {
		padding: 25px 0%;
		    /* flex: 1; */
		    position: relative;
		    margin-left: 10%;
		    width: 40%;
	}

	.streamBox {
		display: flex;
		    flex-wrap: wrap;
		    align-items: center;
		    margin: 40px 0 30px;
	}

	.stream .listNav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.stream .listNav div {
		font-size: 18px;
		padding: 5px;
		margin-right: 15px;
		border-bottom: 2px solid #ebeae9;
		cursor: pointer;
	}

	.stream .listNav div.active {
		font-weight: 700;
		border-bottom: 2px solid #000000;
	}
	.stream .listCon{
		
	}
	.stream .title {
		font-weight: 700;
		font-size: 32px;
		margin: 40px 0 20px;
	}

	.stream .content {
		font-size: 16px;
		line-height: 26px;
	}

	.sImg {
		width: 40%;
		border: 4px solid #cbc3c3;
		padding: 5px;
	}

	.sImg img {
		width: 100%;
	}

	.channel {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		background: #ebeae9;
		padding: 20px 15%;
	}

	.channel .title {
		font-weight: bold;
		margin-bottom: 25px;
	}

	.channel .cLeft {
		width: 50%;
	}

	.channel .cLeft .cCon {
		padding-right: 40%;
		font-size: 16px;
	}

	.channel .cLeft .info {
		font-size: 14px;
	}

	.channel .cRight {
		padding: 15px 0;
		width: 50%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.channel .btnP {
		margin-top: 25px;
	}
	.channel .cRight .imgox{
		width: 14.6%;
		margin: 10px 0.7%;
		background: #0e0e0e;
		box-shadow: 3px 3px 1px 1px #c6c5c3;
	}
	.channel .cRight img {
		width: 100%;
	}

	.device {
		padding: 20px 15%;
		border-bottom: 1px solid #272222;
	}

	.device .title {
		margin: 20px 0 40px;
		color: #fff;
	}
	.device .deviceImg{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.device img {
		width: 13.6%;
		margin: 15px 1.5%;
	}

	.bottom {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 30px 15%;
	}

	.bottomR {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
	}

	.bottom .bottomR .listBox {
		margin-left: 30px;
	}

	.bottom .listBox .title img {
		height: 30px;
	}

	.bottom .listBox div {
		cursor: pointer;
		font-size: 12px;
		line-height: 14px;
		margin: 15px 0;
		color: #fff;
	}

	.bottom .listBox div:hover {
		text-decoration: underline;
	}

	.bottomR .listBox .title {
		font-size: 16px;
	}

	.btnC {
		font-size: 10px;
		line-height: 14px;
		padding: 8px 16px;
		display: flex;
		flex-wrap: wrap;
		flex: 1 1 0%;
		cursor: pointer;
		appearance: none;
		text-decoration: none;
		letter-spacing: 0.08em;
		white-space: nowrap;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		border-width: 0px;
		border-style: solid;
		margin: 0px;
		transition: 300ms;
		text-transform: uppercase;
		border-radius: 100px;
		position: relative;
		width: fit-content;
		color: rgb(255, 255, 255);
		background: linear-gradient(#f47c20 0%, #ee342c 50%, #ee203b 100%);
	}

	.btnP {
		font-size: 14px;
		line-height: 16px;
		font-weight: bold;
		padding: 12px 20px;
		display: flex;
		flex-wrap: wrap;
		flex: 1 1 0%;
		cursor: pointer;
		appearance: none;
		text-decoration: none;
		letter-spacing: 0.08em;
		white-space: nowrap;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		border-width: 0px;
		border-style: solid;
		margin: 0px;
		transition: 300ms;
		text-transform: uppercase;
		border-radius: 100px;
		position: relative;
		width: fit-content;
		color: rgb(255, 255, 255);
		background: linear-gradient(#f47c20 0%, #ee342c 50%, #ee203b 100%);
		width: 100%;
	}


	@media (min-width: 768px) and (max-width: 991px) {

		.plan,
		.stream,
		.channel,
		.device,
		.bottom {
			padding: 15px 5%;
		}
		.stream .con {
			width: 50%;
		}
		.streamBox,.stream .listCon{
			margin: 0;
		}
		.topNav {
			padding: 15px 3%;
		}

		.channel .cLeft .cCon {
			padding-right: 10%;
		}
	}



	@media (max-width: 767px) {

		.plan,
		.stream,
		.channel,
		.device,
		.bottom {
			padding: 15px 5%;
		}
		h1{
			font-size: 30px;
		}
		.topNav {
			padding: 15px 1%;
		}

		.topNav .list {
			padding: 8px;
		}
		.stream .con{
			width: 100%;
			padding: 0;
			margin: 0;
		}
		.streamBox .sImg {
			display: none;
		}

		.channel .cLeft,
		.channel .cRight,
		.planList {
			width: 100%;
		}

		.channel .cLeft .cCon {
			padding-right: 10%;
		}

		.bottom .bottomR .listBox {
			margin: 0 30px 0 0;
		}
	}


	@media (min-width: 1200px) {
		.searchBox {
			min-width: 500px;
		}
	}