@import url("/css/web/intl/T0001/sub.css"); 
/* con_com */
.box_st1 { border-radius:5px; padding:1rem; }

/* 인사말 */
.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; }

/* 연혁 */
.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; }

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

.orgWrap .org1 { position:relative; 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; margin:1.5rem auto 0; width:100%; max-width:35rem; height:auto;} 
.orgWrap .org2:after { content:""; display:block; clear:both; }
.orgWrap .org2:before { content:""; position:absolute; right:0; top:50%; width:50%; height:1px; background:#c2c9d5; }
.orgWrap .org2 span { position:relative; display:flex; justify-content:center; align-items:center; width:13rem; height:3.3rem; background:#2a5ab2; color:#fff; font-size:1rem; font-weight:600; border-radius:0.5rem; box-shadow:6px 6px 0 #eee; overflow:hidden; float:right; } 
 
.orgWrap .org3 { position:relative; padding:1.5rem 0 0; margin:0 auto; }
.orgWrap .org3 span { position:relative; display:flex; justify-content:center; align-items:center; width:10rem; height:3.3rem; background:#44576b; color:#fff; font-size:1rem; font-weight:600; border-radius:0.5rem; box-shadow:6px 6px 0 #eee; margin:0 auto; overflow:hidden; } 
  
/* 오시는길 */
.mapWrap { position:relative; margin-bottom:2rem; 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; }

 /* 스텝박스 */
.step_lst{position:relative; margin:0 -1.25rem; }
.step_lst:after{display:block; clear:both; content:""; }
.step_lst > li{position:relative; float:left; width:25%; padding:0 1.25rem 1.5rem;}
.step_lst > li + li:before{position:absolute; top:6rem; left:-.425rem; width:.95rem; height:1.25rem; background-image:url(/images/web/snue/sub/step_lst_arr.png); background-repeat:no-repeat; background-size:100% 100%; background-position:center; content:""; }
.step_lst > li > div > em { position:absolute; left:calc(50% - 3rem); top:0; width:1.5rem; height:1.5rem; background:#4879bd; border-radius:50%; color:#fff; text-align:center; line-height:1.5rem; font-size:0.75rem; z-index:2; }
.step_lst > li > div .ico{ position:relative; display:block; width:5.7rem; height:5.7rem; border-radius:50%; background:#fff; border:4px solid #cfdef3; margin:0 auto; }
.step_lst > li > div .ico > img{width:100%;}
.step_lst > li > div .txt{ display:block; min-height:6.45rem; border-radius:1rem; border:1px solid #b2c1d6; background:#fff; margin-top:-2.5rem; padding:3.2rem 1rem 0.5rem; line-height:1.5; text-align:center; box-shadow:1px 1px 10px rgba(0,0,0,0.05); }

/* 스텝박스2 */ 
.step_box4 { display:flex; }
.step_box4 > ul { flex:1; padding:0 1rem; }
.step_box4:after {content:""; display:block; clear:both;} 
.step_box4 li {position:relative; display:table; width:100%; height:3.75rem; border-radius:3.75rem; text-align:center; padding:0 0.5rem; }  
.step_box4 li p { display:table-cell; vertical-align:middle; font-size:0.9rem; font-weight:600; line-height:1.2; }
.step_box4 li em { font-size:0.8rem; }
.step_box4 li + li { margin-top:2.2rem;}
.step_box4 li + li:before { content:""; position:absolute; left:calc(50% - 0.6rem); top:-2rem; width:1.65rem; height:1.9rem; background:url('/images/web/dorm/sub/arrow.png') no-repeat center / cover; opacity:0.5; }   
.step_box4 li:nth-child(2):before { opacity:1; }
.step_box4 ul:nth-child(1) li { background:#c5e7de}
.step_box4 ul:nth-child(1) li.point { background:#15b48d; color:#fff;}
.step_box4 ul:nth-child(2) li { background:#dae8f8}
.step_box4 ul:nth-child(2) li.point { background:#1965ba; color:#fff;}
.step_box4 ul:nth-child(3) li { background:#ccd1f2}
.step_box4 ul:nth-child(3) li.point { background:#6171cf; color:#fff;}

/* 서록관 갤러리 */
.gallery{position: relative; padding: 1.5rem 5rem 2.25rem;}
.gallery::before{width: 100%; height: 20rem; background: #f3f3f3; position: absolute; bottom: 0; left: 0; content: '';}
.gallery .gal_slide{position: relative;}
.gallery .gal_slide::before{width: calc(100% - 0.25rem); height: 100%; background: #fff; position: absolute; top: 0.5rem; right: 0; content: '';}
.gallery .gal_slide .slide{position: relative; padding-right: 0.25rem;}
.gallery .gal_slide .img{position: relative; background: #ecf7ff; overflow: hidden; height: 30.25rem; overflow: hidden;}
.gallery .gal_slide .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 100%; height: auto; vertical-align: middle;}
.gallery .gal_slide .txt{position: absolute; bottom: -0.5rem; right: 0; width: 12.5rem; padding: 1.5rem 0 1.5rem 2rem; background: #fff; border-top-left-radius: 3.5rem; box-shadow: -0.3rem 0 0.3rem rgba(0,0,0,0.3); font-size: 0.85rem; color: #666;}
.gallery .gal_slide .txt::before{width: 6rem; height: 1px; background: #b3b3b3; position: absolute; right: 0.8rem; top: 2.25rem; content: '';}
.gallery .gal_slide .txt em{display: block; font-weight: 700; position: relative; font-size: 1.1rem; color: #0098d9; margin-top: 0.5rem;}
.gallery .gal_slide .txt em::before{width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #d9f6fb; position: absolute; top: -0.3rem; left: -0.5rem; content: '';}
.gallery .gal_list_slide{width: calc(100% + 0.8rem); transform: translateX(-0.4rem); -webkit-transform: translateX(-0.4rem); position: relative; margin-top: 2.1rem;}
.gallery .gal_list_slide .slide a{position: relative; display: block; margin: 0 0.4rem; padding-bottom: 3px;}
.gallery .gal_list_slide .slide a::before{width: 100%; height: 100%; background: rgba(0, 152, 217, 0.8); position: absolute; top: 0; left: 0; z-index: 2; content:"\e9c5"; font-family: 'xeicon'; color: #fff; line-height: 6rem; text-align: center; font-size: 1.2rem; opacity: 0; transition: all 0.3s; -webkit-transition: all 0.3s;} 
.gallery .gal_list_slide .slide a:hover::before{opacity: 1; top: 3px; left: 3px;}
.gallery .gal_list_slide .slide .img{position: relative; background: #ecf7ff; height: 6rem; overflow: hidden;}
.gallery .gal_list_slide .slide .img::after{display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.5); position: absolute; top: 0; left: 0; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; content: '';}
.gallery .gal_list_slide .slide a:hover .img::after{opacity: 0;}
.gallery .gal_list_slide .slide .img img{position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.gallery .control a{display: block; font-size: 1.2rem; background: #fff; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center; color: #636363; border-radius: 50%; border: 1px solid #ddd; position: absolute; bottom: 4rem; transition: all 0.3s; -webkit-transition: all 0.3s;}
.gallery .control a.gal_prev{left: 1.5rem;}
.gallery .control a.gal_next{right: 1.5rem;}
.gallery .control a:hover{background: #0098d9; color: #fff; box-shadow: 0 0 0.25rem rgba(0,0,0,0.3);}

@media (max-width:1440px){
	/* 서브메뉴 */
	#snb .dep01{width:calc((100% + 5px) / 3); }

	/* 스텝박스 */
	.step_lst > li{width:50%; padding-bottom:2rem; }
	.step_lst > li:nth-of-type(3){float:right; }
	.step_lst > li:nth-of-type(4):before{right:-.435rem; left:auto; -webkit-transform:rotate(180deg); transform:rotate(180deg); }
	.step_lst > li:nth-of-type(3):before,
	.step_lst > li:nth-of-type(5):before{-webkit-transform:translateY(-50%) rotate(90deg); transform:translateY(-50%) rotate(90deg); top:-1rem; left:50%; }
	.step_lst > li > div .txt{font-size:.8rem; }
	.step_lst_l > li > div{height:14rem; }
	.step_lst.w20 > li{width:50%; }
	 
} 
@media (max-width:1240px){ 
    /* 인사말 */
    .greetings { margin-bottom:0; }
    .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;}

    /* 스텝박스4 */
    .step_box4 dl { flex-wrap:wrap; }
    .step_box4 dl + dl:before{left:calc(50% - 1rem);}
    .step_box4 dl dt { flex-basis:100%; margin-bottom:.5rem;}
    .step_box4 dl dt br{display:none;}
    .step_box4 dl dd.step1 { flex-basis:13rem; margin-left:1rem;}
    .step_box4 dl dd.step2 { width:calc(100% - 14.5rem);}

    /* 서록관 갤러리 */
    .gallery .gal_slide .img{height: 26rem;}
}
@media (max-width:860px){   
    /* con_com */
    .scroll_gr table table { width:100%; }

    /* 인사말 */
    .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;}   

    /* 서록관 갤러리 */
    .gallery{padding: 0.5rem 3.5rem 2rem;}
    .gallery .gal_slide .img{height: 21rem;}
    .gallery .control a.gal_prev{left: 0.5rem;}
    .gallery .control a.gal_next{right: 0.5rem;}
} 
@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;} 

    /* 구성원 */ 
    .orgWrap .org1 span { width:100%; }
    .orgWrap .org2 { max-width:none; padding:1rem 0 0; margin:0; }
    .orgWrap .org2 span{ width:100%; } 
    .orgWrap .org3 {padding:1rem 0 0; }
    .orgWrap .org3 span { width:100%; }

    /* 스텝박스4 */ 
    .step_box4 > ul { padding:0 0.5rem; }
 
} 
@media (max-width:680px){

    /* 스텝박스4 */ 
    .step_box4 { display:block; }
    .step_box4 > ul { padding:0; }
    .step_box4 > ul + ul { margin-top:1rem; padding-top:1rem; border-top:1px dashed #999; }
    .step_box4 li { height:auto; padding:1rem 0.5rem; }  

    /* 서록관 갤러리 */
    .gallery .gal_slide::before{height: calc(100% - 3rem);}
    .gallery .gal_slide .img{height: 16rem; margin-bottom: 3rem;}
    .gallery .gal_list_slide .slide .img{height: 5rem;}
    .gallery .gal_list_slide .slide a::before{line-height: 5rem;}
    .gallery .gal_slide .txt{padding: 1.25rem 0 1.25rem 1.5rem; width: 80%; font-size: 0.8rem; border-top-left-radius: 2rem; bottom: 0.5rem;}
    .gallery .gal_slide .txt::before{width: 60%; top: 2rem;}
    .gallery .gal_slide .txt em{font-size: 1rem; margin-top: 0;}
    .gallery .gal_list_slide{margin-top: 0.5rem;}
    .gallery .control a{width: 2rem; height: 2rem; line-height: 2rem; font-size: 1rem; bottom: 3.5rem;}

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

    /* 서록관 갤러리 */
    .gallery .gal_slide .img{height: 13rem;}
      
}
@media (max-width:480px){ 
	/* 스텝박스 */
	.step_lst > li,
	.step_lst > li:nth-of-type(3){width:100%; float:none;padding-bottom:2rem; }
	.step_lst > li > div,
	.step_lst_l > li > div{height:auto;  } 
	.step_lst > li + li:before { left: calc(50% - 0.5rem) !important; top:-1.5rem !important; -webkit-transform:rotate(90deg) !important; transform:rotate(90deg) !important; }
	.step_lst.w20 > li{width:100%; }

   /* 서록관 갤러리 */
   .gallery{padding: 0.5rem 1rem 1.5rem;}
   .gallery .gal_slide::before{display: none;}
   .gallery .gal_list_slide{width:calc(100% - 3rem); margin: 0.5rem auto 0; transform: none; -webkit-transform: none;}
   .gallery .gal_slide .txt{padding: 1rem 0 1rem 1.5rem;}
   .gallery .gal_slide .txt::before{top: 1.6rem;}
   .gallery .control a{bottom: 3rem;}
}
@media (max-width:380px){  
    /* 인사말 */
    .greetings .img { width:15rem; padding:0.5rem 0.5rem 2rem 0;} 
    .greetings .img span { height:12rem;} 
    
    /* 연혁 */ 
    .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;}
    /* 서록관 갤러리 */
    .gallery .gal_slide .img{height: 11rem;}
}