/* 공통 */
.m-block{display:none;}

.only-pc{display:block;}
.only-mobile{display:none;}

/*:focus{ outline:0;}*/

/* 버튼 */
.btn{display:inline-block; height:35px; line-height:35px; font-size:15px; border:none; padding:0 20px; color:#fff; vertical-align:middle; position:relative; box-sizing:border-box; text-align:center;}
.btn.bg-skyblue{background-color:#0a4b70;}
.btn.bg-skyblue:hover{background-color:#0c5e8d;}
.btn.bg-black{background-color:#333;}
.btn.bg-dgray{background-color:#444;}
.btn.bg-lgray{background-color:#bfbfbf;}

.btn.bg-gray{background-color:#787878;}
.btn.bg-white{background-color:#fff;color:#01a4c1;}
.btn.bg-green{background-color:#54bd65;color:#fff;}
.btn.bg-blue{background-color:#135D70;color:#fff;}

.btn.line-skyblue{border:1px solid #0c5e8d;color:#0c5e8d;}
.btn.line-skyblue:hover{background-color:#135D70;color:#fff; }

.btn.line-gray{    background-color: #424855; color: #fff; border: 1px solid #424855;}
.btn[class^="line"]{line-height:32px;}

.btn.wide{min-width:190px; height:45px; line-height:45px;}

.btns-wrap{text-align:center;padding:20px 0;}
.btns-wrap:after{display:block;content:'';clear:both;}
.btns-wrap .fl{float:left;}
.btns-wrap .fr{float:right;}
.btns-wrap .btn{font-weight:600;}

.btn-icon{width:35px; height:35px; overflow:hidden; text-align:left; text-indent:-9999px; border-radius:16px; background-color:#f7f8f9; position:relative;}
.btn-icon:before{width:35px; height:35px; content:''; display:block; position:absolute; left:0; top:0;}
.btn-icon.delete:before{background:url(../img/sub/btn_icon_delete.png) center center / 35px 35px no-repeat;}

/* 탭 */
.con-tab{position:relative; border:1px solid #c6ccd8; height:48px; background-color:#fff; margin-bottom:40px;}
.con-tab > ul > li{float:left;box-sizing:border-box; position:relative;}
.con-tab > ul > li + li:before{display:block; width:1px; background-color:#c6ccd8; content:''; position:absolute; left:0; top:0; bottom:0;}
.con-tab > ul > li > a{display:block;text-align:center;height:48px;line-height:48px; white-space:nowrap;}
.con-tab > ul > li.on{border-bottom:3px solid #135D70;}
.con-tab > ul > li.on > a{color:#222; font-weight:bold; z-index:10; position:relative; height:46px; background-color:#135D70; color:#fff;}
.con-tab > ul > li.on a:after{position:absolute; left:50%; bottom:-12px; content:''; width:18px; height:9px; margin-left:-9px; background:url(../img/content/tab_arr.png) 0 0 / 18px auto no-repeat;}
.con-tab > ul > li > a:hover{color:#5ee3e7;}
.con-tab ul:after{clear:both;display:block;content:'';}
.con-tab .t2 > li{width:50%;}
.con-tab .t3 > li{width:33%;}
.con-tab .t3 > li:nth-child(3){width:34%;}
.con-tab .t4 > li{width:25%;}
.con-tab .t5 > li{width:20%;}

.ctitle{font-size:26px; color:#333; margin-bottom:20px;}
.ctitle .p{color:#135D70;}
.mtitle{font-size:20px; color:#333;  font-weight:500; margin-bottom:10px; }
.stitle{font-size:20px; color:#333; font-weight:600; margin-bottom:10px;}
.sstitle{font-size:16px; color:#333; margin-bottom:5px;}

.title-center{text-align:center;}

.con-wrap{margin-bottom:50px;}
.con-wrap.gubun-line{padding-bottom:40px; border-bottom:1px solid #dfdee2; margin-bottom:40px;}

.list-type-base{}
.list-type-base .list-type-dash{margin:5px 0 5px 20px;}
.list-type-base .list-type-dash > li + li{margin-top:0;}
.list-type-base > li + li{margin-top:10px;}
.list-type-base.space > li + li{margin-top:15px;}

.list-type-dash{padding-left:15px;}
.list-type-dash > li{position:relative; padding-left:12px;}
.list-type-dash > li:before{content:'-'; position:absolute; left:0; top:0;}
.list-type-dash > li + li{}
.list-type-dash .list-type-dot{margin:5px 0 8px; padding-left:0;}

.list-type-dot{}
.list-type-dot > li{position:relative; padding-left:10px;}
.list-type-dot > li:before{content:''; position:absolute; left:0; top:10px; display:block; width:3px; height:3px; border-radius:3px; background-color:#444;}
.list-type-dot > li + li{margin-top:3px;}
.list-type-dot > li span{color:#135D70;}
.list-type-dot .list-type-dash{margin:5px 0 8px; padding-left:0;}

.con-type{}
.con-type > dt{font-weight:600; margin-bottom:5px;}
.con-type > dd{ }

.con-box{border:2px solid #b2e7e9; padding:20px; font-size:14px; line-height:1.5em;}
.con-box2{border:4px solid #b2e7e9; padding:30px; line-height:1.5em;}

.con-table{border-top:2px solid #135D70; overflow-x:auto; overflow-y:hidden;}
.con-table + .con-table{margin-top:10px;}
.con-table table{width:100%;table-layout:fixed;}
.con-table table thead th{background-color:#ebf3f6;text-align:center;padding:10px;border-right:1px solid #c6ccd8; border-bottom:1px solid #135D70; font-size:14px; line-height:1.25em;}
.con-table table thead th + th{border-left:1px solid #c6ccd8;}
.con-table table thead tr:first-child th{border-top:none;}
.con-table table thead tr th:last-child{border-right:none;}
.con-table table tbody th{text-align:center;padding:10px;border:1px solid #c6ccd8; font-size:14px;}
.con-table table tbody .bg{background-color:#f4f5f7;}
.con-table table tbody .bg2{background-color:#f4f5f7;}
.con-table table tbody td{text-align:center;padding:10px;border:1px solid #c6ccd8; font-size:14px;}
.con-table table tbody tr th:first-child{border-left:none;}
.con-table table tr td:first-child{border-left:none;}
.con-table table tr td:last-child{border-right:none;}
.con-table table tr td.bt-none{border-top:none; padding-top:0;}
.con-table table tr td.bb-none{border-bottom:none;}
.con-table table colgroup + tbody tr:first-child th,
.con-table table colgroup + tbody tr:first-child td{border-top:none;}
.con-table.type-row th{text-align:left; padding-left:30px;}
.con-table.type-row th.bg{background-color:#ebf3f6;}
.con-table.type-row td{padding-left:30px; text-align:left;}

.share-wrap{}
.share-wrap:after{display:block;content:'';clear:both;}
.share-wrap > div{box-sizing:border-box;}
.share-wrap.share2 .area1{float:left; width:calc(50% - 20px);}
.share-wrap.share2 .area2{float:right; width:calc(50% - 20px);}

.refer{font-size:13px;}
.refer .list-type-dot li + li{margin:0;}

.title-area{ margin-bottom:10px;}
.title-area:after{display:block;content:'';clear:both;}
.title-area .ctitle,
.title-area .mtitle,
.title-area .stitle{margin-bottom:0;}

/* board */
.board-top-msg{margin-bottom:20px;}
.board-top-msg .txt1{font-size:22px; line-height:1.25em;}
.board-top-msg .txt2{color:#135D70;}

.board-agree-wrap{padding-bottom:30px; border-bottom:1px solid #dfdee2; margin-bottom:30px;}
.board-agree-wrap h4,
.board-agree-wrap h5{font-size:26px; margin-bottom:10px; color:#222; line-height:1.25em;}
.board-agree-wrap .front-msg{margin-bottom:10px;}
.board-agree-wrap .agree-con{background-color:#f7f8f9; border:1px solid #c6ccd8; padding:20px;}
.board-agree-wrap dl{}
.board-agree-wrap dl dt{font-weight:600; margin-bottom:5px;}
.board-agree-wrap dl dd{}
.board-agree-wrap dl dd + dt{margin-top:20px;}
.board-agree-wrap dd ul{padding:0;}
.board-agree-wrap .end-msg{padding:10px 0 0 0;}
.board-agree-wrap .agree-check{text-align:right; padding:10px 0 0 0; color:#222;}

.data-search{background-color:#f4f5f7; border:1px solid #c6ccd8; text-align:center; padding:20px; margin-bottom:30px;}
.data-search .s-option{width:120px;}
.data-search .s-keyword{width:300px;}
.data-search .s-submit{width:90px; height:35px; background:#666569 url(../img/content/icon_data_search.png) right center no-repeat; color:#fff; padding-right:38px;}

.data-list-top{margin-bottom:10px;}
.data-list-top:after{clear:both;display:block;content:'';}
.list-count{background:url(../img/content/icon_data_count.png) left 5px / 12px auto no-repeat; padding-left:18px;}
.list-count .total{color:#135D70;}

.data-list{border-top:2px solid #135D70; margin-bottom:20px;overflow-x:auto; overflow-y:hidden;}
.data-list table{width:100%;table-layout:fixed;}
.data-list table thead th{background-color:#ebf3f6;text-align:center;padding:10px;border-right:1px solid #e1e3e9; border-bottom:1px solid #135D70; font-size:14px; line-height:1.25em;}
.data-list table thead th + th{border-left:1px solid #e1e3e9;}
.data-list table thead tr:first-child th{border-top:none;}
.data-list table thead tr th:last-child{border-right:none;}
.data-list table tbody th{text-align:center;padding:10px;border:1px solid #e1e3e9;}
.data-list table tbody td{text-align:center;padding:10px;border:1px solid #e1e3e9;}
.data-list table tbody tr th:first-child{border-left:none;}
.data-list table tr td:first-child{border-left:none;}
.data-list table tr td:last-child{border-right:none;}
.data-list table td .btn{height:34px;margin:-5px 0;font-size:14px;}

.board-list{border-top:2px solid #135D70; margin-bottom:20px;}
.board-list table{width:100%;table-layout:fixed;}
.board-list table th{background-color:#f4f5f7;text-align:center;padding:15px 10px;border-bottom:1px solid #135D70; font-size:14px; line-height:1.25em;}
.board-list table td{text-align:center;padding:10px; line-height:1.75em;border-bottom:1px solid #e1e3e9;}
.board-list table td img{vertical-align:middle;}
.board-list table td.no{}
.board-list table td.title{text-align:left;}
.board-list table td.no-data{padding:50px 0;}
.board-list table td .reply{display:inline-block; width:15px; height:15px; text-align:left; text-indent:-9999px; overflow:hidden; background:url(../img/content/i_reply.png) 0 0 / cover no-repeat; margin-right:5px;}
.board-list + .btns-wrap{padding-top:0;}

.board-view{width:100%;}
.board-view .view-title{border-top:2px solid #135D70;border-bottom:1px solid #135D70; padding:25px; text-align:center; font-size:22px; color:#222;}
.board-view .view-title .label-reply{font-weight:bold;}
.board-view .view-info{border-bottom:1px solid #c6ccd8; padding:15px 10px; background-color:#f4f5f7;}
.board-view .view-info:after{display:block;content:'';clear:both;}
.board-view .view-info .item{ vertical-align:middle; position:relative; padding:0 30px; float:left; width:50%; box-sizing:border-box; text-align:left;}
.board-view .view-info .item .label{color:#1271ae; font-weight:600; margin-right:20px;}
.board-view .view-info .item .data{}
.board-view .view-info .item + .item:before{display:block; width:1px; height:13px; content:''; background-color:#ddd; position:absolute; left:0; top:4px; }
.board-view .view-file{border-bottom:1px solid #c6ccd8; padding:15px 40px; background-color:#f4f5f7;}
.board-view .view-file .item{display:inline-block; vertical-align:middle; position:relative;}
.board-view .view-file .item .label{display:inline-block; height:20px; line-height:20px; color:#1271ae; font-weight:600; margin-right:30px; background:url(../img/content/i_file.png) 0 0 no-repeat; padding-left:25px; }
.board-view .view-file .item .data a{display:inline-block;}
.board-view .view-file .item .data a.file-pdf{background:url(../img/content/file_pdf.png) left center no-repeat; padding-left:22px;}
.board-view .view-file .item .data a.file-hwp{background:url(../img/content/file_hwp.png) left center no-repeat; padding-left:22px;}
.board-view .view-file .item .data a.file-jpg{background:url(../img/content/file_jpg.png) left center no-repeat; padding-left:22px;}
.board-view .view-file .item .data a.file-png{background:url(../img/content/file_png.png) left center no-repeat; padding-left:22px;}
.board-view .view-file .item .data a.file-excel{background:url(../img/content/file_excel.png) left center no-repeat; padding-left:22px;}
.board-view .view-contents{text-align:left;padding:40px;line-height:1.75em;box-sizing:border-box;border-bottom:1px solid #c6ccd8; min-height:200px;}
.board-view .view-contents img{max-width:100%;}
.board-view .view-contents table{margin: 0 auto;}
.board-view .view-front-photo{text-align:center; padding:40px 0 0 0;}
.board-view .view-front-photo img{max-width:80%;}

.prev-next-list{padding:17px 25px; border-top:1px solid #c6ccd8; border-bottom:1px solid #c6ccd8; font-size:14px;}
.prev-next-list > div{line-height:44px; width:50%; box-sizing:border-box; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.prev-next-list > div:after{display:block;content:'';clear:both;}
.prev-next-list .article-prev{float:left; padding-left:25px; text-align:left; background:url(../img/content/list_prev_arr.png) 0 center no-repeat;}
.prev-next-list .article-next{float:right; padding-right:25px; text-align:right; background:url(../img/content/list_next_arr.png) right center no-repeat;}
.prev-next-list .label{color:#1271ae; font-weight:600; padding:0 15px;}
.prev-next-list .article-prev .label{float:left;}
.prev-next-list .article-next .label{float:right;}
.prev-next-list:after{display:block;content:'';clear:both;}

.board-regist-top{margin-bottom:5px;}

.board-regist{border-top:2px solid #135D70; }
.board-regist table{width:100%; table-layout:fixed;}
.board-regist th{background:#f4f5f7; text-align:left; padding:9px 9px 9px 20px; border-bottom:1px solid #c6ccd8; color:#222;}
.board-regist td{text-align:left; padding:9px 9px 9px 20px; border-bottom:1px solid #c6ccd8; font-size:14px;}
.board-regist .addr .zipcode{margin-bottom:3px;}
.board-regist .addr .zipcode + .row{margin-bottom:3px;}
.board-regist .contents-regist {padding:0;}
.board-regist textarea {padding:15px;}
.board-regist .txt-type{line-height:40px;}
.board-regist .regist-guide{font-size:14px;}
.board-regist .space-txt{display:inline-block;vertical-align:middle;line-height:40px;width:20px;text-align:center;margin:0 -2px;}
.board-regist .row + .row{margin-top:3px;}
.board-regist .input-type{padding:6px 0;}

.paging{text-align:center;}
.paging a{display:inline-block; height:30px; width:30px; line-height:30px; vertical-align:middle; overflow:hidden; box-sizing:border-box;}
.paging .page{text-align:left;text-indent:-9999px;position:relative; border:1px solid #c6ccd8;}
.paging .page:after{display:block;width:30px;height:30px;position:absolute;left:0;top:0;content:'';}
.paging .first:after{background:url(../img/content/page_first.png) center center / 28px auto no-repeat;}
.paging .prev{margin-right:15px;}
.paging .prev:after{background:url(../img/content/page_prev.png) center center / 28px auto no-repeat;}
.paging .next{margin-left:15px;}
.paging .next:after{background:url(../img/content/page_next.png) center center / 28px auto no-repeat;}
.paging .last:after{background:url(../img/content/page_last.png) center center / 28px auto no-repeat;}
.paging .num{font-size:13px;}
.paging .num + .num{}
.paging .current{background-color:#135D70; color:#fff;}

.board-command{text-align:center; padding:20px 0;}
.board-command .btn{height:45px; line-height:45px; margin:0 5px; min-width:170px;}

.board-guide-top{border:4px solid #b2e7e9; padding:25px 25px 25px 140px; text-align:left; margin-bottom:20px; background:url(../img/m2/customer_guide_bg.png) 50px center / 66px auto no-repeat;}
.board-guide-top .label{font-size:24px; font-weight:600; margin-bottom:5px;}
.board-guide-top .label b{color:#005773;}
.board-guide-top p{font-size:18px;}

.required-guide{color:#135D70;}
.required{color:#135D70; font-weight:600;}

/*진학현황 */
.newMap2025 .statistics .sub_contents_wap {
    align-items: flex-start;
}

.newMap2025 .statistics .sub_contents_wap.off {
    display: none;
}

.newMap2025 h2 {
    color: #0077c0;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.newMap2025 .item-left,
.newMap2025 .item-right {
    padding: 0 3rem;
    position: relative;
}

.newMap2025 .item-list {
    margin-top: 15px;
    width: 250px;
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}

.newMap2025 .item-left::after,
.newMap2025 .item-right::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #1984c6;
    position: absolute;
    top: 2.5rem;
    left: 0;
}

.newMap2025 .item-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px;
}

.newMap2025 .item-list li span {
    color: #1984c6;
    font-size: 1.15rem;
}

.newMap2025 .item-list li span.tit {
    color: #1f7cb5;
}

.newMap2025 .detailBtn {
    color: #0166b3;
    padding: 10px 20px;
    position: fixed;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(240, 240, 240, 0.8));
    bottom: 15vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    font-size: 1.3rem;
    line-height: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.newMap2025 .detailBtn::after {
    content: "";
    width: 20px;
    height: 20px;
    position: relative;
    background-image: url("/assets/images/icons/arr_in.png");
    background-size: cover;
    background-position: center;
}

.newMap2025 .detailBtn.zoomedIN::after {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url("/assets/images/icons/arr_out.png");
    background-size: cover;
    background-position: center;
}

.newMap2025 .guidemap {
    position: absolute;
    left: 30px;
    bottom: 40px;
    flex-flow: column;
    display: block;
    background-color: rgba(230, 230, 230, 0.8);
    padding: 1.5rem;
    border-radius: 15px;
}

.newMap2025 .guidemap.on {}

.newMap2025 .guidemap p {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 25px;
    line-height: 25px;

}

.newMap2025 .guidemap span.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}

.newMap2025 .guidemap span.dot.red {
    background-color: #a70168;
}

.newMap2025 .guidemap span.dot.mint {
    background-color: #2dafbc
}

.newMap2025 .guidemap span.dot.navy {
    background-color: #000d4a;
}

.newMap2025 .guidemap span.dot.blue {
    background-color: #107bde;
}

.newMap2025 .guidemap span.dot-txt {
    font-size: 1.15rem;
    color: #333;
}
.newMap2025 .guidemap button.bt-txt{
    font-size: 0.9rem;
    padding: 5px 10px;    
    margin-top: 15px;
    background-color: #fefefe;
    border-radius: 5px;
}    

/*졸업앨범 */
.flipbook-bg {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    transition: visibility .2s, opacity .2s;
    z-index: 10001;
}

.flipbook-bg.show {
    visibility: visible;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8);
}

.flipbook-layer {
    position: relative;
    width: 100%;
    height: 100%;
}

.flipbook-viewport .double {
    position: relative;
}

.flipbook-close {
    position: absolute;
    right: 50px;
    top: 50px;
    z-index: 10002;
    cursor: pointer;
}

.flipbook-close:hover i {
    color: #0076c0;
}

.flipbook-viewport .page-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color: #fff;
    font-size: 1.5rem;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.graduation .tab-part {
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.graduation .tab-item {
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
}

.graduation .tab-item:hover {
    border: 1px solid #222;
}




.graduation .tab-item.on {
    border: 1px solid #0f1c33;
    box-shadow: 0px 3px 7px rgba(15, 28, 51, 0.7);
}

.graduation.MiddleSchool .tab-item.on {
    border: 1px solid #5f1725;
}

.graduation .tab-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-size: 1.5rem;
}

.graduation .tab-item.on a {
    background-color: #0f1c33;
    color: #fefefe;

}

.graduation.MiddleSchool .tab-item.on a {
    background-color: #5f1725;
    color: #fefefe;

}

.graduation .tab-yearList-part {
    flex-wrap: wrap;
    gap: 20px;
    margin: 50px 0;
    justify-content: flex-start;
    width: calc(100% + 20px);
}

.graduation .tab-yearList-part li {
    width: calc(20% - 20px);
    aspect-ratio: 1 / 1;
}

.graduation.MiddleSchool .tab-yearList-part li a {
    display: inline-block;
    width: calc(100% - 4px);
    height: 100%;
    background-image: url(/assets/images/sub/album_red_square_v2.jpg);
    background-size: cover;
    border-radius: 5px;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
    position: relative;
}

.graduation .tab-yearList-part li a {
    display: inline-block;
    width: calc(100% - 4px);
    height: 100%;
    background-image: url(/assets/images/sub/album_navy_square_v2.jpg);
    background-size: cover;
    border-radius: 5px;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
    position: relative;
}

.graduation .tab-yearList-part li a span {
    color: #fff;
    font-size: 1.1rem;
}

.graduation .tab-yearList-part li a span.year {
    display: none;
}

.graduation .tab-yearList-part li a span.grad_th {
    position: absolute;
    top: 70%;
    left: calc(50% + 10px);
    text-align: center;
    transform: translateX(-50%);
}

/*학교장 인사말 */ 

/* sub-page greeting */ 
.hanmun{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
.paragraph-picture {display: flex;
		gap: 125px;
		justify-content: center;
		align-items: baseline;
		margin-bottom: 5rem;
		
}
.paragraph-picture .right div.first-txts {
    font-family: "Noto Serif KR", serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 3.2rem;
}
.paragraph-picture .left {width: 315px;}
.paragraph-picture .left img{width:100%;}
.paragraph-picture .right {width: calc(100% - 440px);}
.paragraph-picture .right div{text-align: justify;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    line-height: 2.5rem;
	width: 100%;
}
.paragraph-picture .right div.w50{font-weight:500;}
.paragraph-picture .right div.school-name{font-size:1.8rem;}
.paragraph-picture .right div.txt-right{text-align:right;}
.paragraph-picture .right span.ceo-name{font-family: 'Nanum Brush Script';
    font-size: 7rem;
    display: block;
    width: 100%;
    margin-top: 3rem;}


/* 역대 학교장 */ 
div.principals div.swiper-button-next:after,
div.principals div.swiper-button-prev:after {
    font-size: 20px;
    color: #13aaf0;
}

div.principals .swiper-container .swiper-pagination {
    padding-right: unset;
    width: calc(100% - 90px);

}

div.principals .swiper-container .swiper-button-prev {
    right: 60px;
    left: unset;
}

div.principals .swiper-container .swiper-button-prev,
div.principals .swiper-container .swiper-button-next {
    bottom: -55px;
    background-color: #ebebeb;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: unset;
}

div.principals .swiper-container .swiper-button-prev:hover::after,
div.principals .swiper-container .swiper-button-next:hover::after {
    color: #0166b3;
}

div.principals .swiper-container {
    position: relative;
    overflow: hidden;

}

div.principals .swiper-container .swiper-wrapper {
    margin-bottom: 2rem;
}

div.principals span.swiper-pagination-bullet-active {
    background: #13aaf0;
}

div.principals .slide-principal-item {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    max-width:350px;
    max-height:500px;
    min-width: 275px;
    min-height: 420px;
}
div.principals .slide-principal-item img{
    width:100%;
}
div.principals .ceo_info {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: 0;
    padding: 2rem;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    justify-content: center;
    transition: height 0.3s ease;
}

div.principals .ceo_info p {
    display: flex;
    gap: 15px;
    align-items: baseline;
}

div.principals .ceo_info p span {
    color: #fff;
    font-size: 1.8rem;
}

div.principals .ceo_info .arrow-in {}

div.principals .ceo_info .arrow-in i {}

div.principals .ceo_info p span.name {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.5px;
}

div.principals .ceo_info .ceo_message {
    color: #fff;
    text-align: left;
    font-size: 1.5rem;
    line-height: 2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 3줄까지만 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.principals .slide-principal-item:hover .ceo_info {
    height: 40%;
    gap: 20px;
}

div.modalbgbody {
    position: absolute;
    top: 50%;
    left: calc(50% - 500px);
    width: 1000px;
    background-color: #fff;
    padding: 50px;
    box-sizing: border-box;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    display: none;
    z-index: 10001;
    background: linear-gradient(135deg, #1a2a43 30%, #3a475a 50%, #5a6b84 70%);    
    transform: translateY(-50%);
}

div.modalbgbody .ceo-part-detail {
    display: flex;
    gap: 30px;
    align-items: center;
}

div.modalbgbody .ceo-part-detail-left {
    width: 300px
}

div.modalbgbody .ceo-part-detail-left img {
    border-radius: 10px;
}

div.modalbgbody .ceo-part-detail-right {
    width: calc(100% - 330px);
}

div.modalbgbody .ceo-part-detail-right p {
    text-align: left;
    display: flex;
    flex-flow: row-reverse;
    align-items: baseline;
    gap: 1rem;
}

div.modalbgbody .ceo-part-detail-right p span {
    color: #d9c9af;
}

div.modalbgbody .ceo-part-detail-right p span.name {
    font-size: 3rem;
    font-weight: 700;
}

div.modalbgbody .ceo-part-detail-right p span.ceo_order {
    font-size: 2rem;
}

div.modalbgbody .ceo-part-detail-right .ceo_message {
    font-size: 1.7rem;
    text-align: justify;
    word-break: break-all;
    line-height: 1.6;
    color: #666;
    margin-top: 3rem;
    color: #fefefe;
}

.ceo-deatil-close {
    position: absolute;
    right: -50px;
    top: 20px;
    z-index: 10002;
    cursor: pointer;
}

.ceo-deatil-close i {
    color: #fff;
}

.rotate-on-hover {
    transition: transform 0.5s ease;
    transform-origin: 50% 50%;
}

/* 축하메시지 */ 
div.container.greeting.message-page {
    background-image: url(/assets/images/main/main_bg004_.jpg);
}

div.message-page .sub_common_wap h2 {
    color: #fefefe;
}

div.message-page .copyright {
    background-color: unset;
}

.message-page .middle_tab {}

.message-page .middle_tab ul {
    position: relative;
    display: flex;
    width: 100%;
    border-bottom: 3px solid #fefefe;
    text-align: left;

}

.message-page .middle_tab ul li {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 70px;
    line-height: 70px;
    box-sizing: border-box;
}

.message-page .middle_tab ul li.on {
    background: #fff;
}

.message-page .middle_tab ul li.on:before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    z-index: 1;
}

.message-page .middle_tab ul li a {

    position: relative;
    display: block;
    height: 68px;
    text-align: center;
    font-size: 22px;
    color: #999;
    font-weight: 500;
    background-color: #0f2c4e;
}

.message-page .middle_tab ul li.on a {
    color: #0076c0;
    background-color: #fefefe;
}

.message-page .middle_tab ul li a:hover {}

.message-page .middle_body {
    padding: 5rem 0;
}

.message-page .middle_body .m_message_list {
    display: none;
    gap: 4rem;
    flex-flow: wrap;
    width: calc(100% + 4rem);
}

.message-page .middle_body .m_message_list.on {
    display: flex;
}

.message-page .middle_body .m_message_list li {
    gap: 3rem;
    height: 100%;
    width: calc(33.33% - 4rem);
    /* border: 1px solid rgba(200, 200, 200, 0.5); */
    border-radius: 20px;
    padding: 2rem;
    box-sizing: border-box;
}

.message-page .middle_body .m_message_list li .photo {
    width: calc(40% - 1.5rem);
    position: relative;
    display: none;
}

.message-page .middle_body .m_message_list li .photo::after {
    content: '';
    position: absolute;
    top: 0;
    right: -18px;
    bottom: 0;
    width: 1px;
    background: rgba(200, 200, 200, 0.5);
}

.message-page .middle_body .m_message_list li .photo .per {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    overflow: hidden;
    position: relative;
}

.message-page .middle_body .m_message_list li .photo .per::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.15);
}

.message-page .middle_body .m_message_list li .photo .per img {
    width: 100%;
}

.message-page .middle_body .m_message_list li .info {
    /* width: calc(60% - 1.5rem); */
    width: 100%;
    text-align: left;
    gap: 1rem;
}

.message-page .middle_body .m_message_list li .info p {
    line-height: 1.5rem;
    text-align: justify;
}

.message-page .middle_body .m_message_list li .info p.name {
    font-size: 1.7rem;
    color: #99c7e9;
}

.message-page .middle_body .m_message_list li .info p.add-info {
    font-size: 1.3rem;
    color: #ccc;
    text-align: right;

    border-bottom: 1px solid rgba(200, 200, 200, 0.5);
    padding-bottom: 1rem;
}

.message-page .middle_body .m_message_list li .info p.message-txt {
    font-size: 1.3rem;
    color: #fafafa;
    display: -webkit-box;
    /*
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 63px;
    */
    height: auto;
    overflow: hidden;
    word-break: break-all;
    line-height: 1.5;
}

.message-page .middle_body .m_message_list li .info p.message-txt.en {
    display: none;
    word-break: keep-all;
    text-align: left;
}


.message-page .middle_body .m_message_list li:hover .info p.message-txt {
    color: #eee;
}
----------------------------

.message-page .middle_body_v2 {
    padding: 5rem 0;
}

.message-page .middle_body_v2 .m_message_list {
    display: none;
    row-gap: 4rem;
    flex-flow: wrap;
    width: 100%;
    margin-top: 4rem;
}

.message-page .middle_body_v2 .m_message_list.on {
    display: flex;
}

.message-page .middle_body_v2 .m_message_list li {
    gap: 3rem;
    height: 100%;
    width: 100%;
    /* border: 1px solid rgba(200, 200, 200, 0.5); */
    border-radius: 20px;
    padding: 2rem;
    box-sizing: border-box;
}



.message-page .middle_body_v2 .m_message_list li .photo {
    width: calc(20% - 1.5rem);
    position: relative;    
}


.message-page .middle_body_v2 .m_message_list li .photo .per {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 60px;
    overflow: hidden;
    position: relative;
}
.message-page .middle_body_v2 .m_message_list li .photo .p-info{display:none;}

.message-page .middle_body_v2 .m_message_list li .photo .per img {
    width: 100%;
}

.message-page .middle_body_v2 .m_message_list li .info {
    width: calc(80% - 1.5rem);     
    text-align: left;
    gap: 1rem;
}

.message-page .middle_body_v2 .m_message_list li .info p {
    line-height: 1.5rem;
    text-align: justify;
}

.message-page .middle_body_v2 .m_message_list li .info p.name {
    font-size: 1.7rem;
    color: #99c7e9;
}

.message-page .middle_body_v2 .m_message_list li .info p.add-info {
    font-size: 1.3rem;
    color: #ccc;
    text-align: right;

    border-bottom: 1px solid rgba(200, 200, 200, 0.5);
    padding-bottom: 1rem;
}
.message-page .middle_body_v2 .m_message_list li .info span.add-info-title{
    padding-left:5px;
    display:inline-block;
}
.message-page .middle_body_v2 .m_message_list li .info span.add-info-subtitle{
    display: block;
}


.message-page .middle_body_v2 .m_message_list li .info div.message-txt {
    font-size: 1.3rem;
    color: #fafafa;
    display: -webkit-box;
    text-align: justify;
    height: auto;
    overflow: hidden;
    word-break: keep-all;
    line-height: 1.5;
}

.message-page .middle_body_v2 .m_message_list li .info p.message-txt.en {
    display: none;
    word-break: keep-all;
    text-align: left;
}


.message-page .middle_body_v2 .m_message_list li:hover .info p.message-txt {
    color: #eee;
}

.message-page .middle_body_v2 .m_message_list li:nth-child(2n) {
    flex-flow: row-reverse;
}

.message-page .middle_body_v2 .m_message_list li:nth-child(2n) .info p.name{
    text-align: right;
}
.message-page .middle_body_v2 .m_message_list li:nth-child(2n) .info p.add-info{
text-align: left;
}

/* 담벼락 */ 

/* sub-page wall */ 

.sub_contents_wap {margin:2rem auto 0; }
.container.wall-page {
    background: url(/assets/images/sub/wall_2452_1.jpg); 
	background-size: cover;   
    background-position: center; 
}
.wall-page .items-list {width:90%; margin: 0 auto;text-align: left;}
.wall-page .items-list .item{
	display: inline-block; 
    width: calc(16.6% - 20px); 
    min-width: 250px;
    break-inside: avoid; 
	box-sizing: border-box; border-radius: 10px;
	margin-bottom: 20px;
    margin-right: 20px;
	overflow: hidden;
}
.wall-page .items-list .item.white{background-color: rgb(255, 255, 255);}
.wall-page .items-list .item.yellow{background-color: rgb(243, 243, 158);}
.wall-page .items-list .item.red{background-color: rgb(249,166,166);}
.wall-page .items-list .item.green{background-color: rgb(153,245,156);}
.wall-page .items-list .item.blue{background-color: rgb(182,227,247);}
.wall-page .items-list .item.purple{background-color: rgb(244,171,244);}

.wall-page .items-list .item .item-fix{padding: 10px;    text-align: left;
    display: flex;
    gap: 5px;
    align-items: center;
    color: #666;
    font-size: 1.05rem;
    font-weight: 300;}


.wall-page .items-list .item.white .item-fix{background-color: rgb(200, 200, 200);}
.wall-page .items-list .item.yellow .item-fix{background-color: rgb(238, 238, 118);}
.wall-page .items-list .item.red .item-fix{background-color: rgb(255,144,144);}
.wall-page .items-list .item.green .item-fix{background-color: rgb(113, 199, 116);}
.wall-page .items-list .item.blue .item-fix{background-color: rgb(130,202,236);}
.wall-page .items-list .item.purple .item-fix{background-color: rgb(234,155,234);}

.wall-page .items-list .item .item-view{padding: 10px;
    padding: 10px;
    display: flex;
    flex-flow: column;
    gap: 10px;
    text-align: left;
}
.wall-page .items-list .item .item-top{display: flex; justify-content: space-between;}
.wall-page .items-list .item .name {font-size:0.95rem;font-weight:600;}
.wall-page .items-list .item .date {font-size:0.95rem;color:#888;    display: flex;align-items: center;
        gap: 2px;}
.wall-page .items-list .item .item-title{font-size:1.25rem;font-weight:600;}
.wall-page .items-list .item .item-cont{min-height:30px;}
.wall-page .items-list .item .writing {font-size:1.0rem;font-weight:400;}
.wall-page .items-list .item figure{ width: 100%; margin: 0; border-radius: 10px;
    overflow: hidden; position: relative;margin-bottom: 10px;
}
.wall-page .items-list .item figure img{max-width:100%; width:100%;}
.wall-page .items-list .item figure figcaption{
	position: absolute;
    top: 40%;
    text-align: center;
    width: 100%;
    z-index: -1;
}	
.wall-write-btn{    position: fixed;
    bottom: 100px;
    right: 50px;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background-color: #1a85c7;
    display: flex;
    justify-content: center;
	overflow: hidden;}
.wall-write-btn button{ width: 100%; height: 100%; position: relative;}
.wall-write-btn button i {position: absolute;top:15px; left:15px; font-size: 40px; color: #f5f5f5;}

.wall-write-btn button i.xi-plus-thin{ transition: transform 0.5s, opacity 0.5s;}
.wall-write-btn button:hover i.xi-plus-thin{transform: rotate(180deg);opacity: 0;}

.wall-write-btn button i.xi-pen{ opacity: 0; transform: rotate(180deg); transition: transform 0.5s, opacity 0.5s;}
.wall-write-btn button:hover i.xi-pen{transform: rotate(0);opacity: 1;}

.popup-layer{   
   position: fixed;	
   padding : 20px;
   border-radius: 20px;
   background-color: #fff;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.wall-write-popwrap {
	bottom: 0;
    right: 50px;
	width: 350px;
    max-height: 90%;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	display:none;
}
.pop-close{cursor: pointer;}
.pop-top{width:100%;display: flex; justify-content: space-between;
		height: 3rem; align-items: center;}
.form-part{width:100%;margin: 20px 0 0 0;}

p.under-line{position: relative; width: 95%; margin: 0 auto;    height: 3rem;
    line-height: 3rem;}
p.under-line::after{content: "";
    width: 100%;
    height: 1px;
	background-color: #f0f0f0;
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;}

p.under-line .ss-font{font-size:1rem;}
p.under-line .fixynpart{ display:none; align-items: center;
        gap: 3px; width: 42px;}
p.under-line .fixynpart.on{ display: flex; }
input.w-in-box {width:100%;border:0;font-size: 1.5rem;}
input.w-in-box:focus{border-color:unset;}
input.w-in-box:focus-visible{outline:none; box-shadow: none;}
input.w-in-box::placeholder { color:#aaa;font-size:1.2rem; font-weight:500;}

textarea.w-in-box{ 
	width: 95%;
    margin: 10px 0;
    border: 0;
    font-size: 1.5rem;
	color:#999;
    max-height: 150px;
}
textarea.w-in-box:focus{outline:none;}
textarea.w-in-box.placeholder{color:#999;}

button.wSendBtn{cursor:not-allowed;}
button.wSendBtn.on{background-color: #1a85c7; color: #fff;cursor:pointer;}


button.wRemoveBtn {
    cursor: not-allowed;
    display:none;
}
button.wRemoveBtn.on{
    display: inline-block; background-color: #a70618; color: #fff;cursor:pointer;
}

.graybtn {background-color:#f6f6f6; color:#7a7a7a;padding: 15px; border-radius: 1.5rem;    font-weight: 600;
    font-size: 1.2rem;}
.graybtn:hover{background-color:#f0f0f0;}
.drop-img{
	width: 95%;
    height: fit-content;
    max-height: 20rem;
    min-height:7rem;
    color: #aaa;
	margin: 10px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}	
.preview-txt, .preview-mob-txt{width: 100%;}
.preview-img, .preview-mob-img{
    width: 100%;
    height: fit-content;
    display: none;
}
.preview-img img, .preview-mob-img img{width:100%;
    box-sizing: border-box; 
    border-radius: 10px;
    border: 1px dashed #aaa;
}

.dash-box{
    border: 1px dashed #aaa;
}
.preview-remove, .preview-mob-remove{
    display:none;
    padding:5px; font-size:0.85rem; color:#666; background-color: #c6c6c6;
    position: absolute; top:10px;right:10px;    
    border-radius: 5px;
    cursor: pointer;
}
.form-part .txtarea{
	height: 14rem;
    overflow-y: auto;
}	
div.wall-color{text-align: right;}
div.wall-color .wColBtn{padding: 8px 0;
    display: inline-flex; align-items: center;gap: 3px;cursor: pointer;
    justify-content: center; width:90px;
}
div.wall-color .wColBtn span.cicle{width:12px;height:12px; display:-inline-block;  border-radius:7px;}
div.wall-color .wColBtn span.cicle.white{background-color: rgb(255,255,255);border:1px solid #aaa;}
div.wall-color .wColBtn span.cicle.yellow{background-color: rgb(238, 238, 118);}
div.wall-color .wColBtn span.cicle.red{background-color: rgb(255,144,144);}
div.wall-color .wColBtn span.cicle.green{background-color: rgb(113, 199, 116);}
div.wall-color .wColBtn span.cicle.blue{background-color: rgb(130,202,236);}
div.wall-color .wColBtn span.cicle.purple{background-color: rgb(234,155,234);}

div.wall-color .wColBtn span.colorTxt{font-size: 0.9rem; font-weight: 400;}

.wall-color-ballon{
	bottom: 50px;
    right: 70px;
	width: 150px;
    height: 260px;
    display:none; 
}

.wall-color-ballon:after {
	border-top: 12px solid #fff;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 0px solid transparent;
    content: "";
    position: absolute;
    bottom:-10px;
    right:20px;
}

.wall-color-ballon h5{color:#000;font-weight:500;font-size:1.35rem; margin-bottom: 7px;}
.wall-color-ballon .color-list{display: flex;flex-flow: column;gap: 5px;}
.wall-color-ballon .color-list li{position: relative;height: 2.5rem; display: flex;
    gap: 10px; align-items: center; 
	
    border-radius: 10px;
    padding: 0 10px;
	cursor: pointer;
}
.wall-color-ballon .color-list li:hover{background-color: #fafafa;}
.wall-color-ballon .color-list li span.cicle{display:inline-block;width:15px; height:15px; border-radius: 8px;}
.wall-color-ballon .color-list li span.cicle-tit{font-size: 1rem;}
.wall-color-ballon .color-list li i{position:absolute; right:10px; top:10px; color:#1a85c7; font-size:1.3rem;}


.wall-color-ballon .color-list li.white span.cicle {background-color: rgb(255,255,255);border:1px solid #aaa;}
.wall-color-ballon .color-list li.yellow span.cicle {background-color: rgb(238, 238, 118);}
.wall-color-ballon .color-list li.red span.cicle {background-color: rgb(255,144,144);}
.wall-color-ballon .color-list li.green span.cicle {background-color: rgb(113, 199, 116);}
.wall-color-ballon .color-list li.blue span.cicle {background-color: rgb(130,202,236);}
.wall-color-ballon .color-list li.purple span.cicle {background-color: rgb(234,155,234);}


#wallWFrm .prefile{width:85px;margin-right: 10px;}
#wallWFrm .mobi-file-area{position: relative;text-align: right;height:40px;margin:10px 0;}
#wallWFrm .preview-btn {
    position: absolute;
    top: -3px;
    right: 5px;
    height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 0px 10px;
    border-radius: 10px;
    box-shadow: 3px 3px 5px;
}

#drop-mobi-area, .mobi-file-area{display:none;}

.container.greeting {
    position: relative;
}

.container.greeting::after {
    content: "";
    background-image: url(/assets/images/sub/greet_bottom_bg.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 600px;
    aspect-ratio: 16 / 8.5;
    position: absolute;
    bottom: 100px;
    left: calc(50% - 100px);
    z-index: -1;
    opacity: 0.9;
    display:none;
    
}

@media screen and (max-width: 1800px) {
    .wall-page .items-list .item{ width: calc(20% - 20px);  }   
}
@media screen and (max-width: 1520px) {
    .wall-page .items-list .item{ width: calc(25% - 20px);  }
}
@media screen and (max-width: 1400px) {
    .graduation .tab-yearList-part { justify-content: space-between; width: 100%; }        
    .paragraph-picture{gap:70px;}

    .message-page .middle_body .m_message_list { gap:2rem; width: calc(100% + 2rem); }
    .message-page .middle_body .m_message_list li {width: calc(33.33% - 2rem); }

}    
@media screen and (max-width: 1400px) {
    .message-page .middle_body_v2 .m_message_list li{gap:1rem;}
    .message-page .middle_body_v2 .m_message_list li .photo{
        width: calc(25% - 1rem);    
    }        
    .message-page .middle_body_v2 .m_message_list li .info {
        width: calc(75% - 1rem);    
    }     
}
@media screen and (max-width: 1300px) {
    .graduation .tab-yearList-part li {width: calc(25% - 20px);}
}
@media screen and (max-width: 1200px) {
    .ceo-deatil-close {right:15px; top:15px; }
    .message-page .middle_body .m_message_list li {padding:1rem; }

    .wall-page .items-list .item{ width: calc(33.3% - 20px);  }
    div.modalbgbody { position: fixed;}

    .container.greeting::after { left:calc(50% - 300px);}

    .message-page .middle_body_v2 .m_message_list li .photo{
        width: calc(30% - 1rem);    
    }        
    .message-page .middle_body_v2 .m_message_list li .info {
        width: calc(70% - 1rem);    
    }    
}
@media screen and (max-width: 1024px) {
    .graduation .tab-yearList-part li {width: calc(33.3% - 20px);}

    .paragraph-picture{gap:50px;}
    .paragraph-picture .left {width:270px;}
    .paragraph-picture .right { width: calc(100% - 320px); }
    .paragraph-picture .right div.first-txts {font-size:1.8rem;line-height: 3.0rem;margin-bottom: 1.5rem;}
    .paragraph-picture .right div {font-size: 1.4rem;  line-height: 2.3rem;margin-bottom: 1.5rem;}
    .wall-page .sub_contents_wap h4.sub_tit, .greeting .sub_contents_wap h4.sub_tit {font-size: 3.0rem;}


    div.modalbgbody { width: 90%; left:5%; }
    div.modalbgbody .ceo-part-detail {gap:20px;}
    div.modalbgbody .ceo-part-detail-left {width:30%; }
    div.modalbgbody .ceo-part-detail-right {width: calc(70% - 20px);}
    div.modalbgbody .ceo-part-detail-right p span.name {font-size:2.7rem;}
    div.modalbgbody .ceo-part-detail-right p span.ceo_order {font-size: 1.8rem; }
    div.modalbgbody .ceo-part-detail-right .ceo_message {font-size: 1.5rem; margin-top: 2rem;}

    .message-page .middle_body .m_message_list li {width: calc(50% - 2rem); }

    .message-page .middle_tab ul li { height:60px;line-height: 60px; width:250px;}
    .message-page .middle_tab ul li a {height:58px;font-size: 19px;}

    .wall-page .items-list {width:95%;}
    .wall-page .items-list .item {margin-bottom: 10px; margin-right: 10px; 
        width: calc(33.3% - 10px); }

    .mobi-file-area{display:block;}        
    #drop-mobi-area{display: flex;} 
    #drop-area{display:none;}
    .wall-write-popwrap {max-height:80%;}
    .form-part {margin:10px 0 0 0; }
    p.under-line {height:2.5rem; line-height: 2.5rem;}
    input.w-in-box {font-size:1.3rem;}


    .message-page .middle_body_v2 .m_message_list li .photo .p-info{display:flex; flex-flow: column; gap: 10px; margin-top: 20px;}
    .message-page .middle_body_v2 .m_message_list li .photo .p-info p.name{font-size: 1.7rem;color: #99c7e9;line-height: 1.5rem;}
    .message-page .middle_body_v2 .m_message_list li .photo .p-info p.add-info{font-size: 1.3rem; color: #ccc;}
    .message-page .middle_body_v2 .m_message_list li .photo .p-info span.add-info-title{font-size: 1.3rem; color: #ccc;display:block;}
    .message-page .middle_body_v2 .m_message_list li .photo .p-info span.add-info-subtitle{font-size: 1.3rem; color: #ccc;display:block;}
    .message-page .middle_body_v2 .m_message_list li .info p.name {display:none;} 
    .message-page .middle_body_v2 .m_message_list li .info p.add-info{display:none;} 
}


@media screen and (max-width: 850px) {
    .paragraph-picture{gap:30px;}
    .paragraph-picture .left {width:250px;}
    .paragraph-picture .right { width: calc(100% - 280px); }

    div.modalbgbody {padding:40px;}    
    div.modalbgbody .ceo-part-detail-right p span.name {font-size:2.5rem;}
    div.modalbgbody .ceo-part-detail-right p span.ceo_order {font-size: 1.6rem; }
    div.modalbgbody .ceo-part-detail-right .ceo_message {font-size: 1.3rem; margin-top: 1.5rem;}
    .wall-page .items-list .item {   width: calc(50% - 10px); }
}
@media screen and (max-width: 800px) {
    .paragraph-picture{flex-flow: column;}
    .paragraph-picture .left {width:100%;text-align:center;}
    .paragraph-picture .left img{width:50%; max-width: 315px; min-width: 250px; margin:0 auto;}
    .paragraph-picture .right {width:95%;margin:0 auto;}


    .message-page .middle_body_v2 .m_message_list li{flex-flow: column;}
    .message-page .middle_body_v2 .m_message_list li .photo{width: 100%;}
    .message-page .middle_body_v2 .m_message_list li .photo .per{max-width:350px; margin: 0 auto;}
    .message-page .middle_body_v2 .m_message_list li .photo .p-info span.add-info-title{display:inline-block; margin-left: 5px;}
    .message-page .middle_body_v2 .m_message_list li .info{width: 100%;}

    .message-page .middle_body_v2 .m_message_list li:nth-child(2n) {flex-flow:column;}
}
@media screen and (max-width: 768px) {
    .newMap2025 .statistics .sub_contents_wap {
        justify-content: center;
        gap:0.5rem;}

    .newMap2025 .item-left, .newMap2025 .item-right {
        padding:0 1rem;}

    .newMap2025 h2 {font-size:1.3rem;}
    .newMap2025 .item-list li span.tit {font-size:1.05rem;}

    .newMap2025 .detailBtn {
        left: unset;
        transform: none;
        right: 30px;
        bottom: 40px;
        font-size: 1.15rem;
        padding: 10px 10px;
    }
    .newMap2025 .guidemap span.dot-txt {     
        font-size:1.05rem;
    }

    .graduation .tab-yearList-part { justify-content: space-around; gap: 30px 20px;}
    .graduation .tab-yearList-part li {width: calc(50% - 20px);max-width: 280px;}
    .graduation .tab-item a {font-size:1.2rem;padding:15px;}

    .wall-page .sub_contents_wap h4.sub_tit, .greeting .sub_contents_wap h4.sub_tit {font-size: 2.5rem;}
    .paragraph-picture .right div.school-name {font-size: 1.6rem;}
    .paragraph-picture .right span.ceo-name {font-size: 6rem;margin-top: 2.2rem;}

    
    .greeting .sub_contents_wap{margin:0 auto;}

    div.principals .sub_contents_wap{margin-top:2rem;}

    div.principals .ceo_info {padding:1.5rem;height:70px;}
    div.principals .ceo_info p span {font-size:1.5rem;}
    div.principals .ceo_info p span.name {font-size:2.0rem; }    
    div.principals .ceo_info .ceo_message {font-size:1.35rem;}

    div.principals .slide-principal-item:hover .ceo_info {gap:10px;}
    div.principals .ceo_info .ceo_message {-webkit-line-clamp: 3;}

    div.modalbgbody .ceo-part-detail {flex-flow:column;}    
    div.modalbgbody .ceo-part-detail-left {
        width: 90%;
        max-width: 250px;
        max-height: 330px;
        overflow: hidden;
        border-radius: 10px;

    }      
    div.modalbgbody .ceo-part-detail-right {width:90%;}  
    .ceo-deatil-close i.xi-3x{font-size: 2rem;}
    .message-page .middle_tab ul {margin-top:1rem;}

    .message-page .middle_body .m_message_list {
        gap: 1rem;
        width: calc(100% + 1rem);
    }
    .message-page .middle_body .m_message_list li {
        width: calc(50% - 1rem);
    }

    .wall-write-btn {bottom:30px;right:30px;}
}    
@media screen and (max-width: 650px) {
    .hanmun {display: block;margin-bottom: 15px; }
    div.modalbgbody {padding: 40px 30px;}
    div.modalbgbody .ceo-part-detail-right {width:100%;}


    .message-page .middle_body .m_message_list {
        gap: 1rem;
        width: 100%;
        flex-flow: column;
        align-items: center;
    }
    .message-page .middle_body .m_message_list li {
        width: 90%;
    }
    .container.greeting::after { width:90%;}

    .message-page .middle_body_v2 .m_message_list li .photo .per{max-width: 300px;}
    .message-page .middle_body_v2 .m_message_list li .info div.message-txt{word-break: break-all;}
}
@media screen and (max-width: 570px) {
    .sub_common_loc {display: none;}
    .container.greeting::after { display:none; }
    .newMap2025 .statistics .sub_contents_wap {
        flex-flow: column;
        align-items: center;
        gap: 1.5rem;
        margin: 0 auto 2rem;
    }    
    .newMap2025 .item-list {
        max-height: 150px;
        overflow-y: auto;
        padding-right: 1rem;
    }    
    .newMap2025 .guidemap {padding-top:0.5rem;}
    .newMap2025 .guidemap p {height:23px;line-height:23px;}    

    
    .graduation .tab-yearList-part { gap:10px; }
    .graduation .tab-yearList-part li { width: calc(50% - 5px); }
    .graduation .tab-yearList-part li a span {font-size:1.0rem;}

    .wall-page .sub_contents_wap h4.sub_tit, .greeting .sub_contents_wap h4.sub_tit {
        font-size: 2.0rem;
        margin: 0rem 0 2rem;
    }
    .paragraph-picture .right div { word-break: break-all; }
    .paragraph-picture .right div.first-txts {text-align: left; letter-spacing: -2px;font-size:1.6rem;}
    .paragraph-picture .right div.school-name {font-size: 1.5rem;}
    .paragraph-picture .right span.ceo-name {font-size: 5rem;margin-top: 2.0rem;}

    .wall-page .items-list .item {   width: calc(100% - 40px); max-width: 350px;margin:0 20px 20px 20px;}
    .wall-write-popwrap {right:20px;}
    .form-part .txtarea {height:10rem;}
    textarea.w-in-box {font-size:1.2rem;max-height:120px;}
    .graybtn {padding:15px;}
    .wall-write-popwrap .pop-close.graybtn {width:42px; height:42px;box-sizing: border-box;
        padding:0; display:flex; align-items: center;justify-content: center;
      }

}

@media screen and (max-width: 470px) {
    .graduation .tab-yearList-part li a span {font-size:0.8rem;}
    .paragraph-picture .right div.first-txts {font-size:1.45rem;}
    .paragraph-picture .right div { font-size: 1.3rem; line-height: 2.2rem;}

    div.modalbgbody .ceo-part-detail-left {width: 80%;}
    div.principals .ceo_info p span {font-size:1.3rem;}
    div.principals .ceo_info p span.name {font-size:1.8rem; }    
    div.principals .ceo_info .ceo_message {font-size:1.15rem;margin-top: 1rem;}

    .message-page .middle_body .m_message_list li { width: 95%;}
    .wall-write-popwrap {width:80%; right:5%;}

    .graybtn { padding: 10px; }
    .message-page .middle_body_v2 .m_message_list li .photo .per {max-width: 250px;}
    .message-page .middle_body_v2 .m_message_list li .info div.message-txt{font-size: 1.15rem;}
    
   
}