@import url("layout.css"); 

/*-----------------------------------------------------------
Author :hyerim, Park
Creative date :2022. 04. 01
-----------------------------------------------------------*/

.conBox01 { width:50%; height:46.5rem; float:left; overflow:hidden;}
.conBox02 { width:50%; height:46.5rem; float:left; overflow:hidden;}

/* 더보기 */
.btnMore { position:absolute; width:2.5rem; height:2.5rem; border-radius:50%; background:#fff; box-shadow:2px 2px 0 rgba(0,0,0,0.08); border:1px solid #e7e7e7; text-align:center; line-height:2.5rem; color:#000; font-size:1.4rem; -webkit-transition:transform 0.3s; transition:transform 0.3s; }
.btnMore i { position:relative; -webkit-transition:transform 0.3s; transition:transform 0.3s; }
/** 더보기 : active **/
.btnMore:hover,
.btnMore:focus { -webkit-transform:scale(1.1); transform:scale(1.1); }
.btnMore:hover i,
.btnMore:focus i { -webkit-transform:rotate(180deg); transform:rotate(180deg); }

/* 비주얼 */
.visual { position:relative; height:100%; }
.visual .slide01 { width:100%; height:100%; overflow:hidden;}
.visual .slideEl { position:relative; height:100%; }
.visual .slideEl .img { position:relative; height:100%; background:no-repeat center / cover; -webkit-transform:scale(1.1); transform:scale(1.1); -webkit-transition:0.9s; transition:0.9s; }
.visual .slideEl .slogan { position:absolute; left:0; top:0; padding:3.8rem; color:#fff;}
.visual .slideEl .slogan p { opacity:0; -webkit-transform:translateX(-1rem); transform:translateX(-1rem);}
.visual .slideEl .slogan .txt1 { font-size:3rem; font-weight:600; margin-bottom:0.7rem; text-shadow:2px 2px 5px rgba(0,0,0,0.4); -webkit-transition:0.5s; transition:0.5s; }
.visual .slideEl .slogan .txt2 { font-size:1rem; line-height:1.8; text-shadow:2px 2px 5px rgba(0,0,0,0.4); -webkit-transition:0.5s 0.2s; transition:0.5s 0.2s;} 
.visual .control { position:absolute; right:2rem; bottom:2rem; z-index:2; color:#fff;}
.visual .control a { display:inline-block; vertical-align:middle; font-size:1.4rem; padding:0 0.5rem; opacity:0.4; -webkit-transition:0.3s; transition:0.3s; }
.visual .control a i { -webkit-transition:0.3s; transition:0.3s; }
.visual .control #visual_play { display:none; }
.visual .control .count { display:inline-block; vertical-align:middle; padding:0 1rem; }
.visual .control .count .current { position:relative; font-size:2.5rem; font-weight:600; padding:0 2rem 0 0.5rem; }
.visual .control .count .current:after { content:""; position:absolute; right:1rem; top:1rem; width:1px; height:1.5rem; background:#fff; opacity: 0.2; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.visual .control .count .current:before { content:""; position:absolute; left:0; top:0; width:0.65rem; height:0.65rem; background:#40d1f4; border-radius:50%; }
.visual .control .count .total { font-size:1.5rem; font-weight:600; opacity:0.5; }
.visual .control .dots { display:inline-block; vertical-align:middle; }
.visual .control .dots ul li { position:relative; display:inline-block; vertical-align:middle; margin:0 0.2rem; font-size:0; }
.visual .control .dots ul li:before { content:""; position:absolute; left:0; top:0; width:0; height:100%; background:#40d1f4; -webkit-transition:0.3s; transition:0.3s; z-index:2; }
.visual .control .dots ul li button { width:2.3rem; height:5px; background:#fff; padding:0; opacity:0.45; } 
/** 비주얼 : active **/
.visual .slideEl.start .img { -webkit-transform:scale(1); transform:scale(1);} 
.visual .slideEl.start .slogan p { opacity:1; -webkit-transform:none; transform:none;} 
.visual .control a:hover,
.visual .control a:focus { opacity:1;}
.visual .control #visual_prev:hover i,
.visual .control #visual_prev:focus i { transform:translateX(-5px);}
.visual .control #visual_next:hover i,
.visual .control #visual_next:focus i { transform:translateX(5px);}  
.visual .control .dots ul li.slick-active:before { width:100%;}

/* 공지사항 */
.notice { position:relative; width:100%; height:23.75rem; padding:1.7rem; }
.notice:before { content:""; position:absolute; top:3rem; left:11.2rem; width:calc(100% - 17rem); height:2px; background:#e5e5e5; }
.notice h3 { width:8.5rem; background:#1d7ed8; border-radius:1.25rem; line-height:2.5rem; font-size:1rem; color:#fff; text-align:center; margin-bottom:1rem; }
.notice h3 i { margin-left:1rem;}
.notice ul li + li { border-top:1px dashed #cecece;}
.notice ul li a { position:relative; display:block; }
.notice ul li a dl { position:relative;  padding:1.3rem 0 1.3rem 4.5rem; color:#555; }
.notice ul li a dt { color:#222; font-size:1rem; font-weight:600; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; margin-bottom:0.5rem; -webkit-transition: 0.3s; transition: 0.3s; }
.notice ul li a dd.txt { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.notice ul li a dd.date { position:absolute; left:-0.2rem; top:1rem; display:flex; flex-direction:column-reverse; justify-content:center; width:4rem; height:4rem; background:#f1f3f8; border-radius:50%; text-align:center; font-size:0.7rem;  }
.notice ul li a dd.date strong { font-size:1.5rem; font-weight:800; color:#000; line-height:1; -webkit-transition: 0.3s; transition: 0.3s; }
.notice .btnMore { right:1.7rem; top:1.7rem;} 
/** 공지사항 : active **/
.notice ul li a:hover dt,
.notice ul li a:focus dt { color:#014ba8;}
.notice ul li a:hover dd.date strong,
.notice ul li a:focus dd.date strong { color:#014ba8;}

/* 프로그램안내 */
.infoBox { position:relative; width:50%; height:22.75rem; float:left; background:#40d1f4; padding:2rem; }
.infoBox:before { content:"SNUE"; color:#69d8f6; position:absolute; right:0; top:2.5rem; font-size:4.4rem; font-weight:900; letter-spacing:3px; } 
.infoBox h3 { position:relative; font-size:1.2rem; line-height:1.4rem; height:2.8rem; overflow:hidden; font-weight:700;  padding-right:3rem; letter-spacing:-1.5px; margin-bottom:1rem; }
.infoBox .box { position:relative; height:14.5rem; border-radius:0.5rem; background:#fff8dd; padding:1rem; overflow-y:auto; } 
.infoBox .box:before { content:""; position:absolute; right:0; bottom:0; left:0; top:0; background:url('/images/web/admission/main/info_ico.png') no-repeat right bottom; opacity:0.4; }
.infoBox .box.mCS_no_scrollbar:before { opacity:1;}
.infoBox .box dl dt { position:relative; padding-left:0.6rem; color:#035eb2; font-weight:600; }
.infoBox .box dl dt:before { content:""; position:absolute; left:0; top:0.4rem; width:0.3rem; height:0.3rem; background:#1d7ed8; border-radius:50%; }
.infoBox .box dl dd { padding-left:0.6rem; }
.infoBox .box dl dd + dt { margin-top:1rem;}
.infoBox .btnMore { right:2rem; top:2rem; box-shadow:none; }

/* 바로가기 */
.mlink { position:relative; width:50%; height:22.75rem; padding:2rem 1rem; float:left; background:#fafafa; }
.mlink h3 { text-align:center; font-size:1.2rem; font-weight:700; margin-bottom:2rem; }
.mlink h3 strong { color:#1d7ed8; }
.mlink ul li { width:33.333%; float:left; margin-bottom:1rem; }
.mlink ul li a { display:block; text-align:center; }
.mlink ul li a .img { position:relative; display:inline-block; width:4.2rem; height:4.2rem; border-radius:50%; overflow:hidden; box-shadow:2px 2px 21px rgba(0,0,0,0.15); }
.mlink ul li a .img img { width:100%; }
.mlink ul li a p { font-size:0.9rem; font-weight:600; line-height:1rem; height:2rem; margin-top:0.4rem; } 
.mlink ul li a:hover p em,
.mlink ul li a:focus p em {background:linear-gradient(to bottom, transparent 40%, #b8f1ff 0) left center no-repeat}

@media (max-width:1440px){ 
    /* 비주얼 */
    .visual .slideEl .slogan { padding:2rem;}
    .visual .slideEl .slogan .txt1 { font-size:2.2rem; }

    /* 공지사항 */
    .notice {padding:1rem; height:20rem; }
    .notice:before { left:10.5rem; top:2.3rem; width:calc(100% - 15rem); }
    .notice h3 { margin-bottom:0.5rem; }
    .notice ul li a dl { padding:1rem 0 1rem 4rem; }
    .notice ul li a dd.date { width:3.5rem; height:3.5rem; }
    .notice ul li a dd.date strong { font-size:1.3rem;}
    .notice .btnMore { right:1rem; top:1rem; }

    /* 공지사항 */
    .infoBox { height:26.5rem; padding:1rem; }
    .infoBox h3 { font-size:1.1rem; }
    .infoBox h3 br { display:none; }
    .infoBox .box { height:20rem; }
    .infoBox .btnMore { right:1rem; top:1rem; }
    
    /* 바로가기 */
    .mlink { height:26.5rem; padding:1rem; }
    .mlink h3 { margin-bottom:1rem;}
    .mlink ul li { width:50%; } 
}
@media (max-width:1240px){  
    .conBox01 {width:100%; height:30rem; float:none;}
    .conBox02 {width:100%; height:auto; float:none;} 

    /* 안내박스 */
    .infoBox { height:21rem; padding:1rem; } 
    .infoBox .box { height:14.5rem; } 
    
    /* 바로가기 */ 
    .mlink { height:21rem; } 
    .mlink h3 { margin-bottom:1.5rem;}
    .mlink ul li { width:33.333%; } 

}
@media (min-width:769px){   
    .notice {-webkit-transform:translateX(2rem); transform:translateX(2rem);}
    .infoBox {-webkit-transform:translateY(2rem); transform:translateY(2rem); -webkit-transition-delay:0.2s; transition-delay:0.2s;}
    .mlink {-webkit-transform:translateY(2rem); transform:translateY(2rem); -webkit-transition-delay:0.4s; transition-delay:0.4s;}
    .notice, .infoBox, .mlink { opacity:0; -webkit-transition-duration:0.3s; transition-duration:0.3s;} 
    .action .notice,
    .action .infoBox,
    .action .mlink { opacity:1; -webkit-transform:none; transform:none; }

}
@media (max-width:768px){  
    .conBox01 {width:100%; height:25rem; float:none;} 

    /* 비주얼 */ 
    .visual .slideEl .slogan { padding:1.5rem; }
    .visual .slideEl .slogan .txt1 { font-size:1.8rem; }
    .visual .slideEl .slogan .txt2 { line-height:1.4; font-size:0.9rem; }
    .visual .control { right:1rem; bottom:1rem;}
    .visual .control a { padding:0 0.3rem; opacity:0.6; }
    .visual .control .count { padding:0 0.5rem 0 0;}
    .visual .control .count .current { font-size:1.5rem;}
    .visual .control .count .current:after { top:0.5rem; height:1rem;}
    .visual .control .count .current:before { width:0.4rem; height:0.4rem; }
    .visual .control .count .total { font-size:1rem;}

    /* 안내박스 */
    .infoBox { width:100%; height:auto;  }  
    
    /* 바로가기 */ 
    .mlink { width:100%; height:auto; }  

}
@media (max-width:480px){  
    .conBox01 {height:20rem;} 

    /* 비주얼 */ 
    .visual .slideEl .slogan .txt1 { font-size:1.5rem; }

    /* 공지사항 */
    .notice:before { left:7.5rem; width:calc(100% - 12rem); }
    .notice h3 i { display:none; }
    .notice h3 { width:6rem; }
}
@media (max-width:340px){  
    .mlink ul li { width:50%; }

}