@charset "utf-8";
@import url('reset.css');

html, body {height:100%;letter-spacing:-0.03em }

/* skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:9999; width:100%; height:1px; margin-top:-1px; display:block; background-color:#3875c1; font-size:14px; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden}
#skipToContent a:focus, #skipToContent a:active {margin-top:0; height:auto; padding:10px 0px}

/* common */
.auto {margin:0 auto}
.img-responsive {display:block; max-width:100%; height:auto}
.mt10 {margin-top:10px}
.mt20 {margin-top:20px}
.mt40 {margin-top:40px}
.mt50 {margin-top:50px}
.mt1 {margin-top:1.3%}
.mt2 {margin-top:2%}
.mt4 {margin-top:4%}
.mt6 {margin-top:6%}
.mt8 {margin-top:8%}
.mt15 {margin-top:15%}
.mt18 {margin-top:18%}
.mt20 {margin-top:20%}
.mt25 {margin-top:25%}
.mt28 {margin-top:28%}
.mt32 {margin-top:32%}
.mb2 {margin-bottom:2%}
.mb4 {margin-bottom:4%}
.mb8 {margin-bottom:8%}
.mb15 {margin-bottom:15%}
.mb25 {margin-bottom:25%}
.mb28 {margin-bottom:28%}
.mt110 {margin-top:25%}
.mt130 {margin-top:28%}
a{color:#707070}
.m_view{display:none}


.top {display:block; position:fixed;	bottom:17%; right:4%; z-index:200; width:38px; /*height:50px;*/ border-radius:25px;background:#898989; color:#fff; font-size:10px;font-family: '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif; text-align:center;padding:12px 0;}	
/*#d69e5f 20%, #b7eeec*/ 
/* wrapLeft (#cddfea 30%, #cc2e44 )#f4ddcb 30%, #7d61d5     #6cc1a4 10%, #bfb060  eaccbc 30%, #e0dd52 3c3dbea 30%, #cc0626*/
#wrapLeft {width:20%; height:100%; /*background:url('../images/sideBg.jpg') #eea1c2 repeat-x;*/background:linear-gradient(#c3dbea 30%, #cc0626); position:fixed; box-sizing:border-box; z-index:9999}
/*#eae2c8 10%, #a7d2e4, #608ecd 70%, #949ab7 85%, #e7b896 95%*/
#side {width:100%; height:100%; box-sizing:border-box; padding:50px 15%; background:url('../images/sideQA.png') center 130px no-repeat}
.vol {font-family:'Rajdhani', sans-serif; font-size:16px; font-weight:400; color:#2d2d2d; margin-top:10px}
.gnb {margin-top:60px}
.gnb > li {font-family:'Rajdhani', sans-serif; font-size:28px; font-weight:500; margin-bottom:10px}
.gnb > li > a {color:#1b1b1b}
.gnb > li > a:hover {color:#ffffff}
.sideBottom {color:#fff; font-size:12px; font-weight:300; position:absolute; bottom:50px; line-height:20px;margin-right:10%}
#mask {position:absolute; z-index:1; background:rgba(0,0,0,0.8) 0 0; display:none; left:0; top:0; width:100%; height:100%; overflow:hidden}
.close {display:none; position:absolute; top:50px; right:-30px; width:18px; height:18px;background-image:url('../images/btn_close.png'); background-position: 0 0;background-size: 18px 18px;text-indent:-9999px; opacity:1}

/* wrapRight */
#wrapRight {width:100%; padding-left:20%; box-sizing:border-box}
a.btn_side {display:none; font-size:24px; top:20px; left:20px; position:absolute; color:#000}
a.btn_intro{position:fixed;right:3%; top:50px; font-size:14px; }
#container {padding:90px 105px; box-sizing:border-box; overflow:hidden}
#container .conLeft {float:left; width:50%; padding:0 7%; box-sizing:border-box}
#container .conLeft section .blogt{display:none}
#container .conRight {float:left; width:50%; padding:0 7%; box-sizing:border-box}
#container .conRight h2 {display:none}
.conLeft > .h2Top {font-size:18px; font-weight:400; color:#1b1b1b}
.conLeft > h2 {font-size:50px; font-weight:600; color:#1b1b1b; line-height:140%; margin-top:5px;letter-spacing:-0.04em}
#container.main section {position:relative}
#container.main .mc {display:none}
#container.main section .more {position:absolute; top:0; left:0; width:100%; height:100%}
#container.main section h3 {font-family:'Rajdhani', sans-serif; font-size:24px; font-weight:600; color:#1b1b1b; border-top:2px solid #000; padding:8px 0 15px 0;display:block}
#container.main section .imgScale {overflow:hidden;display:block}
#container.main section .imgScale > img {/*transition: all 0.3s ease-in-out*/margin-bottom:20px}
#container.main section .imgScale > img:hover {/*transform:scale(1.1,1.1)*/}
#container.main section .conTitle {font-size:20px; font-weight:500; padding:15px 0;display:block;color:#000;letter-spacing:-0.03em;line-height:160%}
#container.main section .conTxt {font-size:15px; font-weight:300;  color:#535353;display:block;line-height:180%;text-align: justify; }
.notice > li a {color:#707070; font-size:17px; font-weight:400; line-height:30px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;background:url('../images/bullet01.gif') no-repeat 0 11px;padding-left:10px}
.notice > li a:hover {color:#67c0f3}
.banner {/*background:url('../images/bannerBg.jpg') #cdedfe top left no-repeat; padding:50% 40px 50px 40px;*/background:#cdedfe; margin-bottom:2%}
.banner .polltxt{padding:0 10% 5% 10%;font-size:15px; color:#313131;line-height:160%}
.banner div {color:#313131; padding:0 9% 5% 9%;font-size:15px;}
.banner input {font-size:17px; color:#313131; margin-bottom:10px;}
.banner .bannerBtn {background:#000; color:#ababab; font-size:16px; font-weight:400; padding:10px 50px; border-radius:30px; box-sizing:border-box; text-align:center; display:inline-block; margin:0 10% 10% 10%}
.banner .bannerBtn:hover {background:#363636; color:#fff}
.banner_m{display:none;background:#cdedfe;}
.banner_m .polltxt{padding:0 10% 10% 10%;font-size:17px; color:#313131;line-height:180%}
.banner_m div {color:#313131; padding:0 10% 10% 10%;font-size:15px;}
.banner_m input {font-size:15px; color:#626262; margin-bottom:10px}
.banner_m .bannerBtn {background:#000; color:#ababab; font-size:18px; font-weight:400; padding:10px 50px; border-radius:30px; box-sizing:border-box; text-align:center; display:inline-block; margin:0 10% 10% 10%}
.banner_m .bannerBtn:hover {background:#363636; color:#fff}

.event{display:block}
.event_m{display:none;}
.news{display:block}
.news_m{display:none;}
#container .conRight .facebook1{border:none;overflow:scroll;width:470px;height:688px}
#container .conRight .facebook2{border:none;overflow:scroll;width:327px;height:638px}
#container .conRight .facebook3{border:none;overflow:scroll;width:360px;height:558px}
#container .conRight .facebook4{border:none;overflow:scroll;width:330px;height:507px}


.polltext1{ color:#4a5d99; font-size:12px;padding-left:8%;padding-bottom:5%;margin-top:-5%}
.polltable{border:0;}
.polltable .poll1{width:9%;}
.polltable .poll2{width:91%;}

/* footer */
footer {background:#d7d7d7; padding:50px 0}
footer section {padding:0 5%; margin:0 auto; overflow:hidden}
footer section > h2 {float:left}
footer section .utilWrap {float:left; margin-left:12%}
footer section .utilWrap .util a {color:#989898; font-weight:400; font-size:13px}
footer section .utilWrap .util a:hover {color:#595959}
footer section .utilWrap .util span {padding:0 10px; vertical-align:bottom; font-family: '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif; color:#989898}
footer section .utilWrap .copy {color:#989898; font-weight:300; font-size:12px}
footer section .fSns {float:right; text-align:right}
footer section .fSns > a {display:inline-block;font-size:11px;line-height:140%}
footer section .fSns > a:hover {opacity:0.8}
footer section .fSns > p {}
footer section .fSns > p > a {color:#979898; font-size:13px; display:inline-block; margin-left:10px}
footer section .fSns > p > a:hover {color:#44433e}
.brMobile2 {display:block}

@media screen and (max-width:1900px) {
	a.btn_intro{position:fixed;right:0.8%; top:50px; font-size:14px; }
	.top {bottom:17%; right:1%;}
    .sideBottom {left:0; max-width:350px; padding:0 30px; box-sizing:border-box}
	.brMobile {display:none}
	#wrapLeft {width:25%}
	#side {padding:50px 30px; background-size:contain}	
	#wrapRight {padding-left:24%}
	#container {padding:90px 0px}
    footer section > h2 {padding-top:2%;margin-right:10%}	
	footer section .utilWrap {float:left; margin-left:0; margin-top:20px}
	footer section .fSns {float:right; text-align:right; margin-top:20px}
	.banner div{font-size:15px;}
	.banner .polltxt{font-size:15px;}
		
}

@media screen and (max-width:1740px) {
    .sideBottom {left:0; max-width:350px; padding:0 30px; box-sizing:border-box}
	.brMobile {display:none}
	.conLeft > h2 {font-size:50px;}
	a.btn_intro{position:fixed;right:0.8%; top:50px; font-size:14px; }
	.top {bottom:17%; right:1%;}
	#wrapLeft {width:25%}
	#side {padding:50px 30px; background-size:contain}	
	#wrapRight {padding-left:24%}
	#container {padding:90px 0px}
	footer section > h2 {padding-top:2%;margin-right:10%}	
	footer section .utilWrap {float:left; margin-left:0; margin-top:20px}
	footer section .fSns {float:right; text-align:right; margin-top:20px}
	.banner div{font-size:15px;}
	.banner .polltxt{font-size:15px;}
	
}


@media screen and (max-width:1680px) {
    .sideBottom {left:0; max-width:350px; padding:0 30px; box-sizing:border-box}
	.brMobile {display:none}	
	.conLeft > h2 {font-size:50px;}
	a.btn_intro{position:fixed;right:0.8%; top:50px; font-size:14px; }
	.top {bottom:17%; right:1%;}
	#wrapLeft {width:25%}
	#side {padding:50px 30px; background-size:contain}	
	#wrapRight {padding-left:24%}
	#container {padding:90px 0px}
	footer section > h2 {padding-top:2%;margin-right:10%}	
	footer section .utilWrap {float:left; margin-left:0; margin-top:20px}
	footer section .fSns {float:right; text-align:right; margin-top:20px}
	
}

@media screen and (max-width:1445px) {
	.conLeft > h2 {font-size:44px;}
    .sideBottom {left:0; max-width:350px; padding:0 30px; box-sizing:border-box}
	.brMobile {display:none}
	a.btn_intro{position:fixed;right:0.8%; top:50px; font-size:14px; }
	.top {bottom:17%; right:1%;}
	#wrapLeft {width:25%}
	#side {padding:50px 30px; background-size:contain}	
	#wrapRight {padding-left:24%}
	#container {padding:90px 0px}
	footer section > h2 {padding-top:2.5%;margin-right:10%}	
	footer section .utilWrap {float:left; margin-left:0; margin-top:20px}
	footer section .fSns {float:right; text-align:right; margin-top:20px}	
	.banner div{font-size:14px;}
	.banner .polltxt{font-size:15px;}
	#container.main section .conTitle{font-size:16px;}
	#container.main section .conTxt{font-size:14px;}
	.notice > li a{font-size:14px;}
	
}

@media screen and (max-width:1366px) {
	footer section > h2 {padding-left:2.5%;float:left;width:70%}
	footer section .utilWrap {padding-left:2.5%;width:60%}
	footer section .fSns {width:30%;}
    .conLeft > h2 {font-size:40px;}
    a.btn_intro{position:fixed;right:0.8%; top:50px; font-size:14px; }
	.top {bottom:17%; right:1%;}	
	.banner .polltxt{font-size:14px;padding:0 6% 5% 6%;}
	.banner input{font-size:13px;}
	.banner div{font-size:13px;padding:0 6% 5% 6%;}
	.banner .bannerBtn {margin:0 6% 10% 6%;}
	.brMobile {display:none}
	.banner .bannerBtn{ font-size:16px;padding:10px 50px;}
	.gnb > li {font-size:28px;}
	.banner div{font-size:13px;}
	.banner .polltxt{font-size:15px;}
	#container.main section .conTitle{font-size:16px;}
	#container.main section .conTxt{font-size:14px;}
	.notice > li a{font-size:14px;}
	
}

@media screen and (max-width:1280px) {
	footer section > h2 {padding-left:2%;float:left;width:70%}
	footer section .utilWrap {padding-left:2%;width:60%}
	footer section .fSns {width:30%;}
	footer section .utilWrap .util a {font-size:12px}
	footer section .utilWrap .copy {font-size:11px}
	footer section .fSns > a {font-size:12px}
	footer section .fSns > p > a { font-size:12px;}


   	a.btn_intro{position:fixed;right:0.8%; top:50px; font-size:14px; }
	.top {bottom:17%; right:1%;}
	.conLeft > h2 {font-size:38px;}
	.banner div{font-size:12px;}
	.banner .polltxt{font-size:14px;}
	#container.main section .conTitle{font-size:15px;}
	#container.main section .conTxt{font-size:13px;}
	.notice > li a{font-size:13px;}
	
}


@media screen and (max-width:1024px) {
    a.btn_intro{position:fixed;right:0.8%; top:50px; font-size:14px; }
	.top {bottom:17%; right:1%;}
	.conLeft > h2 {font-size:30px;}
	#side {padding:50px 20px}
	.sideBottom {left:0; max-width:250px; padding:0 20px}
	.facebook {width:100% !important}
	.brMobile {display:none}
	.brMobile2 {display:none}
	.notice > li a{font-size:14px;line-height:190%}
	.banner div{font-size:14px;}
	.banner .polltxt{font-size:14px;}
	#container.main section .conTitle{font-size:15px;}
	#container.main section .conTxt{font-size:13px;}
	footer section > h2 {padding-left:2%;float:left;width:70%}
	footer section .utilWrap {padding-left:2%;width:60%}
	footer section .fSns {width:30%;}
	footer section .utilWrap .util a {font-size:11px}
	footer section .utilWrap .copy {font-size:11px}
	footer section .fSns > a {font-size:11px}
	footer section .fSns > p > a { font-size:11px;}
	
}

@media screen and (max-width:960px) {
    a.btn_side {top:2.3%}
    a.btn_intro{position:fixed;right:2%; top:3%; font-size:14px;}
	.top {bottom:17%; right:2%;}
	.conLeft > h2 {font-size:41px}
	#wrapLeft {display:none; width:250px; left:-250px}
	#side {padding:50px 30px}
	.gnb {margin-top:40px}
	.gnb > li {font-size:28px; margin-bottom:15px}
	.sideBottom {left:0; max-width:250px; padding:0 30px}
	#wrapRight {padding:0}
	a.btn_side {display:block}
	.intro_m{display:none;}
	.brMobile {display:none}
	a.btn_intro{position:absolute; }
	#container .conLeft {padding:0 3% 0 7%}
	#container .conRight {padding:0 7% 0 3%}
	.banner input {font-size:11px}
	.banner div{font-size:12px;}
	.banner .polltxt{font-size:13px;}
	#container.main section .conTitle{font-size:16px;}
	#container.main section .conTxt{font-size:14px;}
	footer section > h2 {padding-left:2%;float:left;width:70%}
	footer section .utilWrap {padding-left:2%;width:60%}
	footer section .fSns {width:30%;}
	footer section .utilWrap .util a {font-size:11px}
	footer section .utilWrap .copy {font-size:11px}
	footer section .fSns > a {font-size:11px}
	footer section .fSns > p > a { font-size:11px;}
}

@media screen and (max-width:768px) {   
    a.btn_side {top:2.3%}
    a.btn_intro{position:fixed;right:2%; top:3%; font-size:14px;}
	.top {bottom:2%; right:1%;}
	.conLeft > h2 {font-size:33px;line-height:140%}
	#wrapLeft {display:none; width:250px; left:-250px}
	#side {padding:50px 30px}
	.brMobile {display:none}
	.brMobile2 {display:none}
	.gnb {margin-top:40px}
	.gnb > li {font-size:28px; margin-bottom:15px}
	.sideBottom {left:0; max-width:250px; padding:0 30px}
	.banner_m div {color:#626262; padding:0 10% 10% 10%;font-size:14px;}
	.banner_m .polltxt{padding:0 10% 10% 10%;font-size:14px; color:#313131;line-height:180%}
	.banner_m input {font-size:13px; color:#626262; margin-bottom:10px}
	#wrapRight {padding-left:0}
	a.btn_side {display:block}
	#container .conLeft {padding:0 4% 0 7%}
	#container .conRight {padding:0 7% 0 4%}
	
	footer section > h2 {padding-left:2%;float:left;width:70%}
	footer section .utilWrap {padding-left:2%;width:60%}
	footer section .fSns {width:30%;}
	footer section .utilWrap .util a {font-size:11px}
	footer section .utilWrap .copy {font-size:11px}
	footer section .fSns > a {font-size:11px}
	footer section .fSns > p > a { font-size:11px;}



  
}

@media screen and (max-width:520px) {
    a.btn_side {top:2.3%}
    a.btn_intro{position:fixed;right:2%; top:3%; font-size:14px;}
	.top {bottom:5%; right:2%;}
    #container .conLeft, #container .conRight {float:none; width:100%;padding:0 10% 0 10%}
	.conLeft > h2 {font-size:45px; line-height:60px}
	#container.main .mt110, #container.main .mt130 {margin-top:50px !important}
	.banner_m div {color:#626262; padding:0 10% 10% 10%;font-size:14px;}
	.banner_m .polltxt{padding:0 10% 10% 10%;font-size:14px; color:#313131;line-height:180%}
	.banner_m input {font-size:13px; color:#626262; margin-bottom:10px}
	.banner_m{display:block}
	.banner{display:none}
	.event{display:none}
	.event_m{display:block;}	
	.news{display:none}
	.news_m{display:block;}	
	.brMobile {display:none}
	.brMobile2 {display:none}
	.m_view{display:block}
	.banner_m .bannerBtn {font-size:16px;padding:10px 50px; border-radius:25px; box-sizing:border-box;margin-bottom:15%}
	.sideBottom {bottom:4%}
	.gnb > li {font-size:22px; margin-bottom:5px}
	.vol { font-size:12px;}
	footer section > h2 {padding-left:2%;float:left;width:100%}
	footer section .utilWrap {padding-left:2%;width:100%}
	footer section .fSns {padding-left:2%;width:100%;float:left;text-align:left}
	footer section .utilWrap .util a {font-size:11px}
	footer section .utilWrap .copy {font-size:11px}
	footer section .fSns > a {font-size:11px}
	footer section .fSns > p > a { font-size:11px;margin-left:0px}

   
}

@media screen and (max-width:480px) {
    a.btn_side {top:2.3%}
    a.btn_intro{position:fixed;right:2%; top:3.2%; font-size:14px;}
	.top {bottom:5%; right:2%;}
	#container .conLeft, #container .conRight {float:none; width:100%;padding:0 7% 0 7%}
	.conLeft > h2 {font-size:45px; line-height:140%}
	#container.main .mt110, #container.main .mt130 {margin-top:50px !important}
	.notice > li a{font-size:14px;line-height:190%}
	.banner_m div {color:#626262; padding:0 10% 10% 10%;font-size:13px;}
	.banner_m .polltxt{font-size:13px;}
	.banner_m input{font-size:12px;}
	.banner_m .bannerBtn {font-size:16px; padding:7px 30px; border-radius:25px; box-sizing:border-box;}
	.brMobile {display:none}
	.brMobile2 {display:none}
	.m_view{display:block}
	#container.main section .conTitle {font-size:16px}
	#container.main section .conTxt{font-size:14px}
	.banner_m div{font-size:12px}
	.banner_m .bannerBtn {font-size:16px;padding:10px 50px; border-radius:25px; box-sizing:border-box;margin-bottom:15%}
	.sideBottom {bottom:4%}
	.gnb > li {font-size:22px; margin-bottom:5px}
	.vol { font-size:12px;}
	footer section > h2 {padding-left:2%;float:left;width:100%}
	footer section .utilWrap {padding-left:2%;width:100%}
	footer section .fSns {padding-left:2%;width:100%;float:left;text-align:left}
	footer section .utilWrap .util a {font-size:11px}
	footer section .utilWrap .copy {font-size:11px}
	footer section .fSns > a {font-size:11px}
	footer section .fSns > p > a { font-size:11px;margin-left:0px}
			
}


@media screen and (max-width:425px) {
    a.btn_side {top:2.3%}
    a.btn_intro{position:fixed;right:2%; top:3.2%; font-size:14px;}
	.top {bottom:5%; right:2%;}
	#container .conLeft, #container .conRight {float:none; width:100%;padding:0 7% 0 7%}
	.conLeft > h2 {font-size:36px; line-height:150%}
	#container.main .mt110, #container.main .mt130 {margin-top:50px !important}
	.notice > li a{font-size:14px;line-height:190%}
	.banner_m div {color:#626262; padding:0 10% 10% 10%;font-size:13px;}
	.banner_m .polltxt{font-size:13px;}
	.banner_m input{font-size:12px;}
	.banner_m .bannerBtn {font-size:16px; padding:7px 30px; border-radius:25px; box-sizing:border-box;}
	.brMobile {display:none}
	.brMobile2 {display:none}
	.m_view{display:block}
	#container.main section .conTitle {font-size:16px}
	#container.main section .conTxt{font-size:14px}
	.banner_m div{font-size:12px}
	.banner_m .bannerBtn {font-size:16px;padding:10px 50px; border-radius:25px; box-sizing:border-box;margin-bottom:15%}
	.sideBottom {bottom:4%}
	.gnb > li {font-size:22px; margin-bottom:5px}
	.vol { font-size:12px;}
	footer section > h2 {padding-left:2%;float:left;width:100%}
	footer section .utilWrap {padding-left:2%;width:100%}
	footer section .fSns {padding-left:2%;width:100%;float:left;text-align:left}
	footer section .utilWrap .util a {font-size:11px}
	footer section .utilWrap .copy {font-size:11px}
	footer section .fSns > a {font-size:11px}
	footer section .fSns > p > a { font-size:11px;margin-left:0px}
			
}

@media screen and (max-width:380px) {
    a.btn_side {top:2.3%}
    a.btn_intro{position:fixed;right:2%; top:3.5%; font-size:14px; }
	.top {bottom:5%; right:2%;}
	.gnb > li {font-size:22px; margin-bottom:5px}
	#container .conLeft, #container .conRight {float:none; width:100%;padding:0 7% 0 7%}
	.conLeft > h2{font-size:34px; line-height:150%}
	#container.main .mt110, #container.main .mt130 {margin-top:50px !important}
	#container.main section .conTitle {font-size:16px;}
	#container.main section .conTxt {font-size:12px;}	
	.notice > li a{font-size:12px;line-height:190%}
	.banner_m .polltxt{font-size:13px;}
	.banner_m input{font-size:12px;}
	.banner_m div{font-size:11px;}
	.banner_m .bannerBtn {font-size:16px;padding:10px 50px; border-radius:25px; box-sizing:border-box;margin-bottom:15%}
	.brMobile {display:none}
	.brMobile2 {display:none}
	.m_view{display:block}
	.sideBottom {bottom:4%}
	.vol { font-size:12px;}
	footer section > h2 {padding-left:2%;float:left;width:100%}
	footer section .utilWrap {padding-left:2%;width:100%}
	footer section .fSns {padding-left:2%;width:100%;float:left;text-align:left}
	footer section .utilWrap .util a {font-size:10px}
	footer section .utilWrap .copy {font-size:10px}
	footer section .fSns > a {font-size:10px}
	footer section .fSns > p > a { font-size:10px;margin-left:0px}
}
   

@media (min-width: 1200px) {
	.hidden-lg {display:none !important}
}

@media (max-width: 991px) and (min-width: 768px) {
	.hidden-sm {display:none !important}
}
@media (max-width: 767px) {
	.hidden-xs {display:none !important}
}