@charset "utf-8";
*{font-family: 'Pretendard'}
/* S : mainVisual CSS */
.sc01{width:100%;
background-size:100% 90%; position:relative;}
.sc01 .con_wrap{max-width:1724px; position:relative;}
.sc01 .main-sl{width:100%;}
.sc01 .main-txt-box{position:absolute; width:100%; height:100%; left:50%; top:0; transform:translateX(-50%); z-index:1;}
.sc01 .main-txt{position:absolute; top:50%; transform: translateY(-50%); z-index:1;}
.sc01 .main-txt > p {font-size:70px; color:#fff; font-weight:300; text-shadow: 0 5px 10px rgba(0,0,0,.25); word-break: keep-all; font-weight:bold;}
.sc01 .main-txt > span{color:#fff; font-size:28px;text-shadow: 0 5px 10px rgba(0,0,0,.25); display:block; margin-bottom:35px;}
.sc01 .main-sl-list{width:100%; height:900px;}
.sc01 .main-sl-itm{width:100%; height:100%;}
.sc01 .main-sl-itm img{width:100%; height:100%; object-fit:cover;}
.sc01 .main-sl-pager{display:flex; align-items:center; gap:40px; margin-top:100px;}
.sc01 .main-sl-pager > ul{display:flex; gap:24px;}
.sc01 .main-sl-pager .play-button { position: relative;width: 40px;height: 40px;cursor: pointer;}
.sc01 .main-sl-pager .play-button svg {overflow:visible;}
.sc01 .main-sl-pager .progress-ring circle {fill: none;stroke: rgba(255, 255, 255, 0.5);stroke-width: 2;}
.sc01 .main-sl-pager .progress-ring .progress {stroke: #fff;stroke-width: 2;stroke-linecap: round;stroke-dasharray: 188; stroke-dashoffset: 188; transition: stroke-dashoffset linear;}
.sc01 .main-sl-pager .play-icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 11px;height: 13px;background: white;clip-path: polygon(0% 0%, 100% 50%, 0% 100%);}
.sc01 .main-sl-pager .paused .progress {transition: none;}
.sc01 .pagination_bullet{display:flex; gap:10px;}
.sc01 .swiper-pagination-bullet{background:#fff; opacity:.5; width:10px; height:10px;}
.sc01 .swiper-pagination-bullet-active{background:#fff; opacity:1;}

.sc01 .rnd-info{transform:scale(0); opacity:0; transition:all 1s; position:absolute; right:12px; bottom:-20px; width:50%; max-width:643px;  z-index:1; background:#163298; padding:0 50px; height:270px; display:flex; flex-direction:column; gap:20px; justify-content: center; border-radius:12px 12px 50px 12px;}
.sc01 .rnd-info.active{transform:scale(1); opacity:1;}
.sc01 .rnd-info > div{padding-left:60px; background-position:left top; color:#fff; font-family:'Gmarket'; text-align: left;}
.sc01 .rnd-info > div span{font-size:22px; font-family:'Gmarket'; margin-bottom:6px; display:block; color:#fff;}
.sc01 .rnd-info .location{background:url(/resources/custom/images/rnd/main/ico-location.png) no-repeat left 10px; margin-bottom:40px; }
.sc01 .rnd-info .location p{font-weight:300; font-size:22px; color:#fff; font-family:'Gmarket';}
.sc01 .rnd-info .contact{background:url(/resources/custom/images/rnd/main/ico-contact.png) no-repeat left 15px;}
.sc01 .rnd-info .contact > div{display:flex; gap:40px; align-items: center;}
.sc01 .rnd-info .contact .t1{font-size:30px;color:#fff; font-family:'Gmarket'; position:relative;}
.sc01 .rnd-info .contact .t1:after{content:""; display:block; width:1px; height:45px; background:rgba(255,255,255,.3); right:-20px; top:50%; transform:translateY(-50%); position:absolute;}
.sc01 .rnd-info .contact .t2{font-size:18px; color:#fff;}

.sc02{padding:100px 0;}
.sc02 .qk-list{display:flex;}
.sc02 .qk-itm{width:calc(100%/5); text-align:center; transition:all .3s;}
.sc02 .qk-itm:hover{transform : translateY(-20px);}
.sc02 .qk-itm a{display:block;}
.sc02 .qk-itm a span{display:block; margin-top:30px; font-family:'Gmarket'; font-size:20px; color:#000;}

/*공통 레이아웃*/
.con{display:flex; align-items:start;}
.con-left{width:50%; padding-right:55px;}
.con-right{width:50%; padding-left:55px;}

/*sc02*/
.sc03 .board-tit{display:flex; justify-content:space-between; align-items:center; padding-bottom:30px; border-bottom:1px solid #131314;}
.sc03 .board-tit h3{font-size:38px; color:#131314; font-weight:600;}
.sc03 .board-tit a{position:relative; padding:6px 24px 6px 6px; font-size:18px; font-weight:400;}
.sc03 .board-tit a:hover:after{transform:rotate(180deg);}
.sc03 .board-tit a:after{transition:all .3s; content:""; display:block; width:12px; height:12px; background:url(/resources/custom/images/rnd/main/ico-more.png); position:absolute; right:0; top:11px;}
.sc03 .board-itm{border-bottom:1px solid #e6e6e6;}
.sc03 .board-itm > a{display:block; padding:40px 0; position:relative;}
.sc03 .board-itm > a > p{color:#2b2a2a; font-size:20px; font-weight:600; padding-right:125px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.sc03 .board-itm > a > span{position:absolute; top:43px; right:0; color:#878787; font-size:18px;}

.sc04{padding:80px 0; }
.sc04 .box > a{display:block; height:183px; display:flex; flex-direction:column; gap:15px; padding-left:285px; padding-right:24px; border-radius:24px; justify-content: center;}
.sc04 .box > a > p{font-family:'Gmarket'; font-size:26px; color:#333334;}
.sc04 .box > a > span{font-size:20px; color:#333334;}
.sc04 .itm01 > a{background:url(/resources/custom/images/rnd/main/intro-bg.png)#022a88 no-repeat left bottom;}
.sc04 .itm01 > a > p, .sc04 .itm01 > a > span{color:#fff}
.sc04 .itm02 > a{background:url(/resources/custom/images/rnd/main/orga_bg.png)#f5f6f8 no-repeat 50px bottom;}

@media all and (max-width:1300px){
		.sc01 .rnd-info{padding:0 40px;}
}
@media all and (max-width:1200px){
		.con-left{width:50%; padding-right:15px;}
        .con-right{width:50%; padding-left:15px;}   
        
		.sc01 .rnd-info{gap:0;}
		.sc01 .rnd-info .location p{font-size:20px;}
		.sc01 .rnd-info .contact > div{gap:20px;}
		.sc01 .rnd-info .contact .t1:after{right:-10px;}
		.sc01 .rnd-info .contact .t1{font-size:24px;}
}
@media all and (max-width:1000px){
		.sc01 .main-sl-list{height:700px;}
		.sc01 .main-sl-pager{margin-top:30px;}
		.sc01 .main-txt{top:40%;}
		.sc01 .rnd-info{width:80%; bottom: 150px;}
		.sc01 .main-txt > span{margin-bottom:10px;}
		
		.sc02{padding-top:120px;}
		.sc02 .qk-list{flex-wrap: wrap; justify-content: center;}
		.sc02 .qk-itm{margin-bottom:20px; width:calc(100% / 3);}
		
		.sc04 .box > a{padding-left:100px; background-size:120px auto !important;}
		.sc04 .itm02 > a{background-position:left bottom;}
		
}
@media all and (max-width:767px){
		.con{flex-direction:column; gap:30px;}
		.con-left{width:100%; padding-right:0;}
        .con-right{width:100%; padding-left:0;}   
        
		.sc01 .main-sl-pager{justify-content: center;}
		.sc01 .main-txt{width:100%; text-align:center; top:35%; width: calc(100% - 24px);}
		.sc01 .main-txt > span{margin-bottom:10px; font-size:16px;}
		.sc01 .main-txt > p{font-size:50px;}
		.sc01 .rnd-info{width:calc(100% - 24px);}
		.sc01 .rnd-info .contact > div{flex-direction: column;
        align-items: start; gap:10px;}
		.sc01 .rnd-info > div span{font-size:20px;}
		.sc01 .rnd-info .location p{font-size:180x;}
		.sc01 .rnd-info .location{margin-bottom:10px;}
		.sc01 .rnd-info .contact .t1:after{display:none;}
		
		.sc03 .board-itm > a > p{font-size:18px;}
}
@media all and (max-width:500px){
		.sc01 .main-txt > p{font-size:32px;}
		.sc01 .rnd-info{padding:0 20px;}
		.sc01 .rnd-info .location p {font-size:18px}	
		.sc01 .rnd-info > div span{font-size:16px;}
		.sc01 .rnd-info .contact .t1 {font-size:20px;}
		.sc01 .rnd-info .contact .t2{font-size:16px;}

		.sc02 .qk-itm a span{font-size:18px;}
		.sc02 .qk-itm{width:50%;}
		
		.sc04 .box > a > p{font-size:20px;}
		.sc04 .box > a > span{font-size:16px;}
}
/*팝업*/
.pc { display: block; }  
.mobile { display: none;} 

@media (max-width: 768px) {
    .pc { display: none ; }  
    .mobile { display: block; }  
}
.popup-sl-area{position:fixed; top:0; left:0; background:rgba(0,0,0,.8); width:100%; height:100vh; z-index:100; padding-top:100px;}
.popup-sl-box{max-width:1320px; margin:0 auto; overflow:hidden; padding:0 12px;}
.popup-sl-box .pop-sl-list{width:100%;}
.popup-sl-box .pop-sl-itm img{width:100%; height:100%; object-fit:cover;}
.popup-sl-box .pop-sl-itm a{display:block !important; width:100%; height:auto;}
.popup-sl-title{max-width:1320px; margin:0 auto 50px; display:flex; align-items:center; justify-content:space-between; padding:0 12px;}
.popup-sl-title > div{align-items:center; display:flex; gap:16px;}
.popup-sl-title h3{font-family:'Gmarket'; font-size:38px; color:#2bb8ff;}
.popup-sl-title h3 span{color:#fff;}
.popup-sl-title label{color:#fff;}
.pop-sl-close{background:none; outline:none; border:none;}

@media all and (max-width:767px){
		.popup-sl-area{padding-top:30px;}
		.popup-sl-box{max-width:500px;}
		.popup-sl-title{flex-direction:column; margin-bottom:20px;}
		.popup-sl-title h3{font-size:24px;}
		.popup-sl-title > div{justify-content: space-between; width:100%;}
		.popup-sl-title > div .popup-sl-prev{margin-left:auto;}
		.popup-sl-title .popup-sl-ck{margin-top:10px;}
		.popup-sl-title img{max-width:42px;}
}