@import url('reset.css');
* { margin: 0; padding: 0; outline: 0; }
@font-face{font-family:NG;src:url(../font/NanumGothic.eot);src:local(※),url(../font/NanumGothic.woff) format('woff')}
*{font-family:나눔고딕, NG;}
body, html { height: 100%; }
body,
button,
select,
textarea {    
	color: #0095cf;
    font-size: 12px;
	font-weight:400;
    line-height: 22px;
	background: url(images/body-pattern.png) repeat 0 0;

}
li { list-style:none; }

a { color: #0095cf; text-decoration:none;  }
a:hover { text-decoration: none; }
a img { border: 0; }

article, aside, details, footer, header, menu, nav, section { display: block; }
input, textarea, select { font-size: 12px; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.right, .alignright { float: right; display: inline; }

.shell { width: 980px; margin: 0 auto; }
.container { background:#fff; box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.05); -webkit-box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.05); -o-box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.05);  }






.hblock{
	margin-right:33px;
	position:absolute;
	top:5px;
	right:0;
	display: inline-block;
	vertical-align:middle;
	 };
.hbanner{max-width:90%; position:relative;float:right;}
.hbanner img{max-width:100%; height:auto; vertical-align:bottom; }


/* contents */

.hblock li{display: inline-block;list-style:}
.hblock a{color:#0095cf; }
.hblock a:hover{color:#C00;}
.hblock i{margin:0 4px 0 10px;font-size:14px;}
/* Modal Login*/

#lean_overlay {
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    display: none;
}

#im_modal_login {
    width: 300px;
    padding: 20px 20px 20px 20px;
    background: #0095cf;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.6);
    display: none;
    position: relative;
}

#im_modal_login .loginWindow_header {
    margin-bottom: 18px;
}

#im_modal_login .loginWindow {
    width: 300px;
}

#im_modal_login .loginWindow dl dt {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    line-height: 10px;
}

#im_modal_login .loginWindow #uid, .loginWindow #upw {
    width: 270px;
    height: 38px;
    line-height: 38px;
    font-size: 18px;
    padding: 0 15px 0 15px;
    margin-bottom: 25px;
    color: #444;
    font-weight: bold;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: none;
}

#im_modal_login .loginWindow .keep_text {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    padding-top: 2px;
    float: left;
    margin-left: 10px;
    margin-bottom: 20px;
}

#im_modal_login .loginWindow .keepWrap:after {
    content: "";
    display: block;
    clear: both;
}

#im_modal_login .loginWindow .keep {
    width: 21px;
    height: 21px;
    position: relative;
    float: left;
}

#im_modal_login .loginWindow .keep label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#im_modal_login .loginWindow .keep label:after {
    opacity: 0.2;
    position: absolute;
    width: 7px;
    height: 4px;
    background: transparent;
    top: 5px;
    left: 5px;
    border: 3px solid #A56170;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#im_modal_login .loginWindow .keep label:hover::after {
    opacity: 1;
}

#im_modal_login .loginWindow .keep input[type=checkbox]:checked + label:after {
    opacity: 1;
}

#im_modal_login .loginWindow .submit_btn a {
    display: inline-block;
    width: 270px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    padding: 0 15px 0 15px;
    background-color: #4B3645;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

#im_modal_login .loginWindow .login_menu ul {
    text-align: center;
    margin-top: 25px;
}

#im_modal_login .loginWindow .login_menu ul li {
    display: inline-block;
    padding: 0 10px;
    border-left: 1px solid #fff;
    list-style: none;
    line-height: 14px;
}

#im_modal_login .loginWindow .login_menu ul li:first-child {
    border-left: none;
}

#im_modal_login .loginWindow .login_menu ul li a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    line-height: 14px;
}

#im_modal_login .loginWindow .login_menu ul li a:hover, #im_modal_login .loginWindow .login_menu ul li a:focus {
    text-decoration: underline;
}

#im_modal_login .close_loginWindow {
    position: absolute;
    right: 25px;
    top: 25px;
}

#im_modal_login .modal_close {
    font-size: 26px;
    color: #fff;
}

.im_hidden {
    display: none;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}







