@charset "utf-8";
@import url('reset.css');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,500,600,700');

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

/* 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}
.mt40 {margin-top:40px}
.mt50 {margin-top:50px}
.mt1 {margin-top:1.3%}
.mt2 {margin-top:2%}
.mt4 {margin-top:4%}
.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}


.top {display:block; position:fixed;	bottom:7%; right:1%; 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;}	

/* wrapLeft */
#wrapLeft {width:20%; height:100%; /*background:url('../images/sideBg.jpg') #eea1c2 repeat-x;*/background:linear-gradient(#d19ae6, #c6c9e5, #b1eff0, #e2e4e4); position:fixed; box-sizing:border-box; z-index:9999}
#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:18px; 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:#ffffff; font-size:12px; font-weight:500; 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:3%; 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 .conRight {float:left; width:50%; padding:0 7%; box-sizing:border-box}
.conLeft > .h2Top {font-size:18px; font-weight:400; color:#1b1b1b}
.conLeft > h2 {font-size:60px; font-weight:600; color:#1b1b1b; line-height:130%; margin-top:5px;letter-spacing:-0.03em}
#container.main section {position:relative}
#container.main section .more {position:absolute; top:0; left:0; width:100%; height:100%}
#container.main section span.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:600; padding:15px 0;display:block;color:#000;letter-spacing:-0.01em;line-height:150%}
#container.main section .conTxt {font-size:16px; font-weight:500;  color:#535353;display:block;line-height:150%;text-align: justify; }
.notice > li {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 10px ;padding-left:7px}
.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-image:url('../images/bullet01.gif') 0 0;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:16px; color:#313131;line-height:160%}
.banner div {color:#313131; padding:0 9% 5% 9%;font-size:15px;}
.banner input {font-size:15px; 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;}
/* footer
footer {background:#8e8e8e; padding:35px 0}
footer .util {text-align:center; color:#fff}
footer .util a {color:#fff; font-weight:400; font-size:14px}
footer .util a:hover {color:#840039}
footer .util span {padding:0 20px; vertical-align:baseline; font-family:'돋움', 'Dotum', 'AppleGothic', sans-serif}
footer .fLogo {margin:10px auto 10px auto}
footer .copy {font-size:12px; color:#fff; text-align:center; font-weight:300}
 */

/* footer */
footer {background:#d7d7d7; padding:50px 0}
footer section {padding:0 5%; margin:0 auto; overflow:hidden}
footer section .fLogo {float:left}
footer section .fLogo {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}
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}



@media screen and (max-width:1900px) {
	a.btn_intro{position:fixed;right:0.8%; top:3%; 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 .fLogo {float:none}
	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}
	a.btn_intro{position:fixed;right:0.8%; top:3%; 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 .fLogo {float:none}
	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}
	a.btn_intro{position:fixed;right:0.8%; top:3%; 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 .fLogo {float:none}
	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:45px;}
    .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:3%; 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 .fLogo {float:none}
	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:1320px) {
    a.btn_intro{position:fixed;right:0.8%; top:3%; font-size:14px; }
	.top {bottom:17%; right:1%;}
	.conLeft > h2 {font-size:45px;}
	.notice > li {color:#707070; font-size:16px; font-weight:400; line-height:30px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;background:url('../images/bullet01.gif') no-repeat 0 10px ;padding-left:7px}
	.notice > li a {color:#707070; font-size:16px; font-weight:400; line-height:30px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;background-image:url('../images/bullet01.gif') 0 0;padding-left:10px}
	.notice > li a:hover {color:#67c0f3}
	.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;}
	.conLeft > h2{font-size:43px;}
	.gnb > li {font-size:28px;}
	.conLeft > h2 {font-size:40px;}
	.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) {
   	a.btn_intro{position:fixed;right:0.8%; top:3%; font-size:14px; }
	.top {bottom:17%; right:1%;}
	.conLeft > h2 {font-size:40px;}
	.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:3%; font-size:14px; }
	.top {bottom:17%; right:1%;}
	.conLeft > h2 {font-size:36px;}
	#side {padding:50px 20px}
	.sideBottom {left:0; max-width:250px; padding:0 20px}
	.facebook {width:100% !important}
	.brMobile {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;}
	
}

@media screen and (max-width:960px) {
    a.btn_intro{position:fixed;right:1%; top:3%; font-size:14px; }
	.top {bottom:17%; right:1%;}
	.conLeft > h2 {font-size:36px}
	#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;}
	
}

@media screen and (max-width:768px) {
    a.btn_intro{position:fixed;right:1%; top:3%; font-size:14px; }
	.top {bottom:2%; right:1%;}
	.conLeft > h2 {font-size:30px}
	#wrapLeft {display:none; width:250px; left:-250px}
	#side {padding:50px 30px}
	.brMobile {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 {padding:50px 20px}
	footer section .fLogo {float:none}
	footer section .utilWrap {float:none; margin-left:0; margin-top:20px}
	footer section .utilWrap .util a{font-size:12px}
	footer section .fSns {float:none; text-align:left; margin-top:20px}
	footer section .fSns > p > a {margin-left:0}

  
}

@media screen and (max-width:570px) {
    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:40px; 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}
	.banner_m .bannerBtn {font-size:16px;padding:10px 50px; border-radius:25px; box-sizing:border-box;margin-bottom:15%}
	
   
}


@media screen and (max-width:425px) {
    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 7% 0 7%}
	.conLeft > h2 {font-size:38px; line-height:130%}
	#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}
	#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%}
			
}

@media screen and (max-width:360px) {
    a.btn_intro{position:fixed;right:2%; top:3%; font-size:14px; }
	.top {bottom:5%; right:2%;}
	.gnb > li {font-size:24px; margin-bottom:10px}
	#container .conLeft, #container .conRight {float:none; width:100%;padding:0 7% 0 7%}
	.conLeft > h2{font-size:40px; line-height:60px}
	#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;}
	.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}
}
   

@media (min-width: 1200px) {
	.hidden-lg {display:none !important}
}
@media (max-width: 1199px) and (min-width: 992px) {
	.hidden-md {display:none !important}
	footer section .fLogo {float:none}
	footer section .utilWrap {float:left; margin-left:0; margin-top:20px}
	footer section .fSns {float:right; text-align:right; margin-top:20px}
}
@media (max-width: 991px) and (min-width: 768px) {
	.hidden-sm {display:none !important}
}
@media (max-width: 767px) {
	.hidden-xs {display:none !important}
}