@charset "UTF-8";

/* 환승할인이벤트 20240516 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

.TransferEvent { width:100%; overflow:hidden; text-align:center; }
.TransferEvent * { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color:#111; box-sizing:border-box; line-height:1.2; }
.TransferEvent .content { position:relative; width:1200px; margin:0 auto; padding:0 0 130px; }
.TransferEvent .topImg { height:1268px; background:url(https://cdn.ibstudy.co.kr/Content_new/event/2024/TransferEvent_20240516/topImg.jpg) no-repeat center; background-size:cover; }
.TransferEvent .topTxt li { position:relative; }
.TransferEvent .topTxt li:first-child { display:block; padding-top:160px; font-size:34px; font-weight:400; animation:letterSpacing 1.2s .3s ease both; color:#fff; }
.TransferEvent .topTxt li:first-child:after { position:absolute; right:50%; margin-right:-580px; top:190px; content:""; display:block; width:205px; height:98px; background:url(https://cdn.ibstudy.co.kr/Content_new/event/2024/TransferEvent_20240516/topImg_01.png) no-repeat; animation:airplane .3s 1.6s ease-out both; }
.TransferEvent .topTxt li:first-child strong { font-weight:900; color:#fff; }
.TransferEvent .topTxt li:nth-child(2) { margin-top:50px; animation:fadeIn .6s 1s ease-out both; display:flex;
  justify-content:center;}
.TransferEvent .topTxt li:nth-child(2) img { position:relative; z-index:10; }
.TransferEvent .topTxt li:nth-child(2):after { position:absolute; top:74px; content:""; display:block; width:100%; height:103px; background:#00e404; }
.TransferEvent .topTxt li:nth-child(2):before { opacity:0; position:absolute; top:29px; left:50%; margin-left:-456px; content:""; display:block; width:295px; height:326px; background:url(https://cdn.ibstudy.co.kr/Content_new/event/2024/TransferEvent_20240516/topImg_02.png) no-repeat; z-index:11; animation:fadeIn .2s 2s ease-out both; }
.TransferEvent .topTxt li:nth-child(3) { margin-top:80px; animation:fadeIn_up .6s 1.2s ease-out both; }
.TransferEvent .topTxt li:nth-child(4) { margin-top:55px; animation:fadeIn_up .6s 1.5s ease-out both; }
.TransferEvent .topImg a { display:block; width:500px; height:80px; background:#003ee9; border-radius:40px; margin:80px auto 0; animation:fadeIn_up .6s 1.8s ease-out both; transition:all .3s; overflow:hidden; }
.TransferEvent .topImg a:before { position:absolute; content:''; display:inline-block; top:-180px; left:0; width:30px; height:100%; background:#fff; animation:shiny-btn1 3s ease-in-out infinite; }
.TransferEvent .topImg a:hover { background:#005aff; }

.TransferEvent .section_01 { background:#dde1f1 url(https://cdn.ibstudy.co.kr/Content_new/event/2024/TransferEvent_20240516/section01_bg.png) no-repeat right top; }
.TransferEvent h2 { padding:50px 0; }
.TransferEvent .section_01 .content div { position:relative; height:443px; background:url(https://cdn.ibstudy.co.kr/Content_new/event/2024/TransferEvent_20240516/section01_img01.png) no-repeat; }
.TransferEvent .section_01 .content div span { position:absolute; right:215px; top:120px; animation:upDown 1s infinite ease-in-out; }
.TransferEvent .section_01 .content p span { position:absolute; right:-35px; bottom:202px; animation:upDown .8s infinite ease-in-out; }

.TransferEvent .section_02 { background:#0036cc; }
.TransferEvent .section_02 ul { display:flex; justify-content:space-between; }
.TransferEvent .section_02 ul li { opacity:0; }
.section_02 ul li:first-child.ani { animation:scroll_up .4s linear both; }
.section_02 ul li:nth-child(2).ani { animation:scroll_up .4s .2s linear both; }
.section_02 ul li:nth-child(3).ani { animation:scroll_up .4s .4s linear both; }
.section_02 ul li:nth-child(4).ani { animation:scroll_up .4s .5s linear both; }


.TransferEvent .section_03 { background:#dfdfdf; }
.TransferEvent .section_03 h2 span { position:absolute; left:50%; margin-left:-50px; top:212px;font-size:55px; font-weight:800; color:#fff; opacity:0; }
.section_03 h2 span.ani { animation:scale .25s linear both; }
.section_03 ul li { margin-bottom:24px; opacity:0; }
.section_03 ul li.ani { animation:fadeIn .3s .2s ease-in-out both; }
.TransferEvent .section_04 { background:#c9d0e8; }
.TransferEvent .section_04 .content div { position:relative; background:url(https://cdn.ibstudy.co.kr/Content_new/event/2024/TransferEvent_20240516/section04_img01.png) no-repeat; height:504px; }
.TransferEvent .section_04 a { display:block; position:absolute; }
.TransferEvent .section_04 li:first-child a { left:85px; top:142px; width:210px; height:56px; background:#111; border-radius:30px; padding-top:18px; }
.TransferEvent .section_04 li:first-child span { z-index:10; position:absolute; left:262px; top:170px; animation:upDown .8s infinite ease-in-out; }
.TransferEvent .section_04 li:last-child a {right:65px; bottom:25px; }
.TransferEvent .section_04 li:nth-child(2) a { left:95px; bottom:25px; }
.TransferEvent .section_04 dl { margin:80px 0; text-align:left; }
.TransferEvent .section_04 dl:after { content:""; display:block; clear:both; }
.TransferEvent .section_04 dt { float:left; display:block; width:200px; font-size:21px; font-weight:700; height:260px; text-align:center; }
.TransferEvent .section_04 dd { float:left; display:block; font-size:18px; width:1000px; line-height:1.6; }
.TransferEvent .section_04 dd:before { content:"- " }
.TransferEvent .section_04 .content { padding-bottom:30px; }

@keyframes letterSpacing {
	0% {
		letter-spacing:15px;
		opacity:0;
	}
	100% {
		letter-spacing:0px;
		opacity:1;
	}
}


@keyframes fadeIn_up {
	0% {
		opacity:0;
		transform: translateY(25%);
	}
	100% {
		opacity:1;
		transform: translateY(0);
	}
}


@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}



/* 1400px 이하 사이즈 추가 */
@media (max-width:1400px) {
	.TransferEvent .section_02 ul li,.section_03 ul li { opacity:1; animation:none !important; }
}


