@import url("common.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..500,0..1,-50..200");



/* 서브탑 */
#visual{position:relative; width:100%; height:580px; background:#1a1b24;}
#visual .visual_in{position:absolute; left:50%; bottom:30px; top:0; transform:translateX(-50%); z-index:2; width:90%; max-width:1650px; display:flex; flex-direction:column; justify-content:flex-end; box-sizing:border-box;}
#visual .v_txt{position:absolute; left:50%; top:calc(50% + 40px); transform:translate(-50%,-50%); width:100%; text-align:center;}
#visual .v_txt .fs15{color:var(--white); font-weight:600; text-transform:uppercase; letter-spacing:0; line-height:1.733; padding:0 0 12px;}
#visual .v_txt .fs60{color:var(--white); font-weight:700;}
#visual .v_txt .fs15{opacity:0; animation:v_txt 1.5s cubic-bezier(0.21, 0.83, 0.26, 1) 0.3s both;}
#visual .v_txt .fs60{opacity:0; animation:v_txt 1.5s cubic-bezier(0.21, 0.83, 0.26, 1) 0.5s both;}
#visual .v_bg{position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;}
#visual .v_bg .bg{position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1); animation:m_vsImg 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;}

@keyframes m_vsImg {
    0% { -webkit-transform:scale(1.3); -ms-transform:scale(1.3); transform:scale(1.3); opacity:0; filter:blur(10px); }
    100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); opacity:1; filter:blur(0); }
}
@keyframes v_txt {
    0% { transform:translateY(40px); opacity:0; filter:blur(5px); }
    100% { transform:translateY(0); opacity:1; filter:blur(0); }
}

#visual .location{display:flex; align-items:center; justify-content:space-between; width:100%; gap:20px;}
#visual .bread{display:flex; align-items:center; gap:8px; min-width:0;}
#visual .bread .home{display:block; width:18px; height:18px; flex-shrink:0; line-height:1;}
#visual .bread .home svg{display:block; width:100%; height:100%;}
#visual .bread .arrow{display:block; width:20px; height:20px; flex-shrink:0; font-size:0; line-height:1;}
#visual .bread .arrow::before{content:'\e5cc'; font-family:var(--icon); font-size:20px; color:rgba(255,255,255,0.5); line-height:1;}
#visual .bread .depth1,
#visual .bread .depth2{display:block; color:var(--basicW); letter-spacing:var(--letter-spacing-body); line-height:1.733; white-space:nowrap;}

/* 비주얼 lnb */
.visual_lnb{position:relative; flex-shrink:0;}
.visual_lnb dl{display:flex; align-items:center; gap:3px;}
.visual_lnb dl dd{position:relative;}
.visual_lnb dl dd .title{display:block; width:250px; padding:0 45px 0 20px; box-sizing:border-box; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background 0.3s ease, color 0.3s ease; font-weight: 600; height:56px; line-height:56px;}
.visual_lnb dl dd .title::after{content:'\e5cf'; font-family:var(--icon); font-size:20px; line-height:1; position:absolute; right:19px; top:50%; margin-top:-10px; transition:transform 0.3s ease; font-weight: 400;}
.visual_lnb dl dd.depth1 .title{background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); border-radius:5px; backdrop-filter:blur(15px); color:var(--white);}
.visual_lnb dl dd.depth1 .title::after{color:var(--white); opacity:0.6;}
.visual_lnb dl dd.depth2 .title{background:var(--white); border-radius:5px; color:var(--main);}
.visual_lnb dl dd.depth2 .title::after{color:var(--main);}
.visual_lnb dl dd .title.on::after{transform:rotate(180deg);}
.visual_lnb dl dd .dlst{display:none; position:absolute; right:0; bottom:calc(100% + 8px); z-index:999; width:100%; background:var(--white); padding:20px; box-sizing:border-box; border-radius:5px; box-shadow:0 8px 24px rgba(0,0,0,0.12); overflow:hidden;}
.visual_lnb dl dd .dlst ul li{padding:0 0 8px;}
.visual_lnb dl dd .dlst ul li:last-child{padding:0;}
.visual_lnb dl dd .dlst ul li a{display:block; font-size:0.889rem; font-weight:400; letter-spacing:-5%; line-height:1.733; color:var(--basic); line-height:1.4; transition:color 0.2s ease;}
.visual_lnb dl dd .dlst ul li a.on{color:var(--main); font-weight:600;}
.search_none .visual_lnb dl dd.depth2{display:none;}




