@charset "utf-8";
@import "./default.css";/*공통으로 사용될 css를 보관함*/

.sub-header{       
    background-image: url(./img/menu20_topbanner.png);
}


/* -START- sub_10_menu20_CSS*/
#chapter01{display: flex; flex-wrap:wrap;}
.perform_box{position: relative; max-width:285px; float: left; margin-bottom: 20px; width: 100%;}
.perform_box2{position: relative; max-width:590px; float: left; margin-bottom: 20px; width: 100%;}
.per_tit{position: absolute; background: rgba(0,0,0,0.6); bottom: 0; left: 0; color:#fff; font-size: 18px; padding: 11px; width: 100%; letter-spacing: -1px;}
.perform_box img{width: 100%;}
.perform_box2 img{width: 100%;}
.mgr20{margin-right: 20px;}


@media (min-width:1024px){
    /*작은 네비 위치 강제로 맞춰줌*/
    .sub-header .com-02{   
        margin-right: 57px;
    }
}
@media (max-width: 1220px) { 
	.perform_box{width: calc(25% - 8px);}
	.perform_box2{width: calc(50% - 5px);}
	.mgr20{margin-right: 10px;}
}

@media (max-width: 1190px) { 
	.container__wr_1200{
        padding: 0px 20px;
    }
}


@media (max-width: 1024px) {    
    
    .sub-header{       
        background-image: url(./img/menu20_topbanner.png);
    }
	.per_tit{font-size: 15px;}
}

@media (max-width: 768px) {
    .container__wr_1200{
        padding: 0px 16px;
    }
    .sub-header{       
        background-image: url(./img/menu20_topbanner.png);
    }
	.per_tit{font-size: 15px;}
	.perform_box{width: calc(50% - 5px); max-width: 100%;}
	.perform_box2{width: 100%; max-width: 100%;}
	.mgr20{margin-right: 0}
	.mgr10{margin-right: 10px;}
	.per_tit{font-size: 14px;}

}
/*// -END- sub_10_menu20_CSS*/