@charset "utf-8";
/* *******************************************************
 * filename : style.css
 * description : 스타일 CSS
 * date : 2022-07
******************************************************** */
#wrapper {width: 100%; overflow: hidden; min-width: 320px;}
/* header */
#header {position: fixed; left: 0; right: 0; top: -120px; height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 50px; transition: all 1s; z-index: 1; background: #fff;}
#header .h1 {display: block; transition: all 0.2s; width: 227px;}
#header .h1 a {display: block;}
#header .h1 a img {display: block; width: 100%; transition: all 1s;}
#header .nav {display: flex; align-items: center; justify-content: flex-end;}
#header .nav ul {display: flex; align-items: center;}
#header .nav ul li a {display: block; font-size: 24px; text-transform: uppercase; padding: 0 50px; transition: all 0.3s;}
#header .nav ul li a:hover,
#header .nav ul li a.active {color: #0e7c4f;}
#header .nav .sitemap-open {display: block; font-size: 0; text-indent: -99999%; width: 41px; height: 21px; position: relative; border-top: 1px solid #333; border-bottom: 1px solid #333; transition: all 0.3s;}
#header .nav .sitemap-open::before {content: ''; display: block; position: absolute; top: 50%; left: 0; right: 0; height: 1px; border-top: 1px solid #333; transition: all 0.3s;}
#header .nav .sitemap-open:hover {border-top: 1px solid #0e7c4f; border-bottom: 1px solid #0e7c4f;}
#header .nav .sitemap-open:hover::before {border-top: 1px solid #0e7c4f;}
#header .nav .lang {margin-right: 16px; display: flex; align-items: center; justify-content: center; width: 72px; height: 35px; border-radius: 50px; border: 1px solid #333;}
#header.active {top: 0;}
#header.scroll {height: 80px;}
#header.scroll .h1 {width: 150px;}
#header.scroll .nav ul li a {font-size: 20px;}
#header .site-map {position: fixed; top:0; right: -100%; bottom: 0; width: 100%; background: #fff; transition: all 0.3s;}
#header .site-map.active {right: 0;}
#header .site-map .sitemap-close {display: block; font-size: 0; text-indent: -99999%; width: 60px; height: 60px; position: absolute; top: 23px; right: 36px;}
#header .site-map .sitemap-close::before,
#header .site-map .sitemap-close::after {content: ''; display: block; width: 1px; height: 45px; border-left: 1px solid #333; position: absolute; top: 7px; left: 29px;}
#header .site-map .sitemap-close::before {transform: rotate(45deg);}
#header .site-map .sitemap-close::after {transform: rotate(-45deg);}
#header .site-map .depth01 {display: flex;}
#header .site-map .depth01 > li {flex: 1; margin-left: -1px; border-left: 1px solid #cdcdcd; height: 100vh; padding-top: 45vh;}
#header .site-map .depth01 > li > a {display: block; text-align: center; text-transform: uppercase; font-size: 30px; color: #0e7c4f; font-weight: 800;}
#header .site-map .depth02 {text-align: center; margin-top: 20px;}
#header .site-map .depth02 a {font-size: 20px; font-weight: 600; display: block;}

/* main-header */
#header.main {background: none;}
#header.main .nav ul li a {color: #fff;}
#header.main .nav .sitemap-open {border-top: 1px solid #fff; border-bottom: 1px solid #fff;}
#header.main .nav .sitemap-open::before {border-top: 1px solid #fff;}
#header.main.scroll {top: -140px; opacity: 0;}
#header.main .nav .lang {color: #fff; border: 1px solid #fff;}

/* footer */
#footer {width: 100%; background: #312317; padding: 70px 30px;}
#footer .footer-inner {width: 1442px; max-width: 100%; margin: 0 auto; position: relative; padding-right: 450px;}
#footer .info-list {margin-top: 25px; display: flex; flex-wrap: wrap;}
#footer .info-list li {font-size: 16px; color: #857a71;}
#footer .footer-link {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
#footer .footer-link li {margin-top: 5px;}
#footer .footer-link li a {display: flex; width: 270px; height: 53px; border: 1px solid #fff; color: #fff; text-align: center; align-items: center; justify-content: center; font-size: 16px; transition: all 0.3s;}
#footer .footer-link li a:hover {background: #fff; color: #312317;}