/* 모바일 lnb */
.mobile_snb {display:none;}


/* 타이틀 */
.container.view {padding-top: 232px;}
#subtitle{padding: 100px 0 60px; text-align:center;}
#subtitle .fs50 b{font-weight:700; letter-spacing: inherit; line-height: inherit;}
#subtitle .fs50 .light{font-weight:300;}
.container.view #subtitle {padding-top: 0 !important;}





/*** 공통 css ***/
.basic_cont{max-width:1650px; width: 90%; margin:0 auto 200px;}
.basic_cont.no_sub{width:100%; max-width:100%; margin:0 auto;}

input[type="radio"] {position:relative; display:inline-block; vertical-align:middle; appearance:none; -webkit-appearance:none; -moz-appearance:none; width:20px; height:20px; border:1px solid var(--main); border-radius:50%; box-sizing:border-box; background:var(--white); margin:0; cursor:pointer; flex-shrink:0;}
input[type="radio"]:checked::before {content:''; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%; background:var(--main); transform:translate(-50%, -50%);}















/* 예약내역 조회 */
.inquiry_check {text-align:center;}
.inquiry_check h4{font-size:1.5rem; letter-spacing:var(--letter-spacing-default); line-height: 130%; font-weight:700; color:var(--black);}
.inquiry_check p{font-size:1rem; letter-spacing:var(--letter-spacing-default); line-height:150%; padding:10px 0 30px;}
.inquiry_check .btn_inquirySearch{display:inline-block; width:250px; height:60px; box-sizing:border-box; text-align:center; transition:all .3s linear; border:1px solid var(--main); background:var(--main); position:relative; padding: 0; font-size:1rem; line-height: 58px; letter-spacing:var(--letter-spacing-default); font-weight:500; color:var(--white); cursor:pointer; -webkit-appearance: none; -webkit-border-radius: 0;}
.inquiry_check .btn_inquirySearch:hover{background:var(--sub); border-color:var(--sub);}

	.inquiryCheck_in{position:relative; max-width:630px; width: 100%; margin:0 auto 30px; padding:40px 30px; box-sizing:border-box; border:1px solid var(--border); box-shadow:0px 5px 0px #f6f6f6;}
	.inquiryCheck_in dl{display: flex; align-items:center; padding:0 0 10px;}
	.inquiryCheck_in dl:last-child{padding:0;}
	.inquiryCheck_in dl dt{width:100px; font-size:1rem; color:var(--black); line-height:120%; font-weight:500; text-align:left;}
	.inquiryCheck_in dl dd{width:calc(100% - 100px); display: flex;}
	.inquiryCheck_in dl dd .input{width: 100%; height: 50px; line-height:48px; border:1px solid var(--border); padding:0 15px; box-sizing:border-box; font-size:1rem; color:var(--basic); -webkit-appearance: none; -webkit-border-radius: 0;}
	.inquiryCheck_in dl dd .input.input_email{width: calc((100% - 25px)/3);}
	.inquiryCheck_in dl dd .select{width: calc((100% - 25px)/3); height: 50px; line-height:48px; border:1px solid var(--border); padding:0 15px; box-sizing:border-box; font-size:1rem; color:var(--basic); margin-left: 5px; cursor:pointer; outline:none;}
	.inquiryCheck_in dl dd .alpha{display: inline-block; width: 20px; line-height: 48px; font-size:1rem; vertical-align:middle;}


/* 배송지 관리 */
#myDelivery .input{width: 100%; height: 50px; line-height: 48px; font-size:1rem; color:var(--basic); letter-spacing:var(--letter-spacing-input); border:1px solid var(--border); background:var(--white); padding:0 15px; box-sizing:border-box;}
#myDelivery .postSearch_btn{padding: 0; width:120px; height:50px; line-height:48px; border:1px solid var(--black); text-align:center; font-size:14px; font-weight: 600; letter-spacing:var(--letter-spacing-button); box-sizing:border-box; color:var(--white); background:var(--black); cursor:pointer; transition:all .3s ease;}
#myDelivery .postSearch_btn:hover{background:var(--white); color:var(--black);}

#myDelivery .add_table {border-collapse:collapse; width:100%; border-spacing:0px; border-top:1px solid var(--black); text-align:left;}
#myDelivery .add_table th {width: 190px; font-size:1rem; letter-spacing:var(--letter-spacing-default); color:var(--black); font-weight: 600; line-height: 150%; padding: 20px 15px; box-sizing:border-box; border-bottom: 1px solid var(--border); background:var(--grayBg);}
#myDelivery .add_table th b{color:var(--main); font-weight: 700;}
#myDelivery .add_table td{font-size:1rem; letter-spacing:var(--letter-spacing-default); color:var(--basic); font-weight: 400; line-height: 150%; padding: 20px 15px; box-sizing:border-box; border-bottom: 1px solid var(--border);} 
#myDelivery .add_table td label{cursor:pointer; font-size:1rem; letter-spacing:var(--letter-spacing-default); color:var(--basic); font-weight: 400;}
#myDelivery .add_table td input[type="checkbox"]{display: inline-block; vertical-align: middle; margin: -2px 5px 0 0; width: 20px; height: 20px;}
#myDelivery .add_table .address_wrap{}
#myDelivery .add_table .address_wrap dt{display: flex; gap:5px; max-width:300px; width: 100%;}
#myDelivery .add_table .address_wrap dt .input{width: calc(100% - 125px);}
#myDelivery .add_table .address_wrap dt .postSearch_btn{width: 120px;}
#myDelivery .add_table .address_wrap dd{}
#myDelivery .add_table .address_wrap dd input{margin-top: 5px;}
#myDelivery .add_table .hipen{display: inline-block; max-width: 20px; width: 100%; text-align:center;}
#myDelivery .add_table .phone_wrap{display: flex; align-items:center;}
#myDelivery .add_table .phone_wrap * {flex:1;}
#myDelivery .btn_area{display: flex; gap:5px; margin: 40px 0 0; justify-content: center;}
#myDelivery .btn_area input{padding: 0; width:200px; height:60px; line-height:58px; border:1px solid var(--black); text-align:center; font-size:1rem; font-weight: 600; letter-spacing:var(--letter-spacing-button); box-sizing:border-box; color:var(--white); background:var(--black); cursor:pointer; transition:all .3s ease;}
#myDelivery .btn_area input:hover{background:var(--white); color:var(--black);}
#myDelivery .btn_area input.btn_wb{background:var(--white); color:var(--black);}
#myDelivery .btn_area input.btn_wb:hover{background:var(--black); color:var(--white);}


#myDelivery .no_data{text-align:center; padding: 100px 0; background:var(--white);}
#myDelivery .myDelivery_list{box-sizing:border-box; border:1px solid var(--border); background:var(--grayBg);}
#myDelivery .myDelivery_list dl{box-sizing:border-box; padding: 30px; display: flex; align-items:center;}
#myDelivery .myDelivery_list dl.basic{background:var(--white);}
#myDelivery .myDelivery_list dl + dl{border-top: 1px solid var(--border);}
#myDelivery .myDelivery_list dl dt{width: calc(100% - 300px);}
#myDelivery .myDelivery_list dl dt h4{font-size:1.25rem; font-weight: 600; color:var(--black); letter-spacing:var(--letter-spacing-default); line-height: 150%; padding-bottom: 5px;}
#myDelivery .myDelivery_list dl dt .address_txt{font-size:1rem; font-weight: 400; color:var(--black); letter-spacing:var(--letter-spacing-default); line-height: 160%;}
#myDelivery .myDelivery_list dl dt ul{padding-top: 8px; display: flex; flex-wrap:wrap; gap:8px 20px;}
#myDelivery .myDelivery_list dl dt ul li{font-size:1rem; font-weight: 400; color:var(--basic); letter-spacing:var(--letter-spacing-none); line-height: 150%;}
#myDelivery .myDelivery_list dl dt ul li::before{display: inline-block; vertical-align: middle; margin: -2px 5px 0 0; font-family:var(--icon); font-weight: 400; font-size:18px;}
#myDelivery .myDelivery_list dl dt ul li.phone::before{content:'\e7ba';}
#myDelivery .myDelivery_list dl dt ul li.tel::before{content:'\e0b0';}
#myDelivery .myDelivery_list dl dd{width: 300px; display: flex; justify-content: flex-end; gap:5px;}
#myDelivery .myDelivery_list dl dd .btn{width: auto; cursor:pointer; padding:0 20px; height:40px; line-height:38px; border:1px solid var(--basic); color:var(--basic); box-sizing:border-box; font-size:14px; font-weight:600; letter-spacing:var(--letter-spacing-button); text-align:center; background:var(--white); transition:all .3s;}
#myDelivery .myDelivery_list dl dd .btn.basic{border-color:var(--main) !important; color:var(--main) !important;}
#myDelivery .myDelivery_list dl dd .btn.modi:hover{border-color:var(--black); color:var(--black);}
#myDelivery .myDelivery_list dl dd .btn.delete{background:var(--basic); color:var(--white);}
#myDelivery .myDelivery_list dl dd .btn.delete:hover{background:var(--black); color:var(--white);}


#myDelivery_pop h1 {background:#444; padding:15px 10px; box-sizing:border-box; color:#fff; font-size:22px; letter-spacing:var(--letter-spacing-default); font-weight:700;}
#myDelivery_pop h1 a.close {position:absolute; right:10px; top:18px; background:#fff; padding:5px; line-height:0;}
#myDelivery_pop .cont {padding:15px}
#myDelivery_pop dl{position:relative; border:1px solid #ddd; border-top:0; padding:25px 20px;}
#myDelivery_pop dl:first-child{border-top:1px solid #ddd;}
#myDelivery_pop dl.over{border:3px solid #356340;}
#myDelivery_pop dt{font-size:15px; letter-spacing:var(--letter-spacing-default); color:#444; padding-bottom:3px}
#myDelivery_pop dd.txt{font-size:13px; line-height:24px}
#myDelivery_pop dd.btn{position:absolute; right:8px; top:8px}

#myDelivery_pop p.basic{display:inline-block; width:90px; height:29px; line-height:29px; border:2px solid #356340; text-align:center; color:#356340; letter-spacing:var(--letter-spacing-default);}
#myDelivery_pop input[type=button].modi{ padding:6px 15px; border:1px solid #a3a3a3; color:#666; background:#fff; margin:0 0 3px 2px; cursor:pointer;}
#myDelivery_pop input[type=button]:hover.modi{background-color:#f9f9f9}
#myDelivery_pop input[type=button].delete{ padding:6px 15px; border:1px solid #a3a3a3; color:#fff; background:#a3a3a3; margin:0 0 3px 2px; cursor:pointer;}
#myDelivery_pop input[type=button]:hover.delete{background-color:#868686; border:1px solid #868686;}


#myDelivery_pop .btn_area{text-align:center; margin-top:30px;}
#myDelivery_pop .btn_area .btn_wb {width:201px; height:55px; line-height:52px; cursor:pointer; display:inline-block; background:#fff; text-align:center; color:#444; font-weight:500; border:1px solid #918f8f;}
#myDelivery_pop .btn_area .btn_b {width:201px; height:55px; line-height:52px; cursor:pointer; display:inline-block; background:#356340; text-align:center; color:#fff; font-weight:500; border:none; cursor:pointer}
#myDelivery_pop .btn_area .btn_b:hover{background-color:#4a8959}



/* 이용약관, 개인정보취급방침 */
.policy_cont{position:relative; overflow:hidden; font-size:1rem;}
.policy_cont br{display:block;}
.policy_cont strong{font-weight:500; color:var(--black);}
.policy_cont .cont_title{font-size:1.412rem; color:var(--black); padding-bottom:18px; letter-spacing:var(--letter-spacing-default); font-weight:500;}
.policy_cont p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:500; color:var(--black) !important; letter-spacing:var(--letter-spacing-default);}
.policy_cont .cont_txt {padding:0px 0px 35px 0;}
.policy_cont .cont_txt2 {padding-bottom:35px;}
.policy_cont .cont_box {padding:25px; background:var(--grayBg); margin:7px 0px 10px 0px; display:block;  letter-spacing:var(--letter-spacing-default); line-height:1.7;}

