@charset "utf-8";
/* ********************************************************************
 * name : JBieN
 * filename : content.css
 * description : ¼­ºê ÄÜÅÙÃ÷ css 
 * date : 2023-08-18
********************************************************************* */

/* === ¾î¹Ù¿ô === */
#aboutBox{}
#aboutBox .txtBox{text-align: center;height: 77vh;display: flex;flex-direction: column;justify-content: center;position: relative;}
#aboutBox .txtBox h1{font-size: 18px;line-height: 1;font-weight: 400;}
#aboutBox .txtBox p{font-size: 82px;color: var(--black-color);font-weight: 900;margin-bottom: 20px}
#aboutBox .txtBox ul{font-size:24px;color:#616161;}
#aboutBox .txtBox ul li{position: relative;display: inline-block;margin: 0 10px;}
#aboutBox .txtBox ul li:after{content: '';width: 3px;height: 3px;background: #616161;position: absolute;top: 19px;right: -14px;}
#aboutBox .txtBox ul li:last-child:after{display:none;}
#aboutBox .txtBox em{font-size:16px;color:#202020;font-weight: 500;position: relative;margin: 25px auto 0;}
#aboutBox .txtBox em:after{content: '';position: absolute;width: 33px;height: 33px;background: var(--mint-color);border-radius: 50%;left: -8px;top: -10px;z-index: -1;}

#aboutBox .txtBox .scrollDown {bottom: 3em;right: 5%;left: inherit;}
#aboutBox .txtBox .scrollDown span{top:-178px;}
#aboutBox .txtBox .scrollDown p {/*animation: none;*/}
#aboutBox .txtBox .lineDown,
#serviceBox .titleBox .lineDown{position: absolute;left: 3%;bottom: -4em;z-index: 10;width: 28px;height: 106px;border-radius: 28px;background: #282728;;}
#aboutBox .txtBox .lineDown p,
#serviceBox .titleBox .lineDown p{position: absolute;bottom: 0px;left: 0;right: 0;margin: auto;overflow:hidden;width: 1px;height: 80%;}
#aboutBox .txtBox .lineDown p::after,
#serviceBox .titleBox .lineDown p::after{content: '';width: 1px;height: inherit;left: 50%;margin-left: -.5px;bottom: 0;position: absolute;width: 1px; background: #fff; opacity:1;animation : lineDown 2s cubic-bezier(.77,0,.175,1) infinite;}

