@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* {padding: 0; margin: 0; list-style: none;}


.greenMagazine2 {width: 100%; margin: 30px 0; font-family: 'Noto Sans KR';}
.greenMagazine2 .greenMagazine2_wrap {width: 100%; max-width: 940px; margin: 150px auto;}

/* box1 */
.greenMagazine2_wrap .box1 {text-align: center;}
.greenMagazine2_wrap .box1 > h1 {color: #003199; font-weight: 300; font-size: 28px;}
.greenMagazine2_wrap .box1 > h2 {color: #003199; font-weight: 300; font-size: 26px; padding: 20px 0;}
.greenMagazine2_wrap .box1 > h3 { background-color: #003199; color: #fff; font-weight: 400; font-size: 18px; line-height: 2.5; width: 100%; max-width: 200px; height: 48px; margin: 15px auto;  }

/* box2 */
.greenMagazine2_wrap .box2 {text-align: center; position: relative;}
.greenMagazine2_wrap .box2 > img {width: 100%; margin-top: 20px;}
.greenMagazine2_wrap .box2 > div {position: absolute; top: 95%; left: 31%; color: #fff;}

/* box3 */
.greenMagazine2_wrap .box3 {text-align: center; background-color: #0657AD; width: 100%; height: auto; margin-top: -6px;}
.greenMagazine2_wrap .box3 > div {width: 90%; margin: 0 auto; color: #fff;}
.greenMagazine2_wrap .box3 > div > p {font-size: 18px; line-height: 2; font-weight: 300;}
.greenMagazine2_wrap .box3 > div > h5 {font-size: 16px; padding-top: 40px; padding-bottom: 20px; font-weight: 300; width: 75%; margin: 0 auto; line-height: 1.5;} 
.greenMagazine2_wrap .box3 > div > h5 > span {font-weight: 500;}
.greenMagazine2_wrap .box3 .box3img {margin-bottom: 30px;}

/* box4 */
.greenMagazine2_wrap .box4 {padding-top: 50px;}
.greenMagazine2_wrap .box4 > div {width: 100%; text-align: center;}
.greenMagazine2_wrap .box4 > div > img {width: 90%; object-fit: contain;}

/* box5 */
.greenMagazine2_wrap .box5 > div > img {display: none;}

.greenMagazine2_wrap .box5 {width: 100%;}
.greenMagazine2_wrap .box5 > .textbox {line-height: 1.5;}
.greenMagazine2_wrap .box5 > .textbox > .text1 {margin-left: 6%; line-height: 2;}
.greenMagazine2_wrap .box5 > .textbox > .text1 > h5 {width: 12%; text-align: left;}
.greenMagazine2_wrap .box5 > .textbox > .text1 > h5 > span {font-size: 20px; font-weight: 500; color: #00BAFF; background-color: #003199; text-align: center; border-radius: 10px; padding: 5px 10px; } 
.greenMagazine2_wrap .box5 > .textbox > .text1 > p {font-size: 20px; color: #00BAFF;}

.greenMagazine2_wrap .box5 > .textbox > .text2 {width: 88%; margin: 20px auto; line-height: 2;}
.greenMagazine2_wrap .box5 > .textbox > .text2 > h5 {width: 12%; text-align: left;}
.greenMagazine2_wrap .box5 > .textbox > .text2 > h5 > span {font-size: 20px; font-weight: 500; color: #00BAFF; background-color: #003199; text-align: center; border-radius: 10px; padding: 5px 10px; } 
.greenMagazine2_wrap .box5 > .textbox > .text2 > p {font-size: 20px; color: #00BAFF;}

.greenMagazine2_wrap .box5 > .textbox > .text3 {width: 88%; margin: 20px auto; line-height: 2;}
.greenMagazine2_wrap .box5 > .textbox > .text3 > h5 {width: 15%; text-align: left;}
.greenMagazine2_wrap .box5 > .textbox > .text3 > h5 > span {font-size: 20px; font-weight: 500; color: #00BAFF; background-color: #003199; text-align: center; border-radius: 10px; padding: 5px 10px; } 
.greenMagazine2_wrap .box5 > .textbox > .text3 > p {font-size: 20px; color: #00BAFF;}

/* box6 */
.greenMagazine2_wrap .box6 {width: 90%; margin: 0 auto;}
.greenMagazine2_wrap .box6 > h5 {font-size: 20px; font-weight: 400; width: 130px; text-align: center; line-height: 2; height: 40px; background-color: #003199; border-radius: 10px; color:#00BAFF;}

/* box7 */
.greenMagazine2_wrap .box7 {width: 90%; padding-top: 20px; margin: 0 auto; text-align: center;}
.greenMagazine2_wrap .box7 > div {width: 100%; padding-bottom: 10px;}
.greenMagazine2_wrap .box7 > div > img {width: 100%; object-fit: contain;}

/* box8 */
.greenMagazine2_wrap .box8 {width: 90%; margin: 0 auto; text-align: center;}
.greenMagazine2_wrap .box8 > div {width: 100%; padding-bottom: 10px;}
.greenMagazine2_wrap .box8 > div > img {width: 100%; object-fit: contain;}

/* box9 */
.greenMagazine2_wrap .box9 {width: 90%; margin: 70px auto; padding: 50px 30px; background-color: #003199; color: #00BAFF;border-radius: 15px;}
.greenMagazine2_wrap .box9 > h3 {text-align: center; font-size: 25px; padding-bottom: 10px;}
.greenMagazine2_wrap .box9 > div > p {font-size: 20px; line-height: 1.5;}
.greenMagazine2_wrap .box9 > .line {width: 100px; height: 1px; background-color: #00BAFF; margin: 0 auto; margin-bottom: 30px;}




/* --------------480---------------- */
@media all and (min-width: 480px){
.greenMagazine2_wrap .box4 {display: block;}
.greenMagazine2_wrap .box4 > div > img {width: auto; object-fit: contain;}
.greenMagazine2_wrap .box5 {width: 75%; margin: 0 auto;}
.greenMagazine2_wrap .box6 > h5 {margin: 0 auto;}
} 


/* --------------768---------------- */
@media all and (min-width: 768px){

.greenMagazine2_wrap .box1 > h1 {font-size: 41px;}
.greenMagazine2_wrap .box1 > h2 {font-size: 45px;}
.greenMagazine2_wrap .box1 > h3 { background-color: #003199; color: #fff; font-weight: 400; font-size: 45px; line-height: 2.15; width: 100%; max-width: 500px; height: 99px; margin: 35px auto;  }

.greenMagazine2_wrap .box2 > div {position: absolute; top: 95%; left: 62%; color: #fff;}

.greenMagazine2_wrap .box3 > div > p {font-size: 20px;}
.greenMagazine2_wrap .box3 > div > h5 {font-size: 20px; width: 100%; padding-top: 30px;}

.greenMagazine2_wrap .box4 {display: none;}

.greenMagazine2_wrap .box5 {width: 95%; padding-top: 50px; position: relative;}
.greenMagazine2_wrap .box5 > div > img {display: block; width: 98%; margin: 0 auto;}
.greenMagazine2_wrap .box5 > .textbox {position: absolute; top: 22%; left: 23%;}
.greenMagazine2_wrap .box5 > .textbox > .text1 {display: flex;}
.greenMagazine2_wrap .box5 > .textbox > .text2 {display: flex;}
.greenMagazine2_wrap .box5 > .textbox > .text3 {display: flex;}

.greenMagazine2_wrap .box6 {width: 18%; text-align: center; margin: 0 auto;}
.greenMagazine2_wrap .box6 > h5 {width: 160px; height: 55px; font-size: 25px; margin-bottom: 35px; margin-top: -2px;}

.greenMagazine2_wrap .box7 > div > img {width: 100%; max-width: 677px;}

.greenMagazine2_wrap .box8 {display: flex; width: 95%;}
.greenMagazine2_wrap .box8 > div {padding: 5px;}

.greenMagazine2_wrap .box9 {width: 95%;}


}


/* --------------1080---------------- */
@media all and (min-width: 1080px){

}