@import url("reset.css");


.main {width:100%; position:relative; box-sizing:border-box;}

.main .side-wrap {width:100%; max-width:1920px; position:fixed; left:50%; top:0; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); z-index:99;}

.main .navi {width:360px; height:100vh; box-sizing:border-box; position:absolute; left:0; top:0; padding-left:5%; border-right:1px solid #dedede; display:table; opacity:0;}
.main .navi.active {animation:fadeIn 0.8s ease-in-out both;}
.main .navi > .inner {width:100%; box-sizing:border-box; display:table-cell; vertical-align:middle;}
.main .navi ul {padding-top:150px;}
.main .navi ul li {width:100%; box-sizing:border-box; margin:25px 0; position:relative;}
.main .navi ul li a {display:block; width:100%; box-sizing:border-box; padding:5px 0; font-size:14px; font-weight:700; color:#ccc; letter-spacing:-0.5px;}
.main .navi ul li:before {content:""; width:0; height:0; border-radius:50%; background:#0080ff; position:absolute; right:-6px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); transition:width .3s ease-in-out;}
.main .navi ul li.on a {color:#000;}
.main .navi ul li.on:before {content:""; width:11px; height:11px;}
.main .navi ul li.on.ty-2 a {color:#fff;}

@keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} }

.main .btn-more {display:inline-block; vertical-align:middle; position:relative; margin-top:20px;}
.main .btn-more:before {content:""; width:60px; height:60px; border-radius:60px; box-sizing:border-box; position:absolute; left:0; top:50%; z-index:0; transition:all 0.4s ease-in-out; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
.main .btn-more a {display:block; width:100%; height:100%; position:relative; z-index:10; padding:0 30px;}
.main .btn-more p {display:inline-block; vertical-align:middle; font-size:16px; font-weight:500; box-sizing:border-box; padding-right:18px; position:relative;}
.main .btn-more p:before, .main .btn-more p:after {content:""; position:absolute; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
.main .btn-more p:before {width:10px; height:2px; right:0;}
.main .btn-more p:after {width:2px; height:10px; right:4px;}
.main .btn-more:hover:before {width:100%;}
.main .btn-more.ty-1:before {border:1px solid #0080ff;}
.main .btn-more.ty-1 p {color:#0080ff;}
.main .btn-more.ty-1 p:before, .main .btn-more.ty-1 p:after {background:#0080ff;}
.main .btn-more.ty-2:before {background:#0080ff;}
.main .btn-more.ty-2 p {color:#fff;}
.main .btn-more.ty-2 p:before, .main .btn-more.ty-2 p:after {background:#fff;}
.main .btn-more.ty-3 {margin-top:0;}
.main .btn-more.ty-3 a {padding:0;}
.main .btn-more.ty-3 p {color:#0080ff;}
.main .btn-more.ty-3 p:before, .main .btn-more.ty-3 p:after {background:#0080ff;}

.main .section {width:100%; box-sizing:border-box; position:relative; padding:150px 0;}
.main .section > .inner {width:100%; box-sizing:border-box;}
.main .section .cont-area {width:100%; max-width:1920px; box-sizing:border-box; margin:0 auto; position:relative; padding-left:360px;}
.main .section .cont-area > .wrap {width:100%; box-sizing:border-box; padding:0 80px; position:relative; z-index:10;}
.main .section .cont-area > .wrap > .inner {width:100%; font-size:0;}
.main .section .cont-area > .wrap > .inner > * {display:inline-block; vertical-align:top; box-sizing:border-box; position:relative;}
.main .section .cont-area .title-box {width:435px; padding:60px 0;}
.main .section .cont-area .title-box > h1 {font-size:50px; font-weight:700; line-height:1.3; letter-spacing:-3px; margin:20px 0; opacity:0; -webkit-transform:translateY(50px); -mo-ztransform:translateY(50px); transform:translateY(50px); transition:all 0.7s 0.2s ease-in-out; word-wrap:break-word; word-break:keep-all;}
.main .section .cont-area .title-box > h2 {font-size:20px; font-weight:700; color:#0080ff; word-wrap:break-word; word-break:keep-all; opacity:0; -webkit-transform:translateY(50px); -mo-ztransform:translateY(50px); transform:translateY(50px); transition:all 0.7s ease-in-out; word-wrap:break-word; word-break:keep-all;}
.main .section .cont-area .title-box > .txt {width:80%; font-size:18px; font-weight:300; line-height:1.8; word-wrap:break-word; word-break:keep-all; opacity:0; -webkit-transform:translateY(50px); -mo-ztransform:translateY(50px); transform:translateY(50px); transition:all 0.7s 0.4s ease-in-out;}
.main .section .cont-area .cont-box {width:calc(100% - 435px);}
.main .section.active .cont-area .title-box > h1 {opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0);}
.main .section.active .cont-area .title-box > h2 {opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0);}
.main .section.active .cont-area .title-box > .txt {opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0);}

/*visual*/
.visual {width:100%; height:100vh; position:relative; box-sizing:border-box; z-index:100;}
.visual .slider .visual-box {width:100%; height:100vh; overflow:hidden; position:relative;}
.visual .slider .visual-box .visual-img {width:100%; height:100%; box-sizing:border-box; background-repeat:no-repeat; background-position:center; background-size:cover; -webkit-transform:scale(1.1, 1.1); -moz-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1); transition:transform 5s ease-in-out; position:absolute; left:0; top:0; z-index:0;}
.visual .slider .visual-box.active .visual-img {-webkit-transform:scale(1.0,1.0) rotate(0.0001deg); -moz-transform:scale(1.0,1.0) rotate(0.0001deg); transform:scale(1.0,1.0) rotate(0.0001deg);}
.visual .slider .visual-box .visual-txt {text-align:center; line-height:1.1; color:#fff; width:100%; position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); z-index:10;}
.visual .slider .visual-box .visual-txt br{ display:none}
.visual .slider .visual-box .visual-txt .v_tit{color:white; font-size:60px; font-family:helvetica; font-style:bold}
.visual .slider .visual-box .visual-txt .v_txt{color:white;font-size:20px; padding-top:24px;}
.visual .slide-control {width:100%; position:absolute; left:50%; top:62%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.visual .slide-control .slide-txt {font-size:52px; font-weight:700; line-height:1.3; color:#fff; text-align:center; word-wrap:break-word; word-break:keep-all;}
.visual .slide-btn {width:100%; position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); z-index:20;}
.visual .slide-btn .arrow {cursor:pointer; position:absolute; font-size:14px; font-weight:600; color:#fff;}
.visual .slide-btn .arrow > p {display:inline-block; padding-left:20px; position:relative;}
.visual .slide-btn .arrow > p:before {content:""; width:36px; height:36px; border-radius:50%; background:#0080ff; position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); z-index:0;}
.visual .slide-btn .arrow > p > span {position:relative; z-index:10;}
.visual .slide-btn .arrow:before {content:""; width:60px; height:1px; border-top:1px solid #fff; position:absolute; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
.visual .slide-btn .arrow:after {content:""; width:0; border-top:1px solid #fff; position:absolute; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
.visual .slide-btn .arrow.btn-prev {left:0; padding:15px 10px 15px 80px;}
.visual .slide-btn .arrow.btn-prev:before {left:0;}
.visual .slide-btn .arrow.btn-prev:hover:before {width:0; transition:width 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);}
.visual .slide-btn .arrow.btn-prev:after {right:87px;}
.visual .slide-btn .arrow.btn-prev:hover:after {width:60px; height:1px; transition:width 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay:0.3s;}
.visual .slide-btn .arrow.btn-next {right:0; padding:15px 80px 15px 10px;}
.visual .slide-btn .arrow.btn-next:before {right:0;}
.visual .slide-btn .arrow.btn-next:hover:before {width:0; transition:width 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);}
.visual .slide-btn .arrow.btn-next:after {left:84px;}
.visual .slide-btn .arrow.btn-next:hover:after {width:60px; height:1px; transition:width 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay:0.3s;}
.visual .slide-control .play-control {width:40px; height:40px; box-sizing:border-box; border-radius:50%; /*border:1px solid rgba(255,255,255,0.3);*/ margin:140px auto 30px auto; position:relative; cursor:pointer; font-size:0;}
.visual .slide-control .play-control span {display:inline-block; width:30px; height:30px; border-radius:50%; position:absolute; font-size:0; left:50%; top:50%; transform:translate(-50%,-50%);}
.visual .slide-control .play-control.play span:before {content:""; width:0; height:0; border-left:8px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; position:absolute; left:calc(50% + 1px); top:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.visual .slide-control .play-control.pause span:before,
.visual .slide-control .play-control.pause span:after {content:""; width:2px; height:10px; background:#fff; position:absolute; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
.visual .slide-control .play-control.pause span:before {left:10px;}
.visual .slide-control .play-control.pause span:after {right:10px;}
.visual .slide-control .play-control .control-btn {width:40px; height:40px; left:0; top:0; position:absolute;}
.visual .slide-control .play-control .control-btn:before {content:""; width:30px; height:30px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.3); border-radius:50%; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.visual .slide-control .play-control .control-btn svg {width:40px; height:40px; left:0; top:0; transform:rotate(-90deg);}
.visual .slide-control .play-control .control-btn .circle-bg {fill:none; cx:20; cy:20; r:15; /*stroke:rgba(255,255,255,0.3);*/ stroke-width:1;}
.visual .slide-control .play-control .control-btn .circle {fill:none; cx:20; cy:20; r:15; stroke:#0080ff; stroke-width:1; stroke-dasharray:94.2; stroke-dashoffset:94.2;}
/*.visual .slide-control .play-control .control-btn .circle.active {animation:load 4.5s;}*/
.visual .slide-control .slide-paging {width:100%; font-size:14px; font-weight:300; color:#b8b8b8; letter-spacing:1.5px; text-align:center;}
.visual .slide-control .slide-paging span {color:#fff;}
/*@keyframes load {from{stroke-dashoffset:94.2;}}*/

/*220518 수정*/
.visual .slider .visual-box .visual-img {width:100%; height:100%; box-sizing:border-box; }
.visual .slider .visual-box .visual-img video {width:100%; height:100%;object-fit:cover;}
.header .gnb-box ul.gnb li > a , .header .len .combo .select-option > p  {text-shadow:0px 0px 2px rgb(0 0 0 / 30%)}
.header.active .gnb-box ul.gnb li > a , .header.active .len .combo .select-option > p {text-shadow:none;}


/*product*/
.product {background:#fafafa;}
.main .section.product .cont-area .title-box {display: block; width: 100%;}
.main .section.product .cont-area .title-box > .txt {width: calc(100% - 155px); display: inline-block; vertical-align: top;}
.main .section.product .cont-area .title-box > .txt .br {display: none;}
.main .section.product .cont-area .cont-box {width: 100%;}

.product .product-list {width:100%; font-size:0; max-width:1341px; margin:0 auto}
.product .product-list .product-box {display:inline-block; vertical-align:middle; width: calc(((100% - 60px) / 4) - 1px); height:570px; box-sizing:border-box; position:relative; padding:30px; margin-left:20px; cursor:pointer;}
.product .product-list .product-box:nth-child(1) {margin-left:0;}
.product .product-list .product-box > .inner {width:100%; height:100%; display:table;}
.product .product-list .product-box > .inner > .wrap {width:100%; display:table-cell; vertical-align:middle;}
.product .product-list .product-box .img-box {width:100%; box-sizing:border-box; padding:20px 10px;}
.product .product-list .product-box .img-box .img {width:100%; height:0; padding-bottom:100%; position:relative; overflow:hidden; transition:all 0.4s ease-in-out;}
.product .product-list .product-box .img-box .img img {max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.product .product-list .product-box .txt-box {width:100%; box-sizing:border-box; padding:20px 30px;}
.product .product-list .product-box .txt-box h1 {font-size:28px; font-weight:700; text-align:center; }
.product .product-list .product-box .txt-box .txt {margin:20px 0; font-size:18px; font-weight:300; line-height:1.8; word-wrap:break-word; word-break:keep-all; height:0; opacity:0; transition:all 0.4s ease-in-out;}
.product .product-list .product-box .btn-more {display:none;}
.product .product-list .product-box .btn-more p {background:#fff;}
.product .product-list .product-box.on {background:#fff; -webkit-box-shadow: 0px 15px 30px 5px rgba(199,199,199,0.24); box-shadow: 0px 15px 30px 5px rgba(199,199,199,0.24);}
.product .product-list .product-box.on .img-box .img {padding-bottom:calc(250 / 370 * 100%);}
.product .product-list .product-box.on .txt-box h1 {text-align:left;}
.product .product-list .product-box.on .txt-box .txt {height:auto; opacity:1;}
.product .product-list .product-box.on .btn-more {display:inline-block;}
.product .title-box .btn-more {margin-top:00px; opacity:0; -webkit-transform:translateY(50px); -moz-transform:translateY(50px); transform:translateY(50px); transition:opacity 0.5s 0.5s ease-in-out, transform 0.5s 0.5s ease-in-out}
.product .title-box .btn-more p {background:#fafafa;}
.product.active.on .title-box .btn-more {opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0); vertical-align: top;}



/*brand*/
.brand {background:#fff;}
.brand .cont-area .title-box .btn-diofit {display:inline-block; position:relative; margin-top:50px; opacity:0; -webkit-transform:translateY(50px); -mo-ztransform:translateY(50px); transform:translateY(50px); transition:all 0.7s 0.6s ease-in-out;}
.brand .cont-area .title-box .btn-diofit:before {content:""; width:100%; height:31px; background:url(/img/index/diofit.png) left center no-repeat; position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); z-index:0;}
.brand .cont-area .title-box .btn-diofit a {display:block; width:100%; height:100%; position:relative; z-index:10;}
.brand .cont-area .title-box .btn-diofit p {font-size:16px; font-weight:300; color:#767676p; display:inline-block; padding:0 15px 0 80px; position:relative;}
.brand .cont-area .title-box .btn-diofit p:before {content:""; width:0; height:0; border-left:8px solid #767676; border-top:5px solid transparent; border-bottom:5px solid transparent; position:absolute; right:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
.brand .cont-area .title-box .btn-diofit:hover p:before {border-left:8px solid #1a88c0;}
.brand.active .cont-area .title-box .btn-diofit {opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0);}
.brand .cont-area .title-box .btn-diofit.mo p:before {border-left:8px solid #1a88c0;}
.brand .brand-bg {width:calc(100% - 874px); height:100%; background:url(/img/index/brand.png) right top no-repeat; background-size:cover; position:absolute; right:0; top:calc(50% + 2px);; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); z-index:0;}
.brand .brand-box {width:100%; max-width:1047px; margin-left:auto; box-sizing:border-box;}
.brand .brand-box .img-box {width:100%; height:0; padding-bottom:calc(700 / 1047 * 100%); background:transparent;}


/*competency*/
.competency {background:#fafafa;}
.competency .cont-area .title-box {width:100% !important; padding-top:0 !important;}
.competency .cont-area .cont-box {width:100% !important;}
.competency .competency-list {width:100%; max-width:1320px; overflow:hidden; white-space:nowrap;}
.competency .competency-list ul {width:100%; font-size:0;}
.competency .competency-list ul li.competency-box {display:inline-block; vertical-align:middle; margin-left:4px; width:180px; height:520px; cursor:pointer; position:relative; transition:width 0.5s; overflow:hidden;}
/* .competency .competency-list ul li.competency-box.dim::before {content:""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.1); z-index: 0;} */
.competency .competency-list ul li.competency-box:nth-child(1) {margin-left:0;}
.competency .competency-list ul li.competency-box:before {content:""; width:100%; height:100%; background:rgba(0,0,0,0.6); position:absolute; left:0; top:0; z-index:0;}
.competency .competency-list ul li.competency-01 {background:url(/img/index/competency_01.jpg) right 20% center no-repeat; background-size:auto 100%;}
.competency .competency-list ul li.competency-02 {background:url(/img/index/competency_02.jpg) center no-repeat; background-size:auto 100%;}
.competency .competency-list ul li.competency-03 {background:url(/img/index/competency_03_260915.png) center no-repeat; background-size:auto 100%;}
.competency .competency-list ul li.competency-04 {background:url(/img/index/competency_04_260915.png) right 20% center no-repeat; background-size:auto 100%;}
.competency .competency-list ul li.competency-05 {background:url(/img/index/competency_05.jpg) center no-repeat; background-size: cover;}
.competency .competency-list ul li.competency-box .tlt {width:100%; font-size:24px; font-weight:700; color:#fff; text-align:center; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); z-index:1; word-wrap:break-word; word-break:keep-all;}
.competency .competency-list ul li.competency-box > .inner {max-width:100%; box-sizing:border-box; padding:50px 40px; position:absolute; left:0; bottom:0;}
.competency .competency-list ul li.competency-box .competency-cont {opacity:0; transition:opacity 0;}
.competency .competency-list ul li.competency-box .competency-cont .btn-more {margin-top:0;}
.competency .competency-list ul li.competency-box .competency-cont h1 {font-size:42px; font-weight:700; color:#fff; margin:30px 0 10px 0;}
.competency .competency-list ul li.competency-box .competency-cont .txt {font-size:18px; font-weight:300; color:#fff; line-height:1.7; word-wrap:break-word; word-break:keep-all; white-space:normal;}
.competency .competency-list ul li.competency-box.active {/*width:calc(100% - 552px);*/}
.competency .competency-list ul li.competency-box.active:before {display:none;}
.competency .competency-list ul li.competency-box.active.dim:before {display: block; background:rgba(0,0,0,0.2);}
.competency .competency-list ul li.competency-box.active .tlt {display:none;}
.competency .competency-list ul li.competency-box.active .competency-cont {opacity:1; transition:opacity 0.2s 0.5s ease-in-out;}


/*news*/
.news .cont-area .title-box {width:100% !important; padding-top:0 !important;}
.news .cont-area .title-box > h1 {color:#fff;}
.news .cont-area .cont-box {width:100% !important;}
.news {background:url(/img/index/bg_board.jpg) center no-repeat; background-size:cover;}
.news .main-board {width:100%; font-size:0; max-width:1320px;}
.news .main-board > * {display:inline-block; vertical-align:top; box-sizing:border-box;}
.news .main-board .inquiry {width:360px; padding:40px; background:#fafafa; margin-right:120px;}
.news .main-board .inquiry h1 {font-size:28px; font-weight:700;}
.news .main-board .inquiry .txt {font-size:16px; font-weight:300; line-height:1.6; margin:20px 0;}
.news .main-board .inquiry .img-box {width:100%; box-sizing:border-box; padding:10px 0;}
.news .main-board .inquiry .img-box img {max-width:100%; display:block; margin:0 auto;}
.news .main-board .inquiry .btn-box {text-align:right;}
.news .main-board .bd {width:calc(100% - 480px);}
.news .main-board .bd .bd-tab {width:100%; font-size:0;}
.news .main-board .bd .bd-tab li {display:inline-block; vertical-align:middle; font-size:28px; font-weight:700; color:#767676; box-sizing:border-box; padding:0 20px; position:relative; cursor:pointer;}
.news .main-board .bd .bd-tab li:before {content:""; width:1px; height:60%; border-left:1px solid #767676; position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
.news .main-board .bd .bd-tab li:nth-child(1) {padding-left:0;}
.news .main-board .bd .bd-tab li:nth-child(1):before {display:none;}
.news .main-board .bd .bd-tab li.on {color:#fff;}
.news .main-board .bd .bd-area {width:100%; margin-top:10px;}
.news .main-board .bd .bd-area .current-board {width:100%; box-sizing:border-box; display:none;}
.news .main-board .bd .bd-area .current-board.active {display:block;}
.news .main-board .bd .bd-area .current-board .btn-box {width:100%; text-align:right; margin-bottom:10px;}
.news .main-board .bd .bd-area .current-board .current-tb {width:100%; border-top:2px solid #f5f5f5;}
.news .main-board .bd .bd-area .current-board .current-tb .tr {width:100%; font-size:0; box-sizing:border-box; padding:30px 0; border-bottom:1px solid rgba(255,255,255,0.3); cursor:pointer;}
.news .main-board .bd .bd-area .current-board .current-tb .tr > * {display:inline-block; vertical-align:middle; box-sizing:border-box; padding:0 15px;}
.news .main-board .bd .bd-area .current-board .current-tb .tr .th {width:150px; text-align:center;}
.news .main-board .bd .bd-area .current-board .current-tb .tr .td {width:calc(100% - 150px);}
.news .main-board .bd .bd-area .current-board .current-tb .tr .td .subject p {font-size:24px; font-weight:500; color:#fff; font-family:'Noto Sans KR', sans-serif !important;}
.news .main-board .bd .bd-area .current-board .current-tb .tr .td .cont {font-size:16px; font-weight:300; color:#767676; line-height:1.6; word-wrap:break-word; word-break:keep-all; width:100%; max-height:45px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-top:10px;}
.news .main-board .bd .bd-area .current-board .tb-news .tr .th .date {font-size:24px; font-weight:500; color:#fff; line-height:1.3;}
.news .main-board .bd .bd-area .current-board .tb-news .tr .th .date span {font-size:62px;}
.news .main-board .bd .bd-area .current-board .tb-recruit .tr .th .category {width:100px; height:100px; border-radius:50%; box-sizing:border-box; margin:0 auto; display:table; background:#fff; text-align:center;}
.news .main-board .bd .bd-area .current-board .tb-recruit .tr .th .category span {font-size:18px; font-weight:400; color:#000; display:table-cell; vertical-align:middle;}
.news .main-board .bd .bd-area .current-board .current-tb .tr:hover {border-bottom:1px solid #0080ff;}
.news .main-board .bd .bd-area .current-board .tb-news .tr:hover .th .date {color:#0080ff;}
.news .main-board .bd .bd-area .current-board .tb-recruit .tr:hover .th .category {background:#0080ff;}
.news .main-board .bd .bd-area .current-board .tb-recruit .tr:hover .th .category span {color:#fff;}


.main .section.partnership .cont-area .cont-box {max-width: 1020px; width: 90%;}
.partner-list{display: flex; flex-wrap: wrap; gap: 20px 5%; align-items: center;}
.partner-list .item{width:20%; /*margin-bottom:20px;*/ text-align: left;}
/* .partner-list .item:nth-child(3n){text-align:right} */
/* .partner-list .item:nth-child(3n+1){text-align:left} */
.partner-list .item img{max-width:160px; max-height:80px; width: 100%; height: auto}



/* popup */
.pop-wrap {position: fixed; width: 100%; height: 100%; left: 0;top: 0; background: rgba(0, 0, 0, 0.5);  align-items: center; justify-content: center; z-index: 9999; display: none;}
.pop-wrap.show {display: flex;}
.pop-wrap .pop-cont {width: 95%; max-width:680px; background: #fff;}
.pop-wrap .pop-cont a {display: block; width: 100%;}
.pop-wrap .pop-cont img {max-width: 100%; vertical-align: top;}
.pop-wrap .pop-cont .pop-btm {width: 100%; height: 28px; display: flex; justify-content: end; padding-right: 10px; align-items: center; font-size: 12px; gap: 20px; box-sizing: border-box;}
.pop-wrap .pop-cont input {vertical-align: middle;}
.pop-wrap .pop-cont .pop-btm span {cursor: pointer;}


@media screen and (max-width: 1700px){

	.main .navi {width:300px;}

	.main .section .cont-area {padding-left:300px;}
	.main .section .cont-area > .wrap {padding:0 60px;}
	.main .section .cont-area .title-box {width:400px;}
	.main .section .cont-area .cont-box {width:calc(100% - 400px);}
	
	.main .product .cont-area .title-box .br {display:inline-block;}
	.product .product-list .product-box {height:550px;}
	.product .product-list .product-box .txt-box .txt .br {display:inline-block;}

	.brand .cont-area .title-box .txt .br {display:inline-block;}
	.brand .brand-bg {width:calc(100% - 760px);}

	.competency .competency-list ul li.competency-box .competency-cont .txt .br {display:inline-block;}

	.main .news .cont-area > .wrap {padding:0 60px;}
	.news .main-board .inquiry {margin-right:80px;}
	.news .main-board .bd {width:calc(100% - 440px);}

}

@media screen and (max-width: 1440px){

	.main .navi ul {padding-top:0;}

	.main .section .cont-area .title-box {width:100%; padding:0 0 60px 0;}
	.main .section .cont-area .title-box > h1 .br {display:inline-block;}
	.main .section .cont-area .title-box > .txt .br {display:inline-block;}
	.main .section .cont-area .cont-box {width:100%;}

	/* .product .product-list .product-box {height:600px; width: calc(((100% - 30px)/2) - 1px);} */
	.product .product-list .product-box .txt-box {padding: 20px 5px;}
	.product .product-list .product-box .txt-box .txt {font-size: 16px;}

	.brand .brand-bg {display:none;}
	.brand .brand-box .img-box {background:url(/img/index/brand.png) center no-repeat; background-size:auto 100%;}

	.competency .competency-list ul li.competency-box {width:150px; height:500px;}
	.competency .competency-list ul li.competency-box .tlt {font-size:20px;}
	.competency .competency-list ul li.competency-box > .inner {padding:40px 30px;}
	.competency .competency-list ul li.competency-box .competency-cont h1 {font-size:38px;}
	.competency .competency-list ul li.competency-box .competency-cont .txt {font-size:17px;}
	.competency .competency-list ul li.competency-box.active {width:calc(100% - 462px);}

	.news .main-board .inquiry {width:320px; padding:30px; margin-right:60px;}
	.news .main-board .inquiry h1 {font-size:25px;}
	.news .main-board .inquiry .txt {font-size:16px; margin:15px 0;}
	.news .main-board .bd {width:calc(100% - 380px);}


}


@media screen and (max-width: 1280px){

	.main .navi {width:250px;}	
	.main .navi ul li {margin:20px 0;}
	.main .navi ul li a {font-size:13px;}
	.main .navi ul li.on:before {width:9px; height:9px; right:-5px;}

	.main .section {padding:120px 0;}
	.main .section .cont-area {padding-left:250px;}
	.main .section .cont-area > .wrap {padding:0 50px;}
	.main .section .cont-area .title-box {width:100%; padding:0; margin-bottom:50px;}
	.main .section .cont-area .title-box > h1 {font-size:46px; margin:15px 0;}
	.main .section .cont-area .title-box > h2 {font-size:19px;}
	.main .section .cont-area .title-box > .txt {font-size:17px;}
	.main .section .cont-area .cont-box {width:100%;}

	.visual .slider .visual-box .visual-txt {font-size:50px;}
	.visual .slide-control .slide-txt {font-size:45px;}
	.visual .slide-btn .arrow:before {width:30px;}
	.visual .slide-btn .arrow.btn-prev {padding:15px 10px 15px 50px;}
	.visual .slide-btn .arrow.btn-prev:hover:after {width:30px;}
	.visual .slide-btn .arrow.btn-next {right:0; padding:15px 50px 15px 10px;}
	.visual .slide-btn .arrow.btn-next:hover:after {width:30px;}


	.product .product-list .product-box {height:460px; width: calc((100% / 2) - 1px); margin: 0; padding: 20px;}
	.product .product-list .product-box .img-box {padding: 20px; max-width: 300px; margin: auto;}

	.competency .competency-list {white-space:normal;}
	.competency .competency-list ul li.competency-box {margin-left:0px; margin-top:4px; width:100%; height:120px; transition:height 0.5s ease-in-out;}
	.competency .competency-list ul li.competency-box:nth-child(1) {margin-top:0;}
	.competency .competency-list ul li.competency-01 {background-position:center; background-repeat:no-repeat; background-size:100% auto;}
	.competency .competency-list ul li.competency-02 {background-position:center; background-repeat:no-repeat; background-size:100% auto;}
	.competency .competency-list ul li.competency-03 {background-position:top 30% center; background-repeat:no-repeat; background-size:100% auto;}
	.competency .competency-list ul li.competency-04 {background-position:center; background-repeat:no-repeat; background-size:100% auto;}
	.competency .competency-list ul li.competency-box .tlt {font-size:20px;}
	.competency .competency-list ul li.competency-box > .inner {padding:40px 30px;}
	.competency .competency-list ul li.competency-box .competency-cont h1 {font-size:38px;}
	.competency .competency-list ul li.competency-box .competency-cont .txt {font-size:17px;}
	.competency .competency-list ul li.competency-box .competency-cont .txt .br {display:block;}
	.competency .competency-list ul li.competency-box.active {width:100%; height:400px;}

	.main .news .cont-area > .wrap {padding:0 50px;}
	.news .main-board .inquiry {display:block; width:90%; max-width:360px; padding:40px; margin:0 auto; margin-bottom:30px;}
	.news .main-board .inquiry h1 {font-size:25px;}
	.news .main-board .inquiry .txt {font-size:15px;}
	.news .main-board .inquiry .img-box {box-sizing:border-box; padding:20px;}
	.news .main-board .bd {width:100%;}
	.news .main-board .bd .bd-tab li {font-size:25px;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr .td .subject p {font-size:22px;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr .td .cont {font-size:15px; max-height:45px;}
	.news .main-board .bd .bd-area .current-board .tb-news .tr .th .date {font-size:22px;}
	.news .main-board .bd .bd-area .current-board .tb-news .tr .th .date span {font-size:58px;}
	.news .main-board .bd .bd-area .current-board .tb-recruit .tr .th .category span {font-size:17px;}

}

@media screen and (max-width: 1024px){

	.main .navi {display:none;}

	.main .btn-more {margin-top:15px;}
	.main .btn-more:before {width:50px; height:50px; border-radius:50px;}
	.main .btn-more a {padding:0 25px;}
	.main .btn-more p {font-size:15px; padding-right:18px;}
	.main .btn-more p:before {width:10px; height:2px; right:0;}
	.main .btn-more p:after {width:2px; height:10px; right:4px;}
	.main .btn-more:hover:before {width:100%;}

	.main .section {padding:100px 0;}
	.main .section > .inner {width:90%; margin:0 auto;}
	.main .section .cont-area {width:100%; padding-left:0;}
	.main .section .cont-area > .wrap {width:100%; padding:0;}
	.main .section .cont-area .title-box {width:100%; padding:0; margin-bottom:50px;}
	.main .section .cont-area .title-box > h1 {font-size:42px; margin:15px 0;}
	.main .section .cont-area .title-box > h2 {font-size:18px;}
	.main .section .cont-area .title-box > .txt {font-size:16px;}

	.visual .slider .visual-box .visual-txt {font-size:50px;}
	.visual .slide-control .slide-txt {font-size:35px;}
	.visual .slide-btn .arrow {font-size:13px;}
	.visual .slide-btn .arrow.btn-prev:after {right:84px;}
	.visual .slide-btn .arrow.btn-next:after {left:82px;}
	.visual .slide-control .slide-sub-txt {font-size:16px;}
	.visual .slide-control .play-control {margin:70px auto 20px auto;}

	.product .product-list .product-box .txt-box h1 {font-size:25px;}
	.product .product-list .product-box .txt-box .txt {font-size:16px;}
	/* .product .title-box .btn-more {margin-top:50px;} */

	.brand .cont-area .title-box .btn-diofit {margin-top:40px;}
	.brand .brand-box {padding-right:0px;}

	.competency .competency-list ul li.competency-box .competency-cont h1 {font-size:35px;}
	.competency .competency-list ul li.competency-box .competency-cont .txt {font-size:16px;}	

}

@media screen and (max-width: 900px){
	.visual .slider .visual-box .visual-txt br{ display:block}
	.visual .slider .visual-box .visual-txt .v_tit{font-size:40px;}
	.visual .slider .visual-box .visual-txt .v_txt{font-size:15px;}
}

@media screen and (max-width: 768px){


	.main .btn-more {margin-top:10px;}
	.main .btn-more:before {width:40px; height:40px; border-radius:40px;}
	.main .btn-more a {padding:0 20px;}
	.main .btn-more p {font-size:14px; padding-right:16px;}

	.main .section {padding:80px 0;}
	.main .section .cont-area .title-box {margin-bottom:40px;}
	.main .section .cont-area .title-box > h1 {font-size:36px; margin:10px 0;}
	.main .section .cont-area .title-box > h2 {font-size:17px;}
	.main .section .cont-area .title-box > .txt {font-size:15px;}

	.visual .slider .visual-box .visual-txt {font-size:35px; margin: 0 3%; width: 94% }
	.visual .slider .visual-box .visual-txt h1 {padding:0 20px; box-sizing: border-box; word-break: keep-all; }
	.visual .slide-control {top:80%;}
	.visual .slide-control .slide-txt {font-size:28px;}
	.visual .slide-btn {top:auto; bottom:15%; transform:none;}
	.visual .slide-control .slide-sub-txt {font-size:14px;}
	.visual .slide-control .play-control {margin:60px auto 20px auto;}

	.product .product-list .product-box {width:100%; height:300px; }
	.product .product-list .product-box > .inner > .wrap > * {display: inline-block; vertical-align: middle;}
	.product .product-list .product-box .img-box {width: 45%;}
	.product .product-list .product-box .txt-box {padding:20px 10px; width: 55%;}
	.product .product-list .product-box .txt-box h1 {font-size:22px;}
	.product .product-list .product-box .txt-box .txt {margin:15px 0; font-size:14px;}

	.brand .cont-area .title-box .btn-diofit {margin-top:30px;}
	.brand .cont-area .title-box .btn-diofit:before {height:27px; background-size:auto 100%;}
	.brand .cont-area .title-box .btn-diofit p {font-size:14px; padding:0 15px 0 70px; position:relative;}
	.brand .cont-area .title-box .btn-diofit p:before {border-left:7px solid #767676; border-top:4px solid transparent; border-bottom:4px solid transparent;}
	.brand .cont-area .title-box .btn-diofit:hover p:before {border-left:7px solid #1a88c0;}

	.competency .competency-list ul li.competency-box {height:100px;}
	.competency .competency-list ul li.competency-box .tlt {font-size:18px;}
	.competency .competency-list ul li.competency-box > .inner {padding:40px 30px;}
	.competency .competency-list ul li.competency-box .competency-cont h1 {font-size:30px;}
	.competency .competency-list ul li.competency-box .competency-cont .txt {font-size:14px;}
	.competency .competency-list ul li.competency-box.active {height:350px;}

	.news .main-board .inquiry {padding:30px;}
	.news .main-board .inquiry h1 {font-size:23px;}
	.news .main-board .inquiry .txt {font-size:14px; margin:10px 0;}
	.news .main-board .bd .bd-tab li {font-size:22px; padding:0 15px;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr {padding:20px 0;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr > * {padding:0 10px;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr .th {width:110px;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr .td {width:calc(100% - 110px);}
	.news .main-board .bd .bd-area .current-board .current-tb .tr .td .subject p {font-size:20px;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr .td .cont {font-size:14px;}
	.news .main-board .bd .bd-area .current-board .tb-news .tr .th .date {font-size:18px;}
	.news .main-board .bd .bd-area .current-board .tb-news .tr .th .date span {font-size:45px;}
	.news .main-board .bd .bd-area .current-board .tb-recruit .tr .th .category {width:80px; height:80px;}
	.news .main-board .bd .bd-area .current-board .tb-recruit .tr .th .category span {font-size:16px;}

}

@media screen and (max-width: 600px){

	.product .product-list .product-box {width:100%; height:250px; margin-left:0; margin-top:20px;}
	.product .product-list .product-box:nth-child(1) {margin-top:0;}
	.product .product-list .product-box > .inner > .wrap {width:100%; font-size:0;}
	.product .product-list .product-box > .inner > .wrap > * {display:inline-block; vertical-align:middle;}
	.product .product-list .product-box .img-box {width:45%; padding: 20px 10px;}
	.product .product-list .product-box.on .img-box .img {padding-bottom:100%;}
	.product .product-list .product-box .txt-box {width:55%; padding:0 0 0 20px;}
	.product .product-list .product-box .txt-box h1 {font-size:22px;}
	.product .product-list .product-box .txt-box .txt {margin:15px 0; font-size:14px;}

	.competency .competency-list ul li.competency-box.active {height:280px;}

	.main .section.partnership .cont-area .cont-box {width: 100%;}

}

@media screen and (max-width: 480px){

	.main .btn-more:before {width:34px; height:34px; border-radius:34px;}
	.main .btn-more a {padding:0 17px;}
	.main .btn-more p {font-size:12px; padding-right:12px;}
	.main .btn-more p:before {width:8px;}
	.main .btn-more p:after {height:8px; right:3px;}
	.main .btn-more:hover:before {width:100%;}

	.main .section {padding:60px 0;}
	.main .section .cont-area .title-box {margin-bottom:30px;}
	.main .section .cont-area .title-box > h1 {font-size:26px; margin:12px 0;}
	.main .section .cont-area .title-box > h2 {font-size:15px;}
	.main .section .cont-area .title-box > .txt {font-size:12px;}

	.visual .slider .visual-box .visual-txt {font-size:24px; padding-bottom:80px;}
	.visual .slide-control {top:80%;}
	.visual .slide-control .slide-txt {font-size:22px;}
	.visual .slide-btn .arrow {font-size:12px;}
	.visual .slide-btn .arrow > p {padding-left:12px;}
	.visual .slide-btn .arrow > p:before {width:30px; height:30px;}
	.visual .slide-btn .arrow:before {width:25px;}
	.visual .slide-btn .arrow.btn-prev {padding:15px 10px 15px 40px;}
	.visual .slide-btn .arrow.btn-prev:hover:after {width:25px;}
	.visual .slide-btn .arrow.btn-prev:after {right:68px;}	
	.visual .slide-btn .arrow.btn-next {right:0; padding:15px 40px 15px 10px;}	
	.visual .slide-btn .arrow.btn-next:after {left:66px;}
	.visual .slide-btn .arrow.btn-next:hover:after {width:25px;}
	.visual .slide-control .slide-sub-txt {font-size:12px;}
	.visual .slide-control .play-control {margin:30px auto 20px auto;}


	.main .section.product .cont-area .title-box > .txt {width: 100%;}
	.product .product-list .product-box {height:350px;}
	.product .product-list .product-box > .inner > .wrap > * {display:block;}
	.product .product-list .product-box .img-box {width:100%; max-width:200px; margin:0 auto;}
	.product .product-list .product-box.on .img-box .img {padding-bottom:100%;}
	.product .product-list .product-box .txt-box {width:100%; padding:20px 10px;}
	.product .product-list .product-box .txt-box h1 {font-size:18px;}
	.product .product-list .product-box .txt-box .txt {margin:10px 0; font-size:12px;}
	.product .product-list .product-box.on .img-box .img {padding-bottom:calc(250 / 370 * 100%);}
	.product .title-box .btn-more {margin-top:40px;}

	.brand .cont-area .title-box .btn-diofit:before {height:25px;}
	.brand .cont-area .title-box .btn-diofit p {font-size:13px; padding:0 13px 0 65px;}
	.brand .cont-area .title-box .btn-diofit p:before {border-left:6px solid #767676;}
	.brand .cont-area .title-box .btn-diofit:hover p:before {border-left:6px solid #1a88c0;}

	.competency .competency-list ul li.competency-box {height:80px;}
	.competency .competency-list ul li.competency-box .tlt {font-size:16px;}
	.competency .competency-list ul li.competency-box > .inner {padding:20px 15px;}
	.competency .competency-list ul li.competency-box .competency-cont h1 {font-size:18px; marign:20px 0 10px;}
	.competency .competency-list ul li.competency-box .competency-cont .txt {font-size:12px;}
	.competency .competency-list ul li.competency-box .competency-cont .txt .br {display:inline-block;}
	.competency .competency-list ul li.competency-box.active {height:210px;}

	.news .main-board .inquiry {padding:20px;}
	.news .main-board .inquiry h1 {font-size:20px;}
	.news .main-board .inquiry .txt {font-size:12px;}
	.news .main-board .inquiry .txt .br {display:block;}
	.news .main-board .bd .bd-tab li {font-size:18px; padding:0 10px;}
	.news .main-board .bd .bd-tab li:before {height:50%;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr {padding:20px 0;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr > * {padding:0 10px;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr .th {width:80px;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr .td {width:calc(100% - 80px);}
	.news .main-board .bd .bd-area .current-board .current-tb .tr .td .subject p {font-size:17px;}
	.news .main-board .bd .bd-area .current-board .current-tb .tr .td .cont {font-size:12px;}
	.news .main-board .bd .bd-area .current-board .tb-news .tr .th .date {font-size:16px;}
	.news .main-board .bd .bd-area .current-board .tb-news .tr .th .date span {font-size:40px;}
	.news .main-board .bd .bd-area .current-board .tb-recruit .tr .th .category {width:60px; height:60px;}
	.news .main-board .bd .bd-area .current-board .tb-recruit .tr .th .category span {font-size:13px;}


	.partner-list {gap: 20px 5%;}
	.partner-list .item {width: 47.5%; text-align: center;}

}