/* MC_box */
[class^="MC_box"] {min-height: unset;}
.MC_box5::before {content: "YPEDU OFFICE OF EDUCATION"; letter-spacing: 0.175rem;}

/* intro */
.MC_itr { padding: 1.75rem 0; }
.MC_itr::before,
.MC_itr::after {display: none;}
.MC_itr{flex-direction: column;}
.MC_itr .lft { padding-left: 0; display: flex; align-items: center;}
.MC_itr .lft > .heading {display: flex; align-items: center; font-size: 2.15rem;}
.MC_itr .lft > .heading .imgWr {font-size: 0; line-height: 0; margin-right: calc(var(--font-size-050) * 0.4);}
.MC_itr .lft > .heading .imgWr img {width: auto; max-width: calc(var(--font-size-050) * 1.1); height: auto; max-height: calc(var(--font-size-050) * 2.06);}
.MC_itr .lft > .heading strong {position: relative; top: 0.2em; text-shadow: -3px -3px 0 #0e3672, 3px -3px 0 #0e3672, -3px 3px 0 #0e3672, 3px 3px 0 #0e3672;}
.MC_itr .lft > .heading strong span {color: #ffe036;}
.MC_itr .lft > .heading strong span::after { width: 3.3rem; height: 2.8rem; max-width: none; max-height: none; background: url(/00_common/images/web/sharenuri/dumul/main/intro_bcl.png) no-repeat center center / cover; top: -2.7rem; right: 0.8rem;}
.MC_itr .lft > p{margin-top: 0; line-height: 1.5rem; margin-left: 2rem;}
.MC_itr .lft > p .fc_mgt {color: #ffdb4a;}
.MC_itr .lft > p .fc_bl {color: #6ad3ff;}

/* intro - map */
.MC_itr .rght { }


.map_wrap{ display: flex; align-items: center; justify-content: center; }
.map_wrap .titTab{ flex-shrink: 0; width: 12.5rem; background:#fff; border-radius: 1.5rem; padding: 1.5rem; } 
.map_wrap .titTab ul{}
.map_wrap .titTab ul li {}
.map_wrap .titTab ul li ~ li {margin-top: 1rem;}
.map_wrap .titTab ul li a{position: relative; display: block; z-index: 1; padding-left: 3rem; line-height: 2rem; color: #000; font-weight: 600;}
.map_wrap .titTab ul li a::before{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: ''; display: block; width: 2rem; height: 2rem; border-radius: 50%; background:var(--mColor) var(--icon) no-repeat center center; z-index: 1;}
.map_wrap .titTab ul li a::after{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: ''; z-index: -1; display: block; height: 2rem; border-radius: 5rem; background:var(--mColor); width: 0; transition: 0.15s;}
.map_wrap .titTab ul li a.current{color: #fff;}
.map_wrap .titTab ul li a.current::after{width: 100%;}

.map_wrap .imgWr{flex-shrink: 0; width: calc(100% - 12.5rem); position: relative; padding-left: 4.5rem; z-index: 1;}
.map_wrap .imgWr img{display: block; width: 100%; height: auto; position: relative; z-index: -1;}
.map_wrap .imgWr .list_wrap{position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1;}

.map_wrap .imgWr .list_wrap .list_con{display: none;}
.map_wrap .imgWr .list_wrap .list_con.on{display: block;}
.map_wrap .imgWr .list_wrap .list_con p{position: absolute; height: 1.5rem; background: #fff; border:2px solid var(--mColor); color: #000; font-size: 0.8rem; border-radius: 5rem; padding: 0 0.7rem 0 1.7rem; font-weight: 600;} 
.map_wrap .imgWr .list_wrap .list_con p::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background:var(--mColor) var(--icon) no-repeat center center / 60%;}
.map_wrap .imgWr .list_wrap .list_con p.right{ padding: 0 1.7rem 0 0.7rem;}
.map_wrap .imgWr .list_wrap .list_con p.right::before{left: auto; right: 0;}

#list1 .link01{ left: 8%; top: 41%;}
#list1 .link02{ left: 37%; top: 53%;}

#list2 .link01{ left: 8%; top: 41%;}
#list2 .link02{ left: 37%; top: 53%;}
#list2 .link03{ left: 28%; top: 55%;}
#list2 .link04{ left: 54%; top: 61%;}

#list3 .link01{left: 22%;top: 48%;}
#list3 .link02{left: 29%;top: 56%;}
#list3 .link03{left: 41%;top: 54%;}
#list3 .link04{left: 55%;top: 64%;}
#list3 .link05{left: 66%;top: 45%;}
#list3 .link06{left: 82%;top: 78%;}
#list3 .link07{left: 53%;top: 60%;}

#list4 .link01{left: 8%;top: 40%;}
#list4 .link02{left: 22%;top: 49%;}
#list4 .link03{left: 39%;top: 57%;}
#list4 .link04{left: 37%;top: 63%;}
#list4 .link05{left: 53%;top: 60%;}
#list4 .link06{left: 66%;top: 46%;}
#list4 .link07{left: 81%;top: 78%;}

#list5 .link01{left: 38%;top: 53%;}

#list6 .link01{left: 54%;top: 56%;}

#list7 .link01{left: 54%;top: 56%;}

#list8 .link01{left: 54%;top: 56%;}

#list9 .link01{left: 37%;top: 53%;}

#list10 .link01{left: 37%;top: 53%;}

#list11 .link01{left: 8%;top: 41%;}
#list11 .link02{left: 30%;top: 46%;}
#list11 .link03{left: 28%;top: 55%;}
#list11 .link04{left: 30%;top: 58%;}
#list11 .link05{left: 37%;top: 53%;}
#list11 .link06{left: 39%;top: 56%;}
#list11 .link07{left: 55%;top: 60%;}
#list11 .link08{left: 67%;top: 47%;}


.list1 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_01.png);
    --mColor : #23a62c;
}
.list2 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_02.png);
    --mColor : #ff4949;
}
.list3 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_03.png);
    --mColor : #a78754;
}
.list4 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_04.png);
    --mColor : #3fa38f;
}
.list5 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_05.png);
    --mColor : #443fa3;
}
.list6 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_06.png);
    --mColor : #bb4dbf;
}
.list7 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_07.png);
    --mColor : #834dbf;
}
.list8 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_08.png);
    --mColor : #554dbf;
}
.list9 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_09.png);
    --mColor : #e76b18;
}
.list10 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_10.png);
    --mColor : #729d0a;
}
.list11 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_11.png);
    --mColor : #4291fd;
}
.list12 {
    --icon : url(/00_common/images/web/sharenuri/dumul/main/ico_mapList_12.png);
    --mColor : #07437f;
}



