@charset "utf-8";

* {box-sizing: border-box !important;}
body {font-size: 0.8rem; color: #333;}
a {color: #333;}

#container {position: relative; overflow: hidden; margin: 0 auto;}

.container {max-width: 72rem; padding: 0 1rem; margin: 0 auto;}

.conBox01 {position: relative; z-index: 1;}
.conBox01::before {content: ""; display: block; width: 100%; height: calc(100% - 1.05rem); background: linear-gradient(90deg, rgba(239,244,253,1) 0%, rgba(230,249,232,1) 100%); position: absolute; left: 0; top: 0; z-index: -2;}
.conBox01::after {content: ""; display: block; width: 9.8rem; height: 12.5rem; background: url(/images/web/yd/main/bgChr01.png) center/contain no-repeat; position: absolute; right: -1.75rem; top: 3.85rem; z-index: -1;}
.conBox01 .container {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; z-index: 3;}
.conBox01 .container::before {content: "YEONGDEOK OFFICE OF EDUCATION"; display: block; font-family: 'GmarketSans'; font-size: 1rem; color: #5da052; position: absolute; left: calc(50% + 36rem); top: 1rem; transform: rotate(90deg); transform-origin: left bottom; white-space: nowrap;}
.conBox01 .container::after {content: ""; display: block; width: 19.4rem; height: 16rem; background: url(/images/web/yd/main/bgLogo01.png) center/contain no-repeat; position: absolute; right: calc(50% - 50vw - 0.15rem); bottom: 0; z-index: -1;}
.conBox02 {margin-top: 3.6rem; position: relative; z-index: 2;}
.conBox02::before {content: ""; display: block; width: 7.35rem; height: 7.5rem; background: url(/images/web/yd/main/bgChr02.png); position: absolute; left: calc(50% - 46.1rem); top: -5.25rem;}
.conBox02 .container {display: flex; flex-wrap: wrap; justify-content: space-between;}

.T2_B01 {width: calc(100% - 13.15rem); height: 31.75rem; margin-left: -13rem;} /* 메인비주얼 */
.T2_B02 {width: 24.5rem; padding-top: 5.25rem;} /* 사용자 서비스 메뉴 */
.T2_B03 {width: 59.79%; margin-top: 2.8rem; position: relative; z-index: 2;} /* 바로가기 */
.T2_B04 {width: 30%; height: 8.5rem; margin-top: 2.8rem; position: relative; z-index: 1;} /* 배너 */
.T2_B04::before {content: ""; display: block; width: 100vw; height: 10.5rem; border-radius: 1.5rem; border: 1px solid #e0e0e0; background: #fff; box-shadow: 0 0.1rem 0.35rem rgba(113,113,113,0.35); position: absolute; right: 0; top: calc(50% - 5.25rem); z-index: -2;}
.T2_B05 {width: calc(100% - 28rem);} /* 게시판 */
.T2_B06 {width: 24.5rem;} /* 팝업존 */
.T2_B07 {width: 100%; padding: 3rem 0; margin-top: 2.5rem; position: relative; z-index: 1;} /* 갤러리 */
.T2_B07::before {content: ""; display: block; width: 100vw; height: 100%; background: #f0f4fb; position: absolute; left: calc(50% - 50vw); top: 0; z-index: -2;}
.T2_B07::after {content: ""; display: block; width: 12.1rem; height: 8rem; background: url(/images/web/yd/main/bgLogo02.png); position: absolute; left: calc(50% - 50vw); bottom: 0; z-index: -1;}



@media (max-width: 1640px) {

    .T2_B03 {width: calc(70% - 2.4rem);}
}



@media (max-width: 1440px) {

    .T2_B01 {width: calc(100% - 25.15rem); height: auto; margin-left: -1rem;}
    .T2_B02 {padding-top: 0;}
    .T2_B05 {width: calc(100% - 26.15rem);}
}



@media (max-width: 1200px) {

    .conBox01::before {height: 25rem; background: #e6f9e9; top: auto; bottom: 0;}
    .conBox01::after {width: 8.85rem; height: 11.45rem; right: -1.4rem; top: auto; bottom: 1.75rem; z-index: 4;}
    .conBox01 .container {align-items: flex-start; padding-bottom: 1.2rem;}
    .conBox01 .container::after {width: 27vw; height: 23vw; right: -0.25vw; bottom: -1.5vw;}
    .conBox02 {margin-top: 2.5rem;}
    .conBox02 .container {padding-bottom: 2rem;}

    .T2_B01 {width: calc(100% + 2rem); margin-left: -1rem;}
    .T2_B02 {order: 1; width: 71.14%; margin-top: 2rem;}
    .T2_B03 {width: 100%; margin-top: 0;}
    .T2_B03::before {content: ""; display: block; width: calc(100% + 2rem); height: 100%; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background: #fff; box-shadow: 0 0.1rem 0.35rem rgba(113,113,113,0.35); position: absolute; left: -1rem; top: 0; z-index: -1;}
    .T2_B04 {order: 2; width: 25.5%; height: auto; margin-top: 2rem;}
    .T2_B04::before {display: none;}
    .T2_B05 {width: 100%;}
    .T2_B06 {margin-top: 2.5rem;}
    .T2_B07 {width: calc(96.64% - 24.5rem); border-radius: 0.7rem; background: #f0f4fb; padding: 2.25rem 1.25rem 1.25rem; margin-top: 2.5rem;}
    .T2_B07::before {display: none;}
    .T2_B07::after {display: none;}
}



@media (max-width: 1100px) {

    .conBox02 .container {padding-bottom: 0;}

    .T2_B06 {width: 100%;}
    .T2_B07 {width: 100%; border-radius: 0; background: none; padding: 2.5rem 0 2rem;}
    .T2_B07::before {display: block;}
}



@media (max-width: 960px) {

	.conBox01::after {display: none;}
}



@media (max-width: 768px) {

    .conBox02 {margin-top: 2rem;}
    .T2_B02,
    .T2_B04 {margin-top: 1.5rem;}
    .T2_B06 {margin-top: 2rem;}
    .T2_B07 {padding: 2rem 0; margin-top: 2rem;}
}



@media (max-width: 580px) {

    .conBox01::before {display: none;}
    .conBox01 .container {padding-bottom: 0;}
    .conBox01 .container::after {display: none;}
    .conBox02 {margin-top: 1.5rem;}

    .T2_B02 {width: 100%; padding: 1.5rem 0; margin-top: 0; position: relative;}
    .T2_B02::before {content: ""; display: block; width: calc(100% + 2rem); height: 100%; background: #e8f8ec; position: absolute; left: -1rem; top: 0; z-index: -1;}
    .T2_B03::before {display: none;}
    .T2_B04 {width: 100%;}
    .T2_B06 {margin-top: 1.5rem;}
    .T2_B07 {padding: 1.5rem 0; margin-top: 1.5rem;}
}



@media (max-width: 480px) {

    .container {padding: 0 0.75rem;}

    .T2_B01 {width: calc(100% + 1.5rem); margin-left: -0.75rem;}
    .T2_B02::before {width: calc(100% + 1.5rem); left: -0.75rem;}
}



@media (max-width: 380px) {

    .T2_B02 {padding: 0.85rem 0;}
}