@charset "utf-8";
/* CSS Document */

#wrap {position:relative;width:100%;height:100%;margin:0 auto;transition:margin 0.5s ease;max-width:1200px;}

/*LEFT_GNB*/
#wrap .header-wrap-abs {position:absolute;top:0px;left:0;width:225px;height:100%;background:#FFF;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)}
#header-wrap {height:100%;/*position:fixed;*/z-index:888}
#header {display:block;position:relative;margin:0px auto;padding-top: 35px;height:auto;}
#logo {/*position:fixed;*/top:0px;left:0;text-align:center;width:225px;z-index:3000;box-sizing:border-box; background:url(../../images/_WEBZINE08/main/logo_bg.png) no-repeat 50% 0}
#logo .glogo {display:inline-block; padding:60px 0 0; height:120px;}
#logo .logo-wrap {display:block;margin-top:8px;}
#logo .logo-wrap a {display:inline-block;}
#logo .logo-wrap .slogo-txt {display:inline-block;vertical-align:top;font-size:22px;font-weight:500;letter-spacing:-0.05em;line-height:1;color:#002247;}

	/*MOBILE_GNB*/
	.tmn-tit {display:none;}
	.bt-mnclose {display:none;position:absolute;right:0;top:0;width:60px;height:60px;border:0;background:rgba(0,0,0,0.3);}
	.bt-mnclose:before {content:'';position:absolute;left:24%;top:50%;width:60%;height:2px;background:#fff;transform: rotate(45deg);}
	.bt-mnclose:after {content:'';position:absolute;left:24%;top:50%;width:60%;height:2px;background:#fff;transform: rotate(-45deg);}
	.body-slide-wr {position:relative;width:100%;height:100%;transition:margin 0.5s ease;}
	.body-slider-ovclick {position:fixed;z-index:8000;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.5);}

/*CONTENT*/
#container-wrap #contents{clear:both;max-width:100%;}

	

#footer {padding:20px 10px 30px;position:relative; display:none}
#footer .logo{position:absolute;right:10px;bottom:30px;background:url('../../images/_WEBZINE08/common/footer_logo.png') no-repeat 0 0;width:185px;height:27px;}
#footer .logo a{display:none;}
#footer .link ul{float:left;margin-bottom:10px;}
#footer .link ul li{display:inline-block;}
#footer .link ul li:after{display:inline-block; position:relative; top:-1px; width:1px; height:9px; margin:0 10px; background-color:#818181; content:''; vertical-align:middle;}
#footer .link ul li:last-child:after{background:none;}
#footer .link ul li:first-child a{color:#f36a18;}
#footer .link ul li a[target='_blank'] {background:url('../../images/_WEBZINE08/common/footer_link.png') no-repeat right 6px;padding-right:18px;}
#footer .link div{float:right;}
#footer .link div span{color:#fd8900;margin:0 5px 0 5px;}
#footer .address {clear:both;border-top:1px solid #d5d5d5;padding-top:10px;}
#footer .address p.copyright{color:#aaa; font-size:13px}

.loaded {background:url('../../images/_WEBZINE08/main/bg_head.png') no-repeat 50% 35px; position:relative}
#container-wrap {padding-top:35px; margin-left:250px}

/*VISUAL*/
.visual_zone {width:100%; height:500px;/*position:relative;*/}
.visual_zone .visual {width:100%; height:auto;overflow:hidden;}
.visual_zone .visual li {width:100%; height:450px;}
.visual_zone .visual li article{margin:100px auto 0;width:70%}
.visual_zone .visual li article h3{position:relative;width:70px;font-size:18px;font-family:'NanumSquare';font-weight:600;color:#f60;/*text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);*/text-align:center;}
.visual_zone .visual li article h3:before {content:''; position:absolute; top:3px; left:-30px; height:10px; width:10px;background:#F60;display:block;border-radius:40px}
.visual_zone .visual li article h3:after {content:''; position:absolute; top:3px; right:-30px; height:10px; width:10px;background:#F60;display:block;border-radius:40px}
.visual_zone .visual li article div{margin-top:40px;display:block;font-size:18px;font-family:'NanumSquare';font-weight:400;color:#fff;line-height:46px;text-align:left;}
.visual_zone .visual li article strong{font-size:50px;font-weight:600;color:#333399;line-height:1.2;text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);}
.visual_zone .visual li article div em { display:block;margin-top:15px;line-height:1;color:#333}
.visual_zone .visual li article div .btn {margin-top:15px;padding:15px 35px;font-size:15px;line-height:1;color:#FFF; background-color:#F60;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
.visual_zone .visual li article div .btn:hover { -webkit-box-shadow: 0px 6px 4px 0px rgba(0,0,0,0.2);-moz-box-shadow: 0px 6px 4px 0px rgba(0,0,0,0.2);box-shadow: 0px 6px 4px 0px rgba(0,0,0,0.2);}


	ul.bjqs{position:relative;list-style:none;padding:0;margin:0;/*overflow:hidden;*/ display:none;}
	li.bjqs-slide{position:absolute;display:none;z-index:1;}
	ul.bjqs-controls{list-style:none;margin:0;padding:0}
	ul.bjqs-controls.v-centered li a{position:absolute;z-index:9}
	ul.bjqs-controls.v-centered li.bjqs-next a{background:url('../../images/_WEBZINE08/main/visual/btnArrow_next.png') no-repeat 0 0;right:10px;width:45px;height:75px;display: block;line-height:4400px;font-size:0;overflow:hidden}
	ul.bjqs-controls.v-centered li.bjqs-prev a{background:url('../../images/_WEBZINE08/main/visual/btnArrow_prev.png') no-repeat 0 0;left:10px;width:45px;height:75px;display: block;line-height:4400px;font-size:0;overflow:hidden}
	ol.bjqs-markers {position:absolute;bottom:35px; left:50% ;z-index:1}
	ol.bjqs-markers li {float:left;margin: 0 3px; display: inline-block}
	ol.bjqs-markers li a {width: 12px; height: 12px; display: block; background: url('../../images/_WEBZINE08/main/visual/visual_pager.png') no-repeat; background-position:-18px 0; text-indent:-9999em}
	ol.bjqs-stop {position:absolute;bottom:35px; left:48% ;z-index:1;}
	ol.bjqs-stop li.pause a {width:12px; height:12px; display:block; text-indent:-9999em;background:url('../../images/_WEBZINE08/main/visual/visual_pause.png') no-repeat 0 0;}
	ol.bjqs-stop li.play a {width:12px; height:12px; display:block; text-indent:-9999em;background:url('../../images/_WEBZINE08/main/visual/visual_play.png') no-repeat 0 0;}
	ol.bjqs-markers li.play a {background:url('../../images/_WEBZINE08/main/visual/visual_play.png') no-repeat 0 0;}
	ol.bjqs-markers li.pause a {background:url('../../images/_WEBZINE08/main/visual/visual_pause.png') no-repeat 0 0;}
	ol.bjqs-markers li a:hover, ol.bjqs-markers li.active-marker a {background-position:0 0 !important;}


/* 전문가 칼럼 */
.m_area { width:100%; overflow:hidden;}
.m_area li { height:495px; display:inline-block; float:left;width:33.3%; margin-bottom:25px}
.m_area li a {margin:0 auto;width:95%;height:100%;display:block;position:relative;overflow:hidden;text-align:center;box-sizing:border-box;}
.m_area .txt {position:absolute;left:0;top:55px;color:#fff;z-index:1;width:100%}
.m_area .txt .tit {display:inline-block;margin-bottom:40px;font-weight:400}
.m_area .txt .tit:before {border-top:2px solid #FFF;content:'';display:block;padding-top:10px}
.m_area .txt .cnt {font-size:26px;font-weight:bold;color:#FFF;line-height:1.3}
.m_area .thumb {width:100%;height:440px;overflow:hidden;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;display:block;color:#FFF}
.m_area .tcnt { position:absolute;left:0;top:440px;width:100%;min-height:55px;padding:0px;background:#b1d77c;
				-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;display:block}
.m_area .tcnt .tit { width:90%;margin:0 auto;font-weight:500;font-size:26px;font-weight:bold;line-height:1.1;color:#FFF}
.m_area .tcnt .cnt { width:90%;margin:10px auto 30px;color:#FFF}
.m_area .area_more { line-height:55px;font-size:14px; color:#FFF;position:relative;width:100%;display:block}
.m_area .area_more:after {content:'';display:block;position:absolute;right:35%;top:21px;width:6px;height:11px;background:url(../../images/_WEBZINE08/main/bul_arrow.gif) no-repeat 0 0}
.m_area a:hover .thumb {-ms-transform:scale(1.2,1.2);-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}
.m_area .thumb img {height:100%}
.column .thumb {background:url(../../images/_WEBZINE08/main/column_img.png) no-repeat center 0%}
.column .tcnt {background:#3366cc}
.issue .thumb {background:url(../../images/_WEBZINE08/main/issue_img.png) no-repeat center 0%}
.issue .tcnt {background:#66cc66}
.m_area li ul {width:235px; margin:0 auto;}
.m_area li li {float:none; width:235px;height:235px;margin-bottom:25px;position:relative}
.m_area li li:last-child {margin-bottom:0}
.m_area li li a {width:100%;color:#FFF;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;border-radius: 300px;position:relative}
.jnile .thumb {background:url(../../images/_WEBZINE08/main/jnile_img.png) no-repeat center center}
.best .thumb {background:url(../../images/_WEBZINE08/main/best_img.png) no-repeat center bottom}
.r_area .thumb {height:235px} 
.r_area .txt {top: 75px}
.r_area .txt .tit {display:inline-block;margin-bottom:10px;font-weight:bold;font-size:26px;color:#99ffcc}
.r_area .txt .tit:before {display:none}
.r_area .txt .cnt {font-size:13px;font-weight:normal}
.r_area li a .area_more, .r_area a .area_more { z-index:1;position:absolute;bottom:45px;left:50%;margin-left:-25%;width:50%;line-height:30px;border:3px solid #FFF}
.r_area .area_more:after, .r_area a .area_more:after {background:#FFF;opacity:0.1;width:100%;height:100%;top:0;left:0;transition: all 0.2s ease-out;}
.r_area a:hover .area_more, .r_area a:hover .area_more {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);transition: all 0.2s ease-out;}
.r_area a:hover .area_more:after, .r_area a:hover .area_more:after {opacity:0.3}

/* 스토리기자단 */
.row { position:relative}
.row:after { content:''; display:block;}
.m_area.story li { height:235px; margin-bottom:20px; width:33.3%; overflow:hidden}
.m_area.story li:nth-child(6) .tcnt .tit{ line-height:1.3}
.m_area.story .tcnt {top:0px; background:none}
.region {background:url(../../images/_WEBZINE08/main/area_img.png) no-repeat center 43%}
.homepage {background:url(../../images/_WEBZINE08/main/homepage_img.png) no-repeat center center}
.m_area.story li.r_area a {width:235px;height:100%;display:block;border-radius:300px}
.m_area.story li.r_area .txt .tit {color:#3399cc}
.m_area.story li.r_area .txt .cnt {color:#666}
.m_area.story li.r_area a .area_more {bottom:65px;border:2px solid #CCC;color:#666}
.m_area.story li.r_area a.homepage {color:#996666}
.m_area.story li.r_area a.homepage .area_more {bottom:50px;color:#333}
.m_area.story li.r_area a.homepage .area_more:after {opacity:0.5}
.m_area.story .thumb img {height:auto}
.m_area.story a {border-bottom:5px solid #FFF;transition: all 0.2s ease-out;}
.m_area.story a:hover .thumb {-ms-transform:scale(1,1);-webkit-transform:scale(1,1);transform:scale(1,1)}
.m_area.story .tcnt {top:125px;left:4%;width:92%;min-height:110px;background:#FFF;z-index:1;}
.m_area.story .tcnt .tit {color:#F60; display: inline-block; margin:20px 0 0; font-weight: 400;font-size: inherit;}
.m_area.story .tcnt .cnt {color:inherit;font-size: 18px;line-height: 1.3; font-weight:bold}
.m_area.story a:hover {border-bottom:5px solid #F60}
.m_area.story li.r_area a {border-bottom:0px}

/* footer */
.copyright {position:absolute; bottom:20px; left:20px;}
.copyright .newsletter {text-align:center}
.copyright p { letter-spacing:-1px;}
.copyright ul {margin:20px 0 10px; padding-top:20px;border-top:1px solid #CCC}
.copyright ul li {font-weight:bold;margin: 5px 0;}
.copyright ul li:first-child strong {padding-left:5px}

/* gnb */
#gnb {margin-bottom:20px}
#gnb .depth01 li {width:225px;border-bottom:1px solid #CCC;}
#gnb .depth01 li a {position:relative;display:block;color:#333;letter-spacing:-1px;line-height:1.3em;width:100%;text-align:left; padding: 12px 0; text-indent:20px;font-weight:bold}
#gnb .depth01 li a:hover, #gnb .depth01 li a.on{background:#002445;color:#FFF}
#gnb .depth01 li a.on:after, #gnb .depth01 li a:hover:after {position:absolute;top:17px;right:20px;content:"";display:block;width:6px;height:11px;background:url(../../images/_WEBZINE08/common/mn_a1_arr.png) no-repeat}
#gnb .depth02 {/*position:absolute;top:404px;left:225px;*/width:100%;box-sizing:border-box;border-top:0;border-right:0;background-size:contain;background:rgba(55,110,186,0.8);}
#gnb .depth02 li {position:relative;float:none;color:#333;letter-spacing:-1px;line-height:1.3em;width:100%;text-align:left;border-bottom:0px}
#gnb .depth02 li a {color:#FFF; font-weight:normal; font-size:14px;width:auto;text-indent:0;padding:7px 12px 7px 25px}
#gnb .depth02 li a:after {position:absolute;top:21px;left:12px;content:"";display:block;width:5px;height:2px;background:#CCC;}
#gnb .depth02 li a:hover {background:#FFF;color:#333;text-decoration:underline}
#gnb .depth02 li a:hover:after {height:2px;background:#1c4190;}
#gnbAll, #gnb .depth01 > li:last-child {display:none}




@media all and (min-width:1000px) and (max-width:1200px){
	#container-wrap {width:auto}
	.m_area .tcnt .cnt { font-size:14px}
	.m_area.story .tcnt .tit { font-size:18px !important}
	}

@media only screen and (max-width:999px){
	aside.relate_site { display:none}
	#wrap .header-wrap-abs { background:none; box-shadow:0px 0px 0px 0px}
	#container-wrap {width:100%; margin:0 auto}
	#wrap .header-wrap-abs { display:none}
	#container-wrap { padding-top:0px !important}
	.m_area.story .tcnt .tit { font-size:20px !important}
	.m_area.story .tcnt .cnt { font-size:14px !important}
	}
@media only screen and (max-width:800px){
	.m_area.story li { margin-bottom:10px;width:50%}
	.m_area li { height:auto;}
	.m_area .thumb img { height:100%}
	.m_area .tcnt { background:none; top:0px}
	}

@media only screen and (max-width:530px){
	.m_area li, .m_area.story li { width:100%; float:none}
	.m_area.story li .thumb img {width:100%;height:100%}
	}