@charset="utf-8";
html{font-family: 'Noto Sans KR', sans-serif; font-size:62.5%; color:#222;}
img{max-width:100%;}
i{vertical-align: middle;}
sup{font-size:1.1rem; vertical-align: top;}
/* font-size default set 62.5% // rem = 0.1 = 1px */

@keyframes sliding {
  0% {
      right:4px;
  }
  50% {
    right:8px;
  } 
  100% {
    right:4px;
  }     
}
/*common*/
/* clearfix */
.clearfix{*zoom:1;}
.clearfix:after{content: ''; display: block; clear: both;}
/* float */
.f-left{float:left !important;}
.f-right{float:right !important;}
/* alignset */
.t-al-center{text-align: center !important}
.t-al-left{text-align: left !important}
.t-al-right{text-align: right !important}
.t-al-justi{text-align: justify !important}
/*display*/
.dis-block{display:block;}
.dis-inblock{display:inline-block;}
.dis-inline{display:inline;}
/*vertical-align*/
.v-al-top{vertical-align: top !important}
.v-al-mid{vertical-align: middle !important;}
.v-al-bot{vertical-align: bottom !important;}
/* skip to contents */
#skip a{display:block; position:absolute; top:-9999em; left:0; width:100%; padding:20px 0 ;background-color:#2f3952; text-align:center;z-index:1000;  color:#fff; text-decoration: none;}
#skip a:hover, .skip a:focus{top:0;}
/*hide*/
.hide{font-size:0; text-indent: -9999em}


#container{position:relative; width:100%; height:100%;}
.bg{display:none; position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.7); z-index: 90}
/**** mainpage ****/
/*header*/
#header {width:100%; background:#353030; border-bottom:1px solid #252020; position: relative;}
#logoTop{position: absolute;  top:4px; left:50%; transform: translateX(-50%);}
#logoTop a{display:block; width:170px; height:42px; background: url(../img/logokit.png) no-repeat; background-position:0 -208px;}
#logoTop .logo_en{display:block; width:115px; height:37px; background: url(../img/logokit.png) no-repeat; background-position:-5px -488px;}
#navi{display:none; position:fixed; top:0; left:0; width:300px; height:100%; background:#fff; box-shadow: 0 5px 10px rgba(0,0,0,.5); overflow-y: scroll; z-index: 100}
#menuheader{width:300px; height:51px; background:#000; position: fixed; top:0; left:0; z-index: 101}
#menuheader .close{position: absolute; top:50%; right:14px; transform: translateY(-50%);}
#menuheader .close i{font-size:2.4rem; color:#ecebf0;}
/*menu*/
#mainmenu {position:absolute; top:220px; left:0; width:100%; margin-bottom:88px;}
#mainmenu>li{border-bottom:1px solid #ccc; margin-bottom:-1px;}
#mainmenu>li>a{display:block; padding:10px; line-height: 1.3; position: relative; border-bottom:1px solid #333; color:#353030;}
#mainmenu li a h2{font-size:1.8rem; font-weight: 600;}
#mainmenu li a h2 span{ display:none; font-size:1.2rem; font-weight: 400; color:#ccc;}
#mainmenu>li>a>i{display:none; position: absolute; top:50%; right:16px; transform: translateY(-50%); font-size:2.4rem; color:#353030;}
#mainmenu>li>a>i{display:none; position: absolute; top:50%; right:16px; transform: translateY(-50%); font-size:2.4rem; color:#353030;}
.submenu .bg{display:none;}
.submenu>ul>li>a{display:block; padding:10px; font-size: 1.4rem; position: relative; color:#353030; background:#ecebf0;border-bottom:1px solid #ccc;}
.submenu>ul>li:last-child>a{border-bottom:0;}
.submenu>ul>li>a>i{position: absolute; top:50%; right:10px; transform: translateY(-50%); font-size:1.4rem; }
.insub li{border-bottom:1px solid #333;}
.insub li a{display:block; background:#555; font-size:1.4rem; color:#fff; padding:10px;}
/*account*/
#account{width:300px; border-bottom:1px solid #ccc; position: fixed; top:51px; left:0; z-index: 101}
#account .acc_list{height:30px; line-height: 30px; background:#222222; text-align: center}
#account .acc_list li{display:inline-block;}
#account .acc_list li span{display:inline-block; width:1px; height:10px; background:#ecebf0; margin:0 8px;}
#account .acc_list li:last-child span{display:none;}
#account .acc_list li a{color:#ecebf0; font-size:1.3rem;}
#container.main #account .mainhide{display:none !important; font-size:0;}
.mohide{display:none !important; font-size:0;}
#account .login{width:100%; height:140px}
.afterlogin p{font-size:1.4rem; padding:0 0 7px;}
.afterlogin p strong{font-weight: 500; color:#0075c0;}
.backboard{background:#ecebf0;}
.login{padding:20px; text-align: center;}
.login .col-items{margin-bottom:4px;}
.login .col-items label{display:none;}
.login .col-items .inp-text{width:220px;}
.addr-top{width:300px; height:88px; padding:6px; position: fixed; left:0; bottom:0; border-top:1px solid #ccc;}
.addr-top ul li{margin-bottom:6px;}
.addr-top ul li:last-child{margin-bottom:0;}
.addr-top ul li p{background:#353030; padding:10px; font-size:1.4rem; color:#fff; text-align: center; border-radius: 6px;}
.addr-top ul li p span{display:inline-block; margin:0 6px;}

/*mobile hamberger button*/
#mobile a {display:block; width:50px; height:50px; background:#000; padding:12px;}
a.hamberger span{display:block; width:18px; height:2px; background: #fff; margin:5px auto; }
/* all_menu */
#mobile a {display:block; width:50px; height:50px; background:#000; padding:12px;}
a.hamberger span{display:block; width:18px; height:2px; background: #fff; margin:5px auto; }
#all_menu_layer{display:none; position: fixed; top:0; left:0; bottom:0; width:100%; background:#eee; padding:10px; z-index:500; overflow-y:scroll; animation-name: moveall;
      animation-duration: 0.3s;
      animation-iteration-count:1;}
#all_menu_layer .submenu{display:block; border-top:2px solid #333; width:100%;}
#all_menu_layer .submenu li{display:block;width:100%; border-right:0; border-bottom:1px solid #ededed;}
#all_menu_layer .submenu li a{display:block;width:100%; height:auto;text-align: left; padding:6px; line-height: 1.3; color: #666; font-size:16px;}
#all_menu_layer .submenu li a:hover{background:#f4f4f4;}
#all_menu_layer .item{display:block; width:49%; float:left; margin-right:2%;}
#all_menu_layer .item:nth-child(even){margin-right:0;}
#all_menu_layer .item.layer2{margin:0;}
#all_menu_layer .item .all_title{display:inline-block; font-size:20px; margin-bottom: 5px;}
#all_menu_layer .item .all_title:first-of-type{margin-top:0;}
.closearea{display:block; width:100%; height:30px; position:relative}
.menu_close{position:absolute; top:0; right:0; background:transparent !important; color:#333; font-size: 24px;}
.layer5 {position: absolute; left: 45%; top: 450px}
.layer5 ul li {text-align: center;}
.layer5 ul li+li {margin-top: 20px;}
.layer5 ul li a {font-size: 16px; color: #333;}
/*quick menu*/
#quick ul li{display:block; float:left; width:50%; height:80px; overflow: hidden;}
#quick ul li a{display:block; width:100%; height:100%; position:relative; font-size:2rem; text-align: center; color:#fff; text-shadow: 0 3px 0 rgba(0,0,0,.3)}
#quick ul li a:hover {
  -ms-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); 
  -ms-transition: transform .5s; -moz-transition: transform .5s; -webkit-transition: transform .5s; transition: transform .5s }
#quick ul li:nth-child(1) a{background: #f3976a url(../img/quick01.png) no-repeat 50% 50%;}
#quick ul li:nth-child(2) a{background: #9e81bf url(../img/quick02.png) no-repeat 50% 50%;}
#quick ul li:nth-child(3) a{background: #00abe7 url(../img/quick03.png) no-repeat 100% 50%;}
#quick ul li:nth-child(4) a{background: #0075c0 url(../img/quick04.png) no-repeat 100% 100%;}
#quick ul li a div{width:130px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
#quick ul li a div strong{font-weight: 800; letter-spacing: -2px;}
#quick ul li a div i{display:block; margin-bottom:10px;}
/*visual*/
#visual img{width:100%;}
/*latest*/
#boards .latest{width:100%; border-bottom:1px solid #ccc;}
#boards .latest .inpadding{padding:16px}
.latest strong{font-size:2.2rem; font-weight: 700; color:#634189; letter-spacing: -1px}
.latest strong .more{float:right;}
.latest strong .more a{font-weight:400; color:#634189;}
.latest ul{margin-top:14px;}
.latest ul li{font-size:1.3rem; margin-bottom:10px;}
.latest ul li:last-child{margin-bottom:0;}
.latest ul li:after{content:''; display: block; clear: both;}
.latest ul li a, .latest ul li i {float:left;}
.latest ul li span{float:right;}
.latest ul li a{display:block; width:70%; color:#222; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.latest ul li a:hover, .latest ul li a:active, .latest ul li a:focus{color:#237bb4;}
.latest ul li i{vertical-align: top; margin-right:4px; color:#c65a41;}
/*more common*/
.more{font-size:1.4rem;}
/*publish*/
.latest ul li span{font-size:1rem; color:#aaa;}
#publish{
  position: relative;
  padding:8px 0;
  height:60px;
  bottom:-840px;
}
/*footer*/
#policy{width:100%; background:#252020;}
#policy .sizing > ul{text-align: center; padding:8px 0;}
#policy .sizing > ul >li{display:inline-block;}
#policy .sizing > ul >li > span{display:inline-block; width:1px; height:12px; background:#fff; margin:0 6px; vertical-align: top} 
#policy .sizing > ul >li > a{color:#fff; font-size:1.2rem;}
#policy .sizing > ul >li#familysite{display:block; margin-top:6px}
#policy .sizing > ul >li#familysite select{width:300px; height:26px; line-height: 26px; outline: 0; border:0;}
#footer > div:not(#policy){padding:8px 0;}
.dropdown{
    position: relative;
    display: inline-block;
    font-size: 1.4rem;
}
.dropdown input[type=checkbox]{
    display: none;
}
.dropdown label{
    display: inline-block;
    width:300px; height:26px;
    padding:0 8px;
    line-height: 26px;
    cursor: pointer;
    text-align: left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 2px;
    background:#fff;
    -ms-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -webkit-transition: background 0.5s;
    transition: background 0.5s;
}
.dropdown ul{
    position: absolute;
    bottom:26px;
    list-style: none;
    text-align: left;
    width: 100%;
    z-index: 1;
    margin:0;
    padding:0;
    display: none;
}
.dropdown ul li a:hover{
    background: #eee;
    color:#f3976a;
    -ms-transition: .5s;
     -moz-transition: .5s;
     -webkit-transition: .5s;
     transition: .5s;
}
.dropdown ul li a{
    padding:8px;
    background: #fff;
    color:#222;
    display:block;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    -ms-transition: .5s;
   -moz-transition: .5s;
   -webkit-transition: .5s;
   transition: .5s;
}
.dropdown ul li a i{position: absolute; top:50%; right:4px; transform: translateY(-50%);}
.dropdown ul li a:hover i{animation: sliding 1s linear infinite; }
.dropdown input[type=checkbox]:checked ~ label {
   border-radius: 0 0 2px 2px;
   background:#ecebf0;
   -ms-transition: background 0.5s;
   -moz-transition: background 0.5s;
   -webkit-transition: background 0.5s;
   transition: background 0.5s;
}
.dropdown input[type=checkbox]:checked ~ ul {
    display: block;
}
.dropdown > label:after,
.dropdown > a[role="button"]:after {
  content: "";
  float: right;
  margin: 9px 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #333;
  -ms-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}
.dropdown > [type="checkbox"]:checked + label:after,
.dropdown > ul:target ~ a:after {
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -ms-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}
#logoFoot{display:none;}
#footer address strong{display:block; width:180px; height:24px; background: url(../img/logokit.png) no-repeat; background-position: 0 -262px; margin:0 auto;}
#footer address .f_en {display:block; width:65px; height:24px; background: url(../img/logokit.png) no-repeat; background-position: 0 -530px; margin:5px auto 0 auto;}
#footer address ul{margin-top:20px; text-align: center}
#footer address ul li{font-size:1.2rem;margin-top:4px; letter-spacing: -1px}
#footer address ul li:first-child{margin-top:0;}
#footer address ul li:nth-child(3) span:nth-child(2){display:none;}
#footer address ul li#copy {margin-top:20px;}
#footer address ul li span{display:inline-block; width:1px; height:12px; background:#000; margin:0 6px; vertical-align: top;}
#footer address ul li span:last-child{display:none;}
.email{margin-top:4px;}
/*subpage*/
/*side*/
#side{width:100%;}
#side #sideheader{height:80px; background:#624188; position: relative;}
#side #sideheader h2{font-size:2.8rem;text-align: center; line-height: 1.3; color:#fff; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
#side nav{padding:10px; display:none;}
/*view*/
#viewport{width:100%; margin: 0 0 20px;}
#viewport .pagetitle{border-bottom:1px solid #333; text-align: left}
#viewport .pagetitle .inpadding{padding:10px}
#viewport .pagetitle h3{font-size:2.6rem; letter-spacing: -1px; font-weight: 600}
#viewport .pagetitle h3 span{display:block; font-size:1.2rem; letter-spacing: 1px; font-weight: normal; margin-top:4px;}
#viewport .location{display:none;}
#viewport .view{min-height:400px;}
#viewport .view img{max-width:100%;}
#viewport .view .inpadding{padding:10px;}
#viewport .view p{font-size:1.4rem; line-height:1.4;}
/*view login*/
#viewport .view .login {margin:40px 0;}
#viewport .view .login .inp-text{width:200px;}
#viewport .view .login .column{margin-bottom:6px;}
#viewport .view .btn-login {width:200px; height:38px; border-radius: 6px;
	box-shadow: 0 3px 0 rgba(0,0,0,.2) ,inset 0 18px 0 rgba(255,255,255,.1); font-weight: 800}
#viewport .view .btn-login:hover{
	box-shadow: 0 3px 0 rgba(0,0,0,.2) ,inset 0 18px 0 rgba(255,255,255,.1);}
/*innder tabs*/
.inmenus{border-bottom:1px solid #333;}
.inmenus ul li{display:inline-block; width:49%;}
.inmenus ul li a{display:block; font-size:1.4rem; padding:4px; margin:2px 0; text-align: center; color:#333; background: #f1f1f1; transition: background .7s;}
.inmenus ul li.on a{background:#0088ce; color:#fff; font-weight: 600;}
.inmenus ul li a:hover{background:#f3aa86;}
.inmenus ul li.on a:hover{background:#0b659e;}
/*board search*/
.board_search{text-align: center;}
.board_search select{width:30%; height:30px; border:1px solid #ddd;vertical-align: middle; outline: none}
.board_search select:focus{border:1px solid #0e6eb8;}
.board_search .inp-text{width:45%;height:30px; line-height:30px; border:1px solid #ddd; vertical-align: middle; outline: none}
.board_search .inp-text:focus{border:1px solid #0e6eb8}
.board_search .btn{width:22%; height:30px;}
/*board*/
.board_btns{*zoom:1; margin:10px 0;}
.board_btns:after{content: ''; display: block; clear: both;}
.board_btns .btn{float:left; display:block; width:32.5%; margin-right:1%;}
.board_btns .btn:last-child{margin-right:0;}
.board_btns.btns_bottom{text-align: right; padding:0;}
/*board-list*/
.board_list{margin:10px 0;}
.board_list ul{border-top:2px solid #333; border-bottom:2px solid #333;}
.board_list ul li{display:block;width:100%; padding:10px 0; border-bottom:1px solid #ddd; font-size:1.3rem;}
.board_list ul li:last-child{border-bottom:0;}
.board_list ul li:hover{background:#f4f4f4;}
.board_list ul li div{display:inline-block;padding:4px;}
.board_list ul li div.num{display:none;}
.board_list ul li div.subject{display:block;width:280px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.board_list ul li:not(.list_thead) div.subject{text-align: left}
.board_list ul li div i{margin-right:4px;vertical-align: middle;}
.board_list ul li div a{color:#333;}
.board_list ul li div a:hover, .board_list ul li div a:focus{color:#f27244;}
.board_list ul li.list_thead{display:none;}
.board_list ul li.list_notice{background:#edf4f8;}
.board_list ul li.list_notice:hover{background:#bbdcef;}
/*gallery*/
.board_gallery{margin:10px 0;}
.board_gallery .subject{text-align:center; display:block; max-width:100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.board_gallery ul{border-top:2px solid #333; border-bottom:2px solid #333; padding:20px 0;}
.board_gallery ul li{width:100%; text-align: center; vertical-align: middle;}
.board_gallery ul li div.subject{font-size:1.4rem; padding:8px; text-align: center;}
.board_gallery ul li div.options{text-align: left}
.board_gallery ul li a{color:#333;}
.board_gallery ul li a div.photos{overflow:hidden;  margin:0 auto;}
.board_gallery ul li a div.photos img{width:100%; transition: transform .5s;  -o-transition: transform .5s;-moz-transition: transform .5s;-webkit-transition: transform .5s;}
.board_gallery ul li a:hover div.photos img{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1); -o-transform:scale(1.1);
transition: transform .5s;  -o-transition: transform .5s;-moz-transition: transform .5s;-webkit-transition: transform .5s;}
.board_gallery ul li div.date{color:#aaa; text-align: center; font-size:11pt; padding:4px;}
.board_gallery ul li a:hover{color:#f27244;}
/*pagenate*/
.paginate{text-align:center; display:block; margin:10px 0; padding:10px 0; position: relative;}
.paginate *{text-decoration: none; font-size:1.2rem; font-weight: 600; vertical-align: middle; }
.paginate a{display:inline; padding:6px 10px; background:#f2f2f2; color:#495164;}
.paginate a:hover,
.paginate a:active,
.paginate a:focus{background:#c65a41; color:#fff;}
.paginate strong{display:inline; padding:6px 10px; background:#312d2d; color:#fff;}
.paginate span.prev{margin-right:14px;}
.paginate span.prev,.paginate span.next{position: static; background:transparent;}
.paginate span.prev a,.paginate span.next a{background: transparent; vertical-align: middle; position: relative;}
.paginate span.prev a i,.paginate span.next a i{font-size:1.4rem; position: absolute; top:50%; left:50%; transform: translate(-50%, -55%);}
.paginate span.prev a i,.paginate span.next a i{color:#333;}
.paginate span.next{margin-left:14px;}
/*board_write*/
.board_write{font-size:1.2rem;}
.board_infor{width:100%; border-top:2px solid #333; border-bottom:2px solid #333;}
.board_infor dl{display: table; width:100%; padding:6px 2px;}
.board_infor dl dt{display:table-cell;  text-align: center; vertical-align: middle;}
.board_infor dl dd{display:table-cell; vertical-align: middle;}
.board_infor dl .inp-text{width:100%; vertical-align: middle; height:28px; line-height:30px; border:1px solid #ddd; vertical-align: middle;}
.board_infor .emp_area{background:#edf4f8; padding:10px 6px;text-align: right;}
.board_write strong{display:block; width:100%; padding:10px 0; text-align: center; border-bottom: 2px solid #333}
.board_write .board_contents{min-height: 200px; height: auto; background:#ddd; border-bottom:2px solid #333; }
.addFiles{border-bottom:2px solid #333; margin-bottom:10px;}
.addFiles ul li{position: relative; padding:10px 0; border-bottom:1px dashed #ddd;}
.addFiles ul li:last-child{border-bottom:0;}
.addFiles div{float:right; width:30%; text-align: right;}
.adds,.dels{padding:0 !important; margin:0; width:30px; height:30px; line-height:0; border-radius: 4px 4px 4px 4px; vertical-align: middle; color:#fff;
box-shadow: 0 3px 0 rgba(0,0,0,.3)
}
/*파일명이 표기되는 업로드*/
.custom-file-input {
  display:block;
  position:relative;
  float:left; width:150px;
  cursor:text;}
.custom-file-input input {
  opacity:0;
  filter:alpha(opacity=0);
  display:block;
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
  font-size:2000%;
  z-index:4;
  cursor:pointer;}
/*파일명뜨는 필드모양*/
.custom-file-input span {
  display:block;
  text-align: left;
  line-height: 30px;
  height:30px; 
  overflow:hidden;
  padding-left:5px;
  color:#333;
  background:#ddd;}
/*파일업로드 버튼모양*/
.custom-file-input span + span {
position:absolute; top:0;
  left:150px; text-align: center;
  right:0; padding-left: 0;
  color:#fff;
  width:65px;height:30px; background:#0e6eb8; -webkit-transition: background-color 0.5s;transition:background-color 0.5s;}
.custom-file-input span + span:hover{background:#38a5f8;}
.custom-file-input span + span:active{outline: none;}
/* Dora the Explorer */
.custom-file-input input::-ms-value {display:none}
.custom-file-input input::-ms-browse {
  display:block;
  margin:0;
  padding:0;
  cursor:inherit;}
/*board view*/
.board_view {font-size:1.3rem;}
.board_view .board_infor dl{border-bottom:1px solid #ddd; padding:0;}
.board_view .board_infor dl:last-child{border-bottom:0;}
.board_view .board_infor dl dt{border-right:1px solid #ddd; padding:8px 0;}
.board_view .board_infor dl dd{width:80%;padding:10px 6px; line-height: 1.3}
.board_view .board_infor dl .inp-text{width:100%; vertical-align: middle; height:28px; line-height:30px; border:1px solid #ddd; vertical-align: middle;}
.board_view .board_infor .emp_area{background:#edf4f8; padding:10px 6px;text-align: right;}
.board_view .board_contents{min-height: 200px; height: auto; border-bottom:2px solid #333; margin-bottom:10px;}
.board_view .board_contents img{width:100%; display:block;}
.board_view .board_contents div{padding:10px 0;}
.attetch_files{padding:0 !important; word-break: break-all; line-height: 1.4;}
.attetch_files ul li{border-bottom:1px dashed #ccc;}
.attetch_files a{display:block; color:#333; background:#f1f1f1; padding:4px;}
.attetch_files a i{margin-right:5px; vertical-align: middle;}
/*custom margin set*/
.mgt-10{margin-top:10px;}
.mgt-20{margin-top:20px;}
.mgt-30{margin-top:30px;}
.mgt-50{margin-top:50px;}
.mgl-10{margin-left:10px;}
.mgl-20{margin-left:20px;}
.mgr-10{margin-right:10px;}
.mgr-20{margin-right:20px;}
.mgb-10{margin-bottom:10px;}
.mgb-20{margin-bottom:20px;}
/*column set*/
.columntitle{font-size:2.2rem; font-weight: 600;}
.rowtitle{font-size:1.8rem; font-weight: 500;}
.subtitle{font-size:1.7rem; font-weight: 500;}
.row{margin-bottom:20px;}
.row:last-child{margin-bottom:0;}
.row.row-1{width:100%;}
.row.row-2{width:49%; display:inline-block;}
.row.row-3{width:32%; display:inline-block;}
.row p{font-size:1.4rem; line-height: 1.4}
.sign{}
/*join*/
.provision{padding:10px; border: 1px solid #ccc; border-radius:0 0 10px 10px}
.provtitle{display:block; padding:10px; font-size:1.6rem; color:#fff; background: #312d2d; border-radius: 10px 10px 0 0}
.agreement{margin-top:10px; padding:20px 0 10px; font-size:1.4rem; border-top:1px dashed #ccc;}
.scroll{height:300px;}
/*inp stat*/
.inp-text{height:26px; line-height:26px; background:#fff; border:1px solid #ccc; text-indent: 4px; outline: none}
.inp-text:focus{outline: none; border:1px solid #30b9e9;}
.inp-text.full{width:100%;}
.inp-text.harf{width:50%;}
.inp-text.triple{width:33%;}
.inp-text.basic{width:300px;}
.inp-text.number{width:120px;}
/* button*/
a.btn{display:inline-block; text-align: center;}
.btn-acn{padding:14px; font-size:2rem !important;}
.btn-normal{min-width:100px; height:36px; line-height: 36px}
.btn-form{min-width:80px; height:26px; line-height: 26px;}
.btn{border:0; cursor: pointer; font-family: 'Noto Sans KR', sans-serif; transition: background 0.5s, color 0.5s; font-size:1.5rem; font-weight: 500; background: transparent; vertical-align: middle; outline: none}
.btn:hover{transition: background 0.5s, color 0.5s;}
.btn i{vertical-align: top;}
.btn-txt:hover{color:#0088ce;}
/*button stat*/
.btn-login{width:220px; height:38px; line-height: 38px; text-transform: uppercase; border-radius: 6px; 
  box-shadow:0 3px 0 rgba(0,0,0,.2), inset 0 22px 0 rgba(255,255,255,.2); font-weight: 800; position: relative; top:-1;
}
.btn-login:active{top:2px; box-shadow:inset 0 18px 0 rgba(255,255,255,.2);}

/* button color */
.btn-black{background: #312d2d; color:#dbdade;}
.btn-black:hover{background:#624188; color:#f3f9ff;}
.btn-blue{background: #0088ce; color:#fff;}
.btn-blue:hover{background:#1ec2eb;}
.btn-orange{background:#e95305; color:#fff;}
.btn-orange:hover{background:#d70319;}
.btn-pink{background: #ea387f; color:#fff;}
.btn-pink:hover{background:#f26da2;}
.btn-red{background: #bc0a06; color:#fff;}
.btn-red:hover{background:#e95305;}
.btn-navy{background: #1c3380; color:#fff;}
.btn-navy:hover{background:#1ec2eb;}
.btn-puple{background: #624188; color:#fff;}
.btn-puple:hover{background:#9782b5;}
/* font custom color */
.font-blue{color:#0088ce;}
.font-orange{color:#e95305;}
.font-pink{color: #ea387f;}
.font-red{color: #bc0a06;}
.font-navy{color: #1c3380;}
.font-puple{color: #624188;}
/*layerpopup*/
.layerpopup{position:fixed; top:0; left:0; right:0; bottom:0; z-index: 600}
.layerpopup .pop-wrap{position: absolute; top:50%; left:50%; width:90vw;background: #fff; z-index: 700; overflow:hidden;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
.layerpopup .bg{display:block; position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.6); }
.popup_title{background:#312d2d; width:100%; height:36px; line-height: 36px; padding:0 0 0 10px; position: relative;}
.popup_title h3{font-size:1.6rem; font-weight: 600; color:#fff; width:280px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis;}
.close{position: absolute; top:50%; right:6px; width:24px; height:24px; text-align: center; line-height: 24px; color:#fff; 
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%); 
transform: translateY(-50%);}
.close i{font-size: 2rem;}
.layerpopup .scroll{height:300px;}
.layerpopup .scroll .column{padding:10px;}
.layerpopup>.inp-text{width:160px;}
.day-close{height:30px; position: relative; background:#ccc;}
.day-close *{vertical-align: middle;}
.day-close .check{position: absolute; top:50%; left:0; transform: translateY(-50%); font-size:1.4rem;}
.day-close .close{width:50px; background:#312d2d; font-size:1.4rem; height:auto; right:2px; border-radius: 8px}
/*modalpopup*/
.modalpopup{position:fixed; top:0; left:0; right:0; bottom:0; font-size:1.8rem; z-index: 600;}
.modalpopup .columntitle + .row{margin-top:30px;}
.modalpopup .row{margin-top:10px;}
.modalpopup .row p{ font-size:1.8rem; }
.modalpopup .bg{display:block; position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.6); }
.modalpopup .pop-wrap{position: absolute; top:50%; left:50%; width:80vw;background: #fff; z-index: 700; overflow:hidden;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
.modalbox{padding:20px 10px; min-height:100px; max-height: 300px}
.modalbtn{text-align: center; padding:10px;}

/*popup tbl*/
.popuptbl{width:100%; border-top:2px solid #333; border-bottom:2px solid #333; text-align: center;}
.popuptbl th, .popuptbl td{padding:10px;vertical-align: middle; font-size:1.4rem;}
.popuptbl thead th,.popuptbl thead td{background:#84965b; color:#fff;}
.popuptbl tbody th,.popuptbl tbody td{border-bottom:1px solid #ddd; background:#f4f4f4; }
.popuptbl tbody th{border-right:1px solid #ddd;}
.popuptbl tbody td{text-align: left}
.popuptbl tbody td .inp-text{width:100%;}

/* icon align list*/
.icon-list {font-size:1.4rem;}
.icon-list li{position: relative; padding-left:24px; margin:4px 0;}
.icon-list li i, .icon-list li span{
  position: absolute; top:0; left:0;}
.icon-list li a{color:#222;}
.icon-list li i{color:#f3976a;}
.icon-list li a:hover{text-decoration: underline; color:#eb642a;}

/*join form*/
.join-form *{vertical-align: middle;}
.join-form {font-size:1.4rem;}
.join-form .columntitle{padding:6px 0; margin-bottom:10px; color:#0088ce; border-bottom:3px solid #0088ce;}
.join-form .columntitle i{vertical-align: bottom;}
.join-form label{font-size:1.6rem; margin-bottom:4px;}
.join-form .column{margin-bottom:10px;}
.join-form .column:last-child{margin-bottom:0;}
.join-form .column .row{margin:0 0 6px; *zoom:1;}
.join-form .column .row:after{content: ''; display: block; clear: both;}
.join-form .column .row .tbl{display:table; width:100%;}
.row .tbl .inp-text, .row .tbl span, .row .tbl select{display:table-cell;}
.row .tbl .inp-text + span{display:table-cell; width:5%; text-align: center;}
.row .clearfix span + select{width:45% !important;}
.row .clearfix span{float:left; width:6%; text-align: center;}
.join-form .inp-text{width:100%;}
.join-form .inp-text.harf{width:50% !important;}
.join-form .clearfix .inp-text.harf, .join-form .clearfix select {width:49% !important; float:left;}
.join-form .clearfix .inp-text.harf + .inp-text, .join-form .clearfix .inp-text.harf + select{margin-left:2%;}
.join-form .clearfix select + .inp-text, .join-form .clearfix select + select{margin-left:2%;}
.row .block + input , .row .block + select{margin-top:4px;}
.row .block + input + * , .row .block + select + *{margin-top:4px;}
.join-form select {width:100%; height:26px;}
.join-form .btn-form{vertical-align: top}
.join-form .label {display:block; padding:5px 0;}

input[type="radio"]{vertical-align: top;}
input[type="checkbox"]{vertical-align: middle;}
input[disabled]{background: #ddd}
select{outline: none;}
select:hover, select:active, select:focus{border-color:#30b9e9;}

/* placeholder style */
input::placeholder {
  color: #999;
  opacity: 1; /* firefox */
}
input::-webkit-input-placeholder {color: #999;}
/* IE */
input:-ms-input-placeholder {color: #999;}
/* Firefox */
input:-mos-input-placeholder {color: #999;}
textarea::placeholder {
  color: #999;
  opacity: 1; /* firefox */
}
textarea::-webkit-input-placeholder {color: #999;}
textarea:-ms-input-placeholder {color: #999;}
textarea:-mos-input-placeholder {color: #999;}

/* respontable ul */
.respontable{font-size:1.4rem;}
.respontable li.listhead{display:none;}
.respontable li{border:1px solid #ccc; border-radius: 10px; padding:10px; margin-bottom:10px; position: relative;}
.respontable li:last-child{margin-bottom: 0}
.respontable li div{margin-bottom:4px; line-height: 1.4; position: relative; padding-left:90px;}
/* tr after class set */
.respontable.research li div:before{position: absolute; top:0; left:0; width:80px; background: #0b659e; color:#fff; text-align: center;}
.respontable.research li div:nth-child(1):before{content: '일자';} 
.respontable.research li div:nth-child(2):before{content: '장소';} 
.respontable.research li div:nth-child(3):before{content: '참석인원';} 
.respontable.research li div:nth-child(4):before{content: '주제'; background: #624188;} 
.respontable.conference li div:before{position: absolute; top:0; left:0; width:80px; background: #0b659e; color:#fff; text-align: center;}
.respontable.conference li div:nth-child(1):before{content: '일자';} 
.respontable.conference li div:nth-child(2):before{content: '장소';} 
.respontable.conference li div:nth-child(3):before{content: '참석인원';} 
.respontable.conference li div:nth-child(4):before{content: '주제'; background: #624188;}
.respontable.committee li div:before{position: absolute; top:0; left:0; width:80px; background: #0b659e; color:#fff; text-align: center;}
.respontable.committee li div:nth-child(1):before{content: '성명';} 
.respontable.committee li div:nth-child(2):before{content: '직책';} 
.respontable.committee li div:nth-child(3):before{content: '소속'; background: #624188;}
.respontable.committee.c_en li div:nth-child(1):before{content: 'Name';} 
.respontable.committee.c_en li div:nth-child(2):before{content: 'Position';} 
.respontable.committee.c_en li div:nth-child(3):before{content: 'Affiliation'; background: #624188;}

/* respontable table :: journal */
.journaltbl{font-size:1.4rem;}
.journaltbl td:last-child{display:block}

/* Acordian */
.accordian {
  position: relative;
  width: 100%;
  margin-bottom: .6em
}
.accordian input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordian label {
  position: relative;
  display: block;
  padding: 6px 30px 6px 8px;
  background: #ccc;
  font-size: 1.6rem;
  line-height: 1.4;
  cursor: pointer;
  border: 1px solid #333;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.accordian label:hover {
  background-color: #624188;
  color:#fff;
}
.accordian label:hover:after {
  border-top-color: #fff;
}
.accordian label.link a {
  text-decoration: none;
}
.accordian .accrd-content {
  background: #ffffff;
  max-height: 0;
  overflow: hidden;
  box-shadow: inset 1px 0 0 #ccc,inset 0 -1px 0 #ccc,inset -1px 0 0 #ccc;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.accordian .accrd-content .column{padding:10px;} 
/* :checked */
.accordian input:checked ~ .accrd-content {
  max-height: 100%
}
/* Icon */
.accordian label:after {
  position: absolute;
  top:50%; right:10px;
  content: "";
  margin: -4px 0 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #333;
  -ms-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}
.accordian input[type=checkbox]:checked + label{
  background-color: #624188;
  color:#fff;
}
.accordian input[type=checkbox]:checked + label:after{
  border-top-color:#fff;
}
.accordian input[type=checkbox]:checked + label:after {
  transform: rotate(180deg);
}
.accordian input[type=checkbox] + label.link:after,
.accordian input[type=checkbox] + label.link:before {
  display: none;
}    

/* journal list */
.column.journals .columntitle{margin-bottom:20px;}
.column.journals .row{margin-bottom:8px;}
.journal-list{width:100%; padding:10px; border:1px solid #ccc; background: #fafafa; border-radius: 8px}
.journal-list:after{content: ''; display: block; clear: both;}
.journal-list dt{font-size:1.8rem; padding:5px; }
.journal-list dd{font-size:1.4rem; padding:5px;}
.journal-list:not(.only) dd{float:left; width:50%;}
.journal-list.only dd{display:block !important;}
.journal-list dd a{display:block; width:100%;}
/* journal inn */
.journaltbl{margin-top:10px;}
.journaltbl li.tle{font-size:1.8rem; border:1px solid #333; background: #ccc;}
.journaltbl li{position: relative; padding:6px; border-left:1px solid #ccc; border-right:1px solid #ccc; 
  border-bottom:1px solid #ccc; line-height: 1.3}
.journaltbl li:not(.tle):hover{background:#f1f1f1;}
.journaltbl li .lect strong{display:block; font-size:1.6rem; font-weight: 500}
.journaltbl li .lect span{font-size:1.6rem; color:#888;}
.journaltbl li .more{display:block; padding:4px 10px; margin-top:6px; text-align: center; border-radius: 4px;}

/*datatable*/
.datatbl{width:100%; font-size:1.4rem; table-layout: fixed;}
.datatbl *{vertical-align: middle;}
.datatbl thead th,.datatbl tbody th{padding:6px; background:#ccc;}
.datatbl tbody td{padding:6px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.datatbl tbody td:first-child{border-left:1px solid #ccc;}
.datatbl tbody td:last-child{border-right:1px solid #ccc;}
.datatbl tbody th{border:1px solid #333;}
.datatbl tbody tr:hover td{background:#f1f1f1;}
.datatbl tbody td.date span{display: block;}
.datatbl tbody td.date {font-size:1.2rem;}

@media all and (min-width:600px){
/*modalpopup*/
.modalpopup .pop-wrap{width:450px;}
/*innder tabs*/
.inmenus ul li{width:32.9%;}
.inmenus ul li a{font-size:1.6rem; padding:8px}
/*pagenate*/
.paginate *{font-size:1.6rem;}
.paginate span.prev a i,.paginate span.next a i{font-size:2rem;}
/*custom input*/
.custom-file-input span + span {width:100px;}
.custom-file-input {width:400px;}
.custom-file-input span + span {left:400px;}
/*popup tbl*/
.popuptbl tbody td .inp-text{width:50%;}
.layerpopup .pop-wrap{width:500px;}
.layerpopup .scroll{height:400px;}

/* journal list */
.column.journals .row{margin-bottom:10px;}
.journal-list{width:auto; max-width: 400px}
}

@media all and (min-width:800px){
.journaltbl li .more{position: absolute; top:50%; right:10px; padding:4px 10px; margin-top:0;
  -ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
/* journal list */
.column.journals .row{display:inline-block; width:48%; vertical-align: top}
.column.journals .row:nth-of-type(odd){margin-right:1.5%;}
.journal-list{width:auto; max-width:auto;}

/*innder tabs*/
.inmenus ul li{width:24.6%;}
.inmenus ul li a{font-size:1.6rem; padding:8px}
/*board*/
.board_btns .btn{float:none; display:inline-block; width:140px; margin-right:0}
 /*board search*/
.board_search{ text-align: right;}
.board_search select{width:120px;}
.board_search .inp-text{width:300px;}
.board_search .btn{width:80px;}
/*gallery*/
.board_gallery ul li div.subject{font-size:1.6rem;}
.board_gallery ul li{float:left; width:49.5%; text-align: center; margin-left:1%; vertical-align: middle;}
.board_gallery ul li:nth-child(odd){margin-left:0;}
.board_gallery ul li a div.photos{overflow:hidden; width:390px; height:240px; margin:0 auto; position: relative;}
.board_gallery ul li a div.photos img{position: absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%}
/*board_write*/
.board_write{font-size:1.6rem;}
.board_write .board_infor dl dt{width:15%;}
.board_write .board_infor dl dd{width:85%;}
.board_write .board_infor > div{width:100%; border-top:1px solid #ddd;}
.board_write .board_infor > div dl{display:table; width:50%; float:left;}
.board_write .board_infor > div dl dt{display:table-cell; width:164px;vertical-align: middle;}
.board_write .board_infor > div dl dd{display:table-cell; width:70%;vertical-align: middle;}
.board_write .board_infor dl .inp-text{width:100%; vertical-align: middle; height:28px; line-height:30px; border:1px solid #ddd; vertical-align: middle;}
.board_write .board_infor .emp_area{background:#edf4f8; padding:10px 6px;text-align: right;}
.board_write .board_write strong{display:block; width:100%; padding:10px 0; text-align: center; border-bottom: 2px solid #333}
.board_write .board_contents{min-height: 200px; height: auto; background:#eee; border-bottom:2px solid #333;}
/*board view*/
.board_view {font-size:1.6rem;}
/*custom input*/
.custom-file-input span + span {width:100px;}
.custom-file-input {width:500px;}
.custom-file-input span + span {left:500px;}
/*column set*/
.columntitle{font-size:2.6rem;}
.rowtitle{font-size:2.2rem;}
.subtitle{font-size:2rem;}
.row p{font-size:1.6rem;}
/*join*/
.provtitle{font-size:2.2rem;}
.agreement{font-size:1.6rem;}
/*popup*/
.layerpopup .pop-wrap{width:600px;}
/* icon align list*/
.icon-list {font-size:1.6rem;}
.icon-list li{position: relative; margin: 8px 0;}
/*join form*/
.join-form {font-size:1.6rem;}
.join-form .columntitle{padding:10px 0; margin-bottom:10px;}
.join-form label{font-size:1.8rem; margin-bottom:8px;}
.join-form .inp-text{width:280px;}
.join-form .inp-text.harf{width:280px !important;}
.join-form .inp-text.trip{width:186px;}
.join-form .inp-text.dis{width:430px}
.join-form .inp-text.full{width:597px;}
.join-form .clearfix .inp-text.harf, .join-form .clearfix select {width:280px !important; float:none;}
.join-form .clearfix .inp-text.harf + .inp-text, .join-form .clearfix .inp-text.harf + select{margin-left:0}
.join-form .clearfix select + .inp-text, .join-form .clearfix select + select{margin-left:0}
.row .tbl .inp-text + span{display:inline-block; width:20px;}
.row .clearfix span{float:none; display: inline-block; width:30px;}
.row .tbl .inp-text, .row .tbl span, .row .tbl select{display:inline-block;}
.row .clearfix span + select{width:280px !important;}
.join-form select {width:280px}
.join-form .column .row{margin:0 0 10px;}
.join-form .column .row .tbl{display:block; width:auto;}


.row .block + input , .row .block + select{margin-top:5px;}
.row .block + input + * , .row .block + select + *{margin-top:5px;}

.join-form .label {display:block; padding:5px 0;}


/* respontable ul */
.respontable{font-size:1.6rem;}
.respontable li.listhead{display:table;}
.respontable li.listhead{border-bottom:1px solid#333; border-top:1px solid #333}
.respontable li.listhead div{background:#ddd; border-right:1px solid #333; text-align: center; vertical-align: middle;}
.respontable li.listhead div:first-child{border-left:1px solid #333;}
.respontable li{border:none; border-radius: 0; padding:0; margin-bottom:0; display:table; width:100%;}
.respontable li:last-child{margin-bottom: 0}
.respontable li div{margin-bottom:0; line-height: 1.4; position: relative; padding-left:0; display: table-cell; vertical-align: middle;
 padding:8px; border-right:1px solid #ccc;}
 .respontable li:hover{background: #f1f1f1}
 .respontable li div:first-child{border-left:1px solid #ccc;}
 .respontable li:not(.listhead){border-bottom:1px solid #ccc;}
/* tr after class set */
.respontable.research li div:before{position: static; top:0; left:0; width:auto; background: none}
.respontable.research li div:nth-child(1){width:15%; text-align: center;}
.respontable.research li div:nth-child(2){width:30%;}
.respontable.research li div:nth-child(3){width:10%; text-align: center;}
.respontable.research li div:nth-child(4){width:45%;}
.respontable.research li div:nth-child(1):before,.respontable.research li div:nth-child(2):before,
.respontable.research li div:nth-child(3):before,.respontable.research li div:nth-child(4):before{content: ''; background: none;} 
.respontable.conference li div:before{position: static; top:0; left:0; width:auto; background: none}
.respontable.conference li div:nth-child(1){width:15%; text-align: center;}
.respontable.conference li div:nth-child(2){width:30%;}
.respontable.conference li div:nth-child(3){width:10%; text-align: center;}
.respontable.conference li div:nth-child(4){width:45%;}
.respontable.conference li div:nth-child(1):before,.respontable.conference li div:nth-child(2):before,
.respontable.conference li div:nth-child(3):before,.respontable.conference li div:nth-child(4):before{content: ''; background: none;} 
.respontable.committee li div:before{position: static; top:0; left:0; width:auto; background: none}
.respontable.committee li div:nth-child(1){width:25%;}
.respontable.committee li div:nth-child(2){width:25%;}
.respontable.committee li div:nth-child(3){width:60%;}
.respontable.committee li div:nth-child(1):before,.respontable.committee li div:nth-child(2):before,
.respontable.committee li div:nth-child(3):before{content: ''; background: none;}
.respontable.committee.c_en li div:nth-child(1):before,.respontable.committee.c_en li div:nth-child(2):before,
.respontable.committee.c_en li div:nth-child(3):before{content: ''; background: none;}

/* accordian */
.accordian {margin-bottom: 1em}
.accordian label { font-size: 1.8rem;}

/*datatable*/
.datatbl{font-size:1.6rem;}
.datatbl thead th,.datatbl tbody th{padding:8px;}
.datatbl tbody td{padding:8px;}
.datatbl tbody td.date {font-size:1.4rem;}
}
@media all and (min-width:1024px){
.mohide{display:inline-block !important; font-size:1.4rem;}
#container.main{width:1024px; height:900px; background:#000; position:relative; margin:0 auto; border-left:1px solid #ccc; border-right:1px solid #ccc;}
#container.sub {width:100%; height:auto; background:transparent; position:relative;}
/*** index header ***/
#container.main #header{width:200px; height:160px; background:#fff; border-bottom:0; position:absolute; top:0; left:0;}
#container.main #header #navi{display:block; position:static; top:0; left:0; width:auto; height:auto; background:#fff; box-shadow: none; overflow-y: visible; z-index: 100}
#container.main #header #menuheader{width:auto; height:51px; background:#000; position: static; top:0; left:0; z-index: 101}
#container.main #header .sizing{top:auto; left:auto; transform:none; display:block; width:100%; height:100%;}
#container.main #header .sizing #logoTop{position: relative; width:100%; height:100%;}
#container.main #header .sizing #logoTop a{display:block; width:182px; height:110px; background: url(../img/logokit.png) no-repeat; 
	background-position:0 0; position: absolute; top:50%; left:50%; transform: translate( -40%, -50%);}
/*mobile used menu*/
#container.main #header #mobile{display:none;}
#container.main #header #menuheader{display:none;}
/*menu*/
#container.main #header #mainmenu {position:static; top:0; left:0; width:100%; margin-bottom:0;}
#container.main #header #mainmenu>li{border-bottom:1px solid #ccc; margin-bottom:-1px; position: relative;}
#container.main #header #mainmenu>li>a{display:block; padding:14px 10px; letter-spacing: -1px; line-height: 1.3; position: relative; border-bottom:0; color:#353030;}
#container.main #header #mainmenu li a h2{font-size:1.8rem; font-weight: 500;}
#container.main #header #mainmenu li a h2 span{ display:block; letter-spacing: 0}
/*submenu*/
#container.main #header .submenu{display:none; position:absolute; top:0; left:200px; width:260px; z-index: 300}
#container.main #header .submenu .bg{display:block; position:absolute; left:0; top:0; width:260px; height:840px; background: rgba(0,0,0,.8); z-index: 1}
#container.main #header #mainmenu li:nth-child(1) .submenu .bg{transform: translateY(-303px);}
#container.main #header #mainmenu li:nth-child(2) .submenu .bg{transform: translateY(-369px);}
#container.main #header #mainmenu li:nth-child(3) .submenu .bg{transform: translateY(-435px);}
#container.main #header #mainmenu li:nth-child(4) .submenu .bg{transform: translateY(-501px);}
#container.main #header #mainmenu li:nth-child(5) .submenu .bg{transform: translateY(-567px);}
#container.main #header #mainmenu li:nth-child(6) .submenu .bg{transform: translateY(-633px);}
#container.main #header .submenu ul{position:absolute; top:0; left:0; width:260px; z-index: 310}
#container.main #header .submenu ul li {border-bottom:0 !important;}
#container.main #header .submenu ul li a{padding:16px; font-size: 1.6rem; color:#fff; background:transparent; border-bottom:0}
#container.main #header .submenu ul li a:hover{color:#f3976a;}
#container.main #header .submenu ul li a:hover i{display:block;}
#container.main #header .submenu ul li:last-child a{border-bottom:0;}
#container.main #header .submenu ul li a i{display:none; position: absolute; top:50%; right:10px; transform: translateY(-50%); font-size:1.6rem; }
#container.main #header #mainmenu>li>a>i{display:none; right:10px;}
#container.main #header #mainmenu>li>a:hover i{display:block;}
#container.main #header #mainmenu>li:hover .submenu{display:block;}
.insub{display:none;}
/*account*/
#container.main #header #account{width:auto; border-bottom:1px solid #ccc; position: static; width:200px;}
#container.main #header #account .acc_list{height:30px; line-height: 30px; background:#222222; text-align: center}
#container.main #header #account .acc_list li{display:inline-block;}
#container.main #header #account .acc_list li span{display:inline-block; width:1px; height:10px; background:#ecebf0; margin:0 8px;}
#container.main #header #account .acc_list li:last-child span{display:none;}
#container.main #header #account .acc_list li a{color:#ecebf0; font-size:1.3rem;}
#container.main #header #account .login{width:100%; height:112px}
#container.main #header .backboard{background:#ecebf0;}
#container.main #header .login{padding:8px; text-align: center;}
#container.main #header .login .col-items{margin-bottom:4px;}
#container.main #header .login .col-items label{display:none;}
#container.main #header .login .col-items .inp-text{width:180px;}
/*addr-top*/
#container.main #header .addr-top{width:200px; height:207px; padding:24px 10px 0; position: static; left:0; bottom:0; border-bottom:1px solid #ccc;}
#container.main #header .addr-top ul li{margin-bottom:6px;}
#container.main #header .addr-top ul li p{padding:14px 10px; text-align: left;}
/*index - login*/
#container.main .btn-login {width:180px; height:34px; line-height: 34px; background: #312d2d; border-radius: 6px; color:#dbdade; 
	box-shadow: 0 3px 0 rgba(0,0,0,.2) ,inset 0 18px 0 rgba(255,255,255,.1); font-weight: 800;
  position: relative; top:-1;
}
#container.main .btn-login:hover{
  background:#c65a41; color:#f3f9ff; 
	box-shadow: 0 3px 0 rgba(0,0,0,.2) ,inset 0 18px 0 rgba(255,255,255,.2);}
#container.main .btn-login:active{top:2px; box-shadow:inset 0 18px 0 rgba(255,255,255,.2);}
/*quick menu*/
#quick{position:absolute; top:0; left:208px;}
#quick ul li{float:none; width:300px; height:210px;}
#quick ul li a{font-size:3rem;}
#quick ul li a div{width:220px;}
#quick ul li a div strong{letter-spacing: -1px;}
/*visual*/
#visual{width:514px; height:420px; position: absolute; top:0; right:0; border-bottom:1px solid #ccc; overflow:hidden;}
#visual img{width:auto;}
/*board*/
#boards{width:514px; position: absolute; top:420px; right:0;}
/*latest*/
#boards .latest{width:100%; height:210px; background:#fff;}
#boards .latest .inpadding{padding:20px}
.latest strong{font-size:2.4rem; font-weight: 700; }
.latest ul{margin-top:18px;}
.latest ul li{font-size:1.5rem; margin-bottom:12px;}
/*
#publish{
 bottom:0; left:0; background:#fff;
  padding:8px 0;
  height:60px;
}
*/
#publish {background-color: #fff;}
/*footer*/
#footer.main{margin:0 auto;}
#footer.main #policy,#footer.main > div:not(#policy){width:1024px; margin:0 auto;}
#policy .sizing > ul{text-align: left; padding:0 12px;}
#policy .sizing > ul > li#familysite{display:inline-block; margin-top:0; margin-left:10px; padding:6px 0; vertical-align: middle;}
#footer.main > div:not(#policy){padding:20px 30px; border-left:1px solid #ccc; border-right:1px solid #ccc;}
#policy .sizing > ul >li {vertical-align: middle;}
#footer > div:not(#policy){padding:0;}
.dropdown label{width:220px;}
#logoFoot{float:left; display:block; width:90px; height:94px; background: url(../img/logokit.png) no-repeat; background-position:0 -110px;}
#footer address{float:left; margin:8px 0 0 30px;}
#footer address strong{margin:0;}
#footer address ul{text-align: left; margin-top:8px;}
#footer address ul li{display:inline-block;}
#footer address ul li:nth-child(2) span:last-child{display:none;}
#footer address ul li:nth-child(3){display:block;}
#footer address ul li:nth-child(3) span:nth-child(2){display:inline-block;}
#footer address ul li:nth-child(3) span:last-child{display:none;}
#footer address ul li span:last-child{display:inline-block;}
.email{margin-top:0; display:inline-block;}
#footer address ul li#copy {margin-top:4px;}
/*footer - subpage set*/
#footer.sub .sizing{width:1024px; margin:0 auto;}

/**** sub header ****/
#container.sub .sizing{position: relative; width:1024px; margin:0 auto;}
/*mobile used menu*/
#container.sub #header #mobile{display:none;}
#container.sub #header #menuheader{display:none;}
/*header-sub*/
#container.sub #header{height:140px; background: url(../img/sub-bg.jpg) repeat-x; border-bottom:1px solid #ccc;}
#container.sub #header #logoTop{position:static; top:auto; left:auto; width:200px; height:130px; 
	z-index: 600; padding-top:38px; float:left; transform:none;}
#container.sub #header #logoTop a{display:block; width:140px; height:100px; margin:0 auto;
	background: url(../img/logokit.png) no-repeat; background-position:0 -388px; position: static; transform: none;}
#container.sub #header #logoTop .logo_en{display:block; width:140px; height:77px; margin:10px auto 0 auto;
	background: url(../img/logokit.png) no-repeat; background-position:0 -388px; position: static; transform: none;}

#container.sub #header #account{width:100%; border-bottom:0; position: absolute; top:0; left:0; }
#container.sub #header #account .sizing{width:1024px; margin:0 auto;}
#container.sub #header #account .acc_list{text-align: right; background:transparent;}
/*menu*/
#container.sub #header #mainmenu {position:absolute; top:auto; left:auto; bottom:-10px; right:0; width:806px; margin-bottom:0;}
#container.sub #header #mainmenu>li{float:left; width:149px; border-bottom:0; text-align: center; margin-right:1px; position: relative;}
#container.sub #header #mainmenu>li:last-child{width:200px;}
#container.sub #header #mainmenu>li>a{display:block; padding:30px 0; border-bottom:0; z-index: 30}
#container.sub #header #mainmenu>li>a:hover,#container.sub #header #mainmenu>li.on>a {background: url(../img/menubg.png) repeat-x 100% 100%;}
#container.sub #header #mainmenu>li>a h2{font-size:1.8rem; font-weight: 600;}
#container.sub #header #mainmenu>li>a h2 span{ display:block; letter-spacing: 0}
#container.sub #header #mainmenu li:hover .submenu{display:block;}
#container.sub #header .submenu{display:none;}
#container.sub #header .submenu .bg{display:none;}
#container.sub #header .submenu ul{position: absolute; top:0; left:0; width:149px; margin-top:96px; z-index: 10}
#container.sub #header .submenu ul li{border-bottom:0;}
#container.sub #header .submenu ul li:last-child a{border-radius: 0 0 6px 6px}
#container.sub #header .submenu ul li a{padding:14px 10px;}
#container.sub #header .submenu ul li a:hover{text-decoration: underline; color:#f3976a;}
#container.sub #header .submenu ul li a i{display: none}
#container.sub #header #mainmenu>li:last-child .submenu ul{width:200px;}

/*side*/
#side{width:200px; float:left;}
#side #sideheader{height:120px; background:#624188; position: relative;}
#side #sideheader h2{font-size:2.4rem; color:#fff; width:160px; line-height: 1.3; text-align: center; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
#side nav{padding:0; display:block;}
#side nav>ul{border:1px solid #ccc;}
#side nav>ul>li{border-bottom:1px solid #ccc;}
#side nav>ul>li:last-child{border-bottom:0;}
#side nav>ul>li>a{display:block; position: relative; padding:14px 10px; font-size:1.6rem; letter-spacing: -1px; color:#252020; background:#f1f1f1; transition: background .5s;}
#side nav>ul>li>a i{display:none; position: absolute; top:50%; right:0; transform: translate(-50%, -50%);}
#side nav>ul>li.on>a, #side nav ul li a:hover{background:#fff;}
#side nav>ul>li.on>a i{display:block; color:#624188;}
#side nav>ul>li>a:hover i{display:block; color:#f6976b;}
#side nav>ul>li.on .submenu{display:block;}
#side nav .submenu{display:none;}
#side nav .submenu li{border-bottom:1px solid #333;}
#side nav .submenu li:last-child{border-bottom:0;}
#side nav .submenu li a{display:block; background: #555; font-size:1.4rem; color:#fff; padding:10px; transition: background .5s;}
#side nav .submenu li.on a{background:#333;}
#side nav .submenu li a:hover{background:#333;}
/*view*/
#viewport{width:806px; float:left; margin:0 0 50px 18px; min-height:700px;}
#viewport .inpadding{padding:18px 0;}
#viewport .pagetitle{border-bottom:1px solid #333;}
#viewport .pagetitle .inpadding{padding:28px 0;}
#viewport .pagetitle h3{font-size:2.8rem; letter-spacing: -1px; font-weight: 600}
#viewport .pagetitle h3 span{display:inline-block; font-size:1.2rem; font-weight: normal; margin-left:8px;}
#viewport .location{display:inline-block; margin-top:10px; border-radius:8px; background: #ddd;}
#viewport .location li{float:left; padding:6px; font-size:1.2rem; color:#252020;}
#viewport .location li a{color:#252020;}
#viewport .location li a:hover{color:#0088ce;}
#viewport .location li i{vertical-align: top; margin-right:4px;}
#viewport .location li.arrows{padding:6px 0;}
#viewport .location li.arrows i{margin-right:0;}
#viewport .view .inpadding{padding:0; margin:20px 0;}
#viewport .view img{max-width:100%;}
#viewport .view p{font-size:1.6rem;}

#container.sub #header #navi{display:block; position:static; top:0; left:0; width:auto; height:auto; background:#fff; box-shadow: none; overflow-y: visible; z-index: 100}
#container.sub #header .backboard{display:none;}

/*innder tabs*/
.inmenus ul li{width:19.6%;}
.inmenus ul li a{font-size:1.6rem; padding:8px}
/*board-list*/
.board_list{margin:10px 0;}
.board_list ul{border-top:2px solid #333; border-bottom:2px solid #333;}
.board_list ul li{display:table; width:100%; padding:6px 0; font-size:1.6rem;}
.board_list ul li:hover{background:#f4f4f4;}
.board_list ul li div{display: table-cell; text-align: center;}
.board_list ul li div.options{width:40px; text-align: center;}
.board_list ul li div.num,.board_list ul li div.hit{width:10%;}
.board_list ul li div.date{width:16%;}
.board_list ul li div.write{width:12%;}
.board_list ul li div.files{width:60px}
.board_list ul li div.files i{display:block;}
.board_list ul li div.subject{width:380px;}
.board_list ul li:not(.list_thead) div.subject{text-align: left;}
.board_list ul li div a{color:#333;}
.board_list ul li div a:hover, .board_list ul li div a:focus{color:#f27244;}
.board_list ul li.list_thead{display:table; background:#333; color:#fff;}
.board_list ul li.list_thead .options i{color:#fff;}
.board_list ul li div i{display:none;}
.board_list ul li div.options i{display:block;}
.board_list ul li div.options .ico-megaphone{margin-left:5px; color:#624188;}
}

/*layer popup*/
#layer{width:300px; position:absolute; top:60px; left:20%; margin-left:-150px; z-index:111111;}
#layer .imgarea{width:100%;}
#layer .imgarea img{width:100%;}
#layer .closearea{width:100%; height:20px; background:#fff; padding-right:6px;}
#layer .closearea .tal {float: left; margin-left: 10px;}
#layer .closearea .tar {float: right;}
#layer2{width:300px; position:absolute; top:60px; left:60%; margin-left:-150px; z-index:1111;}
#layer2 .imgarea{width:100%;}
#layer2 .imgarea img{width:100%;}
#layer2 .closearea{width:550px; height:20px; background:#fff; padding-right:6px;}
#layer2 .closearea .tal {float: left; margin-left: 10px;}
#layer2 .closearea .tar {float: right;}