@charset "utf-8";
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('http://fonts.googleapis.com/earlyaccess/notosanssc.css');
@import url('https://fonts.googleapis.com/css?family=Rajdhani');
@import url('http://fonts.googleapis.com/earlyaccess/nanumpenscript.css');
@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);

/*250 300 350 400 500 700 900 */
/*300 400 500 600 700 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent}
body {font-size:14px; font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif; color:#363636;text-align:justify}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
caption, legend {visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content:none}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none}
ins {background-color:#ff9; color: #000; text-decoration:none}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold}
del {text-decoration:line-through}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help}
table {border-collapse:collapse; border-spacing:0}
hr {display:block; height:1px; border:0; border-top: 1px solid #cccccc; margin:1em 0; padding:0}
input, select {vertical-align:middle}
a:hover,a:active,a:focus {text-decoration:none}


/* skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:9999; width:100%; height:1px; margin-top:-1px; display:block; 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 */
#wrap {}
.auto {margin:0 auto}
.width100 {width:100% !important}
.overflow {overflow:hidden}
.float-left {float:left}
.float-right {float:right}
.font16 {font-size:16px !important; line-height:26px !important}
.mt10 {margin-top:10px !important}
.mt20 {margin-top:20px !important}
.mt30 {margin-top:30px !important}
.mt40 {margin-top:40px !important}
.mt50 {margin-top:50px !important}
.mt60 {margin-top:60px !important}
.mt70 {margin-top:70px !important}
.mt80 {margin-top:80px !important}
.mt90 {margin-top:90px !important}
.mt100 {margin-top:100px !important}
.mt110 {margin-top:110px !important}
.mt120 {margin-top:120px !important}
.mt180 {margin-top:180px !important}
.mt200 {margin-top:200px !important}
.mt250 {margin-top:250px !important}