.privacy_list {width:91%; overflow:hidden; clear:both; *zoom:1; padding:4% 4% 3% 4%; border:1px solid var(--border); box-sizing:border-box; margin-bottom:30px;}
.privacy_list li {width:50%; float:left; padding-bottom:1%;}
.privacy_list li a {font-weight:500; color:var(--black);} 






/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1500px){











}
/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){







}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* 서브탑 */


/* 비주얼 lnb */
.visual_lnb{display:none;}




/* 타이틀 */


/*** 공통 css ***/
.container.view {padding-top: 150px;}
.basic_cont{margin:0 auto 120px;}






/* 이용약관, 개인정보취급방침 */
.policy_cont{}
.policy_cont p.cont_tit {font-size:1.2em !important; padding-bottom:5px;}
.policy_cont .cont_txt {padding:0px 0px 25px 0; }
.policy_cont .cont_txt2 {padding-bottom:25px;}
.policy_cont .cont_box {padding:18px 18px; }

.privacy_list {margin-bottom:30px;}
.privacy_list li {width:100%;  }



/* 배송지 관리 */
#myDelivery .input{height: 40px; line-height: 38px; padding:0 10px;}
#myDelivery .postSearch_btn{height:40px; line-height:38px;}

#myDelivery .add_table {}
#myDelivery .add_table th {width: 150px; padding: 15px 10px;}
#myDelivery .add_table td{padding:15px 10px;} 

