/* section01 */
.sec01{width: 100%; height: 460px;}
.sec01>.sec01img{
    max-width: 100%;
    width: 100%; height: 100%; overflow: hidden; 
    background-image: url(/img/aboutwoodsair/aboutwoodsairSec01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.sec01Wrap{max-width: 1200px; margin: 0 auto;}
.sec01Wrap>h1{position: absolute; top: 400px; font-size: 80px; font-weight: 900;}

/* section02 */
.sec02{ box-sizing: border-box; overflow: hidden; max-width: 1200px;  margin-top: 236px;}
.sec02>ul{float: right;}
.sec02 ul>li:first-child{font-size: 24px; font-weight: 700; margin-bottom: 18px;}
.sec02 ul>li:nth-child(2){font-size: 18px; font-weight: 500;}

/* section03 */
.sec03{position: relative; width: 100%; height: 500px; margin-top: 280px; display: flex; justify-content: center; align-items: center;}
.sec03::before{display: block; content: ''; inset: 0; position: absolute;background: url(/img/aboutwoodsair/green-forest.jpg) no-repeat center/cover; filter: opacity(80%);}
/* .sec03img{ width: 100%; height: 100%; background-image: url(/img/aboutwoodsair/green-forest.jpg);
    filter: opacity(80%); background-repeat: no-repeat; background-size: cover; background-position: center center;} */
/* .sec03>.sec03subtitle{position: absolute; top: 201px; left: 50%; margin-left: -344.6px;} */
/* .sec03>.sec03subtitle{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} */

.sec03subtitle h1{color: #fff; font-size: 50px; font-weight: 900; margin-bottom: 10px; text-align: center;}
.sec03subtitle p{color: #fff; font-size: 20px; font-weight: 500; text-align: center;}

/* section04 */
.sec04{max-width: 1220px; margin-top: 133px;}
.sec04 h3{font-size: 24px; font-weight: 900; margin-bottom: 33px; text-align: center;}

.ci{text-align: center; margin-bottom: 130px;}
.ci p{font-size: 18px;}
.ci p .formo{display: none;}

.colorWrap{width: 100%; display: flex; margin-bottom: 130px;}
.colorWrap>li{width: 33.333%; position: relative; text-align: center;}
.colorWrap>li>.colorBox{width: 100%; height: 100px; margin-bottom: 30px;}
.color1{background-color: #246835;}
.color2{background-color: #6C4921;}
.color3{background-color: #fff; border: 1px solid #000;}

.colorWrap>li span{position: absolute; top: 70px; left: 50%; margin-left: -64px; color: #fff;}
.colorWrap>li:nth-child(3) span{color: #000;}

.logobox{width: 100%; display: flex; justify-content: space-between;}
.logobox li{width: 100%;}
.logobox li img{width: 100%;}

/* section05 */
.sec05{width: 100%; margin-top: 220px; position: relative;}
.sec05>.background{z-index: 0; width: 100%; height: 1015px; background-color: #333; overflow: hidden; pointer-events: none; position: relative;}

.background>li{border-radius: 50%; border: 1px solid #666; position: absolute; top: 50%; left: 50%;}

.cirl:nth-child(1){width: 477px; height: 477px; margin-top: -238.5px; margin-left: -238.5px;}
.cirl:nth-child(2){width: 960px; height: 960px; margin-top: -480px; margin-left: -480px;}
.cirl:nth-child(3){width: 1375px; height: 1375px; margin-top: -687.5px; margin-left: -687.5px;}

.sec5TextWrap{position: absolute; z-index: 10; top: 0; width: 100%; height: 100%; text-align: center;}
.sec5TextWrap>h1{color: #fff; margin-top: 220px; margin-bottom: 160px;} 
.innertextWrap{display: flex; justify-content: space-between; align-items: center; max-width: 1133px; margin: 0 auto;}
.innertextWrap li{display: flex; flex-direction: column; align-items: center;}
.innercir{width: 170px; height: 170px; border-radius: 50%; border: 1px solid #fff;display: flex; justify-content: center; align-items: center;}
.innercir span{color: #fff; font-size: 18px;}
.innertextWrap li p{margin-top: 50px; color: #fff; font-size: 15px;}




/* section06 */
.sec06{background-color: #F6F6F6;}
.sec06Wrap{max-width: 1200px; margin: 0 auto; padding-top: 230px; padding-bottom: 120px; position: relative;}

.sec06Wrap>.linkBox{position: absolute; right: 0; top: -100px;  cursor: pointer;}

#history{ display: flex; justify-content: space-between; position: relative;}

#history ul.y2023::before{content: '·2023'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}
#history ul.y2022::before{content: '·2022'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}
#history ul.y2021::before{content: '·2021'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}
#history ul.y2020::before{content: '·2020'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}
#history ul.y2019::before{content: '·2019'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}
#history ul.y2018::before{content: '·2018'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}
#history ul.y2017::before{content: '·2017'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}
#history ul.y2016::before{content: '·2016'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}
#history ul.y2015::before{content: '·2015'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}
#history ul.y2010::before{content: '·2010'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}
#history ul.y2002::before{content: '·2002'; position: absolute; left: 38%; font-size: 24px; font-weight: 900;}

.year li{font-size: 15px; padding-bottom: 10px;}
.year{padding-bottom: 30px;}

#fromCEO{font-size: 18px; position: relative; padding: 100px 0;}
#fromCEO .letter_txt {font-size: 15px;}
#fromCEO>.linkBox{display: none;}

.bgtri{ position: absolute; top: 0; left: 0; overflow: hidden;} 
.bgtri li svg{ width: 100%; filter: opacity(50%);}



/* section07 */
.sec07_graybox{width: 100%; background-color: #F0F0F0; height: 450px;}

.sec07Wrap{max-width: 1200px; margin: 0 auto; position: relative;}
.sec07Wrap>.linkBox{position: absolute; top: -100px; right: 0;}

.sec07Wrap>h1 .formo{display: none;}

.sec07Wrap>h1{font-size: 80px; position: absolute; top: -65px; left: 0;}

.sec07Wrap{padding: 223px 0 100px 0;}


.sec07Wrap .item {cursor: pointer; font-size: 20px; font-weight: 700; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #000;}
.sec07Wrap .item_add {display: none; margin-bottom: 60px;}
.sec07Wrap .item_add p {margin-bottom: 10px; font-size: 15px;}
.sec07Wrap .item_add p:is(:first-of-type, .title) {font-size: 16px; margin-bottom: 15px; font-weight: 600;}
.sec07Wrap .item_add p.title {margin-top: 20px;}

/* mobile size */

@media screen and (max-width:1024px) {
    
    /* section01 */
    .sec01{width: 100%; height: 328px;}
    .sec01Wrap{padding: 0 15px;}
    .sec01Wrap>h1{top: 290px; font-size: 45px;}

    /* section02 */
    .sec02{margin-top: 67px; padding: 0 15px;}
    .sec02 ul>li:first-child{font-size: 18px; font-weight: 700; margin-bottom: 20px;}
    .sec02 ul>li:nth-child(2){font-size: 15px; font-weight: 500;}
    
    /* section03 */
    .sec03{width: 100%; height: 277px; margin-top: 60px;}
    .sec03>.sec03subtitle{position: absolute; top: 110px; left: 50%; margin-left: -173px;}
    .sec03subtitle h1{color: #fff; font-size: 30px; font-weight: 900; margin-bottom: 0px;}
    .sec03subtitle p{color: #fff; font-size: 15px; font-weight: 500;}

    /* section04 */
    .sec04{width: 100%; margin-top: 60px;}
    .sec04 h3{font-size: 20px; font-weight: 900; margin-bottom: 30px; text-align: center;}

    .ci{text-align: center; margin-bottom: 80px;}
    .ci p{font-size: 15px;}
    .ci p .formo{display: block;}

    .colorWrap{width: 100%; display: flex; flex-direction: column; margin-bottom: 130px; padding: 0 15px; box-sizing: border-box;}
    .colorWrap>li{width: 100%; position: relative; text-align: center; margin-bottom: 20px;}
    .colorWrap>li>.colorBox{width: 100%; height: 70px; margin-bottom: 20px;}
    .color1{background-color: #246835;}
    .color2{background-color: #6C4921;}
    .color3{background-color: #fff; border: 1px solid #000;}

    .colorWrap>li span{position: absolute; top: 43px; left: 50%; margin-left: -64px; color: #fff;}
    .colorWrap>li:nth-child(3) span{color: #000;}

    .logobox{padding: 0 15px; box-sizing: border-box; width: 100%; display: flex; flex-direction: column;}
    .logobox img{width: 100%;}
    .logobox li{margin-bottom: 30px;}
    
    /* section05 */
    .sec05{width: 100%; margin-top: 50px; position: relative;}
    .sec05>.background{z-index: 0; width: 100%; height: 972px; background-color: #333; overflow: hidden; pointer-events: none; position: relative;}

    .background>li{border-radius: 50%; border: 1px solid #666; position: absolute; top: 50%; left: 50%;}

    .cirl:nth-child(1){width: 477px; height: 477px; margin-top: -238.5px; margin-left: -238.5px;}
    .cirl:nth-child(2){width: 960px; height: 960px; margin-top: -480px; margin-left: -480px;}
    .cirl:nth-child(3){width: 1375px; height: 1375px; margin-top: -687.5px; margin-left: -687.5px;}

    .sec5TextWrap{position: absolute; z-index: 10; top: 0; width: 100%; height: 100%; text-align: center;}
    .sec5TextWrap>h1{color: #fff; margin-top: 80px; margin-bottom: 60px;} 
    .innertextWrap{display: flex; flex-direction: column; align-items: center; }
    .innertextWrap li{padding:10px; display: flex; flex-direction: column; align-items: center;}
    .innercir{width: 125px; height: 125px; border-radius: 50%; border: 1px solid #fff;display: flex; justify-content: center; align-items: center;}
    .innercir span{color: #fff; font-size: 15px;}
    .innertextWrap li p{margin-top: 10px; color: #fff; font-size: 13px;}


    /* section06 */
    .sec06{background-color: #F6F6F6;}
    .sec06Wrap{padding: 50px 15px; position: relative;}

    .sec06Wrap>.linkBox{display: none;}
    #history h1{text-align: center; margin-bottom: 50px;}

    /* hide Class */
    .hideActive{display: none;}

    #history{ display: flex; flex-direction: column; position: relative;}

    #history ul.y2023::before{content: '·2023'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}
    #history ul.y2022::before{content: '·2022'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}
    #history ul.y2021::before{content: '·2021'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}
    #history ul.y2020::before{content: '·2020'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}
    #history ul.y2019::before{content: '·2019'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}
    #history ul.y2018::before{content: '·2018'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}
    #history ul.y2017::before{content: '·2017'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}
    #history ul.y2016::before{content: '·2016'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}
    #history ul.y2015::before{content: '·2015'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}
    #history ul.y2010::before{content: '·2010'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}
    #history ul.y2002::before{content: '·2002'; position: absolute; left: 0px; font-size: 24px; font-weight: 900;}

    .year li{font-size: 13px; padding-bottom: 10px; margin-left: 115px;}
    .year{padding-bottom: 10px;}

    #fromCEO{font-size: 13px; position: relative; padding: 170px 0 50px 0; display: block;}
    #fromCEO .linkBox{display: block; position: absolute; top: 0; right: 0; letter-spacing: -1px;}
    .bgtri{ position: absolute; top: 0; left: 0; overflow: hidden;} 
    .bgtri li svg{ width: 100%; filter: opacity(50%);}
    
    .hideActive{display: block;}

    /* section07 */
    .sec07_graybox{width: 100%; background-color: #F0F0F0; height: 277px;}

    .sec07Wrap>h1 .formo{display: block;}
    .sec07Wrap{padding: 0 15px; position: relative;}
    .sec07Wrap>.linkBox{position: absolute; top: -60px; right: 15px;}

    .sec07Wrap>h1{font-size: 45px; position: absolute; top: -65px; left: 15px;}

    .sec07Wrap{padding: 172px 15px 100px 15px;}

    /* .sec07Wrap .item_add {margin-bottom: 60px;}
    .sec07Wrap .item {font-size: 18px; font-weight: 700; margin-bottom: 15px;}
    .country>.line{margin-bottom: 20px; color: #000;}

    .country>h5{font-size: 15px; margin-bottom: 32px;  font-weight: 500;}
    .country li{margin-bottom: 5px; font-size: 15px;} */

    .sec07Wrap .item {font-size: 17px; font-weight: 700; padding-bottom: 20px;}
    .sec07Wrap .item_add p {margin-bottom: 10px; font-size: 14px;}
    .sec07Wrap .item_add p:is(:first-of-type, .title) {font-size: 14px;}
}