@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/fontawesome.min.css');
#articleInfo1 .topBar, #articleInfo1 .img:not(.ii, .third), #articleInfo1 .box, .infoTxt, .twoGrid, .featureBox{width:80%;margin: 0 auto;}
#articleInfo1 .tit .img{display:grid;grid-template-columns: repeat(3, 1fr);background: #a9bc9f;padding: 60px 70px;margin: 30px 0;border-radius: 40px;gap: 70px;}
#articleInfo1 .tit h2, #articleInfo1 .box h3{color: #603813;font-weight:bold;font-size: 24px;}
#articleInfo1 .tit span{color: #603813;font-weight:bold;font-size: 24px;vertical-align: baseline;position: relative;}
#articleInfo1 .tit span b, #articleInfo1 .box h3 b{color: #698659;font-weight:bold;font-size: 36px;margin: 0 3px 0;display: inline-block;vertical-align: baseline;}
#articleInfo1 .tit span:after{content:'';background: #eed2af;opacity: .5;width: 100%;height: 20px;position: absolute;border-radius: 5px;left: 0;z-index: -1;bottom: 0;}
#articleInfo1  h3{color: #84ad71;font-weight:bold;font-size: 30px;margin: 45px 0 0;}
#articleInfo1 img{width:100%;}
#articleInfo1 p{color: #603813;font-size: 22px;position: relative;z-index: 2;}

#articleInfo1 .box {margin: 70px auto;}
#articleInfo1 .box .info{display:grid;grid-template-columns: 45% 50%;justify-content: space-between;align-items: center;}
#articleInfo1 .box .info h5{color: #698659;font-weight:bold;font-size: 30px;vertical-align: baseline;line-height: 1;display: inline-block;background: rgb(238 210 175 / 50%);padding: 10px 20px 7px;border-radius: 15px;}
#articleInfo1 .box .info p{color: #603813;margin: 10px 0;font-size: 24px;}
#articleInfo1 .box .info p span{color:#603813;font-size: 32px;line-height:140%;background-color:#fbefd9;border-radius:50px;padding:0 10px;vertical-align: baseline;}
#articleInfo1 .box-gf{border: 7px var(--primary) solid;padding: 30px;border-radius: 40px;}
#articleInfo1 .box .third{display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;margin-top: 30px;}
#articleInfo1 .box h3{margin: 30px 0;position: relative;line-height: 1;}
#articleInfo1 .box h3:after{content:'';background: #eed2af;opacity: .5;width: 130px;height: 20px;position: absolute;border-radius: 5px;left: 125px;z-index: -1;bottom: 14px;}
#articleInfo1 .twobox{display:grid;grid-template-columns: 35% 60%;justify-content: space-around;margin: 30px 0;}
#articleInfo1 .info p{margin-bottom: 30px;}
#articleInfo1 .info ul{display:grid;grid-template-columns: repeat(4, 1fr);gap: 50px;}
#articleInfo1 .info li b{display:block;text-align: center;margin-top: 20px;color: #a48b78;font-size: 22px;}
#articleInfo1 .twobox.blue li b{color:#88b1bb}
#articleInfo1 .photo{display:grid;justify-content: space-around;margin: 80px 0;grid-template-columns: repeat(3, 1fr);gap: 70px;align-items: center;}
#articleInfo1 .infoTxt,#articleInfo1 .featureBox h2{position:relative;color:#603813;margin:25px auto;font-size: 24px;line-height:140%;padding:15px 0;}
#articleInfo1 .infoTxt span{color:#603813;font-size: 24px;line-height:140%;background-color:#fbefd9;border-radius:50px;padding:0 10px}
#articleInfo1 .twoGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:50px}
#articleInfo1 .featureBox ul{/* list-style-image:url(list-liz.png); */}
#articleInfo1 .featureBox li{color:#603813;font-size: 20px;line-height:120%;padding:15px 0;margin-left:40px;position: relative;}
#articleInfo1 .featureBox li:before{content:'';position:absolute;top: 10px;left: -30px;width:30px;height:34px;background-image:url(/images/44/list-liz.png);background-size:contain;background-repeat:no-repeat}
#articleInfo1 .featureBox li p{font-size: 24px;line-height:140%;background-color:#fbefd9;border-radius:50px;padding: 0 10px;margin-bottom: 10px;width:fit-content}

#reading{background:#e9efde;border-radius:30px;padding:50px;margin-top:50px}
#reading .readingTop{display:flex;align-items:flex-end;gap:50px;margin-bottom:20px}
#reading .readingTop h3{font-size:22px;color:#8c9b70}
#reading h2{font-size:24px;color:#8c9b70;margin-bottom:10px}
#reading .readLink{border-radius: 30px;border: 2px #8c9b70 solid;width: fit-content;padding: 10px;}
#reading .readLink a{padding: 10px 20px;font-size: 22px;font-weight: 600;color: #8c9b70;}
#reading .readLink:hover {background:#8c9b70}
#reading .readLink:hover a{;color:#fff}

@media screen and (max-width: 1024px){
    #articleInfo1 .topBar, #articleInfo1 .img:not(.ii, .third), #articleInfo1 .box, .infoTxt, .twoGrid, .featureBox{width: auto;margin: 30px auto;}
    #reading .readingTop{display: flex;flex-direction: column;align-items: center;}
}
@media screen and (max-width:768px){
    #articleInfo1 .twobox, #articleInfo1 .box .info{grid-template-columns:1fr;gap: 30px;}
    #articleInfo1 .tit .img{gap:20px;padding: 30px 40px;}
    #articleInfo1 .photo{gap:35px;}
    #articleInfo1 .twoGrid{grid-template-columns: repeat(1,1fr);}
}
@media screen and (max-width:640px){
    #articleInfo1 h3{font-size: 22px;}
    #articleInfo1 .featureBox li p{font-size: 18px;}
    #articleInfo1 .box .third{display: grid;gap: 15px;margin-top: 10px;}
    #articleInfo1 .box .info p,#articleInfo1 .box .info p span{font-size: 18px;margin: 0 0 10px;}
    #articleInfo1 .photo{gap: 15px;grid-template-columns: repeat(2, 1fr);}
    #articleInfo1 .box .info h5{font-size: 20px;}
    #articleInfo1 .box h3:after{width: 100px;left: 105px;bottom: 4px;}
    #articleInfo1 .tit .img{grid-template-columns:1fr}
    #articleInfo1 .tit span:before{content:'';background: #eed2af;opacity: .5;width: 130px;height: 20px;position: absolute;border-radius: 5px;left: 0px;z-index: -1;bottom: 0;}
    #articleInfo1 .tit span:first-child:before{width: 155px;left: -7px;}
    #articleInfo1 .tit span:first-child:after{display:none;}
    #articleInfo1 .tit span:after{display:none;}
    #articleInfo1 .tit h2, #articleInfo1 .box h3, #articleInfo1 .tit span{font-size: 18px;}
    #articleInfo1 .tit span b, #articleInfo1 .box h3 b{font-size: 30px;}
    #articleInfo1 .infoTxt,#articleInfo1 .featureBox h2, #articleInfo1 .infoTxt span,#articleInfo1 .featureBox li{font-size: 18px;}
    #articleInfo1 .box-gf{padding: 10px;border-radius: 30px;}
    #reading{padding: 20px;}
}