/* main */
.main-wrap .h2 {font-size: 70px; font-weight: 700; color: #5a412b; letter-spacing: -0.1rem; text-transform: uppercase;}
#mainSection01.active .visual-slide .slide01::before {animation: bgScale 3s cubic-bezier(0.4, 0, 0.2, 1) both;}
#mainSection01 {position: relative;}
#mainSection01 .visual-slide .main-slide {width: 100%; height: 100vh; display: flex; align-items: center; position: relative; padding: 0 240px; background-color: #000;}
#mainSection01 .visual-slide .main-slide::before {content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; transition: all 3s; transform: scale(1.1, 1.1);}
#mainSection01 .visual-slide .slide01::before {background-image: url('/images/main-bg01.jpg');}
#mainSection01 .visual-slide .slide02::before {background-image: url('/images/main-bg02.jpg');}
#mainSection01 .visual-slide .slide03::before {background-image: url('/images/main-bg03.jpg');}
#mainSection01 .visual-slide .main-slide.slick-active::before {transform: scale(1, 1);}
#mainSection01 .visual-slide .main-slide .txt-wrap {position: relative; opacity: 0; padding-top: 120px;}
#mainSection01 .visual-slide .main-slide .txt-wrap p {color: #fff;}
#mainSection01 .visual-slide .main-slide .txt-wrap .logo {font-size: 26px; font-weight: 700; letter-spacing: 0.05rem;}
#mainSection01 .visual-slide .main-slide .txt-wrap .title {font-size: 70px; line-height: 1.2; font-weight: 600; margin: 15px 0 80px;}
#mainSection01 .visual-slide .main-slide .txt-wrap a {display: flex; width: 251px; height: 69px; align-items: center; padding: 30px; border: 1px solid #fff; border-radius: 50px; text-transform: uppercase; font-size: 20px; color: #fff; line-height: 1; position: relative; transition: all 0.2s;}
#mainSection01 .visual-slide .main-slide .txt-wrap a::after {content: ''; display: block; width: 34px; height: 16px; background: url('/images/icon-arrow01.png') no-repeat center; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}
#mainSection01 .visual-slide .main-slide .txt-wrap a:hover {background: #0e7c4f; border: 1px solid #0e7c4f;}
#mainSection01 .visual-slide .main-slide.slick-active .txt-wrap {animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#mainSection01 .slide-pager {position: absolute; right: 0; bottom: 0; width: 688px; height: 127px; border-top-left-radius: 60px; background: #5a412b; display: flex; align-items: center;}
#mainSection01 .company-paging li {position: absolute; right: 360px; bottom: 46px; color: #fff; z-index: 1; font-size: 19px; font-weight: 600; display: none;}
#mainSection01 .company-paging li.slick-active {display: flex;}
#mainSection01 .company-paging li span {color: #9b8978; display: block; margin-left: 226px;}
#mainSection01 .slide-pager .progress-bar {width: 187px; height: 4px; background: rgba(255, 255, 255, 0.2); position: relative; border-radius: 3px; margin-left: 100px;}
#mainSection01 .slide-pager .progress-bar::after {content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #fff; border-radius: 3px;}
#mainSection01 .slide-pager .progress-bar.pro-ani::after {animation: proBar 4s 1;}
#mainSection01 .slide-pager .controls {margin-left: 100px; padding-left: 40px; position: relative;}
#mainSection01 .slide-pager .controls::before {content: ''; display: block; width: 1px; height: 42px; position: absolute; background: rgba(255, 255, 255, 0.5); left: 0; top: -3px;}
#mainSection01 .slide-pager .controls a {font-size: 0; text-indent: -9999%; width: 30px; height: 30px; display: none;}
#mainSection01 .slide-pager .controls a.active {display: block;}
#mainSection01 .slide-pager .controls a.play {background: url('/images/icon-arrow02.png') no-repeat center; background-size: 10px;}
#mainSection01 .slide-pager .controls a.stop {background: url('/images/icon-pause.png') no-repeat center; background-size: 12px;}
#mainSection01 .slide-pager .arrow {margin-left: 35px; padding-left: 40px; position: relative; display: flex; align-items: center;}
#mainSection01 .slide-pager .arrow::before {content: ''; display: block; width: 1px; height: 42px; position: absolute; background: rgba(255, 255, 255, 0.5); left: 0; top: -3px;}
#mainSection01 .slide-pager .arrow a {display: block; font-size: 0; text-indent: -9999%; width: 34px; height: 34px; background: url('/images/icon-arrow01.png') no-repeat center; background-size: 100%;}
#mainSection01 .slide-pager .arrow a.prev {transform: rotate(180deg); margin-right: 33px;}
#mainSection01 .scroll-txt {font-size: 16px; font-weight: 600; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); position: absolute; left: 240px; bottom: 113px;}
#mainSection01 .scroll-txt::before {content: ''; display: block; width: 1px; height: 100px; background: rgba(255, 255, 255, 0.5); position: absolute; bottom: -113px; left: 28px;}
#mainSection01 .scroll-txt::after {content: ''; display: block; width: 1px; height: 47px; background: #fff; position: absolute; bottom: -61px; left: 28px;}
#mainSection02 .h2 {text-align: center; margin-bottom: 30px; opacity: 0;}
#mainSection02 .main-company {position: relative; opacity: 0;}
#mainSection02 .company-slide {width: 1329px; height: 700px; overflow: hidden; border-radius: 80px; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; margin: 0 28px; background-repeat: no-repeat; background-position: center; background-size: cover;}
#mainSection02 .company-slide::before {content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 1s; transform: scale(1,1);}
#mainSection02 .company-slide::after {content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5);}
#mainSection02 .company-slide.slide01 {background-image: url('/images/main-company-img01.jpg');}
#mainSection02 .company-slide.slide02 {background-image: url('/images/main-company-img02.jpg');}
#mainSection02 .company-slide.slide03 {background-image: url('/images/main-company-img03.jpg');}
#mainSection02 .company-slide .txt-wrap {position: relative; z-index: 1;}
#mainSection02 .company-slide .h3 {font-size: 90px; font-weight: 700; letter-spacing: -0.01rem; text-transform: uppercase;}
#mainSection02 .company-slide .txt {font-size: 29px;}
#mainSection02 .main-company .slick-arrow {border: 0; font-size: 0; text-indent: -99999%; cursor: pointer; width: 80px; height: 38px; background: url('/images/icon-arrow01.png') no-repeat center; background-size: 100%; position: absolute; top: 50%; margin-top: -19px; z-index: 1;}
#mainSection02 .main-company .slick-prev {transform: rotate(180deg); left: calc(50% - 580px);}
#mainSection02 .main-company .slick-next {right: calc(50% - 580px);}
#mainSection02 .main-company .slick-dots {display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px;}
#mainSection02 .main-company .slick-dots li {width: 15px; height: 15px; border-radius: 50%; background: #fff; margin: 0 11px; cursor: pointer;}
#mainSection02 .main-company .slick-dots li.slick-active {width: 25px; height: 25px; background: none; border: 5px solid #33ff7b;}
#mainSection02 .main-company .slick-dots li button {display: none;}
#mainSection02.active-section .h2 {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;}
#mainSection02.active-section .main-company {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 1s both;}
#mainSection03 {background: #ededed; padding: 30px 240px;}
#mainSection03 .inner {display: flex; justify-content: space-between; align-items: center;}
#mainSection03 .img {max-width: 100%; width: 50%; opacity: 0;}
#mainSection03 .img img {display: block; max-width: 100%;}
#mainSection03 .ctn {width: 50%; padding-right: 7vw; opacity: 0;}
#mainSection03 .menu-box .box a {display: block; background: #fff; width: 100%; padding: 40px 50px; margin: 20px 0; border: 1px solid #fff; transition: all 0.3s;}
#mainSection03 .menu-box .box a:hover {border: 1px solid #0e7c4f;}
#mainSection03 .menu-box .box .title {font-size: 40px; color: #5a412b; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e6e3df;}
#mainSection03 .menu-box .box .txt {font-size: 20px; color: #5a412b; padding-right: 50px; position: relative;}
#mainSection03 .menu-box .box .txt::after {content: ''; display: block; width: 10px; height: 10px; border-top: 3px solid #5a412b; border-right: 3px solid #5a412b; transform: rotate(45deg); position: absolute; right: 0px; top: 10px;}
#mainSection03.active-section .ctn {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;}
#mainSection03.active-section .img {animation: fadeLeft 2s cubic-bezier(0.4, 0, 0.2, 1) 1s both;}
#mainSection04 {padding: 30px 240px;}
#mainSection04 .h2 {opacity: 0;}
#mainSection04 .box-wrap {display: flex; justify-content: space-between; margin-top: 100px; opacity: 0;}
#mainSection04 .box-wrap .box {width: 49%; padding: 160px 30px; position: relative; overflow: hidden; border-radius: 70px; text-align: center; color: #fff;}
#mainSection04 .box-wrap .box::before {content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; transform: scale(1,1); transition: all 1s;}
#mainSection04 .box-wrap .box01::before {background-image: url('/images/main-contact-img01.jpg');}
#mainSection04 .box-wrap .box02::before {background-image: url('/images/main-contact-img02.jpg');}
#mainSection04 .box-wrap .box:hover::before {transform: scale(1.2,1.2);}
#mainSection04 .box-wrap .inner {position: relative;}
#mainSection04 .box-wrap .txt-wrap .en {text-transform: uppercase; font-size: 40px; font-weight: 700;}
#mainSection04 .box-wrap .txt-wrap .en::after {content: ''; display: block; height: 1px; width: 90px; margin: 18px auto; background: #fff;}
#mainSection04 .box-wrap .txt-wrap .kr {font-size: 30px; font-weight: 600;}
#mainSection04 .box-wrap .btn {
	display: flex;
	width: 251px; height: 69px;
	align-items: center;
	padding: 30px;
	border: 1px solid #fff;
	border-radius: 50px;
	text-transform: uppercase;
	font-size: 20px;
	color: #fff;
	line-height: 1;
	position: relative;
	transition: all 0.2s;
	margin: 75px auto 0;
}
#mainSection04 .box-wrap .btn::after {content: ''; display: block; width: 34px; height: 16px; background: url('/images/icon-arrow01.png') no-repeat center; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}
#mainSection04 .box-wrap .btn:hover {background: #0e7c4f; border: 1px solid #0e7c4f;}
#mainSection04.active-section .h2 {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;}
#mainSection04.active-section .box-wrap {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 1s both;}

#fp-nav {position: fixed; z-index: 10; top: 50%; left: 63px; transform: translateY(-50%);}
#fp-nav ul li {margin: 40px 0;}
#fp-nav ul li:last-child {display: none;}
#fp-nav ul li a {display: block; font-size: 0; text-indent: -99999%; padding: 5px;}
#fp-nav ul li a span {background: #fff; width: 6px; height: 6px; display: block; border-radius: 50%;}
#fp-nav ul li a.active {position: relative;}
#fp-nav ul li a.active::before {content: ''; display: block; width: 25px; height: 25px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.2);}
#fp-nav.black ul li a span {background: #000;}
#fp-nav.black ul li a.active::before {background: rgba(0, 0, 0, 0.2);}

