@charset "utf-8";

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

/* ======================================== Reset ======================================== */
*{-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(255,255,255,0);}
html,body{width:100%;height:100%;-webkit-font-smoothing:antialiased;box-sizing:border-box;}
body,p,h1,h2,h2,h3,h4,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,pre{margin:0;padding:0;}
body{font-size:16px;font-weight:400;color:#000;}
input,textarea,select,button,table,pre{}
ul,ol,li{display:block;list-style:none;}
img{border:0px none;}
img,input,button,label,select{vertical-align:middle;}
input[type='text'],input[type='password'],input[type='number']{text-indent:5px;}
input[type='submit'],input[type='button'],button{cursor:pointer;}
i,em,address{font-style:normal;}
a{text-decoration:none;color:#000;}
a:hover{text-decoration:none;}
table{border-spacing:0;table-layout:fixed;}
article,aside,hgroup,header,footer,figure,figcaption,nav,section{display:block;}
.clear{display:block;height:0px;font-size:0px;font-size:0em;line-height:0px;content:'';overflow:hidden;clear:both;}
.inner{display:block;position:relative;margin:0 auto;width:1170px;box-sizing:border-box;}
.inner:after{display:block;content:'';clear:both;}
.inner.w1280{width:1280px;}
caption, .soundOnly{display:block !important;position:absolute !important;top:-9999px !important;}
.alignLeft{text-align:left !important;}
.alignRight{text-align:right !important;}
.alignCenter{text-align:center !important;}
.floatLeft{float:left !important;}
.floatRight{float:right !important;}
.onlyDesktop{display:block;}
span.onlyDesktop{display:inline;}
.onlyDesktop{display:block;}
.onlyTablet{display:none;}
.onlyPhone{display:none;}


/* ==============================================================================================================
= 너비, 높이 사이즈를 공통으로 사용하기 위한 클래스 부여
============================================================================================================== */
.w10{width:10px}.w20{width:20px}.w30{width:30px}.w40{width:40px}.w50{width:50px}.w60{width:60px}.w70{width:70px}.w80{width:80px}.w90{width:90px}.w100{width:100px}.w110{width:110px}.w120{width:120px}.w130{width:130px}.w140{width:140px}.w150{width:150px}.w160{width:160px}.w170{width:170px}.w180{width:180px}.w190{width:190px}.w200{width:200px}.w210{width:210px}.w220{width:220px}.w230{width:230px}.w240{width:240px}.w250{width:250px}.w260{width:260px}.w270{width:270px}.w280{width:280px}.w290{width:290px}.w300{width:300px}.w310{width:310px}.w320{width:320px}.w330{width:330px}.w340{width:340px}.w350{width:350px}.w360{width:360px}.w370{width:370px}.w380{width:380px}.w390{width:390px}.w400{width:400px}.w410{width:410px}.w420{width:420px}.w430{width:430px}.w440{width:440px}.w450{width:450px}.w460{width:460px}.w470{width:470px}.w480{width:480px}.w490{width:490px}.w500{width:500px}.w510{width:510px}.w520{width:520px}.w530{width:530px}.w540{width:540px}.w550{width:550px}.w560{width:560px}.w570{width:570px}.w580{width:580px}.w590{width:590px}.w600{width:600px}.w610{width:610px}.w620{width:620px}.w630{width:630px}.w640{width:640px}.w650{width:650px}.w660{width:660px}.w670{width:670px}.w680{width:680px}.w690{width:690px}.w700{width:700px}.w2000{width:2000px !important;}
.w15{width:15px}.w25{width:25px}.w35{width:35px}.w45{width:45px}.w55{width:55px}.w65{width:65px}.w75{width:75px}.w85{width:85px}.w90{width:95px}
.w5p{width:5%}.w8p{width:8%}.w10p{width:10%}.w12p{width:12%}.w15p{width:15%}.w18p{width:18%}.w20p{width:20%}.w25p{width:25%}.w30p{width:30%}.w35p{width:35%}.w40p{width:40%}.w45p{width:45%}.w48p{width:48%}.w49p{width:49%}.w50p{width:50%}.w55p{width:55%}.w60p{width:60%}.w65p{width:65%}.w70p{width:70%}.w75p{width:75%}.w80p{width:80%}.w85p{width:85%}.w90p{width:90%}.w95p{width:95%}.w100p{width:99.9%}
.h10{height:10px}.h20{height:20px}.h20{height:30px}.h30{height:40px}.h40{height:50px}.h60{height:60px}.h70{height:70px}.h80{height:80px}.h90{height:90px}.h100{height:100px}.h110{height:110px}.h120{height:120px}.h130{height:130px}.h140{height:140px}.h150{height:150px}.h160{height:160px}.h170{height:170px}.h180{height:180px}.h190{height:190px}.h200{height:200px}.h210{height:210px}.h220{height:220px}.h230{height:230px}.h240{height:240px}.h250{height:250px}.h260{height:260px}.h270{height:270px}.h280{height:280px}.h290{height:290px}.h200{height:300px}.h300{height:300px}.h310{height:310px}.h320{height:320px}.h330{height:330px}.h340{height:340px}.h350{height:350px}.h360{height:360px}.h370{height:370px}.h380{height:380px}.h390{height:390px}.h400{height:400px}.h410{height:410px}.h420{height:420px}.h430{height:430px}.h440{height:440px}.h450{height:450px}.h460{height:460px}.h470{height:470px}.h480{height:480px}.h490{height:490px}.h500{height:500px}.h510{height:510px}.h520{height:520px}.h530{height:530px}.h540{height:540px}.h550{height:550px}.h560{height:560px}.h570{height:570px}.h580{height:580px}.h590{height:590px}.h600{height:600px}.h610{height:610px}.h620{height:620px}.h630{height:630px}.h640{height:640px}.h650{height:650px}.h660{height:660px}.h670{height:670px}.h680{height:680px}.h690{height:690px}.h700{height:700px}


/* ==============================================================================================================
= Div Group
= 화면 분할을 위해서 사용함
= 사용방법 : cols2(개수) 클래스를 통해서 개수만큼 균등분할하거나 w20(%)p 클래스를 통해서 분할 사이즈 조정
============================================================================================================== */
.divGroup{margin:0 -10px;}
.divGroup:after{display:block;content:'';clear:both;}
.divGroup > div{float:left;padding:0 10px;box-sizing:border-box;}
.divGroup.cols2 > div{width:50%;}
.divGroup.cols3 > div{width:33.3333%;}
.divGroup.cols4 > div{width:25%;}
.divGroup.cols5 > div{width:20%;}
.divGroup.noMargin{margin:0;}
.divGroup.noMargin > div{padding:0;}
.btnArea.divGroup{margin:15px -5px;}
.btnArea.divGroup > div{padding:5px;}


/* ==============================================================================================================
= Button 기본스타일 지정
= 사이즈 : btn_ss < btn_s < btn_inline < btn_m < btn_l
============================================================================================================== */
.btnArea{margin:20px 0;text-align:center;}
.btnArea:after{display:block;content:'';clear:both;}
.btnArea.right{text-align:right;}
.btnArea.left{text-align:left;}
.btnArea .right{float:right;text-align:right;}
.btnArea .left{float:left;text-align:left;}
.btn_ss,
.btn_s,
.btn_m,
.btn_l,
.btn_inline{display:inline-block;color:#666;text-align:center;background-color:#fff;border:1px #666 solid;vertical-align:middle;box-sizing:border-box;}
.btn_ss.on,
.btn_s.on,
.btn_m.on,
.btn_l.on,
.btn_inline.on{color:#fff;background-color:#666;border:1px #666 solid;}
.btn_ss{padding:0 6px;height:18px;font-size:11px;line-height:16px;/*border-radius:3px;*/}
.btn_s{padding:0 8px;height:24px;font-size:12px;line-height:22px;/*border-radius:4px;*/}
.btn_m{padding:0 14px;height:30px;font-size:12px;line-height:28px;/*border-radius:5px;*/}
.btn_l{padding:0 18px;height:40px;font-size:15px;line-height:38px;/*border-radius:7px;*/}
.btn_inline{padding:0 10px;height:30px;font-size:12px;line-height:28px;/*border-radius:5px;*/}


/* ==============================================================================================================
= 레이아웃
============================================================================================================== */
#wrap{position:relative;}
#header{position:relative;height:70px;z-index:1;}
#header h1{display:block;position:absolute;top:50%;left:10px;margin-top:-14px;width:102px;height:28px;text-indent:-9999em;background:url(../images/logo.png) no-repeat center center;}
#header #gnb{margin-left:260px;height:70px;}
#header #gnb ul,
#header #gnb ul li,
#header #gnb ul li a{display:block;}
#header #gnb > ul{margin-right:-30px;}
#header #gnb > ul:after{display:block;content:'';clear:both;}
#header #gnb > ul > li{float:left;width:140px;line-height:70px;text-align:center;box-sizing:border-box;}
#header #gnb > ul > li.item2{width:220px;}
#header #gnb > ul > li > a{display:inline-block;padding:5px 0;line-height:100%;text-align:center;vertical-align:center;box-sizing:border-box;}
#header #gnb > ul > li.active > a,
#header #gnb > ul > li > a:hover{font-weight:bold;border-bottom:2px #000 solid;}
#header .btn_navOpen,
#header .btn_navClose{display:none;}
#container{padding-bottom:150px;min-height:1000px;}
#footer{padding:80px 0;line-height:130%;background:#ebebeb;}
#footer .logo{display:block;position:absolute;top:0;left:80px;}
#footer > .inner{padding-left:330px;}
#footer .divGroup{color:#363636;}
#footer .divGroup b{display:inline-block;margin-bottom:5px;font-weight:normal;}
.mainVisual{position:relative;margin-top:-70px;background:url(../images/bg_mainVisual.jpg) no-repeat center center;background-size:cover;z-index:0;}
.mainVisual .inner{height:860px;}
.mainVisual p{display:block;position:absolute;top:50%;left:0;margin-top:-145px;font-size:58px;font-weight:bold;color:#fff;line-height:140%;}
.subVisual{position:relative;height:340px;border-top:1px rgba(255,255,255,0.5) solid;box-sizing:border-box;}
.subVisual.bg1{background:url(../images/bg_subVisual1.jpg) no-repeat center center;background-size:cover;}
.subVisual.bg2{background:url(../images/bg_subVisual2.jpg) no-repeat center center;background-size:cover;}
.subVisual.bg3{background:url(../images/bg_subVisual3.jpg) no-repeat center center;background-size:cover;}
.subVisual.bg4{background:url(../images/bg_subVisual4.jpg) no-repeat center center;background-size:cover;}
.subVisual.bg5{background:url(../images/bg_subVisual5.jpg) no-repeat center center;background-size:cover;}
.subVisual.bg6{background:url(../images/bg_subVisual6.jpg) no-repeat center center;background-size:cover;}

.main #header h1{background:url(../images/logo_wh.png) no-repeat center center;}
.main #header #gnb > ul > li > a{color:#fff;}
.main #header #gnb > ul > li.active > a,
.main #header #gnb > ul > li > a:hover{border-bottom:2px #fff solid;}
.main #container > .inner{width:1280px;}

.main #container .section1{padding:60px;font-size:2em;color:#007236;line-height:140%;text-align:center;}
.main #container .section2{border:1px #e1e1e1 solid;border-bottom:0px none;}
.main #container .section2 ul{display:block;}
.main #container .section2 ul li{display:block;position:relative;padding-top:120px;height:639px;border-bottom:1px #e1e1e1 solid;box-sizing:border-box;}
.main #container .section2 ul li .category{display:block;font-size:1.8em;color:#959595;}
.main #container .section2 ul li b{display:block;margin-bottom:10px;font-size:2.5em;line-height:1em;}
.main #container .section2 ul li .desc{display:block;font-size:1.6em;}
.main #container .section2 ul li .desc.img{margin-top:10px;}
.main #container .section2 ul li a.btn_more{display:block;margin-top:45px;padding-left:22px;width:160px;font-size:1.15em;line-height:48px;border:1px #e1e1e1 solid;background:url(../images/btn_more.png) no-repeat 90% center;}
.main #container .section2 ul li:after{display:block;content:'';position:absolute;top:0;bottom:0;width:50%;background-size:cover !important;}
.main #container .section2 ul li.item1{padding-left:55%;}
.main #container .section2 ul li.item1:after{left:0;background:url(../images/img_mainSection1.jpg) no-repeat center center;}
.main #container .section2 ul li.item2{padding-left:5%;}
.main #container .section2 ul li.item2:after{left:50%;background:url(../images/img_mainSection2.jpg) no-repeat center center;}
.main #container .section2 ul li.item3{padding-left:55%;}
.main #container .section2 ul li.item3:after{left:0;background:url(../images/img_mainSection3.jpg) no-repeat center center;}
.main #container .section2 ul li.item4{padding-left:5%;}
.main #container .section2 ul li.item4:after{left:50%;background:url(../images/img_mainSection4.jpg) no-repeat center center;}

#container{font-size:18px;}
#container img{max-width:100%;}
#container .location{margin:10px 30px;color:#959595;line-height:30px;}
#container .location a{color:#959595;}
#container .location img{vertical-align:baseline;}
#container .pageTitle{padding:100px 0 130px 0;margin-bottom:60px;text-align:center;border-bottom:1px #e1e1e1 solid;}
#container h2{display:block;margin-bottom:35px;font-size:3.2em;}
#container h3{display:block;margin-bottom:35px;font-size:2.2em;color:#252525;}
#container h4{display:block;margin-bottom:35px;font-size:1.7em;color:#252525;}
#container p{margin-bottom:50px;}
#container hr{display:block;margin:100px 0 45px;border:0px none;border-top:1px #e1e1e1 solid;}
#container hr.symmetry{margin:60px 0;}
#container .imgBox{padding:20px 0;text-align:center;border:1px #e1e1e1 solid;box-sizing:border-box;}
#container .imgWrap{text-align:center;box-sizing:border-box;}
#container .imgDesc{display:table-row;}
#container .imgDesc > .thumb{display:table-cell;width:50%;text-align:center;vertical-align:middle;}
#container .imgDesc > .desc{display:table-cell;width:50%;vertical-align:middle;}
#container .imgDesc > .desc b{font-size:1.6em;}
#container .imgDesc.top > .desc{padding:15px 50px;vertical-align:top;box-sizing:border-box;}
#container .imgDesc.middle > .desc{padding:15px 50px;vertical-align:middle;box-sizing:border-box;}
#container a.btn_prev{display:inline-block;padding-right:22px;width:160px;font-size:20px;line-height:48px;text-align:right;border:1px #e1e1e1 solid;background:url(../images/btn_prev.png) no-repeat 10% center;}
#container a.btn_next{display:inline-block;padding-left:22px;width:160px;font-size:20px;line-height:48px;text-align:left;border:1px #e1e1e1 solid;background:url(../images/btn_next.png) no-repeat 90% center;}
#container a.btn_back{display:inline-block;padding-right:22px;width:185px;font-size:20px;line-height:48px;text-align:right;border:1px #e1e1e1 solid;background:url(../images/btn_prev.png) no-repeat 10% center;}

#container .info{margin:-20px auto 0;width:850px;}
#container .info b{font-size:1.35em;}


/* ==============================================================================================================
= 반응형
============================================================================================================== */
/*Mobile*/
@media all and (max-width:1024px){
	.inner{width:auto !important;}
	.onlyDesktop{display:block;}
	span.onlyDesktop{display:inline;}
	.onlyTablet{display:none;}
	.onlyPhone{display:none;}
	
	body{padding-top:70px;}
	.overlay{display:none;position:fixed;top:0;bottom:0;left:0;right:0;background:#000;opacity:0.5;z-index:10;}
	.overlay.active{display:block;}
	#header{position:fixed;top:0;left:0;right:0;background:#fff;box-shadow:0 0 5px rgba(0,0,0,0.3);z-index:20;}
	#header h1{top:35px;left:50%;margin-left:-51px;}
	#header #gnb{position:fixed;top:0;bottom:0;left:-270px;margin-left:0;padding-top:70px;width:270px;height:auto;background:#fff;box-sizing:border-box;transition-duration:0.5s;z-index:20;}
	#header #gnb.active{left:0;}
	#header #gnb > ul{margin-right:0;}
	#header #gnb > ul > li{float:none;width:auto !important;text-align:center;}
	#header .btn_navOpen{display:block;position:fixed;top:0;right:0;width:70px;height:70px;text-indent:-9999em;background:url(../images/btn_navOpen.png) no-repeat center center;}
	#header .btn_navClose{display:block;position:absolute;top:0;right:0;width:70px;height:70px;text-indent:-9999em;background:url(../images/btn_navClose.png) no-repeat center center;z-index:2;}
	#footer{padding:40px 20px;font-size:13px;}
	#footer > .inner{padding-left:0;}
	#footer .logo{display:none;}
	#footer .divGroup > div{float:none;width:auto !important;}

	.main #header h1{background:url(../images/logo.png) no-repeat center center;}
	.main #header #gnb > ul > li > a{color:#000;}
	.main #header #gnb > ul > li.active > a,
	.main #header #gnb > ul > li > a:hover{border-bottom:2px #000 solid;}
	.main #container .section1{padding:30px 20px;font-size:1.5em;}
	.main #container .section2 ul li{padding:200px 20px 20px !important;height:auto;}
	.main #container .section2 ul li:after{bottom:inherit;left:0 !important;right:0;width:auto;height:180px;}
	.main #container .section2 ul li b{font-size:2.2em;line-height:120%;}
	.main #container .section2 ul li a.btn_more{margin-top:20px;}

	#container{padding-bottom:50px;min-height:500px;}
	#container .pageTitle{padding:20px 25% 30px;}
	#container .info{width:auto;}
	#container h2{margin-bottom:20px;font-size:2.6em;line-height:110%;}
	#container h3{margin-bottom:20px;font-size:2.2em;line-height:120%;}
	#container h4{margin-bottom:20px;font-size:1.3em;line-height:130%;}
	#container hr{margin:60px 0 30px;}
	#container hr.symmetry{margin:30px 0;}

	.main #container .section2 ul li a.btn_more,
	#container a.btn_prev
	#container a.btn_next{width:120px;font-size:16px;}
	#container a.btn_back{width:150px;font-size:16px;}
}

/* Phone */
@media all and (max-width:639px){
	.onlyDesktop{display:none;}
	.onlyTablet{display:none;}
	.onlyPhone{display:block;}
	span.onlyPhone{display:inline;}

	.mainVisual .inner{height:300px;}
	.mainVisual p{left:20px;margin-top:-30px;font-size:2em;}
	.subVisual{height:120px;}

	#container{font-size:14px;}
	#container .inner{padding:0 10px;}
	#container .imgDesc{display:block;}
	#container .imgDesc > .thumb{display:block;padding:20px 0;width:auto;}
	#container .imgDesc > .desc{display:block;width:auto;}
	#container .imgDesc.top > .desc,
	#container .imgDesc.middle > .desc{padding:15px;}
	#container .divGroup > div{float:none;width:auto !important;}
}

/* Tablet */
@media all and (min-width:640px) and (max-width:1024px){
	.onlyDesktop{display:none;}
	.onlyTablet{display:block;}
	span.onlyTablet{display:inline;}
	.onlyPhone{display:none;}

	.main #container .section2 ul li{padding:300px 20px 20px !important;height:auto;}
	.main #container .section2 ul li:after{height:280px;}
	
	.mainVisual .inner{height:400px;}
	.mainVisual p{left:20px;margin-top:-60px;font-size:2.4em;}
	.subVisual{height:240px;}

	#container{font-size:16px;}
	#container .inner{padding:0 20px;}
}