.workBox {position: relative;z-index: 3;overflow: hidden;}
.workBox .workCarousel{cursor: pointer;}
.workCarousel .work-items {transition-timing-function: linear;display: -webkit-box;position: relative;width: 100%;height: 100%;}
.workCarousel .work-items .work-item {-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;overflow: hidden;width: 33.333%;height: 100%;}
.workCarousel .work-items .work-item img {width: 100%;height: auto;transition: transform 2.6s cubic-bezier(.19, 1, .22, 1);transform: scale(1);}
.workCarousel .work-items .work-item:hover img{transform: scale(1.1);}
.workCarousel .work-items .work-item ul{position: absolute;display: flex;align-items: center;z-index: 100;bottom: 4%;right: 5%;}
.workCarousel .work-items .work-item ul li{color:var(--black-color);font-size:17px;font-weight: 500;}
.workCarousel .work-items .work-item ul li span{position: relative;display: inline-block;margin: 0 6px;}
.workCarousel .work-items .work-item ul li span:after{content: '';width: 2px;height: 2px;background: #616161;position: absolute;top: 13px;right: -9px;}
.workCarousel .work-items .work-item ul li span:last-child:after{display:none;}
.workCarousel .work-items .work-item ul li h2,
.workCarousel .work-items .work-item ul li div{position: relative;padding-left: 20px;}
.workCarousel .work-items .work-item ul li h2:after,
.workCarousel .work-items .work-item ul li div:after{content: '';width: 2px;height: 15px;background: #616161;position: absolute;top: 4px;left: 7px;}

.mouseWrap{position: relative;overflow: hidden;}
.mouseWrap #mouse-circle {position: absolute;width: 64px;height: 64px;margin: -32px 0px 0px -32px;border: 1px solid #000000;
    border-radius: 50%;pointer-events: none !important;box-shadow: 0 0 16px rgba(255, 255, 255, 0);z-index:10000}

.company{}
.company .info{width: calc(100% - 6%);height: 50vh;border-radius: 15px;background: #000;margin: 7em auto 0;position: relative;display: grid;grid-template-columns: 1fr 1fr;}
.company .info .videoBox{overflow: hidden;}
.company .info .videoBox video{height: 100%;border-radius: 15px;}
.company .info .titleBox{color: var(--white-color);position: relative;}
.company .info .titleBox p{font-size: 100px;color: #8f8f8f;font-weight: 900;background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 10s infinite linear;
	position: absolute;line-height: 1;top: 50%;left: 15%;text-transform: uppercase;transform: translate(0, -50%);margin-top:0;}
.company .info p{font-size: 18px;line-height: 1.8;margin-top: 50px;}

.companyPin{width: 100%;height: 100%;position: relative;/*z-index: -1;*/}
.companyPin .pin{display: grid;grid-template-columns: 1fr 1fr;}
.companyPin .pin .pin-spacer{height:auto !important;padding:inherit !important;}
.companyPin .pin .pinSection{color: var(--black-color);margin: 8em 5em;}
.companyPin .pin .pinSection h3{font-size:48px;font-weight: 800;}
.companyPin .pin .pinSection h3 span{font-size: 17px;display: block;font-weight: 400;letter-spacing: 0.5em;margin-bottom: 10px;}
.companyPin .pin .pinSection .threeD{margin: 10vh 0;border-radius: 15px;overflow: hidden;}
.companyPin .pin .pinSection .threeD video{width: 80%;height: 100%;border-radius: 15px;}
.companyPin .pin .txtCon{border-left: 1px solid #cbcbcb;}
.companyPin .pin .txtCon .txt{padding: 15em 6em 7em;}
.companyPin .pin .txtCon .txt p{color: var(--black-color);font-size: 18px;line-height: 1.8;font-weight: 500;}
.companyPin .pin .txtCon .txt p:nth-child(2){margin: 2em 0 0;}
.companyPin .pin .txtCon .txt p:nth-child(3){margin: 2em 0 4em;}
.companyPin .pin .txtCon .txt p:nth-child(4){font-size: 22px;font-weight: 700;}
.companyPin .pin .txtCon .txt p i{margin-right: 5px;color: #ff4900;}
.companyPin .pin .txtCon .logo{padding: 9em 6em;color: #fff;width: calc(100% - 12em);background: url(../img/img_jbien/content/jb_ci_w.png) no-repeat #2f3035 right;}
.companyPin .pin .txtCon .logo strong{font-size: 50px;font-weight: 700;color: #fff;position: relative;width: 100%;display: block;}
.companyPin .pin .txtCon .logo strong span{font-size: 16px;display: block;color: #fff;position: absolute;top: 25px;width: 100%;left: 17em;}
.companyPin .pin .txtCon .logo p{margin: 2em 0 0;line-height: 1.8;font-size: 18px;}
.companyPin .pin .txtCon .logo p b{display:block;}


.company .promise{width: 100%;}
.company .promise .itemsStart{}
.company .promise .itemsStart .item{position: relative;border-bottom: 1px solid #cbcbcb;display: flex;align-items: center;height: 30vh;}
.company .promise .itemsStart .item .number{font-size: 27px;line-height: 1;font-weight: 800;color: var(--black-color);text-align: center;width: 40%;text-transform: uppercase;}
.company .promise .itemsStart .item .number b{font-size: 18px;font-weight: 900;position: absolute;top: 13%;right: 5%;}
.company .promise .itemsStart .item .number u{color: #2797b0;text-decoration: none;}
.company .promise .itemsStart .item .number .n1{color: #9b27b0;}
.company .promise .itemsStart .item .number .n2{color: #0ebd7c;}
.company .promise .itemsStart .item .number .n3{color: #ff9800;}
.company .promise .itemsStart .item .number .n4{color: #e91e63;}
.company .promise .itemsStart .item .number span{display: block;font-size: 15px;color: #777777;font-weight: 500;font-family: 'IBM Plex Sans KR', sans-serif;margin-top: 15px;}

.company .promise .itemsStart .item .con{border-left: 1px solid #cbcbcb;padding: 0 3em;width: 60%;}
.company .promise .itemsStart .item .con p{font-size: 30px;line-height: 1;color: #000;font-weight: 800;}
.company .promise .itemsStart .item .con p span{font-size: 16px;margin-left: 15px;color: #a7a7a7;font-weight: 500;}
.company .promise .itemsStart .item .con p span .xi-playR{transform: rotate(180deg);}
.company .promise .itemsStart .item .con strong{font-size: 23px;font-weight: 700;margin: 30px 0 15px;color: #000;display: block;}
.company .promise .itemsStart .item .con em{font-size: 18px;color: #4b4b4b;}


.backBg{width: 50%;height: 30vh;position: absolute;left: 0;background: #fff;bottom: 0;}
.black .pattern{margin: 8em 0 0;height: 3rem;background-size: 10px 10px;}


/* === ¼­ºñ½º === */
#serviceBox{}
#serviceBox .titleBox{text-align: center;position: relative;width:100%;height: 100vh;display: flex;justify-content: center;flex-direction: column;}
#serviceBox .titleBox h1{font-size: 18px;line-height: 4;font-weight: 400;}
#serviceBox .titleBox p{font-size: 250px;text-align: center;text-transform: uppercase;line-height: 0.8;font-weight: 900;color: #393939;}
#serviceBox .titleBox span{display: block;font-size: 25px;margin-bottom: 20px;font-weight: 600;}
#serviceBox .titleBox em{line-height: 1.6;font-size: 17px;margin-top: 25px;display: block;}
#serviceBox .titleBox .lineDown {bottom: 2em;}


#serviceWrap{background:#313131;}
#serviceCon{position: relative;padding-top: 8em;}
#serviceCon h2{font-size: 30px;color: #fff;border-top: 1px solid #ababab;border-bottom: 1px solid #ababab;padding: 15px 0;width: 450px;text-align: center;margin: 0 auto;}
.service {position: relative;z-index: 3;overflow: hidden;padding: 8em 0;}
.service .serviceCarousel {-webkit-box-align: center;-webkit-align-items: center;-moz-box-align: center;-ms-flex-align: center;display: -webkit-box;align-items: center;text-align: center;}
.service .serviceCarousel-1 {margin-right: -300px;margin-bottom: 11px;}
.service .serviceCarousel-2 {margin-left: -300px;}

.service .serviceCarousel .serviceItems {-webkit-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;-moz-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;-o-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;display: -webkit-box;
  position: relative;width: 100%;height: 250px !important;margin-bottom: 1em;transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;}

.service .serviceCarousel .serviceItem {-webkit-flex-shrink: 0;-ms-flex-negative: 0;-webkit-border-radius: 16px;-moz-border-radius: 16px;
  flex-shrink: 0;overflow: hidden;width: 300px !important;height: 100%;margin-right: 11px;background:var(--white-color);border-radius: 16px;
  display: flex;flex-direction: column;justify-content: center;align-items: center;}

.service .serviceCarousel .serviceItem h3{font-size: 18px;font-weight: 500;margin-top: 25px;}
.service .serviceCarousel .serviceItem img {width: 185px;height: auto;}

.processWrap{padding: 1em 3% 11em;background: #212c54;color: var(--white-color);margin-top: -1px;}
.processWrap .titBox{text-align: center;margin: 7em 0 2em;color:var(--white-color);}
.processWrap .titBox h2{font-size: 50px;}
.processWrap .titBox p{font-size: 22px;line-height: 1.7;margin-top: 45px;font-weight: 500;}
.processWrap ul{display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr;grid-column-gap: 100px;}
.processWrap ul li{border-bottom: 1px solid #6d7283;padding-bottom: 60px;position: relative;margin-top: 8em;color: var(--white-color);}
.processWrap ul li em{font-size: 20px;position: absolute;left: 0;font-weight: 600;top: -10px;}
.processWrap ul li h3{font-size: 28px;margin-bottom: 25px;margin-left: 35px;color: var(--white-color);}
.processWrap ul li span{    font-size: 19px;text-align: left;display: block;line-height: 1.8;padding-left: 35px;}

.businessWrap{display: grid;grid-template-columns: 40% 60%;margin: 0 3%;}
.businessWrap .title{padding: 7em 0;}
.businessWrap .title h2{font-size: 100px;color: #161616;}
.businessWrap .busiBox{border-left: 1px solid #a3a3a3;padding: 10em 0 6em 6em;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;grid-column-gap: 100px; }
.businessWrap .busiBox .bc{margin-bottom: 6em;}
.businessWrap .busiBox .bc h3{font-size: 32px;color: var(--black-color);font-weight: 800;letter-spacing: -0.03em;}
.businessWrap .busiBox .bc p{font-size: 19px;color: #191919;line-height: 1.8;margin-top: 30px;}
.businessWrap .busiBox .bc:last-child{margin-bottom:0;}


/* === ÇÁ·ÎÁ§Æ® ¹®ÀÇ === */
.contactWrap{background-color: var(--background-color);padding: 12em 0 0;}
.contactWrap .title{text-align: center;color: var(--white-color);margin-bottom: 5em;position: relative;z-index: 1;}
.contactWrap .title h1{font-size: 100px;}
.contactWrap .title span{position: absolute;font-size: 250px;color: #181818;left: 50%;z-index: -1;transform: translate(-50%, 0);width: 100%;bottom: -70px;font-weight: 700;}
.contactWrap .title p{font-size: 22px;line-height: 1.7;margin: 1em 0 5em;}
.contactWrap .title i{position: relative;display: block;background: var(--background-color);padding-bottom: 55px;}
.contactWrap .title i img{width: 13px;margin-top: -6px;opacity: 0.5;}
.contactWrap .title i:after{content: '';opacity: 0.5;width: 100%;height: 0.5px;display: block;background: var(--white-color);right: 50%;position: absolute;top: 0px;transform: translate(101%, -50%);}
.contactWrap .title i:before{content: '';opacity: 0.5;width: 100%;height: 0.5px;display: block;background: var(--white-color);left: 50%;position: absolute;top: 0px;transform: translate(-101%, -50%);}

.contactTable{margin: 0 15%;}
.contactTable .contactBox{}
.contactTable .contactBox ul{margin-bottom: 5em;}
.contactTable .contactBox h2{position: relative;font-size: 30px;color: var(--white-color);margin-bottom: 0.5em;font-weight: 500;border-bottom: 2px solid var(--white-color);padding-bottom: 20px;padding-left: 35px;}
.contactTable .contactBox h2 em{position: absolute;font-size: 17px;top: 0;left: 0;color: #f39303;}
.contactTable .contactBox .ib01{display: grid;grid-template-columns: 1fr 1fr;grid-column-gap: 50px;}
.contactTable .contactBox .ib01 li label{display: block;font-size: 18px;color: #bfbfbf;margin: 20px 0 10px;font-weight: 500;}
.contactTable .contactBox .ib01 li input{width: calc(100% - 40px);background: var(--background-color);border: 1px solid #575757;border-radius: 0;color: var(--white-color);padding: 5px 20px;font-size: 17px;}
.contactTable .contactBox .ib01 li select{font-family: 'Pretendard Variable';width: 100%;background: var(--background-color);border: 1px solid #575757;border-radius: 0;color: var(--white-color);padding-left: 5px;font-size: 16px;height: 52px;vertical-align: middle;}
.contactTable .contactBox .ib01 li input[type=file]::file-selector-button {width: 120px;height: 40px;background:#56467b;border: 0;border-radius: 3px;cursor: pointer;color: var(--white-color);font-size:15px;margin-left:-15px;margin-right:15px;}
.contactTable .contactBox .ib01 li label em{font-size: 14px;color: #6f6f6f;}

.contactTable .contactBox .ib02{margin: 0;}
.contactTable .contactBox .ib02 li label{display: block;font-size: 18px;color: #bfbfbf;margin: 20px 0 10px;font-weight: 500;}
.contactTable .contactBox .ib02 li input{width: calc(100% - 40px);background: var(--background-color);border: 1px solid #575757;border-radius: 0;color: var(--white-color);padding: 5px 20px;font-size: 17px;}
.contactTable .contactBox .ib02 li textarea{width: calc(100% - 40px) !important;background: var(--background-color);border: 1px solid #575757;border-radius: 0;color: var(--white-color);padding: 5px 20px;font-size: 17px;}

.contactTable .contactBox .ib01 .keyBox legend label{text-indent: -9999px;}
.contactTable .contactBox .ib01 .keyBox input{background: var(--background-color) !important;border: 1px solid #575757 !important;border-radius: 0 !important;color: var(--white-color);font-size: 18px !important;font-weight: 400 !important;}
.contactTable .contactBox .ib01 .keyBox span {color: #cbcbcb !important;letter-spacing: 0 !important;display: inline-block !important;margin-left: 10px !important;font-size: 16px !important;}

.contactTable .contactBox .ib01 .personal{display: flex;flex-direction: row;align-items: center;justify-content: flex-start;padding: 30px 0;}
.contactTable .contactBox .ib01 .personal label{color: #ebebeb;}
.contactTable .contactBox .ib01 .personal label a{margin-left: 10px;border-bottom: 1px solid #515151;color: #5f5f5f;font-size: 15px;margin-top: -3px;display: inline-block;vertical-align: middle;}
.contactTable .contactBox .ib01 .personal input{width: 20px;height: 20px;margin-top: 11px;margin-right: 15px;background: #141212;}

.contactTable .contactBox .btn_confirm{padding: 3em 0;}
.contactTable .contactBox .btn_confirm input{display: block;font-size: 19px;font-weight: 700;width: 250px;height: 80px;line-height: 80px;border-radius: 0;position: relative;vertical-align: middle;background: #e3e3e3;
    color: var(--black-color);margin: 0 auto;border: 0 solid;box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);outline: 1px solid;outline-color: rgba(255, 255, 255, 0);outline-offset: 0px;
    text-shadow: none;-webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);outline-color: rgba(255, 255, 255, 0.5);outline-offset: 0px;}
.contactTable .contactBox .btn_confirm input:hover{border: 1px solid;box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 45px rgba(255, 255, 255, 0.2);outline-offset: 15px;outline-color: rgba(255, 255, 255, 0);text-shadow: 1px 1px 2px #427388;background: transparent;color: var(--white-color);}

.contactTable #bo_list_total{color: #fff;font-size: 17px;}
.contactTable .btn_bo_user{text-align: right;margin-top: -50px;}
.contactTable .btn_bo_user a{background: #000;color: #fff;padding: 15px 25px;border-radius: 5px;width: 100px;text-align: center;margin-bottom: 10px;}
.contactTable #bo_v_atc{background:#fff;}
.contactTable .mtt{display:none;}
.contactWrap .tbl_head01{padding: 30px 0;}


/* === Æ÷Æ®Æú¸®¿À === */
.workWrap{padding: 15em 10% 5em;}
.workWrap .title{text-align: center;}
.workWrap .title h1{font-size: 9vw;line-height: 1;text-transform: uppercase;}
.workWrap .title span{font-size: 1vw;margin-top: 2em;display: block;}
.workWrap .title .jtD{padding: 0;margin: 0 auto;width: 300px;height: 160px;}
.workWrap .title .jtD .jtBtn{padding:0;margin:0;width:200px;height:60px;float: left;background-color:#404040;overflow: hidden;
  z-index:20;border-radius:5px;color: #fff;position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.workWrap .title .jtD .jtBtn em{padding-top: 12px;display: block;font-size: 16px;line-height: 1.2;}
.workWrap .title .jtD .jtBtn:hover{-webkit-animation: ButtonScale 0.5s ease-out;animation: ButtonScale 0.5s ease-out;}
.workWrap .title .jtD .drop{height:50px;width:25px;border-radius:50%;background: #404040;position:relative;transform: rotate(-45deg);top:47px;left:61px;}
.workWrap .title .jtD .jtBtn:hover + .drop {-webkit-animation: ButtonScale 1s ease-out;animation: DropScale 1s ease-out;}

.workWrap .bgBox{width: 100%;height: 80vh;background: #fff;position: absolute;top: 0;left: 0;z-index: -1;box-shadow: 17px 18px 20px 8px #fff;}
.workWrap .bgBox1{width: 100%;height: 20vh;background: #fff;position: absolute;bottom: 0;left: 0;z-index: -1;box-shadow: -20px -20px 20px 8px #fff;}
.workWrap .txtBox{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;z-index: -10;}
.workWrap .txtBox p{font-size: 5vw;text-align: center;color: #dbdbdb;font-weight: 900;background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
	-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 10s infinite linear;opacity: 0.1;line-height: 1;}

.workCon{}
.workCon .boCate{margin: 4em 0 5em;border-top: 1px solid #818181;position: relative;}
.workCon .boCate .admin{position: absolute;right: 0;top: 50%;transform: translate(-50%, -50%);}
.workCon .boCate .cate{display: flex;justify-content: center;padding: 2.5em 0;}
.workCon .boCate .cate li{margin: 0 3em;}
.workCon .boCate .cate li a{font-size: 20px;color: #a5a5a5;position: relative;font-weight: 500;}
.workCon .boCate .cate li a#bo_cate_on,
.workCon .boCate .cate li a:hover{color: #000;}
.workCon .boCate .cate li a:after {content: '';position: absolute;bottom: -15px;left: -20%;width: 0;height: 1px;background: #000;webkit-transition: all 0.5s;transition: all 0.5s;}
.workCon .boCate .cate li a#bo_cate_on:after,
.workCon .boCate .cate li a:hover:after{width: 140%;webkit-transition: all 0.5s;transition: all 0.5s;}
.workCon .gridBox{/*display: grid;grid-template-columns: 1fr 1fr;grid-column-gap: 70px;*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;max-width: 1400px;margin: 0 auto;}
.workCon .gridBox .item{position: relative;margin-bottom: 7em;}
.workCon .gridBox .item:nth-child(even){margin-top:3em;}
.workCon .gridBox .item a{}
.workCon .gridBox .item a .imgBox{width: 100%;height: 300px;overflow: hidden;border-radius: 15px;}
.workCon .gridBox .item a .imgBox img{width:100%;border-radius: 15px;transition: transform 2.6s cubic-bezier(.19, 1, .22, 1);transform: scale(1);}
.workCon .gridBox .item a:hover .imgBox img{transform: scale(1.1);}
.workCon .gridBox .item a .caption{margin-top: 20px;}
.workCon .gridBox .item a .caption .inner{}
.workCon .gridBox .item a .caption span{font-size: 18px;}
.workCon .gridBox .item a .caption h4{font-size: 24px;font-weight: 500;}

.workCon .gridBox .item .txt{display:none;}
.workCon .gridBox .item h3{background:#fff;padding-bottom:3em;color: #858585;font-weight: 400;}

.workCon .gridBox .item .no_image {width: 600px;height: 300px;background-color: #f9f9f9;font-size: 18px;line-height: 300px;text-align: center;color: #999;}

.pages {position: absolute;left: 50%;transform: translate(-50%, -50%);}
.workCon .gridBox .itemBg{background: #fff;margin: -6.5em 0;padding-bottom: 7em;padding-top: 2em;}

/*
.workCon .gridBox .item a .caption{background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 2;-moz-opacity: 0;-khtml-opacity: 0;
    -webkit-opacity: 0;opacity: 0;-ms-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;-webkit-transition: all 0.4s ease;border-radius: 15px;}
.workCon .gridBox .item a .caption .inner{position: absolute;-moz-opacity: 0;-khtml-opacity: 0;-webkit-opacity: 0;opacity: 0;bottom: 30px;
    padding-left: 10%;width: 100%;-o-transform: translateY(-30%);-ms-transform: translateY(-30%);-moz-transform: translateY(-30%);-webkit-transform: translateY(-30%);
    -ms-transition: all 0.4s cubic-bezier(0.215, .61, 0.355, 1) 0.2s;-moz-transition: all 0.4s cubic-bezier(0.215, .61, 0.355, 1) 0.2s;-o-transition: all 0.4s cubic-bezier(0.215, .61, 0.355, 1) 0.2s;-webkit-transition: all 0.4s cubic-bezier(0.215, .61, 0.355, 1) 0.2s;}
.workCon .gridBox .item a .caption span{}
.workCon .gridBox .item a .caption h4{font-size: 22px;margin-bottom: 3px;color: #ffffff;padding-top: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 90%;display: block;font-weight: 500;}
.workCon .gridBox .item a:hover .caption {-moz-opacity: 1;-khtml-opacity: 1;-webkit-opacity: 1;opacity: 1;-ms-filter: alpha(opacity=100);filter: alpha(opacity=100);}
.workCon .gridBox .item a:hover .caption .inner {-moz-opacity: 1;-khtml-opacity: 1;-webkit-opacity: 1;opacity: 1;-ms-filter: alpha(opacity=100);filter: alpha(opacity=100);bottom: 0px;padding-left: 5%;width: 100%;}

.workCon .gridBox .item .txt{display:none;}*/

.workPin{max-width: 1600px;margin: 0 auto;}
.workPin .pin1{display: grid;grid-template-columns: 35% 65%;margin: 5em 0;}
.workPin .pin1 .pin-spacer{height: auto !important;padding: inherit !important;}
.workPin .pin1 .pin-spacer,
.workPin .pin1 .pin-spacer .pinSection1{top: 0 !important;}
.workPin .pin1 .pinSection1 .txtBox{margin-top: 8em;margin-right: 50px;width: calc(100% - 150px);background: #212121;border-radius: 8px;padding: 50px 50px 20px;color: #fff;}
.workPin .pin1 .pinSection1 .txtBox h1{font-size: 32px;}
.workPin .pin1 .pinSection1 .txtBox p{font-size: 17px;margin: 20px 0 30px;color: #999;}
.workPin .pin1 .pinSection1 .txtBox ul li{margin-bottom: 20px;font-size: 18px;border-bottom: 1px dashed #4f4f4f;padding-bottom: 20px;}
.workPin .pin1 .pinSection1 .txtBox ul li span{width: 150px;display: inline-block;font-weight: 500;}
.workPin .pin1 .pinSection1 .txtBox ul li em{font-weight: 200;}
.workPin .pin1 .pinSection1 .txtBox .urlLink{margin-bottom: 2em;}
.workPin .pin1 .pinSection1 .txtBox .urlLink a{display: block;font-size: 18px;font-weight: 400;width: 145px;height: 145px;line-height: 145px;
    border-radius: 50%;position: relative;vertical-align: middle;margin: 2.5em auto 0;outline: 1px solid;-webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);border: 1px solid;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 45px rgba(255, 255, 255, 0.2);outline-offset: 0;outline-color: rgba(255, 255, 255, 0);background: transparent;color: var(--white-color);text-align: center;}
.workPin .pin1 .pinSection1 .txtBox .urlLink a:hover{background: var(--white-color);color: var(--black-color);text-shadow: none;font-weight: 500;border: 1px solid #fff;outline-offset: 15px;outline-color: rgb(255 255 255 / 45%);}

.workPin .pin1 .conBox{}
.workPin .pin1 .conBox .con{}
.workPin .pin1 .conBox .con img{text-align: center;}
.workPin .pin1 .conBox .con iframe{width: 95.9%;height: 560px;margin: 0 auto;text-align: center;position: relative;left: 50%;transform: translate(-50%, 0);}

.workPin .template-form{text-align: center;}
.workPin .template-form .listbtn{width: 200px;height: 60px;font-size: 17px;margin-bottom: 8em;background: #212121;}
.workPin .template-form .listbtn:hover{background: #56467b;}


/* ---- °³ÀÎÁ¤º¸Ãë±Þ¹æħ ---- */

.personal{margin: 0 5% 7em;}
.personal .txtBox{}
.personal .txtBox h1{font-size: 5vw;text-align: center;margin: 2em 0;}
.infor h1 {font-size:28px; margin-bottom:40px;position: relative;}
.infor h1 span{font-size: 14px;position: absolute;right: 0;top: 13px;font-weight: 500;color: #db1b1b;}
.infor {font-size: 15px; margin:0 1%;}
.infor h5 {margin: 35px 0 5px; font-weight: bold;}
.infor span {display: block; color: #949494;}
.infor .tbox {background: #fbfbfb; padding: 10px 15px; margin: 20px 0 40px; border: 1px dashed #dadada; border-radius: 16px;}
.infor .tbox p {color: #757575; margin: 10px 0;}
.infor .tbox p strong {display: block; color: #3c3838;}
.infor .tbox1 {text-align:center;}
.infor .tbox1 p strong {margin:10px 25px 25px; font-size:16px;}

/* === 404 === */
.error{text-align: center;padding: 5em 0;}
.error .imgBox{display: none;}
.error .imgBox img{width: 450px;}
.error h1{font-size: 8vw;-webkit-text-stroke: 1px #fff;color: transparent;line-height: 1;}
.error h1 strong{font-size: 9vw;display: block;-webkit-text-stroke: transparent;color: #fff;}
.error p{margin: 3em 0;color: #fff;}
.error a{font-size: 20px;color: #fff;}
.error a:hover{color:#e72526;}

/*
===============================================
¹ÝÀÀÇü css
===============================================
*/

@media all and (min-width:1921px){
	/* === ¾î¹Ù¿ô === */
	#aboutBox .txtBox p {font-size: 120px;}
	#aboutBox .txtBox ul {font-size: 30px;}
	#aboutBox .txtBox em {font-size: 20px;margin: 40px auto 0;}
	#aboutBox .txtBox .scrollDown span{top: -213px;}
	#aboutBox .txtBox .lineDown {height: 150px;}
	.workCarousel .work-items .work-item ul li {font-size: 22px;}
	.workCarousel .work-items .work-item ul li h2,
	.workCarousel .work-items .work-item ul li div{font-size: 18px;padding-left: 30px;}
	.workCarousel .work-items .work-item ul li h2:after,
	.workCarousel .work-items .work-item ul li div:after{height: 20px;left: 11px;}
	.company .info .titleBox p {font-size: 120px;}
	.companyPin .pin .pinSection h3 {font-size: 60px;}
	.companyPin .pin .pinSection h3 span {font-size: 22px;margin-bottom: 20px;}
	.companyPin .pin .pinSection .threeD {margin: 20vh 0;}
	.companyPin .pin .txtCon .txt p {font-size: 20px;}
	.companyPin .pin .txtCon .txt p:nth-child(4) {font-size: 28px;}
	.companyPin .pin .txtCon .txt p:nth-child(4):after {width: 515px;}
	.companyPin .pin .txtCon .logo strong {font-size: 70px;}
	.companyPin .pin .txtCon .logo strong span {font-size: 20px;top: 38px;left: 19em;}
	.companyPin .pin .txtCon .logo p {font-size: 24px;}
	.company .promise .itemsStart .item .number {font-size: 34px;}
	.company .promise .itemsStart .item .number span {font-size: 17px;}
	.company .promise .itemsStart .item .con {padding: 0 6em;}
	.backBg {height: 50vh;}

	/* === ¼­ºñ½º === */
	#serviceBox .titleBox h1 {font-size: 20px;}
	#serviceBox .titleBox span {font-size: 40px;}
	#serviceBox .titleBox p {font-size: 350px;}
	#serviceBox .titleBox em {font-size: 20px;margin-top: 32px;}
	#serviceCon h2 {font-size: 40px;width: 570px;}
	.service .serviceCarousel .serviceItem h3 {font-size: 20px;}
	.processWrap .titBox h2 {font-size: 60px;}
	.processWrap .titBox p {font-size: 24px;}
	.processWrap ul {grid-column-gap: 160px;}
	.processWrap ul li h3 {font-size: 32px;}
	.processWrap ul li span {font-size: 22px;}
	.businessWrap .title h2 {font-size: 130px;}
	.businessWrap .busiBox .bc h3 {font-size: 35px;}
	.businessWrap .busiBox .bc p {font-size: 20px;}

	.contactWrap {padding: 15em 0 0;}
	.contactWrap .title {margin-bottom: 10em;}
}

@media (max-width:1600px) and (max-height:768px){
	.company .info .titleBox p {font-size: 80px;}
}

@media all and (max-width:1600px){
	.workWrap {padding: 15em 3% 5em;}
}

@media all and (max-width:1700px){
	.businessWrap .title h2 {font-size: 80px;}
	.businessWrap {grid-template-columns: 35% 65%;}
	.companyPin .pin .txtCon .txt p br{display:none;}

	.workWrap .title h1 {font-size: 11vw;}
	.workWrap .title span {font-size: 22px;}

	.workPin {max-width: 100%;margin: 0 5%;}
	.workPin .pin1 {grid-template-columns: 40% 60%;}

	.workPin .pin1 .conBox .con iframe{height: 407px;}

}


@media all and (max-width:1500px){
	.workCarousel .work-items .work-item ul {align-items: flex-end;flex-direction: column;}
	
	.companyPin .pin .pinSection h3 {font-size: 38px;}
	.companyPin .pin .txtCon .txt {padding: 15em 4em 7em;}
	.companyPin .pin .txtCon .logo {padding: 9em 4em; width: calc(100% - 8em);}

	.company .promise .itemsStart .item {flex-direction: column;justify-content: center;padding: 5em 0;}
	.company .promise .itemsStart .item .number{width: 100%;}
	.company .promise .itemsStart .item .number  br{display:none;}
	.company .promise .itemsStart .item .con {border-left: 0;width: 80%;margin-top: 3em;}



}

@media all and (max-width:1350px){
	.processWrap ul {grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;}
	.businessWrap .busiBox {grid-template-columns: 1fr;grid-template-rows: inherit;grid-column-gap: inherit;}
	.businessWrap .busiBox .bc {margin-bottom: 4em;}

	.contactWrap .title h1 {font-size: 85px;}
	.contactWrap .title p {font-size: 20px;margin: 1em 0 7em;}
	.contactWrap .title span {font-size: 200px;bottom: -30px;}
	.contactTable {margin: 0 7%;}
	.contactTable .contactBox h2 {font-size: 26px;border-bottom: 1px solid var(--white-color);padding-bottom: 12px;}

	.workCon .gridBox{max-width: 100%;display: grid;grid-template-columns: 1fr 1fr;grid-column-gap: 80px;justify-content: space-between;}
	.workCon .gridBox .item a .imgBox {height: auto;}
	.workWrap .txtBox p {font-size: 7vw;}
}

@media all and (max-width:1280px){
	.company .info .titleBox p {font-size: 80px;}
	.company .info .videoBox video {width: 100%;}

	.companyPin .pin .pin-spacer {margin: 120px 7% !important;}

	.workPin .pin1 .pinSection1 .txtBox {width: calc(100% - 110px);padding: 50px 30px 20px;}
	.workPin .pin1 .pinSection1 .txtBox h1 {font-size: 28px;}
	.workPin .pin1 .pinSection1 .txtBox ul li span {width: 100%;display: block;}

	.workPin .pin1 .conBox .con iframe {height: 310px;}
}

@media all and (max-width:1150px){
	.workCarousel .work-items .work-item ul li span {display: block;margin: 0;text-align: right;}
	.workCarousel .work-items .work-item ul li span:after{display:none;}
	.workCarousel .work-items .work-item ul li h2,
	.workCarousel .work-items .work-item ul li div{padding: 0 20px;margin-top: 30px;}
	.workCarousel .work-items .work-item ul li h2:before,
	.workCarousel .work-items .work-item ul li div:before{content: '';width: 2px;height: 15px;background: #616161;position: absolute;top: 4px;right: 7px;}

	.company .info {height: 40vh;}
	.companyPin .pin {display: flex;flex-direction: column;}
	.companyPin .pin .pinSection .threeD{display:none;}
	.companyPin .pin .pinSection {margin: 8em 5%;}
	.companyPin .pin .txtCon .logo {padding: 6em 5%;width: calc(100% - 10%);}
	.companyPin .pin .txtCon .txt {padding: 0em 5% 7em;}
	.backBg{display:none;}

	#serviceBox .titleBox p {font-size: 180px;}
	.businessWrap {grid-template-columns: 100%;}
	.businessWrap .title {padding: 3em 0;}
	.businessWrap .busiBox {border-left: none;padding: 0 0 7em;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;grid-column-gap: 80px;}
	.businessWrap .busiBox .bc h3 {font-size: 26px;}
	.businessWrap .busiBox .bc p {font-size: 17px;}

	.company .promise .itemsStart .item{flex-direction: row;padding: 0;}
	.company .promise .itemsStart .item .number {width: 40%;}
	.company .promise .itemsStart .item .con {border-left: 1px solid #cbcbcb;width: 60%;margin-top: 0;}
}

@media all and (max-width:1024px){
	.mouseWrap #mouse-circle{display:none;}
	.contactWrap .title span{display:none;}

	.workWrap {padding: 10em 3% 5em;}
	.workWrap .title span {font-size: 20px;}
	.workCon .gridBox {grid-column-gap: 35px;}
	.workCon .gridBox .item a .caption span {font-size: 16px;}
	.workPin {margin: 0 3%;}

}

@media all and (max-width:960px){
	#aboutBox .txtBox p {font-size: 70px;}
	#aboutBox .txtBox ul {font-size: 20px;}

	.company .info {margin: 5em auto 0;}
	.black .pattern {margin: 5em 0 0;}

	.processWrap .titBox {margin: 5em 0 1em;}
	.processWrap .titBox h2 {font-size: 38px;}
	.processWrap .titBox p {font-size: 19px;margin-top: 30px;font-weight: 300;}
	.processWrap ul li h3 {font-size: 24px;margin-left: 0;}
	.processWrap ul li em {font-size: 17px;top: -30px;}
	.processWrap ul li span {font-size: 17px;padding-left: 0;}
	.processWrap ul {grid-column-gap: 60px;}
	.processWrap ul li {padding-bottom: 35px;}
	.businessWrap .title h2 {font-size: 70px;}

	.contactWrap .title h1 {font-size: 80px;}
	.contactTable .contactBox .ib01 {grid-column-gap: 25px;}

	.company .promise .itemsStart .item .number br{display:block;}

	.workPin .pin1 {grid-template-columns: 100%;margin: 1em 0 5em;margin-bottom: 3em;}
	.workPin .pin1 .pinSection1 .txtBox{margin-right: 0;width: calc(100% - 60px);position: relative;}
	.workPin .pin1 .pinSection1 .txtBox ul li span {width: 150px;display: inline-block;}
	.workPin .pin1 .pinSection1 .txtBox .urlLink {position: absolute;right: 10px;top: -28px;}
	.workPin .pin1 .conBox {margin-top: 2em;}
	.workPin .pin1 .pinSection1 .txtBox .urlLink a {font-size: 15px;width: 120px;height: 120px;line-height: 120px;}
	.workPin .template-form .listbtn {margin-bottom: 5em;}
}

@media all and (max-width:820px){
	#serviceBox .titleBox p {font-size: 130px;}
	.processWrap {padding: 1em 3% 7em;}
	.processWrap ul {grid-template-columns: 1fr;}
	.processWrap .titBox {text-align: left;}
	.processWrap .titBox p br{display:none;}
	.processWrap ul li {margin-top: 4em;padding-bottom: 30px;}
	.processWrap ul li:nth-child(1){border-top:1px solid #6d7283;padding-top: 4em;}
	.processWrap ul li:nth-child(1) em{top: 30px;}
	.processWrap .titBox p {font-size: 17px;}

	.workCon .gridBox {grid-column-gap: 0;grid-template-columns: 1fr;}
	.workCon .gridBox .item {margin-bottom: 4em;}
	.workCon .gridBox .item:nth-child(even) {margin-top: 0;}
	.workWrap .txtBox{display:none;}
}

@media all and (max-width:768px){
	#aboutBox .txtBox {height: 65vh;}
	#aboutBox .txtBox p {font-size: 60px;}
	#aboutBox .txtBox .scrollDown {bottom: 2em;right: 7%;}

	.company .info {height: 30vh;}
	.company .info .titleBox p {font-size: 60px;}

	.contactTable {margin: 0 10%;}
	.contactWrap .title h1 {font-size: 60px;}
	.contactWrap .title p {font-size: 18px;margin: 1em 0 5em;}
	.contactWrap .title i {padding-bottom: 0;}
	.businessWrap .busiBox {grid-template-columns: 1fr;grid-template-rows: inherit;grid-column-gap: inherit;}
	.businessWrap .busiBox .bc {margin-bottom: 3em;border-bottom: 1px solid #a3a3a3;padding-bottom: 3em;}
	.contactTable .contactBox .ib01 {grid-template-columns: 1fr;grid-column-gap: 0;}

	.workCon .boCate .cate li {margin: 0 2em;}
	.personal .txtBox h1 {font-size: 10vw;margin: 4em 0 3em;}
}

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

}

@media all and (max-width:640px){
	#aboutBox .txtBox {height: 60vh;margin-bottom: -3em;}
	#aboutBox .txtBox p {font-size: 50px;}
	#aboutBox .txtBox ul {font-size: 18px;}
	#aboutBox .txtBox .lineDown {left: 5%;bottom: -0.5em;}

	.companyPin .pin .pinSection {margin: 6em 5%;}
	 {display: none;}
	.companyPin .pin .pinSection h3 {font-size: 32px;}
	.companyPin .pin .txtCon .txt p:nth-child(1) br,
	.companyPin .pin .txtCon .txt p:nth-child(2) br,
	.companyPin .pin .txtCon .txt p:nth-child(3) br{display: none;}
	.companyPin .pin .txtCon .txt {padding: 0em 5% 5em;}
	.companyPin .pin .txtCon .logo{text-align: center;}
	.companyPin .pin .txtCon .logo strong span {position: inherit;top: 13px;left: 0;border-bottom: 0;padding-bottom: 30px;}

	.companyPin .pin .txtCon .logo strong {font-size: 45px;}
	.company .promise .itemsStart .item {flex-direction: column;justify-content: center;padding: 5em 5%;height: 100%;}
	.company .promise .itemsStart .item .number{width: 100%;}
	.company .promise .itemsStart .item .con {border-left: 0;width: 100%;margin-top: 3em;}

	#serviceBox .titleBox {height: 80vh;}
	#serviceBox .titleBox p {font-size: 80px;}
	#serviceCon {padding-top: 5em;}
	.service {padding: 5em 0;}
	#serviceBox .titleBox h1 {font-size: 17px;}

	.processWrap .titBox h2 {font-size: 32px;}
	.businessWrap .title h2 {font-size: 53px;}

	.contactWrap {padding: 9em 0 0;}
	.contactWrap .title {margin-bottom: 3em;}
	.contactWrap .title h1 {font-size: 45px;}
	.contactWrap .title p {font-size: 16px;margin: 1em 5% 5em;}
	.contactWrap .title p br{display:none;}
	.contactTable {margin: 0 5%;}
	.contactTable .contactBox h2 {font-size: 20px;}
	.contactTable .contactBox ul {margin-bottom: 3em;}
	.contactTable .contactBox .ib01 li input,
	.contactTable .contactBox .ib02 li input{height: 30px;font-size: 16px;}
	.contactTable .contactBox .ib01 li select {height: 42px;}
	.contactTable .contactBox .ib01 li label,
	.contactTable .contactBox .ib02 li label{font-size: 16px;}
	.contactTable .contactBox .ib02 li textarea {height: 150px !important;}
	.contactTable .contactBox .ib01 li input[type=file]::file-selector-button {width: 100px;height: 30px;font-size:14px;}
	.contactTable .contactBox .ib01 .keyBox{margin-top:30px;}
	.contactTable .contactBox .ib01 .keyBox label{display:none;}
	.contactTable .contactBox .ib01 .keyBox input{height: 38px !important;;}
	.contactTable .contactBox .ib01 .keyBox #captcha{text-align: center;}
	.contactTable .contactBox .ib01 .keyBox #captcha.m_captcha audio{width: 100%;}
	.contactTable .contactBox .ib01 .keyBox #captcha.m_captcha #captcha_img {margin: 7px auto;}
	.contactTable .contactBox .ib01 .personal {justify-content: center;}
	.contactTable .contactBox .btn_confirm {padding: 0 0 3em;}
	.contactTable .contactBox .btn_confirm input {font-size: 17px;height: 65px;line-height: 65px;}

	.workWrap {padding: 11em 5% 5em;}
	.workWrap .title h1 {font-size: 13vw;}
	.workWrap .title span {font-size: 17px;margin-top: 1em;}
	.workCon .boCate {margin: 1em 0 2em;}
	.workCon .boCate .cate li a {font-size: 17px;}
	.workCon .gridBox .item a .caption h4 {font-size: 22px;}
	.workWrap .title span i{display:block;}

	.workPin {margin: 0 5%;}
	.workPin .pin1 .pinSection1 .txtBox .urlLink {position: inherit;right: inherit;top: inherit;}
	.workPin .pin1 .pinSection1 .txtBox h1 {font-size: 24px;}
	.workPin .pin1 .pinSection1 .txtBox ul li {font-size: 16px;}
	.workPin .pin1 .pinSection1 .txtBox {padding: 50px 30px 10px;}

	.workPin .pin1 .conBox .con iframe {height: 260px;}
}

@media all and (max-width:550px){
	#aboutBox .txtBox {height: 75vh;margin-bottom: -5em;}
	#aboutBox .txtBox h1 {font-size: 16px;line-height: 1.8;}
	#aboutBox .txtBox p {font-size: 38px;}
	#aboutBox .txtBox ul {font-size: 16px;}
	#aboutBox .txtBox ul li:after {width: 2px;height: 2px;top: 13px;right: -12px;}
	#aboutBox .txtBox em {width: 260px;}
	#aboutBox .txtBox .lineDown {bottom: 1.5em;}

	.company .info {width: calc(100% - 10%);height: 210px;grid-template-columns: 1fr;margin: 3em auto 0;}
	.company .info .titleBox p {font-size: 40px;text-align: center;width: 100%;left: 50%;top: 50%;transform: translate(-50%, 40%);}
	.black .pattern {margin: 3em 0 0;}

	.companyPin .pin .pinSection h3 {font-size: 26px;}
	.companyPin .pin .txtCon .txt p {font-size: 17px;}
	.companyPin .pin .txtCon .txt p:nth-child(4) {font-size: 20px;}
	.companyPin .pin .txtCon .txt p:nth-child(4):after {width: 375px;}
	.company .promise .itemsStart .item .number {font-size: 25px;}
	.company .promise .itemsStart .item .number b {top: 6%;left: 5%;}

	.workCon .boCate .cate li {margin: 0 1em;}
	.workPin .pin1 .pinSection1 .txtBox ul li span {width: 110px;}
}

@media all and (max-width:430px){
	.companyPin .pin .txtCon .txt p:nth-child(4) br,
	.companyPin .pin .txtCon .txt p:nth-child(4):after{display:none;}
	#serviceCon h2 {font-size: 23px;width: 365px;}
}

@media all and (max-width:400px){
	#aboutBox .txtBox p {font-size: 30px;}
	#aboutBox .txtBox ul {font-size: 15px;}
	.company .info .titleBox p {font-size: 37px;transform: translate(-50%, 25%);}
	.companyPin .pin .pinSection h3 {font-size: 24px;}
	.companyPin .pin .pinSection h3 span {font-size: 14px;}
	.companyPin .pin .pinSection {margin: 6em 5% 4em;}
	.companyPin .pin .txtCon .txt p {font-size: 16px;}
	.companyPin .pin .txtCon .txt p:nth-child(4) {font-size: 18px;}
	.company .promise .itemsStart .item .con strong {font-size: 21px;}
	.company .promise .itemsStart .item .con em {font-size: 16px;}

	#serviceBox .titleBox p {font-size: 65px;}
	.workCon .boCate .cate li {margin: 0 0.5em;}
}