#myDelivery .no_data{padding: 60px 0;}
#myDelivery .myDelivery_list{}
#myDelivery .myDelivery_list dl{padding: 20px;}
#myDelivery .myDelivery_list dl dt{width: calc(100% - 250px);}
#myDelivery .myDelivery_list dl dd{width: 250px;}
#myDelivery .myDelivery_list dl dd .btn{padding:0 15px;}





}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* 서브탑 */
#visual {height:320px;}
#visual .visual_in {bottom:0;}
#visual .v_txt {top: calc(50% + 30px);}
#visual .location {display:none;}


/* PC lnb */
.lnb{display: none;}


/* 모바일 lnb */
.mobile_snb {display:block; position:relative; z-index:50; border-bottom:1px solid var(--border);}
.mobile_snb .tbox {display:flex;}
.mobile_snb .tbox .box {width:50%; box-sizing:border-box;}
.mobile_snb .tbox .box.dep1 {border-right:1px solid rgba(0,0,0,0.05);} /* 양쪽 박스 사이 은은한 구분선 */

.mobile_snb .tbox .box .dropLst {position: relative;}
.mobile_snb .tbox .box .dropLst .title {display:block; font-size:0.95rem; font-weight:600; line-height:50px; letter-spacing:var(--letter-spacing-default); box-sizing:border-box; padding:0 40px 0 20px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; position:relative; transition:background-color 0.3s ease, color 0.3s ease;}
.mobile_snb .tbox .box .dropLst .title:after {content:'\e5cf'; font-family:var(--icon); font-size:20px; font-weight:400; position:absolute; right:15px; top:50%; transform:translateY(-50%); transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); line-height:1;}

