﻿@import url("/css/web/intl/T0003/sub.css"); 

/* header */ 
#gnb .mnTit ul li { flex:1; }

/* 인사말 */
.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:2.1rem; color:#000; font-weight:700; background:url('/images/web/life/sub/greeting_point.png') no-repeat left top; }
.greetings dl dt .txt2 { text-align:right; font-size:1.7rem; 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 .org1 { position:relative; padding-bottom:3rem; margin:0 auto; }
.orgWrap .org1:before { content:""; position:absolute; left:50%; bottom:0; width:1px; height:3rem; background:#c2c9d5; }
.orgWrap .org1 span { position:relative; display:flex; justify-content:center; align-items:center; width:11rem; height:4.5rem; background:#3274d4; color:#fff; font-size:1.2rem; font-weight:700; border-radius:1rem; 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 .org2 { position:relative; padding:2.5rem 0; margin:0 auto; }
.orgWrap .org2:before { content:""; position:absolute; left:50%; bottom:0; width:1px; height:100%; background:#c2c9d5; }
.orgWrap .org2 span { position:relative; display:flex; justify-content:center; align-items:center; width:10rem; height:3.3rem; background:#2a5ab2; color:#fff; font-size:1rem; font-weight:600; border-radius:0.5rem; box-shadow:6px 6px 0 #eee; margin:0 auto; overflow:hidden; } 

.orgWrap .org_list1 { position:relative; display:flex; width:100%; max-width:37rem; justify-content:space-between; margin:0 auto; }
.orgWrap .org_list1:before { content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:#c2c9d5; z-index:-1; }
.orgWrap .org_list1:after { content:""; position:absolute; left:0; top:50%; width:100%; height:1px; background:#c2c9d5; z-index:-1; }
.orgWrap .org_list1 > li span { display:block; width:10rem; color:#fff; border-radius:0.5rem; line-height:3.3rem; font-size:1rem; font-weight:600; background:#0068b7; text-align:center; box-shadow:6px 6px 0 #eee;}

.orgWrap .org_list2 { position:relative; display:flex; width:100%; max-width:37rem; justify-content:space-between; margin:0 auto; }
.orgWrap .org_list2:before { content:""; position:absolute; left:5rem; top:0; width:calc(100% - 10rem); height:1px; background:#c2c9d5; z-index:-1; }
.orgWrap .org_list2 > li { position:relative; padding-top:1.5rem; }
.orgWrap .org_list2 > li:before {content:""; position:absolute; left:50%; top:0; width:1px; height:1.5rem; background:#c2c9d5; z-index:-1; }
.orgWrap .org_list2 > li span { display:block; width:10rem; color:#fff; border-radius:0.5rem; line-height:3.3rem; font-size:0.9rem; font-weight:600; background:#44576b; text-align:center; box-shadow:6px 6px 0 #eee;} 
  
/* 캠퍼스맵 */
.mapInfo { display:flex; flex-wrap:wrap;}
.mapInfo li { position:relative; flex:1 1 30%; vertical-align:top; padding:0.5rem 0.5rem 0.5rem 2.2rem; }
.mapInfo li i { position:absolute; left:0; top:0.3rem; display:inline-block; width:1.75rem; height:1.75rem; background:#1484d3; border-radius:50%; line-height:1.75rem; text-align:center; color:#fff; }
.mapInfo li:first-child { flex:1 1 100%; }
.mapInfo li:first-child i { background:#2759a5; }
.campusmap{position:relative; width:100%; font-size:0; margin-top:2rem; border-bottom:4px solid #abbac1; }
.campusmap:before{content:""; position:absolute; left:-1px; top:-1px; width:calc(100% + 2px); height:5px; background:#0098d9; z-index:2; }
.campusmap:after{content:""; position:absolute; left:-1px; top:-1px; width:5px; height:5rem; background:#0098d9;z-index:2; }

.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; }

/* 자가검사 */
.testTit { position:relative; padding:3rem 1rem; text-align:center; word-break:keep-all; background:url('/images/web/life/sub/testTit_bg.png') no-repeat center / cover; }
.testTit:before { content:""; position:absolute; left:1rem; bottom:0; width:243px; height:147px; background:url('/images/web/life/sub/testTit_img.png') no-repeat bottom left / contain; }
.testTit:after { content:""; position:absolute; right:0; bottom:0; width:228px; height:147px; background:url('/images/web/life/sub/testTit_img2.png') no-repeat center bottom / contain; }
.testTit p { position:relative; font-size:1.2rem; color:#0e0e0e; z-index:2; }

#numTable label { opacity:0; font-size:0;}

/* 교내외상담기관 안내 */
.contact_list { height:auto; font-size:0; overflow:hidden; margin-bottom:2rem;}
.contact_list li { display:inline-block; vertical-align:top; width:32%; margin-right:2%; margin-bottom:1rem; }
.contact_list li:nth-child(3n) { margin-right:0;}
.contact_list li div { border:1px solid #849da7; border-radius:0.75rem; text-align:center; box-shadow:4px 4px 0 #f1f1f1; overflow:hidden; }
.contact_list li div span { position:relative; display:flex; align-items:center; justify-content:center; background:#fff; height:5rem; padding:0 0.5rem; }
.contact_list li div span img { max-width:100%; }
.contact_list li div p { position:relative; min-height:3.3rem; padding:1rem; color:#383838; background:#fafafa; font-size:0.8rem; }
.contact_list li div p:before { content:""; position:absolute; left:5%; top:0; width:90%; height:1px; border-top:1px dotted #becbd1; }
.contact_list li div p strong { font-size:0.9rem; font-weight:800; }
.contactBox .detailCont { margin-top:2rem;}

/* 또래상담자 */
.adviceLst { display:flex; } 
.adviceLst li { position:relative; flex:1; background:#d9f4ff; padding:5rem 1rem 1rem; border-radius:1rem; margin-top:6rem; text-align:center; }
.adviceLst li + li { margin-left:1rem; }
.adviceLst li img { position:absolute; left:50%; top:-5rem; -webkit-transform:translateX(-50%); transform:translateX(-50%); }
.adviceLst li strong { display:block; font-size:1rem; color:#2ca7d9; font-weight:700; margin-bottom:0.5rem; }
.adviceLst li p { font-size:0.95rem; color:#333; font-weight:600; line-height:1.4; word-break:keep-all;}

/* 생명지킴이 양성교육 */
.kipperLst { position:relative; padding-right:20.5rem; } 
.kipperLst .img { position:absolute; right:0; bottom:0; }
.kipperLst .box_st3 { position:relative; margin-top:1rem; }
.kipperLst li { display:flex; align-items:center; }
.kipperLst li + li { margin-top:0.5rem; }
.kipperLst li strong { position:relative; display:block; width:3.5rem; height:3.5rem; border-radius:50%; background:#7eb13b; border-radius:50%; line-height:3.5rem; text-align:center; color:#fff; font-weight:600; }
.kipperLst strong:before { content:""; position:absolute; right:-10px; top:1.5rem; width:30px; height:10px; background:#7eb13b; border-radius:0.2rem; transform:skew(50deg) rotate(-25deg); }
.kipperLst li strong em { position:relative; }
.kipperLst li:nth-child(2) strong,
.kipperLst li:nth-child(2) strong:before { background:#f0832e; }
.kipperLst li:nth-child(3) strong,
.kipperLst li:nth-child(3) strong:before { background:#795593; }
.kipperLst li p { width:calc(100% - 3.5rem); padding-left:1em;}

/* 지능정보 */
.prevEdu { position:relative; padding-right:30rem; }
.prevEdu .img { position:absolute; right:0; top:0; }

/* 상담안내 */
.sloganBox { position:relative; background:url('/images/web/life/sub/testTit_bg.png') no-repeat center / cover; padding:3rem 1rem; word-break:keep-all; }
.sloganBox .title { font-size:1.2rem; }
.sloganBox .img1 { position:absolute; left:0; bottom:0; font-size:0; }
.sloganBox .img2 { position:absolute; right:0; bottom:0; font-size:0; }

@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.7rem; }
    .greetings dl dt .txt2 { font-size:1.2rem;}
    
    /* 자가검사 */ 
    .testTit:after { display:none;}

    /* 자가검사 */ 
    .testTit:before { height:6.5rem;  }

    /* 상담안내 */ 
    .sloganBox .img1 { opacity:0.6; height:6rem; } 
    .sloganBox .img1 img { height:100%; }
    .sloganBox .img2 { display:none; } 

}
@media (max-width:1080px){ 
    /* 교내외상담기관 안내 */
    .contact_list li div p { min-height:5rem;}
    .contact_list li div p strong { display:block; }
    
    /* 또래상담자 */
    .adviceLst li { margin-top:3rem;}
    .adviceLst li img { height:7rem; top:-2rem; }
        
    /* 생명지킴이 양성교육 */
    .kipperLst { padding-right:0; } 
    .kipperLst .img {position:relative; right:auto; bottom:auto; text-align:center; margin-top:1rem;  }
    .kipperLst .img img { max-width:100%; }
     
    /* 지능정보 */
    .prevEdu {  padding-right:0; }
    .prevEdu .img { position:relative; right:auto; top:auto; text-align:center; margin-top:1rem; }
    .prevEdu .img img { max-width:100%; }
}
@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:1.4rem; padding:0; background:none; }
    .greetings dl dt .txt2 {font-size:1rem; text-align:left; } 
    .greetings dl dt .txt2 span:before { bottom:-0.1rem; height:0.6rem; }
    .greetings dl dd { line-height:1.6; font-size:0.8rem;}  
 
    /* 캠퍼스맵 */ 
    .mapInfo li {flex:1 1 100%; }
} 
@media (max-width:768px){    
    /* 교내외상담기관 안내 */
    .contact_list li { width:49%; }
    .contact_list li:nth-child(3n) { margin-right:2%;}
    .contact_list li:nth-child(2n) { margin-right:0;}
    
    
    /* 또래상담자 */
    .adviceLst { display:block; }  
    .adviceLst li { margin-top:1rem; }
    .adviceLst li + li { margin-left:0; }
    .adviceLst li img { height:5rem; top:0.3rem; }

    /* 자가검사 */
    #numTable { text-align:left; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
    #numTable colgroup,
    #numTable thead { display:none; }
    #numTable td { display:inline-block; border:none; } 
    #numTable td:first-child { display:block; background:#f1f1f1; }
    #numTable label { display:inline-block; vertical-align:middle; opacity:1; font-size:0.8rem; margin-right:0.3rem; }

}
@media (max-width:540px){   

    /* 구성원 */
    .orgWrap .org1 { padding-bottom:1rem; }
    .orgWrap .org1 span { width:100%; }

    .orgWrap .org2 { padding:1rem 0;}
    .orgWrap .org2 span{ width:100%; }

    .orgWrap .org_list1 { display:block; }
    .orgWrap .org_list1:after { display:none; }
    .orgWrap .org_list1 > li + li { margin-top:1rem; }
    .orgWrap .org_list1 > li span { width:100%; }
    
    .orgWrap .org_list2 { display:block; }
    .orgWrap .org_list2:before { display:none; }
    .orgWrap .org_list2 > li { padding:0; }
    .orgWrap .org_list2 > li + li { padding-top:1rem; }
    .orgWrap .org_list2 > li span { width:100%; }

} 
@media (max-width:380px){  
    /* 인사말 */
    .greetings .img { width:15rem; padding:0.5rem 0.5rem 2rem 0;} 
    .greetings .img span { height:12rem;}
    
    /* 교내외상담기관 안내 */
    .contact_list li { width:100%; }
    .contact_list li:nth-child(3n) { margin-right:0;} 
    .contact_list li div p { min-height:0; }
}