@charset "utf-8";

body{background:url(/open_content/armiae/images/m_bg.jpg) repeat-y center top; background-size:cover}
body.bg01{background:url(/open_content/armiae/images/m_bg01.jpg) repeat-y center top; background-size:cover}
body.bg02{background:url(/open_content/armiae/images/m_bg02.jpg) repeat-y center top; background-size:cover}
body.bg03{background:url(/open_content/armiae/images/m_bg03.jpg) repeat-x center top; background-size:cover}
body.bg04{background:url(/open_content/armiae/images/m_bg04.jpg) repeat-y center top; background-size:cover}

html {height:100%;}
body{background-size:cover; position:relative; height:100%;}
div.centents {position:relative; top:50%; transform:translateY(-50%);}

h1{position:relative; margin-top:-109px; text-align:center; }
#bottom{margin:30px 0px; text-align:center}
#bottom p{color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.5)}
div.centents{position:relative; margin:0px auto}
ul.list{margin:-19px auto 0px; overflow:hidden}
ul.list li{position:relative; float:left; width:31.9%; margin:.7%; padding-bottom:76px; background:#fff; box-shadow:0px 1px 1px rgba(0,0,0,.4); border-radius:10px; }
ul.list li img { border-radius:10px 10px 0 0; }
ul.list li div{cursor:pointer;}
ul.list li .tit{color:#222; font:600 24px 'Nanum Myeongjo','나눔명조'; letter-spacing:-2px}
ul.list li p.tit,
ul.list li dd.btn{position:absolute; left:0px; bottom:0px; padding:0px 10%; width:80%; height:76px}
ul.list li p.img img{width:100%}
ul.list li p.tit{display:table; text-align:center; cursor:pointer}
ul.list li p.tit a {display:table-cell; vertical-align:middle;}
ul.list li p.tit span{ font-family:'Nanum Myeongjo','나눔명조'; color:#222 }
ul.list li dl{display:none; position:absolute; top:0px; left:0px; padding:0px 10% 76px; width:80%; background:rgba(255,255,255,.8); overflow:hidden; border-radius:10px; }
ul.list li dl dt.tit{margin-top:12%; font-size:26px; vertical-align:middle}
ul.list li dl dd{font-weight:bold}
ul.list li dl dd.txt{margin:4% 0px}
ul.list li dl dd.info{margin-top:6px; position:relative; padding-left:90px}
ul.list li dl dd.info span{display:inline-block; position:absolute; left:0px; padding:2px 0px; width:80px; background:#417521; border-radius:30px;letter-spacing:-1px; text-align:center; color:#fff}
ul.list li.farmcenter dl dd.info span{background:#642e01}
ul.list li.farmcenter{margin-left:20%}
ul.list li.miro dl dd.info span{background:#795aa8}
ul.list li dl dd.btn{background:#fff; text-align:center}
ul.list li dl dd.btn a{display:inline-block; margin-top:20px; padding:7px 30px; font-size:15px; background:#b62f36 url(/open_content/armiae/images/m_btn_bg.png) repeat-x center -20px; color:#fff}
p.tbtn a{position:absolute; padding:1.5% 4%; top:-55%; color:#fff; font-size:18px; font-weight:bold}
p.tbtn.btn_armiae a{left:10px; border:1px solid #d52b2f; background:#d52b2f; background:linear-gradient(to bottom, #e1464e 0%, #d52b2f 100%); background:-webkit-linear-gradient(top, #e1464e 0%, #d52b2f 100%)}
p.tbtn.btn_welga a{right:10px;border:1px solid #387b1e;  background:#387b1e; background:linear-gradient(to bottom, #5ca032 0%, #387b1e 100%); background:-webkit-linear-gradient(top, #5ca032 0%, #387b1e 100%)}

@media all and (min-width:1920px) {
	body{background-size:100%}
} 

@media all and (min-width:1220px) {
	div.centents{width:1220px}
	ul.list li dl dd{font-size:15px}
}

@media all and (max-width:1219px) {
	ul.list li dl dt.tit{font-size:22px}
	ul.list li dl dd,
	ul.list li dl dd.txt{font-size:13px; line-height:130%}
}

@media all and (min-width:767px) {
	/*
	body{background-size:100% 100%}
	body.bg01{background-size:100% 100%}
	body.bg02{background-size:100% 100%}
	body.bg03{background-size:100% 122%}
	body.bg04{background-size:100% 100%}
	*/
}
@media all and (max-width:767px) {
	h1{margin-top:-25%}
	h1 img{width:80%}	
	ul.list{margin-top:-25%; padding:0px 1%}
	ul.list li{width:48%; margin:1%}
	ul.list li .tit{font-size:18px}	
	ul.list li dl dd{font-size:13px; line-height:130%}
    ul.list li.farmcenter{margin-left:0%}

}
@media all and (min-width:480px) and (max-width:767px) {
	p.tbtn a{top:-15%}
	ul.list li dl dt{display:none}
	ul.list li dl dd.txt{margin-top:8%}
	ul.list li dl dd.info{padding-left:60px; font-size:12px}
	ul.list li dl dd.info span{width:60px}
}
@media all and (max-width:480px) {
	p.tbtn a{top:-4%; font-size:15px; text-align:center}
	p.tbtn a span{display:block}
	ul.list{margin-top:0; min-width:320px}
	ul.list li{width:98%; margin:1%}	
	ul.list li .tit{font-size:22px}	
	ul.list li dl dd.btn{display:block}

	div.centents {top:10px; transform:none;}
	ul.list li.farmcenter {margin-left:1%;}
	html {height:auto;}
	body{height:auto;}
}