@charset "utf-8";
@media screen and (max-width: 767px) {
/* =========================================================
		control　panels
========================================================= */
#template_container{width: 100%;}	
#control #container_playground .pannels_wrapper {
    width: 92%;
    margin: 5% auto 35%;
    padding: 7% 5%;
    border-radius: 8px;
    display: block;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
}	
#container_playground .pannels_detail{
	width: 100%;
	margin-top: 0;
	
}
#container_playground .pannels_detail p{
	 line-height: 1.55;
    font-size: 15px;
}
#container_playground .pannels_detail h3{
	font-size: 17px;
	padding-bottom: 2%;
}	
	

#container_playground .block_btn_area {margin: 6% auto 8%;}

#control .panels .pannels_wrapper {
    padding-bottom: 0;
    width: 90%;
    margin: 0 auto 40%;
}	
#control #container_playground ul {
    padding-left: 0;
    width: 100%;
    padding: 5%;
    background: #eee;
    border-radius: 4px;
    margin: 0 auto;
}
#playground li, #connaect li {
    margin-bottom: 10px;
    padding: 8px 10px;
}	
	
/********* modal *********/





#control .panels .btn_close {font-size: 40px; right: 5px; top: 5px;}	

#control ul {width: 80%;}
#control #bench{
	margin: 14% auto 0;
	width: 100%;
   
}
#control #bench li {
        display: flex;
        flex-wrap: wrap;
        width: 48%;
        padding: 0;
        margin-bottom: 7%;
        justify-content: space-between;
        margin-right: 4%;
}
#control #bench li:nth-child(2n){
		margin-right: 0;
	}
#control #bench li .thumbnail {
    width: 100%;
}
#control #bench li .thumbnail img{
    height: 27vw;
}		
#control #bench li .bench_ttl {
    width: 100%;
}
/*********bottom control_panel*********/
#control #control_panel .control_panel_inner{width: 96%; position: relative; margin: 0 auto; height: auto; display: block; padding: 4% 0 3%;}
.control_panel_area1, .control_panel_area3{
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
.control_panel_area1{justify-content: center;}
.control_panel_area3{margin-top: 3%; padding: 0 1%;}	
#block_operation_btn{position: static; left:inherit; top: inherit; margin: 0 1%;}
#control #control_panel .preview_btn{position: static; left:inherit; top: inherit; margin: 0 1%;}
#control #control_panel .pannel_logo{width: 63px; margin: 0 auto 0; position: static; right:inherit; top: inherit; transform: none;}
#control_panel .btn {margin: 0 1%;}
#control_panel .back_btn{margin-right: 1%; margin-left:0;}
#control_panel .guidance_btn{margin-left: 1%; margin-right: 0;}	
#control_panel .publish_btn{width: 16%;}
@media (orientation: landscape){
    #modal .func-modal-zoom {
        margin: 2% auto 0;
        width: 70%;
        height: 67%;
    }
	}
}