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

* {padding: 0; margin: 0; box-sizing: border-box; text-decoration: none; word-break: break-all;}
.webzineView .black {color: #333 !important;}
.webzineView .bold {font-weight: bold !important;}
.contenttext {position: relative; width: 100%; font-family: 'Noto Sans KR', sans-serif; word-break: break-all;}
.contenttext > h1 {width: 90%; padding: 50px 0; margin: 0 auto; line-height: 1.5; font-size: 25px; font-weight: bold;}
.contenttext > h1 > span {color: #406D8E;}
.contenttext > h5 {position: absolute; top: 4%; left: 47%; width: 200%; height: 36px; vertical-align: middle; font-size: 16px; font-weight: 400; color: #06416D; padding: 10px 0 0 20px; background-color:  rgba(255,213,51,0.9);}
.contenttext > .box1 {width: 90%; margin: 0 auto; display: flex; flex-direction: column;}
.contenttext > .box1 > .img {width: 100%;}
.contenttext > .box1 > .img > img {width: 224px; height: 224px;}
.contenttext > .box1 > .text {width: 100%; padding-top: 20px; padding-bottom: 30px;}
.contenttext > .box1 > .text > p {font-size: 18px; line-height: 1.5; font-weight: 400; padding: 10px 0;}

.contenttext > .box2 {width: 90%; margin: 0 auto; padding: 50px 0;}
.contenttext > .box2 > img {width: 100%;}
.contenttext > .box2 > h5 {color: #B9BABA; font-size: 16px; font-weight: 400; padding: 5px 0; text-align: center;}


.contenttext > .box3 {position: relative; width: 90%; margin: 0 auto; padding-top: 20px; display: flex; flex-direction: column;}
.contenttext > .box3 > .text > p {padding-bottom: 30px; line-height: 1.5; font-size: 18px; font-weight: 400;}
.contenttext > .box3 > .img {padding-top: 80px; padding-bottom: 30px;}
.contenttext > .box3 > .img > h5 {font-size: 16px; font-weight: 400; text-align: right; color: #B9BABA; padding: 8px 0;}
.contenttext > .box3 > .img > img {width: 100%;}
.contenttext > .box3 > .line {position: absolute; width: 100%; top: 64%; height: 1px; background-color: #406D8E; left: 50%;}

.contenttext > .box4 {width: 100%; padding: 50px 0;}
.contenttext > .box4 > .img {width: 90%;  margin: 0 auto; display: flex; flex-direction: column;}
.contenttext > .box4 > .img > h5 {font-size: 16px; font-weight: 400; color: #B9BABA;}
.contenttext > .box4 > .img > img {width: 100%; margin: 0 auto;
padding-bottom: 10px;}
.contenttext > .box4 > .text {width: 100%; padding: 40px; margin-top: 60px;  background-color: rgba(255,213,51,0.9);}
.contenttext > .box4 > .text > p {font-size: 18px; line-height: 1.5; font-weight: 400; margin-bottom: 30px;}
.contenttext > .box4 > .text > p:nth-child(3) {margin-bottom: 0;}

.contenttext > .box5 {width: 90%; margin: 0 auto; padding: 50px 0;}
.contenttext > .box5 > img {width: 100%;}
.contenttext > .box5 > h5 {color: #B9BABA; font-size: 16px; font-weight: 400; padding: 5px 0; text-align: center; line-height: 1.5;}

.contenttext > .box6 {width: 90%; margin: 0 auto; padding: 50px 0;}
.contenttext > .box6 > h5 {color: #555; font-size: 18px; font-weight: 400; line-height: 1.5;}
.contenttext > .box6 > div > a {color: #47DBD6;}


/* from */
.contenttext .from {width: 90%; margin: 0 auto;}
.contenttext .from > div {width: 60px; border: 1px solid #666; margin-top: 60px 0;}
.contenttext .from > .bottom {margin-top: 15px; margin-bottom: 60px;}
.contenttext .from > h5 {font-size: 16px; color: #666; padding-top: 10px; padding-bottom: 5px;}
.contenttext .from > a {color:#47DBD6; cursor: pointer; border-bottom: 1px solid #47DBD6;}

/* fromby */
.contenttext .fromby {width: 90%; margin: 0 auto;}
.contenttext .fromby > .top {width: 100%; border: 1px solid #CECECE;}
.contenttext .fromby > .formbyflex {display: flex; padding: 30px 0;}
.contenttext .fromby > .formbyflex > .img {display: none;}
.contenttext .fromby > .formbyflex > .text > h5 {margin-bottom: 15px; font-size: 20px; color: #666;}
.contenttext .fromby > .formbyflex > .text > h5 > span {color: #000;}
.contenttext .fromby p {padding: 20px 0; line-height: 1.65;}


@media all and (min-width:480px) {
	.contenttext > .box3 > .line {top: 55%;}
}

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

	.titleboxwrap {width: 100%; max-width: 900px; margin: 0 auto;}
	.titleboxwrap > h1 {padding-top: 100px;}
	.contenttext > h1 {width: 100%; max-width: 900px; padding: 100px 0; font-size: 35px;}
	.contenttext > h5 {top: 6.45%;}

	.contenttext > .box1 {width: 100%; max-width: 900px; margin: 0 auto; flex-direction: row;}
	.contenttext > .box2 {width: 100%; max-width: 900px; margin: 0 auto; flex-direction: row;}
	.contenttext > .box3 {width: 100%; max-width: 900px; margin: 0 auto; flex-direction: row;}
	.contenttext > .box4 {position: relative; width: 100%; max-width: 900px; margin: 0 auto; flex-direction: row;}
	.contenttext > .box5 {width: 100%; max-width: 900px; margin: 0 auto; flex-direction: row;}
	.contenttext > .box6 {width: 100%; max-width: 900px; margin: 0 auto; flex-direction: row;}

	.contenttext > .box1 > .img > img {width: 440px; height: 440px;}
	.contenttext > .box1 > .text {padding-left: 20px; padding-top: 30px;}
	.contenttext > .box1 > .text > p {padding-bottom: 30px; line-height: 1.5;}

	.contenttext > .box3 > .text {width: 50%;}
	.contenttext > .box3 > .img {width: 50%; padding-top: 20%; text-align: right;}
	.contenttext > .box3 > .img > img {width: 425px; height: 284px;}
	.contenttext > .box3 > .line {position: absolute; top: 10%; left: 60%; width: 100%; height: 1px; background-color: #406D8E;}


	.contenttext > .box4 > .img {width: 100%;}
	.contenttext > .box4 > .img > img {margin: 0;}
	.contenttext > .box4 > .img > .img1 {width: 440px; height: 330px;}
	.contenttext > .box4 > .img > .img2 {width: 440px; height: 294px;}
	.contenttext > .box4 > .text {position: absolute; top: 5%; left: 45%; width: 200%;}
	.contenttext > .box4 > .text > p {width: 500px; height: 120px;}

	/* from */
	.contenttext .from {width: 100%; max-width: 900px; margin: 0 auto;}

	/* fromby */
	.contenttext .fromby {width: 100%; max-width: 900px; margin: 0 auto;}
	.contenttext .fromby > .formbyflex > .img {display: block; width: 20%; text-align: center;}
}

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

}