@charset "UTF-8";
/* =========================
	팝업 // 모바일
========================= */
.popup_div .popup_close {padding:10px 0;background:#000;color:#fff;text-align:right}
.popup_div .popup_close button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff; font-size:13px;}

@media (max-width:969px) {
	.popup_div { width: 93% !important; top: 120px !important; left: 50% !important; transform: translateX(-50%) !important;}
	.popup_div > table > tbody > tr > td { height: auto !important;}
	.popup_div img { width: 100% !important; }
}
@media (max-width:500px) {
	.popup_div .popup_close button { font-size:12px; padding:4px 7px;}
}
/* =========================
	common
========================= */
html, body { width:100%; height:100%; position: relative; font-family: 'Pretendard'; color:#000727; }
a,input,select,option,textarea,button {font-family: 'Pretendard';}
body { width: 100%; height: 100%; background: #fff; overflow-x:hidden}
img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none;}
.flex_box { display:-webkit-flex; display:flex;}
.space_box { padding-top: 15px; display:-webkit-flex; display:flex; justify-content: space-between;}
.center_box { display:-webkit-flex; display:flex; align-items: center;}
.row_center_box { display:-webkit-flex; display:flex; justify-content: center;}
.all_center_box { display:-webkit-flex; display:flex; justify-content: center; align-items: center;}
.column_box { display:-webkit-flex; display:flex; flex-direction: column;}
.justify_between { justify-content: space-between;}
.justify_center { justify-content: center;}
.align_center { align-items: center;}
.flex_1 { flex:1}
.flex_wrap { flex-wrap: wrap;}
.none { display: none;}
.block { display: block;}
button { border:0; background: 0;}
.box_two > * { width:50%;}
.box_three > * { width:33.333%}
.box_four > * { width:25%}
.box_five > * { width:20%} 
.fz { font-size:0}

.pret,.pret a { font-family:'Pretendard';}
.play,.play a { font-family:'Play', sans-serif;}
.dream,.dream a { font-family: 'S-CoreDream'!important;}


.hddiv{ text-align: center; color: #5b5d5f; z-index: 250; }
.hddiv .fs01{ font-family: 'GmarketSansBold'; font-size: 1.4rem; }
.hddiv .fs02{ font-weight: 500; font-size: 0.8rem; margin-top: 10px;padding:0 20px; }


@media all and (max-width:1169px){
    .mt_flex_wrap { flex-wrap: wrap;}
    .mt_flex_wrap > * { width:100%!important;}
}
@media all and (max-width:600px){
    .m_flex_wrap { flex-wrap: wrap;}
    .m_flex_wrap > * { width:100%!important;}
}
@media all and (min-width:1170px){
	  .hddiv .fs01{ font-size: 45px; }
    .hddiv .fs02{ margin-top: 10px; font-size: 18px; }
	  .swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; min-width: 1200px; }
	  .swiper-container .vfix > .swiper-slide { position: relative; display: -webkit-box;	display: -ms-flexbox; display: -webkit-flex; display: flex;	-webkit-box-pack: center; -ms-flex-pack: center;	-webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
	  /* pager */
	  .swiper-pagination{ bottom: 20px !important; left: 0; width: 100%; transform:none !important; top: initial !important;}
	  .containerpager{ display: inline-block !important; width: auto; height: auto; border-radius: 0; background: none; opacity: 1; position: relative; margin: 0 !important; }
	  .containerpager:before{ display: inline-block; content: ""; background: #fff; width: 20px; height: 2px; vertical-align: middle;}
  
	  .containerpager:first-child:before{ display: none; }
	  .containerpager:after{ content: ""; display: inline-block; vertical-align: middle; font-size: 0; line-height: 0; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; background:none; transition: background 0.3s; -webkit-transition: background 0.3s; overflow: hidden; box-sizing: border-box; }
  
	  .containerpager p{ position: absolute; top: -14px; left: 50%; text-align: center; font-size: 13px; color: #8e8e8e; word-break: keep-all; transform: translateX(-50%); -webkit-transform:translateX(-50%); padding-left: 20px; display: none; }
	  .containerpager.swiper-pagination-bullet-active:after{ background: #fff; opacity: 1; border: 4px solid #c7c7c7; width: 14px; height: 14px;}
	  .containerpager.swiper-pagination-bullet-active p{ display: block; }

    .containerpager.on:before{background: #ededed; opacity: 1}
    .containerpager.on:after{ border: 2px solid #ededed; opacity: 1}
    .containerpager.on.swiper-pagination-bullet-active:after{ border: 4px solid #c7c7c7 }
}

/* =========================
	header
========================= */
@media all and (max-width:1279px){
	#header.on{ background:#fff; }
}

/* =================
스크롤 아이콘 추가
================ */
p.scroll_icon {
    position: absolute;
    bottom: 33px; left:50%; transform: translateX(-50%);
    z-index: 1;
    line-height: 65px; color:#fff; text-align: center;
    cursor: default;
    font-weight:900; font-size:13px;
}
p.scroll_icon span {
    position: absolute;
    top: 0;
    left: 50%;
    transform:translateX(-50%);
    width: 34px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
}
p.scroll_icon span::before {
    position: absolute;
    top: 3px;
    left: 10%;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}
p.scroll_icon.on{color: #c7c7c7;}
p.scroll_icon.on span{border: 2px solid #c7c7c7;}
p.scroll_icon.on span::before{background-color: #c7c7c7;}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(15px, 0);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(15px, 0);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}



/* =========================
	contain animation & common
========================= */

.contain .left,.contain .right,.contain .dm,.contain .bottom_ani_con { opacity: 0;}
.contain.on .left { animation:left_ani 1s forwards cubic-bezier(0.37, 0.36, 0.14, 1.02); }
.contain.on .right { animation:right_ani 1s forwards cubic-bezier(0.37, 0.36, 0.14, 1.02); }
.contain.on .bottom_ani_con { animation:bottom_ani 1s forwards cubic-bezier(0.37, 0.36, 0.14, 1.02); }
.contain.on .dm { animation:dm_ani 1s forwards cubic-bezier(0.37, 0.36, 0.14, 1.02);}
.contain.on .delay01 { animation-delay: .2s;}
.contain.on .delay02 { animation-delay: .4s;}
.contain.on .delay03 { animation-delay: .6s;}

@media all and (max-width:1169px){
	br.pc { display: none;}
	br.m { display: none;}
	br.tablet { display: block;}
}
@media all and (max-width:600px){
    br.tablet { display: none;}
	  br.m { display: block;}
}
@media all and (min-width:1170px){
    br.pc { display: block!important;}
    br.tablet { display: none;}
    br.m { display: none;}
	  .contain.on .left.image_box { animation:left_ani_img 1s forwards cubic-bezier(0.37, 0.36, 0.14, 1.02);}
	  .contain.on .right.image_box { animation:right_ani_img 1s forwards cubic-bezier(0.37, 0.36, 0.14, 1.02);}
    .contain05.on .left.image_box { animation:left_ani 1s forwards cubic-bezier(0.37, 0.36, 0.14, 1.02); }
    .contain05.on .right.image_box { animation:right_ani 1s forwards cubic-bezier(0.37, 0.36, 0.14, 1.02); }
}

/* =========================
	container01
========================= */
.container01 .visual_pc { display:flex; align-items:center; justify-content:center; width:100%; height:770px; background: url("../images/main/visual_main_pc.jpg") no-repeat 50% 50%; background-size:cover}
.container01 .visual_mo { display:none; align-items:center; justify-content:center; width:100%; background: url("../images/main/visual_main_mo.jpg") no-repeat 50% 50%; background-size:cover}
.container01 .inner {display:flex;margin:0 auto;width:80%; align-items:center; justify-content:center;}
.container01 .inner .panel {display:flex; align-items:center; justify-content:center; }
.container01 .inner .panel:first-child {width:35%;}
.container01 .inner .panel:last-child {flex:1; color:#1a2941; font-family: 'S-CoreDream'; font-weight:700;font-size:1.80em;}
.container01 .inner .panel:last-child .content > p { margin-top:30px;font-weight:600; font-size:0.70em;line-height: 24px;}
.container01 .inner .panel .content img {max-width:100%; width:auto; display:block;}


@media screen and (max-width:1024px){/*랩탑*/
	.container01 .visual_pc {height:570px;}
	.container01 .inner .panel:first-child {width:41%}
	.container01 .inner .panel:last-child {margin-left:4%;color:#1a2941; font-family:'S-CoreDream'; font-weight:700; font-size:19px;}
	.container01 .inner .panel:last-child .content > p { font-size:16px;margin-top: 20px;}
}
@media screen and (max-width:768px){/*태블릿*/
	.container01 .visual_pc { display:none;}
	.container01 .visual_mo { display:block;}
	.container01 .inner {flex-direction:column;width:100%;text-align:center;padding:10% 0}
	.container01 .inner .panel:first-child {width:40%;}
	.container01 .inner .panel:last-child {margin-top:10px;font-size: 17px;}
	.container01 .inner .panel .content img {width:auto; display:block;}
}
@media screen and (max-width:600px){/*모바일*/
	.container01 .inner .panel:first-child {width:50%;}
	.container01 .inner .panel:last-child .content > p {margin: 10px auto;width: 70%;}
}
@media screen and (max-width:480px){/*모바일*/
    .container01 .inner .panel:first-child { width:70%; }
	.container01 .inner .panel:last-child { font-size: 14px;}
	.container01 .inner .panel:last-child .content > p { font-size:12px;line-height: 16px;}
}

/* =========================
	container02
========================= */
.container02 .icon_set {display:flex;margin:3% auto;width:65%;}
.container02 .icon_set .inner {flex:1; display:flex;justify-content:space-around;border-right:1px solid #d6d6d9;}
.container02 .icon_set .inner:last-child {border:0;}
.container02 .icon_set .inner > a {overflow:hidden;display:block;}
.container02 .icon_set .inner > a > p {float:left;margin-top:20px;font-size:18px;color:#888;font-weight:bold;}
.container02 .icon_set .inner > a:hover > p{color:#103e8e}
.container02 .icon_set .inner > a > p > span {font-size:12px;}
.container02 .icon_set .inner > a .imgwrap {float:left;margin-right:20px;}
.container02 .icon_set .inner > a .imgwrap img:last-child{display:none}
.container02 .icon_set .inner > a:hover .imgwrap img:first-child{display:none}
.container02 .icon_set .inner > a:hover .imgwrap img:last-child{display:inline-block;}


@media screen and (max-width:1024px){
	.container02 .icon_set {width:85%;margin:5% auto;}
}
@media screen and (max-width:768px){
	.container02 .icon_set { width: 80%; margin:7% auto;}
	.container02 .icon_set .inner > a {text-align:center}
	.container02 .icon_set .inner > a .imgwrap {width:100%;margin-right:0px;}
	.container02 .icon_set .inner > a > p {width:100%}

}
@media screen and (max-width:600px){
}
@media screen and (max-width:480px){
	.container02 .icon_set { width: 95%; }
	.container02 .icon_set .inner > a > p {font-size:15px;}
}