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

/* 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}
body {position:relative; z-index:1}
.img-responsive {display:block;max-width:100%;height:auto}
.cloud { position:absolute;} /*animation-name: rint;		animation-duration: 15s; 
	animation-timing-function:linear;  animation-iteration-count:infinite;*/
.cd1 { top:9%; left:0%;z-index:-1; } 
.cd2 { top:45%; right:7%;z-index:9; } 
.cd3 { top:56%; left:7%;z-index:9; } 
.cd4 { top:66%; right:0%;z-index:9; } 
.cd5 { top:77.5%; left:0%;z-index:-1; } 
.cd6 { top:90%; left:0%;z-index:9; } 
.cd7 { top:93%; right:-5%;z-index:9; } 

@keyframes rint {
	from { top:0px;}
	50%	{ top:150px; }
	to {	top:0px;  }
}

/* common */
#wrap{width:100%;max-width:1920px;margin:0 auto; overflow-x:hidden;position:relative; z-index:1 }

/* 구름은 wrap 안에 있음 */
.img-responsive {display:block; max-width:100%; height:auto}
.width100{width:100%;padding:0; margin:0}
.auto {margin:0 auto}
.mobile1680{display:block}
.mobile1440{display:block}
.mobile1336{display:block}
.mobile1280{display:block}
.mobile1024{display:block}
.mobile960{display:block}
.mobile768{display:block}
.mobile570{display:block}
.mobile{display:block}
.mobile2{display:none}
.mvisible{display:none}
.u_visible{display:none}
.brmobile2{display:block}
.br1024{display:none}
.br960{display:none}
.br768{display:none}
.br570{display:none}
.br425{display:none}
/*margin*/
.auto {margin:0 auto !important}
.width100 {width:100% !important}
.mt03 {margin-top:3% !important}
.mt05 {margin-top:5% !important}
.mt07 {margin-top:7% !important}
.mt10 {margin-top:10% !important}
.mb03 {margin-bottom:3% !important}
.mb05 {margin-bottom:5% !important}
.mb07 {margin-bottom:7% !important}
.mb10 {margin-bottom:10% !important}

