@media screen and (max-width: 768px){
    #promotion_large{
        display:none;
    }
    #promotion_small{
        display:block;
    }
}

@media screen and (min-width: 768px){
    #promotion_large{
		display:block
    }
    #promotion_small{
		display: none;
    }
}

input[type=radio][name="dir"]{
	display: none;
}
li{
	list-style-type: none;
}
.container-carousel{
	position: relative;
	/*width:60%;*/
	/*height:55%;*/
	background: black;
	overflow: hidden;
}
.pic{
	width:100%;
	height:100%;
	overflow: hidden;
}
.pic .box{
	position: relative;
	width:300%;
	height:100%;
	transition: margin 0.8s;
}
.pic .box > img{
	float: left;
	width:calc(100% / 3);
	height:100%;
	color: white;
}
.pic .before_box,
.pic .after_box{
	position: absolute;
	top:0;
	width:200%;
	height:100%;
	opacity:0;
}
.pic .after_box{
	left:0;
}
.pic .before_box{
	right: 0;
}
.pic .after_box img,.pic .before_box img{
	width:50%;
	height:100%;
	float: left;
}
.count{
	display: flex;
	align-items:center;
	justify-content:center;
	position: absolute;
	bottom: 0;
	left:0;
	width:100%;
	height:10%;
	background: transparent;
}
.count > ul{
	display: flex;
	align-items:center;
	justify-content:space-around;
	width:30%;
	height:100%;
}
.count li{
	float: left;
	width:1.2vmax;
	height:1.2vmax;
	border-radius: 50%;
}
.count li label{
	display: block;
	width:14px;
	height:14px;
	background: #989898;
	border-radius: 50%;
	cursor: pointer;
	transition: 0.8s;
}
.count li .btn_1{
	background:white;
}


.dir_box{
	position: absolute;
	top:calc((100% - 100px) / 2);
	display: flex;
	width: 90px;
	height: 90px;
	background: transparent;
}
.left_box{
	left:0;
}
.right_box{
	right:0;
}

.dir_box label{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	width: 100%;
	height: 100%;
	color: white;
	cursor: pointer;
}
.left_box label::after{
	content: "<";
}
.right_box label::after{
	content: ">";
}

.dir_box label{
	display: none;
}
.left_box .left_btn_1{
	display: flex;
}
.right_box .right_btn_1{
	display: flex;
}



/* 每次点击按钮 重置当前焦点按钮的样式 */
input[type=radio][name="dir"]:checked ~ .count label{
    background: #989898;
}
/* 重置当前显示的左右按钮 */
input[type=radio][name="dir"]:checked ~ .dir_box label{
    display: none;
}

/* 下方按钮1 */
#btn1:checked ~ .pic .box{
    margin-left: 0;
}
#btn1:checked ~ .count .btn_1{
    background: white;
}
#btn1:checked ~ .dir_box .btn_btn_1{
    display: flex;
}

/* 下方按钮2 */
#btn2:checked ~ .pic .box{
    margin-left: -100%;
}
#btn2:checked ~ .count .btn_2{
    background:white;
}
#btn2:checked ~ .dir_box .btn_btn_2{
    display: flex;
}

/* 下方按钮3 */
#btn3:checked ~ .pic .box{
    margin-left: -200%;
}
#btn3:checked ~ .count .btn_3{
    background:white;
}
#btn3:checked ~ .dir_box .btn_btn_3{
    display: flex;
}




/* 左边第一个按钮 */
#left_btn1:checked ~ .pic .box{
    margin-left: -200%;

}
#left_btn1:checked ~ .count .btn_3{
    background:white;
}
#left_btn1:checked ~ .pic .before_box{
    transition: right 0.8s;
    opacity:1;
    right:-100%;
}
#left_btn1:checked ~ .dir_box .btn_btn_3{
    display: flex;
}

/* 右边第一个按钮 */
#right_btn1:checked ~ .pic .box{
    margin-left: -100%;
}
#right_btn1:checked ~ .count .btn_2{
    background:white;
}
#right_btn1:checked ~ .dir_box .btn_btn_2{
    display: flex;
}

/* 左边第二个按钮 */
#left_btn2:checked ~ .pic .box{
    margin-left: 0;
}
#left_btn2:checked ~ .count .btn_1{
    background:white;
}
#left_btn2:checked ~ .dir_box .btn_btn_1{
    display: flex;
}

/* 右边第二个按钮 */
#right_btn2:checked ~ .pic .box{
    margin-left: -200%;
}
#right_btn2:checked ~ .count .btn_3{
    background:white;
}
#right_btn2:checked ~ .dir_box .btn_btn_3{
    display: flex;
}

/* 左边第三个按钮 */
#left_btn3:checked ~ .pic .box{
    margin-left: -100%;
    /*transition: margin 0.8s 0s;*/
}
#left_btn3:checked ~ .count .btn_2{
    background:white;
}
#left_btn3:checked ~ .dir_box .btn_btn_2{
    display: flex;
}

/* 右边第三个按钮 */

#right_btn3:checked ~ .pic .box{
    margin-left: -300%;
    transition: margin 0.8s 0s;
}
#right_btn3:checked ~ .pic .after_box{
    transition: left 0.8s;
    opacity:1;
    left:-100%;
}
#right_btn3:checked ~ .pic .box {
    margin-left: 0;
    transition: margin 0.8s 0s;
}
#right_btn3:checked ~ .count .btn_1{
    background:white;
}
#right_btn3:checked ~ .dir_box .btn_btn_1{
    display: flex;
}