@charset "utf-8";
@import url("base.css");
@import url("common.css");
@import url("../css/font.css");
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

#wrap{position:relative;overflow: hidden;}
.scrl_off{position: fixed !important;height: 100% !important;width: 100%;overflow:hidden !important;top: 0;left: 0;}
.dim{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99998;background:rgba(0,0,0,0.5)}
.header.scrl_off{z-index: 9;}

.header {height: 60px;position: absolute;width:100%;}
.header .header_left{position: absolute;top: 50%;left: 6.66%;z-index: 99;margin-top: -9px;}

p.i_menu{background: url("../../images/main_c/icon/menu_w.png") no-repeat center center;width:25px;height: 18px;background-size:25px 18px !important;color: transparent;padding:20px; top:-20px;left:-20px;position:relative;}/*20191121 수정*/
p.i_barcode{background: url("../../images/main_c/icon/barcode_w.png") no-repeat center center;width:30px;height: 18px;background-size: 30px 18px !important;color: transparent;position: absolute;right: -10px;top:-10px;padding:10px;}/*20191121 수정*/
.header .header_right{position: absolute;top: 50%;right: 6.66%;z-index: 99;margin-top: -9px;}
/* .header .header_right{position: absolute;top: 3.33%;right: 6.66%;z-index: 99} */
.header .header_right .bubble{margin-top: 30%;position:relative;left: 13%;}
.header .header_right .bubble p{background:#fff;border-radius: 15px;font-size: 0.8rem;letter-spacing: -0.08rem;padding: 5px 10px;line-height: 1.5;color: #333;}
.header .header_right .bubble p > span{font-weight: bold;}
.header .header_right .bubble p:after{display: inline-block;content: "";width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 15px solid #fff;position: absolute;top: -7px;left: 50%;margin-left: 20px;}

/* BARCODE */
.top_barcodeWrap{width: 94%;background: #fff;position: absolute; top:  0%; left: 50%; margin-left: -47%; border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;z-index: 99998;font-family: 'Roboto',sans-serif}

.top_barcodeWrap .barcode_area{text-align: center;position: relative;display: flex;flex-direction: column;justify-content: center;} /* 20250214 #20003-1 수정 */ /* 20250218 #20003 수정 */
.top_barcodeWrap .barcode_area p.img_area{width: 66%;}

.top_barcodeWrap .barcode_area p.img_more a{width: 21px;height: 21px;position: absolute;bottom: 0;right: 16.62%;} /* 20250214 #20003 수정 */  /* 20250214 #20003-1 수정 */ /* 20250218 #20003 수정 */
.top_barcodeWrap .barcode_area p.img_more a img{position: absolute;top: 0;left: 0;} /* 20250214 #20003 추가 */
.top_barcodeWrap .barcode_area > p{display: inline-block;}
.top_barcodeWrap .barcode_area p img + span{text-align: center;display: block;padding:7% 0 0;letter-spacing: 1px;color: #666;font-size: 1.2rem;}
.top_barcodeWrap .btn_hide img{width: 6%;display: block;margin: 0 auto;}
.top_barcodeWrap .my_area{padding: 10% 17.62% 5.6% 16.62%;}
.top_barcodeWrap .my_area:after{display: block;content:"";clear:both;}
.top_barcodeWrap .m_grade a{font-family: "Roboto",sans-serif;font-size: 0.9rem;font-weight: 500;color: #333;float: left;letter-spacing: -0.5px;}
.top_barcodeWrap .m_grade a:nth-child(2):before{width: 1px;height: 10px;content: '';display: inline-block;background: #d6d6d6;vertical-align: middle;margin: 0 8px;}
.top_barcodeWrap .m_grade a span.dot{width: 2px;height: 2px;display: inline-block;border-radius: 50%;background: #333;vertical-align: middle;margin: 0 1px;}
.top_barcodeWrap .m_point a:after{content: "";display: inline-block;background: url(../../images/main_b/common/arrow.png) no-repeat center center;background-size: 100%;width: 6px;height: 10px;margin-left: 7px;margin-bottom: 3px;vertical-align: middle;}
.btn_hide.barco_btn{padding: 5% 0;margin-top: 2%;}
.top_barcodeWrap .m_point a{font-family: "Roboto",sans-serif;font-size: 1rem;color: #333;float: right;letter-spacing: -0.4px;font-weight: 500;}
/* 20250214 #20003 추가 :: S */
/* .barcode_con{width: 286px;} 20250214 #20003-1 수정 20250218 #20003 삭제 */
.barcode_con .barcode_bars{height: 50px;width: 286px;margin: 0 auto;} /* 20250218 #20003 수정 */
.barcode_con .barcode_txt{text-align: left;padding: 5.6% 17.62% 0 16.62%;letter-spacing: 1px;color: #666;font-size: 1rem;} /* 20250218 #20003 수정 */
/* 20250214 #20003 추가 :: E */


/* 메인슬라이드 */
.content{width: 100%;height: 100%;font-family: 'Noto Sans KR',sans-serif;}
.main_slide{height: 100%;width: 100%;}

/* SWIPER */
.main_slide .swiper-pagination-bullets {text-align:center; top:13.9%; width:auto !important;bottom: inherit !important;position: absolute;left: 0 !important;font-size: 0;text-align: center;padding-left: 13%; -webkit-tap-highlight-color: rgba(255,255,255,0);}/*20191127 수정*/
/* 20200219 수정 S */
.main_slide .swiper-pagination-bullet{margin: 0 !important;width: 20px;height: auto;font-size: 0.8rem;opacity: 1;border-radius: 0;border-bottom: 1px solid #fff;background: none;padding-bottom: 10px;position: relative;font-weight: 100;color: #fff;}
.main_slide .swiper-pagination-bullet.swiper-pagination-bullet-active{font-weight: bold;color: #fff;}
.main_slide .swiper-pagination-bullet.swiper-pagination-bullet-active .pgSt02{font-weight: bold;}
.main_slide .swiper-pagination-bullet.swiper-pagination-bullet .pgSt02:after{border-bottom: 2px solid #fff;display: block;content: "";position: absolute;bottom: 0;width: 100%;opacity: 0;}
/* 20200219 수정 E */
.main_slide .swiper-pagination-bullet.swiper-pagination-bullet-active .pgSt02:after{opacity: 1;}
.swiper-slide{overflow: hidden;}
.slide-bgimg{position: absolute; width: 100%; height: 100%;	left: 0; top: 0; background-size: cover; background-position: center;}

/* SLIDE TXT STYLE */
.slide_tbox {position: absolute;bottom: 24.3%;/*left: 11%;*/width: 100%;font-family: 'Noto Sans KR', sans-serif;font-size: 0;color: #fff;text-align: center;}
.tbox_st1 {font-size: 1.7rem; font-weight: 100; line-height: 36px;width:37%;display: inline-block;vertical-align: top;letter-spacing: -0.2rem;padding-left: 13%;text-align: left;}
.slide_tbox > div {font-size: 1.1rem;color: #fff;font-weight:  100;width: 50%;display: inline-block;vertical-align: top;line-height: 1.6rem;letter-spacing: -0.08rem;text-align: left;} /* 20200217 수정 */
.tbox_st1.slideName span {display: block;;}
.tbox_st1.slideName span em{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;max-width:93px;display: inline-block;position: relative;vertical-align: top;}/*20191120 수정 width를 max로*/
.slide_tbox span.txt_date{display: block;font-size: 0.8rem; letter-spacing: initial; margin-top:0.35rem; font-weight: 400;} /* 20200217 수정 *//* 20200218 수정 */

/* BLACK MODE */
.b_mode .slide_tbox,.b_mode .slide_tbox > div {color: #1a1a1a;}
.b_mode p.i_barcode{background: url("../../images/main_c/icon/barcode_b.png") no-repeat center center;}
.b_mode p.i_menu{background: url("../../images/main_c/icon/menu_b.png") no-repeat center center;background-size: 100%;}
.b_mode .main_slide .swiper-pagination-bullet{color: #1a1a1a}
.b_mode .main_slide .swiper-pagination-bullet{border-bottom: 1px solid #1a1a1a;}
.b_mode .main_slide .swiper-pagination-bullet.swiper-pagination-bullet .pgSt02:after{border-bottom: 2px solid #1a1a1a;}
.banner_area .b_mode p.tit,.banner_area .b_mode p.txt_cont{color: #1a1a1a}
    
    /* IPHONE X */
	  @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3)  {
       .slide_tbox{bottom: 28.1%;/*left: 9%;width: 89%;*/}
       .main_slide .swiper-pagination-bullets{top: 15%;left: 0 !important;}
      }
      @media only screen and (min-device-height : 740px) and (max-device-height : 900px) {
        .slide_tbox{bottom: 28.1%;/*left: 11%;width: 89%;*/}
       .main_slide .swiper-pagination-bullets{top: 15%;left: 0 !important;} 
      }
      /* IPHONE 6 7 8 PLUS*/
      @media only screen and (min-width: 414px) and (device-height: 736px) { 
        .slide_tbox{bottom: 25.3%;}
      }

      @media only screen and (max-width: 320px) { 
        .slide_tbox > div{font-size: 1rem;}
        .tbox_st1{font-size: 1.5rem;/*width: 44%;*/}
        .tbox_st1.slideName span em{max-width: 85px; min-width: 60px;} /* 20191203 수정 */
      }
	
    /* iphone XR */
    @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }
   /* iphone XS */
    @media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }
   /* iphone XS Max */
    @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }
	
/* BANNER DOWN :: S*/
.banner_down{position: absolute;top: 80%;height: 20%;background:#fff;border-top-left-radius: 15px;border-top-right-radius: 15px;z-index: 99997;width: 100%;overflow: hidden;-webkit-overflow-scrolling:touch;}
.noice_area{text-align: center;padding: 3% 0;color: #333;font-weight: 100;line-height: 1;}
.banner_notice:before{content: "";width:8px;height: 5px;background: url(../../images/main_c/icon/up.png) no-repeat center center;background-size: 100%;margin-right: 10px;display:inline-block;vertical-align: middle;}
.banner_close:before{content: "";width:8px;height: 5px;background: url(../../images/main_c/icon/up.png) no-repeat center center;background-size: 100%;margin-right: 10px;display:inline-block;vertical-align: middle;transform: rotate(180deg);margin-bottom: 3px;}
.noice_area p{display: none;}
.noice_area p.show{display: block;}
.noice_area p.banner_close{font-family: 'Roboto',sans-serif;font-size: 14px;font-weight: 500;color: #333;}
.banner_area ul{width: 95%;margin: 0 auto;}
.banner_area ul li{margin-bottom: 3%;position: relative;}
.banner_area ul li div > a{display: block}/*20191119 추가*/
.banner_area ul li div div{position: absolute;bottom: 0;padding:10% 6% 4%; } /* 20200217 수정 */
.banner_area p.tit{font-size: 1.45rem;color: #fff;font-weight:500;line-height: 1.5;}
.banner_area p.txt_cont{font-size: 0.85rem;color: #fff;font-weight:100;line-height: 1.5;}/* 20191125_02 수정 */
.banner_area p.txt_cont em {display:inline-block; margin-bottom:1.65%;}/*20200218_2 수정*/
.banner_area p.txt_cont span{display: block;padding-top: 2%;font-weight: 400;font-family: 'Roboto',sans-serif; font-size: 0.8rem;}/*20191125_02 수정*/ /* 20200217 수정 *//* 20200218 수정 *//*20200218_2 수정*/
.banner_area p.txt_cont em.triangle {margin-bottom:0;margin-left: 0.2rem;margin-right: 0.1rem}/* 20200316 수정 */
.banner_area .sm .banner_date{min-height: 25px;}/* 20200219 수정 */
.banner_area .banner_st02 p.txt_cont span{display: block;}
.banner_area ul li.noDate > div >a div{padding:0;bottom: unset;position: absolute;top: 50%;transform: translateY(-50%);left: 6%;}/*20191121_02 수정*/
.parallax2{/*transform:translate3d(0px, 20px, 0px) !important;*/transition: 0.2s;}
.parallax{transition: 0.2s;transform:translate3d(0px, 0, 0px);}  

.floating_icon{position: fixed;bottom: 16%;z-index: 99997;width: 18%;right:5%;} /* 20191212 수정 */
.icon_scrollTop{position: fixed;bottom: 5%;z-index: 99997;width: 15%;right:5%;}
.floating_icon .close{position:absolute;top: -6%;right: 0;width: 22%;} /* 20191213 수정 */
  
/* popup :: S */

.main_pop{width: 90%; max-width: 300px; max-height: 90%; left: 50%; transform: translate(-50%, -50%); position: absolute;z-index: 99999;top: 50%;} /* 20211008 수정 */
.main_pop .button_wrap{background: #fff;}
.main_pop .button_wrap ul:after{display: block;content: '';clear: both;}
.main_pop .button_wrap li{width: 50%;float: left;text-align: center;position: relative;line-height: 1;}
.main_pop .button_wrap li a{font-size: 13px;color: #333;letter-spacing: -0.75px;display: block;line-height: 1;padding: 17px 0;} /* 20211008 수정 */
.main_pop .button_wrap li:last-child:after{content: '';width: 1px;height: 100%;position: absolute;left: 0;background: #e0e0e0;top: 0;}
.swiper-pop.swiper-container-horizontal>.swiper-pagination-progressbar
 {top: unset;width: 50%;bottom: 9.3%;left: 25%;background: #fff;height: 2px;}
 .swiper-pop .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #333;}
/* popup :: E*/

/* 20210705 추가 :: S */
.mainpop_01{width: 82%;left: 9%;background: #fff;}
.mainpop_01 .area{color: #333;text-align: center;padding: 13% 13% 8%; }
.mainpop_01 .tit{font-size: 24px;line-height: 1.25;}
.mainpop_01 .img{width: 53%;margin: 10% auto 0;}
.mainpop_01 .date{font-size: 0;margin-top: 7%;}
.mainpop_01 .date span{display: inline-block;height: 25px;line-height: 25px;font-size: 14px;font-weight: 500;background: #f2f2f2;border-radius: 50px;padding:0 12px;}
.mainpop_01 .txt{font-size: 14px;line-height: 1.4;margin-top: 1%;}
.mainpop_01 .txt strong{font-weight: 500;}
.mainpop_01 .result{font-size: 14px;line-height: 1.4;background: #f2f2f2;padding:7% 10px;margin-top: 7%;}
.mainpop_01 .result strong {font-size: 20px;color: #333;font-weight: 500;}
.mainpop_01 .result strong span{font-size: 14px;}
.mainpop_01 .button_wrap li a{font-size: 14px;color: #fff;background: #222;}
/* 20210705 추가 :: E */


/* ANIMATION */
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

  .animated {
    opacity: 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  }
  .animated02 {
    opacity:1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  }

  
.b_text {
	-webkit-animation-name: b_text; 
	-webkit-animation-duration: 4s; 
	-webkit-animation-iteration-count: infinite; 
	animation-name: b_text; 
	animation-duration:4s; 
	animation-iteration-count: infinite;
	}

@keyframes b_text {
    0%   {top:80%;}
    25%  {top:80.8%;}
    50%  {top:80%;}
    75%  {top:80.8%;}
    100% {top:80%;}
}
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

/* 20191202 추가 S */
.top_barcodeWrap .m_grade a {position: relative;}
.top_barcodeWrap .m_grade a span.ico_rabbit {position: absolute; right: -16px; top: -2px; width: 12px;}
/* 20191202 추가 E */

/* 20191203 추가 S */
@media only screen and (max-width: 320px) { 
  .banner_area .sm p.txt_cont span {min-height: auto; padding-top: 2%; line-height: 1;}/*20200218_2 수정*/
}
/* 20191203 추가 E */

.top_barcodeWrap .m_grade a span.ico_emom {position: absolute; right: -15px; top: -1px; width: 12px;} /* 20191209 추가 */

/* 20191217 엠블럼 추가 :: S */
.emblem_area {width: 10%; position: absolute; left: 50%; top: 50%; margin-top: -12px; margin-left: -5%; z-index: 2;}
.i_emblem {display: inline-block; width: 38px; height: 24px; background: url(../../images/main_b/common/emblem40_white.png) no-repeat center / contain; text-indent: -9999px;}
.b_mode .i_emblem {background-image: url(../../images/main_b/common/emblem40_black.png);}
/* 20191217 엠블럼 추가 :: E */

/* 20200217 추가 :: S */
.triangle::after{content:""; display: inline-block; vertical-align: middle; width:3px; height:3.5px; background:url(../../images/main_c/icon/bnr_arw.png) center no-repeat; background-size:contain; margin:0 0 0.1rem 0;}/* 20200316 수정 */
/* 20200217 추가 :: E */
li .b_mode .triangle::after {background:url(../../images/main_c/icon/bnr_arw_b.png) center no-repeat;background-size:contain;}/* 20200305 추가 */