@charset "utf-8";

header, footer, nav, section, article, aside {display:block;}
* { margin: 0; padding: 0; box-sizing: border-box; }
h1,h2,h3,h4,h5,h6,ol,ul,li,form,fieldset,input,textarea,p,th,td,dt,dd,dl {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:12px;}
li {list-style:none;}
img,fieldset {border:0;vertical-align:top;}
em {font-style:normal;}
input.radio {width:13px; height:13px; vertical-align:middle;}
address,em,i {font-style:normal;}
.hdn, legend,table caption{font-size:0; height:0; overflow:hidden; position:absolute;visibility:hidden; width:0; line-height:0;}
table caption{font-size:0; height:0; overflow:hidden; position:static;visibility:hidden; width:0; line-height:0;}
a {text-decoration:none; color:inherit;}
input:focus { outline: none; }
select:focus { outline: none; }

button { border: 0; padding: 0; background: transparent; transition: all 0.3s ease; cursor: pointer; outline: none; }
input { border: 0; padding: 0; background: transparent; }
input:focus { outline: none; }

html { height: 100%; }
body { font-family:'Noto Sans KR','Apple SD Gothic Neo',arial,sans-serif; font-size: 12px; font-weight: normal; margin: 0px; height: 100%; background-color: #000; line-height: 1.2; }

.wrap { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; background: url("../images/hbg2.gif") top center no-repeat; }

.contents { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100vh; flex-direction: column; }
.contents h1 { text-align: center; color: #888; font-size: 3vh; text-shadow: rgba(0, 0, 0, 1) 0 5px 5px; padding: 380px 0 0; }
.contents h1 span { color: #00ABFF; }
.contents h2 { text-align: center; color: #888; font-weight: normal; font-size: 2vh; text-shadow: rgba(0, 0, 0, 1) 0 5px 5px; }
.contents h2 span { font-weight: bold; color: #fff; }

.hp-div { display: flex; flex-direction: row; align-items: stretch; margin: 20px 0 0; width: 900px; flex-wrap: wrap; }
.hp-div div { flex: 33.333%; padding: 20px; }
.hp-div div button { border-radius: 15px; padding: 10px; width: 100%; height: 230px; background-color: rgba(255, 255, 255, 0.02); border: 1px #333 solid; text-align: center; color: #fff; }
.hp-div div button img { width: 60px; }
.hp-div div button h5 { font-size: 2vh; font-weight: normal; margin: 8px 0 0; }
.hp-div div button h4 { font-size: 1.2vh; font-weight: normal; border-radius: 10px; border: 1px #333 solid; padding: 5px 20px 8px; display: inline-block; margin: 10px 0 0; }
.hp-div div button:hover { background-color: rgba(255, 255, 255, 0.1); }
.hp-div div .snsbnr { border: 0; }
.hp-div div .snsbnr img { width: 100%; }
.hp-div div .snsbnr:hover { background-color: rgba(255, 255, 255, 0.02); }













@media screen and (max-width: 600px) {
	.wrap { background: url("../images/hbg2.gif") top center no-repeat; background-size: 130%; }
	.contents h1 { padding: 130px 0 0; }
	.hp-div { width: auto; flex-wrap: wrap; }
	.hp-div div { flex: 100%; padding: 5px 10px; }
	.hp-div div button { height: 130px; }
	.hp-div div button img { width: 30px; }
	.hp-div div button h5 { font-size: 3vh; }
	.hp-div div button h4 { font-size: 2vh; }
	.hp-div div .snsbnr img { height: 120px; }
}