@media(min-width:2000px) {
.m01_hdl1 .article {width:95%; margin: 0 auto;position:relative;}
.m01_hdl1 .gradation {position: absolute; left:0px;  bottom:10px; width:100%; height: 26%;
        background:#000;
        opacity: 0.6;
        filter:alpha(opacity=60);
        transition: visibility 0.6s, opacity 0.6s linear;
        -webkit-transition: visibility 0.6s, opacity 0.6s linear;
        -moz-transition: visibility 0.6s, opacity 0.6s linear;
        -o-transition: visibility 0.6s, opacity 0.6s linear;

}
.m01_hdl1 {position:relative;box-sizing: border-box; width:100%;float:left; overflow:hidden;}
.m01_hdl1 .art_head_img {width:100%;height:auto;}
.m01_hdl1 .t2 {font-weight:600;position: absolute; margin-left:2%; width:94%; top:250px; font-family:NanumGothic; text-align:justify;color:#fff; f\
ont-size:1.8em; letter-spacing: -0.1em; line-height: 140%;}
.m01_hdl1 .t2 .category {font-size:0.5em; letter-spacing:-0.03em;color:#ddd;}
.m01_hdl1 .t2 a {color:#eee;}
.m01_hdl1 .t3 a {color:#ddd;}
.m01_hdl1 .t3 {font-family:NanumGothic; position: absolute; top:285px;letter-spacing:-0.08em;text-align:justify; font-size:1.2em;width:90%;margin-\
left:3%;}
.m01_hdl1 .t1 a {text-decoration:none; color:#ffcc00;}
.m01_hdl1 .main_art li {width:49.85%; display:inline-block;}

.m01_hdl1 li a {text-decoration:none; color:#fff;}
.m01_hdl1 .t2:hover a {text-decoration:none; color:#ffd700;}
}

@media(min-width:960px) and (max-width:2000px){
.m01_hdl1 .article {width:95%; margin: 0 auto;position:relative;}
.m01_hdl1 .gradation {position: absolute; left:0px;  bottom:10px; width:100%; height: 26%;  
	background:#000;
	opacity: 0.6;
	filter:alpha(opacity=60); 
	transition: visibility 0.6s, opacity 0.6s linear;
	-webkit-transition: visibility 0.6s, opacity 0.6s linear;
	-moz-transition: visibility 0.6s, opacity 0.6s linear;
	-o-transition: visibility 0.6s, opacity 0.6s linear;  

}
.m01_hdl1 {position:relative;box-sizing: border-box; width:100%;float:left; overflow:hidden;}
.m01_hdl1 .art_head_img {width:100%;height:auto;}
.m01_hdl1 .t2 {font-weight:600;position: absolute; margin-left:2%; width:94%; top:250px; font-family:NanumGothic; text-align:justify;color:#fff; font-size:1.8em; letter-spacing: -0.1em; line-height: 140%;}
.m01_hdl1 .t2 .category {font-size:0.5em; letter-spacing:-0.03em;color:#ddd;}
.m01_hdl1 .t2 a {color:#eee;}
.m01_hdl1 .t3 a {color:#ddd;}
.m01_hdl1 .t3 {font-family:NanumGothic; position: absolute; top:285px;letter-spacing:-0.08em;text-align:justify; font-size:1.2em;width:90%;margin-left:3%;}
.m01_hdl1 .t1 a {text-decoration:none; color:#ffcc00;}
.m01_hdl1 .main_art li {width:49.85%; display:inline-block;}

.m01_hdl1 li a {text-decoration:none; color:#fff;}
.m01_hdl1 .t2:hover a {text-decoration:none; color:#ffd700;}
}
@media (min-width:600px) and (max-width:960px){
.m01_hdl1 {position: relative;}
.m01_hdl1 .t2 .category {font-size:0.5em; letter-spacing:-0.03em;color:#ddd;}
.m01_hdl1 .gradation {position: absolute; left:0; bottom:5%; width:100%; height: 25%;
        background:#000;
        opacity: 0.4;
        filter:alpha(opacity=40);
        transition: visibility 0.4s, opacity 0.4s linear;
        -webkit-transition: visibility 0.4s, opacity 0.4s linear;
        -moz-transition: visibility 0.4s, opacity 0.4s linear;
        -o-transition: visibility 0.4s, opacity 0.4s linear;

}
.m01_hdl1 {width:100%;box-sizing: border-box; float:left; padding-left:1px;padding-right:1px;padding:0px;margin-bottom:10px;overflow:hidden; margin-top:15px;}
.m01_hdl1 .art_head_img {width:100%; height:100%; overflow: hidden; margin-top:0px;}
.m01_hdl1 .text_box {text-shadow: 1px 1px 4px #000 /*1px 0 2px #000, -2px 0 2px #000, 0 1px 2px #000, 0 -1px 2px #000, 1px 1px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;*/}
.m01_hdl1 .t1 {position: absolute; left:0px; top:10px; color:#ffcc00; padding:15px; font-size:26px;}
.m01_hdl1 .t2 {position: absolute; left:2%;top:70%;font-family:NanumGothic; color:#fff; padding:5px; font-size:1.8em; letter-spacing: -0.1em; line-height: 140%;}
.m01_hdl1 .t3 a {color:#ddd;}
.m01_hdl1 .t3 {position: absolute; left:2%; top:77%; color:#fff; padding:15px; font-size:1.2em;}
.m01_hdl1 .t1 a {text-decoration:none; color:#ffcc00;}
.m01_hdl1 .main_art li {position:relative; top:0; left:0; width:100%;overflow: hidden;}
.m01_hdl1 .t2 a {font-weight:600;text-decoration:none; color:#fff;}
.m01_hdl1 .t2:hover a {text-decoration:none; color:#ffd700;}

.m01_hdl1 .main_art {margin:0 auto;width:80%;height:80%;}

}

@media (max-width:500px){
.m01_hdl1 {position: relative;}
.m01_hdl1 .t2 .category {font-size:0.5em; letter-spacing:-0.03em;color:#ddd;}
.m01_hdl1 .gradation {position: absolute; left:0; bottom:5%; width:100%; height: 33%;
        background:#000;
        opacity: 0.4;
        filter:alpha(opacity=40);
        transition: visibility 0.4s, opacity 0.4s linear;
        -webkit-transition: visibility 0.4s, opacity 0.4s linear;
        -moz-transition: visibility 0.4s, opacity 0.4s linear;
        -o-transition: visibility 0.4s, opacity 0.4s linear;

}
.m01_hdl1 {width:100%;box-sizing: border-box; float:left; padding-left:1px;padding-right:1px;padding:0px;margin-bottom:10px;overflow:hidden; }
.m01_hdl1 .art_head_img {width:100%; height:100%; overflow: hidden; margin-top:0px;}
.m01_hdl1 .text_box {text-shadow: 1px 1px 4px #000 /*1px 0 2px #000, -2px 0 2px #000, 0 1px 2px #000, 0 -1px 2px #000, 1px 1px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;*/}
.m01_hdl1 .t1 {position: absolute; left:0px; top:10px; color:#ffcc00; padding:15px; font-size:26px;}
.m01_hdl1 .t2 {position: absolute; left:2%;top:61%;font-family:NanumGothic; color:#fff; padding:5px; font-size:1.5em; letter-spacing: -0.07em; line-height: 140%;}
.m01_hdl1 .t3 a {color:#ddd;}
.m01_hdl1 .t3 {position: absolute; left:2%; top:77%; color:#fff; padding-top:0px; padding-left:15px; padding-right:15px; font-size:1.2em;visibility:hidden;}
.m01_hdl1 .t1 a {text-decoration:none; color:#ffcc00;}
.m01_hdl1 .main_art li {position:relative; top:0; left:0; width:100%;overflow: hidden;}
.m01_hdl1 .t2 a {font-weight:600;text-decoration:none; color:#fff;}
.m01_hdl1 .t2:hover a {text-decoration:none; color:#ffd700;}

.m01_hdl1 .main_art {margin:0 auto;width:80%;height:80%;}

}