@keyframes upDown {
	0% {
		transform: translateY(0%);
	}
	50%{
		transform: translateY(15%);
	}
	100% {
        transform: translateY(0%);
	}
}

@keyframes airplane {
	0% {
		opacity:0;
		transform: translate(0, 0);
	}
	100% {
		opacity:1;
        transform: translate(-100px, -100px);
	}
}

@keyframes scroll_up {
	0% {
		opacity:0;
		transform: translateY(20%);
	}
	70% {
		opacity:1;
		transform: translateY(-5%);
	}
	100% {
		opacity:1;
		transform: translateY(0%);
	}
}

@keyframes shiny-btn1 {
	0% { transform:scale(0) rotate(45deg); opacity: 0; }
	80% { transform:scale(0) rotate(45deg); opacity: 0.5; }
	81% { transform:scale(4) rotate(45deg); opacity: 1; }
	100% { transform:scale(50) rotate(45deg); opacity: 0; }
}



@keyframes scale {
	0% {
		opacity:0;
		transform:scale(6);
	}
	100% {
		opacity:1;
		transform:scale(1);
	}
}

/* 레이어 팝업 */
#mask { position: absolute; left: 0; top: 0; z-index: 999; background-color: #000000; display: none; opacity:0.8 !important }
.upload-btn_wrap span { color:#fff; }

.layerpop { display: none; z-index: 1000; border: 0px solid #ccc; background: #fff; cursor: move; }

.layerpop_area .title {padding: 20px; border: 0px solid #aaaaaa; background: #c92727;    color: #fff; font-size: 24px; letter-spacing :-0.5px; }

.layerpop_area .con01 {margin-left:40px; margin-top:20px; color: #222; font-size: 16px; letter-spacing :-0.5px;}
.layerpop_area .con02 {margin-left:40px; margin-top:2px; color: #888; font-size: 12px; letter-spacing :-0.5px; }
.con_red { color:#c92727;}
.layerpop_area .con03 {margin-top:20px;}

.layerpop_area .layerpop_close {width: 25px; height: 25px; display: block; position: absolute; top: 10px;
    right: 20px; background: transparent url('btn_exit_off.png') no-repeat; }

.layerpop_area .layerpop_close:hover {
    background: transparent url('btn_exit_on.png') no-repeat;
    cursor: pointer; }


.btn {width:280px; background-color: #c92727; padding: 15px 30px; margin: 10px 125px 0 0; border: none; color:#ffffff; text-align: center;text-decoration: none; font-size: 16px; display: inline-block;cursor: pointer;-webkit-transition-duration: 0.4s;transition-duration: 0.4s;   font-weight: bold; border-radius: 40px;}
.btn1:hover{background-color: #830505;color:#ffffff;  font-weight: bold;	}


input.upload_text {float:left; margin-left:40px;	width:300px;height:38px;  font-size: 12px;  color:#959595;	line-height:19px;padding:0 10px;border:1px solid #333;}
div.upload-btn_wrap input.input_file {position:absolute;	top:0;	right:0;	cursor:pointer;	opacity:0;	filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-moz-opacity:0;}
div.upload-btn_wrap {overflow:hidden;position:relative;float:left;width:170px; height:40px;	padding-left:0px;}
div.upload-btn_wrap button {width:170px;height:40px; font-size:16px;background:#333;border:1px solid #333;color:#fff;}
div.delete-btn_wrap input.input_file {position:absolute;	top:0;	right:0;	cursor:pointer;	opacity:0;	filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-moz-opacity:0;}
div.delete-btn_wrap {overflow:hidden;position:relative;float:left;width:170px; height:40px;	padding-left:0px;}
div.delete-btn_wrap button {width:170px;height:40px; font-size:16px;background:#333;border:1px solid #333;color:#fff;}