/* contents */
#container {padding: 137px 65px 100px;}
#container .contents .ctn + .ctn {margin-top: 115px;}
.sub-visual {width: 100%; position: relative; height: 705px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 15px; transition: all 0.3s;  margin-bottom: 78px;}
.sub-visual .bg {transform: scale(1.2,1.2); transition: all 2s; background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.sub-visual.active .bg {transform: scale(1,1);}
.sub-visual .title-wrap {height: 100px; overflow: hidden; text-align: center;}
.sub-visual .h2 {position: relative; font-size: 100px; font-weight: 900; text-transform: uppercase; color: #fff; line-height: 1; letter-spacing: 0;}
.business .sub-visual .bg {background-image: url('/images/bg-business.jpg');}
.company .sub-visual .bg {background-image: url('/images/bg-company.jpg');}
.recruit .sub-visual .bg {background-image: url('/images/bg-recruit.jpg');}

.sub-tab {width: 100%; margin-bottom: 78px;}
.sub-tab ul {display: flex;}
.sub-tab ul li {flex: 1; margin-left: -1px;}
.sub-tab ul li a {width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 35px; font-weight: 700; background: #fff; border: 1px solid #b9b9b9; transition: all 0.3s;}
.sub-tab ul li a.active,
.sub-tab ul li a:hover {border: 1px solid #0e7c4f; background: #0e7c4f; color: #fff;}
.sub-tab ul li:first-child a {border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.sub-tab ul li:last-child a {border-top-right-radius: 5px; border-bottom-right-radius: 5px;}

.contents .ctn .title-wrap {margin-bottom: 20px; overflow: hidden;}
.contents .ctn .title-wrap .ko {font-size: 30px; color: #0e7c4f; font-weight: 700; line-height: 1;}
.contents .ctn .title-wrap .h4 {font-size: 60px; font-weight: 800; text-transform: uppercase; letter-spacing: 0;}
.ctn .box-ctn {background: #f6f6f6; border-radius: 15px; padding: 80px 100px;}
.ctn .box-ctn + .box-ctn {margin-top: 28px;}
.ctn .title-area {display: flex; align-items: flex-start; justify-content: space-between;}
.ctn .title-area .box-title {text-align: left;}
.ctn .title-area .box-title .title {font-size: 50px; font-weight: 800; line-height: 1;}
.ctn .title-area .box-title .title-s {font-size: 20px; font-weight: 600; margin-top: 5px;}
.ctn .title-area .box-txt {text-align: right; font-size: 22px;}

/* list-style */
.list-dash li {position: relative; padding-left: 15px;}
.list-dash li::before {content: '-'; position: absolute; left: 0; top: -1px;}
.list-dash li + li {margin-top: 13px;}

/* popup */
.popup {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; opacity: 0; visibility: hidden; transition: all 0.2s;}
.popup.active {opacity: 1; visibility: visible;}
.popup .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4);}
.popup .inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%); background: #fff; transition: all 0.2s;}
.popup.active .inner {transform: translate(-50%, -50%);}
.popup .popup-header {position: absolute; top: 0; left: 0; right: 0; height: 50px; display: flex; padding: 0 20px; align-items: center; justify-content: space-between;}
.popup .popup-header .h2 {}
.popup .popup-header .close {font-size: 0; text-indent: -99999%; display: block; width: 40px; height: 40px; position: relative;}
.popup .popup-header .close::before,
.popup .popup-header .close::after {content: ''; display: block; width: 1px; height: 32px; border-left: 1px solid #333; position: absolute; top: 7px; left: 29px;}
.popup .popup-header .close::before {transform: rotate(45deg);}
.popup .popup-header .close::after {transform: rotate(-45deg);}
.popup .popup-body {position: absolute; top: 50px; left: 0; right: 0; bottom: 53px; padding: 20px; overflow: auto;}
.popup .form-group {width: 100%;}
.popup .form-group + .form-group {margin-top: 15px;}
.popup .form-group .label {font-size: 15px; margin-bottom: 3px;}
.popup .form-group .form input,
.popup .form-group .form textarea {padding: 12px; border: 1px solid #ddd; transition: all 0.2s;}
.popup .form-group .form {margin: 0 -3px; display: flex;}
.popup .form-group .form > * {margin: 0 3px; flex: 1;}
.popup .form-group .form + .form {margin-top: 6px;}
.popup .form-group .form select {
	padding:12px 10px 12px;
	border:1px solid #ddd;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* transition: all 0.2s; */
    position: relative;
    outline: 0;
    transition: all 0.2s;
}
.popup .form-group .form select[disabled],
.popup .form-group .form input[disabled] {background: #efefef;}
.popup .form-group .form input:focus,
.popup .form-group .form select:focus,
.popup .form-group .form textarea:focus {border: 1px solid #0e7c4f;}
.popup .form-group .text-box {width: 100%; height: 100px; border:1px solid #ddd; background: #efefef; padding: 12px; overflow: auto; font-size: 12px; margin-bottom: 10px;}
.popup .form-group .text-box p {font-size: 12px;}
.popup .form-group .text-box table {width: 100%; margin: 3px 0;}
.popup .form-group .text-box table th,
.popup .form-group .text-box table td {padding: 3px; border: 1px solid #ddd; text-align: center;}
.popup .input-chk {}
.popup .input-chk label {font-size: 15px;}
.popup .popup-btn {position: absolute; bottom: 0; left: 0; right: 0; display: flex; height: 53px;}
.popup .popup-btn button {cursor: pointer; flex: 1; display: flex; align-items: center; justify-content: center; height: 53px; border: 0; color: #fff; font-size: 16px; text-align: center;}
.popup .popup-btn button.close {background: #8e8e8e;}
.popup .popup-btn button.save {background: #0e7c4f;}
.contact-popup .inner {width: 600px; height: 900px;}

/* table */
table-wrap {overflow-x: auto;}
.tb-st01 {width: 100%;}
.tb-st01 thead tr th {border-top: 2px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #b9b9b9; border-right: 1px solid #b9b9b9; font-size: 24px; font-weight: 700; text-align: center; padding: 25px 64px; background: #fff;}
.tb-st01 thead tr th:first-child {border-left: 0;}
.tb-st01 thead tr th:last-child {border-right: 0;}
.tb-st01 thead tr th:nth-child(2n-1) {background: #f6f6f6;}
.tb-st01 tbody tr > * {border: 1px solid #b9b9b9;}
.tb-st01 tbody tr > *:first-child {border-left: 0;}
.tb-st01 tbody tr > *:last-child {border-right: 0;}
.tb-st01 tbody tr:last-child > * {border-bottom: 1px solid #333;}
.tb-st01 tbody tr th,
.tb-st01 tbody tr td {padding: 25px 64px; background: #fff; font-size: 20px; font-weight: 500;}
.tb-st01 tbody tr th {background: #f6f6f6;}

/* accordion board*/
.accordion-board {width: 100%;}
.accordion-board .list {width: 100%; border-radius: 15px; overflow: hidden; transition: all 0.3s;}
.accordion-board .list + .list {margin-top: 13px;}
.accordion-board .accordion-header {width: 100%; height: 122px; display: flex; align-items: center; position: relative; padding: 15px 170px 15px 140px; border: 1px solid #f5f5f5; background: #f5f5f5; transition: all 0.3s;}
.accordion-board .accordion-header .num {font-size: 45px; font-weight: 700; color: #9d9d9d; position: absolute; top: 50%; transform: translateY(-50%); left: 50px;}
.accordion-board .accordion-header .title {font-size: 28px; font-weight: 700;}
.accordion-board .accordion-header .title span {font-size: 20px;}
.accordion-board .accordion-header .btn {display: flex; width: 70px; height: 70px; border-radius: 50%; background: #0e7c4f; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center;}
.accordion-board .accordion-header .btn::before {content: ''; display: block; width: 19px; height: 3px; background: #fff; transition: all 0.3s; position: absolute; top: 50%; left: 50%; margin-top: -1.5px; margin-left: -9.5px;}
.accordion-board .accordion-header .btn::after {content: ''; display: block; width: 3px; height: 19px; background: #fff; transition: all 0.3s; position: absolute; top: 50%; left: 50%; margin-top: -9.5px; margin-left: -1.5px;}
.accordion-board .accordion-body {background: #f5f5f5; border: 1px solid #0e7c4f; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 85px; display: none;}
.accordion-board .accordion-header.active {border: 1px solid #0e7c4f; background: #0e7c4f;}
.accordion-board .accordion-header.active .num,
.accordion-board .accordion-header.active .title {color: #fff;}
.accordion-board .accordion-header.active .btn {background: #fff;}
.accordion-board .accordion-header.active .btn::after {transform: rotate(90deg); background: #0e7c4f;}
.accordion-board .accordion-header.active .btn::before {background: #0e7c4f;}

.contact-wrap {display: flex; width: 100%; justify-content: space-between; margin: 0 -5px;}
.contact-wrap > li {flex: 1; margin: 0 5px;}
.contact-wrap a {
    display: flex;
    width: 100%; height: 140px;
    border: 1px solid #b3b3b3;
    border-radius: 15px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: left 40px center;
    align-items: center;
    justify-content: flex-end;
    padding: 15px 96px 15px 40px;
    position: relative;
    font-size: 26px;
    font-weight: 700;
    transition: all 0.3s;
}
.contact-wrap a:hover {border: 1px solid #0e7c4f; color: #0e7c4f;}
.contact-wrap a::after {
    content: '';
    display: block;
    width: 17px; height: 17px;
    border-top: 4px solid #333;
    border-right: 4px solid #333;
    border-radius: 3px;
    transform: rotate(45deg);
    position: absolute;
    top: 50%; right: 40px;
    margin-top: -10px;
    transition: all 0.3s;
}
.contact-wrap a:hover::after {border-top: 4px solid #0e7c4f; border-right: 4px solid #0e7c4f;}
.contact-wrap .contact01 a {background-image: url('/images/contact-icon01.png');}
.contact-wrap .contact02 a {background-image: url('/images/contact-icon02.png');}
.contact-wrap .contact03 a {background-image: url('/images/contact-icon03.png');}
.contact-wrap .contact04 a {background-image: url('/images/contact-icon04.png');}
.contact-wrap .contact05 a {background-image: url('/images/contact-icon05.png');}

/* company */
.company .ctn01 .list-wrap {display: flex; justify-content: space-between;}
.company .ctn01 .list-wrap .list {padding: 140px 30px; border-radius: 15px; overflow: hidden; text-align: center; width: 33%; position: relative;}
.company .ctn01 .list-wrap .list::before {content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; transition: all 1.5s; transform: scale(1, 1);}
.company .ctn01 .list-wrap .list:hover::before {transform: scale(1.1, 1.1);}
.company .ctn01 .list-wrap .list01::before {background-image: url('/images/company-img01.jpg');}
.company .ctn01 .list-wrap .list02::before {background-image: url('/images/company-img02.jpg');}
.company .ctn01 .list-wrap .list03::before {background-image: url('/images/company-img03.jpg');}
.company .ctn01 .list .title {color: #fff; font-size: 50px; text-transform: uppercase; font-weight: 800; letter-spacing: 0.05rem; position: relative;}
.company .ctn01 .list .txt {color: #fff; font-size: 35px; font-weight: 700; margin-top: 60px; line-height: 1.2; position: relative;}
.company .ctn01 .list .txt::before {content: ''; display: block; width: 63px; height: 1px; background: #fff; margin: 0 auto 60px;}
.company .ctn02 {position: relative; padding-bottom: 260px;}
.company .ctn02 .ctn-wrap {position: relative;}
.company .ctn02 .slider-for .slide {display: flex;}
.company .ctn02 .slider-for .thum {width: calc(50% - 108px); overflow: hidden; border-radius: 15px;}
.company .ctn02 .slider-for .txt-wrap {padding-left: 114px; width: calc(50% + 108px); padding-top: 103px;}
.company .ctn02 .slider-for .txt-wrap .title {font-size: 28px; font-weight: 700; color: #0e7c4f;}
.company .ctn02 .slider-for .txt-wrap .txt01 {font-size: 28px; font-weight: 700; color: #0e7c4f;}
.company .ctn02 .slider-for .txt-wrap .txt {font-size: 24px; font-weight: 700; margin-top: 20px;}
.company .ctn02 .slider-nav {position: absolute; width: calc(50% + 67px); right: 0; bottom: 0;}
.company .ctn02 .slider-nav .slide {width: 314px; border-radius: 15px; overflow: hidden; margin: 0 5px;}
.company .ctn02 .slider-nav .slide img {width: 100%;}
.company .ctn02 .company-paging {position: absolute; top: -40px; right: 63px;}
.company .ctn02 .company-paging > li {display: none; font-weight: 700;}
.company .ctn02 .company-paging > li span {color: #a8a8a8;}
.company .ctn02 .company-paging > li.slick-active {display: block;}
.company .ctn02 .slider-nav .slick-arrow {display: block; width: 34px; height: 20px; border: 0;position: absolute; background: none; top: -36px; cursor: pointer}
.company .ctn02 .slider-nav .slick-prev {right: 121px;}
.company .ctn02 .slider-nav .slick-next {transform: rotate(180deg); right: 7px; top: -39px;}
.company .ctn02 .slider-nav .slick-arrow i {display: block; width: 34px; height: 20px;}
.company .ctn02 .slider-nav .slick-arrow::after {content: ''; display: block; position: absolute; left: 0; right: 0; height: 3px; background: #333; top: 50%; margin-top: -3px;}
.company .ctn02 .slider-nav .slick-arrow::before {content: ''; display: block; position: absolute; width: 8px; height: 8px; border-top: 3px solid #333; border-left: 3px solid #333; transform: rotate(-45deg); left: 0; top: 3px;}
.company .ctn02 .slide-txt {text-transform: uppercase; font-size: 242px; font-weight: 900; color: #f0f0f0; word-break: keep-all; white-space: nowrap; position: absolute; bottom: 0; animation: scrollText 14s infinite linear; line-height: 1;}
.company .ctn03 .map-wrap {width: 100%; height: 730px; position: relative; border-radius: 15px; overflow: hidden;}
.company .ctn03 .map-wrap iframe {margin-top: -160px;}
.company .ctn03 .map-wrap .info-box {position: absolute; top: 50%; transform: translateY(-50%); left: 110px; width: 514px; max-width: 100%; padding: 65px 45px; border-radius: 15px; background: #5a412b;}
.company .ctn03 .map-wrap .info-box .title {color: #fff; font-size: 35px; letter-spacing: 0.1rem; line-height: 1; text-transform: uppercase; font-weight: 800; padding-bottom: 20px; border-bottom: 1px solid #8c7a6b;}
.company .ctn03 .map-wrap .info-box dl dt {margin-top: 25px; color: #fff; font-size: 26px; font-weight: 600;}
.company .ctn03 .map-wrap .info-box dl dd {font-size: 20px; color: #fff; word-break: keep-all; line-height: 1.2;}
.company .ctn03 .map-wrap .info-box dl dd + dd {margin-top: 5px;}

/* business */
.business .box-area {display: flex; justify-content: space-between; margin-top: 54px;}
.business .box-area .box {width: 24%; padding: 43px 43px 50px 43px; height: 280px; border: 1px solid #b9b9b9; border-radius: 15px; background-color: #fff; background-repeat: no-repeat; background-position: right 43px bottom 43px;}
.business .box-area .box .num {font-size: 30px; font-weight: 700;}
.business .box-area .box .txt {font-size: 22px; font-weight: 700;}
.business .box-area .box .txt span {display: block; font-size: 20px;}
.business .flow-wrap {display: flex; justify-content: center;}
.business .flow-wrap .box {background: #fff; border-radius: 15px; box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.03); border: 1px solid #fff; width: 390px; max-width: 100%; position: relative; padding: 45px; text-align: center;}
.business .flow-wrap .box + .box {margin-left: 98px;}
.business .flow-wrap .box::before {content: ''; display: block; width: 69px; height: 1px; border-top: 1px solid #bdbdbd; position: absolute; right: 0; top: 50%; margin-right: -84px;}
.business .flow-wrap .box::after {
    content: '';
    display: block;
    width: 0; height: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 7px solid #bdbdbd;
    border-right: 0px solid transparent;
    position: absolute;
    top: 50%; right: 0;
    margin-top: -5px;
    margin-right: -85px;
}
.business .flow-wrap .box .icon {display: block; width: 118px; height: 118px; border-radius: 50%; margin: 0 auto 25px; background-color: #ecfaf4; background-repeat: no-repeat; background-position: center;}
.business .flow-wrap .box.flow-box {border: 1px solid #0e7c4f; padding: 15px;}
.business .flow-box dl dt {width: 100%; padding: 15px;text-align: center; background: #0e7c4f; border-radius: 10px; color: #fff; font-size: 22px; font-weight: 700; border: 1px solid #0e7c4f;}
.business .flow-box dl dd {width: 100%; text-align: center; padding: 15px; background: #ecfaf4; border-radius: 10px; color: #0e7c4f !important; font-size: 20px; font-weight: 700; border: 1px solid #0e7c4f; position: relative;}
.business .flow-box dl dd + dd {margin-top: 40px;}
.business .flow-box dl dd + dd::before {content: ''; display: block; position: absolute; width: 1px; height: 26px; border-left: 1px solid #0e7c4f; left: 50%; top: -34px;}
.business .flow-box dl dd + dd::after {
    content: '';
    display: block;
    width: 0; height: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid #0e7c4f;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    top: -14px; left: 50%;
    margin-left: -6px;
}
.business .flow-wrap .box dl dt {font-size: 22px; font-weight: 700;}
.business .flow-wrap .box dl dd {font-size: 18px; color: #868686;}
.business .flow-wrap .box dl dd span {display: block; font-size: 16px; font-weight: 400;}
.business .flow-wrap .box dl dt + dd {margin-top: 10px;}
.business .flow-wrap .box-wrap {margin-left: 98px; display: flex; flex-wrap: wrap; align-content: space-between; width: 390px; max-width: 100%;}
.business .flow-wrap .box-wrap .box + .box {margin-left: 0;}
.business .flow-wrap .box-wrap .box {display: flex; align-items: center; padding: 20px 30px; width: 100%;}
.business .flow-wrap .box-wrap .box .icon {margin: 0 37px 0 0; flex-shrink: 0;}
.business .accordion-board .list01 .flow-wrap .box03::before,
.business .accordion-board .list01 .flow-wrap .box03::after {content: none;}
.business .accordion-board .list02 .flow-wrap .box01::after {transform: rotate(180deg); margin-right: -22px;}
.business .accordion-board .list02 .flow-wrap .box02::before,
.business .accordion-board .list02 .flow-wrap .box02::after {content: none;}
.business .accordion-board .list02 .flow-wrap .box03::before,
.business .accordion-board .list02 .flow-wrap .box03::after,
.business .accordion-board .list02 .flow-wrap .box04::before,
.business .accordion-board .list02 .flow-wrap .box04::after {right: auto; margin-right: 0; left: 0; margin-left: -84px;}
.business .accordion-board .list02 .flow-wrap .box03::after {transform: rotate(180deg);}
.business .accordion-board .list02 .flow-wrap .box04::before {border-top: 1px solid #0e7c4f;}
.business .accordion-board .list02 .flow-wrap .box04::after {margin-left: -21px; border-left: 7px solid #0e7c4f;}
.business .accordion-board .list03 .flow-wrap .box03::before {border-top: 1px solid #0e7c4f;}
.business .accordion-board .list03 .flow-wrap .box03::after {border-left: 7px solid #0e7c4f;}
.business .accordion-board .list03 .flow-wrap .box04::before,
.business .accordion-board .list03 .flow-wrap .box04::after,
.business .accordion-board .list04 .flow-wrap .box04::before,
.business .accordion-board .list04 .flow-wrap .box04::after,
.business .accordion-board .list05 .flow-wrap .box04::before,
.business .accordion-board .list05 .flow-wrap .box04::after {content: none;} {content: none;}
.business .accordion-board .list04 .flow-box dl dd + dd {margin-top: 83px;}
.business .accordion-board .list04 .flow-box dl dd + dd::before {height: 61px; top: -74px;}

.business .accordion-board .list01 .flow-wrap .box01 .icon {background-image: url('/images/business-icon05.png');}
.business .accordion-board .list01 .flow-wrap .box02 .icon {background-image: url('/images/business-icon06.png');}
.business .accordion-board .list01 .flow-wrap .box03 .icon {background-image: url('/images/business-icon07.png');}
.business .accordion-board .list02 .flow-wrap .box01 .icon {background-image: url('/images/business-icon08.png');}
.business .accordion-board .list02 .flow-wrap .box02 .icon {background-image: url('/images/business-icon06.png');}
.business .accordion-board .list02 .flow-wrap .box03 .icon {background-image: url('/images/business-icon05.png');}
.business .accordion-board .list02 .flow-wrap .box04 .icon {background-image: url('/images/business-icon07.png');}
.business .accordion-board .list03 .flow-wrap .box01 .icon {background-image: url('/images/business-icon09.png');}
.business .accordion-board .list03 .flow-wrap .box02 .icon {background-image: url('/images/business-icon10.png');}
.business .accordion-board .list03 .flow-wrap .box03 .icon {background-image: url('/images/business-icon11.png');}
.business .accordion-board .list04 .flow-wrap .box01 .icon {background-image: url('/images/business-icon12.png');}
.business .accordion-board .list04 .flow-wrap .box02 .icon {background-image: url('/images/business-icon09.png');}
.business .accordion-board .list04 .flow-wrap .box03 .icon {background-image: url('/images/business-icon13.png');}
.business .accordion-board .list05 .flow-wrap .box01 .icon {background-image: url('/images/business-icon09.png');}
.business .accordion-board .list05 .flow-wrap .box02 .icon {background-image: url('/images/business-icon11.png');}
.business .accordion-board .list05 .flow-wrap .box03 .icon {background-image: url('/images/business-icon14.png');}
.business .box-ctn02 ul {display: flex; align-items: center; justify-content: center;}
.business .box-ctn02 img {max-width: 100%; display: block; margin: 0 auto;}
.business .contact {margin-top: 13px !important;}

.business01 .box-area .box01 {background-image: url('/images/business-icon01.png');}
.business01 .box-area .box02 {background-image: url('/images/business-icon02.png');}
.business01 .box-area .box03 {background-image: url('/images/business-icon03.png');}
.business01 .box-area .box04 {background-image: url('/images/business-icon04.png');}
.business02 .box-area .box01 {background-image: url('/images/business-icon15.png');}
.business02 .box-area .box02 {background-image: url('/images/business-icon16.png');}
.business02 .box-area .box03 {background-image: url('/images/business-icon17.png');}
.business02 .box-area .box04 {background-image: url('/images/business-icon18.png');}
.business02 .box-ctn02 ul li {margin: 14px; width: 33%;}
.business02 .box-ctn02 ul li p {
    display: flex;
    font-size: 22px;
    font-weight: 600;
    width: 380px; height: 72px;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 23px auto 0;
    background: #fff;
    border: 1px solid #b9b9b9;
    border-radius: 15px;
    max-width: 100%;
}
.business02 .box-ctn03 .img04 {display: block; margin: 0 auto; max-width: 100%;}
.business02 .box-ctn03 .img05 {display: none; margin: 0 auto; max-width: 100%;}

/* recruit */
.recruit .ctn01 {position: relative; padding-bottom: 335px;}
.recruit .ctn04 {width: 100%; padding: 100px 20px; border-radius: 15px; overflow: hidden; position: relative; margin-top: 50px !important;}
.recruit .ctn04::before {content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('/images/recruit-img10.jpg') no-repeat center; transition: all 1s; transform: scale(1,1);}
.recruit .ctn04:hover::before {transform: scale(1.1, 1.1);}
.recruit .ctn04 .title {position: relative; text-align: center; color: #fff; font-size: 30px; opacity: 0.7; font-weight: 600;}
.recruit .welfare-slide {position: absolute; left: -78px; right: -78px; }
.recruit .welfare-slide .slide {width: 498px; height: 335px; border-radius: 15px; overflow: hidden; position: relative; margin: 0 13px; padding: 40px; display: flex; align-items: flex-end;}
.recruit .welfare-slide .slide::before {content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transition: all 1s; transform: scale(1,1);}
.recruit .welfare-slide .slide:hover::before {transform: scale(1.1,1.1);}
.recruit .welfare-slide .slide01::before {background-image: url('/images/recruit-img01.jpg');}
.recruit .welfare-slide .slide02::before {background-image: url('/images/recruit-img02.jpg');}
.recruit .welfare-slide .slide03::before {background-image: url('/images/recruit-img03.jpg');}
.recruit .welfare-slide .slide04::before {background-image: url('/images/recruit-img04.jpg');}
.recruit .welfare-slide .slide05::before {background-image: url('/images/recruit-img05.jpg');}
.recruit .welfare-slide .slide06::before {background-image: url('/images/recruit-img06.jpg');}
.recruit .welfare-slide .slide07::before {background-image: url('/images/recruit-img07.jpg');}
.recruit .welfare-slide .slide08::before {background-image: url('/images/recruit-img08.jpg');}
.recruit .welfare-slide .slide09::before {background-image: url('/images/recruit-img09.jpg');}
.recruit .welfare-slide .slide::after {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgb(29,17,4);
    background: linear-gradient(0deg, rgba(29,17,4,0.7) 5%, rgba(29,17,4,0) 100%);
    z-index: 1;
}
.recruit .welfare-slide .slide:hover::after {background: rgb(14,124,79); background: linear-gradient(0deg, rgba(14,124,79,0.6208858543417367) 5%, rgba(14,124,79,0) 100%);}
.recruit .welfare-slide .slide .txt-wrap {position: relative; z-index: 2;}
.recruit .welfare-slide .slide .title {color: #fff; font-size: 26px; font-weight: 600; margin-bottom: 10px;}
.recruit .welfare-slide .slide .txt {color: #fff; font-size: 20px; font-weight: 400; line-height: 1.2;}
.recruit .process-wrap {display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 80px 0 110px; flex-wrap: wrap;}
.recruit .process-wrap .step {display: block; width: 19vw; height: 19vw; border-radius: 50%; background: #f6f6f6; text-align: center; padding: 4vw 20px 20px; position: relative; flex-shrink: 0;}
.recruit .process-wrap .step .num {font-size: 1.5vw; font-weight: 800;}
.recruit .process-wrap .step .title {font-size: 1.2vw; font-weight: 600;}
.recruit .process-wrap .step .icon {background-position: center; background-repeat: no-repeat; display: block; height: 4vw; width: 67px; margin: 1.5vw auto;}
.recruit .process-wrap .step01 .icon {background-image: url('/images/recruit-icon01.png'); background-size: 3.5vw;}
.recruit .process-wrap .step02 .icon {background-image: url('/images/recruit-icon02.png'); background-size: 2.5vw;}
.recruit .process-wrap .step03 .icon {background-image: url('/images/recruit-icon03.png'); background-size: 2.6vw;}
.recruit .process-wrap .step04 .icon {background-image: url('/images/recruit-icon04.png'); background-size: 2.2vw;}
.recruit .process-wrap .step + .step::before {content: ''; display: block; width: 8px; height: 8px; border-top: 3px solid #0e7c4f; border-right: 3px solid #0e7c4f; transform: rotate(45deg); position: absolute; left: -20%; top: 50%; margin-top: -0.5vw; margin-left: 0.5vw;}

@media(max-width: 1500px) {
    #header,
    #header.scroll {height: 70px; padding: 0 30px;}
    #header .h1,
    #header.scroll .h1 {width: 150px;}
    #header .nav ul {display: none;}
    #container {padding: 70px 30px 70px;}
    #container .contents .ctn + .ctn {margin-top: 70px;}
    .sub-visual {height: 400px; margin-bottom: 30px;}
    .sub-visual .h2 {font-size: 70px;}
    .sub-tab {margin-bottom: 30px;}
    .sub-tab ul li a {font-size: 25px;}
    .contents .ctn .title-wrap .ko {font-size: 25px;}
    .contents .ctn .title-wrap .h4 {font-size: 50px;}
    .ctn .box-ctn {padding: 50px;}
    .ctn .title-area {display: block;}
    .ctn .title-area .box-title .title {font-size: 30px;}
    .ctn .title-area .box-title .title-s {font-size: 16px;}
    .ctn .title-area .box-txt {font-size: 20px; text-align: left; margin-top: 15px;}
    .ctn .title-area .box-txt .txt br {display: none;}

    .tb-st01 thead tr th {padding: 15px 20px; font-size: 20px;}
    .tb-st01 tbody tr th,
    .tb-st01 tbody tr td {padding: 15px 20px; font-size: 18px;}

    .popup .inner {transform: translateX(-50%); top: 20px; bottom: 20px;}
	.popup.active .inner {transform: translateX(-50%);}
    .contact-popup .inner {height: auto;}

    .accordion-board .accordion-header {padding: 15px 100px 15px 90px; height: 97px;}
    .accordion-board .accordion-header .num {font-size: 30px; left: 40px;}
    .accordion-board .accordion-header .title {font-size: 20px;}
    .accordion-board .accordion-header .title span {font-size: 16px;}
    .accordion-board .accordion-header .btn {width: 50px; height: 50px;}
    .accordion-board .accordion-header .btn::after {height: 15px; margin-top: -7.5px;}
    .accordion-board .accordion-header .btn::before {width: 15px; margin-left: -7.5px;}
    .accordion-board .accordion-body {padding: 40px;}

    .business .box-area .box {padding: 30px 30px 40px 30px; background-position: right: 30px bottom 30px; height: 218px;}
    .business .box-area .box .num {font-size: 20px;}
    .business .box-area .box .txt {font-size: 18px;}
    .business .box-area .box .txt span {font-size: 16px;}
    .business .flow-wrap .box {padding: 30px;}
    .business .flow-wrap .box::before {margin-right: -42px; width: 34px;}
    .business .flow-wrap .box::after {margin-right: -41px;}
    .business .flow-wrap .box + .box {margin-left: 45px;}
    .business .flow-wrap .box .icon {width: 80px; height: 80px;}
    .business .flow-wrap .box dl dt {font-size: 18px;}
    .business .flow-wrap .box dl dd {font-size: 15px;}
    .business .flow-wrap .box dl dd span {font-size: 14px;}
    .business .flow-wrap .box-wrap {margin-left: 45px;}
    .business .flow-box dl dd {padding: 10px;}
    .business .flow-box dl dd + dd {margin-top: 20px;}
    .business .flow-box dl dd + dd::before {height: 11px; top: -19px;}
    .business .flow-box dl dd + dd::after {top: -11px;}
    .business .box-area .box01 {background-size: 50px;}
    .business .box-area .box02 {background-size: 50px;}
    .business .box-area .box03 {background-size: 33px;}
    .business .box-area .box04 {background-size: 28px;}
    .business .accordion-board .list02 .flow-wrap .box01::after {margin-right: -15px;}
    .business .accordion-board .list02 .flow-wrap .box03::before,
    .business .accordion-board .list02 .flow-wrap .box03::after,
    .business .accordion-board .list02 .flow-wrap .box04::before,
    .business .accordion-board .list02 .flow-wrap .box04::after {margin-left: -42px;}
    .business .accordion-board .list02 .flow-wrap .box04::after {margin-left: -15px;}
    .business .accordion-board .list01 .flow-wrap .box01 .icon,
    .business .accordion-board .list02 .flow-wrap .box03 .icon,
    .business .accordion-board .list04 .flow-wrap .box02 .icon {background-size: 20px;}
    .business .accordion-board .list01 .flow-wrap .box02 .icon,
    .business .accordion-board .list02 .flow-wrap .box02 .icon,
    .business .accordion-board .list03 .flow-wrap .box02 .icon,
    .business .accordion-board .list03 .flow-wrap .box02 .icon,
    .business .accordion-board .list03 .flow-wrap .box03 .icon,
    .business .accordion-board .list04 .flow-wrap .box01 .icon,
    .business .accordion-board .list05 .flow-wrap .box02 .icon {background-size: 27px;}
    .business .accordion-board .list01 .flow-wrap .box03 .icon,
    .business .accordion-board .list02 .flow-wrap .box04 .icon {background-size: 29px;}
    .business .accordion-board .list02 .flow-wrap .box01 .icon,
    .business .accordion-board .list05 .flow-wrap .box03 .icon {background-size: 25px;}
    .business .accordion-board .list03 .flow-wrap .box01 .icon,
    .business .accordion-board .list04 .flow-wrap .box02 .icon,
    .business .accordion-board .list05 .flow-wrap .box01 .icon,
    .business .accordion-board .list04 .flow-wrap .box03 .icon {background-size: 24px;}
    .business .accordion-board .list04 .flow-box dl dd + dd {margin-top: 20px;}
    .business .accordion-board .list04 .flow-box dl dd + dd::before {height: 11px; top: -18px;}
    .contact-wrap a {font-size: 20px; height: 90px; padding: 15px 60px 15px 40px;}
    .contact-wrap a::after {width: 10px; height: 10px; margin-top: -8px; right: 25px;}
    .contact-wrap .contact01 a {background-size: 33px;}
    .contact-wrap .contact02 a {background-size: 30px;}
    .contact-wrap .contact03 a {background-size: 30px;}
    .contact-wrap .contact04 a {background-size: 30px;}
    .contact-wrap .contact05 a {background-size: 24px;}

    .company .ctn01 .list {padding: 60px 30px;}
    .company .ctn01 .list .title {font-size: 30px;}
    .company .ctn01 .list .txt {margin-top: 40px; font-size: 22px;}
    .company .ctn01 .list .txt::before {margin: 0 auto 40px;}
    .company .ctn02 {padding-bottom: 158px;}
    .company .ctn02 .slider-for .txt-wrap {padding-left: 60px; padding-top: 4vw;}
    .company .ctn02 .slider-for .thum img {width: 132%}
    .company .ctn02 .slider-for .txt-wrap .title {font-size: 22px;}
    .company .ctn02 .slider-for .txt-wrap .txt {font-size: 18px; margin-top: 15px;}
    .company .ctn02 .company-paging {top: -38px; right: 66px;}
    .company .ctn02 .company-paging > li {font-size: 14px;}
    .company .ctn02 .slide-txt {font-size: 153px;}
    .company .ctn03 .map-wrap {height: 450px;}
    .company .ctn03 .map-wrap .info-box {padding: 40px 30px; width: 360px; left: 30px;}
    .company .ctn03 .map-wrap .info-box .title {font-size: 28px;}
    .company .ctn03 .map-wrap .info-box dl dt {font-size: 22px;}
    .company .ctn03 .map-wrap .info-box dl dd {font-size: 18px;}
    .company .ctn03 .map-wrap iframe {margin-top: -276px;}

    .recruit .welfare-slide .slide {height: 250px;}
    .recruit .welfare-slide .slide .title {font-size: 22px;}
    .recruit .welfare-slide .slide .txt {font-size: 16px;}
    .recruit .ctn04 .title {font-size: 22px;}

}

@media(max-width: 1400px) {
	#mainSection01 .visual-slide .main-slide {padding: 0 100px;}
	#mainSection01 .scroll-txt {left: 100px;}
	#mainSection03,
	#mainSection04 {padding: 0 100px;}
}

@media(max-width: 1024px) {
	.main-wrap .h2 {font-size: 50px;}
	#mainSection01 .visual-slide .main-slide .txt-wrap {padding-top: 0;}
	#mainSection01 .visual-slide .main-slide .txt-wrap .logo {font-size: 20px;}
	#mainSection01 .visual-slide .main-slide .txt-wrap .title {font-size: 50px; margin: 15px 0 40px;}
	#mainSection01 .visual-slide .main-slide .txt-wrap a {font-size: 18px; width: 230px; height: 50px;}
	#mainSection01 .slide-pager {width: 450px; height: 100px;}
	#mainSection01 .slide-pager .controls::before {height: 34px; top: -1px;}
	#mainSection01 .slide-pager .controls {margin-left: 59px; padding-left: 20px;}
	#mainSection01 .slide-pager .arrow {margin-left: 20px; padding-left: 20px;}
	#mainSection01 .slide-pager .arrow::before {height: 34px; top: 1px;}
	#mainSection01 .slide-pager .progress-bar {width: 95px; margin-left: 74px;}
	#mainSection01 .company-paging li {right: 239px; bottom: 34px;}
	#mainSection01 .company-paging li span {margin-left: 135px;}
	#mainSection02 .company-slide {width: 700px; height: 429px; margin: 0 18px; border-radius: 40px;}
	#mainSection02 .company-slide .h3 {font-size: 54px;}
	#mainSection02 .company-slide .txt {font-size: 22px;}
	#mainSection02 .main-company .slick-dots li {width: 10px; height: 10px; margin: 0 5px;}
	#mainSection02 .main-company .slick-dots li.slick-active {width: 15px; height: 15px; border: 3px solid #33ff7b;}
	#mainSection03 .ctn {padding-right: 20px; width: 60%;}
	#mainSection03 .menu-box .box a {padding: 30px 40px;}
	#mainSection03 .menu-box .box .title {font-size: 30px; margin-bottom: 15px; padding-bottom: 15px;}
	#mainSection03 .menu-box .box .txt {font-size: 18px;}
	#mainSection03 .img {width: 40%; margin-top: 7vw;}
	#mainSection04 .box-wrap {margin-top: 50px;}
	#mainSection04 .box-wrap .box {border-radius: 30px; padding: 50px 30px;}
	#mainSection04 .box-wrap .txt-wrap .en {font-size: 30px;}
	#mainSection04 .box-wrap .txt-wrap .kr {font-size: 20px;}
	#mainSection04 .box-wrap .btn {font-size: 18px; width: 230px; height: 50px; margin: 45px auto 0;}
}

@media(max-width: 768px) {
    #header,
    #header.scroll {height: 50px; padding: 0 20px;}
    #header .h1,
    #header.scroll .h1 {width: 100px;}
    #header .nav .sitemap-open {width: 30px; height: 17px;}
    #header .site-map {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
    #header .site-map .sitemap-close {top: 20px; right: 20px;}
    #header .site-map .depth01 {display: block;}
    #header .site-map .depth01 > li {height: auto; padding-top: 0; margin-left: 0; border-left: 0; width: 100%; flex: none; margin: 25px 0;}
    #header .site-map .depth02 {margin-top: 5px;}
    #header.main .nav .lang {font-size: 14px; width: 65px; height: 32px;}

    #footer {padding: 30px;}
    #footer .footer-inner {padding: 0;}
    #footer .h2 {width: 100px;}
    #footer .h2 img {width: 100%; display: block;}
    #footer .info-list {margin-top: 15px;}
    #footer .info-list li {font-size: 13px;}
    #footer .footer-link {position: static; transform: none; margin-top: 15px;}
    #footer .footer-link li a {width: 100%; font-size: 13px; height: 40px;}
    #container {padding: 50px 20px;}

	.main-wrap .h2 {font-size: 40px;}
	#mainSection03,
	#mainSection04 {padding: 0 30px;}
	#mainSection01 .visual-slide .main-slide {padding: 0 30px;}
	#mainSection01 .visual-slide .main-slide .txt-wrap .logo {font-size: 16px;}
	#mainSection01 .visual-slide .main-slide .txt-wrap .title {font-size: 30px; margin: 10px 0 35px;}
	#mainSection01 .visual-slide .main-slide .txt-wrap a {font-size: 14px; width: 160px; height: 50px; padding: 0 15px;}
	#mainSection01 .visual-slide .main-slide .txt-wrap a::after {width: 24px;}
	#mainSection01 .scroll-txt {display: none;}
	#mainSection01 .slide-pager {width: auto; height: 55px; left: 0; right: 0; bottom: 0; border-radius: 0; justify-content: center;}
	#mainSection01 .company-paging li {font-size: 13px; right: calc(50% - -34px); bottom: 17px;}
	#mainSection01 .company-paging li span {margin-left: 89px;}
	#mainSection01 .slide-pager .controls::before {height: 20px; top: 5px;}
	#mainSection01 .slide-pager .controls a.play {background-size: 8px;}
	#mainSection01 .slide-pager .controls a.stop {background-size: 8px;}
	#mainSection01 .slide-pager .arrow::before {height: 20px; top: 8px;}
	#mainSection01 .slide-pager .arrow a {width: 20px;}
	#mainSection01 .slide-pager .progress-bar {width: 65px; margin-left: 30px;}
	#mainSection02 .company-slide .h3 {font-size: 30px;}
	#mainSection02 .company-slide .txt {font-size: 16px;}
	#mainSection02 .company-slide {width: 300px; height: 400px; margin: 0 10px; border-radius: 20px;}
	#mainSection02 .company-slide .txt-wrap {margin-top: -50px;}
	#mainSection03 .inner {display: block;}
	#mainSection03 .ctn {padding-right: 0; width: 100%; margin-bottom: 15px;}
	#mainSection03 .menu-box .box a {padding: 20px 30px; margin: 10px 0;}
	#mainSection03 .menu-box .box .title {font-size: 18px; margin-bottom: 10px; padding-bottom: 5px;}
	#mainSection03 .menu-box .box .txt {font-size: 14px;}
	#mainSection03 .menu-box .box .txt::after {width: 7px; height: 7px; border-top: 2px solid #5a412b; border-right: 2px solid #5a412b;}
	#mainSection03 .img {width: 100%; margin-top: 0; height: 200px; overflow: hidden;}
	#mainSection03 .img img {margin-top: -45%;}
	#mainSection04 .box-wrap {margin-top: 30px; display: block;}
	#mainSection04 .box-wrap .box {border-radius: 15px; padding: 45px 30px; width: 100%; margin: 10px 0;}
	#mainSection04 .box-wrap .txt-wrap .en {font-size: 20px;}
	#mainSection04 .box-wrap .txt-wrap .en::after {width: 50px; margin: 15px auto;}
	#mainSection04 .box-wrap .txt-wrap .kr {font-size: 16px;}
	#mainSection04 .box-wrap .btn {font-size: 14px; width: 160px; height: 45px; padding: 0 15px; margin: 20px auto 0;}
	#mainSection04 .box-wrap .btn::after {width: 24px;}

    .sub-visual {height: 190px; margin-bottom: 20px; border-radius: 10px;}
    .sub-visual .title-wrap {height: 37px;}
    .sub-visual .h2 {font-size: 30px; font-weight: 800;}
    .sub-tab ul li a {height: 50px; font-size: 18px;}
    .contents .ctn .title-wrap .ko {font-size: 15px;}
    .contents .ctn .title-wrap .h4 {font-size: 25px;}
    .ctn .box-ctn {padding: 30px; border-radius: 15px;}
    .ctn .title-area .box-title .title {font-size: 25px;}
    .ctn .title-area .box-title .title-s {font-size: 15px;}
    .ctn .title-area .box-txt {font-size: 13px;}

    .table-wrap {overflow: auto;}
    .tb-st01 thead tr th,
    .tb-st01 tbody tr th,
    .tb-st01 tbody tr td {font-size: 13px; padding: 10px;}

    .popup .inner {top: 0; left: 0; right: 0;; bottom: 0; transform: none;}
	.popup.active .inner {transform: none;}
    .contact-popup .inner {width: auto;}

    .accordion-board .list {border-radius: 10px;}
    .accordion-board .list + .list {margin-top: 6px;}
    .accordion-board .accordion-header {padding: 10px 80px 10px 50px; height: 73px;}
    .accordion-board .accordion-header .num {font-size: 20px; left: 15px;}
    .accordion-board .accordion-header .title {font-size: 16px;}
    .accordion-board .accordion-header .title span {font-size: 13px; display: block;}
    .accordion-board .accordion-header .btn {width: 40px; height: 40px; right: 15px;}
    .accordion-board .accordion-body {padding: 30px;}

    .business .box-area {flex-wrap: wrap; margin-top: 20px;}
    .business .box-area .box {width: 49%; height: 165px; padding: 15px 15px 20px 15px; border-radius: 10px; margin: 1% 0; background-position: right 20px bottom 20px;}
    .business .box-area .box .num {font-size: 18px;}
    .business .box-area .box .txt {font-size: 16px;}
    .business .box-area .box .txt span {font-size: 13px;}
    .business .flow-wrap {display: block;}
    .business .flow-wrap .box {padding: 25px 20px;}
    .business .flow-wrap .box::before {width: 1px; height: 20px; top: auto; right: auto; left: 50%; border-top: 0; border-left: 1px solid #bdbdbd; bottom: -31px;}
    .business .flow-wrap .box::after {margin-right: 0; top: auto; bottom: -34px; margin-top: 0; left: 50%; transform: rotate(90deg); margin-left: -3px;}
    .business .flow-wrap .box + .box {margin-left: 0; margin-top: 40px;}
    .business .flow-wrap .box .icon {width: 70px; height: 70px; margin: 0 auto 15px;}
    .business .flow-wrap .box dl dt {font-size: 15px;}
    .business .flow-wrap .box dl dd {font-size: 13px;}
    .business .flow-wrap .box-wrap {margin-left: 0; margin-top: 40px; display: flex; justify-content: space-between;}
    .business .flow-wrap .box-wrap .box {width: 49%; display: block; padding: 25px 10px}
    .business .flow-wrap .box-wrap .box + .box {margin-top: 0;}
    .business .flow-wrap .box-wrap .box .icon {margin: 0 auto 15px;}
    .business .box-area .box01 {background-size: 40px;}
    .business .box-area .box02 {background-size: 40px;}
    .business .box-area .box03 {background-size: 27px;}
    .business .box-area .box04 {background-size: 27px;}
    .business .box-ctn02 ul {display: block;}
    .business .accordion-board .list02 .flow-wrap .box01::after {transform: rotate(-90deg); bottom: -21px;}
    .business .accordion-board .list02 .flow-wrap .box03::before,
    .business .accordion-board .list02 .flow-wrap .box03::after,
    .business .accordion-board .list02 .flow-wrap .box04::before,
    .business .accordion-board .list02 .flow-wrap .box04::after {margin-left: 0; left: 50%; bottom: auto; top: -31px;}
    .business .accordion-board .list02 .flow-wrap .box03::after {transform: rotate(-90deg); margin-left: -3px; top: -33px;}
    .business .accordion-board .list02 .flow-wrap .box04::before {top: -31px; margin-left: 0px; border-top: 0; border-left: 1px solid #0e7c4f;}
    .business .accordion-board .list02 .flow-wrap .box04::after {top: -21px; margin-left: -3px;}
    .business .accordion-board .list03 .flow-wrap .box03::before {border-top: 0; border-left: 1px solid #0e7c4f;}
	.business02 .box-ctn03 .img04 {display: none;}
	.business02 .box-ctn03 .img05 {display: block;}
	.business02 .box-ctn02 ul li {width: 100%; margin: 0;}
	.business02 .box-ctn02 ul li + li {margin-top: 20px;}
	.business02 .box-ctn02 ul li p {font-size: 15px; width: 100%; height: auto; padding: 15px 10px; margin-top: 0px;}

    .contact-wrap {display: block;}
    .contact-wrap > li {width: 100%;}
    .contact-wrap > li + li {margin-top: 6px;}
    .contact-wrap a {border-radius: 10px; padding: 10px 50px 10px 15px; background-position: left 20px center; height: 73px; font-size: 16px;}
    .contact-wrap a::after {width: 6px; height: 6px; margin-top: -6px; border-top: 3px solid #333; border-right: 3px solid #333;}
    .contact-wrap .contact01 a {background-size: 28px;}
    .contact-wrap .contact02 a,
    .contact-wrap .contact03 a {background-size: 24px;}

    .company .ctn01 .list-wrap {display: block;}
    .company .ctn01 .list-wrap .list {width: 100%; margin: 5px 0; padding: 40px 30px; border-radius: 10px;}
    .company .ctn01 .list .title {font-size: 20px;}
    .company .ctn01 .list .txt {font-size: 15px; margin-top: 15px; font-weight: 600; word-break: keep-all;}
    .company .ctn01 .list .txt br {display: none;}
    .company .ctn01 .list .txt::before {margin: 0 auto 20px;}
    .company .ctn02 {padding-bottom: 115px;}
    .company .ctn02 .slider-for .slide {display: block;}
    .company .ctn02 .slider-for .thum {border-radius: 10px; width: 100%;}
    .company .ctn02 .slider-for .thum img {width: 100%;}
    .company .ctn02 .slider-for .txt-wrap {padding-left: 0; padding-top: 0; margin-top: 15px; width: 100%;}
    .company .ctn02 .slider-for .txt-wrap .title {font-size: 16px;}
    .company .ctn02 .slider-for .txt-wrap .txt {font-size: 13px; margin-top: 5px;}
    .company .ctn02 .slider-nav {position: relative; width: 100%; margin-top: 10px;}
    .company .ctn02 .slider-nav .slide {border-radius: 5px; margin: 0 3px;}
    .company .ctn02 .slider-nav .slick-next {top: auto; bottom: -25px; right: 50%; margin-right: -82px;}
    .company .ctn02 .slider-nav .slick-prev {top: auto; bottom: -29px; left: 50%; margin-left: -82px;}
    .company .ctn02 .slider-nav .slick-arrow {width: 26px;}
    .company .ctn02 .slider-nav .slick-arrow::before {border-top: 2px solid #333; border-left: 2px solid #333;}
    .company .ctn02 .slider-nav .slick-arrow::after {height: 2px;}
    .company .ctn02 .company-paging {right: auto; left: 50%; margin-left: -13.5px; top: auto; bottom: -28px;}
    .company .ctn02 .company-paging > li {font-size: 13px;}
    .company .ctn02 .slide-txt {font-size: 89px;}
    .company .ctn03 .map-wrap {height: auto;}
    .company .ctn03 .map-wrap .map {height: 350px; overflow: hidden; border-radius: 10px;}
    .company .ctn03 .map-wrap .info-box {position: static; transform: none; margin-top: 10px; width: 100%; border-radius: 10px; padding: 30px;}
    .company .ctn03 .map-wrap .info-box .title {font-size: 18px; margin-bottom: 15px;}
    .company .ctn03 .map-wrap .info-box dl dt {margin-top: 10px; font-size: 16px;}
    .company .ctn03 .map-wrap .info-box dl dd {font-size: 13px;}

    .recruit .ctn01 {padding-bottom: 170px;}
    .recruit .welfare-slide .slide {width: 300px; margin: 0 5px; height: 170px; padding: 30px; border-radius: 10px;}
    .recruit .welfare-slide .slide .title {font-size: 18px;}
    .recruit .welfare-slide .slide .txt {font-size: 13px;}
    .recruit .process-wrap {margin: 0; justify-content: center;}
    .recruit .process-wrap .step {width: 145px; height: 145px; margin: 15px; padding: 24px 20px 20px;}
    .recruit .process-wrap .step .num {font-size: 18px;}
    .recruit .process-wrap .step .title {font-size: 16px;}
    .recruit .process-wrap .step .icon {height: 27px;}
    .recruit .process-wrap .step01 .icon {background-size: 25px;}
    .recruit .process-wrap .step02 .icon {background-size: 17px;}
    .recruit .process-wrap .step03 .icon {background-size: 20px;}
    .recruit .process-wrap .step04 .icon {background-size: 13px;}
    .recruit .process-wrap .step + .step::before {display: none;}
    .recruit .ctn04 {border-radius: 10px; padding: 70px 20px; margin-top: 20px !important;}
    .recruit .ctn04 .title {font-size: 18px;}
/*  */
