@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height: 60px; text-align: center;}
.sub-tab-list-style {position: relative;}
.sub-tab-list-style .area-sub {position: relative;}
.sub-tab-list-style ul{display: inline-flex; height: 60px; border-radius: 30px; background: #F5F5F5;  -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; padding: 5px;}
.sub-tab-list-style ul li{display:table-cell; vertical-align:middle; position:relative; width: 22rem; border-radius: 30px; z-index:1;}
.sub-tab-list-style ul li a{display:table; height:50px; width:100%;}
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; font-size: 1.5rem; font-weight: 700; color: #000; line-height: 1.2; text-align:center; transition: all 0.3s;}
.sub-tab-list-style ul li.selected{z-index:2; /* background-color:#007AC2; */}
.sub-tab-list-style ul:not(.move-line-list-JS) li.selected {background-color:#007AC2;}
.sub-tab-list-style ul li.selected em {color: #fff;}
.sub-tab-list-style ul li.hover a em {color: #fff;}
.sub-tab-list-style ul li.none-hover a em{color:#000;}
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:0; left:0; width:100%; height:60px; z-index: 99;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

/* sub menu 이동 */
.move-line-wrap {position: absolute; max-width: 35rem; width: 100%; margin: 0 auto; top: 5px; left: 0;}
.tab-on-icon.move-line {position:absolute; left:0; top:0; z-index:1; height: var(--sub-menu-height);}
.tab-on-icon.move-line > span {height: calc(var(--sub-menu-height) - 10px); background-color:#007AC2; position:absolute; left:0; top:0; text-align:center; transition:background-color 0.5s; border-radius:25px;}

/* -------- 공통 :: 버튼 -------- */
.sub-cm-btn {position: relative; width: 16rem; height: 5rem; border-radius: 2.5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem 0 2rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden;}
.sub-cm-btn.fill-btn {background: #000;}
.sub-cm-btn:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #000; border-radius: 2.5rem; z-index: 1; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.sub-cm-btn em {position: relative; z-index: 1; color: #000; font-size: 1.4rem; font-weight: 600; transition: var(--transition-custom);}
.sub-cm-btn i {position: relative; z-index: 1; font-size: 2rem; color: #000; transition: var(--transition-custom); }
.sub-cm-btn.fill-btn em ,
.sub-cm-btn.fill-btn i {color: #fff;}
.sub-cm-btn.white-ver.fill-btn {background: #fff;} 
.sub-cm-btn.white-ver:before {border-color: #fff;}
.sub-cm-btn.white-ver em {color: #fff; font-weight: 500;}
.sub-cm-btn.white-ver i {color: #fff; }
.sub-cm-btn.white-ver.fill-btn em,
.sub-cm-btn.white-ver.fill-btn i {color: var(--sub-color);}

.sub-cm-btn.blue-ver  {background: #0070BA;}
.sub-cm-btn.blue-ver em ,
.sub-cm-btn.blue-ver i {color: #fff;}
.sub-cm-btn.blue-ver:before {border-color:#0070BA;}
.sub-cm-btn.green-ver  {background: var(--main-color);}
.sub-cm-btn.green-ver:before {border-color:var(--main-color);}
.sub-cm-btn.green-ver em ,
.sub-cm-btn.green-ver i {color: #fff;}

.sub-cm-btn.blue-ver:hover em ,
.sub-cm-btn.blue-ver:hover i {color: #0070BA;}
.sub-cm-btn.green-ver:hover em ,
.sub-cm-btn.green-ver:hover i {color: var(--main-color);}

.cm-sub-tit {font-size: 5rem; font-weight: 700; letter-spacing: -0.04em; color: #000; line-height: 1.2em; text-align: center; margin-bottom: 6rem;}
.cm-sub-txt {font-size: 2rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.7; text-align: center;}

/* ****************** Wonpoong ********************** */
/* ***** Overview ***** */
.overview-page .cm-sub-tit {margin-bottom: 4rem;}
/* 상단 */
.overview-about-con {padding-top: 2rem;}
.overview-about-top {position: relative; z-index: 2;}
.overview-about-box {display: flex;}

.overview-about-box .txt-box {position: relative; width: 57.58%; padding-right: 17rem; padding-top: 7.5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.overview-about-box .txt-box:before {z-index: -1; position: absolute;content: ''; top: 18.5rem;left: calc(-1*((100vw - 1320px) / 2)); width: 100vw; height: calc(100% - 18.5rem); background: #F5F5F5;}

.overview-about-box .txt-box .txt01 {font-size: 5rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.2;}
.overview-about-box .txt-box .txt01 span {color: #007AC2;}
.overview-about-box .txt-box .txt02 {font-size: 2.5rem; font-weight: 600; letter-spacing: -0.025em; color: #000; line-height: 1.56; padding-top: 11.5rem;}
.overview-about-box .txt-box .txt03 {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.025em; color: #666666; line-height: 1.66; padding-top: 3rem;}
.overview-about-box .img-box {width: 42.42%;}
.overview-about-box .img-box span {position: relative; display: block; width: 100%; height: 0; padding-top:131.08%; border-radius: 1rem; overflow: hidden; box-shadow: 40px 40px 99px #00000033;}
.overview-about-box .img-box span img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.overview-global-con {position: relative; background: #F5F5F5; margin-top: -53.6rem;}
.overview-map-bg-box {padding: 8rem 0;}
.overview-map-bg-box img {max-width: 100%;}
.overview-map-bg-img svg {max-width: 100%;}
.overview-map-con {position: relative;}
.overview-map-con .overview-nation-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.overview-map-con .overview-nation-box .head-office-circle {position: absolute;top: 50%; left: 50%; margin-top: 191px; margin-left: -105px; width:60px; height: 60px;}
.overview-map-con .overview-nation-box .head-office-circle .marker {position: absolute; bottom: 32px; left: 50%; transform:translateX(-50%); margin-left: -2px; width:360px; height: 205px; }
.overview-map-con .overview-nation-box .head-office-circle .marker .inner {position: relative; display: block;width: 360px; height: 205px; }
.overview-map-con .overview-nation-box .head-office-circle .marker svg {max-width: 100%; }
.overview-map-con .overview-nation-box .head-office-circle .circle {border:1px solid rgba(0, 122, 194, 0.25) ;border-radius: 50%; animation-fill-mode: both; position: absolute; top: 50%; left: 50%; margin-left: -175px; margin-top: -175px; opacity: 0; width: 350px; height: 350px; animation: nation-circle 5s cubic-bezier(1, 2, 0.66, 3) infinite;}
.overview-map-con .overview-nation-box .head-office-circle .circle:nth-child(2) {animation-delay: 1s;}
.overview-map-con .overview-nation-box .head-office-circle .circle:nth-child(3) {animation-delay: 2s;}
.overview-map-con .overview-nation-box .head-office-circle .circle:nth-child(4) {animation-delay:3s;}
@keyframes nation-circle {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0; 
	}
}
.overview-info-box {position: absolute; bottom: 18%; left: 50%; display: flex; justify-content: end; width: 100%; max-width: var(--area-width); transform: translateX(-50%); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.overview-info-list { display: flex; flex-wrap: wrap; width:49rem; align-items: end;     justify-content: end; margin: -3rem 0;}
.overview-info-list li {width: 50%; margin: 3rem 0;}
.overview-info-list li strong {display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; color: #007AC2; line-height: 1.2; margin-bottom: 2rem;}
.overview-info-list li .number {font-size: 10rem; letter-spacing: -0.025em; color: #000; font-weight: 300; line-height: 1;}
.overview-info-list li .txt {font-size: 2rem; font-weight: 400; letter-spacing: -0.025em; color: #000; opacity: 0.6; line-height: 1.5; padding-top: 3rem; height: 3em;}
/* 지도 라인애니메이션 */
.overview-map.animated .svg-line-left {
	stroke-dashoffset: 100%;
	stroke-dasharray: 100%;
   -webkit-animation: svglineleft 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation: svglineleft 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.overview-map.animated .svg-line-right {
	stroke-dashoffset: 0;
	stroke-dasharray: 100%;
   -webkit-animation: svglineright 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation: svglineright 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes svglineleft {
  from {
    opacity:0;filter:Alpha(opacity=0);
	stroke-dashoffset: 100%;
  }
  to {
    opacity:1;filter:Alpha(opacity=100);
	stroke-dashoffset: 20%;
  }
}

@keyframes svglineright {
  from {
    opacity:0;filter:Alpha(opacity=0);
	stroke-dashoffset: -100%;
  }
  to {
    opacity:1;filter:Alpha(opacity=100);
	stroke-dashoffset: 0;
  }
}

/* 인증서 */
.overview-certi-con {padding: 14rem 0 20rem;}
.overview-certi-tab-con {margin-top: 8rem;}
.certicate-list {display: flex; flex-wrap: wrap; margin: -3rem -1rem;}
.certicate-list li {width: calc(25% - 2rem); margin: 3rem 1rem;}
.certicate-list .certificate-img-thumb{position:relative; padding:6.5rem 0; background-color: #F5F5F5; transition:all 0.3s}
.certicate-list .certificate-img-thumb .img-con{display:block; position:relative; width: 57.14%; margin:0px auto; }
.certicate-list .certificate-img-thumb .img-con span{position: relative; width: 100%; height: 0; padding-top: 138.9%; display: block;}
.certicate-list .certificate-img-thumb .img-con span img{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;}
.certicate-list .certificate-img-thumb .certificate-over-box{position:absolute; top:0; left:0; bottom:0; right:0; border:2px solid #007AC2; opacity:0; visibility:hidden; transition:all 0.3s}
.certicate-list .certificate-img-thumb .certificate-over-box i{position:absolute; top:50%; left:50%; margin:-4rem 0 0 -4rem; width:8rem; height:8rem; line-height:8rem; background-color:#007AC2; text-align:center; color:#fff; font-size:2.5rem; border-radius:50%;}
.certicate-list .certificate-tit{font-size: 1.8rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.77; margin-top: 2rem; text-align: center;}
@media all and (min-width:801px){
	 .certicate-list li a:hover .certificate-img-thumb {background-color: #fff;}
	 .certicate-list li a:hover .certificate-img-thumb .certificate-over-box{opacity:1.0; visibility:visible;}
}
/* CI */
.overview-ci-con {padding: 14rem 0 12rem; background: #F5F5F5;}
.ci-con-wrap {border-top: 2px solid #000;}
.ci-con {display: flex; padding: 8rem 0; border-bottom: 1px solid #DDDDDD ;}
.ci-con:last-of-type {border-bottom: 0;}
.ci-con .left-con {width: 25.25%;}
.ci-con .left-con .tit {display: block; font-size: 3.5rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.4; margin-bottom: 4.2rem;}
.ci-con .left-con .ci-btn-box .sub-cm-btn {width: 20rem; margin-bottom: 1rem;}
.ci-con .right-con {width: 75.75%;}
.ci-logo-box {width: 100%; -webkit-box-shadow:5px 9px 30px #0000001A; -moz-box-shadow: 5px 9px 30px #0000001A; box-shadow:5px 9px 30px #0000001A;;}
.ci-logo-box dt {padding: 3rem 5rem; height: 37.5rem; background: #fff; display: flex; align-items: center; justify-content: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.ci-logo-box dt img {max-width: 100%;}
.ci-logo-box dd {background: #F5F5F5; padding: 3rem 5rem; }
.ci-logo-box dd .txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.77;}
.color-con {display: flex; flex-wrap: wrap; height: 25rem;}
.color-con .color-box {display: flex; flex-direction: column; justify-content: space-between; width: 50%; height: 100%; padding: 4.5rem 5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.color-con .color-box.blue-color {background: #0070BA;}
.color-con .color-box.green-color {background: var(--main-color);}
.color-con .color-box strong {font-size: 2.5rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; line-height: 1.2;}
.color-con .color-box .color-txt {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.025em; color: #fff; line-height: 1.875;}
.color-con .color-box .color-txt span {display: inline-block; width: 8.5rem;}
.color-con .color-box .color-txt em {display: inline-block; font-weight: 500; }

/* ***** Brand portfolio ***** */
.brand-con01 {padding: 2rem 0 11rem;}
.brand-con01-top {text-align: center; margin-bottom: 10rem;}
.brand-con01-top .txt01 {font-size: 3rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.3;}
.brand-con01-top .txt02 {font-size: 2rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.7; padding-top: 2rem;} 
.brand-con01-top dl {position: relative; display: inline-block; margin-top: 8rem;}
.brand-con01-top dl dt {position: absolute; left: 50%; top: -2.5rem; height: 5rem; transform: translateX(-50%); display: inline-flex; align-items: center; text-align: center; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.025em; color: #fff; padding: 0 3rem; background: #007AC2; border-radius: 2.5rem; white-space:nowrap;}
.brand-con01-top dl dd {display: flex; align-items: center; justify-content: center; height: 12rem; border-radius: 1rem; border: 2px solid #EEEEEE; padding: 4.5rem 2rem 2.5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.brand-con01-top dl dd span {display: inline-block; margin: 0 2rem;}
.brand-top-logo {height: 8rem; margin-bottom: 3rem;}
.brand-top-logo svg {max-height: 100%;}

.brand-logo-slide-wrap .swiper-wrapper{transition-timing-function: linear !important;}
.brand-logo-item .inner {position: relative; width: 100%;height: 0; padding-top: 100%; border-radius: 50%; background:#F5F5F5; }
.brand-logo-item .inner span {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; padding: 6rem 4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.brand-logo-item .inner span img {max-width: 100%;}

.brand-con02 {padding: 3rem 0 15rem;}
.brand-con02 .sub-tab-list-style ul {width: 100%;}
.brand-con02 .sub-tab-list-style ul li { width: 100%;}
.brand-con02 .move-line-wrap {max-width: var(--area-sub-width);}

.brand-tab-con {padding-top: 5rem;}
.brand-banner {position: relative; padding: 14.5rem 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.brand-banner-inner {position: relative;/* display: flex; flex-direction:column; justify-content: space-between; */}
.brand-banner-inner .tit-box {text-align: center; opacity: 0; transform: translateY(30px); transition: var(--transition-custom2); margin-bottom:15rem ;}
.brand-banner-inner .tit-box svg {max-width: 100%;}
.brand-banner-inner .tit-box svg path,
.brand-banner-inner .tit-box svg rect {fill: #fff !important;}
.brand-banner-inner .tit-box dd {font-size: 2rem; font-weight: 500; letter-spacing: -0.025em; color: #fff; line-height: 1.7; padding-top: 4rem;}

.brand-banner-inner .inner-list {display: flex;}
.brand-banner-inner .inner-list li {width: 33.33%; text-align: center; padding: 0 2rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; transform: translateY(30px); transition: var(--transition-custom2); border-left: 1px solid rgba(255,255,255,0.1);}
.brand-banner-inner .inner-list li:first-child {transition-delay: 0.2s; border-left: 0;}
.brand-banner-inner .inner-list li:nth-child(2) {transition-delay: 0.4s;}
.brand-banner-inner .inner-list li:nth-child(3){transition-delay: 0.6s;}
.brand-banner-inner .inner-list li .icon {display: block; height: 10rem; line-height: 10rem; margin-bottom: 4rem;}
.brand-banner-inner .inner-list li .icon svg {max-height: 100%;}
.brand-banner-inner .inner-list li strong {display: block; font-size: 3.5rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; line-height: 1.2;}
.brand-banner-inner .inner-list li .txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.025em; color: rgba(255,255,255,0.6); line-height: 1.66; padding-top: 2rem;}
.brand-banner-inner.animated .tit-box {opacity: 1; transform: translateY(0); }
.brand-banner-inner.animated .inner-list li {opacity: 1; transform: translateY(0);}

#brandTabCon01 .brand-banner {background: url(/images/content/brand01_bg_img.jpg)no-repeat center/cover; }
#brandTabCon02 .brand-banner {background: url(/images/content/brand02_bg_img.jpg)no-repeat center/cover; }
#brandTabCon03 .brand-banner {background: url(/images/content/brand03_bg_img.jpg)no-repeat center/cover; }
#brandTabCon04 .brand-banner {background: url(/images/content/brand04_bg_img.jpg)no-repeat center/cover; }
#brandTabCon05 .brand-banner {background: url(/images/content/brand05_bg_img.jpg)no-repeat center/cover; }
#brandTabCon06 .brand-banner {background: url(/images/content/brand06_bg_img.jpg)no-repeat center/cover; }
#brandTabCon07 .brand-banner {background: url(/images/content/brand07_bg_img.jpg)no-repeat center/cover; }
#brandTabCon08 .brand-banner {background: url(/images/content/brand08_bg_img.jpg)no-repeat center/cover; }

.brand-ci-con {display: flex; padding-top: 20rem;}
.brand-ci-con .tit {width: 24.24%; font-size: 3.5rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.4;}
.brand-ci-con .right-con {width: 75.76%;}
.brand-ci-style .ci-logo-box {height: 35rem; display: flex; align-items: center; justify-content: center; padding: 2rem 5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 8rem;}
.brand-ci-style .ci-logo-box svg {max-width: 100%;}
.brand-ci-style .ci-info { border-top: 1px solid rgba(0,0,0,0.1);}
.brand-ci-style dl {display: flex; padding: 3rem 0; border-bottom: 1px solid rgba(0,0,0,0.1);}
.brand-ci-style dl:first-child {align-items: center;}
.brand-ci-style dl dt {width: 15rem; padding-right: 2rem; font-size: 2.5rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.4; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.brand-ci-style dl dd {width: calc(100% - 15rem);}
.brand-ci-style dl dd .color-list {display: flex;}
.brand-ci-style dl dd .color-list li {width: 33.33%; display: flex; align-items: center;}
.brand-ci-style dl dd .color-list li span {display: inline-block; width: 5rem; height: 5rem; border-radius: 5rem; }
.brand-ci-style dl dd .color-list li .txt {display: inline-block; width: calc(100% - 5rem); padding-left: 2rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.brand-ci-style dl dd .txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.025em; color: #666; line-height: 1.77;}
.brand-ci-style dl dd .txt.hypen {position: relative; padding-left: 1.5rem;}
.brand-ci-style dl dd .txt.hypen:before {position: absolute; content: ''; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; background: #AAAAAA; left: 0; top: 1.3rem;}

#brandTabCon01 .brand-ci-style dl dd .color-list li:first-child span {background: #F6AB00;}
#brandTabCon01 .brand-ci-style dl dd .color-list li:nth-child(2) span {background: #0070BA;}
#brandTabCon01 .brand-ci-style dl dd .color-list li:nth-child(3) span {background: #45B035;}
#brandTabCon02 .brand-ci-style dl dd .color-list li:first-child span {background: #E76011;}
#brandTabCon02 .brand-ci-style dl dd .color-list li:nth-child(2) span {background: #ABAB8B;}
#brandTabCon03 .brand-ci-style dl dd .color-list li:first-child span {background: #9FA0A0;}
#brandTabCon03 .brand-ci-style dl dd .color-list li:nth-child(2) span {background: #A40001;}
#brandTabCon04 .brand-ci-style dl dd .color-list li:first-child span {background: #727171;}
#brandTabCon05 .brand-ci-style dl dd .color-list li:first-child span {background: #92C422;}
#brandTabCon06 .brand-ci-style dl dd .color-list li:first-child span {background: #006DB8;}
#brandTabCon07 .brand-ci-style dl dd .color-list li:first-child span {background: #939598;}
#brandTabCon07 .brand-ci-style dl dd .color-list li:nth-child(2) span {background: #006DB8;}
#brandTabCon08 .brand-ci-style dl dd .color-list li:first-child span {background: #393739;}
#brandTabCon08 .brand-ci-style dl dd .color-list li:nth-child(2) span {background: #A40001;}
#brandTabCon08 .brand-ci-style dl dd .color-list li:nth-child(3) span {background: #0e2864;}

/* ***** History ***** */
.history-page {padding-bottom: 30rem;}
.history-con-wrapper {margin-top: 8rem;}
.history-con .sub-tab-list-style ul {width: 100%;}
.history-con .sub-tab-list-style ul li {width: 100%; }
.history-con .sub-tab-list-style ul li a {height: 50px;}
.history-con .move-line-wrap {max-width: var(--area-sub-width);}

/* ***** Corporate Values ***** */
.value-top-con {padding-bottom: 11rem;}
.value-top-con .cm-sub-tit {margin-bottom: 4rem;}
.value-banner-con {height: 56rem; background-image: url(/images/content/corporate_values_img.jpg);background-repeat: no-repeat; background-position: right 0 top 50%; background-size: cover; background-attachment: fixed;}
.value-con {padding: 14rem 0 12rem;}
.value-list {position: relative; border-top: 2px solid #000;}
.value-list li {padding: 4rem 0; display: flex; align-items: center; border-bottom: 1px solid #ddd;}
.value-list li .icon-box {display: flex; align-items: center; justify-content: center; width: 15rem; height: 15rem; background: #0070BA; border-radius: 50%; box-shadow: 5px 9px 20px #0000004D; padding: 2.5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.value-list li .icon-box img {max-width: 100%;}
.value-list li .txt-box {display: flex; align-items: center; width: calc(100% - 15rem); padding-left: 4.9rem;letter-spacing: -0.025em;  box-sizing: border-box;} 
.value-list li .txt-box strong {display: inline-block; font-size: 2.5rem;color: #000; line-height: 1.44; width: 25rem;}
.value-list li .txt-box .txt {font-size: 1.8rem; font-weight: 500; color: #666666; line-height: 1.77; width: calc(100% - 25rem); padding-left: 2rem; box-sizing: border-box;}
.value-list li .txt-box .txt span {position: relative; display: block; padding-left: 1.5rem;}
.value-list li .txt-box .txt span:before {position: absolute; content: '';  top: 1.2rem;left: 0; width: 0.5rem; height: 0.5rem;border-radius: 0.5rem;  background: #AAAAAA;}
.value-arrow {text-align: center; padding: 6rem 0;}
.value-bottom-box {border: 2px solid #0070BA; border-radius: 1rem; box-shadow: 5px 9px 30px #0000001A; padding: 5rem 3rem; text-align: center;}
.value-bottom-box .txt01 {font-size: 2.5rem; font-weight: 600; letter-spacing: -0.025em; color: #000; line-height: 1.56;}
.value-bottom-box .txt02 {font-size: 2rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.7; padding-top: 2rem;}

.value-list-m-con {display: none;}
.value-list-m {}
.value-list-m li {height: 100% !important; background: #F5F5F5; padding: 4rem 2rem; box-sizing: border-box; text-align: center;}
.value-list-m li .icon-box {display: flex; align-items: center; justify-content: center; width: 15rem; height: 15rem; background: #0070BA; border-radius: 50%; box-shadow: 5px 9px 20px #0000004D; margin: 0 auto 4rem; padding: 2.5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.value-list-m li .icon-box img {max-width: 100%;}
.value-list-m li .txt-box .tit {font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.7;}
.value-list-m li .txt-box .txt {font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; color: #666666; line-height: 1.8; padding-top: 1.5rem;}
.value-swiper-pagination {bottom: 0 !important; top: auto !important;}
.value-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #000;}

/* ***** Presence ***** */
.presence-page {padding-bottom: 18rem;}
.presence-tab-con {margin-top: 6.5rem; border-top: 2px solid #000;}
.presence-list-item {border-bottom: 1px solid #ddd; cursor: pointer;}
.presence-location-top {display: flex; align-items: center; padding: 4rem 0;}
.presence-location-top .img-box {width: 48rem;}
.presence-location-top .img-box span {display: block; position: relative; width: 100%; height: 0; padding-top:69.38%}
.presence-location-top .img-box span img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.presence-location-top .info-box {width: calc(100% - 48rem); padding-left: 7rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.presence-location-top .info-box .tit {display: block; font-size: 3.5rem; letter-spacing: -0.025em; color: #000; line-height: 1.2; margin-bottom:3rem;}
.presence-location-top .info-box dl {display: flex; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.77; margin-bottom: 1rem;}
.presence-location-top .info-box dl:last-of-type {margin-bottom: 0;}
.presence-location-top .info-box dl dt {width: 9.5rem;}
.presence-location-top .info-box dl dd {width: calc(100% - 9.5rem);}
.presence-location-top .info-box dl dd span {margin-top: 0.1rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem 0 1.5rem; width: 10.6rem; height: 3rem; background: var(--main-color); border-radius: 1.5rem; font-size: 1.4rem; font-size: 600; letter-spacing: -0.03em; color: #fff;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.presence-location-top .info-box dl dd span i {font-size:1.6rem;}
.presence-location-bottom{display: none;padding: 2rem 0 6rem;}
.presence-location-bottom .location-map-con{position: relative; width: 100%; height: 44rem;}
.presence-location-bottom .location-map-con iframe{position: absolute; top: 0; left: 0; width:100%; height:100%;}

/* ***** Code of Ethics ***** */
.ethics-con01 {padding: 12rem 0; background:#F5F5F5;}
.ethics-list li {position: relative; margin-bottom: 3rem; display: flex; flex-wrap: wrap; align-items: center; background: #fff; border: 2px solid #0D75AF; min-height: 18rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.ethics-list li:last-child {margin-bottom: 0;}
.ethics-list li .icon {position: absolute; top: 0; left: 0; width: 17.8rem; height: 100%; display: flex; align-items: center; background: #0D75AF; justify-content: center; padding: 3rem;  box-sizing: border-box;}
.ethics-list li .icon img {max-width: 100%; max-height: 100%;}
.ethics-list li .txt {height: 100%; width: 100%; padding: 0 5rem 0 23.8rem; box-sizing: border-box; font-size: 2rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.7;}
.ethics-con02 {padding: 12rem 0 0;}
.ethics-item-con + .ethics-item-con {padding-top: 10rem;}
.ethics-item-con .ethics-item-tit {display: flex; font-size: 3rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.3; margin-bottom: 2.5rem;}
.ethics-item-con .ethics-item-tit span {display: inline-block; padding-right: 0.5rem;}
.ethics-item-con .ethics-box {background: #F5F5F5; padding:5rem 4rem 6rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.ethics-item-con .ethics-box dl {margin-bottom: 4rem;}
.ethics-item-con .ethics-box dl:last-of-type {margin-bottom: 0;}
.ethics-item-con .ethics-box dl dt {display: flex; font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.4; margin-bottom: 1.8rem;}
.ethics-item-con .ethics-box dl dt span {display: inline-block; padding-right: 0.3rem;}
.ethics-item-con .ethics-box dl dd .txt {position: relative; padding-left: 1.5rem; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.77;}
.ethics-item-con .ethics-box dl dd .txt:before {position: absolute; content: ''; top: 1.3rem; left: 0; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; background: #AAAAAA; }

.ethics-item-con .ethics-mail-box {background: #F5F5F5; padding: 1rem 4rem; box-sizing: border-box;}
.ethics-item-con .ethics-mail-box dl {display: flex; padding: 3.1rem 0; border-bottom: 1px solid rgba(0,0,0,0.05);}
.ethics-item-con .ethics-mail-box dl:last-child {border-bottom: 0;}
.ethics-item-con .ethics-mail-box dl dt {width: 17.8rem; font-size: 2rem; font-weight: 700; color: #000; letter-spacing: -0.02em; line-height: 1.6;}
.ethics-item-con .ethics-mail-box dl dd {position: relative; width: calc(100% - 17.8rem); padding-right: 13rem; box-sizing: border-box; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: #666666; line-height: 1.77;}
.ethics-item-con .ethics-mail-box dl dd a {position: absolute; top: -0.4rem; right: 0; display: block; width: 12rem; height: 4rem; line-height: 4rem; text-align: center; border-radius: 2rem; background: #1077b0; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }

/* ***** R&D Center ***** */
.rnd-top-banner {height: 56rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--area-padding); background-image: url(/images/content/rnd_banner_bg.jpg);background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed;}
.rnd-top-banner .txt {font-size: 3.0rem; letter-spacing: 0.25em; color: #fff; line-height: 1.77; font-weight: 600;}
.rnd-top-banner .txt2 {font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; color: #fff; line-height: 1.7; padding-top: 2.5rem;}
.rnd-con01 {padding: 15rem 0;}
.rnd-list {border-top: 2px solid #000;}
.rnd-list li {padding:5rem 0; display: flex; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.1);}
.rnd-list li .icon-box { display: flex; align-items: center;  justify-content: center; width: 15rem;height: 15rem; background: #0070BA; border-radius: 50%;box-shadow: 5px 9px 20px #0000004D; padding: 2.5rem;-webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;}
.rnd-list li .icon-box img {max-width: 100%; max-height: 100%;}
.rnd-list li .txt-box {padding-left: 5.8rem; width: calc(100% - 15rem); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.rnd-list li .txt-box .tit {display: block; font-size: 3rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.3; margin-bottom: 1rem;}
.rnd-list li .txt-box .txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.77;}
.rnd-list li .txt-box .txt span {position: relative; display: block; padding-left: 1.5rem;}
.rnd-list li .txt-box .txt span:before {position: absolute; content: '';  top: 1.2rem;left: 0; width: 0.5rem; height: 0.5rem;border-radius: 0.5rem;  background: #AAAAAA;}

.rnd-list-m-con {display: none;}
.rnd-list-m {}
.rnd-list-m li {height: 100% !important; background: #F5F5F5; padding: 4rem 2rem; box-sizing: border-box; text-align: center;}
.rnd-list-m li .icon-box {display: flex; align-items: center; justify-content: center; width: 15rem; height: 15rem; background: #0070BA; border-radius: 50%; box-shadow: 5px 9px 20px #0000004D; margin: 0 auto 4rem; padding: 2.5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.rnd-list-m li .icon-box img {max-width: 100%;}
.rnd-list-m li .txt-box .tit {font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.7;}
.rnd-list-m li .txt-box .txt {font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; color: #666666; line-height: 1.8; padding-top: 1.5rem;}
.rnd-swiper-pagination {bottom: 0 !important; top: auto !important;}
.rnd-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #000;}

.rnd-con02 {padding: 14rem 0 15rem; background: #f5f5f5;}
.rnd-con02 .tit-box { display: flex; align-items: start; justify-content: space-between;padding-bottom: 3rem;}
.rnd-con02 .tit-box .txt-box {width: calc(100% - 8rem);}
.rnd-con02 .tit-box .txt-box dl {margin-top: 4rem;}
.rnd-con02 .tit-box .txt-box .txt01 {font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; color: #000; line-height: 1.7; margin-bottom: 2rem;}
.rnd-con02 .tit-box .txt-box .txt02 {position: relative; padding-left: 1.5rem; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: #666666; line-height: 1.77;}
.rnd-con02 .tit-box .txt-box .txt02:before {position: absolute; content: ''; left: 0; top: 1.4rem; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; background: #aaaaaa;}
.rnd-con02 .tit-box .tit {font-size: 5rem;font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.2;}

.rnd-research-list-con.swiper-container {overflow: visible;}
.rnd-research-list-con:before {position: absolute; content: ''; top: 0; right:calc(-1*((110vw - var(--area-sub-width))/2)); width: calc((110vw - var(--area-sub-width))/2); height: 100%; background: #f5f5f5; z-index: 2;}
.rnd-research-list-con:after {position: absolute; content: ''; top: 0; left:calc(-1*((110vw - var(--area-sub-width))/2)); width: calc((110vw - var(--area-sub-width))/2); height: 100%;background: #f5f5f5; z-index: 2;}
.rnd-research-list li a {display: block;}
.rnd-research-list li span {position: relative; display: block; width: 100%; height: 0;padding-top: 62.5%;}
.rnd-research-list li span img { position: absolute; top: 0; left: 0;width: 100%; height: 100%; }
.rnd-research-swiper-pagination {display: none;}
.rnd-research-arrows {position: absolute; top: 0; right: 0; margin-top: -6.5rem;}
.rnd-research-arrows button {font-size: 2.4rem; color: #000; display: inline-flex; align-items: center;}
.rnd-research-arrows button.rnd-research-prev-btn {margin-right: 2.5rem;}


/* ****************** Products  ********************** */
/* ***** 제품 목록 페이지 ***** */
.product-list-top-con {position: relative; background:#F5F5F5;}
.product-list-top-con .tit-con {position: relative; padding: 14rem 0; text-align: center;}
.product-list-top-con .tit-con .tit {font-size: 5rem; font-weight: 800; letter-spacing: -0.025em; color: #000; line-height: 1.2;}
.product-list-top-con .tit-con .txt {font-size: 2rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.7; padding-top: 4rem;}
.product-list-top-con .tit-con .icon {position: absolute; bottom: -9rem; left: 50%; margin-left: -9rem; padding: 1.6rem; width: 18rem; height: 18rem; border-radius: 50%; border: 4px solid #F5F5F5; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; background: #fff; z-index: 1;}
.product-list-top-con .tit-con .icon svg {max-width: 100%; max-height: 100%;}
.product-list-top-con .tit-con .icon img {max-width: 100%; max-height: 100%; mix-blend-mode: difference;}
.product-list-top-con .tit-con .icon svg path {fill: #000 !important;}
.product-list-con {padding: 15rem 0 24rem;}
.product-list {border-top: 1px solid #000;}
.product-list li {border-bottom: 1px solid #E5E5E5;}
.product-list li:last-child {border-bottom: 1px solid #000;}
.product-list li a {display: flex; align-items: center; width: 100%; padding: 4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.product-list li a .img-box {position: relative; width: 48rem;}
.product-list li a .img-box .img {position: relative; display: block; width: 100%; height: 0; padding-top: 60.417%;}
.product-list li a .img-box .img img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.product-list li a .img-box .over {position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; top: 0; left: 0;  background: rgba(0, 122, 194, 0.6); opacity: 0; transition: all 0.4s;}
.product-list li a .img-box .over i {font-size: 4.8rem; color: #fff; transition: transform 0.4s;}
.product-list li a .txt-box {width: calc(100% - 48rem); padding-left: 8rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.product-list li a .txt-box .tit {position: relative; display: inline-block; font-size: 5rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.2; transition: all 0.4s;}
.product-list li a .txt-box .tit:before {position: absolute; content: ''; width: 0; height: 5px; left: 0; bottom: -5px; background:#007AC2; transition: all 0.4s;}
.product-list li a .txt-box .txt {font-size: 1.6rem; font-weight: 400; line-height: 1.75; color: #666666; margin-top: 3rem;}

.product-list li a:hover .over {opacity: 1;}
.product-list li a:hover .over i {transform:rotate(180deg);} 
.product-list li a:hover .txt-box .tit {color: #007AC2;}
.product-list li a:hover .txt-box .tit:before {width: 100%;}

/* ***** 제품 상세 페이지 ***** */
/* 제품 왼쪽 탭 스타일 */
.product-view-wrap {position: relative;}
.prd-tab-wrapper-style {position: absolute; top: 12rem; left: 5rem; width: 12rem; height: 100%; z-index: 1;}
.prd-drop-open-btn-style {display: none;}
.prd-tab-list-style {position: relative; }
.prd-tab-list-style ul {width: 12rem;}
.prd-tab-list-style li {margin-bottom: 1rem;}
.prd-tab-list-style li:last-child {bottom: 0;}
.prd-tab-list-style li a,
.prd-tab-list-style li button {width: 12rem; height: 4rem; line-height: 1.3; font-weight: 700; color: #000; text-align:center; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; border-radius: 4rem; transition:all 0.4s; transition-property: width, background-color, color;}
.prd-tab-list-style li a em {font-size:1.2rem; font-weight: inherit; color:inherit; transition:all 0.4s; transition-property: font-size; font-weight: 700;}
.prd-tab-list-style li a em span,
.prd-tab-list-style li button span{font-size: 0;}
.prd-tab-list-style.white-ver li a,
.prd-tab-list-style.white-ver li button {background-color: #fff;}
/* Tab Fixed Move */
.prd-tab-list-style.top-fixed{position:fixed; top:8rem; height: 24rem; z-index: 99;}
/* Tab Start-Fixed */
.prd-tab-list-style.top-fixed{}
.prd-tab-list-style.top-fixed li a,
.prd-tab-list-style.top-fixed li button {width: 4rem; background-color: rgba(0, 0, 0, 0.05); backdrop-filter: blur(1.5rem);}
.prd-tab-list-style.top-fixed li a em,
.prd-tab-list-style.top-fixed li button {font-size: 0;}
.prd-tab-list-style.top-fixed li a em span,
.prd-tab-list-style.top-fixed li button span {font-size:1.2rem;}
.prd-tab-list-style li.selected a {background-color: #007AC2; color: #fff;}
.prd-tab-list-style li:hover button {background-color: #007AC2; color: #fff;}

/* .prd-tab-list-style.bottom-fixed {position: absolute;  bottom: 24rem;} */

@media all and (min-width:801px){
	.prd-tab-list-style.top-fixed li a:hover,
	.prd-tab-list-style.top-fixed li button:hover {width: 12rem;}
	.prd-tab-list-style.top-fixed li a:hover em{font-size:1.2rem;}
	.prd-tab-list-style.top-fixed li button:hover {font-size:1.2rem;}
	.prd-tab-list-style.top-fixed li a:hover em span, 
	.prd-tab-list-style.top-fixed li button:hover span {font-size: 0;}
}

.prd-tab-con {padding: 12rem 0;}
.prd-tab-con.grav-ver {background: #f5f5f5;}
.prd-view-tit-box { padding-bottom: 3rem; border-bottom: 1px solid #000;}
.prd-view-tit-box .tit {font-size: 5rem; font-weight: 800; letter-spacing: -0.025em; color: #000; line-height: 1.2;}
.prd-view-tit-box.prd-view-spec-tit {border-bottom: 0;} 
.prd-view-features-con {padding-top: 4rem;}
.prd-view-features-con .option-txt {position: relative; padding-left: 3rem; font-size: 2rem; font-weight: 400; line-height: 1.6; color: #666666; margin-bottom: 0.7rem;}
.prd-view-features-con .option-txt:before {position: absolute; content: '\e92b'; font-family: 'xeicon'; top: 0; left: 0; font-size: 2rem; color: #666; }
.prd-view-features-con .option-txt:last-of-type {margin-bottom: 0;}
.prd-view-options-con {padding-top: 6rem; }
.prd-view-options-list { display: flex; /* flex-wrap: wrap; */ margin: -3rem 0;}
.prd-view-options-list li {width: calc(100% - 2rem); margin: 3rem 0; padding: 0 1rem; text-align: center;}
.prd-view-options-list li .icon {width: 8rem; height: 8rem; margin: 0 auto;}
.prd-view-options-list li .icon svg {max-width: 100%; max-height: 100%;}
.prd-view-options-list li .tit {display: block; margin-top: 2rem; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.025em; color: #1E3161; line-height: 1.3;}
.prd-spec-table {display: table; width: 100%;  table-layout: fixed; font-size: 1.5rem; border-top: 1px solid #000;}
.prd-spec-col-group {display: table-column-group;}
.prd-spec-col-group .prd-spec-col-group-item {display: table-column;}
.prd-spec-list-head { display: table-header-group;}
.prd-spec-list-head .prd-spec-head-item {display: table-cell;vertical-align: middle; width: 100%; height: 6rem;text-align: center; background: #f5f5f5; color: #000000;font-weight: 400;font-size: 1.5rem; border-bottom: 1px solid #ddd;} 
.prd-spec-list-head .prd-spec-head-item:first-of-type {font-weight: 700;}
.prd-spec-list-tbody { display: table-row-group;}
.prd-spec-list-row {position: relative; display: table-row;}
.prd-spec-list-row:after {position: absolute; top: -1px; left: 0; content: ''; width: 100%; height: calc(100% + 1px); border:1px solid #007AC2; border-left: 0; border-right: 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; z-index: 1; opacity: 0; transition: all 0.3s;}
.prd-spec-list-row .column {display: table-cell; vertical-align: middle; height: 6rem;color: #000000;font-size: 1.5rem; text-align: center; border-bottom: 1px solid #ddd;}
.prd-spec-list-row:last-of-type .column{border-bottom: 1px solid #000;}
.prd-spec-list-row .spec-title a {position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #000000; font-size: 1.8rem;}
.prd-spec-list-row .spec-title a strong {display: inline-block; position: relative; /* border-bottom: 2px solid #fff; */ transition: all 0.3s;}
.prd-spec-list-row .spec-title a i {font-size: 2.4rem; color: #000; transition: all 0.3s;}
.prd-spec-list-row:hover .spec-title a strong {color: #007AC2; /*  border-bottom: 2px solid #007AC2; */}
.prd-spec-list-row:hover .spec-title a i {color: #007AC2;}
.prd-spec-list-row:hover:after {opacity: 1;}

.prd-applications-con {border-bottom: 1px solid #000;}
.prd-applications-con.swiper-container {overflow: visible;}
.prd-applications-con:before {position: absolute; content: ''; top: 0; right:calc(-1*((110vw - var(--area-sub-width))/2)); width: calc((110vw - var(--area-sub-width))/2); height: 100%; background: #f5f5f5; z-index: 2;}
.prd-applications-con:after {position: absolute; content: ''; top: 0; left:calc(-1*((110vw - var(--area-sub-width))/2)); width: calc((110vw - var(--area-sub-width))/2); height: 100%;background: #f5f5f5; z-index: 2;}
.prd-applications-list {padding: 6rem 0;}
.prd-applications-con li a {display: block;}
.prd-applications-con li span {position: relative; display: block; width: 100%; height: 0; padding-top: 62.5%;}
.prd-applications-con li span img {position: absolute; top: 0; left:0; width: 100%; height: 100%;}
.prd-applications-swiper-pagination {display: none;}
.prd-applications-arrows {position: absolute; top: 0; right: 0; margin-top: -6.5rem;}
.prd-applications-arrows button {font-size: 2.4rem; color: #000; display: inline-flex; align-items: center;}
.prd-applications-arrows button.prd-applications-prev-btn {margin-right: 2.5rem;}

.prd-applications-con + .prd-keyword-con {margin-top: 6rem;}
.prd-keyword-con {display: flex; align-items: center; justify-content: space-between; }
.prd-keyword-con dt {font-size: 3rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.33; width: 15rem;}
.prd-keyword-con dd {width: calc(100% - 15rem); text-align: right; margin: -0.8rem 0;}
.prd-keyword-con dd span {display: inline-block; height: 5rem; line-height: 4.8rem; padding: 0 2.4rem; border: 1px solid #CCCCCC; border-radius: 2.5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; font-size: 1.7rem; font-weight: 500; letter-spacing: -0.025em; color: #000; margin: 0.8rem 0;}
.prd-keyword-con dd span + span {margin-left: 2rem;}


/* ****************** Investor Relations ********************** */
.ir-page {padding-bottom: 10rem;}
/* ***** Financial information ***** */
.ir-con .sub-tab-list-style {position: relative; display: inline-block;}
.ir-con .sub-tab-list-style.top-fixed {position: fixed; top: 0; left: 50%;width: auto; transform: translateX(-50%);}

/* ***** Stock Report ***** */


/* ****************** PR Center ********************** */
/* ***** Wonpoong News ***** */
.news-page {padding-bottom: 18rem;}
.news-top-con {margin-bottom: 8rem;}
.news-top-con .tit {font-size: 5rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.4; margin-bottom: 2rem;}
.news-headline-list{position:relative; /* height: 56rem;  */ min-height: 56rem;display: flex; flex-direction: column; align-items:end; }
.news-headline-item{width:34.09%;}
.news-headline-item:nth-child(2){     margin-bottom: 1.516%;}
.news-headline-item a {display: block; width: 100%; position: relative; overflow: hidden;  transition: all 0.3s ease-in-out;}
.news-headline-item a .news-thumb-con {position:relative; overflow:hidden; padding-top:60%; height:0; background-color:#000; }
.news-headline-item a .news-thumb-con:after{position:absolute; top:0px; left:0; width:100%; height:100%; content:""; z-index:1;background: rgba(0,0,0,0.3);}
.news-headline-item a .news-thumb-con img {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; -webkit-transition: all .5s ease;
    transition: all .5s ease;}
.news-headline-item a .news-info-con {display: flex; flex-direction: column; justify-content: space-between; position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 3.5rem 4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; z-index: 2;}
.news-headline-item a .news-info-top {display: flex; align-items: center;  justify-content: space-between; }
.news-headline-item a .news-info-top .news-category {display: inline-block; height: 3rem; line-height: 3rem; min-width: 7.5rem; padding: 0 2rem; text-align: center; border-radius: 2rem; background: var(--main-color); font-size: 1.4rem; font-weight: 600; color: #fff; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.news-headline-item a .news-info-top .news-date {font-size: 1.4rem; font-weight: 400; letter-spacing: -0.025em; color: #fff;} 
.news-headline-item a .news-tit {font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1.53; }
.news-headline-item a .list-more-plus-icon{position:absolute; right:2.5rem; bottom:0px; padding-top:2rem; z-index: 1; transform:translateY(100%); transition:all 0.5s;}
.news-headline-item a .list-more-plus-icon:before{display:block; width:5px; height:0px; background-color:#fff; content:""; transition:height 0.35s 0.1s}
.news-headline-item a .list-more-plus-icon i{position:absolute; top:0px; left:50%; font-size:1.4rem; margin-left:-0.7rem; transition:all 0.5s; color:#fff;}
.large-headline-item{position:absolute; top:0px; left:0px; height:100%; width:64.39%; }
.large-headline-item a .news-thumb-con { padding-top: 65.88%;}
.large-headline-item a .news-tit {font-size: 4rem; line-height: 1.4;}

.news-headline-item a:hover .news-thumb-con img {transform: translateY(-50%) scale(1.05);}

/* .news-headline-item a:hover{transform:translate(0, -5px); box-shadow:0.7rem 0.7rem 1.4rem rgb(0, 0, 0, 0.2);} 
.news-headline-item a:hover .news-thumb-con img{transform:  translateY(-50%) scale(1.05);-webkit-filter: blur(2px); filter: blur(2px);}
.news-headline-item a:hover .news-thumb-con:before{opacity:1.0; visibility:visible;}
.news-headline-item a:hover .list-more-plus-icon{transform:translateY(0)}
.news-headline-item a:hover .list-more-plus-icon:before{height:40px;}
.news-headline-item a:hover .list-more-plus-icon i{transform:rotate(180deg)}
 */
 
 .news-headline-m-con {display: none;}

/* ***** Catalog ***** */
.catalog-top-con {display: flex; padding-bottom: 10rem;}
.catalog-top-con .info-box {width: calc(100% - 30rem); padding-right: 6rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} 
.catalog-top-con .info-box .tit {font-size: 5rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.4; padding-bottom: 4rem;}
.catalog-top-con .info-box .info-bottom {padding-top: 5rem; border-top: 1px solid #000;}
.catalog-top-con .info-box .info-bottom dl dt {font-size: 3rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.2;}
.catalog-top-con .info-box .info-bottom dl dd {font-size: 2rem; font-weight: 400; letter-spacing: -0.025em; color: #666666; line-height: 1.3; padding-top: 0.5rem;}
.catalog-top-con .info-box .btn-box {display: flex; margin-top: 3rem;}
.catalog-top-con .info-box .btn-box .sub-cm-btn + .sub-cm-btn {margin-left: 1rem;}
.catalog-top-con .img-box {width: 30rem; }
.catalog-top-con .img-box span {display: block; width: 100%; position: relative; height: 0; padding-top: 141.34%; -webkit-box-shadow: 4rem 4rem 6rem #00000029;-moz-box-shadow:4rem 4rem 6rem #00000029; box-shadow: 4rem 4rem 6rem #00000029;}
.catalog-top-con .img-box span img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

.catalog-con {padding: 12rem 0 16rem; background: #F5F5F5;}
.catalog-con .bbs-no-list {border-top: 0;}
.catalog-list {display: flex; flex-wrap: wrap; margin: -4rem -6rem; padding: 6rem 0;}
.catalog-list li {width: calc(25% - 12rem); margin: 4rem 6rem;}
.catalog-list li .catalog-img-con {position: relative;}
.catalog-list li .catalog-img-con .img-box {display: block; position: relative; width: 100%;}
.catalog-list li .catalog-img-con .img-box span { position: relative; width: 100%;height: 0; padding-top: 141.67%;  display: block;}
.catalog-list li .catalog-img-con .img-box span img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.catalog-list li .catalog-img-con .over-box {position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 122, 194, 0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s;  -o-transition: all 0.3s; transition: all 0.3s;}
.catalog-list li .catalog-img-con .over-box .sub-cm-btn {margin: 0.5rem 0; transition: all 0.5s;}
.catalog-list li .tit {display: block; margin-top: 2rem; font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.catalog-list li:hover .catalog-img-con .over-box {opacity: 1;}
@media all and (min-width:801px){
	.catalog-list li .catalog-img-con .over-box .sub-cm-btn:not(.fill-btn):hover em, 
	.catalog-list li .catalog-img-con .over-box .sub-cm-btn:not(.fill-btn):hover i {color: var(--sub-color);}
	.catalog-list li .catalog-img-con .over-box .sub-cm-btn.hover + .sub-cm-btn {background: transparent;}
	.catalog-list li .catalog-img-con .over-box .sub-cm-btn.hover + .sub-cm-btn .cm-fill {width: 0; height: 0;}
	.catalog-list li .catalog-img-con .over-box .sub-cm-btn.hover + .sub-cm-btn em ,
	.catalog-list li .catalog-img-con .over-box .sub-cm-btn.hover + .sub-cm-btn i{color: #fff;}
	.catalog-list li .catalog-img-con .over-box .sub-cm-btn.fill-btn.hover {background: transparent;}
}

/* pdf 모달팝업 */
.catalog-modal-content {max-width: 1420px;}
.catalog-modal-content  .modal-close-btn {right: -4.2rem; top: 0;}
.catalog-inner-box {padding:30px; background-color:#fff; overflow: hidden;}
.catalog-inner {width: 100%;position: relative;height: 0; padding-top: 55%;}
.catalog-inner iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

/* .catalog-inner::-webkit-scrollbar{width: 5px;}
.catalog-inner::-webkit-scrollbar-thumb{background-color:#333;border-radius:5px;transition:all 0.5s;}
.catalog-inner::-webkit-scrollbar-track{background-color:#eee; border-radius:5px;}  */
/* .catalog-tit-con { padding-bottom: 5rem;}
.catalog-tit-con .name {} */
#pdf-container{max-width:1200px; margin:auto; display: block;}
#pdf-container canvas{width:100%;}

/* ***** Recruitment ***** */
.recruitment-page {padding-bottom: 20rem;}
/* 채용공고 */
.recruitment-top-con {margin-top: 10rem; text-align: center; }
.recruitment-top-con .tit {font-size: 5rem; font-weight: 800; letter-spacing: -0.025em; color: #000; line-height: 1.4;}
.recruitment-top-con .tit span {}
.recruitment-top-con .txt {font-size: 2rem; font-weight: 400; letter-spacing: -0.025em; color: #000; line-height: 1.7; padding-top:2rem;}
.recruitment-step {display: flex; gap:4rem; padding-top: 7.5rem;}
.recruitment-step li {position: relative; width: calc(25% - 3rem); /* opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); transition:var(--transition-custom2); */}
/* .recruitment-step.animated li {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} 
.recruitment-step.animated li:nth-child(2) {transition-delay: 0.3s;}
.recruitment-step.animated li:nth-child(3) {transition-delay: 0.55s;}
.recruitment-step.animated li:nth-child(4) {transition-delay: 0.8s;} */
/* .recruitment-step li:before {position: absolute; content: ''; top: 50%; left: -3.3rem; margin-top: -0.5rem; width: 1rem; height: 1rem; border-radius: 50%; background: #EEEEEE;}
.recruitment-step li:after {position: absolute; content: ''; top: 50%; margin-top: -0.5rem; left: -1.7rem; width: 1rem; height: 1rem; border-radius: 50%; background: #D5D5D5;}
.recruitment-step li:first-child:before,
.recruitment-step li:first-child:after {display: none;} */
.recruitment-step li .inner-wrap {position: relative; width: 100%; height: 0; padding-top: 100%;}
.recruitment-step li .inner-wrap:before {position: absolute; content: ''; top: 50%; left: -3.3rem; margin-top: -0.5rem; width: 1rem; height: 1rem; border-radius: 50%; background: #EEEEEE;}
.recruitment-step li .inner-wrap:after {position: absolute; content: ''; top: 50%; margin-top: -0.5rem; left: -1.7rem; width: 1rem; height: 1rem; border-radius: 50%; background: #D5D5D5;}
.recruitment-step li:first-child .inner-wrap:before,
.recruitment-step li:first-child .inner-wrap:after {display: none;}
.recruitment-step li .inner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; padding: 0 3rem;}
.recruitment-step li .inner:before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; border-radius: 50%; border: 1rem solid #007AC2; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.recruitment-step li:first-child .inner:before {opacity: 0.08;}
.recruitment-step li:nth-child(2) .inner:before {opacity: 0.18;}
.recruitment-step li:nth-child(3) .inner:before {opacity: 0.32;}
.recruitment-step li .inner span {display: block; width: 6.3rem; height: 6.3rem; margin: 0 auto 3.5rem;}
.recruitment-step li .inner span svg {max-width: 100%;}
.recruitment-step li .inner dt {font-size: 1.4rem; font-weight: 700; letter-spacing: -0.033em; color: rgba(0,0,0,0.5); line-height: 1.1;}
.recruitment-step li .inner dd {font-size: 3rem; font-weight: 700; letter-spacing: -0.033em; color: #000000; line-height: 1.1; padding-top: 1rem;}
.recruitment-step li .step-txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: #666666; line-height: 1.77; padding-top: 3rem;}
.recruitment-welcome-txt {position: relative; padding: 5.5rem 6rem; background: #f5f5f5; border-radius: 7.5rem; text-align: center; margin-top: 9.5rem;}
.recruitment-welcome-txt .inner-txt {font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.59;}
.recruitment-welcome-txt span {position: absolute; display: flex; left: 6rem; top: 50%; margin-top: -0.75rem; }
.recruitment-welcome-txt span.right-dot {left: auto; right: 6rem;}
.recruitment-welcome-txt span em {display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 1.5rem; background: #fff;}
.recruitment-welcome-txt span em + em {margin-left: 1rem;}
.recruitment-welcome-txt span em.dot01 {opacity: 0.5;}

.recruitment-notice-con {padding-top: 12rem;}
.recruitment-select-con {width: 15rem; position: relative; }
.recruitment-list {padding: 4rem 0; display: flex; flex-wrap:wrap; margin: -1rem;}
.recruitment-list li {width: calc(50% - 2rem); margin: 1rem; transition:all 0.3s ease;}
.recruitment-list li a {position: relative; display:inline-block; width: 100%; height: 100%; box-sizing:border-box; overflow:hidden; padding: 4.3rem 9rem 4rem 4rem; border-radius:2rem;}
.recruitment-list li a:before {display: block; content:""; position:absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-color:#f5f5f5;} 
.recruitment-list li a .list-state {display: block; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.03em; color: #007AC2; line-height: 1.3; margin-bottom: 1rem; transition: var(--transition-custom);transition-delay: 0.2s;}
.recruitment-list li a .list-tit {font-size: 2.4rem; font-weight: 800; letter-spacing: -0.025em; color: #000; line-height: 1.4; margin-bottom: 3.5rem; transition: var(--transition-custom); transition-delay: 0.2s;}
.recruitment-list li a .list-date {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.03em; line-height: 1.625; color: #000; opacity: 0.5; transition: var(--transition-custom); transition-delay: 0.2s;}
.recruitment-list li a i {position: absolute; top: 50%; right: 4rem; margin-top: -2.4rem; font-size: 4.8rem; color: #fff; transition: var(--transition-custom);}
 
 @media all and (min-width:801px){
	.recruitment-step {width: 100% !important;}
	.recruitment-list li a:hover .list-state,
	.recruitment-list li a:hover .list-tit ,
	.recruitment-list li a:hover .list-date {color: #fff;}
	.recruitment-list li a:hover i {transform: rotate(180deg);}
	.recruitment-list .cm-fill-btn:hover .cm-fill {width: 80vw; height: 80vw;}
	.recruitment-list .cm-fill-btn .cm-fill {background:#007AC2; z-index: -1;}
 }

/* ***********************
	*	페이크폼 스타일 추가css 
*********************** */
.fakeform-selectbox{position: relative; display:inline-block; width: 100%; margin-right:1rem;}
.fakeform-selectbox select{opacity: 0; visibility: hidden;}
.select-option.select-in-popup{z-index: 10000 !important;}
/* fake form - 기본 select 스타일 */
.fakeform-selectbox .select-title {text-indent:1.8rem; width: 100% !important; text-align: left; vertical-align: middle; border:0; line-height: 4.6rem; font-size:1.5rem; font-weight: 500; color: #000; border: 2px solid #000; background-color: #fff; display: inline-block; box-sizing: border-box; cursor: pointer; border-radius:2.5rem;}
.fakeform-selectbox .select-title:after{font-family: 'xeicon'; position:absolute; top:50%; right:1.8rem; transform:translateY(-50%); 
content: "\e942"; font-size:2.4rem; color: #000;}
.fakeform-selectbox .select-title strong {width: 100%; font-weight: 500; word-break: break-all; display: block; overflow: hidden;}
.fakeform-selectbox .select-title.active{border-bottom-color: #fff; border-radius:2.5rem 2.5rem 0 0;}
.fakeform-selectbox .select-title.active:after{content: "\e945";}
.fakeform-selectbox .select-title.focus{}
.fakeform-selectbox .select-title.disabled{}
/* 옵션창 */
.select-option {border: 2px solid #000; border-top: 0; /* background: #fff; */ max-height: 18rem; overflow: hidden; z-index: 999 !important;transform: translateY(-2px); /* padding-top: 2.5rem; */ border-radius:0 0 2.5rem 2.5rem; box-sizing:border-box; }
.select-option ul{max-height: 18rem; overflow:auto;}
.select-option ul::-webkit-scrollbar{
	width: 5px;
}
.select-option ul::-webkit-scrollbar-thumb{
	background-color:#333;
	border-radius:5px;
	transition:all 0.5s;
}
.select-option ul::-webkit-scrollbar-track{
	background-color:#f2f2f2; 
	border-radius:0;
}
.select-option ul {margin: 0; padding: 0; background:#fff; padding-bottom: 0.6rem;}
.select-option li {list-style: none;}
.select-option span,
.select-option strong {height: auto; font-size: 1.5rem; line-height: 1.5; color: #000000; white-space: nowrap; 
text-overflow: ellipsis; text-decoration: none; padding: 0.8rem 1.8rem; display: block; overflow: hidden; cursor: pointer;}
.select-option span:hover {background: #f2f2f2;}
.select-option span.selected {color: #000; font-weight: 600; background:#eee;}
.select-option .disabled span,
.select-option .disabled strong {color: #bbb; text-decoration: line-through; background: none; cursor: default;}
@media all and (max-width:800px){
	.fakeform-selectbox .select-title {text-indent: 1em; font-size: 1.4rem; line-height: 4rem;}
	.fakeform-selectbox .select-title:after{right:0.7em; font-size:2rem;}
	/* 옵션창 */
	.select-option span,
	.select-option strong {height: auto; font-size: 1.3rem; font-weight: 500; line-height: 1.5; padding: 1rem;}
}
@media all and (max-width:480px){
	.fakeform-selectbox .select-title {font-size: 12px;}
	.select-option span,
	.select-option strong  {font-size: 12px;}
}

/* 채용문의 */
.recruitment-inquiry-con {margin-top: 7rem;}
.inquiry-wrapper { padding: 5rem 0 2.5rem; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.inquiry-wrapper .inquiry-form + .inquiry-form{padding-top: 10rem;}
.inquiry-btn-con {padding-top: 6rem;}
.inquiry-btn-con .inquiry-submit-btn {display: block; margin: 0 auto; width: 32rem; height: 8rem; line-height: 8rem; background: #000; border-radius: 4rem; text-align: center; color: #fff; font-size: 2rem; letter-spacing: -0.025em;}
.inquiry-form .inquiry-item {margin-bottom: 3rem;}
.inquiry-form .inquiry-item .inquiry-item-tit {font-size: 2.2rem; font-weight: 700; letter-spacing: -0.025em; color: #000;line-height: 1.5; padding-bottom: 1rem;}
.inquiry-input-box .write-input ,
.inquiry-input-box .write-select,
.inquiry-input-box .write-textarea { text-indent:10px; width: 100%; height: 6rem; border: 1px solid #000; border-radius: 0.5rem;  font-size: 1.7rem; font-weight: 400; letter-spacing: -0.025em; color: #000; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.inquiry-input-box .write-textarea {text-indent:0; height: 30rem; padding: 10px;}
.inquiry-input-box .write-input::placeholder {color: #000;}

.inquiry-form-col2 {display: flex; flex-wrap: wrap; margin: -2rem;}
.inquiry-form-col2 .inquiry-item {width: calc(50% - 4rem); margin: 2rem;}
.inquiry-form-col2 .inquiry-item .inquiry-input-box {height: 6rem;}
.inquiry-form-col2 .inquiry-item .inquiry-input-box:not(.inquiry-radio-box) {border-bottom: 1px solid #000;}
.inquiry-form-col2 .inquiry-item .inquiry-input-box.inquiry-radio-box {padding-top: 1rem;}
.inquiry-form-col2 .inquiry-input-box .write-input ,
.inquiry-form-col2 .inquiry-input-box .write-select  { border: 0; }
.inquiry-form-col2 .inquiry-input-box .write-input::focus ,
.inquiry-form-col2 .inquiry-input-box .write-select::focus {border: none;}
.inquiry-form-col2 .inquiry-input-box .write-input::placeholder {color: #000;}
.inquiry-form-col2 .inquiry-input-box .phone-fieldset {display: flex;}
.inquiry-form-col2 .inquiry-input-box .phone-fieldset .write-input::placeholder ,
.inquiry-form-col2 .inquiry-input-box .phone-fieldset .write-select {color: #888888;}

.agree-check-con {padding-top: 1rem; display: flex; align-items: center; justify-content: space-between;}
.agree-check-con .agree-txt {font-size: 2.2rem; font-weight: 600; letter-spacing: -0.025em; color: #000; line-height: 1.2;}
.agree-check-con .agree-txt a {border-bottom: 1px solid #000; display: inline-block; color: #000;}
.agree-item-check-list {display: inline-flex;}

/* ***** ESG ***** */
.esg-page {padding-bottom: 12rem;}
.esg-page .news-top-con {padding-bottom: 15rem; margin-bottom: 0;}
.esg-new-con {padding-top: 6rem;}
/* 인증서 */
.esg-certicate-con {padding: 13.5rem 0; background: #F5F5F5;}
.esg-certicate-con .tit-box {display: flex; align-items: center; justify-content: space-between; padding-bottom: 3rem; margin-bottom: 3.5rem;}
.esg-certicate-con .tit-box .tit {font-size: 5rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.2;}
.esg-certicate-arrows button {font-size: 4rem; color: #000; display: inline-flex; align-items: center; opacity: 0.4; transition: all 0.3s}
.esg-certicate-arrows button.slick-prev {margin-right: 0rem;}
.esg-certicate-arrows button:hover {opacity: 1;}
.esg-certicate-list .slick-list {margin: 0 -1rem;}
.esg-certicate-list .slick-slide {margin: 0 1rem;}
.esg-certicate-list .certificate-img-thumb{position:relative; padding:6.5rem 0; background-color: #fff;}
.esg-certicate-list .certificate-img-thumb .img-con{display:block; position:relative; width: 57.14%; margin:0px auto; }
.esg-certicate-list .certificate-img-thumb .img-con span{position: relative; width: 100%; height: 0; padding-top: 138.9%; display: block;}
.esg-certicate-list .certificate-img-thumb .img-con span img{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;}
.esg-certicate-list .certificate-img-thumb .certificate-over-box{position:absolute; top:0; left:0; bottom:0; right:0; border:2px solid #007AC2; opacity:0; visibility:hidden; transition:all 0.3s}
.esg-certicate-list .certificate-img-thumb .certificate-over-box i{position:absolute; top:50%; left:50%; margin:-4rem 0 0 -4rem; width:8rem; height:8rem; line-height:8rem; background-color:#007AC2; text-align:center; color:#fff; font-size:2.5rem; border-radius:50%;}
.esg-certicate-list .certificate-tit{font-size: 1.8rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.77; margin-top: 2rem; text-align: center; word-break: break-word;}
@media all and (min-width:801px){
	 .esg-certicate-list li a:hover .certificate-img-thumb .certificate-over-box{opacity:1.0; visibility:visible;}
}

.certicate-modal-content{position:relative; width:96%; max-width:500px; margin:20px auto; }
.certicate-modal-content  .modal-close-btn{position:absolute; right: -4.2rem; top: 0; color:#fff; }
.certicate-modal-content  .modal-close-btn i{font-size:3.4rem;}
.certicate-modal-content  .modal-close-btn i:hover {color:#fff}
.certicate-inner-box{}
.certicate-img-list .img {position: relative; width: 100%; height: 0;     padding-top: 141.45%;}
.certicate-img-list .img img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.certicate-img-list .slick-dots {display: flex; align-items: center; justify-content: center; margin-top: 1rem;}
.certicate-img-list .slick-dots li {margin: 0 0.5rem;}
.certicate-img-list .slick-dots li button {width: 1rem; height: 1rem; border-radius: 1rem; background: rgba(255,255,255,0.4); font-size: 0;}
.certicate-img-list .slick-dots li.slick-active button {background: #fff;}
/* 배너 */
.esg-banner-con {background-image: url(/images/content/esg_banner_bg.jpg);background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed;}
.esg-banner-inner {position: relative; padding:30rem 0; text-align: center;}
.esg-banner-inner .esg-banner-txt {font-size: 3.5rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; line-height: 1.4;}
.esg-banner-inner .esg-banner-txt2 {    font-size: 1.8rem;font-weight: 500; letter-spacing: -0.025em; color: #fff; line-height: 1.77; padding-top: 2.5rem;}
.esg-banner-inner .main-btn-style01 {position: relative; margin: 4rem auto 0; border-color: #fff; background: transparent; overflow: hidden;}
.esg-banner-inner .main-btn-style01:hover em {color: var(--sub-color);}
/* 컨텐츠 1 */
.esg-con01 {position: relative;}
.esg-con01 .esg-con01-bg {position: relative; }
.esg-con01 .esg-con01-bg svg {max-width: 100%;}
.esg-con01 .esg-con01-txt {position: absolute; width: 100%; top: 0; left: 0; padding-top: 14rem; text-align: center;}
.esg-con01 .esg-con01-txt .txt01 {font-size: 2.5rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.56;}
.esg-con01 .esg-con01-txt .txt02 {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.77; padding-top: 2.5rem;}

.animation-item01 { animation: 26s esg-ani01 infinite linear; z-index: 5;}
.animation-item02 { animation: 26s esg-ani02 infinite linear; z-index: 6;}
.animation-item03 {animation: 4s esg-ani03 infinite linear; }
.animation-item04 {animation: 4s esg-ani04 infinite linear; }
.animation-item05 {animation: 3.2s esg-ani05 infinite linear; }
.animation-item06 {animation: 3.2s esg-ani06 infinite linear; }

@keyframes esg-ani01
{
    0%
    {
        transform: translateX(40%);
         -webkit-transform: translateX(40%);
		 opacity: 0;
    }
	7% {
		opacity: 1;
	}
	87% {
		opacity: 1;
	}
	93% {
		transform: translateX(-65%);
         -webkit-transform: translateX(-65%);
		opacity: 0;
	}
    100%
    {
        transform: translateX(-70%);
         -webkit-transform: translateX(-70%);
		opacity: 0;
    }
}

@keyframes esg-ani02
{
    0%
    {
        transform: translateX(-37%);
         -webkit-transform: translateX(-37%);
		 opacity: 0;
    }
	7% {
		opacity: 1;
	}
	87% {
		opacity: 1;
	}
	93% {
		transform: translateX(70%);
         -webkit-transform: translateX(70%);
		opacity: 0;
	}
    100%
    {
        transform: translateX(75%);
         -webkit-transform: translateX(75%);
		opacity: 0;
    }
}

@keyframes esg-ani03
{
    0%
    {
        transform: translateY(0);
         -webkit-transform: translateY(0);
    }
	50%
    {
        transform: translateY(1rem);
         -webkit-transform: translateY(1rem);
    }
	100%
    {
        transform: translateY(0);
         -webkit-transform: translateY(0);
    }
}

@keyframes esg-ani04{
    0%
    {
        transform: translateY(0);
         -webkit-transform: translateY(0);
    }
	50%
    {
        transform: translateY(-1rem);
         -webkit-transform: translateY(-1rem);
    }
	100%
    {
        transform: translateY(0);
         -webkit-transform: translateY(0);
    }
}
@keyframes esg-ani05{
	0%
	{
		transform: translateY(0);
		 -webkit-transform: translateY(0);
	}
	50%
	{
		transform: translateY(0.5rem);
		 -webkit-transform: translateY(0.5rem);
	}
	100%
	{
		transform: translateY(0);
		 -webkit-transform: translateY(0);
	}
}
@keyframes esg-ani06{
	0%
	{
		transform: translateY(0);
		 -webkit-transform: translateY(0);
	}
	50%
	{
		transform: translateY(-0.5rem);
		 -webkit-transform: translateY(-0.5rem);
	}
	100%
	{
		transform: translateY(0);
		 -webkit-transform: translateY(0);
	}
}



/* 컨텐츠 2 */
.esg-con02 {padding-top: 23rem;}
.esg-list-con .tit-esg {position: relative; display: block; width: 42rem; height: 12rem; line-height: 11rem; border-radius: 6rem; background: #fff; border: 0.5rem solid var(--main-color); text-align: center; font-size: 5rem; letter-spacing: -0.025em; color: var(--main-color); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto 6rem;  box-shadow: 0.5rem 0.9rem 3rem #00000033;;}
.esg-list-con .tit-esg:before {position: absolute; content: ''; top: -2rem; left: -2rem; width: calc(100% + 4rem); height: calc(100% + 4rem);  background: rgba(47, 180, 87, 0.1); border-radius: 8rem; z-index: -2;}
.esg-list-con .tit-esg:after{position: absolute; content: ''; bottom: -6.4rem; left: 50%; margin-left: -0.5px; width: 1px; height: 6rem; background: rgba(0,0,0,0.1); z-index: -1;}
.esg-list {position: relative; display: flex; padding-top: 6rem; margin: 0 -1.5rem;}
.esg-list:before {position: absolute; content: ''; width: calc(100% - 33.33%); height: 1px; top: 0px; left: 50%; margin-left: calc(-1*((100% - 33.33%)/2)); background: rgba(0,0,0,0.1); }
.esg-list li {position: relative; width: calc(33.33% - 3rem); margin: 0 1.5rem; border-radius: 1rem; height: 52rem; padding-top: 9rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.esg-list li:first-child {border: 1px solid #8FCF4D;}
.esg-list li:nth-child(2) {border: 1px solid #2FB457;}
.esg-list li:nth-child(3) {border: 1px solid #007AC2;}
.esg-list li:before {position: absolute; content: ''; width: 1px; height: 6rem; top: -6rem; left: 50%; margin-left: -0.5px; background: rgba(0,0,0,0.1);}
.esg-list li:after {position: absolute; content: ''; top: -4.5px; left: 50%; margin-left: -4.5px; width: 9px; height: 9px; border-radius:9px; border: 1px solid var(--main-color); background: #fff; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; }
.esg-list li .tit-box {position: absolute; top: -1px; left: 0; display: flex; align-items: center; padding:0 3.8rem; width: 100%; height: 9rem; border-radius: 1rem 1rem 0 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.esg-list li:first-child .tit-box{background-color: #8FCF4D;}
.esg-list li:nth-child(2) .tit-box{background-color: #2FB457;}
.esg-list li:nth-child(3) .tit-box{background-color: #007AC2;}
.esg-list li .tit-box strong {font-size: 3rem; letter-spacing: -0.025em; color: #fff; line-height: 1.3;}
.esg-list li .txt-box {position: relative; padding: 3rem; height: 100%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.esg-list li .txt-box .txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.025em; color: #666; line-height: 1.77;}
.esg-list li .txt-box .icon {position: absolute; bottom: 4rem; right: 4rem;}
.esg-list li .txt-box dl dt {font-size: 2.7rem; font-weight: 700; letter-spacing: 0em; color: #222222; line-height: 1.6; margin-bottom: 1rem;}
.esg-list li .txt-box dl dd .txt {position: relative; padding-left: 1rem; line-height: 1.55;margin-top:0.6rem; }
.esg-list li .txt-box dl dd .txt:before {position: absolute; content: ''; left: 0; top: 1rem; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; background: #aaaaaa;}

/* ****************** Customer Center ********************** */
.customer-page  {padding-bottom: 15rem;}
/* Contact Us */
.customer-page .recruitment-inquiry-con {margin-top: 0; }
.customer-page .inquiry-wrapper {padding-top: 0; border-top: 0;}
.customer-page .inquiry-wrapper .inquiry-form-col2 {padding-top: 5rem;}


/* ****************** 서브페이지 공통 하단  ********************** */
.sub-bottom-online {position: relative; padding: 14rem 0; background-image: url(/images/content/sub_online_bg.png);background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed;}
.sub-bottom-online:before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: transparent linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);}
.sub-bottom-online-con {position: relative; z-index: 1; padding: 0 10rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.sub-bottom-online .main-tit-box .main-tit02 {color: #fff;}
.sub-bottom-online .main-tit-box .main-txt {color: #fff; font-weight: 400;}
.sub-bottom-online .main-tit-box .main-btn-style01 {position: relative; border-color: #fff; background: transparent; margin-top: 5rem; overflow: hidden;}
.sub-bottom-online .main-tit-box .main-btn-style01 em {color: #fff;}
.sub-bottom-online .main-tit-box .main-btn-style01:hover em {color: var(--sub-color);}