@charset "utf-8";
/* CSS Document */
#discussion-wrap > .head-wrap{width:calc(100% - 60px); max-width:1280px; margin: 0 auto; padding:8.75rem 0; background: url("/image/iclass/m4_background.png") top  no-repeat;}
#discussion-wrap > .head-wrap .txt-wrap > h1{text-align: center; font-size:2.8125rem; font-weight: 600; color:#31323B;}
#discussion-wrap > .head-wrap .txt-wrap > p{font-size:1.5rem; text-align: center;}
#discussion-wrap > .stick{width:50px; height: 5px; background-color: #000; margin:0 auto;}
#discussion-wrap > .section-type1{ padding:8.75rem 0;}
#discussion-wrap > .section-type1 > .inner-wrap{width:calc(100% - 60px); max-width:1280px; margin:0 auto; display:flex; justify-content: space-between; flex-wrap: wrap;}
#discussion-wrap > .section-type1 .txt-wrap{width:calc(70% - 20px); max-width:703px;}
#discussion-wrap > .section-type1 .txt-wrap > h1{font-size:3.375rem; color:#fff; font-weight: 700; font-family: 'Noto Sans KR', sans-serif;}
#discussion-wrap > .section-type1 .txt-wrap > p{font-size:1.25rem; color:#fff; width: 100%; max-width:516px;  margin-top:1.875rem; font-family: 'Noto Sans KR', sans-serif;}
#discussion-wrap > .section-type1 .image-wrap{width:calc(30% - 20px); max-width:330px;}
#discussion-wrap > .section-type1 .image-wrap > img{width:100%; dispay:block;}
#discussion-wrap > .section1-wrap .txt-wrap > h1{color:#31323B;}
#discussion-wrap > .section1-wrap .txt-wrap > p{color:#93949C;}
#discussion-wrap > .section2-wrap{background-color:#57CCC7 }
#discussion-wrap > .section3-wrap{background-color:#F187B5 } 

#discussion-wrap > .section4-wrap{padding:8.75rem 0;}
#discussion-wrap > .section4-wrap > .inner-wrap{width:calc(100% - 60px); max-width:1280px; margin: 0 auto; display:flex; justify-content: space-between; flex-wrap: wrap;}
#discussion-wrap > .section4-wrap > .inner-wrap > .head-wrap{width:calc(50% - 20px); max-width:333px;}
#discussion-wrap > .section4-wrap > .inner-wrap > .head-wrap > h1{font-size:2.75rem; color:#31323B; font-weight: 700; font-family: 'Noto Sans KR', sans-serif;}
#discussion-wrap > .section4-wrap > .inner-wrap > .head-wrap > p{font-size:1.25rem; font-family: 'Noto Sans KR', sans-serif; margin-top:3.125rem;}
#discussion-wrap > .section4-wrap > .inner-wrap > .scroll-wrap{width:calc(50% - 20px); max-width:683px;}
#discussion-wrap > .section4-wrap .scroll-wrap > .dot-line{width:1px; height: 80px; margin:0 13px; background-image: url("/image/iclass/novel_dot_line.png"); }
#discussion-wrap > .section4-wrap .scroll-wrap > .dot-line:first-child{height:40px; }
#discussion-wrap > .section4-wrap .scroll-wrap > .dot-line:last-child{height:40px; }
#discussion-wrap > .section4-wrap .scroll-wrap .box-wrap{display:flex; justify-content: flex-start;}
#discussion-wrap > .section4-wrap .scroll-wrap .box-wrap > .bar-wrap{width:auto; height: auto;}
#discussion-wrap > .section4-wrap .scroll-wrap .box-wrap .dot-line{width:1px; height:calc(100% - 26px); margin:0 auto; background-image: url("/image/iclass/novel_dot_line.png");}
#discussion-wrap > .section4-wrap .scroll-wrap .box-wrap > .txt-wrap{margin-left:20px; width:calc(100% - 46px);}
#discussion-wrap > .section4-wrap .scroll-wrap .box-wrap h2{font-size:1.875rem; color:#31323B; font-weight: 600; font-family: 'Noto Sans KR', sans-serif;}
#discussion-wrap > .section4-wrap .scroll-wrap .box-wrap p{font-size:1.125rem; font-family: 'Noto Sans KR', sans-serif; margin-top:2.125rem; width:100%; max-width:300px; line-height: 150%;}

@media only screen and (max-width:768px){
    #discussion-wrap > .section1-wrap .box-wrap h1{color:#445CB4; font-size:1.875rem; font-weight: 700; font-family: 'Roboto', sans-serif; padding:15px 0; text-align: center;}
	#discussion-wrap > .section-type1 > .inner-wrap{justify-content: center;}
	#discussion-wrap > .section-type1 .txt-wrap{width:100%; max-width:500px; margin:0 auto;}
	#discussion-wrap > .section-type1 .image-wrap{width:100%; max-width:330px; margin:6.25rem auto 0 auto;}

}

@media only screen and (max-width:640px){
	#discussion-wrap > .section1-wrap > .inner-wrap{justify-content: center;}
	#discussion-wrap > .section4-wrap > .inner-wrap > .head-wrap{width:100%; max-width:333px;}
	#discussion-wrap > .section4-wrap > .inner-wrap > .scroll-wrap{width:100%; margin-top:50px;}
}