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

/* layout */
#gnb .mnTit li { min-width:200px; }

/* con_com */
.box_st1 { border-radius:5px; padding:1rem; }
.bu_st2:before, 
.list_st2 > li:before { left:0.1rem; top: 0.75rem; width: 0.35rem; height: 2px; background: #4c4c4c; border-radius: 0;}

/* Àλ縻 */
.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 img { display:inline-block; max-width:100%; } 
.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 4rem; font-size:0.85rem; line-height:1.6; } 
.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-size:1rem; font-weight:700; font-family: 'Montserrat'; color:#2163c1; }

/* Á¶Á÷µµ */
.orgWrap { position:relative; margin:0.5rem 0; }
.orgWrap:after {content:""; display:block; clear:both; }
.orgWrap:before { content:""; position:absolute; left:50%; top:0; width:1px; height:30rem; 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:1rem 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; margin:3rem auto 0; }
.orgWrap .org3 + .org3 { margin-top:1rem;}
.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; } 
 
.orgWrap .org4 { position:relative; width:50%; padding-right:5rem; float:left; margin-top:3rem; }
.orgWrap .org4:before { content:""; position:absolute; left:calc(50% - 2.5rem); top:-22rem; width:1px; height:22rem; background:#c2c9d5; }
.orgWrap .org4:after { content:""; position:absolute; right:0; top:-22rem; width:calc(50% + 2.5rem); height:1px; background:#c2c9d5; }
.orgWrap .org4 dl {border:1px solid #869bb0; border-radius:0.5rem; background:#fff; box-shadow:4px 4px 0 #eee;  }
.orgWrap .org4 dt { display:flex; height:2.6rem; align-items:center; justify-content:center; background:#869bb0; color:#fff; font-size:1rem; font-weight:600; line-height:1.2; border-radius:0.4rem 0.4rem 0 0; } 
.orgWrap .org4 dd { padding:1rem; font-size:0; }
.orgWrap .org4 dd li {position:relative; display:inline-block; width:49%; padding:0 0.5rem; vertical-align:top; font-size:0.8rem;}
.orgWrap .org4 dd li:before { content:""; position:absolute; left:0; top:0.6rem; width:0.15rem; height:0.15rem; background:#327aa3; border-radius:50%; }

.orgWrap .org_list1 { position:relative; display:flex; width:100%; max-width:35rem; justify-content:space-between; margin:1.5rem auto 0; } 
.orgWrap .org_list1:before { content:""; position:absolute; left:0; top:50%; width:100%; height:1px; background:#c2c9d5; }
.orgWrap .org_list1 > li { position:relative; }
.orgWrap .org_list1 > li span { display:block; width:13rem; 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:50%; justify-content:space-between; margin:0 auto; float:right; margin-top:3rem; padding-left:5rem; }  
.orgWrap .org_list2:before { content:""; position:absolute; left:0; top:-12rem; width:/*calc(76% + 1.25rem)*/calc(32.2% + 1.25rem); height:1px; background:#c2c9d5; } /*2303037*/
.orgWrap .org_list2 > li { position:relative; width:48%; } 
.orgWrap .org_list2 > li:before { content:""; position:absolute; left:50%; top:-12rem; width:1px; height:12rem; background:#c2c9d5; }
.orgWrap .org_list2 > li + li { margin-left:4%; } 
.orgWrap .org_list2 > li span { display:block; width:100%; color:#fff; border-radius:0.5rem; line-height:3.3rem; font-size:1rem; font-weight:600; background:#869bb0; text-align:center; box-shadow:6px 6px 0 #eee;}
  
/* ¿À½Ã´Â±æ */
.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; }

/* ½ºÅܹڽº1 */
.step_box1 dl dt p{font-size:.9rem; font-weight: 600; line-height:1.3; color:#0070b2;}
.step_box1 dl dt span{display:block; font-size:.75rem; margin-top:.5rem; color:#666;}
.step_box1 dl:nth-of-type(2n) dt p{color:#2759a5;}
.step_box1 dl dd .list_ol1 > li > span.num{border-radius:50% !important;}
.step_box1 dl dd .list_ol1 > li {color:#265aa3;}
.step_box1 dl dd .list_ol1 > li p {color:#222;}

/* ½ºÅܹڽº4 */
.step_box4 dl { position: relative; display:flex; margin-top:1rem; }
.step_box4 dl + dl { padding-top:1.5rem;}
.step_box4 dl + dl:before { content:"\e938"; position:absolute; left:6rem; top:-1rem; font-family:"xeicon"; font-size:1.5rem; color:#555; line-height:2.5rem; }
.step_box4 dl dt { position:relative; display:flex; flex-basis:12rem; margin-left:1rem; font-size:0.9rem; font-weight:600; border:3px solid #1497e3; border-radius:0.7rem; align-items:center; justify-content: center; text-align:center; padding:1.5rem; background:#fff; z-index:1; }
.step_box4 dl dt strong { position:absolute; top:-1rem; left:-1rem; width:3rem; height:3rem; border-radius:1rem; background:#1497e3; color:#fff; line-height:3rem; font-size:1.2rem; font-family:"Montserrat"; font-weight:700; text-align:center;}
.step_box4 dl dd { position:relative; display:flex; padding:1rem; justify-items: center; align-items:center; border-radius:0.7rem; z-index:0; word-break: keep-all;}
.step_box4 dl dd.step1 { flex-basis:16rem; justify-content:center; margin:0 .25rem; text-align:center; background:#f0f9fe; border:1px solid #a7d6f2;}
.step_box4 dl dd.step1 ul{text-align:left;}
.step_box4 dl dd.step2 { width:calc(100% - 29rem); background:#f4f4f4; border:1px solid #f4f4f4;}
.step_box4 dl dd.step2 strong { display:block; padding:.5rem 1rem; border-radius:.5rem; background:#1498e3; font-size:.9rem; font-weight: 600; color:#fff; margin-bottom:.5rem;}
.step_box4 dl dd.step2 .cont{width:100%;}
.step_box4 dl:nth-of-type(2n) dt { border:3px solid #2759a5; }
.step_box4 dl:nth-of-type(2n) dt strong {background:#2759a5; }
.step_box4 dl:nth-of-type(2n) dd.step1 { background:#f2f6ff; border-color:#78a0dd; }
.step_box4 dl:nth-of-type(2n) dd.step2 strong {background:#2859a5; }


@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);}

    /* Á¶Á÷µµ */
    .orgWrap .org4 { padding-right:1rem; }
    .orgWrap .org_list2 { padding-left:1rem; }
    .orgWrap .org_list2:before { /*width:calc(76% + 0.25rem);*/  width:calc(26.1% + 0.25rem); } /*2303037*/
}
@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;}  

    /* ½ºÅܹڽº1 */
    .step_box1 dl dt br{display:none;}
} 
@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:before { height:calc(100% - 1.5rem); }
    .orgWrap .org1 span { width:100%; }
    .orgWrap .org2 { max-width:none; padding:1rem 0 0; margin:0; }
    .orgWrap .org2 span{ width:100%; } 
    .orgWrap .org3 {margin:1rem 0 0; }
    .orgWrap .org3 span { width:100%; }
    .orgWrap .org4 { width:100%; padding-right:0; margin-top:1rem;  }
    .orgWrap .org4:before,
    .orgWrap .org4:after { display:none; }
    .orgWrap .org_list1 { max-width:none; }
    .orgWrap .org_list1 > li { width:48%; }
    .orgWrap .org_list1 > li span { width:100%; }
    .orgWrap .org_list2 { width:100%; padding-left:0;margin-top:1rem;  }
    .orgWrap .org_list2:before { top:1.75rem; }
    .orgWrap .org_list2 > li:before { display:none; }
    .orgWrap .org_list2 > li {width:100%;} /*2303037*/

} 
@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; }

    /* ½ºÅܹڽº4 */
	.step_box4 dl { display:block; margin-left:1rem; }
	.step_box4 dl + dl {padding-top:1rem; }
	.step_box4 dl dt { display:block; width:100%; margin:0; padding:0.5rem 1rem; }
	.step_box4 dl dd.step1, 
    .step_box4 dl dd.step2{ display:block; width:100%; padding:1rem; margin-left:0; margin-top:.3rem; text-align: left;}
    .step_box4 dl + dl:before,
    .step_box4 dl dd.step1 br{display:none;}

    /* Á¶Á÷µµ*/ 
    .orgWrap .org_list1 { display:block; }
    .orgWrap .org_list1:before { display:none; }
    .orgWrap .org_list1 > li { width:100%; }
    .orgWrap .org_list1 > li + li { margin-top:1rem;}
    .orgWrap .org_list2 { display:block; }
    .orgWrap .org_list2:before { display:none; }
    .orgWrap .org_list2 > li { width:100%; }
    .orgWrap .org_list2 > li + li { margin:1rem 0 0; }
    .orgWrap .org4 dd li { width:100%; }   

}
@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 { padding:0; }
    .historyBox dl dd ul li + li { margin-top:0.5rem;}
    .historyBox dl dd ul li strong { position:relative; left:auto; top:auto; margin-bottom:0.5rem; display:block;}
     
}