.mobile_snb .tbox .box.dep1 .dropLst .title {background:var(--white); color:var(--main);}
.mobile_snb .tbox .box.dep1 .dropLst .title:after {color:var(--main);}

.mobile_snb .tbox .box.dep2 .dropLst .title {background:var(--main); color:var(--white);}
.mobile_snb .tbox .box.dep2 .dropLst .title:after {color:var(--white);}

.mobile_snb .tbox .box .dropLst .title.on:after {transform:translateY(-50%) rotate(180deg);}
.mobile_snb .tbox .box .dropLst .dlst {display:none; position:absolute; left:0; top:100%; width:200%; background:var(--white); z-index:99999; box-shadow:0 12px 24px rgba(0,0,0,0.1);}
.mobile_snb .tbox .box.dep2 .dropLst .dlst {left:-100%;}
.mobile_snb .tbox .box .dropLst .dlst ul {display:flex; flex-direction:column;}
.mobile_snb .tbox .box .dropLst .dlst ul li {border-bottom:1px solid rgba(0,0,0,0.03);} /* 리스트 사이 얇은 선으로 정돈된 느낌 부여 */
.mobile_snb .tbox .box .dropLst .dlst ul li:last-child {border-bottom:none;}

.mobile_snb .tbox .box .dropLst .dlst ul li a {display:block; padding:0 20px; font-size:0.95rem; font-weight:400; line-height:50px; letter-spacing:var(--letter-spacing-default); box-sizing:border-box; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; color:var(--basic); transition:background-color 0.2s ease, color 0.2s ease;}
.mobile_snb .tbox .box .dropLst .dlst ul li a:hover,
.mobile_snb .tbox .box .dropLst .dlst ul li a:active {background:rgba(0,0,0,0.02); color:var(--main);}
.mobile_snb .tbox .box .dropLst .dlst ul li a.on {background:var(--main); color:var(--white); font-weight:600;}

