@charset "utf-8";
/* CSS Document by Seung hyun */

/* Company - History */
.history-con {}
.history-con.rich {margin-top: 10em;}
.history-con .tit-bg {background: url(../images/sub/history_img.jpg) no-repeat; background-size: cover; background-attachment: fixed; padding: 3em 3em; background-position: 50% 50%; border-radius: 3em; }
.history-con .tit-bg .inner {position: relative; padding: 2em 0;}
.history-con .tit-bg .inner > h3 {font-size: 3.5em; font-weight: 400;}
.history-con .tit-bg .inner > h3 > b {}
.history-con .tit-bg .inner > p {font-size: 1.5em; font-weight: 400;}
.history-con .tit-bg .line > span {position: absolute; background: #fff; display: inline-block;}

.history-con .tit-bg .line1 {width: 1px; height: 100%; left: 0; top: 0;}
.history-con .tit-bg .line2 {width: 100%; height: 1px; left: 0; top: 0;}
.history-con .tit-bg .line3 {width: 1px; height: 100%; right: 0; top: 0;}
.history-con .tit-bg .line4 {width: 100%; height: 1px; right: 0; bottom: 0;}
.history-con .scrollAni {}

/* History - New style */
.history-layout {gap: 8em;}
.history-layout .left {flex: 1 1 40%;}
.history-layout .left .title-wrap {}
.history-layout .left .title-wrap > h3{font-size: 3em; margin: .25em 0;}
.history-layout .left .title-wrap > b {}
.history-layout .left .img-wrap {margin-top: 3em; position: relative;}
.history-layout .left .img-wrap img {border-radius: 3em;}
.history-layout .left .img-wrap:before {content: ''; position: absolute; width: 100%; height: 100%; left: -3em; top: 3em; background: #eee; border-radius: 3em; z-index: -1;}
.history-layout .right {flex: 1 1 60%;}
.history-layout .right .hitory_wrap {}

/*history*/
.history_bgw {overflow:hidden; position:relative; margin-bottom:3em;}
.history_bgw .bg_w {position:absolute; left:0; top:0; width:100%; height:100%; background-position:center top; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;}
.history_bgw .txt_wrap {text-align:center; }
.history_bgw .txt_wrap .en {font-weight: 700;  padding-bottom:.5em; color:#fff; /*letter-spacing:5px;*/ font-size:2.5em; }
.history_bgw .txt_wrap .kr {font-size:1.125em; color:#fff; margin-bottom:.5em;}
.history_bgw .line_wrap{ position:relative; height:15em;}
.history_bgw .line_wrap .line{ position:absolute; background:#fff; width:1px; height:1px; transition:1s; opacity:.5; display:none;}
.history_bgw .line_wrap .line.hor{ transition-delay:1s}
.history_bgw .line_wrap .line.top{ top:0}
.history_bgw .line_wrap .line.bot{ bottom:0}
.history_bgw .line_wrap .line.left{ left:0}
.history_bgw .line_wrap .line.right{ right:0}
.load .history_bgw .line_wrap {margin:2em 1.5em;}
.load .history_bgw .line_wrap .line.ver{ height:100%}
.load .history_bgw .line_wrap .line.hor{width:40%;}
.load .history_bgw .line_wrap .line{ display:block}

.history_wrap{ position:relative; overflow:hidden; padding:2em 2em 2em 0;}
.history_wrap:before,
.history_wrap .scrollAni{ content:""; position:absolute; left:30%; top:0; width:2px; height:100%; background:#ddd}

.history_wrap .scrollAni{ height:0; background:#ca0202; transition:.3s;}
.history_wrap .scrollAni:before {content:""; position:absolute;/*  left:30%; */ top:0; margin-left:-.5em; width:1.2em; height:1.2em; background:#fff; border:.25em solid #ca0202; border-radius:100%; box-sizing:border-box}
.history_wrap:after{ content:""; position:absolute; left:30%; top:0; margin-left:-.5em; width:1.2em; height:1.2em; background:#fff; border:.25em solid #ca0202; border-radius:100%; box-sizing:border-box}

.history_wrap.rich .scrollAni{background:#32e13a;}
.history_wrap.rich .scrollAni:before {border:.25em solid #32e13a;}
.history_wrap:after{  border:.25em solid #32e13a;}

.history_wrap:after{ top:auto; bottom:0}
.history_wrap .history > li{ margin-top:8em}
.history_wrap .history > li:first-child{ margin-top: 0}
.history_wrap .history > li .year{ width:28%; overflow:hidden; justify-content:flex-end}
.history_wrap .history > li .year .wrap_in{ position:relative; overflow:hidden; width:25em}
.history_wrap .history > li .year .tt{ display:inline-block; position:relative; padding:0 .5em; font-size:3em; letter-spacing:-3px; color:#333; font-weight:700;}
.history_wrap .history > li .year .tt:before{ content:""; position:absolute; left:100%; top:50%; margin-top:-1px; width:30%; border-top:2px dotted #aaa}
.history_wrap .history > li .year .tt:after{ content:"'"; font-style:italic}
.history_wrap .history > li .list{ width:70%; margin-top:1em}
.history_wrap .history > li .list > li{ margin-top:.5em}
.history_wrap .history > li .list > li:first-child{ margin-top:0}
.history_wrap .history > li .list .wrap_in{ padding:0 2em; /* align-items: center; */ position: relative; margin-left: 2em;}
.history_wrap .history > li .list .wrap_in .img_wrap .resize {padding-bottom:35% !important;}
.history_wrap .history > li .list .wrap_in .img_wrap .resize .img_r {text-align:right !important;}
.history_wrap .history > li .list .wrap_in .img_wrap .resize .img_l {text-align:left !important;}
.history_wrap .history > li .list .wrap_in:before{ content:""; position:absolute; left:0; top: 8px; width:.5em; height: .5em; background: #8BC53F; border-radius: 50%;}
.history_wrap .history > li .list .month{ flex:0 0 3em; font-size: 1.25em; color: #777; margin-bottom: .75em;}
.history_wrap .history > li .list .month .tt{ color:#999; font-size:1.125em;letter-spacing:-1px}
.history_wrap .history > li .list .month .tt:after{ content:""; font-size:.813em; font-weight:500}
.history_wrap .history > li .list .detail > li{ margin-top:.5em}
.history_wrap .history > li .list .detail > li:first-child{ margin-top:0}
.history_wrap .history > li .list .detail .tt{ position:relative; /* padding:0 1.5em; *//*  margin-top:.125em;  */color:#333; font-size:1.250em; line-height:1.2; font-weight:500; word-break: keep-all; margin-bottom: .75em;}
/* .history_wrap .history > li:nth-child(2n) .year{ justify-content:flex-start; text-align:right}
.history_wrap .history > li:nth-child(2n) .year .tt:before{ left:auto; right:100%}
.history_wrap .history > li:nth-child(2n) .list{ order:-1}
.history_wrap .history > li:nth-child(2n) .list > li > .flex{ justify-content:flex-end}
.history_wrap .history > li:nth-child(2n) .list .month{ text-align:right}
.history_wrap .history > li:nth-child(2n) .list .detail{ order:-1}
.history_wrap .history > li:nth-child(2n) .list .detail .tt{ text-align:right}
.history_wrap .history > li:nth-child(2n) .list .detail .tt:before{ left:auto; right:0} */

.histroy-ank {max-width: 70%; margin: auto; margin-top: -2em; box-shadow: 0 10px 10px rgba(0,0,0,.1); border-radius: 5em; overflow: hidden;}
.histroy-ank > li {flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; transition: .35s; border-right: 1px solid #ddd;}
.histroy-ank > li:hover {background: #012350;}
.histroy-ank > li:hover .btn-tt {color: #fff;}
.histroy-ank > li .btn-tt {font-size: 1.75em; font-weight: 600; color: #777; position: relative; transition: .35s; padding: .5em 1em; transition: .35s; width: 100%; text-align: center;}
.histroy-ank > li .btn-tt.on {background: #012350; color: #fff;}
.histroy-ank > li .btn-tt:before {content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: #2b9cbb; border-radius: 50%; width: .25em; height: .25em; opacity: 0; transition: .35s;}
.histroy-ank > li .btn-tt:hover:before {opacity: 1; top: -.5em;}


/* Company - Organization */
.organi-con {margin-top: -2em;}
.organi-con .img-wrap {max-width: 90%; margin: auto;}

/* Company - Location */
/* .wrap_idx{ overflow:hidden} */
.con_idx{ position:relative}
.con_idx > .idx{ position:absolute; left:0; top:0; width:100%; visibility:hidden;filter:alpha(opacity=0);opacity:0; display: none;}
.con_idx > .idx.on{ position:relative; visibility: visible; filter:alpha(opacity=100);opacity:1; display: block;}
.con_idx > .idx.on2{ position:relative; visibility: visible; filter:alpha(opacity=100);opacity:1; display: block;}

/* .location-con {margin-top: 1em;} */

.location-con .idx.flex {gap: 2em;}
.location-con .idx.flex > .right {flex: 1 1 45%;}
.location-con .map-con {border-radius: 10px; overflow: hidden; border: 1px solid #ddd; box-sizing: border-box;}
.location-con .map-con > div {margin: -1px !important;}
.location-con .tab-wrap {margin-bottom: 3em;}
.location-con .tab-wrap .tab_idx {gap: 1em; max-width: 50%; margin: auto;}
.location-con .tab-wrap .tab_idx > li {flex: 1; background: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden;} 
.location-con .tab-wrap .tab_idx > li > a {font-size: 1.25em; width: 100%; text-align: center; padding: 1em 0; transition: .35s; border: 1px solid #eee; font-weight: 500; color: #555;}
.location-con .tab-wrap .tab_idx > li.on > a {background: #012350; color: #fff;}
.location-con .tab-wrap .tab_idx > li > a:hover {background: #012350; color: #fff;} 
.location-con .map-info {background: #fff; padding: 3em; box-shadow: 0 5px 10px rgba(0,0,0,.1); border-radius: 10px; /* margin-top: 1em; */ border: 1px solid #eee;}
.location-con .map-info .add-list {gap: 0 3em;}
.location-con .map-info .add-list > li {margin-bottom: 1.5em;}
.location-con .map-info .add-list > li:nth-child(n+2) {margin-bottom: 0;}
.location-con .map-info .add-list > li:first-child {flex: 1 1 100%; margin-bottom: 2em;}
.location-con .map-info .add-list > li:last-child {margin-bottom: 0;}
.location-con .map-info .add-list > li .add-wrap {width: 100%; padding-left: 1em;}
.location-con .map-info .add-list > li .add-wrap > p {display: flex; margin-bottom: .5em;}
.location-con .map-info .add-list > li .add-wrap > p:last-child {margin-bottom: 0;}
.location-con .map-info .add-list > li .add-wrap b {font-size: 1.25em; flex: 1 1 8%;}
.location-con .map-info .add-list > li .add-wrap .tt {flex: 1 1 92%;}
.location-con .map-info .add-list > li > p {display: flex; align-items: center;}
.location-con .map-info .xi {background: #ca0202; color: #fff; border-radius: 50%; width: 1.8em; height: 1.8em; line-height: 1.8em; text-align: center; }
.location-con .map-info .tt {font-size: 1.25em; font-weight: 500; padding-left: 1em; color: #555;}
.location-con .transport {margin-top: 2em;}
.location-con .transport > div {align-items: center; /* border-bottom: 1px solid #ddd; */ /* padding: 2em 1em; */}
.location-con .transport > div .left {flex: 1 1 20%; color: #333;}
.location-con .transport > div .right {flex: 1 1 80% !important; background: #f5f5f5; padding: 3em;}
.location-con .transport > div .left > h3 {font-size: 1.5em; font-weight: 600;}
.location-con .transport > div .left > h3 .xi {font-size: 1em;}
.location-con .transport > div .right .tit {color: #3dab1d; font-size: 1.35em; margin-top: 0;}
.location-con .transport > div .right > p {font-size: 1.125em; font-weight: 500; color: #555;}
.location-con .transport > div .right .tit .point {border-radius: 20px; background: #3dab1d; color: #fff; padding: .5em .75em; font-size: 1rem; vertical-align: middle; margin-right: 1em;}
.location-con .transport .subway .right .tit {color: #9a4e0f;}
.location-con .transport .subway .right .tit .point {background: #9a4e0f; color: #fff;}
.location-con .transport .car .right .tit {color: #ff4d44;}
.location-con .loca-title {margin-bottom: 1em;}
.location-con .loca-title > h3 {font-size: 1.75em; font-weight: bold; color: #012350; position: relative; padding-left: 0.5em;}
.location-con .loca-title > h3:before {content: ''; position: absolute; background: #012350; width: 5px; height: 100%; left: 0; top: 0; border-radius: 10px;}

/* Company - Contact */
.location-con .transport .right {}
.location-con .transport .right .waypoint {}
.location-con .transport .right .waypoint > li {flex: 1; position: relative; padding: 0 2em; box-sizing: border-box;}
.location-con .transport .right .waypoint > li:not(:last-child):after {content: '\e90b'; font-size: 1.5em; font-family: xeicon; position: absolute; top: 50%; right: -8%; transform: translate(-50%, -50%); color: #333;}
.location-con .transport .right .waypoint > li .bus-wrap {gap: .5em .25em;}
.location-con .transport .right .waypoint > li .bus-wrap > span {padding: .25em .5em; color: #fff; font-size: 1em; border-radius: 5px; word-break: keep-all; white-space: nowrap;}
.location-con .transport .right .waypoint > li .bus-wrap .xi {font-size: 2em; color: #ca0202; border: 2px solid #ca0202; border-radius: 50%; padding: 10px;}
.location-con .transport .right .waypoint > li .txt-wrap {margin-top: 1.5em;}
.location-con .transport .right .waypoint > li:last-child .txt-wrap {margin-top: 1em;}
.location-con .transport .right .waypoint > li .txt-wrap p {font-weight: 600; color: #333;}
.location-con .color-A {background: #FF451E;}
.location-con .color-B {background: #00AFBD;}
.location-con .color-C {background: #47AF1B;}


/* Product */
.prod-tab-wrap {}
.prod-tab-wrap .tab-list {border: 1px solid #8dc73f; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.1);}
.prod-tab-wrap .tab-list > li {flex: 1 1 15%; border-right: 1px solid #8dc73f; border-bottom: 1px solid #8dc73f; margin: 0 -1px -1px 0;}
.prod-tab-wrap .tab-list > li:hover > a {background: #8dc73f; color: #fff; /* border-left:1px solid rgba(255,255,255,.7); border-top:1px solid rgba(255,255,255,.7); border-right: none; border-bottom: none; margin: -1px -1px -1px -1px; */}
.prod-tab-wrap .tab-list > li.on > a {background: #8dc73f; color: #fff;}
.prod-tab-wrap .tab-list > li > a {display: flex; align-items: center; justify-content: center; text-align: center; height: 4.5em; color: #555; transition: .3s; font-weight: 500;}
.prod-tab-wrap .tab-list > li > a .page_tt {}

/* Product - sub - tab */
.sub-tab-wrap {margin-top: 3em;}
.sub-tab-wrap .tab-list {max-width: 50%; margin: auto; gap: 1em;}
.sub-tab-wrap .tab-list > li {flex: 1 1 15%;}
.sub-tab-wrap .tab-list > li:hover + li:hover {border-right-color: #fff;}
.sub-tab-wrap .tab-list > li > a {display: flex; align-items: center; justify-content: center; text-align: center; height: 3.5em; color: #fcb813; transition: .3s; font-weight: 500; position: relative; border-radius: 10em; border: 1px solid #fcb813; background: #fff;}
.sub-tab-wrap .tab-list > li.on > a,
.sub-tab-wrap .tab-list > li:hover > a {background: #fcb813; color: #fff; }
.sub-tab-wrap .tab-list > li > a .page_tt {}


.prod-search-box {display: none; width: 100%; max-width: 50%;  margin: -1em auto 2em auto; padding: 2em 5em; border: 1px solid #eee; border-radius: 100px; box-sizing: border-box; align-items: center; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,.1); }
.prod-search-box input {outline: none; border: none; background: none;}
.prod-search-box .xi {font-size: 2em;}
.prod-search-box .search-icon {padding-right: .25em;}
.prod-search-box .pr {flex: 1 1 95%;}
.prod-search-box .text-area { font-size: 1.25em; border-bottom: 2px solid #333; height: 2.5em; width: 100%; padding-left: 0.5em;}
.prod-search-box .search-btn {flex: 1 1 5%; font-size: 1.25em; color: #fff; background: #8dc73f; border-radius: 40px; padding: 0 1em; outline: none; border: none; height: 2.25em; margin-left: 1em;}
.prod-search-box .btnClear {position: absolute; top: .5em; right: 1em; width: 30px; height: 30px; border: none; outline: none; cursor: pointer; background: none; display: block;}

.prod-list-wrap {margin-top: 3em;}
.prod-list-wrap .list {gap: 4em 2em;}
.prod-list-wrap .list > li {flex: 1 1 calc(20% - 2em); max-width: calc(20% - 1.65em); transition: .3s; cursor: pointer;}
.prod-list-wrap .list > li .img-wrap {margin: 0 auto; border-radius: 2em; transition: .3s; overflow: hidden; position: relative; border: 1px solid #ddd;}
.prod-list-wrap .list > li .img-wrap .new-product {position: absolute; right: 1em; top: 1em; }
.prod-list-wrap .list > li .img-wrap .new-product .bg-point {display: inline-block; background: #f55110; color: #fff; padding: .25em .5em; font-size: .875em; border-radius: 5px;}

.prod-list-wrap .list > li .img-wrap .resize {max-width: 100%; margin: 0 auto; transition: .3s;}
/* .prod-list-wrap .list > li:hover .img-wrap {box-shadow: 0 0 30px rgba(0,0,0,.25);} */
.prod-list-wrap .list > li:hover .img-wrap .resize {transform: scale(1.05);}
.prod-list-wrap .list > li .img-wrap img {object-fit: contain; width: inherit; height: inherit;}
.prod-list-wrap .list > li .txt-wrap {margin-top: 1em; padding: 1em 1em 1em 1em; border-radius: 3em; background: #555; display: flex; align-items: center; justify-content: center; transition: .3s;}
.prod-list-wrap .list > li:hover .txt-wrap {background: #ca0202;}
.prod-list-wrap .list > li .txt-wrap .prod-tt {font-size: 1.25em; font-weight: 500; color: #fff; text-align: center;}

.prod-view-con {margin-top: 7em;}
.prod-view-con .inner {gap: 3em;}
.prod-view-con .inner .left {flex: 0 0 50%;}
.prod-view-con .inner .left .img-cont {}
.prod-view-con .inner .left .img-cont {}
.prod-view-con .inner .left .img-cont .img {box-shadow: 0 0 30px rgba(0,0,0,.1); border-radius: 3em; overflow: hidden; width: 600px; height: 600px; margin: 0 auto;}
/* .prod-view-con .inner .left .img-cont .img:hover {cursor: url(../images/sub/cursor.svg) 4 5, url(../images/sub/cursor.svg), … , url(../images/sub/cursor.svg) 5 5, auto;} */
.prod-view-con .inner .left .img-cont .imgBig{width: 100%; height: 100%; object-fit: contain;}
.prod-view-con .inner .left .img-list {gap: 1em; max-width: 60%; margin: 1em auto 0 auto;}
.prod-view-con .inner .left .img-list > li {cursor: pointer; border: 2px solid #eee; opacity: 1; border-radius: 1em; overflow: hidden; transition: .3s; flex: 0 0 7em; height: 7em;}
.prod-view-con .inner .left .img-list > li:last-child {display: none;}
.prod-view-con .inner .left .img-list > li:hover,
.prod-view-con .inner .left .img-list > li.on {border: 2px solid #ca0202;}
.prod-view-con .inner .left .img-list > li > .img-lnk {width: 100%; height: 100%; object-fit: cover;}


.prod-view-con .inner .right {flex: 1 1 50%;}
.prod-view-con .inner .right .txt-cont {}
/* .prod-view-con > .txt-cont {width: 50%;} */
.prod-view-con .txt-cont {margin-bottom: 3em;}
.prod-view-con .txt-cont .tit {font-size: 2.75em; font-weight: 700; color: #333; position: relative; display: inline-block; }
.prod-view-con .txt-cont .tit:before {content:""; position:absolute; left:calc(100% - .25em); bottom:calc(100% - .25em); width:.875em; height:.875em; background:url(../images/inc/logoS.svg) no-repeat 50% 50%; background-size:contain; transform:rotate(25deg);}
.prod-view-con .inner .right .txt-cont .list {margin-top: 1em;}
.prod-view-con .inner .right .txt-cont .list > li {padding: 1.5em 1em; border-bottom: 1px solid #ddd; display: flex; font-size: 1.25em;}
.prod-view-con .inner .right .txt-cont .list > li:first-child {padding-top: 0;}
.prod-view-con .inner .right .txt-cont .list > li .t1 {flex: 1 1 20%; font-weight: 600; color: #555; line-height: 1.5em;}
.prod-view-con .inner .right .txt-cont .list > li .t2 {flex: 1 1 85%; line-height: 1.5em;}

.prod-view-con .detail-cont {margin-top: 3em; padding-top: 3em; border-top: 3px solid #8dc73f;}
.prod-view-con .detail-cont .detail-list .img-wrap {max-width: 100%; margin: 0 auto;}
.prod-view-con .detail-cont .detail-list .img-wrap img {width: 100%; object-fit: contain;}
.list-btn {margin-top: 3em; text-align: center;}
.list-btn button {outline: none; background: #777; color: #fff; padding:1em 2em; border: none; border-radius: 5px; }
.list-btn button .xi {vertical-align: top; font-size: 1.125em;}

/* ESG - ESG */
.esg-cont {}
.esg-cont .esg-wrap {}
.esg-cont .esg-wrap .inner {gap: 3em; align-items: center;}
.esg-cont .title-wrap {flex: 1 1 30%;}
.esg-cont .title-wrap > h3 {font-weight: bold; color: #333;}
.esg-cont .title-wrap > p {font-size: 1.25em; color: #555; margin-top: 1em;}
.esg-cont .vision-wrap {flex: 1 1 70%;}
.esg-cont .vision-wrap .vision-list {gap: 1em;}
.esg-cont .vision-wrap .vision-list > li {flex: 1; border: 1px solid #eee; padding: 2em; box-sizing: border-box; border-radius: 30px; box-shadow: 0 0 30px rgba(0,0,0,.1);}
.esg-cont .vision-wrap .vision-list > li .icon-wrap {width: 60%; margin: auto;}
.esg-cont .vision-wrap .vision-list > li .txt-wrap {margin-top: 2em; text-align: center;}
.esg-cont .vision-wrap .vision-list > li .txt-wrap .tit {font-size: 1.25em; color: #333; font-weight: 600; }
.esg-cont .vision-wrap .vision-list > li .txt-wrap .txt {font-size: 1.125em; color: #555; margin-top: 1em; line-height: 1.5em;}
.esg-cont .list-img-wrap {margin-top: 5em; position: relative; padding-bottom: 12em;}
.esg-cont .list-img-wrap .list-bg {position: absolute; width: 100%; height: 70%; bottom: 0; left: 0; background: #8BC53F; opacity: .5;}
.esg-cont .list-img-wrap .list {gap: 3em;}
.esg-cont .list-img-wrap .list > li {flex: 1;}
.esg-cont .list-img-wrap .list > li .img-wrap {box-shadow: 0 30px 30px rgba(0,0,0,.2); margin-top: 1em; overflow: hidden; border-radius: 10px;}
.esg-cont .list-img-wrap .list > li .img-wrap .resize {padding-bottom: 66%;}
.esg-cont .list-img-wrap .list > li .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.esg-cont .list-img-wrap .list > li .list-title {font-size: 2em; font-weight: bold; color: #333; text-align: center; }
.esg-cont .list-img-wrap .list > li .list-title .tt1 {display: inline-block; position: relative;}
.esg-cont .list-img-wrap .list > li .list-title .tt1:before,
/* .esg-cont .list-img-wrap .list > li .list-title .tt1:after {content: ''; position: absolute; width: 8px; height: 8px; background: #ca0202; border-radius: 50%; top: 20px;}  */
.esg-cont .list-img-wrap .list > li .list-title .tt1:before {left: -.75em;}
.esg-cont .list-img-wrap .list > li .list-title .tt1:after {right: -.75em;}

.esg-policy {margin-top: 3em;}
.esg-policy .policy-wrap {padding: 5em 3em; text-align: center; border: 1px solid #ddd; border-radius: 30px; box-shadow: 0 10px 30px rgba(0,0,0,.1); position: relative;}
.esg-policy .policy-wrap.page_sec {margin-top: 3em;}
.esg-policy .policy-wrap .logo-bg {position: absolute; width: 60%; height: 100%; background: url(../images/inc/logo.svg) no-repeat; background-position: center; background-size: contain; opacity: .05; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;}
.esg-policy .policy-wrap > h3 {font-size: 2.5em; font-weight: bold; color: #333; margin-bottom: 1em; display: inline-block; position: relative;}
.esg-policy .policy-wrap > h3:before {content: '';position:absolute; left:calc(100% - .25em); bottom:calc(100% - .25em); width:.875em; height:.875em; background:url(../images/inc/logoS.svg) no-repeat 50% 50%; background-size:contain; transform:rotate(25deg);}
.esg-policy .policy-wrap > p {font-size: 1.25em; line-height: 1.5em;}
.esg-policy .policy-wrap .list {/*  text-align: left; */ max-width: 80%; margin: auto; margin-top: 2em;}
.esg-policy .policy-wrap .list > li {padding: .5em 0; font-size: 1.125em; color: #555;}
.esg-policy .policy-wrap .list > li .num {color: #8BC53F;}
.esg-policy .policy-wrap .btm-txt {margin-top: 3em; color: #333; font-size: 1em; display: flex; flex-direction: column;}
.esg-policy .policy-wrap .btm-txt .date {margin-bottom: 1em;}
.esg-policy .policy-wrap .btm-txt .site-name {margin-bottom: 1em;}
.esg-policy .policy-wrap .btm-txt .ceo {font-size: 1.125em;}

.esg-policy .policy-wrap .esg-img {border-radius: 1em; overflow: hidden; margin: 2em 0;}

.sub-tab {max-width: 70%; margin: auto; border-radius: 10px; overflow: hidden; border: 1px solid #8dc73f; box-shadow: 0 10px 30px rgba(0,0,0,.1); margin-bottom: 3em;}
.sub-tab > li {flex: 1; display: flex; align-items: center; justify-content: center;  height: 4.5em;  color: #8dc73f; background: #fff; border-right: 1px solid #8dc73f; cursor: pointer; transition: .3s;}
.sub-tab > li:last-child {border-right: none;}
.sub-tab > li .tab-btn {font-size: 1.125em; width: 100%; text-align: center;} 
.sub-tab > li.on,
.sub-tab > li:hover {background: #8dc73f; color: #fff; border-right-color: #fff;} 

.brand-cont {position: relative;}
.brand-cont .brand-wrap {margin-bottom: 6em;}
.brand-cont .brand-slide {overflow: visible;}
.brand-cont .inner {gap: 3em; position: relative;}
.brand-cont .inner .left  {position: absolute; background: #fff; width: 40%; left: 3em; bottom: -6em; padding: 2em; border-radius: 30px; box-shadow: 20px 20px 20px rgba(0,0,0,.1); border: 1px solid #eee;}
.brand-cont .inner .left .txt-wrap  {}
.brand-cont .inner .left .txt-wrap .page_tt:not(:last-child) {margin-bottom: 1em;}
.brand-cont .inner.rich .left .txt-wrap .page_tt:first-child {margin-bottom: .5em;}
.brand-cont .inner .left .txt-wrap .page_tt.ffSerif {font-weight: bold;}
/* .brand-cont .inner .left .txt-wrap .page_tt > i {font-size: 1.5em; color: #333; font-weight: bold;} */
.brand-cont .inner.rich {width: 100%;}
.brand-cont .inner.rich .left {width: 40%;}
.brand-cont .inner.rich .main-item {width: 100%; }
.brand-cont .inner.rich .main-item .title { color: #333; font-weight: 600;}
.brand-cont .inner.rich .main-item .title .s4 {color: #3dab1d;}
.brand-cont .inner.rich .item-slider { border-radius: 3em; background: #f8f8f8; padding: 2em; position: relative; margin-top: 1em;}
/* .brand-cont .inner.rich .item-list > li { flex: 1; display:flex;} */
.brand-cont .inner.rich .item-controller {position: absolute; left: 0; top: 45%; transform: translateY(-50%); width: 100%; z-index: 11111;}
.brand-cont .inner.rich .item-controller .item-prev,
.brand-cont .inner.rich .item-controller .item-next {position: absolute; width: 2.125em; height: 2.125em; border-radius: 50%; background: #fff; border: 1px solid #eee; box-shadow: 0 0 10px rgba(0,0,0,.1); font-size: 1.5em; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .2s;}
.brand-cont .inner.rich .item-controller .item-prev:hover,
.brand-cont .inner.rich .item-controller .item-next:hover {background: #8dc73f; color: #fff;}
.brand-cont .inner.rich .item-controller .item-prev {left: 2%;}
.brand-cont .inner.rich .item-controller .item-next {right: 2%;} 
.brand-cont .inner.rich .item-list > li{ padding: 1.25em;}
.brand-cont .inner.rich .item-list > li .wrap_in{ flex: 1; padding: 3em 1em; border: 1px solid #eee; box-shadow: 5px 5px 15px rgba(0,0,0,.1); box-sizing: border-box; border-radius: 3em; height: 100%; position: relative; background: #fff; transition: .5s;}
.brand-cont .inner.rich .item-list > li:hover .wrap_in {transform: rotateY(180deg); box-shadow: -5px 5px 15px rgba(0,0,0,.1); }
.brand-cont .inner.rich .item-list > li:hover .wrap_in .img-wrap,
.brand-cont .inner.rich .item-list > li:hover .wrap_in .txt-wrap {opacity: 0; visibility: hidden;}
/* .brand-cont .inner.rich .item-list > li:nth-child(1):after {content: ''; position: absolute; width: 4em; height: 1em; right: -3em; top: 55%; transform: rotate(45deg); background: #33a154; z-index: -1;}
.brand-cont .inner.rich .item-list > li:nth-child(2):after {content: ''; position: absolute; width: 4em; height: 1em; right: -3em; top: 45%; transform: rotate(-45deg); background: #33a154; z-index: -1;}
.brand-cont .inner.rich .item-list > li:nth-child(3):after {content: ''; position: absolute; width: 4em; height: 1em; right: -3em; top: 55%; transform: rotate(45deg); background: #33a154; z-index: -1;} */

/* .brand-cont .inner.rich .item-list > li:nth-child(even) {margin-top: 5em;} */
/* .brand-cont .inner.rich .item-list > li:hover .img-wrap img {transform: scale(1.1);} */
.brand-cont .inner.rich .item-list > li:hover .wrap_in .flip-wrap {transform: rotateY(180deg); opacity: 1;}
.brand-cont .inner.rich .item-list > li .wrap_in .flip-wrap {position: absolute; top: 0; left: 0; transition: .5s; opacity: 0; padding: 3em 2em; width: 100%; height: 100%; box-sizing: border-box;}
.brand-cont .inner.rich .item-list > li .wrap_in .flip-wrap .info-img {max-width: 70%; margin: auto;}
.brand-cont .inner.rich .item-list > li .wrap_in .flip-wrap .info-txt {margin-top: 2em; line-height: 1.5em; }


.brand-cont .inner.rich .item-list > li .img-wrap {max-width: 60%; margin: auto; border-radius: 50%; border: 2px solid #8dc73f; overflow: hidden; position: relative; background: #fff; z-index: 111; transition: .35s;}
.brand-cont .inner.rich .item-list > li .img-wrap img {transition: .3s;}
.brand-cont .inner.rich .item-list > li .txt-wrap {text-align: center; margin-top: 25%; transition: .35s;}
.brand-cont .inner.rich .item-list > li .txt-wrap .kr-tit {font-size: 1.35em; position: relative;}
.brand-cont .inner.rich .item-list > li .txt-wrap .kr-tit:before {content: ''; position: absolute; width: 10px; height: 10px; left: 50%; top: -.75em; background: #8dc73f; transform: translateX(-50%); border-radius: 50%; z-index: 111;}
.brand-cont .inner.rich .item-list > li .txt-wrap .kr-tit:after {content: ''; position: absolute; left: 50%; top: calc(-4em + .25em); width: 1px; height: 3em; background: #ddd; transform: translateX(-50%); z-index: 0;}
.brand-cont .inner.rich .item-list > li .txt-wrap .en-tit {font-size: 1.25em; font-weight: bold; margin-top: .25em;}

.brand-cont .inner .right {height: 60vh; width: 100%; overflow: hidden; border-radius: 30px; }
.brand-cont .inner .right .logo-box {position: absolute; right: 0; top: 0; width: 5em; padding: 1.5em; background: #fff; border-radius: 0 0 0 1em; height: 5em;}
.brand-cont .inner .right .logo-box > img {width: inherit; height: inherit; object-fit: contain; object-position: 50% 50%;}
.brand-cont .inner .right .img-wrap {width: 100%; height: 100%;}
.brand-cont .inner .right .img-wrap img {width: inherit; height: inherit; object-fit: cover; object-position: center;}
.partners-list {margin-top: 1em;}
.partners-list > li {flex: 1 1 25%;}
.partners-list > li .logo-img {max-width: 60%; margin: auto; transition: .3s;}
.partners-list > li .logo-img:hover {transform: scale(1.1);}
.partners-list > li .logo-img img {width: inherit; height: inherit; object-fit: contain; object-position: center;}

.brand-download {position: absolute; bottom: -3.5em; right: 0;}
.brand-download .btn {}
.brand-download .btn > a {padding: 1em 2em; background: #ca0202; color: #fff; border-radius: 30px; font-size: 1.125em; font-weight: 500;}
.brand-download .btn > a .xi {font-size: 1.25em; vertical-align: bottom;}

/* Community - Contact */
.contact-cont {}
.contact-bg {position: absolute; width: 100%; height: 40%; left: 0; bottom: 0; background: #006838; z-index: -1; opacity: .8;}
.contact-cont .contact-wrap {gap: 2em}
.contact-cont .inner {align-items: center; flex: 1; border: 1px solid #eee; padding: 3em; border-radius: 3em; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.1);}
.contact-cont .inner .left {flex: 1; padding-bottom: 2em; border-bottom: 1px solid #eee;}
.contact-cont .inner .left .logo-wrap {max-width: 70%; margin: auto; height: 100%;}
.contact-cont .inner .left .logo-wrap img {width: 100%; height: 100%; object-fit: contain;}
.contact-cont .inner .right {flex: 1;}
.contact-cont .inner .right .txt-wrap {margin-top: 2em;}
.contact-cont .inner .right .txt-wrap .list {}
.contact-cont .inner .right .txt-wrap .list.nature > li .xi {background: #8BC53F; }
.contact-cont .inner .right .txt-wrap .list.rich > li .xi {background: #FCB813;}
.contact-cont .inner .right .txt-wrap .list > li {display: flex; gap: 1em; align-items: center; margin-bottom: .5em;}
.contact-cont .inner .right .txt-wrap .list > li:last-child {margin-bottom: 0;}
.contact-cont .inner .right .txt-wrap .list > li .xi {min-width: 2em; min-height: 2em; background: #006838; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.contact-cont .inner .right .txt-wrap .list > li > p {flex: 1 1 85%; font-size: 1.25em;}

.ethics-con {}
.ethics-con .ethics-wrap {margin-top: 5em;}
.ethics-con .ethics-wrap .title {text-align: center;}
.ethics-con .ethics-wrap .title > h3 {font-size: 2.5em; font-weight: bold; color: #333; display: inline-block; position: relative;}
.ethics-con .ethics-wrap .title > h3:before {content:""; position:absolute; left:calc(100% - .25em); bottom:calc(100% - .25em); width:.875em; height:.875em; background:url(../images/inc/logoS.svg) no-repeat 50% 50%; background-size:contain; transform:rotate(25deg);}
.ethics-con .ethics-wrap .intro-txt {margin-top: 3em; text-align: center;}
.ethics-con .ethics-wrap .intro-txt > p {font-size: 1.25em; color: #333; line-height: 1.6em;}
.ethics-con .ethics-wrap .img-wrap {overflow: hidden; border-radius: 2em; margin-top: 5em;}
.ethics-con .list {margin-top: 5em;}
.ethics-con .list > li:not(:last-child) {margin-bottom: 3em;}
.ethics-con .list > li .tit-inner {display: flex; align-items: center; gap: .5em;}
.ethics-con .list > li .tit-inner .ticon {background: url(../images/sub/title_icon.svg) no-repeat; background-position: 50% 50%; background-size: contain; width: 1.75em; height: 1.75em; }
.ethics-con .list > li .tit-inner > p {padding-left: .25em; font-weight: 600;}
.ethics-con .list > li .txt-inner {margin-top: 1em; padding: 3em; background: #f8f8f8; counter-reset: Num 0;}
.ethics-con .list > li .txt-inner .st1 {font-size: 1.25em; position: relative; padding-left: .5em; margin-bottom: .5em; line-height: 1.5em;}
.ethics-con .list > li .txt-inner .st1:last-child {margin-bottom: 1em;}
.ethics-con .list > li .txt-inner .st1:before {content: ''; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: #8dc73f; transform: translateY(-50%);}

.ethics-con .list > li .txt-inner .st2 {font-size: 1.125em; padding: .125em 0; padding-left: 1.125em; color: #444; position: relative; padding-left: 1em; line-height: 1.5em; margin-left: 1em;}
.ethics-con .list > li .txt-inner .st2:before {content: counter(Num)'.'; counter-increment: Num; position: absolute; left: 0;}

.governance-con {}
.governance-con .ui-wrap {margin-top: 5em;}
.governance-con .ui-wrap .list {max-width: 80%; margin: auto;}
.governance-con .ui-wrap .list > li {margin-bottom: 3em; gap: 5em}
.governance-con .ui-wrap .list > li > div {border: 2px solid #8BC53F; display: flex; align-items: center; justify-content: center; width: 320px; border-radius: 50px; position: relative; box-shadow: 15px 15px 15px rgba(0,0,0,.1); }
.governance-con .ui-wrap .list > li > div > p {font-size: 1.5em; text-align: center; padding: 1.5em 0; font-weight: 600;}

.governance-con .ui-wrap .list > li .left {border: 1px solid #eee; }
.governance-con .ui-wrap .list > li .left > p {color: #555;}
.governance-con .ui-wrap .list > li .left:after {content: ''; position: absolute; width: 5em; height: 0; border: 1px dashed #ddd; left: 100%; top: calc(50% - 1px); z-index: -1;}


.governance-con .ui-wrap .list > li .right {background: #fff;}
.governance-con .ui-wrap .list > li .right > p {color: #006838;}
.governance-con .ui-wrap .list > li .right:before {content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 3px solid #fcb813;}
.governance-con .ui-wrap .list > li:not(:last-child) .right:after {content: ''; position: absolute; top: 100%; left: 50%; width: 3px; height: 5em; z-index: -1; background: #006838; opacity: .5;}


.governance-con .ui-wrap .list > li .right-more {transform: translateY(calc(50% + 1.5em)); background: #8BC53F;}
.governance-con .ui-wrap .list > li .right-more > p {color: #fff;}
.governance-con .ui-wrap .list > li .right-more:before {content: ''; position: absolute; top: calc(50% - 1.5px); right: 100%; width: calc(5em + 160px); height: 3px; background: #006838; z-index: -1; opacity: .5;}

.governance-bg {width: 100%; height: 500px; margin: 0 0 5em 0; transform: scale(1.1); transition: .35s;}
.governance-bg.aos-animate {transform: scale(1);}

/* .main_global .map_wrap .pos_point > li {display: none;} */
.main_global .map_wrap .pos_point > li.on {z-index: 111; display: block;}
.main_global .map_wrap .pos_point > li.on .brand-logo {display: block;}
/* .main_global .map_wrap .pos_point > li.on .marker {display: none;} */
.main_global .map_wrap .pos_point > li.on .tt {background: #ca0202; color: #fff; padding: .5em 1em; border-radius: 50px; box-sizing: border-box; margin-top: -1em; box-shadow: 0 5px 10px rgba(0,0,0,.2);}

.brand-logo {display: none; position: absolute; bottom: calc(100% + 1em); left: 50%; transform: translateX(-50%);}
.barnd_list.on > li .brand-logo {display: block;}
.brand-logo .logo-in {position: absolute; width: 6em; height: 6em; bottom: 100%; left: 50%; transform: translate(-50%, 0%);  padding: 1em; border-radius: 1em; background: #fff; border-radius: 10px; border: 1px solid #ca0202; display: flex; align-items: center; justify-content: center;}
.brand-logo .logo-in:before {content: ''; position: absolute; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); left: 50%; bottom: -5px; }
.brand-logo > img {}
.brand-logo .logo-in > img { object-fit: contain;}

.country_wrap .country > li + .map_wrap .pos_point > li {display: none;}
.country_wrap .country > li.on + .map_wrap .pos_point > li {display: block;}

.int-search-lay .board_search {margin-bottom: 0;}

.btn-info-wrap {position: absolute; top: 100%; left: 0; margin-top: 3em; opacity: 0.8;}