@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

* { padding:0; margin:0;}
a { text-decoration:none;}
li { list-style:none;}
img { border:0;}

@font-face {
  font-family: SDSwagger;
  src: local(SDSwagger),
       local(SDSwagger),
       url(/fonts/SDSwagger.woff) format('woff'),
       url(SDSwaggerTTF.ttf) format('truetype');
  font-style: normal;
  font-weight: bold;
  unicode-range: U+0-10FFFF;
}

@media screen and ( min-width:768px ){
html, body { height:100%; background:url(/images/main_bg.jpg) no-repeat ; background-size:cover; margin:0; min-width: 1400px;}
.m_logo_img { display:none;}
#ham { display:none !important;}
.mobile_lnb { display:none !important;}

/* top 메뉴 */
.main_menu {position:absolute;   right:15%; top:10%}
.main_menu ul { overflow:hidden}
.main_menu ul li { float:left; margin-right:20px; position:relative}
.main_menu ul li a { display:block; font:700 30px 'SDSwagger'; color:#000; padding:10px; width:100%; text-align:center; letter-spacing:1px}
.main_menu ul li a > div.bar { width:1%; height:3px; background:#54bdb9; opacity:0; transition:all 0.3s; z-index:999; position:relative; margin:0 auto; position:relative; top:-17px}
.main_menu ul li a:hover > div.bar { opacity:1; width:100%}

/* 메인이미지 */
.main_img { position:absolute; left:20%; top:20.5%; width:23%}
.main_img > img { display:block; width:100%}

/* 로고/텍스트 */
.main_text { position:absolute; left:45%; top:30%;}
.logo_img { margin-bottom:15px}
.main_text { font:500 18px 'NanumSquare', sans-serif; color:#9f9fa0; line-height:2}
.main_text .pc_text { display:block !important; text-align:left}

.main_text .m_text { display:none;}

/* right 메뉴 */
.right_nav { float:right; width:5%; height:100%;}
.right_nav .top { width:100%; height:50%; background:#54bdb9; position:relative} 
.right_nav .top a {display:block; font: 26px 'Squada One', cursive; color:#fff; letter-spacing:1px; transform:rotate(90deg); letter-spacing:1.5px; transition:all 0.3s; position:absolute; bottom:40px; left:0;}
.right_nav .top a:hover { color:#999  }

.right_nav .bottom { width:100%; height:50%; background:#E4E4E5; position:relative} 
.right_nav .bottom a { display:block; font: 26px 'Squada One', cursive; color:#fff; transform:rotate(90deg); position:absolute; top:60px; left:-22px; letter-spacing:1px; transition:all 0.3s;letter-spacing:1.5px;}
.right_nav .bottom a:hover { text-shadow:0px 0px 3px rgba(255,255,255,0.4); color:#999}

/* icon 메뉴 */
.icon_m { display:none;}
.icon { position:absolute; left:-120px; bottom:-20px;}
.icon ul {}
.icon ul li { padding:10px;}
.icon ul li a { display:block; text-align:center; width:30px}
.icon ul li img { display:block; margin:0 auto; transition:all 0.3s;}
.icon ul li a:hover img { transform:translateY(-3px)}

#ham { display:none !important;}
.mobile_lnb { display:none !important;}
}


@media screen and (min-width:768px) and (max-width:959px){
#ham { display:none !important;}
.mobile_lnb { display:none !important;}
}


/* mobile 767px */

@media screen and (max-width:767px){

html, body { background-image:url(/images/main_bg_m.jpg), url(/images/main_bg_m_logo.jpg) !important; margin:0; width:100% !important; background-repeat:no-repeat; background-position:0 0, 20px 250px; background-color:#f5f5f5; background-size:100%, 70% }

.m_logo_img { display:block; position:absolute; top:2%; left:3%;}
.m_logo_img img { display:block; width:75%;}
.main_menu { display:none !important;}


/* 메인이미지 */
.main_img {  width:100%; height:250px !important; background:url(/images/main_img1.jpg) 0 80% no-repeat; background-size:102% }
.main_img img { display:none;}

/* 로고/텍스트 */
.main_text { clear:both; margin-top:1%; padding:2%}
.logo_img { display:none;}
.main_text { font:500 18px 'NanumSquare', sans-serif; color:#9f9fa0; line-height:2}
.main_text .pc_text { display:none;}
.main_text .m_text { display:block; text-align:justify}


/* icon 메뉴 */
.icon { display:none;}
.icon_m { position:absolute; right:2%; top:37%;}
.icon_m ul {}
.icon_m ul li { padding:5px; float:left}
.icon_m ul li a { display:block; text-align:center; width:30px}
.icon_m ul li img { display:block; margin:0 auto; transition:all 0.3s;}
.icon_m ul li a:hover img { transform:translateY(-3px)}

/* mobile toggle menu*/

#ham { position:fixed; top:2%; right:5%; z-index:999}
#ham > a > .xi-bars { display:bolock; padding:0px; border:1px solid #fff; color:#fff; border-radius:2px;font-size:3em; text-shadow:2px 2px 2px rgba(0,0,0,0.3);} 

.mobile_lnb{ display:none; position: fixed;right:0;top:0; width:100%; height:100%;background:rgba(0,0,0,0.7); z-index:9999;  box-shadow:0px 3px 3px #999;}
.mobile_lnb { padding:0; box-sizing:border-box}
.mobile_lnb ul { padding:80px 10px 30px; background:#fff;border-bottom:1px solid #d1d1d1; margin-top:0 !important;}
.mobile_lnb ul li { padding:12px 0; border-bottom:1px solid #d1d1d1;}
.mobile_lnb ul li a { display:block; font:700 25px 'SDSwagger'; color:#666; font-weight:700; transform:translate(0,0); transition:all 0.3s}
.mobile_lnb ul li a:hover { color:#F60; transform:translate(5px,0);}

.mobile_lnb > .img1{ position: absolute;left:40%; top:2%; cursor: pointer; display:block; width:20%;}
.mobile_lnb > .img2{ position: absolute;right:5%;top:3%; cursor: pointer; width:5%;}


.right_nav { position:fixed;left:0; bottom:0; width:100%; height:50px; }
.right_nav .top { width:50%; height:100%; background:#54bdb9; position:relative; float:left;} 
.right_nav .top a {display:block; font: 26px 'Squada One', cursive; color:#fff; letter-spacing:1px; transform:rotate(0deg);  letter-spacing:1.5px; transition:all 0.3s; line-height:50px; text-align:center  }
.right_nav .top a:hover { color:#d1d1d1  }

.right_nav .bottom { width:50%; height:100%; background:#E4E4E5; position:relative; float:left;} 
.right_nav .bottom a { display:block; font: 26px 'Squada One', cursive; color:#fff; transform:rotate(0deg); letter-spacing:1px; transition:all 0.3s;letter-spacing:1.5px;line-height:50px; text-align:center }
.right_nav .bottom a:hover { text-shadow:0px 0px 3px rgba(255,255,255,0.4); color:#999}

}