@charset "utf-8";
/* CSS Document */

#main_Wapper{position:relative; border-top:1px solid #dfdfdf}
#main_Wapper:after{content:''; display:block; clear:both;}

button{cursor:pointer}

.main-topArea{width:1400px; margin:0 auto; display: flex; height: 278px;  box-sizing: border-box}
.main-topArea .main_searchArea{width:50%;  box-sizing: border-box; padding-top:35px; }
.main-topArea .main_searchArea h1 {font-size:30px; margin-bottom: 40px }
.main-topArea .main_searchArea h1 > span {color:#013392}


.searchBox{ position:relative;  margin:0 auto;  -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;box-sizing: border-box; }
.searchBox:after{content:''; display:block; clear:both;}
.searchBox .serach_sel{position:relative; margin: 10px 0 20px}
.searchBox .serach_sel:after{content:''; display:block; clear:both;}
.searchBox .serach_sel >ul > li{float:left;  }
.searchBox .serach_sel >ul > li > a {border:1px solid #d8d8d8; border-radius: 30px;padding: 3px 15px; margin-right: 10px; font-size:17px; color:#013392}
.searchBox .serach_sel >ul > li > a.select{background:#013392; color:#fff;border:1px solid #013392}
.searchBox .serach_sel >ul > li > a:hover{background:#013392; color:#fff;border:1px solid #013392}

.inputbox{ position:relative; float:left; width:100%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;}
.keyword {width:100%;height:70px !important;min-height: 70px; font-size:20px !important;  padding:0 15px;border:3px solid #013392 !important; border-radius: 15px; color:#013392 !important}
.keyword input[type='text']{padding:0 25px !important; color:#013392 }
.keyword::placeholder {color:#013392 !important; font-size:18px !important;}
.btn-search{ position:absolute; right:4px;; top:4px; width:65px;height:60px; z-index:2; cursor:pointer; color:#fff; font-size:20px;}
.btn-search img{vertical-align:middle; }

.main-topArea .noticeArea{width:48%; margin-left:2%; padding: 30px 0}
.notice-list1{ border-bottom:1px solid #f1f1f1; position:relative; overflow: hidden; padding-bottom:15px; height:75px; margin-top: 20px;}
.notice-list1 a{  text-decoration-color: #000; color:#000;}
.notice-cont-wrap .notice-tit{ font-size:17px; color:#000; height:20px;font-weight: normal;text-decoration-color: #a5b1c3;  margin-bottom: 5px;-webkit-line-clamp:1; }
.notice-cont-wrap .notice-tit a{text-overflow:ellipsis;word-wrap:break-word;overflow:hidden; display:inline-block;white-space:nowrap; width: calc(100% - 5.5rem); }
.notice-cont-wrap .notice-tit:hover{color:#000;}
.notice-cont-wrap {}
.notice-cont-wrap > p {position:relative;padding-left:15px; }
.notice-cont-wrap > p:after{position:absolute; content:''; width:4px; height:4px; background:#013392; border-radius:15px; left:0; top:10px;}
.notice-cont-wrap{ }
.notice-cont{ text-align:left; display:block; height:37px;text-overflow:ellipsis;word-wrap:break-word;overflow:hidden; color:#9a9a9a; font-size:14px; padding-left: 15px; line-height: 18px; width: 85%}


.notice-list2 .notice-cont-wrap{ margin-left:0; padding:15px 0;}
.notice-list2 .notice-cont-wrap li { position:relative; padding-left:15px; margin-bottom:6px;;text-overflow:ellipsis;word-wrap:break-word;overflow:hidden; -webkit-line-clamp:1; }
.notice-list2 .notice-cont-wrap li a{color:#7b7b7b; font-size:16px; max-height:22px;text-overflow:ellipsis;word-wrap:break-word;overflow:hidden; -webkit-line-clamp:1; display:inline-block; white-space:nowrap; width:100%;    width: calc(100% - 5.5rem);}
.notice-list2 .notice-cont-wrap li a:hover{color:#000;}
.notice-list2 .notice-cont-wrap li:after{ position:absolute; content:''; width:4px; height:4px; background:#013392; border-radius:15px; left:0; top:10px;}
.day{ display:block; color:#013392; font-size:13px; float:right;  font-style:normal}

.notice-list1 a:hover, .notice-list2 a:hover{ text-decoration:underline}



.m_inbox {position:relative; overflow: hidden}
.m_inbox > h3 {font-size:25px; font-weight: normal !important; margin: 0 0 0}
.m_inbox > h3 > span {float:right; font-size:14px;}
.m_inbox > h3 > span >a {color:#000;} .m_inbox > h3 > span >a:hover{text-decoration:underline}
section h3:after{display:none}


.main-Area{width:1400px; margin: 0 auto;}
.section_1{ background:url("../images/main/bg.png") no-repeat center; background-size: 100% 248px;background-position: 0 0; }
.section_1 .main-Area{position:relative; display:flex}
/*바로가기 통계 */
.view_box{width:62% }
/*배너*/
.rolling_bannerBox {width:38%; padding: 20px 0 0 15px; height: 398px; }
.rolling_bannerBox  .rolling_img {width:100%; height: 398px; background: #fff}


/* 배너사이즈와 위치 */
#s_banner_wrap {width:100%; position: relative;}
.banner_01 {width:100%; height:398px; background:#000}
.banner_02 {width:100%;; height:398px; background:#000}
.banner_03 {width:100%;; height:398px; background:#000}
.banner_01 img, .banner_02 img, .banner_03 img{width:100%}
#bx-pager1 {position: absolute; top:15px; right:15px;}
#bx-pager1 a{float:left; margin:0 5px;display: block; width:42px; height:5px; font-size:12px; line-height:18px; text-align:center; background:#7375a7; color:#333; border-radius:30px;}
#bx-pager1 a:hover, .bx-pager1 a:active{ background: #7375a7; color: #CCC;}

/* 사용자 페이징 - 엑티브상태에 대한 속성값 지정 */
#bx-pager1 a.active{ background: #fff; color: #CCC;}




/*아이콘*/
.bneener{ position:relative; padding:58px  50px; box-sizing:border-box; height: 247px;}
.bneener:after{content:''; display:block; clear:both;}
.bneener li{ float:left; width:25%; height:100px; position:relative;}

.bneener li span {display:block; width:71px; height:78px;}
.bneener li em{ position:absolute; bottom:-25px;  font-size:18px; color:#fff; width:100%; text-align:center }
.bneener li span.ico{ position:absolute; float:left; left:35%; top:0%; }

.ico{ position:absolute; float:left; left:50%; top:0%; }
.ico{ display:inline-block; background:url('../images/common/ico.png') ; }
.qico01{background-position:-71px 0px;transition:all .15s ease; }
.qico01:hover{background-position:0px 0px;  }
.qico02{background-position:-71px -78px; transition:all .15s ease; }
.qico02:hover{background-position:0px -78px; }
.qico03{background-position:-71px -156px;transition:all .15s ease; }
.qico03:hover{background-position:0px -156px; }
.qico04{background-position:-71px -234px;transition:all .15s ease; }
.qico04:hover{background-position:0px -234px; }
.qico05{background-position:-71px -312px;transition:all .15s ease; }
.qico05:hover{background-position:0px -312px; }

.current {margin-top:15px; height: 162px;position:relative; }
.current:after{content:''; display:block; clear:both;}
.current ul {border:1px solid #d4d4d4; height: 113px; position:relative; padding-left: 170px; margin-top: 10px;}
.current ul:after{position:absolute; content: ''; width:167px; height:131px; background:url("../images/main/current_bg.png") no-repeat; left:0; bottom:0}
.current ul li {float:left; width: 20%; text-align: center; font-size: 26px; color: #013392; font-weight: bold; padding-top: 20px}
.current ul li p{font-weight: normal; color:#000; margin-top: 5px;}

.section_2{position:relative; margin: 0 auto; width: 1400px;  padding:50px 0; height: 428px;}
.section_2  h3 {text-align:left;}
.newsletter {float:left; width: 48%; margin-right: 4%; position:relative;text-align: center}
.newsletter .prev{position: absolute; left: -12px; top: 50%;}
.newsletter .next{position: absolute; right: -12px; top: 50%;}
/* .newsletter > ul > li {display: inline-block; width: 42%;text-align: center; margin: 0 2%} */
.newsletter_li {display: inline-block; text-align: center; margin: 0 2%}
.newsBox {position:relative; overflow: hidden; width: 100%; -webkit-transition: -webkit-transform .3s;  transition: -webkit-transform .3s;  transition: transform .3s;  transition: transform .3s, -webkit-transform .3s; -webkit-box-shadow: 5px 6px 12px 1px rgb(25 48 88 / 10%);box-shadow: 5px 6px 12px 1px rgb(25 48 88 / 10%);  margin-top: 15px;}
.newsBox > p{position:absolute; background: rgba(0,0,0,0.7); width: 100%;  height: 45px; bottom:0; left:0; color:#fff; text-align: center; line-height: 45px; font-size: 19px}
.newsBox:hover{-webkit-transform: translateY(-10px);  -ms-transform: translateY(-10px);
  transform: translateY(-10px);}
.newsBox img {width:100%;}

/*교육/워크숍/워킹그룹*/
.informing{float:left; width: 48%; position:relative; display: flex}
.informing .event { height:410px;  border:1px solid #dddddd; border-radius: 15px; width:330px; margin-right:20px; padding:20px 15px; position:relative; overflow: hidden}
.informing .event h3, .WorkingGroup h3{color:#013392}
.informing .event > ul { margin-top: 15px;border-bottom:1px solid #ddd; height: 136px;}
.informing .event > ul:last-child {border-bottom:0}
.informing .event > ul > li {text-overflow: ellipsis;    word-wrap: break-word;    overflow: hidden; }
.informing .event > ul > li >a {text-overflow: ellipsis;    word-wrap: break-word;    overflow: hidden;    display: inline-block;
    white-space: nowrap;-webkit-line-clamp: 1; font-size:16px; color:#000; font-weight: bold; margin-bottom: 15px;    width: calc(100% - 1.0rem);}
.informing .event > ul > li >a:hover{text-decoration:underline}
.informing .event > ul > dl {position:relative; overflow: hidden; width: 100%; color:#646464 }
.informing .event > ul > dl > dt {float:left; width: 25%;}
.informing .event > ul > dl > dd {float:left; width: 75%;}
.informing .event ul > p{color:#dd0b10; margin: 15px 0}

.informing .WorkingGroup{height:410px;  border:1px solid #dddddd; border-radius: 15px; width:330px; padding: 15px ; position:relative}
.informing .WorkingGroup .prev{position: absolute; left: -15px; top: 50%;}
.informing .WorkingGroup .next{position: absolute; right: -15px; top: 50%;}
.informing .WorkingGroup .working_curr {position:relative; margin: 20px 0}
.informing .WorkingGroup .working_curr > ul > li {display:inline-block;background: #dddddd; color:#000; border-radius: 15px; padding: 5px 15px; font-family: 'scDream5'; margin-top:20px;}
.informing .WorkingGroup .working_curr > ul > .end {position:absolute; right:0; width: 60px; height: 60px; border: 2px dashed #dd0b10; border-radius: 50%; line-height: 60px; text-align: center; top:0; animation: rotate_image 10s linear infinite;transform-origin: 50% 50%}
.informing .WorkingGroup .working_curr > ul > .ing {position:absolute; right:0; width: 60px; height: 60px; border: 2px dashed #013392; border-radius: 50%; line-height: 60px; text-align: center; top:0; animation: rotate_image 10s linear infinite;transform-origin: 50% 50%}  
@keyframes rotate_image{
    100% {transform: rotate(360deg);}
}
.informing .WorkingGroup .working_curr > ul > .r {position:absolute; right:0px; top:20px; color:#dd0b10; width:60px; text-align:center}
.informing .WorkingGroup .working_curr > ul > .b {position:absolute; right:0; top:20px; color:#013392;width:60px; text-align:center}

.informing .WorkingGroup .WokingGroup_ul > dl {margin:0 20px;  position:relative; min-height:174px;}
.informing .WorkingGroup .WokingGroup_ul > dl > dt {height: 60px; margin-bottom: 15px;text-overflow: ellipsis;    word-wrap: break-word;    overflow: hidden; padding-top: 6px }
.informing .WorkingGroup .WokingGroup_ul > dl > dt > a{color:#000; font-size:16px; overflow:hidden; line-height:20px;white-space:normal;font-weight:normal;text-overflow:ellipsis;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;}
.informing .WorkingGroup .WokingGroup_ul > dl > dt > a:hover{text-decoration:underline}

.informing .WorkingGroup .WokingGroup_ul > dl > dd > span {border:1px solid #ddd; padding: 2px 5px; margin-right: 5px; display: inline-block}
.informing .WorkingGroup .WokingGroup_ul > dl >  p{ margin-top:15px; overflow:hidden; line-height:20px;white-space:normal;font-weight:normal;text-overflow:ellipsis;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:keep-all;}
.group_btn { width:100%;  text-align: center; margin: 25px 0}
/*사진 삭제로 수정*/
/*.informing .WorkingGroup .WokingGroup_ul > dl > dt:after {position:absolute; content: ''; width: 56px; height: 55px; background: url("../images/main/working_icon.png") no-repeat; left:0; top:0}
.informing .WorkingGroup .WokingGroup_ul > dl > dt { padding-left:60px; height: 60px; margin-bottom: 15px;text-overflow: ellipsis;    word-wrap: break-word;    overflow: hidden; padding-top: 6px }*/
.section_3{position:relative; margin: 0 auto; width: 1400px;  padding:50px 0; overflow: hidden}
.main_bbs{position:relative; overflow: hidden}
.main_bbs > span {position:absolute; right:0; }
.main_bbs > span > a {color:#000;}.main_bbs > span > a:hover{text-decoration:underline}
.main_bbs > ul > li { float:left; position:relative; display: inline-block; margin-right: 45px;}
.main_bbs > ul > li:after{position:absolute; content:''; width: 1px; height: 20px; background: #919191; right:-25px; top:5px }
.main_bbs > ul > li:last-child:after{display:none}
.main_bbs > ul > li >a {font-size:24px; color:#919191}
.main_bbs > ul > li >a.select{color:#013392; text-decoration: underline}
.main_bbs > ul > li >a:hover{color:#013392; text-decoration: underline}


.main_bbsListbox {position:relative; overflow: hidden; margin-top: 50px;}
/*국가표준위원회(전문)*/
.main_bbsListbox .main_bbsListbox_sp > dl {width:33.33%; float:left; border-right:1px solid #ddd; padding: 20px 20px; position:relative}
.main_bbsListbox .main_bbsListbox_sp > dl:last-child{border-right:0}
.main_bbsListbox .main_bbsListbox_sp > dl > p {display:inline-block; border: 1px solid #ddd; border-radius: 30px; color:#013392; min-width: 70px; text-align: center; line-height: 30px; font-weight: bold; font-size: 16px;}

.main_bbsListbox .main_bbsListbox_sp > dl > .r {display:inline-block; border: 1px solid #ddd; border-radius: 30px; color:#dd0b10; min-width: 70px; text-align: center; line-height: 30px; font-weight: bold; font-size: 16px;}

.main_bbsListbox .main_bbsListbox_sp > dl > dt{margin:15px 0}
.main_bbsListbox .main_bbsListbox_sp > dl > dt > a {color:#000; font-size: 17px;z-index:100;overflow:hidden; line-height:20px;white-space:normal;font-weight:normal;text-overflow:ellipsis;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;}
.main_bbsListbox .main_bbsListbox_sp > dl  > dd {color:#013392}

.main_bbsListbox .main_bbsListbox_sp > dl:after{ content:" "; width:0px; height:0px; position:absolute; transition:all 1s;  opacity:0; }
.main_bbsListbox .main_bbsListbox_sp > dl:before{ content:" "; width:0px; height:0px; position:absolute; transition:all 1s; opacity:0; }
.main_bbsListbox .main_bbsListbox_sp > dl:after{ top:0px; left:0px; border-top:2px solid #013392; }
.main_bbsListbox .main_bbsListbox_sp > dl:before{ bottom:0px; right:0px; border-bottom:1px solid #013392; }
.main_bbsListbox .main_bbsListbox_sp > dl:hover:before{ width:100%; opacity:1; }
.main_bbsListbox .main_bbsListbox_sp > dl:hover:after{ width:100%;opacity:1; }

/*국가표준위원회(기술)*/
.main_bbsListbox .main_bbsListbox_te > dl {width:33.33%; float:left; border-right:1px solid #ddd; padding: 20px 20px; position:relative}
.main_bbsListbox .main_bbsListbox_te > dl:last-child{border-right:0}
.main_bbsListbox .main_bbsListbox_te > dl > p {display:inline-block; border: 1px solid #ddd; border-radius: 30px; color:#013392; min-width: 70px; text-align: center; line-height: 30px; font-weight: bold; font-size: 16px;}

.main_bbsListbox .main_bbsListbox_te > dl > .r {display:inline-block; border: 1px solid #ddd; border-radius: 30px; color:#dd0b10; min-width: 70px; text-align: center; line-height: 30px; font-weight: bold; font-size: 16px;}

.main_bbsListbox .main_bbsListbox_te > dl > dt{margin:15px 0}
.main_bbsListbox .main_bbsListbox_te > dl > dt > a {color:#000; font-size: 17px;z-index:100;overflow:hidden; line-height:20px;white-space:normal;font-weight:normal;text-overflow:ellipsis;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;}
.main_bbsListbox .main_bbsListbox_te > dl  > dd {color:#013392}

.main_bbsListbox .main_bbsListbox_te > dl:after{ content:" "; width:0px; height:0px; position:absolute; transition:all 1s;  opacity:0; }
.main_bbsListbox .main_bbsListbox_te > dl:before{ content:" "; width:0px; height:0px; position:absolute; transition:all 1s; opacity:0; }
.main_bbsListbox .main_bbsListbox_te > dl:after{ top:0px; left:0px; border-top:2px solid #013392; }
.main_bbsListbox .main_bbsListbox_te > dl:before{ bottom:0px; right:0px; border-bottom:1px solid #013392; }
.main_bbsListbox .main_bbsListbox_te > dl:hover:before{ width:100%; opacity:1; }
.main_bbsListbox .main_bbsListbox_te > dl:hover:after{ width:100%;opacity:1; }

/*국제표준화활동 보고서*/
.main_bbsListbox .main_bbsListbox_report > dl {width:33.33%; float:left; border-right:1px solid #ddd; padding: 20px 20px; position:relative}
.main_bbsListbox .main_bbsListbox_report > dl:last-child{border-right:0}
.main_bbsListbox .main_bbsListbox_report > dl > p {display:inline-block; border: 1px solid #ddd; border-radius: 30px; color:#013392; min-width: 70px; text-align: center; line-height: 30px; font-weight: bold; font-size: 16px;}
.main_bbsListbox .main_bbsListbox_report > dl > dt{margin:15px 0}
.main_bbsListbox .main_bbsListbox_report > dl > dt > a {color:#000; font-size: 17px;z-index:100;overflow:hidden; line-height:20px;white-space:normal;font-weight:normal;text-overflow:ellipsis;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;}
.main_bbsListbox .main_bbsListbox_report > dl  > dd {color:#013392}

.main_bbsListbox .main_bbsListbox_report > dl:after{ content:" "; width:0px; height:0px; position:absolute; transition:all 1s;  opacity:0; }
.main_bbsListbox .main_bbsListbox_report > dl:before{ content:" "; width:0px; height:0px; position:absolute; transition:all 1s; opacity:0; }
.main_bbsListbox .main_bbsListbox_report > dl:after{ top:0px; left:0px; border-top:2px solid #013392; }
.main_bbsListbox .main_bbsListbox_report > dl:before{ bottom:0px; right:0px; border-bottom:1px solid #013392; }
.main_bbsListbox .main_bbsListbox_report > dl:hover:before{ width:100%; opacity:1; }
.main_bbsListbox .main_bbsListbox_report > dl:hover:after{ width:100%;opacity:1; }

.quickmenu {position:absolute; right:0; top:5%; height: auto; width: 110px; min-height:215px; z-index: 100 }
.quickmenu > p {width:73px; height: 73px; background: #013392; border-radius: 50%; text-align: center; line-height: 73px; margin-left: 25px;}
.quickmenu > ul {background:#2c3442; padding: 15px; border-bottom-left-radius: 15px;border-top-left-radius: 15px }
.quickmenu > ul > li { display:inline-block; padding: 15px 0px; border-bottom: 1px dotted #515e75 }
.quickmenu > ul > li:last-child{border-bottom:0}
.quickmenu > ul > li > a{color:#fff;}
.quickmenu > ul > li > a:hover{text-decoration:underline}

@media all and (max-width:1200px)
{
	#main-wrap{min-width:340px;}
	#main-wrap #header {position:relative}
	.section_1 {height:auto}  

}


@media all and (max-width:1000px)
{
	
	
}

@media all and (max-width:860px)
{

}

@media all and (max-width:800px)
{
	

	
}

@media all and (max-width:640px)
{   

	
	
	
}

@media all and (max-width:480px)
{   
	#main_Wapper {width:100%}
	.section_1 {background-size: 100% 200px;}
	.section_1,  .section_3{width:100%;}
	.main-topArea {position:relative; ; display: block; margin-top: 69px;  height: auto; width:100%;}
	.main-topArea .main_searchArea {width:100%; padding: 30px 15px 15px 15px; background: #013392}
	.searchBox .serach_sel >ul > li > a{color:#fff;}
	.main-topArea .main_searchArea h1{font-size:22px}
	.main-topArea .main_searchArea h1, .main-topArea .main_searchArea h1 > span{color:#fff;}
	.searchBox .serach_sel >ul > li{margin-bottom:15px;}
	.searchBox .serach_sel >ul > li > a{font-size:.88rem}
	.searchBox .serach_sel >ul > li > a:hover{background:#fff; color:#013392; border:1px solid #013392}
	.searchBox .serach_sel >ul > li > a.select {background:#fff; color:#013392; border:1px solid #013392}
	.main-topArea .noticeArea {width:100%;  margin-left: 0; padding: 30px 15px}
	.notice-list2 .notice-cont-wrap{padding:15px 0 0 }
	.main-topArea .main_searchAream, .view_box {width:100%; }
	.section_1 .main-Area{display:block; width: 100%; overflow: hidden}
	.keyword {font-size:17px !important}
	.m_inbox > h3{font-size:20px}  .m_inbox > h3 > span {font-size:.78rem}
	
	.bneener {padding:28px 15px; height: 200px;}
	.bneener li span.ico{left:20%}
	.bneener li em {font-size:.75rem}
	
	.current{padding:0 15px; margin-top: 40px;}
	.current ul:after {display:none}
	.current ul {padding-left:0; height: 85px}
	.current ul li{font-size:.98rem}
	
	.rolling_bannerBox {width:100%; padding: 20px 15px;}
	.rolling_bannerBox img {height:100%}
	
	.section_2{width:100%;padding: 40px 15px 0 15px; height: auto}
	.newsletter {float:none; width: 100%; margin-right:0}
	.informing{width:100%; display: block; margin: 40px 0}
	.informing .event{width:100%;}
	.informing .WorkingGroup {width:100%; margin-top: 40px;}
	
	.section_3{width:100%;padding: 40px 15px 40px 15px; height: auto}
	.main_bbs > ul > li >a {font-size:1.2rem}
	.main_bbsListbox > div > dl {width:100% !important; border-right:0 !important; border-bottom:1px solid #ddd}
	
	.quickmenu {display:none !important;}
	
	.main_bbs > ul > li {margin-right:25px; margin-bottom:10px;}
	.main_bbs > ul > li:after {right:-15px; top:0}
	.main_bbsListbox {margin-top:30px;}
	
}