@charset "utf-8";

.pt100 {padding-top: var(--padding100-40);}
.pb100 {padding-bottom: var(--padding100-40);}
.pt150 {padding-top: var(--padding150-50);}
.pb150 {padding-bottom: var(--padding150-50);}

.desc p:not(:last-child) {margin-bottom: 1.7em;}
.sec-greeting {padding:clamp(2.5rem, 0rem + 6.25vw, 7.5rem) 0;}
.sec-greeting .underline {position: relative; z-index: 1;}
.sec-greeting .underline:before {position: absolute; content: ''; z-index: -1; bottom: 0; left: 0; width: 0; height: 44.6%; background: var(--primary-color); opacity: .3; transition: 1.5s;}
.sec-greeting .underline.aos-animate:before {width: 100%;}
.sec-greeting h2 {margin-bottom: clamp(1.25rem, -0.9375rem + 5.4688vw, 5.625rem);}
.sec-greeting .txt {width: 63.08%; padding-right: 50px;}
.sec-greeting .name {gap: 20px;}

.sec-company h2 {padding: clamp(1.5625rem, 0.7813rem + 1.9531vw, 3.125rem) 0;}
.company-cnt {padding:clamp(1.875rem, 0.1563rem + 4.2969vw, 5.3125rem) 0;}
.company-table {border-top: 2px solid #fff; margin-top: 15px;}
.company-table .col {padding: 19px 12px; border-bottom: 1px solid rgba(255,255,255,.5);}
.company-table h3 {min-width: 140px;}
html[lang="en"] .company-table h3 {min-width: 290px;}

.location-menu {margin-bottom:clamp(1.875rem, 0.9375rem + 2.3438vw, 3.75rem);}
.location-menu ul {width: max-content; min-width: calc(100% - 1px); border: 1px solid #dfdfdf; border-bottom: 1px solid var(--primary-color); border-right: 0;}
.location-menu ul li {position: relative; flex: 1 0 auto; width: auto; text-align: center; border-right: 1px solid #dfdfdf;}
.location-menu ul li a {display: flex; justify-content: center; align-items:center; background: #f9f9f9; font-size: 16px; height: 60px; padding: 0 10px;}
.location-menu ul li.active {z-index: 1;}
.location-menu ul li.active a {color: var(--primary-color); font-weight: 700; background: transparent;}
.location-menu ul li.active:before {position: absolute; content: ''; top: -1px; right: -1px; bottom: -1px; left: -1px; background: #fff; z-index: -1; border: 2px solid var(--primary-color); border-bottom: 0;}

.sec-cheonbong .txt {padding-right: 40px;}
.sec-cheonbong .col:not(:last-child) {margin-bottom:clamp(0.625rem, 0.3125rem + 0.7813vw, 1.25rem);}
.sec-cheonbong .cheounbong-map {width: 58.33335%;}
.sec-cheonbong .cheounbong-map .map {position: relative;}
.sec-cheonbong .map-bottom {justify-content: flex-end; gap: 40px; background: #f4f4f4; padding: 13px 20px;}
.sec-cheonbong .info {gap: 10px;}
.sec-cheonbong .map-bottom span {display: block;width: 12px; height: 12px; border-radius: 100%;}
.sec-cheonbong .wave {position: absolute; width: 1em; height: 1em; transform: translate(-50%, -50%);}
.sec-cheonbong .wave span {position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0; background: rgba(235,178,23,.7); border-radius: 100%; animation:wave-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite;}
.sec-cheonbong .wave span:nth-child(1) {animation-delay: 0s;}
.sec-cheonbong .wave span:nth-child(2) {animation-delay: .7s;}
.sec-cheonbong .wave span:nth-child(3) {animation-delay: 1.4s;}
.sec-cheonbong .map-loca01 {top: 37%; left: 27.5%;}
.sec-cheonbong .map-loca02 {top: 46%; left: 41%;}
.sec-cheonbong .map-loca03 {top: 58%; left: 31%;}
.sec-cheonbong .map-loca04 {top: 68%; left: 44%;}
.sec-cheonbong .map-loca05 {top: 50%; left: 64%;}
.sec-cheonbong .map-loca06 {top: 77%; left: 62%; width: 2em; height: 2em;}
.sec-cheonbong .map-loca06 span {background: rgba(223,19,19,.7);}

@keyframes wave-circle {
	0% {transform: scale(0); opacity: 0;}
	50% { opacity: 1;}
	100% {transform: scale(2); opacity: 0;}
}

.gold-menu {position: relative; margin-bottom: 20px;}
.gold-menu ul {width: max-content; min-width: 100%;}
.gold-menu li {width: auto; flex: 1;}
.gold-menu li:not(:last-child) {padding-right: 60px;}
.gold-menu li:not(:last-child):before {position: absolute; content: ''; right: 0; top: 0; height: 100%; width: 60px; background: url('/images/sub/recycle-arrow.png') no-repeat center center; background-size: 10px auto;}
.gold-menu li a {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 150px; height: 50px; background: #ddd; color: #505050;}
.gold-menu li.active a {background: var(--primary-color); color: #fff;}
.gold-slide .swiper-button-prev {left: 30px;}
.gold-slide .swiper-button-next {right: 30px;}
.gold-slide .item {position: relative;}
.gold-slide .item .tit {position: absolute; bottom: 0; left: 0; width: 100%; padding: 14px;background: rgba(0,0,0,.6);}
.propulsion-items {gap: 20px; text-align: center;}
.propulsion-items .item {padding: clamp(1.5625rem, 0.7813rem + 1.9531vw, 3.125rem) clamp(0.9375rem, -0.1563rem + 2.7344vw, 3.125rem);}
.propulsion-items .txt-box {background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.2); width: 100%; height: 118px; padding:clamp(0.625rem, 0.3125rem + 0.7813vw, 1.25rem); gap: 5px;}
.propulsion-items .txt-box:not(:last-child) {margin-bottom: 10px;}
html[lang="en"] .propulsion-items .txt-box {padding: clamp(0.625rem, 0.3125rem + 0.7813vw, 1.25rem) 10px;}
.tour-items, .recycle-boxes {gap: 20px;}
.tour-items .item {position: relative;}
.tour-items .item .txt {position: absolute; left: 0; bottom: 0; right: 0; padding: 20px;}
.eco-items {gap: 10px;}
.eco-items .item {gap: 10px;}
.recycle-boxes .box {background: #fff; border: 1px solid #ddd; padding:clamp(1.25rem, 1.0938rem + 0.3906vw, 1.5625rem) clamp(0.9375rem, 0.625rem + 0.7813vw, 1.5625rem);}
.recycle-process {gap: 30px;}
.recycle-process .box {position: relative;}
html[lang="en"] .recycle-process .item {flex: 1;}
.recycle-process .item:not(:last-child) .box:before {position: absolute; content: ''; top: 0; right: -30px; width: 30px; height: 100%; background: url('/images/sub/recycle-arrow.png') no-repeat center center; background-size: 10px auto;}
.recycle-process .box .txt {position: absolute; width: 100%; bottom: 0; left: 0; color: #fff; background: rgba(0,0,0,.6); padding: 8px 15px;}
.circle-list li {position: relative; padding-left: 15px;}
.circle-list li:not(:last-child) {margin-bottom: 12px;}
.circle-list li:before {position: absolute; content: ''; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 100%; background: #ccc;}
.edu-circles {gap: 100px;}
.edu-circles .circle {position: relative; margin-left: auto; margin-right: auto;}
.edu-circles .item:not(:last-child) .circle:before {position: absolute; content: ''; top: 0; right: -100px; width: 100px; height: 100%; background: url('/images/sub/edu-plus.png') no-repeat center center; background-size: 30px;}
.edu-circles .circle {width: 200px; height: 200px; border-radius: 100%; background: #f4f4f4;}
.edu-arrow {margin: 45px 0;}
.edu-chks .chk-list {width: 41.6667%;}
.edu-chks .photo {position: relative;}
.edu-chks .photo .txt {position: absolute; width: 100%; left: 0; bottom: 0; text-align: center; padding: 8px 15px; background: rgba(0,0,0,.6);}
html[lang="en"] .edu-circles .item {max-width: 273px;}
html[lang="en"] .edu-circles h3 {height: 3.2em;}

.chk-list {padding-right: 40px;}
.chk-list li {position: relative; padding-left: 35px;}
.chk-list li:before {position: absolute; content: '';left: 0; width: 28px; height: 28px; background: url('/images/sub/icon-chk.jpg') no-repeat center center; background-size: contain;}
.chk-list li:not(:last-child) {margin-bottom:clamp(0.4375rem, -0.125rem + 1.4063vw, 1.5625rem);}

.mine-locations {flex-wrap: wrap; gap: 55px 19px;}
.domestic-item {background: #fff; border: 1px solid #ddd;}
.domestic-item .txt {width: 50%; padding: 20px clamp(1.875rem, 0.9375rem + 2.3438vw, 3.75rem); border-left: 1px solid #ddd;}
.domestic-item .circle-list li {display: flex;}
.domestic-item .circle-list li:before {top: 12px;}
.domestic-item .circle-list span {display: inline-block; min-width: 100px;}
html[lang="en"] .domestic-item .circle-list span {min-width: 145px;}
.oversea-item .box-items {padding: clamp(0.625rem, -0.6875rem + 3.2813vw, 3.25rem); border: 1px solid #ddd;}
.oversea-item .box {position: relative;}
.oversea-item .box .box-tit {position: absolute; width: 100%; left: 0; bottom: 0; text-align: center; padding: 8px 15px; background: rgba(0,0,0,.6); color: #fff;}
.sec-banner {padding:clamp(1.875rem, -5rem + 17.1875vw, 15.625rem) 0 clamp(1.25rem, -2.1875rem + 8.5938vw, 8.125rem);}
.oversea-item:not(:last-child) {margin-bottom: clamp(1.875rem, 0.3125rem + 3.9063vw, 5rem);}

.sec-organization .org-wrapper {position: relative;}
.org-add {position: absolute; display: block; text-align: center; width: 20%; min-width: max-content; padding: 5% 20px 0; cursor: pointer;}
.org-add .txt-box {display: none; background: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,.2); overflow: hidden;padding: 12px 5px;}
.org-add .org-position {font-size: clamp(0.75rem, 0.6875rem + 0.1563vw, 0.875rem);}
.org-add .org-name {line-height: 1.3333em;}
.org01 {top: 27%; left: 50%; transform: translateX(-50%);}
.org02 {top: 33.5%; left:0%;}
.org03 {top: 42.5%; left:0%;}
.org04 {top: 52.5%; left: 0%;}
.org05 {top: 43%; left: 80%;}
.org06 {top: 0; left: 50%; transform: translateX(-50%); padding-top: 12%;}
.org-all {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 12.5%;}
.org-all span {position: absolute; width: 100%; padding-bottom: 100%; cursor:pointer;}

.sec-process .img {position: relative;}
.sec-process .light {position: absolute; top: 0; right: 0; bottom: 0; left: 0; animation:blink 2s infinite;}

@keyframes blink {
	0%, 100% {opacity: 0;}
	50% {opacity: 1;}
}

.sec-field .slick-arrow {filter: brightness(0); left: -110px;}
.sec-field .slick-next {left: auto; right: -110px;}
.sec-field .slick-arrow:hover {background-color: var(--primary-color); filter: none;}
.sec-field .items {margin: 0 -10px;}
.sec-field .slick-slide {padding: 0 10px; width: var(--field-width);}
.sec-field .slick-slide:has(.w-long) {width: calc(var(--field-width) * 2);}
.sec-field .item {position: relative; padding-bottom: 133.3333%; overflow: hidden;}
.sec-field .item img {position: absolute; width: 100%; height: 100%; max-width: 100%; max-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.sec-field .item.w-long {padding-bottom: 64.408%;}
.sec-field .item.w-long img {object-fit: contain;}