@charset "utf-8";
/* CSS Document */

#picbook-wrap .section1-wrap{width:calc(100% - 60px); max-width:1280px; margin: 0 auto; padding-bottom:8.75rem;}
#picbook-wrap .section1-wrap .head-wrap{padding:8.75rem 0; background: url("/image/iclass/m1_background.png") top  no-repeat;}
#picbook-wrap .section1-wrap .txt-wrap > h1{text-align: center; font-size:2.8125rem; font-weight: 600; color:#31323B;}
#picbook-wrap .section1-wrap .txt-wrap > p{font-size:1.25rem; text-align: center; margin-top:3.125rem; line-height: 150%;}
#picbook-wrap .section1-wrap .cont-wrap > .inner-wrap{display:flex; flex-wrap: wrap; justify-content: space-between;}
#picbook-wrap .section1-wrap .cont-wrap > .inner-wrap:last-child{margin-top:6.25rem;}
#picbook-wrap .section1-wrap .cont-wrap .dep{display:flex; justify-content: flex-start; width:calc(50% - 26px); max-width:538px;}
#picbook-wrap .section1-wrap .cont-wrap .dep > .num{color:#445CB4; font-size:2.8125rem; font-weight: 700; font-family: 'Roboto', sans-serif; margin-right:25px; line-height: 100%;}
#picbook-wrap .section1-wrap .cont-wrap .dep > .inner-txt{width:calc(100% - 78px);}
#picbook-wrap .section1-wrap .cont-wrap .dep  h4{color:#31323B; font-size:1.5rem; font-weight: 700; font-family: 'Noto Sans KR', sans-serif; }
#picbook-wrap .section1-wrap .cont-wrap .dep  p.exp{font-size:1.125rem; font-family: 'Noto Sans KR', sans-serif; margin-top:15px; line-height: 150%;}
#picbook-wrap .section1-wrap .cont-wrap .hv{width:1px; height: auto; background: url("/image/iclass/dotline.png"); margin:0 15px;}

#picbook-wrap .section2-wrap{padding:8.75rem 0; background-color:#EAEEF2; }
#picbook-wrap .section2-wrap > .inner-wrap{width:calc(100% - 60px); max-width:1280px; margin: 0 auto;}
#picbook-wrap .section2-wrap  h1.head-title{text-align: center; font-size:2.8125rem; font-weight: 600; color:#31323B; padding-bottom:2.5rem;}
#picbook-wrap .section2-wrap .part{border-top:1px dashed #445CB4; position:relative; padding:3.75rem 0 0 0; margin-top:3.75rem; display:flex; justify-content: space-between; flex-wrap: wrap; margin-bottom:8.75rem;}
#picbook-wrap .section2-wrap .part > .head{color:#fff; background-color:#445CB4; font-size:1.5rem; font-weight: 700; font-family: 'Noto Sans KR', sans-serif;  border-radius: 30px; width:173px; height: 59px; text-align: center; line-height: 59px; position:absolute; top:-29px; left:50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0);}
#picbook-wrap .section2-wrap .part > .box-wrap{padding:2.125rem; background-color: #fff; display:flex; justify-content: center; align-items: flex-start; border-radius: 15px; width:calc(50% - 5.5rem); max-width:532px; margin-top:1.875rem; height: auto;}
#picbook-wrap .section2-wrap .part > .box-wrap:nth-of-type(2){margin-top:0;}
#picbook-wrap .section2-wrap .part > .box-wrap:nth-of-type(3){margin-top:0;}
#picbook-wrap .section2-wrap .part > .box-wrap > .inner-wrap{width:auto; display:flex;}
#picbook-wrap .section2-wrap .part > .box-wrap > .inner-wrap > .num{color:#31323B; font-size:1.875rem; font-weight: 700; font-family: 'Roboto', sans-serif; margin-right:20px; line-height: 100%;}
#picbook-wrap .section2-wrap .part > .box-wrap > .inner-wrap h5{color:#31323B; font-size:1.25rem; font-weight: 700; font-family: 'Noto Sans KR', sans-serif;}
#picbook-wrap .section2-wrap .part > .box-wrap > .inner-wrap ul{margin-top:15px;}
#picbook-wrap .section2-wrap .part > .box-wrap > .inner-wrap ul > li{list-style-image: url("/image/iclass/bleet.png"); font-size:1.125rem; font-family: 'Noto Sans KR', sans-serif; margin-right:-17px; margin-top:10px;}

@media only screen and (max-width:640px){
	#picbook-wrap .section1-wrap .cont-wrap .dep{width:100%; max-width:640px; margin-top:3.125rem;}
	#picbook-wrap .section1-wrap .cont-wrap .dep:nth-child(1){margin-top:0;}
	#picbook-wrap .section1-wrap .cont-wrap .hv{display: none;}
	
	#picbook-wrap .section2-wrap .part > .box-wrap{width:calc(100% - 4.25rem); max-width:none;}
	#picbook-wrap .section2-wrap .part > .box-wrap:nth-of-type(2){margin-top:0;}
    #picbook-wrap .section2-wrap .part > .box-wrap:nth-of-type(3){margin-top:1.875rem;;}
}

@media only screen and (max-width:425px){
	#picbook-wrap .section2-wrap .part > .head{width:140px; height: 40px; line-height: 40px;}
}