/* header */
.main_wrap{ background: linear-gradient(to bottom,#99c3e8, #d1deee, #e0dfe1) !important; }
header {width:100%;overflow:hidden; }
.top {position:relative;width:90%;max-width:1630px; margin:4% auto 5% auto;}
.top_left_box{float:left; display:inline-block;width:42%}
.top_left{font-family: 'Noto Sans KR', sans-serif;font-size:13px;color:#fff;font-weight:400;width:35%;line-height:140%; display:inline-block;padding-top:3px}
.top_left span{font-family: 'Work Sans', sans-serif;font-size:14px;color:#fff;font-weight:600}

.logo_box{text-align:center;margin:0 auto;display:inline-block;width:15%; text-align:center; }
.logo{font-family:'Verdana', 'Work Sans', sans-serif;font-size:36px;color:#fff;font-weight:bold;text-align:center;margin:0 auto}
.logo a{color:#fff;}
.logo span{display:none;font-family: 'Work Sans', sans-serif;font-size:14px;color:#fff;font-weight:400;text-align:center;text-transform:uppercase}

.top_right_box{position:relative;display:block;width:42%;float:right;margin-top:0.5%;padding-top:0;}
.top_right{font-family: 'Work Sans', sans-serif;font-size:24px;color:#333;font-weight:600;text-transform:uppercase;text-align:right;}
.top_right .month{font-family: 'Work Sans', sans-serif;font-size:16px;color:#333;font-weight:400;padding-right:50px;margin-right:14%}
.top_right .menu{position:absolute; right:8%;font-family: 'Work Sans', sans-serif;font-size:20px;color:#fff;font-weight:600;text-transform:uppercase;margin-right:1%; margin-top:1%}
.top_right .menu a{color:#333}

.btn_side{position:absolute;  right:0; z-index:999;display:inline-block;margin-top:3px;margin-top:1%}

.logo02{text-align:center;margin:3.5% auto 1% auto; z-index:999;font-family:'Verdana', 'Work Sans', sans-serif;font-size:36px;color:#333333;font-weight:bold;}
.logo02 a{color:#333333;}
.vol{width:100%;font-family: 'Work Sans', sans-serif;font-size:14px;color:#818181;font-weight:400;margin:0 auto 3% auto;text-align:center;text-transform:uppercase}

/* menu */
#side{display:none; z-index:99999; width:100%; height:90%; position:fixed; top:0; right:0;background:#fff;padding:0; margin:0;right:-100%;overflow:scroll;}
#mask {position:absolute; z-index:999; background:rgba(0,0,0,0.6) 0 0; display:none; left:0; top:0; width:100%; height:100%; overflow:hidden;margin:0;padding:0}
.close {display:none; position:fixed; top:8%; right:9%; width:24px; height:24px; background-image:url('../../img/2019/btn_close.png'); background-position:0 0;background-size:24px 24px;text-indent:-9999px; opacity:1}

.listWrap02{overflow:hidden;text-align:center; margin:4% auto 0% auto; width:85%;  }
.article_text2 {text-align:center;margin:2% 0}
.article_text2 span {display:block;padding:5px 0 }
.article_text2 span.l_title2 {font-size:15px;color:#474747;text-align:center;font-family :'Noto Sans KR', sans-serif;font-weight:500;letter-spacing:0.1em;margin-left:2%}
.article_text2 span.l_stitle2 {font-size:13px;color:#7a7a7a;text-align:center;/* min-height:45px; */line-height:1.4;letter-spacing:0.02em;margin-left:2%}
.article_text2 span.l_stitle2 i{font-style:italic;color:#7a7a7a;letter-spacing:0.03em}
.articlelist2{text-align:center;margin:0 0 3% 0} /* Historic 추가시 text-align:center에서 left로 변경  */
.articlelist2 li {display:inline-block;padding:0 0;margin:0 2% 1% 2%;vertical-align:top;width:14%/* 갯수에 따라 10ea:width 14%,12ea:width:11%변경*/ }
.articlelist2 a .cover2 img {width:100%;text-align:center}
.articlelist2 a .cover2 span {display:inline-block;font-size:0;padding:0;margin:0;background:#000;border-radius:20px; overflow:hidden}
.articlelist2 a:hover .cover2 img {opacity:0.5;transition:.2s  ease-in-out }

.visual_mov { width:90%;max-width:1630px; overflow:hidden; margin:0% auto; border-radius:30px; text-align:center;  position:relative; z-index:1;box-shadow:0px 0px 30px #3b82be}
.mov_area { display:block;width:100%;background:#000 }
#videobcg { display:block;width:100%;opacity:0.8 }
.mov_area2 { display:block;width:100%;background:#082a4a}
#videobcg2 { display:block;width:100%;opacity:0.7 }
.main_title { width:100%; height:100%;position:absolute;top:40%;margin:0 auto;font-family: 'Unna',serif;text-transform:uppercase;font-size:90px; color:#ffffff;text-align:center;font-weight:400}

/*넓게 듣다*/
#conBox {width:90%; clear:both;max-width:1630px; overflow:hidden; padding-bottom:1%; margin:0 auto; }
.con_textBox1 { margin:10% auto 7% auto  ;text-align:center;}
.con_textBox1 .cate {text-align:center;display:block; margin:0 auto; width:10%; text-indent:60px; background-image:url('../images/t_icon.png'); background-repeat:no-repeat;font-size:20px;font-weight:bold;color:#5257b3;line-height:200%}
.con_textBox1 .con_title {  width:50%; text-align:center;font-size:55px; font-weight:bold;margin:1.5% auto 2% auto; color:#212121}
.con_textBox1 .con_txt { margin:0 auto; width:50%; text-align:center; font-size:18px; font-weight:600; line-height:180%; }
.con_textBox1 .con_txt .s_title2 { margin:0 auto 2% auto;  font-size:18px; font-weight:500; line-height:180%}
.con_textBox1 .morebt1 { display:block;width:250px;padding:1.8% 0; background:#fff; text-align:center; color:#6267b9;margin:8% auto 0 auto;border-radius:50px;font-family:'Work Sans', sans-serif; text-indent:50px; transition:0.2s}
.con_textBox1 .morebt1:hover { background:#6267b9; color:#fff;} 
.con_textBox1 .btbg { float:right; width:43px; height:43px; background-image:url('../images/add_icon.png');margin-top:-6px;margin-right:10px}

.conbox1 { margin:0 10%; position:relative; }
.left_con, .right_con { width:50%;float:left;overflow:hidden;border-radius:30px; box-shadow:0px 0px 20px #3b82be}
.left_con img,.right_con img { display:block; width:100%;  }
.circle_area{ position:absolute; z-index:10; top:-180px; right:-5%; }
.circle_area img{vertical-align:middle;}
.circle { position:relative; }
.circle_area span{ position:absolute;  top:50px; right:30%;}
.circle_area .circle{animation: orbit 8s linear infinite;}
@keyframes orbit {
	from { 	transform: rotate(0deg) translateX(0px); }
	to   {  transform: rotate(360deg) translateX(0px); }
}

/* 이벤트 박스 (오른쪽고정)*/
.conBox_event_top {width:100%; position:relative; margin:0 0 5% 0;  padding:15% 0; }
/*.event_bt { float:right; display:block; margin-right:5% }*/
.event_bt.right{display:block; position:absolute; z-index:10; top:48%; right:7%; }
.event_bt img{vertical-align:middle;}
.event_bt .circle{position:relative;}
.event_bt span{position:absolute; top:0px; right:0%;}
.event_bt .circle{animation: orbit 8s linear infinite;}
@keyframes orbit {
	from { 	transform: rotate(0deg) translateX(0px); }
	to   {  transform: rotate(360deg) translateX(0px); }
}
.event_word2 {width:100%;}
.txt_small { position:absolute; right:6%; top:28%; } 
.txt_big { position:absolute; left:1%; top:25%; } 

/* 이벤트 박스(왼쪽고정) */
.conBox_event_bottom { position:relative; margin:0% 10%; padding:8% 0; background-size:100% auto;}
.event_bt.left{display:block; position:absolute; z-index:10; top:19%; left:0%;}
.event_word1 {text-align:center;margin:3% 0 0 20%}
.event_word1 span {position:relative;  display: inline-block; letter-spacing:-3px; font-size:95px; font-family: 'Unna',serif; color:#4b4f70; 
animation:txtup 8s infinite; -webkit-animation:txtup 8s infinite;  -ms-animation:txtup 8s infinite;   -moz-animation: txtup 8s infinite; 
}
.flow_word span:nth-of-type(1){animation-delay:0.1s;}
.flow_word span:nth-of-type(2){animation-delay:0.2s;}
.flow_word span:nth-of-type(3){animation-delay:0.3s;}
.flow_word span:nth-of-type(4){animation-delay:0.4s;} 
.flow_word span:nth-of-type(5){animation-delay:0.5s;} 
.flow_word span:nth-of-type(6){animation-delay:0.6s;}
.flow_word span:nth-of-type(7){animation-delay:0.7s;}
.flow_word span:nth-of-type(8){animation-delay:0.8s;}
.flow_word span:nth-of-type(9){animation-delay:0.9s;} 
.flow_word span:nth-of-type(10){animation-delay:1s;} 
.flow_word span:nth-of-type(11){animation-delay:1.1s;} 
.flow_word span:nth-of-type(12){animation-delay:1.2s;}
.flow_word span:nth-of-type(12){animation-delay:1.3s;}
.flow_word span:nth-of-type(13){animation-delay:1.4s;}
.flow_word span:nth-of-type(14){animation-delay:1.5s;} 
.flow_word span:nth-of-type(15){animation-delay:1.6s;}
.flow_word span:nth-of-type(16){animation-delay:1.7s;}
.flow_word span:nth-of-type(17){animation-delay:1.8s;}
.flow_word span:nth-of-type(18){animation-delay:1.9s;}
.flow_word span:nth-of-type(19){animation-delay:2.0s;} 
.flow_word span:nth-of-type(20){animation-delay:2.1s;} 
.flow_word span:nth-of-type(21){animation-delay:2.2s;} 
.flow_word span:nth-of-type(22){animation-delay:2.3s;}
.flow_word span:nth-of-type(23){animation-delay:2.4s;}
.flow_word span:nth-of-type(24){animation-delay:2.5s;}
.flow_word span:nth-of-type(25){animation-delay:2.6s;} 
.flow_word span:nth-of-type(26){animation-delay:2.7s;} 
.flow_word span:nth-of-type(27){animation-delay:2.8s;} 
.flow_word span:nth-of-type(28){animation-delay:2.9s;} 
    
@keyframes txtup {
0% {top:0;}
20% {top:-6rem;}
40% {top:6rem;}
60% {top:0;}
80% {top:0;}
100% {top:0}
}

/*깊이 알다, 함께 더 멀리 */
.conbox2 { margin:2% 13%; position:relative;}
.conbox2 .left { width:50%; float:left; }
.conbox2 .right { width:50%; float:left; overflow:hidden; border-radius:30px; box-shadow:0px 0px 20px #5c85aa }
.conbox2 .right img { display:block; width:100%; } 
.con_textBox2 { margin:5% auto 7% auto;  overflow:hidden; }
.con_textBox2 .cate { text-indent:60px; display:block; background-image:url('../images/t_icon.png'); background-repeat:no-repeat;font-size:20px;font-weight:bold;color:#5257b3;line-height:200%}
.con_textBox2 .con_title { font-size:55px; font-weight:bold;margin:2% 0 5% 0;color:#212121; letter-spacing:-2px}
.con_textBox2 .s_title { font-size:20px; font-weight:bold; line-height:250%;color:#212121}
.con_textBox2 .con_txt { width:70%;  font-size:18px; font-weight:600; line-height:180%; }
.con_imgBox2 a img { display:block; }
.con_textBox2 .morebt2 { display:block;width:250px;padding:3.5% 0; background:#fff; text-align:center; color:#6267b9;margin:15% 0 0 0;border-radius:50px;font-family:'Work Sans', sans-serif;text-indent:50px;transition:0.2s}
.morebt2:hover { background-color:#6267b9; color:#fff}
.con_textBox2 .btbg { float:right; width:43px; height:43px; background-image:url('../images/add_icon.png');margin-top:-6px;margin-right:10px}
.circle_area2 { position:absolute; z-index:10; top:700px; left:-13%; }
.circle_area2 img{vertical-align:middle;}
.circle_area2 .circle { position:relative; }
.circle_area2 span{ position:absolute;  top:60px; left:21%;}
.circle_area2 .circle{animation: orbit 8s linear infinite;}
@keyframes orbit {
	from { 	transform: rotate(0deg) translateX(0px); }
	to   {  transform: rotate(360deg) translateX(0px); }
}

/* KTL 이모저모*/
.conbox3 { clear:both; margin:0 20%; padding-top:2%; }
.con_textBox3 { width:90%; margin:20% auto 7% auto;text-align:center; }
.con_textBox3 .cate { display:block; margin:0 auto;  width:25%; text-indent:20px; background-image:url('../images/t_icon.png'); background-repeat:no-repeat;font-size:20px;font-weight:bold;color:#5257b3;line-height:200%}
.con_textBox3 .con_title { font-size:55px; font-weight:bold;margin:2% 10%; color:#212121; line-height:150%; letter-spacing:-2px}
.con_textBox3 .con_txt { margin:4% 0%; font-size:18px; font-weight:600; line-height:180%; }
.morebt3 { display:block;width:250px;padding:2% 0; background:#fff; text-align:center; color:#6267b9;margin:7% auto;border-radius:50px;font-family:'Work Sans', sans-serif;text-indent:50px;transition:0.2s}
.morebt3:hover  { background-color:#6267b9; color:#fff}
.morebt3 .btbg { float:right; width:43px; height:43px; background-image:url('../images/add_icon.png');margin-top:-6px;margin-right:10px}
.conbox3_img { display:block;position:relative;  border-radius:30px;box-shadow:0px 0px 30px #5c85aa; overflow:hidden;text-align:cetner;}
.v_log { display:block; width:100%; }
.ytb_bt { display:block; position:absolute; top:40%; left:45%; transition:0.3s}
.ytb_bt:hover { opacity:0.8 } 
/* 청렴 KTL */
.scrollcon_area { margin:20% 7% 20% 7%;position:relative;} 
.con_textBox4 { width:90%; margin:10% auto 7% auto;text-align:center; }
.con_textBox4 .cate { display:block; margin:0 auto;  width:14%; text-indent:25px; background-image:url('../images/t_icon.png'); background-repeat:no-repeat;font-size:20px;font-weight:bold;color:#5257b3;line-height:200%}
.con_textBox4 .con_title { font-size:55px; font-weight:bold;margin:2% 10%; color:#212121; line-height:150%; letter-spacing:-2px}
.con_textBox4 .con_txt { margin:2% 10%;; font-size:18px; font-weight:600; line-height:180%; }
.morebt4 { display:block;width:250px;padding:1.5% 0; background:#fff; text-align:center; color:#6267b9;margin:7% auto;border-radius:50px;font-family:'Work Sans', sans-serif;
text-indent:50px;transition:0.2s}
.morebt4:hover  { background-color:#6267b9; color:#fff} 
.morebt4 .btbg { float:right; width:43px; height:43px; background-image:url('../images/add_icon.png');margin-top:-6px;margin-right:10px}
.slide_left, .slide_right { position:absolute; }
.slide_left img, .slide_right img { display:block; width:100%; }
.slide_left { left:0; top:10%; border-radius:30px;overflow:hidden;box-shadow:0px 0px 20px #5c85aa }
.slide_right { right:0; top:-20%; border-radius:30px;overflow:hidden;box-shadow:0px 0px 20px #5c85aa  }

/*인증의 역사, 기술규제 리포트*/
.conbox5 { margin:3% 10%;overflow:hidden; } 
.conbox5_01{margin-top:3%}
.con_textBox5 { width:45%; float:left; margin-top:5%; margin-left:5% }
.con_textBox5.right:{float:right}
.con_textBox5.left:{float:left}
.conbox5_img { width:40%; float:left; margin-right:5%}
.conbox5_img.right{float:right}
conbox5_img.right{float:left}
.conbox5_img img { display:block; width:100%; }
.con_textBox5 .cate { display:block; text-indent:60px; background-image:url('../images/t_icon.png'); background-repeat:no-repeat;font-size:20px;font-weight:bold;color:#5257b3;line-height:200%}
.con_textBox5 .con_title { font-size:55px; font-weight:bold;margin:2% 0%; color:#212121; line-height:130%; letter-spacing:-2px}
.morebt5 { display:block;width:220px;padding:3% 0; background:#fff; text-align:center; color:#6267b9;margin:7% 0; border-radius:50px;font-family:'Work Sans', sans-serif;text-indent:50px; font-weight:600; transition:0.2s}
.morebt5:hover { background-color:#6267b9; color:#fff} 
.morebt5 .btbg { float:right; width:43px; height:43px; background-image:url('../images/add_icon.png');margin-top:-12px;margin-right:10px}

/*더욱 가까이*/
.conbox6 { margin:7% 5%; overflow:hidden; position:relative; }
.conbox6 .hand { display:block; margin: 0 auto; }
.circle_area3{ position:absolute; z-index:10; top:35%; left:0%; }
.circle_area3 img{vertical-align:middle;}
.circle_area3 .circle { position:relative; }
.circle_area3 span{ position:absolute;  top:80px; left:21%;}
.circle_area3 .circle{animation: orbit 8s linear infinite;}
@keyframes orbit {
	from { 	transform: rotate(0deg) translateX(0px); }
	to   {  transform: rotate(360deg) translateX(0px); }
}

/* 풋터영역 */
footer { margin:0% 5%;  border-top:1px solid #999;overflow:hidden; padding:2% 0 } 
footer .ft_col { display:block;  float:left; width:33%; }
footer .ft_left .ft_bt { display:block; float:left; border:1px solid #434343; text-align:center;padding:1.5% 5%; margin-right:2%;border-radius:30px; color:#434343; text-align:center} 
footer .ft_center { margin: 0 auto;}
footer .ft_center p { text-align:center; font-size:13px; line-height:250%; color:#424242; }
footer .ft_right {  float:right;  text-align:right;  }
footer .ft_right .sns_bt { margin-left:1%}

@media screen and (max-width:1680px) {
	.mobile1680{display:none}
	.hidden-lg {display:none !important}
	.listWrap02{width:90%}
	.logo{font-size:32px}
	.con_textBox1 .cate {width:10%}
	.con_textBox3 .cate { width:30%; text-indent:0px }	
	.scrollcon_area { margin:20% 4% 25% 4%;} 
	.con_textBox4 .cate { width:15%; }
	.conBox_event_bottom { margin:0% 8%; }
	.event_word1 span {font-size:85px;}
	.event_word1 {  text-align:center;margin:3% 0 0 23%   }
	.event_bt.left{ display:block; position:absolute; z-index:10; top:19%; left:0%; }
	.txt_big img{width:80%;} 
}
@media screen and (max-width:1600px) {
	.mobile1600{display:none}
	.top_left span{font-size:13px}
	.top_left {font-size:12px}	
	.top_left_box{width:37%}
	.logo_box{width:25%}
	.top_right_box{width:37%}
	.logo{font-size:32px}
	.top_right .month{font-size:13px}
	.con_textBox1 .cate {width:12%}
	.con_textBox3 .con_title, .con_textBox1 .con_title, .con_textBox2 .con_title, .con_textBox4 .con_title, .con_textBox5 .con_title { font-size:45px } 
	.conbox2 { margin:7% 13%; position:relative;}
	.con_textBox3 .cate { text-indent:10px }	
	/*구름위치조정*/
	.cd1 { top:8%; left:0%;z-index:-1; } 
	.cd2 { top:45%; right:4%;z-index:9; } 
	.cd3 { top:56%; left:7%;z-index:9; } 
	.cd4 { top:65.8%; right:0%;z-index:9; } 
	.cd5 { top:76.5%; left:0%;z-index:-1; } 
	.cd6 { top:88%; left:0%;z-index:9; } 
	.cd7 { top:92%; right:-5%;z-index:9; } 

}
@media screen and (max-width:1440px) {
	.mobile1440{display:none}
	.hidden-lg {display:none !important}
	.logo{font-size:28px}
	.top_right .menu{font-size:18px;right:9%}
	#conBox { max-width:1200px;}
	.con_textBox3 .cate { width:28%; }
	.scrollcon_area { margin:28% 5% 25% 5%;} 
	.con_textBox1 .cate {width:12%;text-indent:50px;}
	.con_textBox4 .cate { width:20%; }
	.slide_left, .slide_right { width:25% }
	.conBox_event_bottom {margin:3% 4%; padding:10% 0 }
	.event_word1 span {font-size:75px;}
	.conbox6 .hand { display:block; width:55%; margin:5% auto; }
	.circle_area{ top:-200px; right:-13%; }
	.conbox3 { clear:both; margin:5% 10%; padding-top:8%; }
	.main_title{top:35%; font-size:78px;}
	/*구름위치조정*/
	.cd1 { top:8%; left:0%; } 
	.cd2 { top:45%; right:2%; } 
	.cd3 { top:56%; left:7%; } 
	.cd4 { top:65%; right:0%; } 
	.cd5 { top:78%; left:0%;} 
	.cd6 { top:88%; left:0%; } 
	.cd7 { top:93%; right:-5%; } 
	.circle_area{top:-170px; right:-13%;}
	.circle_area img{vertical-align:middle;}
	.circle { position:relative; }
	.circle_area span{ position:absolute;  top:50px; right:30%;}
	.txt_big{top:30%}
	.txt_big img{width:70%}
	.conbox2{margin:10% 10%}
	.circle_area2{ top:700px;}
}
/*노트북*/
@media screen and (max-width:1366px) {
	.mobile1366{display:none}
	.event_word1 {  text-align:center;margin:3% 0 0 23%   }
	.event_word1 span {font-size:75px;}
	.con_textBox3 .con_title, .con_textBox1 .con_title, .con_textBox2 .con_title, .con_textBox4 .con_title, .con_textBox5 .con_title { font-size:40px } 
	.txt_big {top:30%; } 
	.scrollcon_area { margin:20% 6% 25% 6%;} 
	.cd3 { top:56%; left:3%; } 
	.con_textBox1 .cate {width:12%}
}
@media screen and (max-width:1280px) {
	.mobile1280{display:none}
	.listWrap02 li{width:25%;margin:1% 2%;}
	.listWrap02 .list02{clear:none}
	.listWrap02 .menu_txt02{width:70%;margin-top:15px}
	.listWrap02 .menu_txt{width:70%;margin-top:7px}
	#side{height:95%}
	.visual_mov{width:90%}
	.conBox_event_bottom { margin:0% 5%; padding:15% 0 }
	.scrollcon_area { margin:28% 7% 25% 7%;} 
	.event_word1 span {font-size:68px;}
	.event_word1 {text-align:center;margin:0 0 0 26%   }
	.con_textBox1 .cate {width:20%;text-indent:50px;font-size:18px}
	.con_textBox3 .cate { width:28%; }
	.con_textBox4 .cate { width:22%; }
	.txt_big img{width:65%}
	/*.articlelist2 li{width:25%}*/
	.article_text2 span.l_title2 {font-size:14px;}
	.article_text2 span.l_stitle2 {font-size:12px;}
	.event_btn{width:80%}
	.con_textBox1 .cate {width:13%}
}
/*아이패드 미니-가로*/
@media screen and (max-width:1024px) {
	.mobile1024{display:none}
	.br1024{display:block}
	.subtop{width:100%}
	.listWrap02{width:92%}
	.listWrap02 .listTxt{font-size:12px}
	.listWrap02 .listTitle{font-size:12px;line-height:125%}
	.listWrap02 .listname{font-size:13px}
	.listWrap02 .menu_txt02{width:80%;margin-top:10px;font-size:11px}
	.listWrap02 .menu_txt{width:80%;margin-top:0px;font-size:11px}
	#conBox{margin-top:4%}
	.con_textBox1 .cate {width:15%}
	.logo{font-size:26px}
	.top_right .menu{margin-right:5%}
	.top_left span{font-size:12px}
	.top_left{font-size:11px}
	.listWrap02 .menu_txt02{width:60%}
	.listWrap02{text-align:right}
	.mobile1024{display:none}
	.main_title{top:35%; font-size:68px;}
	.circle_area{top:-200px; right:-13%;}
	.circle_area2{top:550px}
	.conBox_event_top{width:100%;}
	.txt_small {right:0%}
	.txt_small img{width:80%;}
	.event_bt.right{top:40%; right:3%}
	.txt_big {left:3%; top:45%; } 
	.conbox2{margin:15% 10%}
	.conbox3{padding-top:5%}
	.des {font-size:16px;line-height:180%}
	.con_textBox3 .con_title, .con_textBox1 .con_title, .con_textBox2 .con_title, .con_textBox4 .con_title, .con_textBox5 .con_title { font-size:35px }
	.con_textBox3 .cate { width:33%}
	.con_textBox4 .cate { width:26%}
	.event_word1 span{font-size:48px}
	.event_bt.left{left:-5%}
	.con_textBox1 .morebt1{padding:4% 0}
	.con_textBox2 .morebt2 {width:200px;padding:5% 0}
	.morebt3, .morebt4 {width:200px;padding:2% 0} 
	.morebt5{margin:10% 0; padding:5% 0; width:200px}
	.cd7 {right:-30%}
	.cd6{left:-10%}
	.cd6 img{width:80%} 
	.cd7 img {width:80%; }
	footer .ft_right{width:50%}
	footer .ft_left{width:50%}
	footer .ft_center{clear:both; width:100%; margin:2% auto; }
}
@media screen and (max-width:960px) {
	.br960{display:block}
	.hidden-sm {display:none !important}
	.footer_btn{float:none;overflow:hidden; margin:0 auto;width:65%}
	.address{float:none;display:block; margin:2% auto 0 auto ;text-align:center;width:100%;font-size:10px}
	/*.address img{clear:both;display:block; margin:2% auto;width:17%;}
	.webward img{width:13%;margin:10% 0 0 10%}*/
	.listWrap02 .thum{width:14%}
	.listWrap02 .menu_txt{width:70%;margin-top:0}
	.listWrap02 .menu_txt02{width:70%;margin-top:0}
	.top_right_box{width:32%;}
	.top_right .month{padding:10px 5px 0 0;font-size:12px}
	.listWrap02 li{vertical-align:top}
	.top_left_box{width:40%}
	.cd3 img{width:80%} 
	.con_textBox1 .cate {width:18%}
	.con_textBox1 .cate, .con_textBox2 .cate, .con_textBox3 .cate, .con_textBox4 .cate{font-size:18px;}
	.con_textBox3 .cate{width:35%;font-size:18px;}
	.con_textBox4 .cate{width:23%;font-size:18px;}
	.con_textBox3{margin:5% auto 0 auto;}
	.cd2{right:-20%;}
	.cd2 img, .cd3 img, .cd4 img{width:80%;}
	.cd3{top:54%;left:-10%}
	.cd4{top:63%;right:-25%}
	.circle_area2{display:none}
	.con_textBox4{margin:0 auto 15% auto}
	.scrollcon_area { margin:18% 7% 20% 7%;}
	.txt_big{top:70%;}
	.txt_big img{width:70%;}
	.main_title{font-size:60px;}
	.con_textBox2 .s_title { font-size:16px;}
	.des{font-size:14px}
	.con_textBox3 .con_title, .con_textBox1 .con_title, .con_textBox2 .con_title, .con_textBox4 .con_title, .con_textBox5 .con_title { font-size:28px }
	.event_word1 span{font-size:50px}
	.event_bt .circle{width:80%;}
	.event_bt span img{width:80%}
}
/*아이패드, 아이패드 미니-세로, 아이폰 XS-가로*/
@media screen and (max-width:768px) {
	.br768{display:block}
	.listWrap02{width:90%}
	.top_left_box{display:none}
	.top_right_box{margin-top:1%}
	.logo_box{width:50%}
	.top_right{top:3%}
	.top_right .menu{right:14%}
	.top_right .month{padding:0 10px 10px 0;font-size:11px}
	.logo{font-size:24px;margin-top:2.5% ;text-align:left;left:-6.5%}
	.footer_btn{width:65%}
	.address{width:65%}
	.close{top:4%}
	.top_btn{bottom:6%}
	.mobile768{display:none}
	.listWrap02 .listTitle{font-size:11px}
	.listWrap02 .listname{font-size:11px}
	.listWrap02 .listTxt{font-size:11px}
	.listWrap02 .menu_txt02{width:70%;margin-top:10px}
	.listWrap02 .menu_txt{width:70%}
	.listWrap02{width:90%}
	.listWrap02 .thum{width:17%}
	.articlelist2 li{width:20%}
	.u_visible{display:block}
	.visual_mov, .conbox2 .right {box-shadow:0px 0px 15px #3b82be}
	.conbox3_img, .con_imgBox2 {box-shadow:0px 0px 15px #5c85aa;}
	.con_textBox1 .morebt1{width:200px;text-indent:30px;;padding:4% 0;}
	.con_textBox2 .morebt2 {width:160px;padding:5% 0;font-size:16px;text-indent:30px;}
	.morebt3, .morebt4 {width:200px;padding:3% 0} 
	.morebt5{padding:7% 0;}
	.slide_left, .slide_right{box-shadow:0px 0px 15px #5c85aa}	
	.main_title{font-size:48px;}
	.con_textBox1 .cate {width:20%;font-size:16px;line-height:220%;}
	.circle_area, .circle_area2, .circle_area3{display:none}
	.con_textBox1 .con_title{width:70%}
	.con_textBox1 .con_txt {width:70%}
	.txt_big {left:-20%; }
	.txt_big img{width:59%}
	.txt_small{}
	.con_textBox2 { margin:0 auto 7% auto;}
	.con_textBox2 .con_txt {margin-left:0;width:80%; }
	.left_con, .right_con {box-shadow:0px 0px 15px #3b82be;margin:5% 0}
	.conbox2 {margin:20% 8% 15% 8%; box-shadow:0px 0px 15px #3b82be}
	.con_textBox3 .cate{width:42%;}
	.con_textBox4 .cate{width:28%;}
	.cd2 img, .cd3 img, .cd4 img, .cd6 img, .cd7 img{width:60%;}
	.cd2{right:-35%;top:47%;}
	.cd3{top:55%;left:-15%}
	.cd4{top:64%;right:-34%}
	.cd7{right:-40%}
	.event_word1 span {font-size:40px}
	footer{padding:5% 0}
	footer .ft_left .ft_bt{margin:0 2% 5% 0}
	footer .ft_right{width:50%}
	footer .ft_left{width:50%}
	footer .ft_center{clear:both; width:100%; margin:0 auto; }
	footer .ft_center p{margin:1% 0}
}
@media screen and (max-width:570px) {	
	.br570{display:block}
	.logo{font-size:20px;margin-top:0}
	.logo02{font-size:20px}
	.logo span{font-size:11px}
	.address{font-size:8px}
	.address img{width:30%}
	.listWrap02 li{width:90%;margin:3% 3%;}
	.listWrap02 .thum{width:17%;margin-left:2%;}
	.listWrap02 .menu_txt{width:75%;text-align:left;}
	.listWrap02 .menu_txt02{width:75%;text-align:left;margin-top:5px}
	.listWrap02 .listname{font-size:13px}
	.listWrap02 .listTitle{font-size:12px}
	.close{top:3%; right:4%}
	.listWrap02 li{height:60px}
	.top_right .month{display:none}
	.logo_box{width:45%;margin-left:4%}
	.top_right_box{width:45%;margin-right:4%}
	.logo{font-size:22px}
	header .top{margin:7% auto}
	.articlelist2{margin:5% 0 10% 0}
	.articlelist2 li{width:90%;margin:0 auto}
	.articlelist2 a .cover2 span{display:none}
	.article_text2 {text-align:left;margin:0}
	.inner2 h6{font-size:20px;padding-top:5%}
	.article_text2 span{padding:3px 0}
	.article_text2 span.l_title2 {font-size:14px; margin-top:3%}
	.article_text2 span.l_stitle2 {font-size:12px;}
	.utility2_btn01{font-size:11px}
	.visual_mov{width:85%;height:550px}
	#videobcg {width:290%; height:100%; opacity:0.8;overflow:hidden;position:absolute;left:-90%;}
	.main_title{font-size:48px;top:33%}
	.mobile2{display:block}
	.mobile{display:none}
	.con_textBox1 .con_txt{width:90%; margin:0 auto}
	.des{font-size:16px;}
	h4{margin:5% 0}
	.con_textBox1 .con_title{margin:5% auto; width:80%}
	.con_textBox1 .morebt1{margin:10% 0}
	.conbox1{width:90%;margin:0 5%;}
	.con_textBox1 .morebt1 {margin:10% auto}
	.left_con, .right_con {box-shadow:0px 0px 5px #3b82be;margin:5% 0}
	.txt_big {display:none}
	.txt_small{display:none}
	.event_bt.right{top:10%;right:10%;}
	.event_bt .circle{width:70%;}
	.event_bt span {right:-2%;top:0}
	.event_bt span img {width:70%;}
	.conbox2 .left, .conbox2 .right{width:100%}
	.conbox2 .left .con_txt{width:100%}
	.con_textBox2 .s_title { font-size:18px;}
	.conbox3{margin:0 5%;}
	.con_textBox1 .cate {width:30%}
	.con_textBox3 .cate{width:100%; margin:0;text-align:left;text-indent:60px}
	.con_textBox3 .con_title, .con_textBox3 .con_txt{text-align:left; margin-left:0; width:100%}
	.morebt3, .morebt4{margin:10% 0; padding:3% 0; width:250px}
	.con_textBox2 .morebt2, .con_textBox1 .morebt1{width:250px;padding:3% 0; }
	.cd2{right:-55%;top:43%;}
	.cd3{top:52%;}
	.cd4{top:62%; right:-100%}
	.cd5, .cd6, .cd7{display:none}
	.ytb_bt{left:42%}
	.ytb_bt img{width:70%}
	.scrollcon_area{margin:30% 5% 25% 5%;}
	.con_textBox4 .cate{width:100%;margin:0;text-align:left;text-indent:60px}
	.con_textBox4 .con_title{text-align:left; margin-left:0}
	.slide_left, .slide_right { position:relative; width:50%; float:left;margin-bottom:30%}
	.con_textBox4 .con_txt{margin-left:0}
	.conBox_event_bottom {display:none}
	.conbox5{padding-top:5%}
	.con_textBox5 { width:100%; float:left; margin-top:5%; margin-left:5% }
	.conbox5_img { width:100%; float:left; }
	.morebt5{margin:10% 0; padding:5% 0; width:200px;}
	footer .ft_right{width:60%; float:none;margin:3% auto}
	footer .ft_left{width:60%;float:none;margin:3% auto}
}
/*아이폰XS*/
@media screen and (max-width:425px) {
	.br425{display:block}
	.logo{font-size:20px;margin-top:0}
	.logo02{font-size:20px}
	.logo span{font-size:11px}
	.address{font-size:8px}
	.address img{width:30%}
	.listWrap02 li{width:90%;margin:3% 3%;}
	.listWrap02 .thum{width:17%;margin-left:2%;}
	.listWrap02 .menu_txt{width:75%;text-align:left;}
	.listWrap02 .menu_txt02{width:75%;text-align:left;margin-top:5px}
	.listWrap02 .listname{font-size:13px}
	.listWrap02 .listTitle{font-size:12px}
	.close{top:3%; right:4%}
	.listWrap02 li{height:60px}
	.top_right .menu{right:16%}
	.top_right .month{display:none}
	.logo_box{width:45%;margin-left:4%}
	.top_right_box{width:45%;margin-right:4%}
	.logo{font-size:22px}
	header .top{margin:7% auto}
	.utility2_btn01{font-size:11px}
	.visual_mov{width:85%;height:550px}
	.main_title{font-size:42px;top:37%}
	.mobile2{display:block}
	.mobile{display:none}
	.con_textBox1 .con_txt{width:90%;}
	.des{font-size:16px;}
	h4{margin:5% 0}
	.con_textBox1 .cate {width:35%}
	.conbox1{width:90%;margin:3% 5%;}
	.left_con {box-shadow:0px 0px 10px #3b82be;margin:0 0; width:100%}
	 .right_con{display:none}
	.circle_area, .circle_area2, .circle_area3{display:none}
	.txt_big {left:-100%; top:110%}
	.txt_big img{width:100%}
	.txt_small{right:-145%; top:-55%}
	.txt_small img{width:65%}
	.event_bt.right{top:0;right:-8%;}
	.event_bt .circle{width:60%;}
	.event_bt span {right:-2%;top:0}
	.event_bt span img {width:60%;}
	.conBox_event_top{margin:7% 0}
	.conbox2 .right {width:100%;box-shadow:0px 0px 10px #3b82be;margin:7% 0}
	.con_textBox2 .s_title { font-size:18px;}
	.conbox3{margin:0 5%;}
	.con_textBox3 .cate{width:100%; margin:0;text-align:left}
	.con_textBox3 .con_title, .con_textBox3 .con_txt{text-align:left; margin-left:0; width:100%}
	.morebt3, .morebt4{margin:10% 0; padding:3.5% 0; width:200px}
	.con_textBox2 .morebt2, .con_textBox1 .morebt1{width:200px;padding:3.5% 0; }
	.cd1, .cd2, .cd3, .cd4, .cd6, .cd7{display:none}
	.ytb_bt{left:42%}
	.ytb_bt img{width:70%}
	.scrollcon_area{margin:15% 5% 10% 5%;}
	.con_textBox4 .cate{width:100%;margin:0;text-align:left}
	.con_textBox4 .con_title{text-align:left; margin-left:0}
	.slide_left, .slide_right { position:relative; width:50%; float:left;margin-bottom:30%}
	.con_textBox4 .con_txt{margin-left:0}
	.conBox_event_bottom {display:none}
	.conbox5{padding-top:5%}
	.con_textBox5 { width:100%; float:left; margin-top:5%; margin-left:5% }
	.conbox5_img { width:100%; float:left; }
	.morebt5{margin:10% 0; padding:5% 0; width:200px;}
	footer .ft_right{width:100%; float:none;margin:3% auto}
	footer .ft_left{width:70%;float:none;margin:3% auto}
	footer .ft_center p{font-size:10px; line-height:180%}
}
@media screen and (max-width:375px) {
	.logo{font-size:18px;top:7%;left:-2.5%}
	.top_right span{font-size:10px}
	.top_right .menu{right:18%}
	.address{font-size:7px}
	.vol{font-size:11px}
	.address img{margin-left:7%}
	.visual_mov{width:85%;height:550px}
	#videobcg {width:330%; height:100%; opacity:0.8;overflow:hidden;position:absolute;left:-90%;}
	.main_title{font-size:38px;top:36%}
	.txt_small{right:-165%; top:-60%}
	.txt_big{top:130%}
	.cd2{top:44%}
	.cd3{top:53%}
	.con_textBox1 .cate {width:47%;font-size:16px;}
	.con_textBox1 .con_title {width:90%}
	footer .ft_right{width:100%;}
	footer .ft_left{width:70%;font-size:13px}
}
@media screen and (max-width:360px) {
	footer {width:94%;margin:0% 3%;}
}