@charset "utf-8";
.main {padding: 70px 0 70px;}
.dFlex {display: flex; flex-wrap: wrap; justify-content: space-between;}
/* Business */
.mv-bg{background: url("../img/business/mv.jpg") no-repeat center center/cover;}

.business-nav{display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 70px;}
/*.space__top{padding-top: 70px;}*/
.business-nav li{width: 23.4%; border: 1px solid #1F9042; height: 60px;display: flex; justify-content: center; align-items: center; position: relative; line-height: 1.3; font-size: 1.4rem; font-weight: bold; text-align: center; cursor: pointer; color: #1F9042;background: #fff;}
.business-nav li:hover{background: #1F9042; color: #fff;}
.business-nav li.is-active{background: #1F9042; color: #fff;}
.business-nav li a {height: 60px; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; line-height: 1.3; font-size: 1.4rem; font-weight: bold; color: #1F9042;}
.business-nav li a:hover {color: #fff;}
.business-nav li:hover:after,
.business-nav li.is-active:after{content: '';  width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 7px solid #1F9042; position: absolute; bottom: -7px; left: 50%; margin-left: -9px; color: #fff;}
.business-nav li.is-active:after{border-top:7px solid #1F9042;}
.tab-box .business-nav li:hover:after,
.tab-box .business-nav li.is-active:after{display: none;}
/* .subnav li.is-active,.business-nav li.is-active{pointer-events: none;} */

.subnav li {color: #1F9042;background: #fff;}
.subnav li:hover {color: #fff;background: #1F9042;}
.subnav li{width: 32%}

.business-main{max-width: 1400px; position: relative; z-index: 1; color: #fff; margin-bottom: 70px;}
.business-main:before{content: ''; position: absolute; top: 9%; bottom: 9%; left: 0; width: 50%; background: linear-gradient(to right, #3c7c57, #4ca669); z-index: -1;}
.business-main_img{padding-left: 38.2%;}
.business-main_inner{position: absolute; top: 50%; left: 12%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.business-main h3{text-align: left; margin: 0 0 10px; line-height: 1.4; letter-spacing: 0.1em; text-shadow: 0px 0px 6px rgba(0,0,0,.8);}
.business-main .f-en{font-size: 2rem; line-height: 1.5;}

.title__esg{ font-size: 32px !important; text-align: center; padding-bottom: 30px; border-bottom: 1px solid #1F9042; margin-bottom: 30px;}

.box {margin-bottom: 6rem;}
.box p {line-height: 2;}
.box .space{margin-bottom: 1em;}
.box .boxTit {background: rgba(31, 144, 66, 0.1); padding: 0.5rem 1.5rem; font-size: 2.2rem; font-weight: 600; margin-bottom: 3rem;}
.box .boxTit .num {font-size: 2.8rem; color: #1F9042; font-family: "Josefin Sans", sans-serif; margin-right: 10px;}
.box .boxTxt {display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 1.4rem;}
.box .boxTxt .col1 {width: 15%;}
.box .boxTxt .col1.col1-big {width: 17.5%;}

.box .boxTxt .col2 {width: 80%;}
.box .hide {margin: 5rem auto 0; display: none;}

.btnMore {font-family: "Josefin Sans", sans-serif; font-size: 1.4rem; position: relative; display: block;background: #1F9042;color: #fff; border: 1px solid #000; max-width: 300px; width: 100%; margin: 2rem auto 0; text-align: center; padding: 1.2rem 1rem 0.8rem; cursor: pointer;}
.btnMore:before { position: absolute; right: 20px; top: 50%; width: 15px; height: 1px; background: #fff; content: ''; display: block; transform: translateY(-50%);}
.btnMore:after { position: absolute; right: 20px; top: 50%; width: 15px; height: 1px; background: #fff; content: ''; opacity: 1; transform: rotate(90deg); display: block; transition: transform .3s ease, opacity 0.3s ease;}
.btnMore.active:after {opacity: 0; transform: translateY(-50%);}
.btnMore:hover {color: #1F9042; background: #fff;}
.btnMore:hover:before {background: #1F9042;}
.btnMore:hover:after {background: #1F9042;}

.box h4 { font-size: 2rem; border-left: 3px solid #1F9042; margin-bottom: 2rem; line-height: 1; padding: 0 0 0 1.5rem;}
.box h5 {font-size: 1.8rem; color: #1F9042; margin-bottom: 1rem; line-height: 1; padding: 0.5rem 0;}
.box .txtBorder {border: 1px solid #1F9042; padding: 2rem; margin-bottom: 2rem;}
.box .grey {background: #F0F0F0; padding: 2rem; margin-top: 2rem;}
.box .row {font-size: 1.4rem; margin-bottom: 5rem;}

.tab-box{margin-bottom: 70px;}

#tab1 #evaluation .box1 .row2 .grey ul {display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem;}
#tab1 #evaluation .box1 .row2 .grey ul li {width: 48%;}
#tab1 #evaluation .box1 .row2 .grey ul li span {color: #1F9042;}
/* #tab1 #evaluation .box1 .row2 .txtBorder1 .col1 {width: 74%;}
#tab1 #evaluation .box1 .row2 .txtBorder1 .col2 {width: 24%;} */
#tab1 #evaluation .box1 .row2 .txtBorder2 .col1 {width: 100%;}
#tab1 #evaluation .box1 .row2 .txtBorder2 .col2 {width:40%;margin: 2rem 0 0;}
#tab1 #evaluation .box2 .boxTxt p {margin-bottom: 2rem;}
#tab1 #evaluation .box2 .row2 .txtBorder2 p:nth-of-type(1) {margin-bottom: 1rem;}
#tab1 #evaluation .box3 > .txtBorder {margin: 4rem auto 4rem;}
#tab1 #evaluation .box3 > .txtBorder ol {list-style-type: decimal; list-style-position: inside; line-height: 2;}
#tab1 #evaluation .box3 > .txtBorder ol li::marker {color: #1F9042; font-family: "Josefin Sans", sans-serif;}
#tab1 #evaluation .box3 > .txtBorder ol li span {color: #02aeed}
#tab1 #evaluation .box3 .row2 .txtBorder .dFlex {margin-top: 2rem;}
#tab1 #evaluation .box3 .row2 .txtBorder .col1 {width: 40%;}
#tab1 #evaluation .box3 .row2 .txtBorder .col2 {width: 50%;}

#tab1 #building .box1 .row2 .txtBorder .col1 {width: 72%;}
#tab1 #building .box1 .row2 .txtBorder .col2 {width: 26%;}
#tab1 #building .box2 .row2 .txtBorder .col1 {width: 52%;}
#tab1 #building .box2 .row2 .txtBorder .col2 {width: 46%;}
#tab1 #building .box3 .row3 img {display: block; max-width: 640px; width: 100%; margin: 0 auto;}

#tab1 #information figcaption {text-align: center; font-size: 1rem; margin-top: 0.5rem;}
#tab1 #information .box1 .row2 .txtBorder2 li:first-child {width: 71.09826589595376%;}
#tab1 #information .box1 .row2 .txtBorder2 li:last-child {width: 24.47013487475915%;}
#tab1 #information .box1 .row2 .txtBorder3 li:nth-child(1) {width: 30%;}
#tab1 #information .box1 .row2 .txtBorder3 li:nth-child(2) {width: 15%;}
#tab1 #information .box1 .row2 .txtBorder3 li:nth-child(3) {width: 17%;}
#tab1 #information .box1 .row2 .txtBorder3 li:nth-child(4) {width: 33%;}
#tab1 #information .box1 .row2 .txtBorder4 li:nth-child(1) {width: 35%;}
#tab1 #information .box1 .row2 .txtBorder4 li:nth-child(2) {width: 31%;}
#tab1 #information .box1 .row2 .txtBorder4 li:nth-child(3) {width: 29%;}
#tab1 #information .box2 .row2 .txtBorder1 ul {margin-bottom: 2rem;}
#tab1 #information .box2 .row2 .txtBorder1 li:first-child {width: 100%;}
#tab1 #information .box2 .row2 .txtBorder1 li:last-child {width: 47%;margin: 20px auto 0;}

#tab1 #information .box3 .row2 .txtBorder1 li{width: 48%;}





#tab1 #assessment .box1 .boxTxt .cap {margin-top: 2rem;}
#tab1 #assessment .box1 .row1 ul {margin-top: 2rem;}
#tab1 #assessment .box1 .row1 ul li {margin-bottom: 2rem;}
#tab1 #assessment .box1 .row2 ul {margin-top: 1rem;}
#tab1 #assessment .box1 .row2 ul li { margin-bottom:0.5rem; position: relative; padding-left: 1em;}
#tab1 #assessment .box1 .row2 ul li span {color: #1F9042; position: absolute; top: 0; left: 0;}

#tab2 .box1 .row2 .txtBorder h6 {font-size: 1.6rem;}
#tab2 .box1 .row2 .txtBorder ul li {margin-bottom: 2rem; position: relative; padding-left: 2rem;}
#tab2 .box1 .row2 .txtBorder ul li::before {content: '●';  position: absolute; top: 4px; left: 0; color: #1F9042; font-size: 1.2rem;}
#tab2 .box1 .row2 .txtBorder ul li p:nth-child(1) {font-weight: bold;}
#tab2 .box1 .row2 .txtBorder2 ul li p:nth-child(1) {font-weight: normal;}

#tab3 .box1 .row2 .txtBorder2 .col1 {width: 100%;}
#tab3 .box1 .row2 .txtBorder2 .col2 {width: 14%;}
/*#tab3 .box3 .hide {margin-top: 0;}*/
#tab3 .box3 .hide .boxTxt {margin-bottom: 6rem;}
#tab3 .box3 .hide .boxTxt .cap {margin-top: 1rem;}
#tab3 .box3 .row1 > p:nth-of-type(1) {margin-bottom: 2rem;}
#tab3 .box3 .row1 ul li {margin-bottom: 2rem;}
#tab3 .box3 .row2 .txtBorder3 h6 {font-size: 1.6rem; margin-bottom: 1rem;}
#tab3 .box3 .row2 .txtBorder3 ul li {margin-bottom: 1rem; position: relative; padding-left: 1em;}
#tab3 .box3 .row2 .txtBorder3 ul li span {color: #1F9042; position: absolute; top: 0; left: 0;}


.tab {display: none;}
#tab1 {display: block;}

/* MEDIA */
@media (max-width: 1023px){
    
    .business-main_inner{left: 4%;}
    
    .business-box_img{width: 100%; text-align: center;}
    .business-box_inner{width: 100%; order: -1; margin: 0 0 30px;}
}

@media (max-width: 767px){
    .main {padding: 50px 0 40px;}
    
    .m-tit3 br {display: none;}
    .business-main .f-en br {display: none;}


    .business-nav{margin-bottom: 50px;}
    .business-nav li{width: 100%;}
    .business-nav li:nth-of-type(1),
    .business-nav li:nth-of-type(2),
    .business-nav li:nth-of-type(3){margin-bottom: 15px;}
    
    .subnav li{width: 100%; font-size: 1.4rem !important;}
    .subnav li:last-of-type{margin-bottom: 0;}
    
    .business-main{width: 100%; margin-bottom: 50px;}
    .business-main:before{display: none;}
    .business-main_img{padding: 0;}
    .business-main_inner{position: static; transform: translateY(0); -webkit-transform: translateY(0); background: linear-gradient(to right, #3c7c57, #4ca669); padding: 20px 0 20px 20px;}
    .business-main .f-en{font-size: 1.6rem;}
    .title__esg {font-size: 24px !important;}


    .box .boxTit {position: relative; padding-left: 5.5rem; font-size: 2rem;}
    .box .boxTit .num {position: absolute; top: 3px; left: 1rem;}
    .box .boxTxt .col1 {width: 100% !important; margin-bottom: 20px; text-align: center;}
    .box .boxTxt .col2 {width: 100% !important;}
    .box .row .col1 {width: 100% !important; margin-bottom: 20px;}
    .box .row .col2 {width: 100% !important; text-align: center;}
    .box .hide {margin: 4rem auto 0;}
    .box .row {margin-bottom: 4rem;}
    .box h5 {line-height: 2;}

    #tab1 #evaluation .box1 .row2 .grey ul li {width: 100%;}    
    #tab1 #information .box1 .row2 .txtBorder3 li {width: 100% !important; margin-bottom: 20px; text-align: center;}
    #tab1 #information .box1 .row2 .txtBorder3 li:nth-of-type(1) {text-align: left;}
    #tab1 #information .box1 .row2 .txtBorder4 li {width: 100% !important; margin-bottom: 20px; text-align: center;}
    #tab1 #information .box1 .row2 .txtBorder4 li:nth-of-type(1) {text-align: left;}
    #tab1 #information .box2 .row2 .txtBorder1 li {width: 100% !important; margin-bottom: 20px; text-align: center;}
    #tab1 #information .box2 .row2 .txtBorder1 li:nth-of-type(1) {text-align: left;}
    #tab1 #information .box3 .row2 .txtBorder1 li{width: 100%;margin: 0 0 20px;}
    #tab1 #information .box1 .row2 .txtBorder2 li:first-child {width: 100%;text-align: center;}
#tab1 #information .box1 .row2 .txtBorder2 li:last-child {width: 100%;margin-top: 20px;text-align: center;}
}

@media (max-width: 480px){
    .business-nav li{font-size: 3vw;}
}
     #tab1 #information .box3 .row2 .txtBorder2 li{text-indent: -1em;margin-left: 1em;}
     .row-mrt{margin: 6rem 0 0;}
     @media (max-width: 767px){
        .row-mrt{margin: 4rem 0 0;}
     }
     .flex-end{align-items: flex-end;}
     .building-img{margin: 40px auto 0;text-align: center;}