@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');

/* Common CSS */ 
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, 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; font-size: 14px; line-height: 25px; vertical-align: baseline; font-family: "Nanum Gothic", "ë?�˜ëˆ”ê³ ë”�?, "dotum", "ë?�움", "Malgun Gothic", "ë§?��?�€ ê³ ë?��?, Tahoma, Geneva, sans-serif; line-height: 1.2em;}
table, caption, tbody, tfoot, thead, tr, th, td{margin: 0; padding: 0; border: 0; font-size: 14px; line-height: 25px; vertical-align: middle;font-family: "Nanum Gothic", "ë?�˜ëˆ”ê³ ë”�?, "dotum", "ë?�움", "Malgun Gothic", "ë§?��?�€ ê³ ë?��?, Tahoma, Geneva, sans-serif; line-height: 1.2em;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
body{line-height: 1;}
html, body { position: relative; z-index: 1; height: 100%;}
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;}
th, td{}
/* change colours to suit your needs */
ins{background-color: #ff9; color: #000; text-decoration: none;}
/* change colours to suit your needs */
mark{background-color: #ff9; color: #000; font-style: italic;}
del{text-decoration: line-through;}
abbr[title], dfn[title]{border-bottom: 1px dotted; cursor: help;}
/* change border colour to suit your needs */
hr{display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0;}
/*input, select, button{border: 0; background: none; padding: 0; margin: 0; vertical-align: middle; cursor: pointer;}*/
em, address{font-style: normal;}
select, button{border: 0; background: none; padding: 0; margin: 0; vertical-align: middle; cursor: pointer;}
input{border: 0; background: none; padding: 0; margin: 0; vertical-align: middle;}
/* a-style */
a{margin: 0; padding: 0; vertical-align: baseline; background: transparent; color: #000; text-decoration: none; font-size: 14px; line-height: 25px;}
a: hover,a: active,a: focus{color: #004b8c; text-decoration: none;}
.hiddenTitle{position: absolute; left: -999999px; width: 1px; height: 1px; overflow: hidden;}
.off{display: none; }
.clear{clear: both}
.blind{display: block; overflow: hidden; position: absolute; top: -1000em; left: 0;}
.ir span{display: block; overflow: hidden; visibility: hidden; position: relative; width: 1px; height: 1px; visibility: hidden; z-index: -1;}
.off{display: none;}
.hide, .hide *{display:block;position:absolute;visibility:hidden;top:-10000em;left:0;width:0;height:0;margin:0;padding:0;overflow:hidden;text-indent:-10000em;line-height:0;border:0 none}
.clearfix:after{clear: both; content:""; display:block;}

#wrap{position: relative; z-index: 1; width: 100%; height: auto; text-align: left; word-break: keep-all;}
p{word-break: break-all;}
.section{min-height: 2000px; background: #fef9f7;}
/* media 기ì¤???��?ë°?�ë€?��?�ˆ�?��?*/
/* web */
.btn_top{position: fixed; z-index: 99; bottom: 20px; right: 20px; display: block; width: 60px; height: 60px; line-height: 70px; background: url(/contents/img/w_btn_up.png) center 20px no-repeat rgb(0, 0, 0); alpha: 0.5; opacity: 0.5; filter: alpha(opacity=50); border-radius: 10px; color: #fff; text-align: center;}
/* top_banner start */
.top_banner{width: 100%; background: #f9f9f9;}
.top_banner ul{overflow: hidden; clear: both; width: 1024px; margin: 0 auto;}
.top_banner ul li{float: left;}
.top_banner ul li a{display: block; width: 255px; height: 30px; line-height: 30px; text-align: center; font-size: 15px; font-weight: bold; background: #dedfdf; text-indent: -9999999;}
.top_banner ul li a:hover{color: #004b8c;}
.top_banner ul li.center{box-sizing: border-box; border-right:1px solid #d8d8d8;}
.top_banner ul li:nth-child(2) a{background: url(/contents/img/txt_btn_gr_02.png) center center no-repeat;}
.top_banner ul li:nth-child(3) a{background: url(/contents/img/txt_btn_gr_01.png) center center no-repeat;}
.top_banner ul li:nth-child(4) a{background: url(/contents/img/txt_btn_gr_03.png) center center no-repeat;}
.top_banner ul li:nth-child(1) a{background: url(/contents/img/txt_btn_gr_04.png) center center no-repeat;}
.top_banner ul li:nth-child(2) a.on{background: url(/contents/img/txt_btn_wh_02.png) center center no-repeat #004b8c;}
.top_banner ul li:nth-child(3) a.on{background: url(/contents/img/txt_btn_wh_01.png) center center no-repeat #004b8c;}
.top_banner ul li:nth-child(4) a.on{background: url(/contents/img/txt_btn_wh_03.png) center center no-repeat #004b8c;}
.top_banner ul li:nth-child(1) a.on{background: url(/contents/img/txt_btn_wh_04.png) center center no-repeat #004b8c;}
/* top_banner end */
/* header start */
.mobile_header{display: none;}
.web_header{position: relative; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; min-width: 1200px; background: #fff; border-bottom: 1px solid #eee;}
.web_header.on{position: relative; margin-bottom: -67px;}
.web_header .global{overflow: hidden; clear: both; width: 1160px; padding: 0 20px; height: auto; margin: 0 auto;}
.web_header .global h1{float: left; margin-top: 15px;}
.web_header .global h1 a{display: block; width: 129px; height: 40px; background: url(/contents/img/b_logo_main.png) 0 0 no-repeat; background-size: 104px 39px;}
.web_header .global .nav{float: right;}
.web_header .global .nav ul{overflow: hidden; clear: both;}
.web_header .global .nav ul li.on > a{color:#004b8c !important; border-bottom: 3px solid #004b8c;}
.web_header .global .nav .gnb_1{width: 88px;}
.web_header .global .nav .gnb_2{width: 88px;}
.web_header .global .nav .gnb_3{width: 88px;}
.web_header .global .nav .gnb_4{width: 122px;}
.web_header .global .nav .gnb_5{width: 139px;}
.web_header .global .nav .gnb_6{width: 88px;}
.web_header .global .nav .gnb_7{width: 88px;}
.web_header .global .nav .gnb_8{width: 88px;}
.web_header .global .nav .gnb_9{width: 122px;}

.web_header .global ul li{float: left; margin-left: 20px;}
.web_header .global ul li > a{position: relative; z-index: 1000; display: block; padding: 15px 10px 12px; height: 40px; line-height: 50px; color: #444; font-size: 18px; font-weight: bold; border-bottom: 3px solid #eee; border-bottom: 3px solid rgba(0, 0, 0, 0);}
.web_header .global ul li > a.on{border-bottom: 3px solid #004b8c; color: #004b8c;}
.web_header .global ul li > a:hover{border-bottom: 3px solid #004b8c; color: #004b8c; transition: all 0.2s ease-in;}

.mobile_header{display: none;}
/* category_nav start*/
.subMenuWrap{position:absolute; z-index: 99; top: 67px; overflow: hidden; width: 100%;}
.web_header .category_nav{position: absolute; z-index: 1000; left: 0; width: 100%; border-bottom: 1px solid #ddd;}
.web_header .category_nav .category_nav_bg{position: absolute; z-index: 1000; top: 3px; left: 0; width: 100%; height: 43px; background: #f6fafd; border-bottom: 1px solid #dadada;}
.web_header .bg{position: absolute; z-index: 99; left: 0; width: 100%; background: #fff; border-top: 3px solid #eee;}
.web_header .category_nav .cover{ position: relative; z-index: 1001; width: 1200px; margin: 0 auto;}
.web_header .category_nav .cover > ol{overflow: hidden; clear: both;}
.web_header .category_nav .cover.sub1 ol{margin-left: 124px;}
.web_header .category_nav .cover.sub2 ol{margin-left: 312px;}
.web_header .category_nav .cover.sub3 ol{margin-left: 360px;}
.web_header .category_nav .cover.sub4 ol{margin-left: 50px;}
.web_header .category_nav .cover.sub5 ol{margin-left: 629px;}
.web_header .category_nav .cover.sub6 ol{margin-left: 718px;}
.web_header .category_nav .cover.sub7 ol{margin-left: 660px;}
.web_header .category_nav .cover.sub8 ol{margin-left: 820px;}
.web_header .category_nav .cover.sub9 ol{margin-left: 650px;}
.web_header .category_nav .cover ol > li{float: left; margin: 0 40px 0 0;}
.web_header .category_nav .cover ol > li:last-child{float: left; margin: 0 0 0 0;}
.web_header .category_nav .cover ol > li div { padding-top: 20px; padding-bottom: 20px;}
.web_header .category_nav .cover ol > li strong{display: block; padding-top: 12px; padding-bottom: 9px;}
.web_header .category_nav .cover ol > li strong a{font-weight: bold; font-size: 15px; color: #222;}
.web_header .category_nav .cover ol > li strong a:hover{color: #004b8c;}
.web_header .category_nav .cover ol > li em{display: block;}
.web_header .category_nav .cover ol > li em a{display: block; font-weight: normal; font-size: 13px; height: 22px; line-height: 22px; color: #777;}
.web_header .category_nav .cover ol > li em a:hover{color: #004b8c;}
/* category_nav end*/
/* header end */

/* footer start*/
.footer_wrap{width: 100%; height: auto; background: #2e2b2b;}
.footer_wrap div{width: 1200px; margin: 0 auto;}
.footer_wrap h1{float: left;}
.footer_wrap h1{padding: 23px 0 0 0;}
.footer_wrap h1 a{display: block; width: 104px; height: 39px; background: url(/contents/img/logo_main.png) 0 0 no-repeat; background-size: 104px 39px;}
.footer_wrap h1 a:hover{color: #004b8c;}
.footer_wrap .copy_right,.footer_wrap .footer_wrap{overflow: hidden; clear: both;}
.footer_wrap div .fnb, .footer_wrap div ul li{float: left;}
.footer_wrap div .fnb{width: auto; margin-left: 50px;}
.footer_wrap div ul li{margin: 29px 30px 0 0;}
.footer_wrap div a{font-size: 11px; color: #fff;}
.footer_wrap div a:hover{color: #004b8c;}
.line{display: block; margin: 20px 0 10px 0; border-bottom: 1px solid #515151;}
.footer_wrap address{float: left; margin: 11px 20px 11px; font-size: 11px; line-height: 22px; color: #fff;}
.footer_wrap .hope_btn{float: right; display: block; width: 83px; height: 49px; background: url(/contents/img/banner_footer_main.png) 0 0 no-repeat; background-size: 83px 49px; text-align: center;}

.select_type.select_type1.family_wrap {position: relative; float: right; overflow: hidden; width: 140px; height: 20px; margin-top: 35px; background: #fff url(/contents/img/btn_down.png) 120px center no-repeat; background-size: 5px 3px;}
.family{position: absolute; z-index: 5; display: block; width: 98px; height: 18px; padding: 0 20px; line-height: 20px; border: 1px solid #dadada; font-size: 11px;}
.family_select{position: absolute; z-index: 10; opacity: 0; width: 140px; height: 20px;}

/* footer end*/
/* web */

/* mobile*/
@media screen and (max-width: 1199px){
    /* top_banner start */
    .top_banner ul{width: 100%;}
    .top_banner ul li{width: 25%;}
    .top_banner ul li a{width: 100%; height: 40px; line-height: 40px;}
    .top_banner ul li a.on{background-size: 60px auto;}
	.top_banner ul li a span{background-size: 73px auto; margin-top: 0px;}
	.top_banner ul li:nth-child(1) a{background: url(/contents/img/txt_btn_gr_01_m.png) center center no-repeat; background-size: contain;}
	.top_banner ul li:nth-child(2) a{background: url(/contents/img/txt_btn_gr_02_m.png) center center no-repeat; background-size: contain;}
	.top_banner ul li:nth-child(3) a{background: url(/contents/img/txt_btn_gr_01_m.png) center center no-repeat; background-size: contain;}
	.top_banner ul li:nth-child(4) a{background: url(/contents/img/txt_btn_gr_03_m.png) center center no-repeat; background-size: contain;}
	.top_banner ul li:nth-child(1) a.on{background: url(/contents/img/txt_btn_wh_01_m.png) center center no-repeat #004b8c; background-size: contain;}
	.top_banner ul li:nth-child(2) a.on{background: url(/contents/img/txt_btn_wh_02_m.png) center center no-repeat #004b8c; background-size: contain;}
	.top_banner ul li:nth-child(3) a.on{background: url(/contents/img/txt_btn_wh_01_m.png) center center no-repeat #004b8c; background-size: contain;}
	.top_banner ul li:nth-child(4) a.on{background: url(/contents/img/txt_btn_wh_03_m.png) center center no-repeat #004b8c; background-size: contain;}
	
    /* top_banner end */
    /* header start */
    .web_header{display: none;}
    .mobile_header{display: block; position: fixed; z-index: 100; top: 0; width: 100%; border-bottom: 1px solid #eee;}
    .mobile_header.on{position: relative; top: 0;}
    .mobile_header .global{overflow: hidden; clear: both; width: 100%; background: #fff;}
    .mobile_header .global h1{float: left;}
    .mobile_header .global h1 a{display: block; width: 104px; height: 39px; padding: 15px; background: url(/contents/img/b_logo_main.png) center center no-repeat; background-size: 104px 39px;}
    .mobile_header .global .menu_btn{float: right; display: block; width: 39px; height: 39px; padding: 15px; background: url(/contents/img/b_toggle_btn.png) center center no-repeat; background-size: 50%;}
    .mobile_header .nav{position: fixed; z-index: 100; top: 0; width: 100%; height: 100%; overflow-y: auto;}
    .closeBtn2{position: fixed; top: 0; z-index: 100; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4);}
    .closeBtn1{position:absolute; top: 20px; right: 20px; z-index: 1000; display: block; width: 29px; height: 29px; background: url(/contents/img/b_toggle_colsed_btn.png) center center no-repeat #fff;}
    .mobile_header .nav ul{position: relative; z-index: 101; height: 100%; margin-left: 30%; background: #fff; border-left: 1px solid rgba(0, 0, 0, 0.1);}
    .mobile_header .nav ul li:first-child > a{border-top: 1px solid #dadada;}
    .mobile_header .nav > ul > li:first-child{padding-top: 69px;}
    .mobile_header .nav ul li > a{display: block; padding: 10px; background: url(/contents/img/btn_down.png) 98% center no-repeat #fff; border-bottom: 1px solid #dadada; color: #444; font-size: 18px; font-weight: bold;}
    .mobile_header .nav ul li > a.on{background: url(/contents/img/btn_up.png) 98% center no-repeat #fff;}
    /* category_nav start*/
    .mobile_header .category_nav ol li strong a{display: block; padding: 10px 10px 10px 15px; border-bottom: 1px solid #dedfdf; font-size: 14px; line-height: 25px; background: #eee;}
    .mobile_header .category_nav ol li strong.in_depth a{background: url(/contents/img/btn_down.png) 98% center no-repeat #eee;}
    .mobile_header .category_nav ol li strong.in_depth a.on{background: url(/contents/img/btn_up.png) 98% center no-repeat #efefef;}
    .mobile_header .category_nav ol li em a{display: block; padding: 10px 10px 10px 15px; background: #efffff; border-bottom: 1px solid #dedfdf; font-size: 14px;}
    /* category_nav end*/
    /* header end */
    /* footer start*/
    .footer_wrap{width: 100%; height: auto; background: #2e2b2b;}
    .footer_wrap div{width: 90%; margin: 0 auto;}
    .footer_wrap h1{width: 100%; padding: 26px 0 30px 0;}
    .footer_wrap h1 a{display: block; width: 104px; height: 39px; background: url(/contents/img/logo_main.png) 0 0 no-repeat; background-size: 104px 39px; text-align: center;}
    .footer_wrap .copy_right,.footer_wrap .footer_wrap{overflow: hidden; clear: both;}
    .footer_wrap div .fnb{float: none; clear: both; overflow: hidden; width: 100%; margin-bottom: 20px; margin-left: 0;}
    .footer_wrap div ul li{float: left; margin: 0 20px 0 0;}
    /* .footer_wrap div .family{float: none; clear: both; display: block; font-size: 13px; color: #fff;} */
    .select_type.select_type1.family_wrap {clear: both; float: none; margin: 0;}
	.family{}
	.family_select{}
    .footer_wrap div a{font-size: 13px; color: #fff;}
    .line{display: block; margin: 20px 0 10px 0; border-bottom: 1px solid #515151;}
    .footer_wrap address{float: none; margin-top: 11px; font-size: 13px; line-height: 22px; color: #fff;}
    .footer_wrap .hope_btn{float: none; display: block; width: 83px; height: 49px; margin-top: 20px; background: url(/contents/img/banner_footer_main.png) 0 0 no-repeat; background-size: 83px 49px; text-align: center;}
    /* footer end*/
  
}