.listStyle {overflow:hidden}
.listStyle > li {float:left}
.listStyle.list02 li {width:50%}
.listStyle.list03 li {width:33.33%}
.bList {margin:20px 0 65px 0}
.bList > li {background:url('../images/listBar.gif') 13px 9px no-repeat; padding-left:30px; font-size:14px; line-height:20px; margin-bottom:25px; color:#7d7d7d; font-weight:300;text-align:left}
.tabStyle {overflow:hidden;}
.tabStyle li {padding:15px 20px; background:#000; color:#d2d2d2; display:inline-block}

.eventStyle {overflow:hidden}
.eventStyle > li {float:left}
.eventStyle.list02 li {width:50%}


/* header */
header {width:100%; position:relative}
header section {max-width:1760px; width:91.6%;box-sizing:border-box; padding-top:80px; margin:0 auto}
header section .logo {margin:0 auto}
header section .vol {margin-top:20px; text-align:center; color:#7d7d7d; font-family:'Rajdhani', sans-serif; font-weight:400; font-size:18px}
header section nav {margin-top:80px; background:url('../images/gnbBg.png') center repeat-x; position:relative}
header section nav .gnb {overflow:hidden; text-align:center; background:#fff; max-width:950px; margin:0 auto;}
header section nav .gnb li {display:inline; text-align:center; padding:0 25px}
header section nav .gnb li a {color:#696969; font-family:'Rajdhani', sans-serif; font-weight:600; font-size:18px; padding:0 7px;}
header section nav .gnb li a.active, header section nav .gnb li a:hover {text-decoration:none;padding:0 7px; background:url('../images/h3_bg.jpg') center repeat-x;}
header section nav .util {position:absolute; top:-15px; right:0; font-family:'verdana', 'Noto Sans KR', sans-serif;, '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif;}
header section nav .util a {font-size:14px; font-weight:400; color:#a1a1a1;padding:0 7px; }
header section nav .util a:hover {text-decoration:none;font-weight:400; color:#000;padding:0 7px; background:url('../images/h3_bg.jpg') center repeat-x;}
header section nav .util a:nth-child(1) {margin-right:15px}

/* mainVisual */
#mainVisual {width:100%; position:relative; padding:0px 0 80px 0}
#mainVisual section {width:86.4%;max-width:1660px; box-sizing:border-box; margin:0 auto}
#mainVisual section.mainTxt a{text-decoration:none}
#mainVisual section.mainTxt h2 {font-size:30px; font-family:'Rajdhani', sans-serif; font-weight:400; text-align:center; margin-top:70px;color:#fff}
#mainVisual section.mainTxt h2 a{text-decoration:none;color:#fff}
#mainVisual section.mainTxt h2 span {height:10px; background:#000;padding:0 7px }
#mainVisual section.mainTxt h3 {font-size:30px; font-weight:500; text-align:center; margin:50px 0 30px 0}
#mainVisual section.mainTxt h4 {font-size:18px; font-weight:300; text-align:center; line-height:160%}
#mainVisual section.mainTxt h4 span {display:block}
#mainVisual section.mainTxt h3 a{text-decoration:none;color:#363636}
#mainVisual section.mainTxt h4 a{text-decoration:none;color:#7d7d7d}

/* container */
#container {width:100%; position:relative; padding:0px 0 70px 0}
#container section {width:86.4%;max-width:1660px; box-sizing:border-box; margin:0 auto; overflow:hidden}
#container section > a.con01 {/*max-width:1015px*/width:60%; margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con02 {/*max-width:642px*/width:38%;margin-right:3px;overflow:hidden; float:left; position:relative;background:#252525;}
#container section > a.con03 {/*max-width:642px*/width:38%;overflow:hidden; float:left; position:relative}
#container section > a.con04 {/*max-width:1015px*/width:60%;overflow:hidden; float:left; position:relative;margin-right:3px;}
#container section > a .conTxt {position:absolute; width:100%;  z-index:999;}
#container section > a .conTxt td {vertical-align:middle; padding:0 10px}
#container section > a h2, #container section > div h3, #container section > div h4 {text-align:center}
#container section > a h2 {font-family:'Rajdhani', sans-serif; font-size:22px; color:#252525; font-weight:600}
#container section > a h2 span {background:#fff; opacity:0.57}
#container section > a h3 {font-size:26px; line-height:32px; margin:30px 0 20px 0; color:#fff}
#container section > a h4 {font-size:18px; color:#fff; opacity:0}
.gallery-item {display:block; z-index:110;}

#container section .event {max-width:1660px; box-sizing:border-box; margin:0 auto; overflow:hidden}


/*
.gallery-item {display:block; z-index:110;}
.gallery-item img {position:relative; max-width:100%; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); -webkit-transition:0.9s; -o-transition:0.9s; transition:0.9s}
.gallery-item .overlay {position:absolute; right:0; left:0; bottom:0; top:0; z-index:11; vertical-align:middle;	-webkit-transition:0.5s; -o-transition:0.5s; transition:0.5s; text-align:center;}
.gallery-item .overlay:hover:before {content:''; position:absolute; z-index:1; top:0; left:0; bottom:0; right:0; background:rgba(0, 0, 0, 0.5)}
.gallery-item .overlay:hover h4 {transition-preperty:opacity;transition-duration:0.8s;transition-timing-function:ease;opacity:1 !important}
.gallery-item:hover img {-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1)}
.gallery-item:hover .overlay {visibility:visible; opacity:1}
.fh5co-gallery .gallery-item:hover .overlay:before {content:''; position:absolute; z-index:1; top:0; left:0; bottom:0; right:0; background: rgba(0, 0, 0, 0.5)}
*/

/*메인오버효과*/
col-0-gutter con01{
	padding-left: 0;
	padding-right: 0;
}

.ot-portfolio-item figure figcaption > a {
    z-index: 1000;

    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}
.ot-portfolio-item figure figcaption, .ot-portfolio-item figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.effect-bubba {
	background: #000;
 }

figure.effect-bubba img {
	opacity: 0.8 ;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
	opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
	position: absolute;

	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

figure.effect-bubba figcaption::after {

	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

figure.effect-bubba h2 {
font-family:'Rajdhani', sans-serif; 
font-size:22px; 
color:#252525; 
font-weight:600;padding-top:25%;
	 text-align:center;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}
figure.effect-bubba h2 span{background:#fff; opacity:0.57}

figure.effect-bubba h3 {
font-size:30px; 
color:#fff;
font-weight:400;
	 text-align:center;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}



figure.effect-bubba p {
    color: #fff;
    font-size: 18px;
    font-weight: 300;
	 text-align:center;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
figure.effect-bubba:hover h3,
figure.effect-bubba:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}




/* snsWrap */
#snsWrap {width:100%; position:relative; padding:0px 0 60px 0}
#snsWrap section {width:86.4%;max-width:1660px; box-sizing:border-box; margin:0 auto; overflow:hidden; text-align:center; font-size:16px; font-weight:400}
.sns4{display:none;}

/* footer */
footer {width:100%; position:relative; padding:0 0 50px 0;overflow:hidden;}
footer section {max-width:1760px; width:91.6%; margin:0 auto; border-top:1px solid #c2c2c2; padding:40px 0}
footer section .fLogo {float:left; margin-top:2px; margin-right:37px}
footer section address {float:left; font-size:14px; font-weight:300; color:#707070}
footer section address p {color:#9c9b9b}
footer section address p span {font-weight:300; padding-left:10px}
footer section .fMenu {overflow:hidden; margin-top:12px; margin-left:350px; float:left}
footer section .fMenu li {float:left; margin-right:15px; padding-right:15px; border-right:1px solid #a1a1a1; height:15px; line-height:13px}
footer section .fMenu li:last-child {border-right:none}
footer section .fMenu li a {color:#a1a1a1}
footer section .fIcon {overflow:hidden; float:right; margin-top:10px}
footer section .fIcon li {float:left; margin-left:25px}
footer section .fIcon li:first-child {margin-left:0px}

.top {display:block; position:fixed;	bottom:100px; right:50px; z-index:200; width:50px; height:50px; border-radius:25px;/* background:url('../images/arr_top.png') #898989 60% 60% no-repeat;*/background:#898989; color:#fff;font-weight:400; font-size:16px;font-family:'Rajdhani', sans-serif; 
text-align:center;padding-top:14px}

/*.top span{visibility:hiddencolor:#fff;font-size:16px;font-family:'Rajdhani', sans-serif;}*/ 

/* subVisual */
#subVisual {width:100%; position:relative; padding:0px}
#subVisual section {width:86.4%;max-width:1660px; box-sizing:border-box; margin:0 auto; position:relative}
#subVisual section .subTab {position:absolute; top:40%; width:100%; text-align:center;}
#subVisual section .subTab a {font-family:'Rajdhani', sans-serif; font-size:26px; color:#fff; padding:10px 50px; border:1px solid #fff; font-weight:500;text-decoration:none;transition:all 0.5s ease}
#subVisual section .subTab a.on {background:#fff; color:#000;text-decoration:none}
#subVisual section .subTab a:hover {background:#fff; color:#000;text-decoration:none}

/* content */
#content {width:100%; position:relative; padding:0px}
#content section {width:82%;max-width:1580px; padding:40px 90px 90px 90px; box-sizing:border-box; margin:0 auto; background:#fff; margin-top:-65px}
#content section .subTopWrap {overflow:hidden}
#content section .subTopWrap .subTop {font-family:'Rajdhani', sans-serif; font-size:22px; font-weight:300; color:#636363;float:left}
#content section .subTopWrap .subTop .subTitle {font-family:'Noto Sans KR', sans-serif; font-size:16px; font-weight:250; color:#363636;}
#content section .subTopWrap .subSns {float:right; font-size:14px; margin-top:3px}
#content section .subTopWrap .subSns img {max-width:22px; vertical-align:bottom}
#content section .balmoon{font-size:18px;font-family:'verdana','Jeju Myeongjo', '맑은 고딕','Malgun Gothic','Dotum','AppleGothic',sans-serif;color:#7d7d7d;text-align:center;font-weight:normal}
#content section .balmoon span{display:block}

.vimeoWrap{
     position: relative;
    padding-bottom: 54.00%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    margin: 0;
  }
.vimeoWrap iframe,
.vimeoWrap object,
.vimeoWrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


#content h2 {font-size:48px; line-height:58px;font-weight:400}
#content h3 {font-size:24px; line-height:34px;font-weight:400}
#content h3 span {padding:0 5px; background:url('../images/h3_bg.jpg') repeat-x 0 18px;}
#content p {font-size:18px; line-height:28px;font-weight:300;color:#363636;}
#content h4 {font-family:'Nanum Pen Script', cursive; font-size:24px; overflow:hidden; border-bottom:2px solid #000; padding-bottom:10px}
#content h4:before {content:""; width:34px; height:28px; display:block; background:url('../images/h4_icon.png') left no-repeat; float:left; margin-right:7px}

.mapAdd {overflow:hidden; padding-top:10px}
.mapAdd dl {float:left; margin-right:80px}
.mapAdd dl dt {font-size:16px; font-weight:500;}
.mapAdd dl dt span {border-top:1px solid #636363}
.mapAdd dl dd {margin-top:20px; font-size:14px; font-weight:300; color:#959595; margin-bottom:30px;line-height:24px}
.mapAdd dl dd span {color:#555555}

.mapInfo {margin-top:60%}
.btn01 {border:1px solid #ccc; padding:15px 0; color:#959595; text-align:center; box-sizing:border-box; width:90%; display:block; margin-left:30px;
			transition-property:background,box-shadow; 
			transition-duration: 0.5s;
			transition-timing-function:ease
			}
.btn01:hover{background:#cff3ff;text-decoration:none;box-shadow:2px 2px 3px #d7d7d7;}

.story_list {margin:20px 0 65px 0}
.story_list > li {font-size:18px; line-height:30px; margin-bottom:15px; color:#7d7d7d; font-weight:300;}
.story_list > li span{font-size:18px; color:#252525; font-weight:350;background-color:#eeeeee;}


.headline{height:1px;background:#000;margin:0 0 50px 0}
.HeadlineTitle{font-weight:400; font-size:28px !important; line-height:40px !important; text-align:left;}
.HeadlineTitle span {display:block}
.Head_stitle{color:#fff; padding:10px 10px;display:inline-block}
.Head_stitle{background:#000;}

.bottom_list{width:100%; position:relative; padding:0px}
.bottom_list {max-width:1760px; width:91.6%; margin:0 auto; border-top:1px solid #c2c2c2; padding:40px 0}
.bottom_list h2{ font-size:18px; font-weight:400; color:#252525;padding:0 0 40px 0; text-align:center; }
.bottom_list .bt_list {list-style:none;margin:0 auto;width:65%;}
.bottom_list .bt_list > li {float:left;width:30%;font-family:'Noto Sans KR', sans-serif; font-size:14px; font-weight:300; color:#7d7d7d;margin-left:3%;line-height:20px;padding-bottom:30px}
.bottom_list .bt_list > li span{font-size:14px; font-weight:400; color:#636363;line-height:28px}
.bottom_list .bt_list > li .last{margin-right:0}
.bottom_list .bt_list > li a{color:#7d7d7d;}


@media screen and (max-width:1760px) {
	header {padding:0 10px}
	header section {max-width:100%}
	#mainVisual {padding:0px 10px 70px 10px}
	#mainVisual section {max-width:100%}
	#subVisual {padding:0px 10px}
	#subVisual section {max-width:100%}
}
@media screen and (max-width:1660px) {
	#container {padding:0 10px 70px 10px}
	#container section > a {float:none; max-width:100% !important}
	#container section > a.con01 {margin-right:0px}
	#container section > a.con03 {margin-right:0px; margin-bottom:3px}
	footer {padding:0 10px 30px 10px}
}

@media screen and (max-width:1440px) {
	#container section > a.con01 .conTxt, #container section > a.con04 .conTxt {height:826px}
	#container section > a.con02 .conTxt, #container section > a.con03 .conTxt {height:1306px}
	footer section .fLogo {float:none; margin:0 auto}
	footer section address {float:none; text-align:center; margin-top:20px}
	footer section .fMenu {float:none; margin:20px 0 0 0; text-align:center}
	footer section .fMenu li {float:none; display:inline-block;}
	footer section .fIcon {float:none; margin:20px 0 0 0; text-align:center}
	footer section .fIcon li {float:none; display:inline-block;}
	.grid > div {width:100% !important; margin-bottom:30px}
	.mapInfo {margin-top:0px}
	.btn01 {background:url('../images/btn_arr.png') 80% center no-repeat; width:100%; display:block; margin-left:0px}
	.HeadlineTitle span {display:inline}


#container section > a h2, #container section > div h3, #container section > div h4 {text-align:center}
#container section > a h2 {font-family:'Rajdhani', sans-serif; font-size:18px; color:#252525; font-weight:600}
#container section > a h3 {font-size:24px; line-height:38px; margin:30px 0; color:#fff}

}

@media screen and (max-width:1024px) {
#container section > a.con01 {width:100%; margin-right:3px;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con02 {width:100%;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con03 {width:100%;margin-right:3px;overflow:hidden; float:left; position:relative}
#container section > a.con04 {width:100%;overflow:hidden; float:left; position:relative}

#container section > a h2, #container section > div h3, #container section > div h4 {text-align:center}
#container section > a h2 {font-family:'Rajdhani', sans-serif; font-size:18px; color:#252525; font-weight:600}
#container section > a h3 {font-size:24px; line-height:38px; margin:30px 0; color:#fff}

	#content section {max-width:100%; padding:40px 40px; margin-top:0}
	.sns4{display:inline}
}

@media screen and (max-width:900px) {

header section nav .gnb {text-align:center; margin:0 auto;border-top:1px solid #c2c2c2;margin-top:10px}
header section nav .gnb li {display:block; text-align:center; margin:0 0 0 0;border-bottom:1px solid #c2c2c2;line-height:36px}
header section nav .util {position:inherit; text-align:center; top:0}
#mainVisual section {width:100%; box-sizing:border-box; margin:0 auto}
/*#container section > a.con01 {width:100%; margin-right:3px;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con02 {width:100%;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con03 {width:100%;margin-right:3px;overflow:hidden; float:left; position:relative}
#container section > a.con04 {width:100%;overflow:hidden; float:left; position:relative}*/

#container section > a h2 {font-size:18px}
#container section > a h3 {font-size:28px; margin:15px 0;line-height:36px}
#container section > a p {font-size:16px}
figure.effect-bubba h2 {padding-top:25%}

.sns4{display:inline}
#subVisual section{width:100%; box-sizing:border-box; margin:0 auto}
#subVisual section .subTab {position:inherit; padding:10px}
#subVisual section .subTab a {display:block; border:1px solid #000; color:#000; padding-right:0; padding-left:0}
#subVisual section .subTab a.on {background:#000; color:#fff}
#content section{width:90%}
#content h2 {font-size:36px; line-height:48px;font-weight:400}
#content h3 {font-size:20px; line-height:28px;font-weight:400}
#content h3 span {padding:0 5px; background:url('../images/h3_bg.jpg') center repeat-x;}
#content p {font-size:16px; line-height:24px;font-weight:300;color:#363636;}
#content section .balmoon span{display:inline}


}

@media screen and (max-width:800px) {
header section nav .gnb li {display:block; text-align:center; margin:0 0}
	#mainVisual section.mainTxt h4 span {display:inline}
	header section nav {background:none; margin-top:50px}
	header section nav .util {position:inherit; text-align:center; top:0}
	header section nav .gnb {margin-top:10px}
		.listStyle.list02 li, .listStyle.list03 li {width:100%}

/*#container section > a.con01 {width:100%; margin-right:3px;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con02 {width:100%;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con03 {width:100%;margin-right:3px;overflow:hidden; float:left; position:relative}
#container section > a.con04 {width:100%;overflow:hidden; float:left; position:relative}*/

#container section > a h2, #container section > div h3, #container section > div h4 {text-align:center}
#container section > a h2 {font-family:'Rajdhani', sans-serif; font-size:18px; color:#252525; font-weight:600}
#container section > a h3 {font-size:24px; line-height:38px; margin:30px 0; color:#fff}
#subVisual section .subTab {position:inherit; padding:10px}
#subVisual section .subTab a {display:block; border:1px solid #000; color:#000; padding-right:0; padding-left:0}
#subVisual section .subTab a.on {background:#000; color:#fff}
.sns4{display:inline}
}

@media screen and (max-width:768px) {
	header section nav .gnb li {display:block; text-align:center; margin:0 0}
	#mainVisual section.mainTxt h4 span {display:inline}
	#container section > a.con01 .conTxt, #container section > a.con04 .conTxt {height:435px}
	#container section > a.con02 .conTxt, #container section > a.con03 .conTxt {height:687px}
	.listStyle.list02 li, .listStyle.list03 li {width:100%}
	#content section {padding:40px 20px}
	#subVisual section .subTab {position:inherit; padding:10px}
	#subVisual section .subTab a {display:block; border:1px solid #000; color:#000; padding-right:0; padding-left:0}
	#subVisual section .subTab a.on {background:#000; color:#fff}
	.bottom_list .bt_list > li {float:left;width:100%;font-family:'Noto Sans KR', sans-serif; font-size:14px; font-weight:300; color:#7d7d7d;line-height:20px}
#content section .subTopWrap .subTop {float:none;text-align:center}
	#content section .subTopWrap .subSns {float:none; font-size:14px; margin-top:10px; text-align:center}

#container section > a.con01 {width:100%; margin-right:3px;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con02 {width:100%;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con03 {width:100%;margin-right:3px;overflow:hidden; float:left; position:relative}
#container section > a.con04 {width:100%;overflow:hidden; float:left; position:relative}
#container section > a h2 {font-size:12px}
#container section > a h3 {font-size:16px; margin:15px 0;line-height:20px}
#container section > a p {display:none}
figure.effect-bubba h2 {padding-top:18%}
.sns4{display:inline}

}

@media screen and (max-width:425px) {
	#container section > a.con01 .conTxt, #container section > a.con04 .conTxt {height:235px}
	#container section > a.con02 .conTxt, #container section > a.con03 .conTxt {height:372px}
	#container section > a h2 {font-size:12px}
	#container section > a h3 {font-size:16px; margin:15px 0;line-height:20px}
	#container section > a p {display:none}
	figure.effect-bubba h2 {padding-top:18%}
	#content section {padding:40px 10px}
	#content section .subTopWrap .subTop {float:none;text-align:center}
	#content section .subTopWrap .subSns {float:none; font-size:14px; margin-top:10px; text-align:center}
	.sns4{display:inline}
#mainVisual section.mainTxt h2 {font-size:24px; font-family:'Rajdhani', sans-serif; font-weight:400; text-align:center; margin-top:70px;color:#fff}
#mainVisual section.mainTxt h3 {font-size:24px; font-weight:500; text-align:center; margin:50px 0 30px 0}
#mainVisual section.mainTxt h4 {font-size:16px; font-weight:300; text-align:center; line-height:160%}
#content section .subTopWrap .subTop {font-size:16px}
#content section .subTopWrap .subTop .subTitle{font-size:14px}
#content h2 {font-size:30px; line-height:42px;font-weight:400}
#content h3 {font-size:18px; line-height:24px;font-weight:400}
#content h3 span {padding:0 5px; background:url('../images/h3_bg.jpg') center repeat-x;}
#content p {font-size:14px; line-height:22px;font-weight:300;color:#363636;}

}

@media screen and (max-width:375px) {
#container section > a.con01 {width:100%; margin-right:3px;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con02 {width:100%;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con03 {width:100%;margin-right:3px;overflow:hidden; float:left; position:relative}
#container section > a.con04 {width:100%;overflow:hidden; float:left; position:relative}

#container section > a h2 {font-size:12px}
#container section > a h3 {font-size:16px; margin:15px 0;line-height:20px}
#container section > a p {display:none}
figure.effect-bubba h2 {padding-top:18%}
.sns4{display:inline}
/*
	#container section > a.con01 .conTxt, #container section > a.con04 .conTxt {height:206px}
	#container section > a.con02 .conTxt, #container section > a.con03 .conTxt {height:326px}
	*/
}

@media screen and (max-width:320px) {
	#container section > a.con01 .conTxt, #container section > a.con04 .conTxt {width:100%;height:174px}
	#container section > a.con02 .conTxt, #container section > a.con03 .conTxt {width:100%;height:276px}
#container section > a h2 {font-size:12px}
#container section > a h3 {font-size:16px; margin:15px 0;line-height:20px}
#container section > a p {display:none}
figure.effect-bubba h2 {padding-top:18%}
	#container section > a.con01 {width:100%; margin-right:3px;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con02 {width:100%;margin-bottom:3px;overflow:hidden; float:left; position:relative}
#container section > a.con03 {width:100%;margin-right:3px;overflow:hidden; float:left; position:relative}
#container section > a.con04 {width:100%;overflow:hidden; float:left; position:relative}
.sns4{display:inline}
}