@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(contents.css);
@import url(board.css);

/* ==============================================
   defaults
   ============================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
ol, ul { list-style:none;}
blockquote, q {	quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table { border-collapse:collapse; border-spacing:0;}
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
input, select { margin:0; padding:0; vertical-align:middle;}
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

.ir { background-color: transparent; border: 0; overflow: hidden; text-indent:-9999px;}
.ir:before { content: ""; display: block; width: 0; height: 150%; }

.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
.clearfix {  *zoom: 1;}
.hidden { display:none;}


/* ==============================================
   layout
   ============================================== */

html { overflow:auto; overflow-y:scroll;}
input,
select,
textarea,
body { color:#2f2f2f; font-size:12px; font-family:"Nanum Gothic", dotum, 돋움, gulim, 굴림, arial !important;}

#wrap {}
#wrapIn {}

.forPC { display: block !important;}
.forMobile { display: none !important;}

.underConstruction { text-align: center; }

/* header */

#header { position: relative; width: 100%; height: 135px; z-index: 999;}
body.main #header { position: absolute; left: 0; top: 0;}
#header p.mobileMenu { display: none;}
#header h1 { position: absolute; left: 50%; top: 30px; height: 60px; margin-left: -500px;}
#header h1 a { display: block; width: 270px; height: 60px; text-indent: -9999px; background: url(../images/common/top_logo.png) left 8px no-repeat;}

#header .gnb { position: absolute; left: 50%; top: 30px; width: 730px; height: 60px; margin-left: -230px;
     -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
     -o-transition: all 0.2s ease;
     transition: all 0.2s ease;
}
#header .gnb > ul { position: absolute; right: 0; top: 0; height: 60px;}
#header .gnb > ul > li { float: left; height: 60px;}
#header .gnb > ul > li > a { position: relative; display: block; height: 60px; line-height: 60px; font-size: 15px; color: #242424; text-decoration: none; font-weight: bold; background: url(../images/common/top_gnb_devider.gif) left center no-repeat; padding: 0 30px;}
#header .gnb > ul > li.first > a {background: none;}
#header .gnb > ul > li > a:hover { color: #473c82;}
#header .gnb > ul > li.active > a { color: #473c82;}
#header p.subBg { display: none;}
body.sub #header p.subBg { display: block;}
#header p.subBg { position: absolute; left: 0; bottom: 0; width: 100%; height: 45px; background-color: #473c82;}
#header .gnb > ul > li ul.sub { display: none; z-index: 9999;}
#header .gnb > ul > li.active ul.sub { display: block; position: absolute; left: 0; bottom: -45px; height: 45px;}
#header .gnb > ul > li.sub02 ul.sub { left: 100px;}
#header .gnb > ul > li.sub03 ul.sub { left: 190px;}
#header .gnb > ul > li.sub04 ul.sub { left: 420px;} 
#header .gnb > ul > li.sub05 ul.sub { left: 430px;} 
#header .gnb > ul > li ul.sub li { float: left; height: 45px;}
#header .gnb > ul > li ul.sub li a { display: block; height: 45px; line-height: 45px; color: #fff; font-size: 13px; text-decoration: none; padding: 0 12px;}
#header .gnb > ul > li ul.sub li.active a { background-color: #303030;}
#header .gnb > ul > li ul.sub li a:hover { background-color: #303030;}
/*#header .gnb > ul > li.active > a:after { border: 6px solid transparent; content:" "; height: 0; width: 0; position: absolute; pointer-events:none; border-bottom-color: #f33326; left: 50%; bottom: 0; margin-left: -6px;}*/

/* footer */

