/* CSS Document */
@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;}
html, body { height:100%; margin:0; position:relative; min-width:1400px;}


@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;
}

#wrap { height:100%; overflow:hidden}

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

.left_head { width:35%; height:100%; float:left; position:relative; background:url(/images/about_bg.jpg)0 0 / 100%  no-repeat;}
.logo_img { position:absolute; top:30px; left:40px; width:25%}

.right_section { position:relative; float:left; background:url(/images/about_bg_icon.png)50% 65% no-repeat; overflow:hidden; width:65%; height:100%}

/* right_section_wrap  */
.right_section_wrap { width:93%; height:100%; overflow:hidden; float:left;}

/* top 메뉴 */
.main_menu { float:right; margin:30px 100px 30px 0;}
.main_menu ul { overflow:hidden}
.main_menu ul li { float:left; margin-right:20px;}
.main_menu ul li a { display:block; font:700 30px 'SDSwagger'; color:#000; padding:10px; width:100%; text-align:center; }
.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:-15px}
.main_menu ul li a:hover > div.bar { opacity:1; width:100%}

/* 메인이미지 */
.main_img { position:absolute; left:20%; top:17%}

/* 로고/텍스트 */
.main_text { position:absolute; left:45%; top:30%;}

.main_text { font:300 18px 'NanumSquare', sans-serif; color:#9f9fa0; line-height:2}



/* right 메뉴 */
.right_nav { float:left; width:7%; 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; transform:rotate(90deg); position:absolute; bottom:40px; left:0; letter-spacing:1px; transition:all 0.3s}
.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}
.right_nav .bottom a:hover { color:#999}

/* num */
.num_wrap { clear:both; float:left; width:100%}
ul.num { font:500 33px 'NanumSquare', sans-serif; transform:skew(-0.04deg); overflow:hidden  }
ul.num li { float:left; margin-right:50px;}
ul.num li span { display:block; }
ul.num li span:last-child {font:700 16px 'NanumSquare', sans-serif; color:#54bdb9; padding-left:5px; transform:skew(-0.04deg); }

/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */

.col_half { width: 49%; }
.col_third { width: 23.5% !important; }
.col_fourth { width: 23.5%;}
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
    position: relative;
    display:inline;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 60%; margin: 30px 0; position: relative; overflow:hidden; padding-left:35px;}
.wrapper > p { font:700 30px 'NanumSquare', sans-serif; transform:skew(-0.04deg); color:#000}
.counter { background-color: none; padding:0 0; border-radius: 5px;}
.counter > h2 { margin:0 0 !important} 
.counter:nth-of-type(1) > h2::after { content:'-'}
.counter:nth-of-type(1) ~ .counter > h2::after { content:'+'}
.count-title { font:500 33px 'NanumSquare', sans-serif; transform:skew(-0.04deg); overflow:hidden; color:#000 }
.count-text { font-size: 13px; font-weight: normal;  margin: -5px 0 0 3px; text-align:left;color:#54bdb9 }

/* about text */
.about_text { margin-top:60px; background:url(/images/icon_4.png) 0 7px no-repeat;}
.about_text li{ font:400 23px 'NanumSquare', sans-serif; transform:skew(-0.04deg); padding:4px 0}
.about_text li:first-child { font-weight:700; transform:skew(-0.04deg);}

/* map (오시는 길) */
.map {  padding-left:35px;}
}

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


@media screen and (max-width:767px) {
#wrap { height:100%; overflow:auto !important}
html, body { width:100% !important; height:100%; margin:0; position:relative; min-width:auto}
.left_head { width:100% !important; height:30% !important; float:none !important; position:relative; background:url(/images/about_bg.jpg)center/ 100%  no-repeat;}

.logo_img { position:absolute; top:3%; left:3%; width:25%}
.right_section { position:relative; float:left; background:url(/images/about_bg_icon.png)center 40%/ 70% no-repeat; overflow:hidden;}

/* mobile toggle menu*/
.main_menu { display:none !important;}

#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%;}

/* num */
.num_wrap { border-bot}
ul.num { font:500 33px 'NanumSquare', sans-serif; transform:skew(-0.04deg); overflow:hidden  }
ul.num li { float:left; margin-right:50px;}
ul.num li span { display:block; }
ul.num li span:last-child {font:700 16px 'NanumSquare', sans-serif; color:#54bdb9; padding-left:5px; transform:skew(-0.04deg); }

/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */

.col_half { width: 49%; }
.col_third { width: 32%; box-sizing:border-box; }
.col_fourth { width: 23.5%;}
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
    position: relative;
    display:inline;
    display: inline-block;
    float: left;
    margin-right: 0%;
    margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 96%; margin: 30px auto; position: relative; overflow:hidden; border-bottom:1px solid #f4f4f4; }
.wrapper > p { font:700 30px 'NanumSquare', sans-serif; transform:skew(-0.04deg); color:#000}
.counter { background-color: none; padding:0 0; border-radius: 5px;}
.counter > h2 { margin:0 0 !important; text-align:center;} 
.counter:nth-of-type(1) > h2::after { content:'-'}
.counter:nth-of-type(1) ~ .counter > h2::after { content:'+'}
.count-title { font:500 33px 'NanumSquare', sans-serif; transform:skew(-0.04deg); overflow:hidden; color:#000 }
.count-text { font-size: 13px; font-weight: normal;  margin: -5px 0 0 3px; text-align:center;color:#54bdb9; }

/* about text */
.about_text { margin-top:40px !important; background:url(/images/icon_4.png) 0 7px no-repeat;}
.about_text li{ font:400 23px 'NanumSquare', sans-serif; transform:skew(-0.04deg); padding:4px 0}
.about_text li:first-child { font-weight:700; transform:skew(-0.04deg);}
.about_text:last-child { padding-bottom:60px;}

.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}
}