body{ font-size:15px; }
.sponge-layout-main-background{ min-width:1240px; }
.sponge-layout-sub-background{ min-width:1240px; }
/*TOP---------------------------------- ***************************************************************************************************************************************/
a:hover, a:focus { color: #00467f;  }
#skipnavi{ display:none;}
.kor-hide{ display:none !important;}
.container {  padding-left:0px; padding-right:0px; width: 1240px; margin:0 auto;  }   
#sponge-header{ background-color:#fff;}
.navbar-header{float:left; height:59px; }
.navbar-header h1{ margin-top:11px; }
.navbar-brand{height:auto; padding:10px 15px;}
/* menu */
.sponge-header-nav { margin-bottom:0px;  height:128px; border-radius:0px; border:0px;  }
.sponge-header-nav .navbar-toggle{display: none;}


/* logo */
.navbar > .container .sponge-navbar-brand, .navbar > .container-fluid .sponge-navbar-brand{ margin-left:0px; }
.sponge-navbar-brand { height: auto; padding:0 0; margin:0px; position:absolute; z-index:2000;}
.sponge-navbar-brand img{ height: auto; } 


 
/* infoBox */  
.infoBox{ margin-right:0px; text-align:right; margin-top:11px;}
.infoBox > li{ margin:0 0; display:inline-block; color:#555; float:none; vertical-align:middle; padding:0 10px; }
.infoBox > li:last-child{ margin-right:0px;}
.infoBox > li > a:hover, .infoBox > li > a:focus{ background-color:transparent !important; color:#00448f !important;}        
.infoBox > li > a{ display:inline-block; padding:0px 0; margin:0 0px;}
.infoBox > li > a.loginIcon{ color:#0071bc !important; }
.infoBox > li.login-library-list > a > span{ color:#0071bc !important; }
.infoBox > li.login-library-list > a span.eng-hide{ color:#555 !important; }
.infoBox > li.login-library-list > a:hover span.eng-hide{ color:#00448f !important; }
:last-child.navbar-right.navbar-nav.infoBox{ margin-right:0px;}
.infoBox > li.infoBox-language > a{ background-color:#505050 !important; color:#fff; padding:1px 8px 2px 8px !important; border-radius:15px; }
.infoBox > li.infoBox-language > a:hover, .infoBox li.infoBox-language a:focus, .infoBox li.infoBox-language a:active{ color:#faffad !important; }

.infoBox > li.icon{ padding:0 5px; }
.infoBox > li > a > span, .infoBox > li > a > i{display:inline-block;  }
/*.infoBox > li > a > span{display:none;  }*/
.infoBox > li > a > span.banner{background: url("/Users/hycl/Images/main.png") no-repeat left -150px; width:32px; height:32px; } 
.infoBox > li > a > span.banner01{background-position-x:left; } 
.infoBox > li > a > span.banner02{background-position-x:-45px; width:30px; } 
.infoBox > li > a > span.banner03{background-position-x:-91px; width:30px; } 
.infoBox > li > a > span.banner04{background-position-x:-133px; width:30px; } 

.infoBox > li.icon > a > i{ font-size:20px; display:none; }
.infoBox > li.icon > a > i.fa-tumblr-square{ color:#ea531e; }
.infoBox > li.icon > a > i.fa-twitter{ color:#2b91cd; }
.infoBox > li.icon > a > i.fa-facebook-square{ color:#1c5cad; }
.infoBox > li.icon > a > i.fa-instagram{ color:#ed1f4f; }


/* 메뉴- navbar */   
.sponge-navbar-top{ padding:0px; }
.sponge-navbar{ padding:0px; height:69px; border:0px; background:#094d84; position:absolute; top:59px; left:0px; right:0px; z-index:5000; } 
.menuWrap a{transition-duration: 0.9s, 0s;}
.menuWrap{ clear:both; width:100%;  margin:0 auto; position:absolute; top:0; z-index:1000; overflow:hidden; background: url("/Users/hycl/Images/menu/menuBg.png") repeat-x left 68px; transition-duration: 0.5s, 0s;}
#GNB{ padding:0px 0 0 0; position:absolute; width:100%; min-height:69px; max-height:500px; text-align:center;}
#GNB a:active { background-color:transparent;}
#GNB > li{ display:inline-block; vertical-align:top; width:208px; margin:0px -3px;}
/*#GNB > li:first-child, #GNB > li:last-child{ width:160px;}*/
#GNB > li:hover { background-color:#094d84;  }

/*#GNB li.frist, #GNB li.last { width:197px; }*/
#GNB > li > a { font-size:20px; color:#fff; font-weight:600; padding:24px 0 0 0; height:69px; display:block; border-right:2px solid transparent;transition-duration: 0s, 0s; line-height:20px; }
#GNB > li > a.line2 { padding-top:16px; }
#GNB > li > a:hover, #GNB > li > a:focus, #GNB > li.over a{color:#fff !important; }
#GNB .gnb1{ padding:22px 0; height:362px; text-align:left; border-right:2px solid #dcdcdc; margin:7px 0px 0 0px;}
#GNB > li.over .gnb1{ border-right:0px solid #b5b5b5;}
#GNB > li:last-child .gnb1{ border-right:0px solid #eee;  }
#GNB .gnb1.last{border-right:0px solid #eee;}
#GNB .gnb1 > li{float:none;  line-height:18px; width:100%;}
#GNB .gnb1 > li > a{display:block; float:none; padding:10px 0px 10px 15px;  color:#666;  }

#GNB .gnb1 > li > ul > li{ padding-left:10px; }
#GNB .gnb1 > li > ul > li:last-child{ padding-bottom:3px;}
#GNB .gnb1 > li > ul > li > a{padding:3px 0 3px 15px; font-weight:normal !important; display:inline-block; /*color:#666;*/ width:100%;}


#GNB .over .gnb1 > li a{color:#fff !important;  transition-duration: 0.5s, 0s; }
#GNB .over .gnb1 > li a:hover, #GNB .gnb1 > li:hover a{color:#f0e42b !important; font-weight:600; opacity:1;  }
#GNB .gnb1 li li a:hover{ color:#276cc4 !important; }
#GNB .gnb1 li:hover li a{ color:#fff !important; }

#GNB .over .gnb1:hover{ }
.menuWrapMobile{ display:none; }

.sponge-layout-wrap{ background-color:#fff;}

/* -------- Sub wrap --------- ***************************************************************************************************************************************/
.sponge-layout-content-sub-2021, .sponge-page-breadcrumbs-section, .sponge-layout-sub-search{width:1240px;}
.sponge-layout-content-main{ width:100%; overflow:hidden; margin:0 auto;  padding:0; }
.sponge-layout-content-sub{width:100%; overflow:hidden; padding-bottom:30px; margin:0 auto;  clear:both;}

.sponge-layout-content-container{ width:100%; padding-right:0px; float:left; display:inline; overflow:hidden;} 
/* 메인 롤링이미지 */
.sponge-layout-images-bg{ height:363px; width:100%; margin-bottom:0; position:relative; background:#000 url('/Users/hycl/Images/main/mainImg.jpg') no-repeat center -69px;}

.sponge-layout-images{width:100%; margin:0 auto; padding:0 0px;  z-index:100; overflow: hidden;}




/* SEARCH -----------------------------------------------------------------------------------------------------------------------------------------*/  
.sponge-layout-main-search-position{position:absolute; width:100%; top:0;  z-index:99;}
.sponge-layout-main-search {  z-index:100000;  width:1000px; margin:0 auto;  padding:122px 0 0 0; position:relative; }   
.sponge-search-detail .sponge-layout-main-search {  float:none; padding-bottom:30px; margin:0 auto; display:block; }   
.sponge-layout-main-search .nav-tabs{ font-weight:600; float:none; border-bottom: 0px solid #dddddd; }
.sponge-layout-main-search .nav-tabs > li.active > a,
.sponge-layout-main-search .nav-tabs > li.active > a:hover,
.sponge-layout-main-search .nav-tabs > li.active > a:focus {  background: #00467f !important; border:0px solid #094d84; }
.sponge-layout-main-search .nav-tabs > li > a { padding:8px 0px; font-size:17px; width:150px; border:0px solid transparent; /*cursor: auto;*/ color:#fff !important; text-align:center; border-radius:0;  background: #7d807f; margin:0; }
.sponge-layout-main-search .nav-tabs > li{ margin:0 !important;}
.sponge-layout-main-search .tab-content{  float:none; margin:0 auto; }
.sponge-layout-main-search .form-inline { padding:0px; position:relative; width:60%;}
.sponge-layout-main-search .navbar-form {  margin: 0px; clear: left; border:0px;}

.sponge-layout-main-search label{display:none;}
.sponge-layout-main-search h3{ background-color:transparent; font-size:18px; font-weight:bold; height: 30px; position: absolute; left:0; top:12px; width: 150px; margin-top:0; padding:5px 15px 0 15px; text-align:center; z-index:1; border-right:1px solid #00467f;  }

.sponge-layout-main-search .search_inputboxmain { background-color:rgba(255,255,255, 0.9); height: 54px; padding-left: 165px;  position:absolute; width:100%;
                                                  color: #000000;   margin: 0 0 0 0; left:0; font-size:15px; border-radius:0px; border-width:0px; }

.sponge-layout-main-search .country_id{ margin:0px; border:0px !important; }

.sponge-layout-main-search button.searchBtn, .sponge-layout-main-search a.searchBtn02{position:absolute; right:0px; top:0px; padding:0px 10px; height:54px; width:54px;background:none; 
                                                                                      background: url("/Users/hycl/Images/main/readingGlasses.png") no-repeat center center !important; border:0px;}

.sponge-layout-main-search button.searchBtn:hover, .sponge-layout-main-search button.searchBtn:focus{ opacity:1; }

.sponge-layout-main-search > div{ position:absolute; right:0;}
.sponge-layout-main-search > div > a{  display:inline-block; padding:11px 12px; background-color:#0071be; height:54px; color:#fff; font-size:18px; }
.sponge-layout-main-search > div > a:nth-child(2){ background-color:#015994;}
.sponge-layout-main-search > div > a:nth-child(3){ background-color:#2b6b97;}
.sponge-layout-main-search > div > a:hover{ color:#fff; opacity:0.8;}

/* -------- 바로가기 --------- ***************************************************************************************************************************************/
.sponge-main-icon-map-top{ width:100%; font-weight:600; position:absolute; bottom:0; background-color:rgba(64,60,56, 0.73); height:160px;}
.sponge-main-icon-map-top > ul{ padding:0 0px 0 0; text-align:center; width:1240px; margin:0 auto; }
.sponge-main-icon-map-top > ul > li{ display:inline-block;  width:13.5%; text-align:center; vertical-align:top; margin:0 0 0 0; padding-top:20px; }
.sponge-main-icon-map-top > ul > li.width{ width:16%; }
/*.sponge-main-icon-map-top > ul > li:hover{ border-bottom:2px solid #00467f;}*/
/*.sponge-main-icon-map-top > ul > li:nth-child(even){ border-right:0px; }
.sponge-main-icon-map-top > ul > li:last-child, .sponge-main-icon-map li:nth-last-child(2){ margin-bottom:0px; }*/
.sponge-main-icon-map-top > ul > li > a{ display:block; text-decoration:none; color:#fff; font-size:16px; font-weight:600; line-height:15px; /*text-shadow:0px 0px 0px 3px #fff;*/  text-align:center;}
.sponge-main-icon-map-top > ul > li > a:hover{ color:#fff !important; text-shadow: 2px 2px 1px #094d84, -2px -2px 1px #094d84;}
.sponge-main-icon-map-top > ul > li > a:focus{ background-color:transparent;}
.sponge-main-icon-map-top > ul > li > a i{ display:none;}
.sponge-main-icon-map-top > ul > li > a > span.map{ display:block; width:85px; height:85px;  background:url('/Users/hycl/Images/main.png') no-repeat left top; margin:0 auto 15px auto; }
.sponge-main-icon-map-top > ul > li > a > span.map01{ background-position-x:0px;}
.sponge-main-icon-map-top > ul > li > a > span.map02{ background-position-x:-100px; }
.sponge-main-icon-map-top > ul > li > a > span.map03{ background-position-x:-200px; }
.sponge-main-icon-map-top > ul > li > a > span.map04{ background-position-x:-300px; }
.sponge-main-icon-map-top > ul > li > a > span.map05{ background-position-x:-400px; }
.sponge-main-icon-map-top > ul > li > a > span.map06{ background-position-x:-500px; }
.sponge-main-icon-map-top > ul > li > a > span.map07{ background-position-x:-600px; }
.sponge-main-icon-map-top > ul > li > a > span.map08{ background-position-x:-700px; }
.sponge-main-icon-map-top > ul > li:hover > a > span.map{  background-position-y:-100px; }


/* -------- 바로가기 --------- ***************************************************************************************************************************************/
/* 신착자료, 공지사항, 인기자료 */
.sponge-layout-main-dataList{ width:100%; clear:both; padding:0px; background-color:#fff; position:relative;}
.sponge-layout-main-dataList:last-child{ background-color:#fff;}
.sponge-layout-main-dataList > .row{width:1240px;  margin:25px auto 0 auto; padding:0 0 0 0;}
.sponge-layout-main-dataList > .row > .col-md-4{ width:360px; border-radius:0; margin:0 0 0 0; padding:0 0; position:relative; border:1px solid #d5d6da; height:327px;} 
.sponge-layout-main-dataList > .row > .col-md-4:first-child{ margin-right:30px; } 
.sponge-layout-main-dataList > .row > .col-md-4:nth-child(2){ width:465px; border-width:0px;} 
.sponge-layout-main-dataList > .row > .col-md-4:last-child{ float:right;} 

.sponge-layout-main-dataList .title{ height:40px; position:relative; border-bottom:2px solid #3e3a39; } 

.sponge-layout-main-dataList .nav-tabs{ height:40px; border-bottom: 0px solid #dddddd; }
.sponge-layout-main-dataList .nav-tabs > li.active > a,
.sponge-layout-main-dataList .nav-tabs > li.active > a:hover,
.sponge-layout-main-dataList .nav-tabs > li.active > a:focus {  color:#000000; height:40px; border-bottom:2px solid #015994 !important; }
.sponge-layout-main-dataList .nav-tabs > li > a { height:31px; font-weight:600; color:#000; padding:0 0; margin-right:15px; font-size:18px; display:block; float:left; border:0px !important; background-color:transparent;}
.sponge-layout-main-dataList .nav-tabs > li > a:hover, .sponge-layout-main-dataList .nav-tabs > li > a:focus { color:#00467f !important;  }
.sponge-layout-main-dataList .nav-tabs > li > a > span.main-new-btn{ border-radius:20px !important; font-size:60% !important;}
.sponge-layout-main-dataList .tab-content { border-top:0px solid #1759a6; }
.sponge-layout-main-dataList h3{ font-weight:600; color:#000; padding:0 0; margin-top:0px; font-size:18px; display:block; float:left;  }

.sponge-layout-main-dataList a.main-more-icon{position:absolute; right:0; top:0px; display:block; vertical-align:top; font-size:13px;}
.sponge-layout-main-dataList a.main-more-icon i{ padding-left:0px; letter-spacing:0px; line-height:normal; font-size:8px; vertical-align:middle; }

/* -------- 바로가기2 --------- ***************************************************************************************************************************************/
.sponge-main-icon-map-hycl{ }
.sponge-main-icon-map-hycl > ul{  text-align:center; padding-top:20px; }
.sponge-main-icon-map-hycl > ul > li{ display:inline-block;  width:32%; text-align:center; vertical-align:top; margin:0 0 0 0;  height:153px; }

.sponge-main-icon-map-hycl > ul > li > a{ display:block; text-decoration:none; color:#000000; font-size:15px; font-weight:600; line-height:18px; text-align:center;}

.sponge-main-icon-map-hycl > ul > li > a:focus{ background-color:transparent;}
.sponge-main-icon-map-hycl > ul > li > a i{ display:none;}
.sponge-main-icon-map-hycl > ul > li > a > span.map{ display:block; width:85px; height:85px;  background:url('/Users/hycl/Images/main.png') no-repeat left -200px; margin:0 auto 10px auto; }
.sponge-main-icon-map-hycl > ul > li > a > span.map01{ background-position-x:0px;}
.sponge-main-icon-map-hycl > ul > li > a > span.map02{ background-position-x:-100px; }
.sponge-main-icon-map-hycl > ul > li > a > span.map03{ background-position-x:-200px; }
.sponge-main-icon-map-hycl > ul > li > a > span.map04{ background-position-x:-300px; }
.sponge-main-icon-map-hycl > ul > li > a > span.map05{ background-position-x:-400px; }
.sponge-main-icon-map-hycl > ul > li > a > span.map06{ background-position-x:-500px; }
.sponge-main-icon-map-hycl > ul > li > a > span.map07{ background-position-x:-600px; }
.sponge-main-icon-map-hycl > ul > li > a > span.map08{ background-position-x:-700px; }
.sponge-main-icon-map-hycl > ul > li:hover > a > span.map{  background-position-y:-300px; }

/* 게시판 */
.sponge-layout-main-board{}
.sponge-layout-main-board ul.data{ padding:20px 0 0 0; margin:0 0 0 0; clear:both;}
.sponge-layout-main-board li.list{ clear:both; width:100%; margin:0px; height:38px; padding:0px;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:90px; position:relative; }
.sponge-layout-main-board li.list a{ width:100%; height:20px; text-align:left; color:#222;  } 

.sponge-layout-main-board li.list p{ position:absolute; right:0; width:85px; text-align:right; top:0;} 


/* 필독도서, 신착도서, 인기도서 */
.sponge-main-book{position:relative; box-sizing: border-box; margin:0 auto 0 auto; width:100%;}
.sponge-layout-main-dataList .sponge-main-book .title{border-bottom:0px solid #00467f; padding:20px 15px 0 15px; } 
.sponge-layout-main-dataList .sponge-main-book .nav-tabs{border-bottom: 0px solid #1d538a;}
.sponge-layout-main-dataList .sponge-main-book  a.main-more-icon{ right:auto; left:95px; top:18px; }
.sponge-main-book > ul{ padding-top:0; }
.sponge-main-book > ul > li{width:100%;}
.sponge-main-book > ul > li > div{width:100%}
.sponge-main-book > ul > li p.noData{display:none;position:absolute;top:100px;left:25px;}
.sponge-main-book > ul > li.active p.noData{display:block}
.sponge-main-book > ul > li.active > div{display:block}
.sponge-main-book > ul > li> h2 a:before{content: '';opacity: 0;display: block;position: absolute;top: 0;right: 50%;left: 50%;height: 3px;background-color: #06603c;transition: right 0.25s ease, left 0.25s ease, opacity 0.25s ease;}
.sponge-main-book > ul > li.active > h2 a:before{left: 0;right: 0;opacity: 1;}
.sponge-main-book > ul > li > div > div{position:relative;height: 120px;margin:0 10px;overflow:hidden;z-index:10; /*width:100%;*/ }
.sponge-main-book > ul > li > div > div > ul{position:absolute;top: 0;left:0;width:100%;white-space:nowrap;word-wrap:normal;padding-top: 10px; height:120px; overflow:hidden; text-align:center; width:1240px !important; }

.sponge-main-book > ul > li > div > div > ul > li{float:left; width:85px !important; height:120px; overflow:hidden; transform: translateY(0);transition: transform 0.25s ease; padding:0 5px;}

.sponge-main-book > ul > li > div > div > ul > li:hover{transform: translateY(-5px);}
.sponge-main-book > ul > li > div > div > ul > li a{display:inline-block; width: 100%; text-align:center;}
.sponge-main-book > ul > li > div > div > ul > li a img{ width: 65px;height: 90px; border:1px solid #999;}
.sponge-main-book > ul > li > div > div > ul > li a span{display:block;color:#424242;text-align:center;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis; font-size:12px; }
.sponge-main-book > ul > li > div > div > ul > li a span.writer{display:block;color:#acacac;text-align:center;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}
.sponge-main-book ul > li .btns{display:none; position:absolute; top:100px; left:0}
.sponge-main-book ul > li.active .btns{display:block}
.sponge-main-book .btns a{position:absolute;top:0;display: block; transition:background 0.25s ease;}
.sponge-main-book .btns a span.glyphicon{ color:#c9c9c9; font-size:28px;}
.sponge-main-book .btns a:hover span.glyphicon{ color:#00467f; }
/*.sponge-main-book .btns a:hover{background-color: #154a46;}*/
.sponge-main-book .btns a.prev{right: 0;}
.sponge-main-book .btns a.next{left: 0;}



/* -------- 바로가기 --------- ***************************************************************************************************************************************/
.sponge-main-banner { width:100%; margin:10px 0 0 0; padding:0px; }
.sponge-main-banner a.img_list{ width:165px; height:160px; float:left;  display:inline-block; border:1px solid #ddd;font-size:18px; text-align:center; font-weight:600; color:#343434; padding-top:15px; border-radius:5px; 
                                background: url("/Users/hycl/Images/main.png") no-repeat left -300px; text-shadow:0px 0px 0px 4px #fff;}
.sponge-main-banner a.img02{ background-position-x: -180px; float:right; }
.sponge-main-banner a.img_list:hover{ background-position-x: -360px;}
.sponge-main-banner a.img02:hover{ background-position-x: -540px; float:right; }
.sponge-main-banner a:hover{ border:1px solid #ccc;}



/* ----------content "퀵메뉴 quick" to center the layout-------- */	 
#sponge-layout-content-container-quick{float:right; display:inline; position:fixed; top:380px; width:auto; padding-left:10px; z-index:0;}	
#quickMenu{width:auto; padding-top:10px;}
.sponge-top-btn{border:1px solid #bebebe; font-weight:600;border-radius:3px; width:auto; height:18px; padding:0 3px; display:block; color:#3f3f3f; text-align:center;
                text-shadow: 3px 3px 3px #fff; background-color:#fff; background:#fff linear-gradient(#fff 40%, #ddd ) !important; line-height:5px; line-height:-1.5px; -webkit-text-size-adjust:none !important; font-size:11pt !important; margin:1px 0; }


/* Copyright */
footer, .sponge-footer{ width:100%; clear:both; margin-top:20px; }

.sponge-layout-footer-banner { padding:10px 0; border-top:1px solid #d4d3d3; height:55px; width:100%; background-color:#fff;}
	.sponge-layout-footer-banner h3 {  float:left; }
	.sponge-layout-footer-banner ul  { vertical-align:middle; margin:0 auto;  width:1240px;   }
	.sponge-layout-footer-banner img  {  vertical-align:middle; padding:0 2px;  }
	.sponge-layout-footer-banner li  { float:left; display:inline;}
	.sponge-layout-footer-banner a{ margin:2px 40px; font-weight:600; } 

.sponge-layout-footer{ padding:20px 0 ; color:#4d4d4d; background-color:#eaebec;  width:100%; margin-top:0; text-align:center;}
.sponge-layout-footer address{ color:#4f4f4f; display:inline-block; margin:0 0; line-height:22px; width:100%; }
.sponge-layout-footer p{ margin:0px 0 5px 0;}
.sponge-layout-footer p:last-child{ margin:0px 0 0 0; }
.sponge-layout-footer a{ color:#1d81c3;  margin-right:10px;}
.sponge-layout-footer address span{ letter-spacing:0px; }
.sponge-layout-footer a:hover{ color:#000; }

/* -------- Guide Page--------- ***************************************************************************************************************************************/
/* -------- left & right wrap --------- ***************************************************************************************************************************************/
/*정보자료실소개*/
.arrowBox3 li{ width:150px; }
.arrowBox3 li a{   font-size:18px; line-height:20px !important;  padding-top:32px;}

 .root_daum_roughmap{overflow:hidden; width:100% !important;}

 .sponge-account-login-body-Hycl-sky{ background:url("/Users/Hycl/Images/sub/loginSkyBg.png") no-repeat right top; width:100%;} 
 .sponge-account-login-body-Hycl{ background:url("/Users/Hycl/Images/sub/loginsmallBg.png") no-repeat right bottom; width:100%;  min-height:650px; display:block;} 
 .sponge-account-login-body-Hycl .sponge-page-boxGide2{ background-color:#fff; }

 .userBtn-p p{ display:inline-block; width:18%; border-right:1px solid #eee; margin-bottom:0px; vertical-align:top;}
 .userBtn-p p:last-child{ border-right:0px solid #eee; /*width:30%;*/}
 #sponge-table-banner .userBtn.userBtn-m a{margin-bottom:5px;}

 .organization .border li{width:100%; margin:3px 0; text-align:center;}
.organization .border-list-sub{ width:150px; margin-right:20px; }

.sponge-guide-btns{text-align:center;}

.userBtn-p p:last-child{width:19%;}