.map_wrap .info{position: absolute; right: 1rem; top: 8rem; border-radius: 1rem; border: 1px dashed #fff; padding: 1rem; opacity: 0.5;}
.map_wrap .info span{display: block; padding-left: 1rem; position: relative;}
.map_wrap .info span::before{content: "\e9aa"; display: block; font-family: 'xeicon'; position: absolute; left: 0; top: 0;}




















/* actShr */
.MC_actShr .titWr {display: flex; justify-content: center; align-items: center;}
.MC_actShr .titWr .heading {font-size: var(--font-size-032); white-space: nowrap; overflow: hidden;}
.MC_actShr .titWr .btnMore {flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: calc(var(--content-btn) * 0.8); height: calc(var(--content-btn) * 0.8); border-radius: calc(var(--content-btn) * 0.2); border: 1px solid var(--color-skyblue); font-size: var(--font-size-018); color: #fff; margin-left: 1rem; position: relative; overflow: hidden;}
.MC_actShr .titWr .btnMore::before {content: ""; display: block; width: 100%; height: 100%; background: var(--color-skyblue); position: absolute; left: 0; top: 0; z-index: -2;}
.MC_actShr .titWr .btnMore::after {content: ""; display: block; width: 0; height: 100%; background: #fff; position: absolute; right: 0; top: 0; z-index: -1;}
.MC_actShr .conWr {margin-top: 2.5rem; position: relative;}
.MC_actShr .conWr .actShrSlide {margin: 0 max(-1rem, -1.25vw);}
.MC_actShr .conWr .actShrSlide .item {padding: 0 min(1rem, 1.25vw);}
.MC_actShr .conWr .actShrSlide .item .itmWr {font-size: var(--font-size-022);}
.MC_actShr .conWr .actShrSlide .item .itmWr .imgWr {width: 100%; height: calc(var(--font-size-022) * 9.82); max-height: 10.8rem; border-radius: var(--font-size-022); font-size: 0; line-height: 0; overflow: hidden;}
.MC_actShr .conWr .actShrSlide .item .itmWr .imgWr img {width: 100%; height: 100%; object-fit: cover;}
.MC_actShr .conWr .actShrSlide .item .itmWr .txtWr {padding: 0 0.25em; margin-top: 1em;}
.MC_actShr .conWr .actShrSlide .item .itmWr .txtWr .tit {font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.MC_actShr .conWr .actShrSlide .item .itmWr .txtWr .dsc {display: flex; align-items: center; font-size: 0.73em; color: #666; margin-top: 0.25em;}
.MC_actShr .conWr .actShrSlide .item .itmWr .txtWr .dsc i {margin-right: 0.5em;}
.MC_actShr .conWr .control a {display: flex; justify-content: center; align-items: center; width: var(--content-btn); height: var(--content-btn); border-radius: 50%; border: 1px solid #ccc; background: #fff; box-shadow: 0 0.45rem 0.5rem rgba(0,0,0,0.1); font-size: calc(var(--content-btn) * 0.4); position: absolute; top: calc((var(--font-size-022) * 4.91) - (var(--content-btn) * 0.5));}
.MC_actShr .conWr .control a.prv {left: calc(var(--content-btn) * -0.5);}
.MC_actShr .conWr .control a.nxt {right: calc(var(--content-btn) * -0.5);}
.MC_actShr .noData {display: flex; align-items: center; justify-content: center; margin-top: 2.5rem; height: 15.1rem; border-radius: 1rem; background: #f2f2f2; }
/* actShr : active */
.MC_actShr .titWr .btnMore,
.MC_actShr .titWr .btnMore::after,
.MC_actShr .conWr .actShrSlide .item .itmWr .imgWr img,
.MC_actShr .conWr .actShrSlide .item .itmWr .txtWr .tit,
.MC_actShr .conWr .control a {transition: var(--trst-short);}
.MC_actShr .titWr .btnMore:hover,
.MC_actShr .titWr .btnMore:focus {color: var(--color-skyblue);}
.MC_actShr .titWr .btnMore:hover::after,
.MC_actShr .titWr .btnMore:focus::after {width: 100%; left: 0;}
.MC_actShr .conWr .actShrSlide .item .itmWr:hover .imgWr img,
.MC_actShr .conWr .actShrSlide .item .itmWr:focus .imgWr img {transform: scale(1.1);}
.MC_actShr .conWr .actShrSlide .item .itmWr:hover .txtWr .tit,
.MC_actShr .conWr .actShrSlide .item .itmWr:focus .txtWr .tit {font-weight: 700;}
.MC_actShr .conWr .control a:hover,
.MC_actShr .conWr .control a:focus {border-color: var(--color-skyblue); background: var(--color-skyblue); color: #fff;}



/* media query mobile */
@media screen and (max-width: 1840px) {

    /* actShr */
    .MC_actShr .conWr {margin-top: calc(var(--content-white-space) * 0.4);}
}



@media screen and (min-width: 1641px) {

    /* MC_wrap */
    .MC_wrap1 {padding: var(--header-bottom-height) 0 calc(var(--content-white-space) * 0.75);}
}



@media screen and (max-width: 1640px) {

    /* intro */
    .MC_itr { padding: 3.5rem 0 ; }
}



@media screen and (max-width: 1440px) {

    
}



@media screen and (max-width: 1240px) {

    /* intro - map */
    .map_wrap{flex-direction: column;}
    .map_wrap .titTab{width: 100%; padding: 0.5rem;}
    .map_wrap .titTab ul{display: flex; flex-wrap: wrap; justify-content: flex-start;}
    .map_wrap .titTab ul li{width: 25%; padding: 0.5rem; }
    .map_wrap .titTab ul li ~ li{margin-top: 0;}

    .map_wrap .imgWr{width: calc(100vw - 2rem); padding-right:7%; margin-top: 1rem;}
    .map_wrap .info{display: none;}
}



@media screen and (max-width: 1024px) {

    /* actShr */
    .MC_actShr .conWr {padding: 0 calc(var(--content-btn) * 0.5);}
    .MC_actShr .conWr .control a.prv {left: 0;}
    .MC_actShr .conWr .control a.nxt {right: 0;}

    .MC_itr .lft > p{text-align: left;}
    
    }
    
    
    
@media screen and (max-width: 900px) {
        

}



@media screen and (max-width: 768px) {
    .MC_itr{align-items: flex-start;}
    .MC_itr .lft{flex-direction: column; margin-bottom: 2rem;}
    .MC_itr .lft > p{text-align: center; margin-top: 1rem; margin-left: 0;}

    .map_wrap{display: block;}
    .map_wrap .titTab{width: calc(100vw - 2rem);}
    .map_wrap .titTab ul{align-items: center;}
    .map_wrap .titTab ul li{width: 33.33%;}
    .map_wrap .titTab ul li a{line-height: 1.2rem;}
    .map_wrap .imgWr{overflow-x: auto;}
    .map_wrap .imgWr img{min-width: 30rem;}
}



@media screen and (max-width: 640px) {
    .map_wrap .titTab ul li{width: 50%;}
}



@media screen and (max-width: 580px) {
    
}



@media screen and (max-width: 480px) {
}



@media screen and (max-width: 380px) {
    .map_wrap .titTab {border-radius: 0.5rem; padding: 0.5rem;}
    .map_wrap .titTab ul{height: 10rem; overflow-y: auto;  }
    .map_wrap .titTab ul li{width: 100%;}
}