.search_none .mobile_snb{display: none;}

#contents{margin:0 auto;}

/* 타이틀 */
#subtitle {padding: 50px 0 30px;}


/*** 공통 css ***/
.basic_cont{margin:0 auto 80px;}

input[type="radio"] {width:18px; height:18px;}
input[type="radio"]:checked::before {width:10px; height:10px;}



.container.view {padding-top: 120px;}





/* 배송지 관리 */
#myDelivery .postSearch_btn{width:100px; font-size:13px;}

#myDelivery .add_table {}
#myDelivery .add_table ,
#myDelivery .add_table th,
#myDelivery .add_table td{display: block;}
#myDelivery .add_table th {width: 100%; padding: 10px}
#myDelivery .add_table td{padding: 10px;} 
#myDelivery .add_table td input[type="checkbox"]{width: 16px; height: 16px;}
#myDelivery .add_table .address_wrap{}
#myDelivery .add_table .address_wrap dt{max-width:220px;}
#myDelivery .add_table .address_wrap dt .input{width: calc(100% - 105px);}
#myDelivery .add_table .address_wrap dt .postSearch_btn{width: 100px;}
#myDelivery .btn_area{margin: 30px 0 0;}
#myDelivery .btn_area input{width:100%; flex:1; height:50px; line-height:48px;}

#myDelivery .no_data{padding: 40px 0;}
#myDelivery .myDelivery_list{}
#myDelivery .myDelivery_list dl{padding: 15px; gap:10px; flex-wrap:wrap;}
#myDelivery .myDelivery_list dl dt{width: 100%;}
#myDelivery .myDelivery_list dl dt ul{padding-top: 8px; gap:8px 20px;}
#myDelivery .myDelivery_list dl dt ul li::before{font-size:16px;}
#myDelivery .myDelivery_list dl dd{width: 100%; justify-content: flex-start;}
#myDelivery .myDelivery_list dl dd .btn{padding:0 15px; height:32px; line-height:30px; font-size:12px;}



}