@import url(../../../css/front/kr/front01.css); /*이대리님*/
@import url(../../../css/front/kr/front02.css); /*이주임님*/
@import url(../../../css/front/kr/front03.css); /*양지은님*/

/* 메인 버튼 */
.btn_main_arrow .arrow { display: inline-block; position: relative; width: 10px; height: 10px; white-space: nowrap; transform: translateX(-8px); margin-left: 20px; }
.btn_main_arrow .arrow::before { position: absolute; top: calc(50% - -3px); left: 1px; transform: translateY(-50%); width: 30px; height: 2px; background-color: #fff; content: '';}
.btn_main_arrow .arrow::after { position: absolute; top: 50%; left: 23px; transform: translateY(-50%) rotate(45deg); width: 8px; height: 2px; background-color: #fff; content: '';}
/* .btn_hover_arrow:hover .arrow { width: 24px; opacity: 1; transform: translateX(0); margin-left: 6px;} */

/*MAIN Layer_POPUP*/
.main_layer_popup { display: none; position: fixed; left:0px; top:0px; z-index:10000; width:100%; height: 100%; background-color: rgba(0,0,0,0.70); }
.main_layer_popup .close_bg {position: absolute; left:0px; top:0px; width: 100%; height: 100%; content: ""; z-index: 0;}
.main_layer_popup.layer_active { display:block;}
.main_layer_popup .layer_con { position: relative; overflow: hidden; left: 50%; top: 50%; width: 520px; height: 720px; transform: translate(-50%, -50%); border-radius: 20px; z-index: 1; padding-top: 50px;}

.layer_nav_btns a { position: absolute; top: 10px; left: 10px; font-size: 16px; color: #fff; font-weight: 400;  transition: none;}
.layer_nav_btns a:hover { color: #128aee;}
.layer_nav_btns a i { display: inline-block; width: 16px; height: 16px; background-image: url("../../../image/common/layer_popup_icon.png"); vertical-align: middle; margin-right: 6px;}
.layer_nav_btns a:hover i { background-position: 0 16px; }
.layer_nav_btns .swiper-button-prev, .layer_nav_btns .swiper-button-next { width: 38px; height: 38px; background-color: #fff; border-radius: 50%;  }
.layer_nav_btns .swiper-button-prev, .layer_nav_btns .swiper-button-next { top: 12px; background-color: rgba(0,0,0,0.0); border:none; display: block; width:60px; height: 60px; background-image:url(../../../image/common/controls_main.png); background-repeat: no-repeat; transition: all 0s ease-out; -webkit-transition: all 0s ease-out;  background-size: 120px 180px; background-position: 0 0; }

.layer_nav_btns .swiper-button-prev { left: auto; right: 50px; background-position: 0px 0px; }
.layer_nav_btns .swiper-button-next { right: 0px; background-position: -60px 0px; }
.layer_nav_btns .swiper-button-prev:hover {background-position: 0px -120px;}
.layer_nav_btns .swiper-button-next:hover {background-position: -60px -120px;}



.main_layer_slider { position: relative; width: 520px; height: 620px; border-radius: 20px 20px 0 0;}
.main_layer_slider .swiper-slide { width: 100%; height: 100%; background-color:#F4F4F4; background-image:url("../../../image/common/logo.svg"); background-position:center center; background-repeat:no-repeat; background-size: 250px;}
.main_layer_slider .swiper-slide>a { display: block; width: 100%; height: 100%;}
.main_layer_slider.swiper-container-horizontal > .swiper-pagination-progressbar, .main_layer_slider.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite  { height: 2px; top: auto; bottom: 0px; }
.main_layer_slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color:#128aee; }

.main_layer_slider .slider_control { position: absolute; right: 20px; bottom: 20px; width: 60px; height: 30px; display: flex; align-items: center; justify-content:center; font-size: 14px; line-height: 20px; letter-spacing: 3px; color: #FFF; z-index: 10; background-color: rgba(0,0,0,0.60); border-radius: 15px; padding-left: 3px; }

.main_layer_popup .layer_con .close_btn { width:100%; overflow: hidden; }
.main_layer_popup .layer_con .close_btn a { display: block; width: 100%; height:50px; text-align:center; color:#222; background-color: #FFF; font-size:15px; line-height:50px; }
.main_layer_popup .layer_con .close_btn a:hover { color:#128aee; background-color:#EEE; }

/* FRONT MAIN POPUP (일반팝업) */
.main_normal_popup .close_btn { padding: 10px;}

/* SALES SEARCH POPUP (회원확인 팝업) */
.sales_search_popup>div>ul {width: 100%; margin-bottom: 40px; }
.sales_search_popup>.sales_search_box> ul {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding-top: 17px; padding-bottom: 17px; overflow: hidden; }
.sales_search_popup>.sales_search_box>ul>li {width: 100%; display: flex; }
.sales_search_popup>.sales_search_box>ul>li:first-child { margin-bottom: 10px;}
.sales_search_popup>.sales_search_box>ul>li h3 {width: 25%; font-size: 16px;  line-height: 50px; color: #999; font-weight: 500; }
.sales_search_popup>.sales_search_box>ul>li .inp-txt {width: 75%; }
.sales_search_popup>.sales_search_box>h2 { padding: 0px 0 20px; font-size: 16px; font-weight: 500; line-height: 30px; }
.sales_search_popup .sales_search_view {padding-top: 20px; }
.sales_search_popup .sales_search_view img { display: block; width: 60px; margin: 0 auto 15px; }
.sales_search_popup .sales_search_view img.img_title { width: 140px; height: auto;}
.sales_search_popup .sales_search_view>p {width: 100%; text-align: center; font-size: 18px; color: #666; line-height: 25px; margin-bottom: 40px; border-bottom: 1px solid #ddd; padding-bottom: 30px; }
.sales_search_popup .sales_search_view>p>span.font_blue {font-weight: 500; }

/* 평균후원수당공지 팝업 */
.seif_notice h2 { padding: 20px 0 20px; font-size: 18px; font-weight: 500; line-height: 30px; }

/*SHOPPING MAIN BANNER*/
.shopping_main_banner_wrap { position: relative; max-width: 100%; min-width: 1420px; height: 930px; margin-bottom: 150px;}
.shopping_main_banner_wrap .shopping_main_slider { position: relative; width: 100%; height: 100%; }
.shopping_main_banner_wrap .shopping_main_slider .swiper-slide { width: 100%; height: 100%; background-position: center top; background-repeat: no-repeat; }
.shopping_main_banner_wrap .shopping_main_slider .swiper-slide>a { display: block; width: 100%; height: 100%;}

.shopping_main_banner_wrap .slider_control { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 108px; height: 36px; z-index: 1; cursor: auto; background-color: rgba(0,0,0,0.60); border-radius: 18px;}
.shopping_main_banner_wrap .slider_control div.counting_num { width: 55px;} 
.shopping_main_banner_wrap .slider_control .counting_num { display: flex; align-items: center; justify-content: space-evenly; position: static; width: auto; color: rgba(225,225,225,225.50); font-size: 13px; font-weight: 400; }
.shopping_main_banner_wrap .slider_control .counting_num span { font-size: 13px; color: #fff; }

.shopping_main_banner_wrap .swiper-button-next ,.shopping_main_banner_wrap .swiper-button-prev { display: inline-block; position: relative; width:20px; height: 30px; background-image:url("../../../image/common/controls_main03.png"); background-repeat:no-repeat; background-size:60px 60px; margin-top: 0px; top: auto; left: auto; right: auto;}
.shopping_main_banner_wrap .swiper-button-prev {background-position: -5px 0px;}
.shopping_main_banner_wrap .swiper-button-next {background-position: -35px 0px; }
.shopping_main_banner_wrap .swiper-button-prev:hover {background-position: -5px -30px;}
.shopping_main_banner_wrap .swiper-button-next:hover {background-position: -35px -30px; }

/* BEST BANNER CON  */
.best_banner_con .product_list { flex-wrap: nowrap;}

/* UNEXA STORY */
.unexa_story_wrap { width: 100%; min-width: 1420px; overflow: hidden; text-align: center; margin-bottom: 150px; }
.unexa_story_wrap h3 { font-family: "Nunito Sans"; font-size: 20px; line-height: 20px; color: #128aee; font-weight: 700; margin-bottom: 30px;}
.unexa_story_wrap h2 { font-size: 54px; line-height: 74px; color: #222; font-weight: 700; margin-bottom: 40px;}
.unexa_story_wrap p { font-size: 18px; line-height: 30px; color: #666; font-weight: 400; margin-bottom: 70px;}
.unexa_story_wrap .btn { margin-bottom: 70px;}
.unexa_story_wrap img { display: block; margin: 0 auto 180px;}
.animated-title { position: relative; width: 100%; max-width:100%; height: auto; padding: 60px 0 50px; overflow-x: hidden; overflow-y: hidden; }
.animated-title span { font-family: "Libre Bodoni"; font-style: italic; font-size: 90px; line-height: 74px; color: #e5e9f0; padding: 0 25px;}
.animated-title .track {position: absolute; white-space: nowrap;will-change: transform; animation: marquee 70s linear infinite; }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (hover: hover) and (min-width: 700px){
    .animated-title .box {-webkit-transform: translateY(calc(100% - 8rem)); transform: translateY(calc(100% - 8rem));}
}

/* PRODUCT BANNER */
.best_banner_con { position: relative; max-width: 100%; width: 1400px; margin: 0 auto 150px; overflow: hidden; }
.best_banner_con > h3 { font-family: "Nunito Sans"; font-size: 20px; line-height: 20px; color: #128aee; font-weight: 700; text-transform: uppercase; margin-bottom: 20px;}
.best_banner_con > h2 { font-size: 54px; line-height: 54px; color: #222; font-weight: 400; margin-bottom: 70px;}
.best_banner_con > h2 strong { font-weight: 700;}
.best_banner_con > a { position: absolute; top: 45px; right: 0px;}

/* 260224 유넥사 요청으로 메인 con 삭제 */
/*PRODUCT MAIN BANNER01 */
/* .product_banner_wrap { width: 1420px; margin: 0 auto 150px; overflow: hidden;}
.product_banner_wrap .banner_con { position: relative; display: flex; align-items: flex-start; width: 1420px; margin: 0 auto; }
.product_banner_wrap .img_box { width: 640px; margin-right: 70px;} 

.product_banner_wrap .swiper-pagination { left: calc(50% - -11px); bottom: 30px; width: 687px; max-width: 687px; height: 4px; background-color: #CCC; }
.product_banner_wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #222;}

.product_banner_wrap .swiper-container { width: 687px; padding-top: 30px;}
.product_banner_wrap .swiper-container > h2 { font-family: "Nunito Sans"; font-size: 46px; line-height: 50px; color: #222; font-weight: 800; margin-bottom: 28px;}
.product_banner_wrap .swiper-container > p { font-size: 18px; line-height: 18px; color: #222; font-weight: 400; margin-bottom: 70px;}
.product_banner_wrap .swiper-container .swiper-wrapper { flex-wrap: nowrap; } */

/*PRODUCT MAIN BANNER02 */
/* .content.main .product_banner_wrap:nth-of-type(2) .banner_con { display: flex; flex-direction: row; }
.content.main .product_banner_wrap.banner_second .banner_con .img_box { order: 2; margin-right: 0;}
.content.main .product_banner_wrap.banner_second .banner_con .product_slider { order: 1; margin-left: 0;}
.product_banner_wrap.banner_second .swiper-container > h2 {  text-align: right;}
.product_banner_wrap.banner_second .swiper-container > p {  text-align: right;}
.product_banner_wrap.banner_second .swiper-pagination { left: 0;} */

/*ABS BANNER*/
.abs_banner_wrap { width: 100%; min-width: 1420px; height: 365px; overflow: hidden; margin-bottom: 150px; background-image:url("../../../image/front/kr/img_shopping_main03.jpg"); background-repeat: no-repeat; background-size:cover; background-position: center center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.abs_banner_wrap .banner_con { position: relative; width: 1420px; text-align: left; }
.abs_banner_wrap .banner_con h2 { font-size:54px; line-height: 74px; color: #222; font-weight: 400;}
.abs_banner_wrap .banner_con h2 strong { font-weight: 700;}

/*CONTRACT BANNER*/
.contact_banner_wrap { width: 100%; min-width: 1420px; height: 460px; overflow: hidden; margin-bottom: 150px; background-image:url("../../../image/front/kr/img_shopping_main06.jpg"); background-repeat: no-repeat; background-size:cover; background-position: center center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.contact_banner_wrap .banner_con { position: relative; width: 1420px; height: 460px; text-align: left; }
.contact_banner_wrap .banner_con .title_box { position: absolute; top: 50%; left: 830px; transform: translateY(-50%); padding-bottom: 0;}
.contact_banner_wrap .banner_con .title_box h3 { font-family: "Nunito Sans"; font-size: 20px; line-height: 20px; color: #222; font-weight: 700; margin-bottom: 30px; text-transform: uppercase;}
.contact_banner_wrap .banner_con .title_box h2 { font-size: 54px; line-height: 74px; color: #222; font-weight: 700; margin-bottom: 70px;}
.contact_banner_wrap .banner_con .title_box .btn { font-weight: 500; color: #222; background-color: #fff; border: none;}
.contact_banner_wrap .banner_con .title_box .btn:hover { background-color: #f7f7f7;}
.contact_banner_wrap .banner_con .title_box .arrow::before,.contact_banner_wrap .banner_con .title_box .arrow::after { background-color: #222;}

/*NEWS BANNER*/
.news_banner_wrap { width: 100%; min-width: 1420px; overflow: hidden; margin-bottom: 150px; }
.news_banner_wrap .title_box p { font-family: "Nunito Sans"; font-size: 20px; line-height: 20px; color: #128aee; font-weight: 700; margin-bottom: 30px; text-transform: uppercase;}
.news_banner_wrap .title_box h2 { font-size: 54px; line-height: 54px; color: #222; font-weight: 700; margin-bottom: 70px; }

.news_banner_wrap .banner_con { position: relative; width: 1420px; min-height: 460px; margin: 0 auto; display: flex; justify-content: space-between;}
.news_banner_wrap .banner_con ul { width: 960px; margin-top: -32px;}
.news_banner_wrap .banner_con ul li { position: relative; display: flex; justify-content: space-between; padding: 40px 0; cursor: pointer; border-bottom: 1px solid #ddd;}
.news_banner_wrap .banner_con ul li h2 { font-size: 24px; line-height: 35px; color: #222; font-weight: 500; padding-right: 80px; margin-bottom: 18px; word-break: keep-all;}
.news_banner_wrap .banner_con ul li h3 { font-size: 18px; line-height: 18px; color: #128aee; font-weight: 500; margin-bottom: 10px;}
.news_banner_wrap .banner_con ul li p { font-size: 16px; line-height: 16px; color: #999; font-weight: 400;}

/* TREE LINE (계층도) */
.tree_line_con { position:relative; width:100%; height:800px; padding:40px; background-color:#F4F4F4; overflow: auto; text-align:left; padding-right: 0px;}
.tree_line_con .dtree {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #666; white-space: nowrap;}
.tree_line_con .dtree .dTreeNode { display: flex; justify-content: left; align-items: center; }
.tree_line_con .dtree .dTreeNode.title { width:300px; font-size:20px; color:#FFF; line-height:60px; margin-bottom:10px; background-color:#222; justify-content: center; }
.tree_line_con .dtree .dTreeNode a.node, .tree_line_con .dtree .dTreeNode a.nodeSel { display: flex; align-items: center; border: 1px solid #666; margin-bottom: 10px; overflow: hidden; background-color: #FFF;}
.tree_line_con .dtree a.node>span, .tree_line_con .dtree a.nodeSel>span { display: block; text-align: center; padding: 5px 10px; border-right: 1px solid #666; font-size: 14px; line-height: 18px; }
.tree_line_con .dtree a.node>span:first-child, .tree_line_con .dtree a.nodeSel>span:first-child { font-size: 14px; color: #FFF; line-height: 36px; background-color: #666; border-right: 1px solid #999;}
.tree_line_con .dtree a.node>span:nth-child(2), .tree_line_con .dtree a.nodeSel>span:nth-child(2) { font-size: 14px; color: #FFF; line-height: 18px; background-color: #666; border-right: 0px;}
.tree_line_con .dtree a.node>span:last-child, .tree_line_con .dtree a.nodeSel>span:last-child { border-right: 0px}
.tree_line_con .dtree a.node>span>b, .tree_line_con .dtree a.nodeSel>span>b { display: block; font-size: 12px; color: #666;}
.tree_line_con .dtree a.node>span:nth-child(2)>b, .tree_line_con .dtree a.nodeSel>span:nth-child(2)>b { color: #FFF;}

.tree_line_con .dtree .clip {overflow: visible;}
.tree_line_con .dtree .active a.node, .tree_line_con .dtree .active a.nodeSel { border-color: #128aee;}
.tree_line_con .dtree .active a.node>span:first-child, .tree_line_con .dtree .active a.nodeSel>span:first-child { background-color: #128aee; border-right: 1px solid #ff81a9;}
.tree_line_con .dtree .active a.node>span:nth-child(2), .tree_line_con .dtree .active a.nodeSel>span:nth-child(2) { background-color: #128aee; }

/*EPR인증추가*/
.erp_pay_popup { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px;}
.erp_pay_popup p { font-size: 16px; line-height: 25px; text-align: center; margin-bottom: 30px; color: #999;}
.erp_pay_popup a { position: relative; display: block; width: 100%; border: 1px solid #DDD; padding: 50px 0px 50px; font-size: 18px; line-height: 20px; color: #222; text-align: center; border-radius: 10px; transition: none;}
.erp_pay_popup a .ico-id_pass.phone { margin-bottom: 10px;}
.erp_pay_popup a:hover {border-color: #128AEE;}
.erp_pay_popup a:hover .ico-id_pass.phone {background-position: 0px -100px;}