@import url("/css/web/intl/T0001/sub.css"); 

/* 인사말 */
.greetings { position:relative; height:auto; overflow:hidden; }
.greetings .img { position:relative; width:36.5%; float:right; padding:1.5rem 1.5rem 150px 0; font-size:0; }
.greetings .img:after { content:""; position:absolute; right:0; bottom:0; width:60%; max-width:267px; height:181px; background:url('/images/web/life/sub/greeting_bg.png') no-repeat center bottom / contain; z-index:-1; }
.greetings .img:before { content:""; position:absolute; top:0; right:0; width:80%; height:17.5rem; background:#cce8fc; z-index:-1; }
.greetings .img span { display:block; width:100%; height:25rem; border:0.35rem solid #fff; background:no-repeat center / cover;} 
.greetings dl { width:57%; float:left; }
.greetings dl dt { line-height:1.2; font-style:italic; margin-bottom:3rem;}
.greetings dl dt .txt1 { position:relative; padding:1.8rem 0 0 2rem; font-size:1.5rem; color:#000; background:url('/images/web/life/sub/greeting_point.png') no-repeat left top; word-break:keep-all; }
.greetings dl dt .txt1 strong { font-size:2rem; font-weight:700; }
.greetings dl dt .txt2 { text-align:right; font-size:1.5rem; margin-top:0.5rem;}
.greetings dl dt .txt2 span { position:relative; background:linear-gradient(to bottom, transparent 70%, #afedff 0) left center no-repeat} 
.greetings dl dd { font-size:0.85rem; font-weight:600; line-height:1.8; } 
.greetings dl dd .person { position:relative; margin-top:2rem; padding-top:0.5rem; color:#222; font-size:1rem; font-weight:700; }
.greetings dl dd .person:before { content:""; position:absolute; left:0; top:0; width:1.8rem; height:0.2rem; background:#81bde6; border-radius:2px; }

/* 구성원 */
.orgWrap { position:relative; z-index:2; }
.orgWrap:before { content:""; position:absolute; left:50%; bottom:0; width:1px; height:100%; background:#c2c9d5; }

.orgWrap .org1 { position:relative; margin:0 auto; } 
.orgWrap .org1 span { position:relative; display:block; width:11rem; height:4.5rem; background:#3274d4; color:#fff; font-size:1.2rem; font-weight:700; border-radius:1rem; line-height:1.5; text-align:center; padding:0.8rem; box-shadow:6px 6px 0 #e8f0fa; margin:0 auto; overflow:hidden; }
.orgWrap .org1 span:before { content:"SNUE"; position:absolute; bottom:-0.5rem; right:0.5rem; font-style:italic; color:#4a81d7; font-size:3rem; font-weight:800; line-height:1; }
.orgWrap .org1 span em { position:relative; }  
.orgWrap .org1 span strong { position:relative; display:block; font-size:0.9rem; font-weight:600;}
 
.orgWrap .org2 { position:relative; margin:2.5rem auto 0; width:100%; max-width:30rem; height:auto; overflow:hidden; } 
.orgWrap .org2:before { content:""; position:absolute; right:0; top:50%; width:50%; height:1px; background:#c2c9d5; }
.orgWrap .org2 span { position:relative; display:block; width:10rem; height:3.3rem; background:#2a5ab2; color:#fff; font-size:1rem; font-weight:600; line-height:1.5; padding:0.3rem; border-radius:0.5rem; box-shadow:6px 6px 0 #eee; overflow:hidden; float:right; text-align:center; } 
.orgWrap .org2 span strong { display:block; font-size:0.8rem; font-weight:400; }
 
.orgWrap .org_list3 { position:relative; display:flex; flex-wrap:wrap; padding-top:2rem; }
.orgWrap .org_list3:before { content:""; position:absolute; left:16.666%; top:2rem; width:66.666%; height:1px; background:#c2c9d5; }
.orgWrap .org_list3 > li { position:relative; flex:1; margin:1.5rem 0.2rem 0; border:1px solid #869bb0; border-radius:0.5rem; background:#fff; box-shadow:4px 4px 0 #eee; }
.orgWrap .org_list3 > li:before { content:""; position:absolute; left:50%; top:-1.5rem; width:1px; height:1.5rem; background:#c2c9d5; z-index:-1; }
.orgWrap .org_list3 > li .dep1 { display:flex; height:2.6rem; align-items:center; justify-content:center; background:#869bb0; color:#fff; font-size:0.9rem; line-height:1.2; border-radius:0.4rem 0.4rem 0 0; }
.orgWrap .org_list3 > li .dep2 { line-height:1.2; padding:0.5rem; border-bottom:1px solid #c7d3df; text-align:center; background:#ebf1f7; }
.orgWrap .org_list3 > li > ul { padding:1rem; }
.orgWrap .org_list3 > li > ul > li { position:relative; padding-left:0.5rem; }
.orgWrap .org_list3 > li > ul > li:before { content:""; position:absolute; left:0; top:0.6rem; width:0.15rem; height:0.15rem; background:#327aa3; border-radius:50%; }
  
/* 연혁 */
.historyBox { position:relative; margin-top:2rem; }
.historyBox:before { content:"HISTORY"; position:absolute; right:0; top:-6.3rem; font-size:5rem; font-weight:900; font-family: 'Montserrat'; font-style:italic; color:#f3f3f3; z-index:-1; }
.historyBox dl { position:relative; }
.historyBox dl:not(:last-child) { padding-bottom:2rem; }
.historyBox dl:not(:last-child):before { content:""; position:absolute; top:0; left:4.8rem; width:1px; height:100%; border-left:1px dotted #9eaec5; } 
.historyBox dl:after { content:""; display:block; clear:both; }
.historyBox dl dt { position:relative; width: 9.65rem; font-family: 'Montserrat'; line-height:2.5rem; color:#fff; text-align:center; background:#2759a5; font-size:1.2rem; font-weight:600; float:left; }
.historyBox dl dt:after { content:""; position:absolute; right:-100%; top:50%; width:100%; height:1px; background:#dedede; z-index:-1; }
.historyBox dl dt:before { content:""; position:absolute; right:-0.25rem; top:1rem; width:0.5rem; height:0.5rem; box-shadow:1px 1px 9px rgba(0,0,0,0.4); border-radius:50%; background:#fff; border:2px solid #2759a5;}
.historyBox dl dd { width:calc(100% - 12rem); background:#fff; border:1px solid #00b5f0; border-radius:0.5rem; min-height:2.5rem; box-shadow:4px 4px 0 #f4f4f4; float:right; padding:0.6rem 2rem; }
.historyBox dl dd ul li { position:relative; padding:0 0 0 2.5rem; font-size:0.85rem; line-height:1.6; }
.historyBox dl dd ul li.long { padding:0 0 0 8rem;}
.historyBox dl dd ul li + li { margin-top:0.8rem;}
.historyBox dl dd ul li strong { position:absolute; left:0; top:0.25rem; line-height:1; font-weight:700; color:#2163c1; font-size:0.9rem; }

/* 오시는길 */
.mapWrap { position:relative; border-radius:1.5rem; border:2px solid #3274d4; box-shadow:8px 8px 0 #eee; overflow:hidden; }
.mapWrap .mapBox {position:relative; height:25.5rem; }
.mapWrap .location { position:absolute; left:0; bottom:0; width:90%; max-width:945px; padding:1rem 1.5rem; color:#fff; background:#3274d4; border-radius:0 1.5rem 0 0; }
.mapWrap .location p { position:relative; padding:0.2rem 0 0.2rem 5rem; background:url('/images/web/intl/sub/ico_map.png') no-repeat left top 0.2rem; font-size:0.9rem; word-break:keep-all; } 
.mapWrap .location p strong { position:absolute; left:2rem; top:0.1rem; font-weight:700; font-size:1rem; }
.mapTit { position:relative; font-size:1rem; font-weight:600; padding-left:2rem; margin-bottom:0.7rem; }
.mapTit:before { content:""; position:absolute; left:0; top:0; width:1.75rem; height:1.75rem; background:#2759a5; border-radius:50%; }
div + .mapTit { margin-top:1.2rem;}
.mapTit.subway:before { background:#2759a5 url('/images/web/intl/sub/ico_subway.png') no-repeat center; }
.mapTit.bus:before { background:#2759a5 url('/images/web/intl/sub/ico_bus.png') no-repeat center; }
.map_detail_box{position:relative; padding:2rem 1.2rem 1rem; box-sizing:content-box-box; height: calc(100% + 10px); }
.map_detail_box:before{content:"\eb42"; position:absolute; left:1rem; top:-1.4rem; width:2.8rem; height:2.8rem; border-radius:50%; background:#0098d9; color:#fff; font-family:"xeicon"; text-align:center; font-size:1.5rem; line-height:2.8rem; }
.map_detail_box button{position:absolute; right:1rem; top:0.7rem; width:1.8rem; height:1.8rem; line-height:1.8rem; text-align:center; background:#eee; border-radius:50%; font-size:1rem; z-index:2; }
.map_detail_box .txt1{position:relative; color:#0d50a3; font-size:0.85rem; font-weight:600; margin-bottom:0.5rem; padding-bottom:0.3rem; }
.map_detail_box .txt1:before{content:""; position:absolute; left:0; bottom:0; width:1.5rem; height:3px; background:#0060b4; }
.map_detail_box .txt2{position:relative; padding:0.2rem 0 0.2rem 0.6rem; line-height:1.4; }
.map_detail_box .txt2:before{content:""; position:absolute; left:0; top:0.5rem; width:0.25rem; height:0.25rem; border-radius:50%; font-size:0.8rem; background:#92a7ba; }
.map_detail_box + .map_detail_box{padding-top:0; }
.map_detail_box + .map_detail_box:before{display:none; }

/* 추진사항 */   
.applyLst { position:relative; z-index:2; display:flex; word-break:keep-all; }
.applyLst dl { position: relative; flex:1; background:#f4f4f4;border-radius:0.7rem; }
.applyLst dl + dl { margin-left:2.5rem;}
.applyLst dl + dl:before { content:"\e938"; position:absolute; left:-2rem; top:calc(50% + 0.5rem); font-family:"xeicon"; font-size:1.5rem; color:#555; -webkit-transform:rotate(-90deg); transform:rotate(-90deg);  }
.applyLst dl dt { position:relative; display:flex; flex-direction:column; width:100%; height:5rem; font-size:0.9rem; font-weight:600; border:3px solid #1497e3; border-radius:0.7rem; align-items:center; justify-content: center; text-align:center; background:#fff; line-height:1.2; padding:0 0.5rem;  }
.applyLst dl dt strong { color:#1497e3; font-family:"Montserrat"; margin-bottom:0.3rem; }
.applyLst dl dd { position:relative; display:flex; align-items:center; width:100%; padding:1.25rem 1.5rem; } 
.applyLst dl:nth-of-type(2n) dt { border:3px solid #2759a5; }
.applyLst dl:nth-of-type(2n) dt strong {color:#2759a5; }



@media (max-width:1240px){ 
    /* 인사말 */
    .greetings .img { width:15rem; padding:1rem 1rem 3rem 0; } 
    .greetings .img:before { height:5rem;}
    .greetings .img span { height:15rem;}
    .greetings dl  { width:calc(100% - 17rem); }
    .greetings dl dt .txt1 { font-size:1.2rem; line-height:1.4; }
    .greetings dl dt .txt1 strong { font-size:1.5rem;}
    .greetings dl dt .txt2 { font-size:1.2rem;} 

    /* 추진사항 */
    .applyLst dl + dl { margin-left:1rem;}
    .applyLst dl + dl:before { display:none; }
    
}
@media (max-width:980px){  
    /* 추진사항 */
    .applyLst { display:block; }
    .applyLst dl { display:flex; }
    .applyLst dl + dl { margin:1rem 0 0;}
    .applyLst dl + dl:before { display:none;} 
    .applyLst dl dt { width:10rem; }
    .applyLst dl dd { width:calc(100% - 10rem); padding:0.5rem 1rem; }

}
@media (max-width:860px){  
    /* 인사말 */
    .greetings .img { float:none; width:100%; max-width:20rem; margin:1rem auto 0;}
    .greetings .img:after { bottom:1rem;}
    .greetings .img span { height:18rem;}
    .greetings dl  { width:100%; float:none; } 
    .greetings dl dt br { display:none; }
    .greetings dl dt { margin-bottom:1rem; }
    .greetings dl dt .txt1 {font-size:1rem; padding:0; background:none; }
    .greetings dl dt .txt2 { font-size:1rem; text-align:left; margin-bottom:2rem; } 
    .greetings dl dt .txt2 span:before { bottom:-0.1rem; height:0.6rem; }
    .greetings dl dd { line-height:1.6; font-size:0.8rem;}  

    /* 구성원 */ 
    .orgWrap .org_list3:before { left:25%; width:50%;}
    .orgWrap .org_list3 > li { flex:1 1 46%; margin:1.5rem 2% 0; }
}
@media (max-width:768px){  
        
    /* 연혁 */ 
    .historyBox:before { font-size:3rem; top:-3.5rem; } 
    .historyBox dl:not(:last-child) { padding-bottom:1rem; } 
    .historyBox dl:before,
    .historyBox dl dt:before,
    .historyBox dl dt:after { display:none; } 
    .historyBox dl dt { width:100%; border-radius:0.5rem 0.5rem 0 0;} 
    .historyBox dl dd {width:100%; padding:1rem; border-radius:0 0 0.5rem 0.5rem;} 

}
@media (max-width:540px){   

    /* 구성원 */ 
    .orgWrap .org1 span { width:100%; }

    .orgWrap .org2 { padding:1rem 0; margin:0;}
    .orgWrap .org2 span{ width:100%; } 

    /* 오시는길 */ 
    .mapWrap .mapBox {position:relative; height:20rem; }
    .mapWrap .location { position:relative; left:auto; top:auto; width:100%; border-radius:0; } 
    .mapWrap .location p { padding-left:2.5rem; font-size:0.8rem; }
    .mapWrap .location p strong { position:relative; left:auto; top:auto; display:block; }

    /* 추진사항 */ 
    .applyLst dl { display:block; } 
    .applyLst dl dt { display:block; width:100%; height:auto; padding:0.5rem 1rem; }
    .applyLst dl dt strong { display:block; }
    .applyLst dl dd { width:100%; padding:1.5rem 1rem;}

} 
@media (max-width:380px){  
    /* 인사말 */
    .greetings .img { width:15rem; padding:0.5rem 0.5rem 2rem 0;} 
    .greetings .img span { height:12rem;}
    
    /* 구성원 */
    .orgWrap .org_list3 { padding-top:1rem;} 
    .orgWrap .org_list3:before { display:none; }
    .orgWrap .org_list3 > li { flex:1 1 100%; margin:0; }
    .orgWrap .org_list3 > li + li { margin-top:1rem; }
    
    /* 연혁 */ 
    .historyBox dl dd ul li.long { padding:0;} 
    .historyBox dl dd ul li.long strong { position:relative; left:auto; top:auto; margin-bottom:0.5rem; display:block;}
     
}