@charset "UTF-8";

/*?로그인*/
#login{display:flex; flex-direction:column; gap:40px;}
#login .topTit{position:relative; padding-right:180px;}
#login .topTit .txt{padding-left:32px;margin-top:16px; color:#676767;}
#login .topTit .logImg{position:absolute; right:0; top:50%; transform:translateY(-50%); width:180px;}
#login .loginBox{display:flex; flex-direction:column; border:1px solid #ccc; border-radius:24px; overflow:hidden;}
#login .loginBox .top{display:flex; align-items:center; padding:40px; }
#login .loginBox .top .left,
#login .loginBox .top .right{flex:1; }
#login .loginBox .top .left{display:flex; flex-direction:column; gap:16px;padding-right:40px; border-right:1px dashed #ccc;}
#login .loginBox .top .left .log{display:flex; flex-direction:column; gap:8px;}
#login .loginBox .top .left .log label{display:flex; gap:4px; align-items:center;}
#login .loginBox .top .left .log label span{width:70px; font-weight: 600;}
#login .loginBox .top .left .log label input{flex:1;}
#login .loginBox .top .left .snsLog{display:flex; align-items:center; gap:16px; margin-top: 16px;}
#login .loginBox .top .left .snsLog > a{flex:1; width:100%;}
#login .loginBox .top .left .snsLog > a.kakao{color:#000; background:#FEDC00; border:0;}
#login .loginBox .top .left .snsLog > a.naver{background:#00af4e; border:0;}
#login .loginBox .top .right{padding-left:40px;}
#login .loginBox .top .right .goPage{display:inline-flex; flex-direction:column; gap:8px; padding:24px; border-radius:16px; width:100%; transition:.3s; text-decoration: none;}
#login .loginBox .top .right .goPage:hover{background-color:#f5f5f5;}
#login .loginBox .top .right .tit{display:inline-flex; align-items:center; gap:8px;font-weight: 600; }
#login .loginBox .top .right .txt{color:#676767;}
#login .loginBox .bottom{padding:24px 40px; border-top:1px solid #ccc; background:#f9f9f9;}
#login .loginBox .bottom .tit{font-weight:600; }
#login .loginBox .bottom .list{margin-top:16px; }
#login .loginBox .bottom .list > li{position:relative; padding-left:16px;}
#login .loginBox .bottom .list > li::before{position:absolute; content:''; left:0; top:11px; width:5px; height:2px; background:var(--color-main); border-radius:100px; }
.nonmem{display:flex; gap:40px;}
.nonmem > div{display:inline-flex; flex:1; flex-direction:column; gap:8px; padding:40px; border-radius:24px; border:1px solid #ccc; }
.nonmem .tit{font-weight: 600;}
.nonmem .txt{font-size: 1.5rem; color:#676767; }
.nonmem .btn{margin-top:auto; width:100%;}
@media all and (max-width:768px){
 #login{gap:16px;}
 #login .loginBox{border-radius:16px;}
 #login .topTit{padding-right:0;}
 #login .topTit .logImg{width:130px; opacity:.1;}
 #login .topTit .txt{padding-left:26px; margin-top:8px; font-size: 1.5rem;}
 #login .loginBox .top{flex-direction:column; padding:24px;}
 #login .loginBox .top .left{padding-right:0; border-right:0; width:100%;}
 #login .loginBox .top .right{display:flex; flex-direction:column; gap:16px; margin-top:16px; padding-left:0; width:100%;}
 #login .loginBox .top .right .tit{font-size: 1.5rem;}
 #login .loginBox .top .right .txt{font-size: 1.5rem;}
 #login .loginBox .top .right .goPage{padding:0; gap:4px;}
 #login .loginBox .top .right .goPage:hover{background-color:transparent;}
 #login .loginBox .bottom{padding:24px;}
 #login .loginBox .bottom .list{margin-top:8px; font-size: 1.5rem;}
 .nonmem{flex-direction:column; gap:16px;}
 .nonmem > div{padding:24px; border-radius:16px;}
}
@media all and (max-width:425px){
 #login .loginBox .top .left .log label span{font-size: 1.3rem;}
 #login .loginBox .top .left .snsLog{margin-top: 0; gap:8px; flex-direction:column; }
 #login .loginBox .top .left .snsLog a{flex:none;}
}


/*? 회원가입 */
#join{ margin:0 auto; width: 650px; }
.joinPro { display:flex; justify-content: space-between; align-items: center; margin:0 auto; margin-bottom:40px; font-weight: 500; width: 100%; }
.joinPro > li { position:relative; }
.joinPro > li::before { content:""; position:absolute; left:-90%; top:24%; width: 4px; height: 4px; background: #111; border-radius: 100%; background-color:#ccc; }
.joinPro > li::after { content:""; position:absolute; left:-76%; top:24%; width: 4px; height: 4px; background: #111; border-radius: 100%; background-color:#ccc; }
.joinPro > li:first-child::before,
.joinPro > li:first-child::after { content:none; }
.joinPro > li > ol { display:flex; flex-direction: column; align-items: center; gap: 16px; }
.joinPro .joinNum { background-color:#f5f5f5; width: 40px; height: 40px; line-height: 40px; color:var(--color-main); text-align: center; border-radius:10rem; }
.joinPro .joinNum.on { position:relative; background-color:var(--color-main); color:#fff; }
.joinPro .joinNum.on::before { content: ""; position: absolute; top: 18px; left: -8px; width: 56px; height: 5px; border-radius:10rem; background-color: var(--color-main); transform: rotate(-35deg); z-index: -1; }

#join .regi { display:flex; justify-content: space-between; margin: 40px 0 16px 0; width: 100%; }
#join .regi .radioBtn { width: calc(50% - 16px); text-align: center; }
#join .regi .radioBtn input[type=radio] { display: none; }
#join .regi .radioBtn label { position:relative; display:flex; align-items: center; justify-content: space-between; flex-direction:column; width: 100%; height: 100%;  padding: 148px 0 34px 0; font-weight: 500; background-color:#f5f5f5; background-size: auto 100px; background-position: left 50% top 32px; background-repeat: no-repeat;  border-radius: 16px; transition: 0.15s ease; }
#join .regi .radioBtn label span { font-size: 1.5rem; font-weight: normal; }
#join .regi .radioBtn .radio01{ background-image: url(../img/sub/join-14up.png); }
#join .regi .radioBtn .radio02{ background-image: url(../img/sub/join-14down.png); }
#join .regi .radioBtn input[type=radio]:checked + label { background-color:#fff; box-shadow:0 0 15px rgba(255, 201, 209, 1); }
#join .regi .radioBtn input[type=radio]:checked + label:before { position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border: 2px solid var(--color-point); border-radius: 16px; }

#join > div.joinTxtW .tit {font-size: 1.9rem; font-weight: 600; }
#join > div.joinTxtW > ul.list > li { position:relative; padding-left:12px;}
#join > div.joinTxtW > ul.list > li::before { position: absolute; content: ''; left: 0; top: 10px; width: 4px; height: 4px; background: #111; border-radius: 100%; }

#join .certi {display:flex; flex-wrap:wrap; gap:16px; margin-top:24px;}
#join .certi > li{width:calc(50% - 8px);}
#join .certi > li a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:120px 40px 40px 40px; width:100%; border-radius:16px; border:1px solid #dbdbdb; text-decoration:none; font-family: var(--style-font); font-weight: 600; transition: 0.2s; background-image:url(../img/sub/find-phone.png); background-repeat:no-repeat; background-position: top 40px center; background-size:60px;}
#join .certi > li:last-of-type a {background-image:url(../img/sub/find-ipin.png);}
#join .certi > li a:hover,
#join .certi > li a:focus{border:1px solid var(--color-main); box-shadow:0 0 10px rgba(201, 214, 255, 0.6);}
#join .joinTxtW{margin-top:40px; width:100%;}

#join .sList{color:#444;  }
#join .sList > li{position:relative; padding-left:12px;}
#join .sList > li::before{position:absolute; content:''; left:0; top:10px; width:5px; height:2px; background:#676767; }

#join .btnW{display:flex; flex-wrap:nowrap; gap:8px; align-items:center; }
#join .joinBtnW .block{flex:1;}

#join .tbl{margin-top: 16px;}
#join .tbl th, 
#join .tbl td{padding:12px;}
#join .tbl td{text-align: left;}

@media all and (max-width:768px){
    #join { width: 100%; }	
    .joinPro{margin:0 auto 40px auto; width:320px;}
	.joinPro > li::before { left:-24%; }
	.joinPro > li::after { left:-10%; }
    #join .regi{width:100%;}
	#join .regi .radioBtn { width: calc(50% - 8px); }
    #join .regi .radioBtn a{padding:120px 24px 24px 24px;}
    #join .regi .radioBtn .radio01{ background-position: left 50% top 24px; background-size:70px;}
    #join .regi .radioBtn .radio02{ background-position: left 50% top 56px; background-size:60px;}
    #join > div.joinTxtW .tit{font-size: inherit;}
}

@media (max-width: 425px){
    #join .regi{flex-direction:column; gap:16px;}
    .joinPro{width:100%;}
	.joinPro > li { width: 100%; }
	.joinPro > li::before { left:-4%;  transform: translateX(-4%); }
	.joinPro > li::after { left:4%;  transform: translateX(4%); }
 	#join .regi { margin: 24px 0 16px 0; } 
	#join .regi .radioBtn { width: 100%; }
    #join .regi .radioBtn a{font-size: 1.9rem;}
    #join .regi .radioBtn a span{font-size: 1.5rem;}
    
    #join .joinTxtW{margin-top:24px;}
}

/* ?회원가입 - 약관동의 */
.agreeBox{display:flex; flex-direction:column; padding:24px; width:100%; height:300px; overflow-y:auto; border:1px solid #ccc; border-radius:16px;}
.agreeBox.textBox{height:auto;}
.agreeBox h4, 
.agreeBox .h4{font-size: 2.1rem; color:#111;}
.agreeBox h5, 
.agreeBox .h5{font-size: 1.9rem;}
.agreeBox .paraList{font-size: 1.7rem;}
.agreeBox .paraList > li > ul > li{font-size: 1.5rem;}
.agreeBox h4::before, 
.agreeBox .h4::before{width:20px; height:20px; top:5px;}
.agreeBox .paraList{gap:8px;}

#join .agreeChk{display:flex; align-items:center; justify-content:flex-end; margin-top:24px; text-align:right;}
#join .agrBox{margin-bottom:40px;}
#join .agrBox .h4{margin-bottom:8px;}
.agrOk{display:inline-flex; align-items:center; justify-content:center; width:100%; margin-top:8px; padding:12px; border-radius:8px; background:#f5f5f5; }

@media all and (max-width:768px){
 .agreeBox h4, .agreeBox .h4{padding-left:26px; font-size: 1.9rem;}
 .agreeBox h4::before, .agreeBox .h4::before{width:18px; height:18px; top:4px;}
 .agreeBox h5, .agreeBox .h5{margin-top:8px; font-size: 1.7rem;}
 .agreeBox .paraList{font-size: 1.5rem;}
 .agreeBox .paraList > li{padding-left:14px; font-weight: 500;}
 .agreeBox .paraList > li::before{width:10px; height:8px; top:6px;}
 .agreeBox .paraList > li > ul{margin-top:0;}
 .agreeBox .paraList > li > ul > li{padding-left:10px; font-size: 1.5rem;}
 .agreeBox .paraList > li > ul > li::before{top:9px; width:3px; height:3px;}
}

/** 회원가입 - 정보입력 + */
.userF .list { display:flex; flex-direction: column; gap:32px; }
.userF .list .tit { font-weight: 600; }
.userF .form.disabled { background:var(--color-gray-10); cursor:no-drop;}
.userF input[type=text], 
.userF input[type=password],
.userF select { width: 100%; height:48px;}
.userF input[type=text], 
.userF input[type=password]{padding-left:16px;}
.userF input.form.userN { flex:1; min-width: auto; }
.userF div.dpf { display:flex; justify-content: space-between; gap:4px; }
.userF input.form.userI, 
.userF input.form.addr,
.userF input.form.userPhchk {flex:1; min-width: auto;}
.userF .radio-list,
.userF .chk-list{ display:flex; gap:24px; }
.userF .emailF { width: calc(100% - 184px); position: relative; display: inline-flex; align-items: center; padding: 4px 16px; min-width: 200px; border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #111; height:48px;}
.userF .emailF input { padding:0 8px; border:none; height: 39px; min-width: auto; }
.userF .emailF input:first-child { padding:0; }
.userF .emailF input:focus { border:none; outline:none; box-shadow:none; }
.userF .emailC { width: 180px; }
.userF .infoM { margin-bottom: 16px; font-size: 1.2rem; color:#777; }
.userF .chk-list { margin-bottom: 40px; }
.userF .btn{height:48px; border-radius:8px;}
.policyPw{display:flex; flex-direction:column; margin-top:16px;}
.policyPw li{position:relative; padding-left:24px; font-size: 1.5rem;}
.policyPw li .micon{position:absolute; left:0; top:2px; width:18px; height:18px; font-size: 18px; color:#dbdbdb;}
.policyPw li.ok .micon{color:var(--color-blue);}
.policyPw li.no{color:var(--color-red);}
.policyPw li.no .micon{color:var(--color-red);}
.policyPw li.info .micon { color:var(--color-green); }
.alarm { display: flex; align-items: center; justify-content: center; margin-top: 8px; border-radius: 100px; font-size: 1.5rem; min-height: 32px; font-weight: 500; }
.alarm.ok { color: var(--color-blue); background: #E7F6FF; }
.alarm.no { color: var(--color-red); background: #FFE8E8; }
.alarm.info { color: var(--color-green); background: #e8ffea; }
@media all and (max-width:768px){
}
@media all and (max-width:425px){
 .alarm{font-size: 1.3rem;}
 .userF .emailC{width:auto; min-width:120px;}
 .userF .emailF{width:auto; min-width: auto;}
}
/**회원가입 - 가입완료*/
.compFind{margin:32px auto; text-align:center;}
.compFind .tit{font-weight:600; font-size: 2.8rem; font-family: var(--style-font);}
.compFind .tit .logNm{color:var(--color-main);}
.compFind .txt{margin-top:24px; }
.compFind img{margin-bottom:40px;}
.compFind .infoid{margin-top:24px; background:#f5f5f5; border-radius:16px; padding:40px; font-size: 1.9rem; color:var(--color-point); font-weight: 600; width:100%;}
.compFind .infoid li{display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.compFind .infoid li:last-child{margin-top:8px;}
.compFind .infoid li .infoTxt{ font-weight:normal; color:#222; margin-right:16px;}
.compFind .logList{margin:0 auto; margin-top:40px; padding-right:0;}
.compFind .infopw{margin-top:24px;}
/*아이디비밀번호 찾기*/
.compFind .repW{display:flex; flex-direction:column; gap:8px; margin:24px 0 0 0; }
.compFind .repW label{display:flex; flex-direction:column; gap:4px; width:100%; flex:1;}
.compFind .repW label span{width:120px; text-align:left;}
.compFind .repW .stxt{text-align:left;}
@media all and (max-width:768px){ 
 .compFind{margin:0 auto;}
 .compFind img{width:130px;}
 .compFind .tit{font-size: 2.1rem;}
 .compFind .infoid{padding:24px; font-size:1.7rem; }

 .compFind .repW{width:100%;}
 .compFind .repW label span{width:auto;}
 .compFind .repW label{gap:0; flex-direction:column; align-items:flex-start;}
 .compFind .repW label input{flex:none; width:100%;}
}

/*? 마이페이지 */
#mypage .mypage{display:flex; align-items:stretch; padding:40px; border-radius:16px; border:1px solid var(--color-sub2); gap:80px;}
#mypage .mypage .perArea{display:flex; flex-direction:column; gap:40px;}
#mypage .mypage .perArea .tit{font-family: var(--style-font); font-size: 2.5rem;}
#mypage .mypage .perArea .tit .em{color:var(--color-sub2); font-weight: 600; font-size: 3.2rem;}
#mypage .mypage .perArea .mybtnW{display:flex; flex-direction:column; gap:8px;}
#mypage .mypage .perArea .mybtnW .mybtn{border-radius:100px; width:100%; max-width:170px;}
#mypage .mypage .linkList{display:flex; gap:24px; flex:1;}
#mypage .mypage .linkList > li{flex:1; }
#mypage .mypage .linkList > li a{display:inline-flex; flex-direction:column; gap:40px; height:100%; width:100%; padding:24px; background:#f5f5f5; border-radius:16px; text-align:center; justify-content:space-between; align-items:center; text-decoration: none;}
#mypage .mypage .linkList > li a .num .em{font-size: 3.2rem; font-weight: 600;}
#mypage .mypage .linkList > li a:hover .num .em{color:var(--color-main);}
.memCardPop{flex-direction:column; align-items:center; justify-content:space-between; gap:40px; width:280px; height:400px; min-height:400px; padding:24px;}
.memCardPop .barcord{display:flex; flex-direction:column; gap:40px; }
.memCardPop .barcord .infoList{display:flex; flex-direction:column; gap:16px; }
.memCardPop .barcord .infoList > li{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.memCardPop .barcord .infoList > li .em{color:#444;}
.memCardPop .barcord .infoList > li .txt{font-weight: 600; }
.memCardPop .fot{display:flex; flex-direction:column; gap:8px; justify-content:center; align-items:center; text-align:center;}
.memCardPop .x{position:absolute; left:50%; bottom:-56px; top:auto; right:auto; transform:translateX(-50%); display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; background:var(--color-main); border-radius:100%; box-shadow:0 0 15px rgba(0,0,0,0.3); text-decoration: none;}
.memCardPop .x i{color:#fff;}
@media all and (max-width:1024px){
    #mypage .mypage{flex-direction:column; gap:24px;}
    #mypage .mypage .perArea{flex-direction:row; justify-content:space-between; align-items:center;}
    #mypage .mypage .perArea .mybtnW{flex-direction:row;}
}
@media all and (max-width:768px){
    #mypage .mypage{padding:24px;}
    #mypage .mypage .perArea .mybtnW .mybtn{padding:0 2.1rem;}
    #mypage .mypage .linkList{gap:16px; flex-wrap:wrap;}
    #mypage .mypage .linkList > li{min-width:100px;}
    #mypage .mypage .linkList > li a{padding:16px; gap:8px; height:auto; }
    #mypage .mypage .linkList > li a .tit{word-break: keep-all; white-space: nowrap;}
    #mypage .mypage .linkList > li a .num .em{font-size: 2.5rem;}
    #mypage .mypage .perArea{flex-wrap:wrap; gap:16px 40px;}
}
@media all and (max-width:425px){
    #mypage .mypage{padding:16px;}
    #mypage .mypage .perArea .tit{font-size: 1.9rem;}
    #mypage .mypage .perArea .tit .em{font-size: 2.5rem;}
    #mypage .mypage .linkList{flex-direction:column; gap:8px;}
    #mypage .mypage .linkList > li a{flex-direction:row; border-radius:8px; padding:8px 16px;}
    #mypage .mypage .linkList > li a .num .em{font-size: 1.9rem;}
    #mypage .mypage .perArea .mybtnW{flex-direction:column; width:100%;}
    #mypage .mypage .perArea .mybtnW .mybtn{font-size: 1.5rem; max-width:none;}
}

/*나의정보수정, 회원탈퇴*/
#mypageRet{margin:0 auto; width:650px;}
.pwInp{display:flex; flex-direction: column; margin-bottom:160px;}
.pwInp .txt{margin-bottom:40px; text-align: center; font-weight: 500; font-size: 2.1rem;}
.pwInp .list{display:flex; flex-direction: column; gap:8px;}
.pwInp .list label{display:flex; flex-direction: column; }
.pwInp .list label .tit{font-weight: 600;}
@media all and (max-width:768px){
 #mypageRet{width:100%;}
 .pwInp .txt{margin-bottom:24px; font-size: 1.7rem;}
}


/*? 하단메뉴 */
#agree .topTxt{margin:24px auto; font-size: 1.9rem;}
#agree .topTxt .em{text-decoration: underline;}
#agree .textBox .tit{margin-bottom:24px; font-weight:600; font-size: 1.9rem;}
@media all and (max-width:768px){
 #agree .topTxt,
 #agree .textBox .tit{font-size: 1.7rem;}
}
/**개인정보처리방침*/
#agree .personal{display:flex; flex-direction:column; gap:40px;}
#agree h4 img{position:absolute; top:50%; transform:translateY(-50%); margin-left:8px; height:40px;}

#agree .personal .labeling {border-bottom: 1px solid #ccc;}
#agree .personal .labeling>.tit { text-align: center; padding: 16px 0; color: #333; font-weight: 600; border-top: 2px solid #000; border-bottom: 1px solid #ccc;
 background: #fafafa;}
#agree .personal .labeling>ul {position:relative; display: flex; flex-wrap: wrap; border-bottom:1px dashed #ccc;}
#agree .personal .labeling>ul>li {text-align: center; flex: 0 0 33.33%; padding: 15px 0; border: dashed #ccc;
 border-width: 0;}
#agree .personal .labeling>ul>li:nth-child(n+4){border-top-width: 1px;}
#agree .personal .labeling>ul>li:not(:nth-child(3n-2)) { border-left-width: 1px;}
#agree .personal .labeling>ul>li>a { display: block;}
#agree .personal .labeling>ul>li img {height: 90px;}
#agree .personal .labeling>ul>li .detailLayer img{height:40px;}
#agree .personal .labeling>ul>li span.txt {display: block; margin-top: 10px; font-weight: 600; font-size: 1.5rem;}

#agree .personal .index { border-bottom: 1px solid #ccc;}
#agree .personal .index>.tit { text-align: center; padding: 16px 0; color: #333; font-weight: 600; border-top: 2px solid #000; border-bottom: 1px solid #ccc; background: #fafafa;}
#agree .personal .index>ul { display: flex; flex-wrap: wrap; border-bottom:1px dashed #ccc;}
#agree .personal .index>ul>li { flex: 0 0 48.5%; padding: 12px 10px;
 border: dashed #ccc; border-width: 0;}
#agree .personal .index>ul>li:nth-child(n+3) { border-top-width: 1px;}
#agree .personal .index>ul>li:nth-child(2n) { flex: 0 0 51.5%; border-left-width: 1px;}
#agree .personal .index>ul>li a { position: relative; display: block;
 padding-right: 40px;}
#agree .personal .index>ul>li a img { position: absolute; right: 0; top: 50%; width: 30px; transform: translateY(-50%);}

#agree .personal .ps {padding:16px 0; font-size: 1.5rem; font-weight: 600;}

#agree .personal .detailLayer { display: none; text-align: left; position: absolute; left: 0; top: 0; padding: 24px; width: 100%; max-height: 360px; background: #fff; border: 1px solid #333; box-shadow: 5px 0 12px rgba(0,0,0,.2); z-index: 100; overflow-y: auto;}
#agree .personal .detailLayer a.close { display: block; position: absolute; right: 0; top: 4px; width: 42px; height: 42px; overflow: hidden; text-indent: -5000px; font-size: 0;}
#agree .personal .detailLayer a.close:before { position: absolute; content: ""; width: 1px; height: 32px; left: 20px; top: 6px; background: #333; transform: rotate(45deg);}
#agree .personal .detailLayer a.close:after { position: absolute; content: ""; width: 1px; height: 32px; left: 20px; top: 6px; background: #333; transform: rotate(-45deg);}

@media all and (max-width:768px){
 #agree h4 img{position:relative; margin-left:4px; top:auto; transform:none; height:24px; }
#agree .personal .labeling>ul>li img {height: 40px;}
#agree .personal .index>ul{flex-direction:column;}
#agree .personal .index>ul>li:nth-child(2n){border-left-width: 0;}
#agree .personal .index>ul>li:nth-child(n+3){border-top-width: 0;}
#agree .personal .index>ul>li{border-bottom:1px dashed #ccc;}
#agree .personal .index>ul>li a img{width:24px;}
#agree .personal .labeling>ul>li .detailLayer img{height:24px;}
}


/*? 사이트맵 */
#sitemap{display:flex; flex-direction:column; gap:40px;}
#sitemap .list{display:flex; flex-wrap:wrap; gap:24px; margin-top: 24px;}
#sitemap .list > li{width:calc(100% / 5 - 20px);}
#sitemap .list > li > a{display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:8px; padding:12px 16px; border:1px solid #ccc; border-radius:12px; width:100%; text-decoration: none;}
#sitemap .list > li > a i{font-size: 2.0rem;}
#sitemap .list > li:hover > a{border:1px solid var(--color-sub2); color:var(--color-main); font-weight: 600;}
#sitemap .listDep{display:flex; flex-direction:column; flex-wrap:wrap; gap:8px; padding:16px 8px;}
#sitemap .listDep > li{width:100%;}
#sitemap .listDep > li a{position:relative; display:inline-flex; align-items:center; gap:4px; padding:8px; padding-left:24px; width:100%; border-radius:8px; text-decoration: none;}
#sitemap .listDep > li a::before{position:absolute; content:''; left:8px; top:16px; width:5px; height:5px; border-radius:50%; border:3px solid #ccc; }
#sitemap .listDep > li a i{font-size: 1.8rem;}
#sitemap .listDep > li a:hover{background:#f5f5f5;}
#sitemap .listDep > li a:hover::before{border:3px solid var(--color-main);}
@media all and (max-width:1024px){
 #sitemap .list > li{width:calc(100% / 3 - 16px);}
}
@media all and (max-width:768px){
 #sitemap .list{gap:8px;}
 #sitemap .list > li{width:calc(100% / 2 - 4px);}
}
@media all and (max-width:425px){
 #sitemap .list{margin-top:8px;}
 #sitemap .list > li{width:100%;}
 #sitemap .list > li > a{justify-content:flex-start;}
 #sitemap .list > li > a i{margin-left:auto; font-size: 1.7rem;}
 #sitemap .listDep{gap:0; padding:8px;}
 #sitemap .listDep > li a i{font-size: 1.6rem;}
 #sitemap .listDep > li a::before{top:14px; border:2px solid #ccc;}
 #sitemap .listDep > li a:hover::before{border:2px solid var(--color-main);}
}




/*?시설사업*/
.root_daum_roughmap {margin-top:16px; width:100% !important;}
.root_daum_roughmap .cont {display:none;}

.imgList{display:flex; gap:40px; margin-top:40px; flex-wrap:wrap;}
.imgList > li{width:calc(100% / 2 - 20px);}
.imgList > li img{width:100%; height:calc(100% - 40px); max-height:350px; object-fit: cover; border-radius:16px; border:5px solid #fff; box-shadow:3px 5px 15px rgba(0,0,0,0.2);}
.imgList > li .txt{margin-top:8px; text-align:center; font-weight:600;}

.imgBlog{display:flex; flex-direction:column; margin-top:24px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.imgBlog > li{display:flex; align-items:center; gap:40px; padding:24px 0; border-bottom:1px dashed #ccc; }
.imgBlog > li:last-child{border-bottom:0;}
.imgBlog img{width:160px; border-radius:8px; border:5px solid #fff; box-shadow:3px 5px 7px rgba(0,0,0,0.2);}
.imgBlog > li h5,
.imgBlog > li .h5{margin-top:0;}

.sImgList{display:flex; align-items:center; gap:24px;}
.sImgList img{border-radius:8px; border:5px solid #fff; box-shadow:3px 5px 7px rgba(0,0,0,0.2);}

#fac .imgList{margin-top:8px; flex-wrap:nowrap;}
#fac .imgList > li{flex:1;}
#fac .tbl{margin-top:24px;}

@media all and (max-width:768px){
 .imgList{gap:16px;}
 .imgList > li{width:calc(100% / 2 - 8px);}
 .imgList > li img{border:3px solid #fff; box-shadow:3px 5px 7px rgba(0,0,0,0.2); border-radius:8px;}
 .sImgList{flex-wrap:wrap; gap:8px;}
 .sImgList > li{flex:1 0 calc(100% / 2 - 4px);}
 .sImgList > li img{width:100%;}
 .imgBlog{border-top:0; border-bottom:0;}
 .imgBlog > li{flex-direction:column; align-items:flex-start; gap:8px;padding:16px 0;}
 .imgBlog img{width:100%;}
 .imgList > li .txt{font-weight: 500; font-size: 1.5rem;}
 #fac .imgList > li{flex:1;}
 #fac .tbl{margin-top:16px;}
}
@media all and (max-width:425px){
 .imgList{margin-top:24px; gap:8px;}
 .imgList > li{width:100%;}
}


/*?이용권*/
.ticketList{display:flex; flex-direction:column; margin-top:16px; gap:16px;}
.ticketList > li{position:relative; display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:16px; border:1px solid #ccc; }
.ticketList > li .tit{ font-weight: 600; font-size:2.1rem;}
.ticketList > li .price{display:flex; align-items:center;justify-content:space-between;}
.ticketList > li .price .txt .em{ font-weight: 600;  font-size:1.9rem;}
.ticketList > li .price .txt .discount .stxt{ color:#676767; text-decoration: line-through;}
.ticketList > li.on{border:1px solid var(--color-sub); box-shadow:0 0 5px rgba(0,0,0,0.1);}
.ticketList .counter{display:inline-flex; align-items:center; border-radius:16px; background:#f7f8fb; overflow:hidden;}
.ticketList .counter .minus,
.ticketList .counter .plus{display:inline-flex; align-items:center; justify-content:center; width:40px; height:48px; outline:none !important;}
.ticketList .counter .minus:hover,
.ticketList .counter .plus:hover{background:#f2f3f7;}
.ticketList .counter .minus:disabled{color:#999;}
.ticketList .counter input{display:inline-flex; align-items:center; justify-content:center; height:48px; min-width:56px; border:0 !important;  background-color:transparent; padding:0; text-align:center; font-size: 1.9rem; }
.ticketList > li.on .counter input{font-weight: 600; color:var(--color-sub);}
.ticketList .counter input::-webkit-outer-spin-button,
.ticketList .counter input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.ticketList .infoTxt{ padding-top:16px; border-top:1px dashed #ccc;}
.ticketList > li.disabled{position:relative; color:#676767; cursor:no-drop; border:1px solid #ccc !important; box-shadow:none !important; overflow:hidden;}
.ticketList > li.disabled p{text-decoration: line-through; font-weight: 400 !important;}
.ticketList > li.disabled input{color:#676767 !important; font-weight:400 !important; text-decoration: line-through;}
.ticketList > li.disabled .msg{position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; color:#fff; text-decoration: none !important; font-weight: 600; font-size: 1.9rem;}

@media all and (max-width:768px){
    .ticketList > li{padding:16px;}
    .ticketList > li .tit{font-size: inherit;}
    .ticketList > li .price .txt .em{font-size: 1.7rem;}
    .ticketList .counter{border-radius:8px;}
    .ticketList .counter input{font-size: 1.7rem; width:40px; min-width:40px; height:40px;}
    .ticketList .counter .minus, 
    .ticketList .counter .plus{width:30px; height:40px;}
    .ticketList .counter i{font-size: 1.7rem;}
    .ticketList > li.disabled .msg{font-size: 1.7rem;}
}


/*?마이페이지 회원등록*/
.enrollFamPop .popTbl{max-width:600px;}
.enrollFamPop .popTbl input{margin-right:0;}

/*?마이페이지 문의*/
.openDetPop,
.openWrtPop{width:700px;}
.pop .detTbody{min-height:auto;}
@media all and (max-width:768px){
    .openDetPop,
    .openWrtPop{width:100%; max-width:calc(100% - 32px);}
}


/*?결제안내 팝업*/
.costPop .popBody{text-align: center;}
.costPop .popBody .txt{display:inline-block; margin:24px auto; font-size: 2.1rem; font-family: var(--style-font);}
.costPop .popBody .txt .cost{font-size: 2.5rem; font-weight: 600; color:var(--color-point);}
.costPop .popBody .stxt{color:#676767;}
@media all and (max-width:480px){
    .costPop .popBody .txt{font-size: 1.9rem;}
    .costPop .popBody .txt .cost{font-size: 2.1rem;}
}


/*?회원가입 회원번호 조회 팝업*/
.memPop .popBody p,
.findPwPop .popBody p{margin-top:24px; text-align: center;}
.memPop .memList{display:flex; flex-direction:column; gap:4px; margin-top:16px; }
.memPop .memList label{padding:8px 16px; width:100%; border:1px solid #ccc; border-radius:8px; }
.memPop .memList label:has(input:checked){border:1px solid var(--color-main); box-shadow:3px 3px 5px rgba(0,0,0,0.1);}



/*!통합검색*/
#compSrh{position:relative; min-height:80vh; }
#compSrh .head{display:flex; flex-direction:column; align-items:center; gap:32px; padding:100px 40px; background:#f5f5f5 url(../img/common/subBg.svg) no-repeat top center; background-size:contain;}
#compSrh .head .tit{font-family: var(--style-font); font-size:4rem ; font-weight: 600;}
#compSrh .head .srhBox{display:flex; align-items:center; padding:8px; border:3px solid var(--color-main); background:#fff; border-radius:100px; width:100%; max-width:800px;}
#compSrh .head .srhBox label{flex:1; border-radius:100px; width:100%; height:100%;}
#compSrh .head .srhBox label input{border:0; border-radius:100px; font-size: 2.1rem; width:100%;}
#compSrh .head .srhBox label input::placeholder{font-size: 2.1rem;}
#compSrh .head .srhBox .srhBtn{display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; background:var(--color-main); border-radius:100%; color:#fff;}
#compSrh .head .total{text-align: center; font-size:2.8rem ; font-weight: 600; font-family: var(--style-font);}
#compSrh .head .total .em{color:var(--color-sub);}
#compSrh .comDiv{display:flex; flex-direction:column; gap:80px; transform:translateY(-40px);}
#compSrh .comDiv .comTab{display:flex; align-items:center; width:100%; max-width:1600px; margin:0 auto; background:#fff; border-radius:16px 32px; box-shadow:3px 7px 15px rgba(0,0,0,0.2);}
#compSrh .comDiv .comTab > li{flex:1;}
#compSrh .comDiv .comTab a{display:inline-flex; align-items:center; justify-content:center; padding:24px 16px; width:100%; font-size: 2.1rem; font-family: var(--style-font); font-weight: 600; color:#444; text-align:center; border-radius:16px 32px; text-decoration: none;}
#compSrh .comDiv .comTab a br{display:none;}
#compSrh .comDiv .comTab a .num{color:var(--color-point);}
#compSrh .comDiv .comTab a.on{background:var(--color-sub2); color:#fff;}
#compSrh .comDiv .comTab a.on .num{color:#fff;}

#compSrh .totalList{display:flex; flex-direction:column; gap:56px;}
#compSrh .totalList > li{display:flex; flex-direction:column; gap:16px;}
#compSrh .totalList .title{display:flex; align-items:center; justify-content:space-between; }
#compSrh .totalList .title .h4 .em{font-size: 2.1rem; font-weight:500; color:var(--color-point);}
#compSrh .totalList .title .detail{display:inline-flex; align-items:center; text-decoration:none;}
#compSrh .totalList .title .detail .micon{width:18px; height:18px; font-size: 20px;}
#compSrh .totalList .list{border-radius:16px; box-shadow:0 0 15px rgba(0,0,0,0.1); overflow:hidden; width:100%;}
#compSrh .totalList .list > li{position:relative; width:100%;}
#compSrh .totalList .list > li a{position:relative; display:inline-flex; justify-content:center; flex-direction:column; gap:8px; padding:32px; border-bottom:1px solid #dbdbdb; width:100%; text-decoration: none;}
#compSrh .totalList .list > li:last-child a{border-bottom:0;}
#compSrh .totalList .list > li a .tit{font-size:1.9rem; font-weight:600; width:100%; overflow:hidden; text-overflow: ellipsis; white-space:nowrap;} 
#compSrh .totalList .list > li a .txt {display: -webkit-box; width:100%; overflow:hidden; max-height: 5.1em; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all; text-overflow: ellipsis; white-space:normal;}
#compSrh .totalList .list > li a .txt em {font-weight: 600; color: var(--color-point); background:#ffface;}
#compSrh .totalList .list > li a .etc{display:inline-flex; flex-wrap:wrap; gap:0px 16px;}
#compSrh .totalList .list > li a .etc li{position:relative; color:#676767; }
#compSrh .totalList .list > li a .etc li:not(:last-of-type)::before{position:absolute; content:''; right:-9px; top:4px; width:1px; height:15px; background:#dbdbdb;}
#compSrh .totalList .list > li a:hover .tit{color:var(--color-main);}
#compSrh .totalList .list > li .favorite{display:inline-flex; align-items:center; justify-content:center; position:absolute; right:32px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:1px solid #dbdbdb; border-radius:100%; color:#dbdbdb;}
#compSrh .totalList .list > li .favorite:hover{color:#999; border:1px solid #dbdbdb;}
#compSrh .totalList .list > li .favorite.on{border:1px solid var(--color-main); color:var(--color-main);}
#compSrh .totalList .list > li .favorite.on:hover{opacity:.8;}
#compSrh .totalList .list .noList{padding:32px; text-align:center; color:#676767;}

#compSrh .totalList .location {display: flex; gap:2px 8px; flex-wrap:wrap;}
#compSrh .totalList .location .micon {font-size: 1.2rem;}
#compSrh .totalList .location > li {display: flex; align-items: center; position:relative; gap: 8px; color:#676767; font-size: 1.3rem;}
#compSrh .totalList .location > li:first-child {gap: 4px;}
#compSrh .totalList .location > li + li::before {position:relative; content:''; width:6px; height:6px; border-right:1px solid #999; border-bottom:1px solid #999; transform:rotate(315deg);}


@media all and (max-width:1440px){
    #compSrh .head .tit{font-size: 3.2rem;}
    #compSrh .head .total{font-size:2.5rem ;}

    #compSrh .comDiv .comTab a{flex-direction:column; gap:2px; font-size: 1.9rem;}
}
@media all and (max-width:1024px){
    #compSrh .head{padding:80px 30px 100px 30px;}

    #compSrh .totalList{gap:40px;}
    #compSrh .totalList > li{gap:8px;}
    #compSrh .totalList .list > li a{padding:24px 80px 24px 24px;}
    #compSrh .totalList .list > li .favorite{right:24px;}
    #compSrh .totalList .title .h4{font-size: 2.0rem;}
    #compSrh .comDiv .comTab a{padding:16px 8px; font-size: 1.7rem;}
}
@media all and (max-width:768px){
    #compSrh .head{padding:60px 30px 120px 30px;}
    #compSrh .head .tit{font-size: 2.8rem;}
    #compSrh .head .total{font-size:2.1rem ;}
    #compSrh .comDiv{gap:60px; transform:translateY(-75px);}
    #compSrh .comDiv .comTab{flex-wrap:wrap; padding:16px; border-radius:8px 24px;}
    #compSrh .comDiv .comTab > li{flex:none;}
    #compSrh .comDiv .comTab a{flex-direction:column; padding:8px 20px; font-size: 1.5rem; border-radius:8px 24px;}
    #compSrh .head .srhBox label input{font-size: 2.1rem;}
}
@media all and (max-width:480px){
    #compSrh .head{padding:40px 20px 100px 20px; gap:24px;}
    #compSrh .head .tit{font-size: 2.5rem;}
    #compSrh .head .total{font-size:1.7rem ;}
    #compSrh .head .srhBox{padding:4px;}
    #compSrh .head .srhBox label input{font-size: 1.9rem;}

    #compSrh .comDiv{gap:40px;}
    #compSrh .comDiv .comTab{padding:0;}
    #compSrh .comDiv .comTab{border-radius:8px 16px;}
    #compSrh .comDiv .comTab a{flex-direction:row; border-radius:8px 16px; font-weight: 500;}

    #compSrh .totalList{gap:24px;}
    #compSrh .totalList .title .h4,
    #compSrh .totalList .title .h4 .em{font-size:1.7rem;}
    #compSrh .totalList .list{border-radius:8px;}
    #compSrh .totalList > li{gap:0;}
    #compSrh .totalList .list > li a{padding:16px; gap:4px;}
    #compSrh .totalList .list > li a .tit{padding-right:40px; font-size:1.7rem;}
    #compSrh .totalList .list > li a .etc li{font-size: 1.5rem;}
    #compSrh .totalList .list > li .favorite{width:32px; height:32px; right:16px; top:16px; transform:none;}
    #compSrh .totalList .list > li .favorite .micon{font-size:20px;}
    #compSrh .totalList .list .noList{padding:16px;}
}