@charset "utf-8";

.wrapper{position:relative; max-width:100%;padding:0; min-width:320px;  margin:0 auto; top:0;  }

.column {  position:relative; max-width:1200px;margin:0 auto; box-sizing:border-box; }

@media screen and ( max-width:1200px ) {
	.column {width:100%;}
}
@media screen and (max-width:1024px){
    .wrapper {overflow:hidden; }
	.column {padding:0 1rem;}
}



/*******************************************************************
						Layout
********************************************************************* */
.main header {border:0}
header {   position: relative; z-index: 332;background-color: var(--color-sub);height: var(--hei-header); border-bottom: 0px solid #eaeaea;}
header .header_wrap {position: relative;width: 1200px; margin: 0 auto; height: 100%;}
header h1.logo {z-index: 10; width: 10rem;height: var(--hei-header);display: inline-block; vertical-align: middle;border: 0px solid #f00;}
header h1.logo > a { text-indent: -3333px;display: block;height: 100%;background-image: url('/images/inc/logo.svg');background-repeat: no-repeat;background-position: left center;background-size: auto 70%;}
header .bg {  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5);  z-index: 31;  opacity: 0;  visibility: hidden;  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}

header .gnb_wrap { position: relative; font-size: 0; width: auto; display: flex; justify-content: flex-start; gap: 1rem;}
header .gnb { position: relative;  text-align: center;}
header .gnb > ul > li { position: relative; display: inline-block; font-size: 0; vertical-align: middle;transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);}
header .gnb > ul > li > a { position:relative;}
header .gnb > ul > li > a > span {position: relative;display: block;padding: 0 1.75rem; line-height: var(--hei-header);font-size: 1rem; color: #fff;font-weight: 500; text-align: center; font-family: 'Roboto'; letter-spacing: 0;}
header .gnb > ul > li:hover > a > span { color: var(--color-main);}
header .gnb > ul > li ul { position: absolute; left: 0; width: 8.5rem; height: 0; margin-top: 5px; opacity: 0; background: #fff; overflow: hidden; box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.1);  border-radius: 5px; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);}
header .gnb > ul > li ul.n02 {width:12rem;}
header .gnb > ul > li ul.n03 {width:10rem;}
header .gnb > ul > li ul li {  border-top: 1px solid rgba(0, 0, 0, 0.05);}
header .gnb > ul > li ul li:first-child { border: 0;}
header .gnb > ul > li ul li a { display: block; padding: 0 1.25rem; line-height: 2.5rem; font-size: 0.9rem; font-weight: 500; color: #555; text-align: left;}
header .gnb > ul > li ul li a:hover { background: var(--color-main); color: #fff;}
header .gnb > ul > li:hover ul { padding: 0;  height: auto;  margin-top: -3px;  opacity: 1;}
header .gnb > ul > li.mobile {display:none;}
header .util {  height: 100%; display: flex; align-items: center; text-align: center; position: absolute; right: 0; top: 0px; gap:.5rem;}


/* Language */
.language-select {position: relative; display: inline-block; }
.language-select .current-lang { padding: 0;  width:7rem; color:#fff; cursor: pointer; background-color:transparent;  display: flex;  align-items: center;  gap: 5px; position:relative;}
.language-select:after {content:'';position:absolute; right:.5rem; top:50%; margin-top:-.35rem; width:.7rem; height:.7rem; background-size:auto 85%; background-repeat:no-repeat; background-position:center center; 
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M21,38.6L5,17.4c-2.5-3.3-0.1-8,4-8l32.1,0c4.1,0,6.5,4.7,4,8L29,38.6C27,41.3,23,41.3,21,38.6z'/%3E%3C/g%3E%3C/svg%3E%0A"); 
}
.language-select .lang-options { position: absolute;  top: 100%;  left: 0;  background: #fff; border-radius:.2rem; margin: 0;  padding: 5px 0; box-shadow:4px 4px 16px rgba(0,0,0,0.1); list-style: none;  width: 100%;  display: block;  opacity: 0;  transform: translateY(10px); pointer-events: none;  transition: all 0.25s ease;  z-index: 10;}
.language-select.open .lang-options { opacity: 1;  transform: translateY(0);  pointer-events: auto;}
.language-select .lang-options li { padding: 5px 10px; cursor: pointer;  display: flex; align-items: center;  gap: 5px; color:#333; font-size:.85rem;}
.language-select .lang-options li:hover { background-color: #f0f0f0;}

@media screen and (max-width: 900px) {
.language-select .current-lang { width:2.5rem;font-size:0;}
.language-select .lang-options li { font-size:0;}
}


header .util .link {display:flex;  align-items: center;}
header .util .link a { position: relative; display:inline-flex; align-items: center;  font-size: 0.915rem;  line-height:1; padding: .5rem .65rem; color: #fff; font-weight: 500;cursor: pointer;}
header .util .link a:before {content:''; font-family: 'xeicon';background-repeat:no-repeat; background-size:auto 100%; background-position:center center; }
header .util .link a.sign {padding:0 .5rem; }
header .util .link a.sign:before {content:''; display:inline-flex; align-items: center; margin-right:.25rem;width:1rem; height:1rem; background-image:url('/images/ico_signin.svg');}
header .util .link a.regist { padding:.5rem 1rem;border-radius: .5rem; border: 1px solid rgba(255, 255, 255, 0.5);}
header .util .link a.fav:before {content:"\ea11" ; display:inline-flex; align-items: center;  color:#fff; font-size:1.35rem;  }
header .util .link a.fav i{ position:absolute; right:0; top:0; font-size:.7rem; color:#fff; background-color: var(--color-main);border-radius:15px;padding:0 .15rem; min-width:17px; height:17px; display:flex;justify-content: center; align-items: center; z-index:10 }

header .util .link .mypage {position:relative; display:inline-block; width:110px;padding:0 15px 0 .65rem; text-align:left; background-repeat:no-repeat; background-position:calc(100% - 10px) ; background-size:auto 10px; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, 0.5);background-image:url('/images/arrow_down.svg');}
header .util .link .mypage a {border:0;padding:0.5rem 0 !important; font-weight:400; font-size:.9rem;}
header .util .link .mypage>ul{ display:none; opacity:0;z-index:333; overflow:hidden; position:absolute; top:30px;left:-1px; width:100%;height:auto;background:#fff;  border:1px solid #e9ebef; border-radius:.55rem; overflow:hidden; box-shadow:3px 3px 10px rgba(0,0,0,0.1); animation:come-in 0.3s ease forwards;}
header .util .link .mypage:hover>ul{ display:block; z-index:334;opacity:1;transform:translateY(5px);}
header .util .link .mypage>ul{ width:100%; text-align:left; }
header .util .link .mypage>ul>li{ display:block; width:100%;border-bottom:1px solid #f2f4f7; }
header .util .link .mypage>ul>li:last-child{ margin-bottom:0;border-bottom:0;}
header .util .link .mypage>ul>li>a{ display:block;padding:10px .65rem !important;font-size:.85rem !important; font-weight:400; letter-spacing:-.02em; color:#333;white-space:nowrap; transition:300ms ease-out 0ms}
header .util .link .mypage>ul>li>a:hover {color:var(--color-main); }
.mobile_header {display:none;}
@keyframes come-in{
   to{transform:translateY(0);opacity:1;}
}

@media screen and (max-width: 640px) {
header .util .link .mypage {display:none;}
}
.page_detail .mobile_top {display:none;}

/* Hamburger Menu Styles */
header .menu-toggle { display: none; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 30px; height: 23px; background: none; border: none; cursor: pointer; z-index: 3334;}
header .menu-toggle span { display: block; width: 100%; height: 2px; background: #fff; margin-bottom: 6px; transition: all 0.3s ease;}
header .menu-toggle.active span {background-color:#000;}
header .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px);}
header .menu-toggle.active span:nth-child(2) { opacity: 0;}
header .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7.5px, -7.5px);}
           
/* Mobile Menu Styles */
@media screen and (max-width: 1200px) {
  header .header_wrap {width:100%;}
}

@media screen and (max-width: 1024px) {
   
    header .header_wrap { width: 100%; box-sizing: border-box; }
    header .gnb_wrap { flex-direction: column; gap: 0; }
	header h1.logo {margin-left:0rem; width:7rem; padding-left:7px;}
	header h1.logo > a {background-size: auto 55%;}

    header .gnb { display: block; width: 70%;  height: 100vh; background: #fff; position: fixed; top: 0; right: -100%; padding-top:70px;z-index: 333; transform: translateX(100%); transition: transform 0.3s ease-in-out;}
    header .gnb.active {transform: translateX(0); right:0;}
	header .bg.active {  opacity: 1;  visibility: visible;}
	 
    header .gnb > ul { display: block; height: 100%; overflow-y: auto; padding:0 ; margin-top:70px;}
    header .gnb > ul > li { display: block; position:relative; border-bottom: 1px solid rgba(0, 0, 0, 0.1);position:relative;}
	header .gnb > ul > li.mobile {display:block;}
    header .gnb > ul > li:hover ul {margin:0}
	header .gnb > ul > li > a { position:relative; display:block; border:0px solid #f00}
    header .gnb > ul > li > a > span {color: #333; text-align: left;padding: 0 15px; line-height: 50px; position: relative;}
    header .gnb > ul > li:hover > a > span { color: var(--color-main); }
	/* 화살표 추가: li.child > a 에만 표시 */
    header .gnb > ul > li.child > a:after { content: ''; position: absolute; right:1rem; top: 50%; width:1rem;height:1rem;  transform: translateY(-50%); font-size: 0.75rem; color: #333; transition: transform 0.3s ease;
	background-repeat:no-repeat; background-position:center center; background-size:auto 70%; border:0px solid #ddd; z-index:333;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23a6a8ab;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M21,38.6L5,17.4c-2.5-3.3-0.1-8,4-8l32.1,0c4.1,0,6.5,4.7,4,8L29,38.6C27,41.3,23,41.3,21,38.6z'/%3E%3C/g%3E%3C/svg%3E%0A"); 
	}

    /* 활성화 시 화살표 회전 */
    header .gnb > ul > li.child > a.active:after { transform: translateY(-50%) rotate(180deg); 
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2300bdff;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M21,38.6L5,17.4c-2.5-3.3-0.1-8,4-8l32.1,0c4.1,0,6.5,4.7,4,8L29,38.6C27,41.3,23,41.3,21,38.6z'/%3E%3C/g%3E%3C/svg%3E%0A"); 
	}
    header .gnb > ul > li.child a.active span  {color:var(--color-main)}
    header .gnb > ul > li ul {position: relative;width: 100% !important;box-shadow: none; border-radius: 0;margin-top: 0;max-height: 0;background: #f5f5f5; }
    header .gnb > ul > li ul.active {height: auto; width:100% !important; max-height: 300px; opacity: 1;  }
    header .gnb > ul > li ul li a { padding-left: 30px;  color: #555; }
    header .util {right:3.25rem; }
    header .menu-toggle { display: block;}

	.mobile_header {display:block; position:absolute; left:0; top:0; width:100%;background-color:var(--color-sub); height:130px; }
    .mobile_header .wrap {position:relative; display:block; width:100%; height:100%; border:0px solid #f00; }
    .mobile_header .wrap .home {position:absolute; left:1.5rem; top:1.25rem; width:1.85rem; height:1.85rem; background:url('/images/inc/ico_home_w.png') no-repeat center ; background-size:cover; }
	.mobile_header .wrap .link {position:absolute; left:0; bottom:0; width:100%;display:flex;  justify-content: center;flex-wrap: nowrap; justify-content: space-around;height:2.85rem; border-top:1px solid rgba(255,255,255,0.2)}
	.mobile_header .wrap .link a {color:#fff; font-size:.95rem; height:100%; padding:0 1.5rem;width:auto; display:inline-flex; align-items: center;  justify-content: center;border-right:1px solid rgba(255,255,255,0.15) }
	.mobile_header .wrap .link a:last-child {border:0;}
	
}
@media screen and (max-width: 900px) {
header .menu-toggle {right:.85rem;width:25px;}
header .menu-toggle.active span {background-color:#fff;}
header .util  {gap:0}
header .util .link a {padding: .4rem .5rem; font-size:.85rem;}
header .util .link a.sign {font-size:0; }
header .util .link a.regist {border-radius:5rem; padding-left:.65rem; padding-right:.65rem;}
header .util .link a.fav {padding-left:0;}

.page_detail header {display:none;}
.page_detail {padding-top:55px; padding-bottom:3rem;}
.page_detail .mobile_top {display:block;background-color:rgba(255,255,255,0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);  position:fixed;left:0;top:0; height:55px;width:100%; z-index:10 }
.page_detail .mobile_top .btn_close {position:absolute; left:0; top:0; width:55px; height:55px; background:url('/images/arrow_prev.png') no-repeat center ; background-size:auto 50%; z-index:333}
.page_detail .mobile_top .name {display:flex; height:100%; width:100%;  justify-content: center; align-items: center; font-size:1rem; color:var(--color-sub); font-weight:600}


}
@media screen and (max-width: 460px) {
header .gnb { width: 100%; }
header .util .link a.sign {padding:0 .35rem 0 .35rem; }
}


/*********************************************************/
/*                     Footer
/******************************************************* */
.main footer {margin-top:2rem;}
footer { position:relative; clear:both;  width:100%; margin-top:9rem; padding:3rem 0 5rem; font-size:0; background-color:#000; }
footer .column {position:relative; }
footer address { width:100%; }
footer .fnb_wrap {padding-left:300px; display:flex; align-items: flex-start;}
footer .fnb_wrap .fnb {width:23%; font-size:0; }
footer .fnb_wrap .fnb.n01 {width:34%;}
footer .fnb_wrap .fnb.n02 {width:26%;}
footer .fnb_wrap .fnb.n03 {width:20%;}
footer .fnb_wrap .fnb.n04 {width:20%;}
footer .fnb_wrap .fnb h2{color:#fff; margin-bottom:1rem;}
footer .fnb_wrap .fnb ul {display:flex; flex-direction: column; gap:1rem; }
footer .fnb_wrap .fnb ul.half {width:60%; display:inline-flex;}
footer .fnb_wrap .fnb ul.col6 {width:60%; display:inline-flex;}
footer .fnb_wrap .fnb ul.col4 {width:40%; display:inline-flex;}
footer .fnb_wrap .fnb ul li a {font-size:.85rem; color:#999; font-weight:500; }
footer .fnb_wrap .fnb ul li span {font-size:.85rem; color:#999; font-weight:500; }
footer .fnb_wrap .fnb ul li a:hover {color:var(--color-main)}
footer .info {position:absolute; left:0; top:-.5rem; width:300px; }
footer .info .f_logo {height:3rem; background:url('/images/inc/logo.svg') no-repeat left ; background-size:auto 90%;}
footer .info ul {padding-top:.85rem; display:flex; flex-direction: column; gap:1rem; }
footer .info ul li {position:relative;padding-left:1.5rem; color:#888; font-size:.8rem; line-height:1.3em;font-weight:400;}
footer .info ul li:before {content:''; position:absolute; left:0; top:0;font-family:'xeicon'; color:#666; font-size:1rem;  }
footer .info ul li.time:before {content:"\ea2b"}
footer .info ul li.mail:before {content:"\ea06"}
footer .info ul li.call:before {content:"\e9d3"}
footer .info ul li.call {font-size:.9rem; color:#fff;}
footer .info ul li.call a { display:block; margin-left:-.9rem;margin-top:.5rem;color:var(--color-main); font-size:1.2rem; font-weight:600;}
footer .copyright {margin-top:1.5rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.15); font-size:.85rem; color:rgba(255,255,255,0.5);font-family:'pretendard'}

/* skip_top */
footer .skip_top { position:fixed; right:100px; bottom:30px;z-index:50; transition: all 0.1s ease-in;}
footer .skip_top .skip_top_btn {width:56px; height:56px;position:relative; background:#2b2c2d; color:#fff; border-radius:50%; cursor:pointer;text-align:center;box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.05);}
footer .skip_top .skip_top_btn:before{ content:"\e909"; position:absolute; left:0; top:0; width:100%; height:100%;  text-align:center; font-family:'xeicon'; margin:0; font-size:23px; display:flex; justify-content: center;align-items: center;color:#fff; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1)}
footer .skip_top .skip_top_btn span { display:block;text-align:center; padding-top:18px; font-weight:600; font-size:14px;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1); display:none; }



@media screen and (max-width:900px){
footer { margin-top:3rem; padding:2rem 0 3rem; }
footer .info .f_logo {display:none;}
footer .fnb_wrap {padding-left:0;}
footer .info {position:relative; left:auto; top:auto; width:100%; margin-top:1rem;}
footer .fnb_wrap {flex-wrap: wrap;}
footer .fnb_wrap .fnb.n01 {width:100%; margin-bottom:1rem;}
footer .fnb_wrap .fnb.n02 {width:45%;}
footer .fnb_wrap .fnb.n03 {width:35%;}
footer .fnb_wrap .fnb.n04 {width:20%;}
footer .fnb_wrap .fnb h2 {margin-bottom:.5rem;}
footer .fnb_wrap .fnb ul { gap:.35rem; }
footer .fnb_wrap .fnb ul.col6 {width:100%; display:flex;flex-direction:row;flex-wrap: wrap;gap:.35rem 0; }
footer .fnb_wrap .fnb ul.col4 {width:100%; display:flex;flex-direction:row;flex-wrap: wrap;gap:.35rem 0; margin-top:1rem; }
footer .fnb_wrap .fnb ul.col6 li,
footer .fnb_wrap .fnb ul.col4 li {width:33.3%;}
footer .fnb_wrap .fnb ul li a {font-size:.8rem; }

.page_detail footer {display:none;}
}

@media screen and (max-width:670px){
footer .fnb_wrap .fnb ul.col6 li,
footer .fnb_wrap .fnb ul.col4 li {width:50%;}

footer .skip_top { right:.5rem !important; bottom:3rem !important; }
footer .skip_top .skip_top_btn {width:40px; height:40px;position:relative;border-radius:0; }
footer .skip_top .skip_top_btn:before{  font-size:1.2rem;}

}
@media screen and (max-width:360px){
    
}

/*========================================================= 
	공통 
=========================================================*/

#loading {	width: 100%;	height: 100%;	top: 0;	left: 0;	position: fixed;	display: flex; justify-content: center;	align-items: center;background-color:rgba(255,255,255,0.6); z-index: 333;	text-align: center;}
#loading> img {height:4rem; }

@media screen and ( max-width:900px ) {
	#loading> img {height:3rem; }
}


/* 라벨 */
.color-red {background-color:#ef4f48; color:#fff;}
.color-green {background-color:#31b176; color:#fff;}
.color-blue {background-color:#2a3446; color:#fff;}


.date_picker {display:inline-block;width:100px;/*text-align:center;*/font-size:17px;}
.data-empty {width:100% !important;min-height:240px;padding:1rem 0;border:1px solid #e5e5e5;background:#f4f4f4;word-break:break-all;font-size:1.25rem !important;color:#999;text-align:center;line-height:240px;letter-spacing:-1px;}
.data-empty:after {display:none !important;}


/* 데이터 없음 */
.data-empty {display:inline-grid !important;width:100% !important;min-height:12rem;padding:0;word-break: break-all;font-size:1.2rem !important;color:#888;letter-spacing:-1px;align-items:center;justify-items:center;align-content:center;text-align:center;box-shadow: none !important;}
.data-empty:before {content:'';position:relative;display:inline-block;width:3rem;height:4rem;background:url('/images/icon_nodata.png') no-repeat center;background-size:auto 2.5rem;}
.data-empty:after {display:none !important;}

@media screen and ( max-width:900px ) {
	.data-empty {font-size:1rem !important;}
}




/*/////////////////////////////////////////////////////////////////////////////////////////*/
/*                                        print
///////////////////////////////////////////////////////////////////////////////////////////*/
@media print {
	header, footer, .breadcrumbs,
	.carphoto_big .sns_wrap,
	.repaircheck_box .button_group,
	.carNameWrap .btn_inquiry,
	.swipe-detail-wrap .zoom-swiper-button-prev, .swipe-detail-wrap .zoom-swiper-button-next,
	.swipe-detail-wrap .btns,
	.swipe-detail-wrap .swiper-pagination-wrap,
	.recommend  {display:none !important;}
	.cont_detail {width:100% !important; max-width:900px; width:900px;  }
	.carNameWrap .btn_inquiry {padding:0 1.3rem !important; }
	.repaircheck_box {width:710px !important; max-width:710px !important;}
	.detail_feature .option_list li {width:50% !important;}
	.inspection .items { gap:.65rem !important; padding:1rem 0 !important;  }
	.inspection .items li {font-size:.75rem !important;}
	.carNameWrap .title {font-size:1rem !important; }
	.carNameWrap .price_wrap .price {font-size:1.1rem !important; }
	.swipe-detail-wrap .detail-slide-gallery-thumbs .swiper-wrapper .swiper-slide {height:35px !important; }
	.swipe-detail-wrap .detail-slide-gallery-top,
	.swipe-detail-wrap .detail-slide-gallery-top .swiper-slide{ width:460px !important;  height:320px !important;}
	.swipe-detail-wrap .detail-slide-gallery-top .swiper-slide .img img {float:left !important ;width:100% !important;}
    .detail_spec .items li {padding:.8rem 0 !important;}
    .detail_spec .items li h2 {font-size:1rem !important; font-weight:500 !important;}
}


/* =========================================================================================================
	animation
========================================================================================================= */
@keyframes slideUp {
  0% {margin-top:140px;opacity:0;}
  100% {margin-top:0px;opacity:1;}
}
@keyframes slideUp2 {
  0% {margin-top:160px;opacity:0;}
  100% {margin-top:0px;opacity:1;}
}

@keyframes navi_fade {
  0% {opacity:0;}
  100% {opacity:1; }
}
@keyframes scale_ani {
    0% {opacity:1;transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);}
	100% {opacity:0;transform:scale(3.5);-webkit-transform:scale(3.5);-ms-transform:scale(3.5);-moz-transform:scale(3.5);}
}
@keyframes text_ani {
    from {margin-left:0;opacity:1;}
	20% {margin-left:7px;opacity:0;}
	to {margin-left:0;opacity:1;}
}
@keyframes ani_left {
    0% {opacity:0;transform:translateX(-70px);-webkit-transform:translateX(-70px);-moz-transform:translateX(-70px);-ms-transform:translateX(-70px);}
	100% {transform:translateX(0);opacity:1;}
}
@keyframes ani_right {
	0% {opacity:0;transform:translateX(70px);-webkit-transform:translateX(70px);-moz-transform:translateX(70px);-ms-transform:translateX(70px);}
	100% {opacity:1;transform:translateX(0);-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);}
}
@keyframes ani_up {
    0% {opacity:0;transform:translateY(70px);-webkit-transform:translateY(70px);-moz-transform:translateY(70px);-ms-transform:translateY(70px);}
	100% {opacity:1;transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);}
}
@keyframes ani_down {
    0% {opacity:0;transform:translateY(-70px);-webkit-transform:translateY(-70px);-moz-transform:translateY(-70px);-ms-transform:translateY(-70px);}
	100% {opacity:1;transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);}
}
@keyframes ani_bgsize {
    0% {background-size:140% auto;}
	99% {background-size:100% auto;}
	100% {background-size:cover;}
}
@media screen and ( max-width:2000px ) {	
	@keyframes ani_bgsize {
		0% {background-size:auto 140%;}
		99% {background-size:auto 100%;}
		100% {background-size:cover;}
	}
}

.ani_left {animation-delay:.5s;animation-name:ani_left;animation-duration: .8s;animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);animation-fill-mode:backwards;}
.ani_right {animation-delay:.5s;animation-name:ani_right;animation-duration: .8s;animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);animation-fill-mode:backwards;}
.ani_up {animation-delay:.5s;animation-name:ani_up;animation-duration: .8s;animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);animation-fill-mode:backwards;}
.scale_ani {animation-delay:0;animation-name:scale_ani;animation-duration: .8s;animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);animation-fill-mode:backwards;}



/*/////////////////////////////////////////////////////////////////////////////////////////*/
/*                                        이용약관/개인정보처리방침
///////////////////////////////////////////////////////////////////////////////////////////*/
.agreement {margin-top:1rem}
.agreement h1 {font-size:1.1rem; line-height:1.5rem; color:var(--color-sub); font-weight:400; margin-top:2rem; }
.agreement h1:first-child {margin-top:0; }
.agreement h2 {font-size:1rem; font-weight:500; color:#333; margin:1rem 0 1rem; color:var(--color-sub) }
.agreement h2:first-child {margin-top:0}
.agreement p {font-size:0.9rem; line-height:1.5rem; color:#333; letter-spacing:-.04em; margin:0.5rem 0 0;font-weight:normal !important;}
.agreement ol {margin:.85rem 0;  }
.agreement ol li {position:relative; font-size:0.85rem; color:#666; line-height:1.5rem;font-weight:500;  margin-bottom:0.85rem; color:#333}
.agreement ol li ol {padding-top:0.35rem; padding-left:0.65rem;}
.agreement ol li ol li {padding-left:0.65rem; color:#666  !important;margin-bottom:0.45rem; font-weight:normal;}
.agreement ol li ol li:before {content:''; position:absolute; left:0; top:11px; width:5px; height:1px; background-color:#555;}


/*======================================================================================================================================================================================= 
	popup 
=======================================================================================================================================================================================*/

/* 레이어형 */
.block-ui, .pop_bg {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4); z-index:10000;}
.block-ui {display:none;}
.block-ui.white { display: none !important;}
.modal-popup {display:none; overflow: hidden;  border-radius: .5rem; background: #fff; width:auto;max-width:80%;max-height:100%; height:auto; padding:1.5rem 2rem;box-shadow: 0 0 20px rgba(0,0,0,0.1); position: fixed; z-index: 999999; transform: translate(-50%, -50%); left: 50%; top: 50%; -webkit-overflow-scrolling:touch; animation: popupFadeIn 0.2s ease-out forwards;}
.modal-popup .wrap {position:relative; width:100%; height:100%;}
.modal-popup .pop_header {position:relative;  width:100%;  display:flex;justify-content: space-between; align-items: center; }
.modal-popup .title { display:block; font-size:1.25rem; line-height:1.3em; font-weight:600; text-transform:uppercase ;  color:#222; }
.modal-popup .title p {display:block; font-size:.95rem; color:#666; margin-top:.5rem; font-weight:400;text-transform:lowercase ; }
.modal-popup .btn_close { width:30px;height:50px;background:#fff url('/images/inc/pop_close.png') center center no-repeat;background-size:auto 1.2rem;}
.modal-popup .pop_content { display:block;padding:1rem 0 0;background:#fff;height:calc(100% - 150px);overflow-y:auto;font-size:16px;  -webkit-overflow-scrolling:touch !important;}
.modal-popup .pop_content.ht_auto {height:auto; }
.modal-popup .pop_content.nobtn {height:calc(100% - 60px);}
.modal-popup .pop_content p {font-weight:300; color:var(--color-grey-blue)}
.modal-popup .button_group { flex-wrap: wrap;}
.modal-popup .button_group .button {width:auto; padding:0 2rem; border:1px solid var(--color-sub)} 
.modal-popup .button_group .button.cancel {background-color:#fff; color:var(--color-sub); }
.modal-popup.type02 {  border-radius:0; padding:0;}
.modal-popup.type02 .wrap {position:relative; width:100%; height:100%;}
.modal-popup.type02 .pop_header {background-color:#444; font-size:.95rem;padding:.65rem 1.5rem; line-height:1.3em; font-weight:600; color:#fff; display:flex; align-items: flex-end;  }
.modal-popup.type02 .title { text-transform:capitalize ;  color:#fff; font-size:1.1rem; }
.modal-popup.type02 .pop_header a {font-size:.9rem; color:#fff;}
.modal-popup.type02 .pop_content { padding:1rem 2rem; text-align:center; background:#fff; height:calc(100% - 60px); display:flex; justify-content: center; align-items: center; flex-direction: column; }
.modal-popup.type02 .pop_content dl {text-align:center; }
.modal-popup.type02 .pop_content dl dt {font-size:1.5rem; line-height:1.3em;  font-weight:600; color:var(--color-sub);}
.modal-popup.type02 .pop_content dl dd {margin-top:1rem; font-size:.95rem; color:#777; line-height:1.5em; }


@keyframes popupFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 20px));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}


.modal-popup ::-webkit-scrollbar { background:#fff; width:4px; }
.modal-popup ::-webkit-scrollbar-track { background: #FFF; }
.modal-popup ::-webkit-scrollbar-thumb { background:#bee0f3; opacity:1 !important;   }

@media screen and (max-width:667px){
	.modal-popup { left:0 !important;top:0;width:100% !important;max-width:100%;max-height:100%; height:100% !important;transform:translate(0,0); border-radius:0; animation:none !important; overflow:hidden !important;}

	.modal-popup.type02 { left: 50% !important; top: 50% !important; width:90% !important; max-height:auto !important; height:auto !important; transform: translate(-50%, -50%); box-shadow:none;}
	.modal-popup.type02 .wrap {position:relative; width:100%; height:100%;}
	.modal-popup.type02 .pop_header {background-color:#444; font-size:.95rem;padding:.65rem .65rem; line-height:1.3em; font-weight:600; color:#fff; }
	.modal-popup.type02 .title { font-size:.9rem; }
    .modal-popup.type02 .pop_header a {font-size:.75rem;line-height:.9rem;  font-weight:400;}
	.modal-popup.type02 .pop_content { padding:1.5rem 1.2rem 2rem;}
	.modal-popup.type02 .pop_content dl dt {font-size:1.2rem;}
    .modal-popup.type02 .pop_content dl dd {margin-top:.85rem; font-size:.85rem; line-height:1.3em; }



}