#footer { background-color: #818d96; }
#footer .footerIn { position: relative; width: 760px; padding: 30px 0 30px 240px; margin: 0 auto; }
#footer h1 { position: absolute; left: 0; top: 50%; width: 200px; height: 80px; text-indent: -9999px; background: url(../images/common/footer_logo.png) center center no-repeat; margin-top: -40px; }
#footer h1 a { display: block; height: 80px; }
#footer ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
#footer ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
#footer ul.list li { float: left; line-height: 18px; color: #e6e8ea; background: url(../images/common/menu_devider_white.png) left center no-repeat; margin-left: 6px; padding-left: 6px; }
#footer ul.list li.first { background: none; padding-left: 0; margin-left: 0; }
#footer p.copyright { line-height: 18px; color: #b2bac0; margin-top: 8px; }

/* quick */

.quickWrap { position: absolute; left: 50%; top: 437px; width: 105px; margin-left: 530px; }
body.main .quickWrap { top: 660px; }
.quickWrap h3 { height: 30px; line-height: 30px; color: #fff; text-align: center; background-color: #23145d; text-transform: uppercase; font-size: 11px; }
.quickWrap ul.list li { border: 1px solid #e2e2e2; border-width: 0 1px 1px; padding-bottom: 6px; }
.quickWrap ul.list li a { display: block; text-align: center; line-height: 20px; color: #3b3b3b; text-decoration: none; }


/* mediaquery for tab */

@media only screen and (min-width: 801px) and (max-width: 1200px) {

}

/* mediaquery for mobile */

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

.forPC { display: none !important;}
.forMobile { display: block !important;}

/* header */

#header { height: auto;}
body.main #header { position: relative; left: auto; top: auto;}
#header p.mobileMenu { display: block; position: absolute; right: 20px; top: 36px; width: 33px; height: 23px; text-indent: -9999px; background: #473c82 url(../images/mobile/top_btn_menu.png) 0 0 no-repeat; -webkit-background-size: 33px auto; background-size: 33px auto;}
#header h1 { position: relative; left: auto; top: auto; height: 90px; margin-left: 0;}
#header h1 a { display: block; width: 180px; height: 90px; text-indent: -9999px; background: url(../images/common/top_logo.png) center center no-repeat;}

#header .gnb { position: relative; left: auto; top: auto; width: auto; height: 0; margin-left: 0; overflow: hidden;}
#header .gnb.active { height: 200px; }
#header .gnb > ul { position: relative; right: auto; top: auto; height: auto; border-top: 1px solid #d8d8d8; background-color: #f2f2f2;}
#header .gnb > ul > li { float: none; height: 40px;}
#header .gnb > ul > li > a { height: 39px; line-height: 39px; font-size: 13px; border-bottom: 1px solid #d8d8d8; background: none; padding: 0 20px;}

body.sub #header p.subBg { display: none;}
#header .gnb > ul > li.active ul.sub { display: none; }

/* footer */

#footer .footerIn { width: auto; padding: 20px 10px; }
#footer h1 { position: relative; left: auto; top: auto; width: 100%; margin-top: 0; }
#footer ul.list li { float: none; background: none; margin-left: 0; padding-left: 0; }
#footer p.copyright { line-height: 18px; }

/* quick */

}

/* ==============================================
   main
   ============================================== */

/* visual */

.visWrap { position: relative; height: 620px; overflow: hidden;}
#mainVisual ul.slides > li { position: relative;}
#mainVisual ul.slides > li p.img { width: 100%; height: 620px;}
#mainVisual ul.slides > li p.slogan { position: absolute; left: 50%; top: 220px; margin-left: -500px; z-index: 999;}
#mainVisual ul.slides > li p.btn { position: absolute; left: 50%; top: 442px; margin-left: -500px; z-index: 999;}

ol.flex-control-nav { position: absolute; left: 50%; top: 190px; margin-left: -500px; z-index: 999;}
ol.flex-control-nav li { float: left; width: 11px; height: 11px; text-indent: -9999px; margin-right: 10px;}
ol.flex-control-nav li a {display: block; width: 11px; height: 11px; text-indent: -9999px; background: url(../images/main/visual_nav_circle_off.png) 0 0 no-repeat; cursor: pointer;}
ol.flex-control-nav li a.flex-active { background-image: url(../images/main/visual_nav_circle_on.png);}

ul.flex-direction-nav a { display: block; position: absolute; left: 50%; top: 50%; width: 40px; height: 78px; text-indent: -9999px; background: url(../images/main/visual_nav_prev.png) 0 0 no-repeat; margin: -39px 0 0 -620px; z-index: 999;}
ul.flex-direction-nav a.flex-next {background-image: url(../images/main/visual_nav_next.png); margin-left: 568px;}

/* news */

#mainBody .newsWrap { height: 70px; background-color: #473c82;}
#mainBody .newsWrap .news {*zoom:1;} /* Hack for browser IE5.5~7 */
#mainBody .newsWrap .news:after { content:" "; display:block; clear:both;} /* float virtual element */
#mainBody .newsWrap .news { width: 1000px; margin: 0 auto;}
#mainBody .newsWrap .news h3 { float: left; width: 136px; line-height: 70px; color: #fff; font-size: 16px; background: url(../images/main/news_icon.png) left center no-repeat; padding-left: 42px;}
#mainBody .newsWrap .news ul.list { float: left; height: 30px; background: url(../images/main/news_devider.png) left center no-repeat; padding: 20px 0 20px 30px;}
#mainBody .newsWrap .news ul.list li { height: 30px;}
#mainBody .newsWrap .news ul.list li a { line-height: 30px; color: #fff; text-decoration: none;}
#mainBody .newsWrap .news ul.control { float: right; width: 12px; padding-top: 23px;}
#mainBody .newsWrap .news ul.control li { width: 12px; height: 12px;}
#mainBody .newsWrap .news ul.control li a { display: block; height: 12px; text-indent: -9999px;}
#mainBody .newsWrap .news ul.control li.up a { background: url(../images/main/news_up.png) center center no-repeat;}
#mainBody .newsWrap .news ul.control li.down a { background: url(../images/main/news_down.png) center center no-repeat;}

/* contents */

#mainBody .contentsWrap { background-color: #ffffff; padding: 40px 0 56px;}
#mainBody .contentsWrap ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
#mainBody .contentsWrap ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
#mainBody .contentsWrap ul.list { width: 1000px; margin: 0 auto;}
#mainBody .contentsWrap ul.list li { position: relative; float: left; width: 32%; height: 280px; background: #eee url(../images/main/contents_img01.jpg) right bottom no-repeat; margin-left: 1.3%;}
#mainBody .contentsWrap ul.list li.first { margin-left: 0;}
#mainBody .contentsWrap ul.list li a {display: block; height: 220px; color: #1e1e1e; text-decoration: none; padding: 30px;}
#mainBody .contentsWrap ul.list li.link02 { background-image: url(../images/main/contents_img02.jpg);}
#mainBody .contentsWrap ul.list li.link03 { background-image: url(../images/main/contents_img03.jpg);}
#mainBody .contentsWrap ul.list li.link04 { background-image: url(../images/main/contents_img04.jpg);}
#mainBody .contentsWrap ul.list li p.title { line-height: 32px; font-size: 25px; margin-bottom: 8px;}
#mainBody .contentsWrap ul.list li p.exp { line-height: 20px; font-size: 12px; color: #585858;}
#mainBody .contentsWrap ul.list li p.btn { position: absolute; left: 30px; bottom: 30px;}

/* contents : bottom */

#mainBody .bottomContents { background-color: #ededed; padding: 36px 0; }
#mainBody .bottomContentsIn {*zoom:1;} /* Hack for browser IE5.5~7 */
#mainBody .bottomContentsIn:after { content:" "; display:block; clear:both;} /* float virtual element */
#mainBody .bottomContentsIn { width: 1000px; margin: 0 auto; }
#mainBody .bottomContentsIn > div { position: relative; float: left; }
#mainBody .bottomContents h3 { line-height: 36px; font-size: 18px; font-weight: bold; color: #212121; margin-bottom: 14px; }
#mainBody .bottomContents a.btnMore { position: absolute; right: 0; top: 4px; width: 30px; height: 30px; text-indent: -9999px; background: url(../images/main/btn_more2.png) center center no-repeat; }

#mainBody .bottomContents .board { width: 310px; margin-right: 50px; }
#mainBody .bottomContents .board ul.list { height: 100px; }
#mainBody .bottomContents .board ul.list li { line-height: 24px; font-size: 13px; background: url(../images/common/icon_dot_gray.png) left 10px no-repeat; padding-left: 14px; }
#mainBody .bottomContents .board ul.list li a { line-height: 24px; color: #353535; text-decoration: none; }
#mainBody .bottomContents .board ul.list li a:hover { text-decoration: underline; }

#mainBody .bottomContents .consult { width: 280px; }
#mainBody .bottomContents .consult p.phone { line-height: 45px; margin-bottom: 2px; }
#mainBody .bottomContents .consult p.phone a { color: #fe0000; font-size: 35px; font-weight: bold; text-decoration: none; }
#mainBody .bottomContents .consult ul.info li { line-height: 20px; font-size: 13px; }

/* mediaquery for tab */

@media only screen and (min-width: 801px) and (max-width: 1200px) {

}

/* mediaquery for mobile */

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

/* visual */

.visWrap { height: 350px;}
#mainVisual ul.slides > li p.img { width: 100%; height: 350px;}
#mainVisual ul.slides > li p.slogan { left: 20px; top: 30px; width: 260px; margin-left: 0; }
#mainVisual ul.slides > li p.slogan img { width: 100%; height: auto; }
#mainVisual ul.slides > li p.btn { left: 20px; top: 180px; margin-left: 0;}

ol.flex-control-nav { display: none; }

/* news */

#mainBody .newsWrap { height: auto; background-color: #473c82; padding: 16px 20px;}
#mainBody .newsWrap .news { width: auto;}
#mainBody .newsWrap .news h3 { float: none; width: auto; line-height: 30px; }
#mainBody .newsWrap .news ul.list { float: none; height: 30px; background: none; padding: 0;}
#mainBody .newsWrap .news ul.control { display: none; }

/* contents */

#mainBody .contentsWrap { padding: 40px 10px;}
#mainBody .contentsWrap ul.list { width: auto; }
#mainBody .contentsWrap ul.list li { float: none; width: 241px; height: 280px; margin: 0 auto 10px;}
#mainBody .contentsWrap ul.list li.first { margin: 0 auto 10px;}
#mainBody .contentsWrap ul.list li a {display: block; height: 220px; color: #1e1e1e; text-decoration: none; padding: 30px;}
#mainBody .contentsWrap ul.list li.link02 { background-image: url(../images/main/contents_img02.jpg);}
#mainBody .contentsWrap ul.list li.link03 { background-image: url(../images/main/contents_img03.jpg);}
#mainBody .contentsWrap ul.list li.link04 { background-image: url(../images/main/contents_img04.jpg);}
#mainBody .contentsWrap ul.list li p.title { line-height: 32px; font-size: 25px; margin-bottom: 8px;}
#mainBody .contentsWrap ul.list li p.exp { line-height: 20px; font-size: 12px; color: #585858;}
#mainBody .contentsWrap ul.list li p.btn { position: absolute; left: 30px; bottom: 30px;}

/* contents : bottom */

#mainBody .bottomContents { padding: 30px 10px; }
#mainBody .bottomContentsIn { width: auto; }
#mainBody .bottomContentsIn > div { float: none; }
#mainBody .bottomContents a.btnMore { right: 10px; }

#mainBody .bottomContents .board { width: auto; margin-right: 0; margin-bottom: 30px; }
#mainBody .bottomContents .board ul.list { height: auto; }

}