#header { position: relative; padding-top: 25px;  height: 43px; background: url(images/border-title.png) repeat-x 0 bottom; }
#logo { width: 130px; height:26px; font-size:24px; font-family: verdana, arial, sans-serif; position:absolute; top: 23px; left: 21px; }
#logo a { height: 26px; text-decoration:none; }
.search { width: 210px; margin-left: auto; padding:5px 5px 0 0; }
.search input.field { float:left; width: 166px; margin-top:5px; padding:0 8px; height: 18px; line-height: 18px;  border: 1px solid #d3d3d3; font-size: 11px; color:#bebebe; background: #ededed; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; }
.search input.search-btn { float:left; margin:2px 5px 0 0;  font-size: 0; line-height: 0; text-indent: -4000px; cursor: pointer; width: 20px; height: 26px; border: 0; background: url(images/search-ico.png) no-repeat 0 0; }

.im_gnbWrap {
    height: 56px;
	background:url(../images/gnb_seperater.png) repeat-x left top;
    border-top: 1px solid #c0c0c0;
    border-bottom: 2px solid #c20107;
	max-width: 100%;
}

.im_gnb {
    max-width:100%;
    margin: 0 auto;
}
.im_gnb li {
    list-style: none;
}

.im_gnb li a {
    text-decoration: none;
}

.im_gnb .depth1 {
    display: block;
    height: 56px;
	border-left:#c0c0c0 1px solid;
}

.im_gnb .depth1 > li {
	border-right:#999 1px solid;
    width: 140px;
    height: 56px;
    float: left;
    position: relative;
    text-align: center;
    background: url('../images/gnb_seperater.png') no-repeat right 19px;
}

.im_gnb .depth1:after {
    display: block;
    clear: both;
}
.im_gnb .depth1 > li a:hover,.im_gnb .depth1 > li a:active { color:#0095cf; }
.im_gnb .depth1 > li a {
	 display:block;
	 height: 56px;
    font-size: 14px;
    line-height: 56px;
    font-weight: bold;
    color: #afaca9;
}

.im_gnb .depth1 li a img {vertical-align:middle;}

.im_gnb .depth2 {
    position: absolute;
    left: 0;
    top: 56px;
	border-bottom:#c20107 2px solid;
    background: #fff;
    display: none;
	z-index:999;
    box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.1);
}

.im_gnb .depth2 li {
    float: none;
    background: #fff;
    width: 180px;
    height: 42px;
    border: 1px solid #e6e6e6;
    border-top: none;
    text-align: left;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.im_gnb .depth2 li:first-child {
    border-top: 1px solid #e6e6e6;
}

.im_gnb .depth2 li a {
	 display: block;
	 padding-left: 20px;
	 height:42px;
    line-height: 42px;
    font-weight: normal;
    font-size: 13px;
    color: #afaca9;
}

.im_gnb .depth2 > li:hover > a {
    font-weight: bold;
}

.im_gnb .depth2 .arrow-right {
    display: block;
    position: absolute;
    top: 0;
    right: 15px;
}

.im_gnb .depth3 {    border-bottom: 2px solid #c20107;
    position: absolute;
    left: 181px;
    top: -1px;
    background: #fff;
    display: none;
    box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.1);
}

.im_gnb .depth3 li a {
    color: #585858;
}

.im_gnb .depth3 > li:hover > a {
    font-weight: bold;
}

.im_gnb .depth1 > li:hover > a .arrow-up {
    position: absolute;
    left: 65px;
    bottom: -1px;
    width: 0px;
    height: 0px;
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-bottom: 8px solid #fff;
    z-index: 9999;
}

.im_gnb .depth1 > li:hover > a .arrow-up-back {
    position: absolute;
    left: 63px;
    bottom: -1px;
    width: 0;
    height: 0;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-bottom: 10px solid #e6e6e6;
}



.middle { height:100%; margin:10px auto; }
.content { width:99%; margin:0 auto; }



#footer { background: url(images/footer-border.png) repeat-x 0 0; margin-top:10px; padding: 18px 20px 18px 10px; }
.footer-nav { float: left; }
.footer-nav ul { list-style:none; list-style-position: outside; }
.footer-nav ul li { float: left; border-right: 1px solid #afaca9;  padding:0 10px; font-size: 10px; line-height: 10px; }
.footer-nav ul li a { color: #afaca9; }
.footer-nav ul li a:hover { color: #878684; text-decoration: none; }
.footer-nav ul li.last { border-right: 0; }

#footer p.copy { font-size: 10px; color:#afaca9; line-height: 10px; float: right; }
#footer p.copy a { font-size: 10px; color:#afaca9;  line-height: 10px; }
#footer p.copy a:hover {  color:#00acef;  }

/* ipad portrait */
@media only screen and ( min-width: 768px) and ( max-width: 981px ) {
	body { width: auto; }
	.shell { width: auto; width: 768px; }
	#luke img { max-width:768px; } 
	#luke img { max-height:300px; } 

	.container div { max-width:768px; }
	.content div { max-width:768px; }

	.footer-nav { float:none; display: block; padding-bottom: 12px; }
	#footer p.copy { float: none; display:block; padding-left: 10px;  }
}

/* mobile*/
@media only screen and ( max-width: 640px) { 
	body { width: auto; }
	.content div { max-width:640px; }
	#luke img { max-width:640px; } 
	#luke img { max-height:640px; } 
	.container div { max-width:640px; }
	.search { display:none; }
	#logo { position:relative; margin:0 auto; top: 0px; left:0;  }
	#header { background: transparent; margin-bottom:0; }

.im_gnbWrap { display:none; }	.shell { width: 320px; }
	.container { background-image: url(images/container-mobile.png); width: 320px; }
	
	#footer { padding-left: 0; padding-right:0;  }
	.footer-nav { float:none; display:block; height: 12px; margin:0 auto; width: 310px; vpadding-bottom: 8px; text-transform: uppercase; }
	.footer-nav ul li { font-size: 8px; border-right:0; padding:0 2px; }
	#footer p.copy { font-size: 8px; text-align:center; float:none; display:block; }
}


@media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { 
	.im_gnbWrap { display:none; }
}