/**************************************************
* 버전관리
* version : v=1
* Last Update : 
**************************************************/

/********************************************************
■ 공통
********************************************************/
/*-----기본-----*/
html{font-size:20px;}
body{font-size:1rem}
.mob{display:none;}
#wrap{position:relative; line-height:1.5; overflow:hidden; font-size:0.85rem;}
#wrap img { border:none; }
#wrap i{vertical-align:middle;}


/*세팅*/
:root{
	/*색상*/
	--main: #0091ff;
	--yellow:#ff8200;

	/*폰트*/
	--font13:0.65rem;
	--font15:0.75rem;
	--font17:0.85rem;
	--font19:0.95rem;
	--font22:1.1rem;
	--font24:1.2rem;
	--font30:1.5rem;
	--font32:1.6rem;
	--font36:1.8rem;
	--font40:2rem;
	--font44:2.2rem;
	--font54:2.7rem;
}


@media (max-width:1024px){
	html{font-size:17px;}
    body{font-size:1rem}
	#wrap{font-size:1rem;}
}

@media (max-width:768px){
	html,body,#wrap{height:auto;}
	html{font-size:16px;}
    body{ position:relative;}	
	.web{display:none;} 
	.mob{display:block;}
}
@media (max-width:390px){
	/* -----공통----- */
	html{font-size:15px;}
    body{font-size: 1rem}
}

/********************************************************
■ 헤더
********************************************************/
#header{position: absolute; top:0; left: 0; width:100%; z-index:100; -webkit-transition:all .3s; transition:all .3s;  }
#header h1{position:absolute; left:1rem; top:50%; transform:translateY(-50%); z-index:999;}
#header h1 a{display: block;}
#header h1 img{height: 1.7rem; vertical-align: middle;}
#header .header_inner{position:relative; max-width:84rem; margin:0 auto; height:7.5rem; }
#header .header_inner:after{content:""; display:block; clear:both;}

#header  #nav {position: relative; z-index: 10; display: flex; flex-direction: row; justify-content: center; align-items: center; color:#fff;}
#header  #nav ul {clear:both; height:100%;}
#header  #nav ul li { display:inline-block;}
#header  #nav ul li div a{text-align:center; display:inline-block; height:7.5rem; line-height:7.5rem; text-transform: uppercase; font-weight:600; padding:0 1.75rem;  font-size:0.9rem; font-family: "Exo 2", 'Pretendard GOV', serif;  }
#header  #nav ul li ul{z-index: 10;display:none; position: absolute; width:100%;  left:0; top:7.5rem; padding-top:2.5rem; gap:1.5rem; height:15.6rem;  }
#header  #nav ul li ul:before{content:""; position: absolute; left:0; top:0rem; width:120%; height:1px; background:rgba(0,0,0,0.2); }
#header  #nav ul li ul li {display:block; flex:1; height:15.6rem; }
#header  #nav ul li ul li a{position: relative; display:flex; justify-content: space-between; flex-direction: column; align-items: flex-start; width:100%; height:100%; background:#000; font-weight:700; font-size:1.5rem; padding:2.5rem; transition: all .2s; -webkit-transition: all .2s;  z-index:0; overflow:hidden; }
#header  #nav ul li ul li a span{display: inline-block;background-image: linear-gradient(transparent calc(100% - 3px), #0091FF 3px); background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .3s; font-family: "Exo 2", 'Pretendard GOV', serif; }
#header  #nav ul li ul li a img{position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); opacity: 0; transition-property: opacity, transform; transition-timing-function: ease,cubic-bezier(0.39, 0.58, 0.57, 1); transition-duration: .35s, .8s; transition-delay: inherit; }
#header  #nav ul li.on ul li a img{opacity: 1; transform:none;}
#header  #nav ul li.on ul li a:hover{justify-content: flex-end}
#header  #nav ul li.on ul li a:hover span{background-size: 100% 100%;}
#header  #nav ul li.on ul li a:hover .txt{display:none;}
#header  #nav ul li.on ul li a:hover img{ opacity: .95; transform: scale(1.06);}
#header  #nav ul li ul li a .txt{font-size:0.9rem; font-weight:400; text-shadow: 0 0 10px rgba(0, 0, 0, 1); }

#header .bg_box{position: absolute;  top: 7.5rem; left: 0;  width:100%; height:21rem; opacity:0; background:#fff; z-index:5; visibility:hidden;}
.header_nav_bg{position: fixed;  top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; z-index: 2;}

/* 헤더 오버 & 스크롤 */
#header.over {background:#fff; }
#header.over h1 img,
#header.open h1 img{content:url('/templates/gongchengshi/images/default/main/logo_b.svg');}
#header.over #nav ul li div a{color:#000;}
#header.over #nav ul li.on div a{color:var(--yellow);}
#header.over #nav ul li ul li a:before{transform: scale(1);}
#header.over .bg_box {visibility:visible;}

/*-----햄버튼-----*/
.btn-gnb-menu{position:absolute; right:0; top:0; width:4rem; height:7.5rem; cursor:pointer; z-index:9999;text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s;}
.btnAll {position:relative; display:block; width:4rem; height:1.15rem; margin:0 auto; top:50%;  transform:translateY(-50%);outline: none; z-index:9999;}
.btnAll span { display: inline-block; width: 100%; height: 4px; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; }
.btnAll > span:nth-child(1) { top: 0; left:0; width:1.5rem}
.btnAll > span:nth-child(2) { top: 0.5rem; left:0; width:100%;}
.btnAll > span:nth-child(3) { top: 1rem; right:0; width:3rem;}

#header.over .btnAll > span{background:#222;}
#header.over .btnAll > span:nth-child(1){background:var(--yellow);}

#header.open .btnAll {width:2rem; height:2rem; top:60%;}
#header.open .btnAll > span{background:#222;}
#header.open .btnAll > span:nth-child(1) { top: 0;margin-left: -0.4rem; -webkit-transform: translateY(0.5rem) rotate(45deg); transform: translateY(0.5rem) rotate(45deg); width: 2.5rem;}
#header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;}
#header.open .btnAll > span:nth-child(3) { top: 1rem; -webkit-transform: translateY(-0.5rem) rotate(-45deg); transform: translateY(-0.5rem) rotate(-45deg); width: 2.5rem;}


@media (max-width:1680px){
	.btn-gnb-menu{right:1rem; }
	#header #nav ul li ul{padding:2.5rem 1rem 0;}
}	
@media (max-width:1440px){
	#header #nav ul li div a{padding:0 1rem;}
	#header #nav ul li ul li a{padding:1.5rem; font-size: 1.3rem;}
	#header #nav ul li ul li a .txt{font-size:0.8rem;}
	
}	
@media (max-width:1024px){
	#header #nav{display:none;}
	#header .header_inner,
	.btn-gnb-menu{height:4rem; }
	#header.open .btn-gnb-menu{right:0;}
}
@media (max-width:767px){
	.btn-gnb-menu,
	.btnAll {width: 2rem;}
	.btnAll span  {height:3px;}
	.btnAll > span:nth-child(1) {width:1.2rem;}
	.btnAll > span:nth-child(3) {width:1.2rem;}

	#header.open .btnAll > span:nth-child(1) {width: 2rem; left:auto; right: 1.1em;}
	#header.open .btnAll > span:nth-child(3) {width: 2rem;  right: 1.1em;}
}


/********************************************************
■ 전체메뉴
********************************************************/
/* 전체메뉴 */
#menuAll{display: flex; align-items: center;  justify-content: center; position:fixed; right:-100%; top:0; z-index:100; width:100%; height: 100vh; overflow:hidden; background:#fff; opacity:0; visibility: hidden; transition:right 0.5s cubic-bezier(.38,.37,.12,.98); }


#navi{width:76rem; padding:0 1rem; margin:0 auto; display: flex; }
#navi .sitemap_text{display: flex; flex-direction: column; padding-top:2rem; width:20rem; flex-shrink: 0; padding-right:4rem;}
#navi .sitemap_text *{ opacity:0; transform: translateY(50px); transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);}
#navi .sitemap_text h3{font-size:2.2rem; color:#222; font-weight:700; margin-bottom:1.5rem;}
#navi .sitemap_text p{font-size:1rem; color:#555; font-weight:500;}
#navi .sitemap_text a{position: relative;margin-top:4rem; display:flex; align-items: center; justify-content: space-between; background: url('/templates/gongchengshi/images/default/main/quick_bg.png') no-repeat 50% 50%; background-size:120% auto;  height:3rem; padding:0 1rem; font-family: "Exo 2", 'Pretendard GOV', serif; color:#fff; font-weight:500; }
#navi .sitemap_text a:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; transition: all 0.2s ease-out 0s; }
#navi .sitemap_text a:hover:before{box-shadow:4px 4px 10px rgba(0, 0, 0, 0.15);}

.mobile_top{position: relative; color:#888; flex:1;  z-index:0; padding: 0 3rem 0 4rem;}
.mobile_top > p {display:none;}
.mobile_top:before{content:""; position:absolute; left:0px; top:calc(50% - 50vh); width:100vw; height:100vh; background:#f7f7f7; z-index:-1;}
.mobile_top .mbtop > li{position: relative; display: flex; align-items: center; justify-content: space-between; overflow:hidden; gap: 0 2rem;}
.mobile_top .mbtop > li:before{content:""; position: absolute; bottom: 0; left: 0; width:0%; height: 3px;  pointer-events: none; transition: width 1s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0s;}
.mobile_top .mbtop > li > a{color:#121212; font-size:var(--font44); font-weight:700; text-transform: uppercase;  font-family: "Exo 2", 'Pretendard GOV', serif;  padding:1.5rem 0; transform: translateY(300%); transition: transform 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);} 
.mobile_top .mbtop > li ul{transform: translateY(300%); transition: transform 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);}
.mobile_top .mbtop > li ul li{display:inline-block; font-size:var(--font19);}
.mobile_top .mbtop > li ul li:not(:last-child) a{position: relative; padding-right:2.4rem; }
.mobile_top .mbtop > li ul li:not(:last-child) a:after{content: ""; position: absolute; top: 0; bottom: 0; right: 1em; margin: auto; width: 1px; height: 1em; background: rgba(0, 0, 0, .3); transform: rotate(25deg);}
.mobile_top .mbtop > li a:hover{color:#15BCF4;}

#header.open #menuAll{right:0; opacity: 1; visibility: inherit;}

#header.open .sitemap_text *{ opacity:1; transform: none;}
#header.open .sitemap_text h3{transition-delay: .4s;}
#header.open .sitemap_text p{transition-delay: .6s;}
#header.open .sitemap_text a{transition-delay: .8s;}

#header.open .mobile_top .mbtop > li:before{width:100%; background: #121212;}
#header.open .mobile_top .mbtop > li > a,
#header.open .mobile_top .mbtop > li ul{transform: none;}
#header.open .mobile_top .mbtop > li:nth-child(1):before{transition-delay: 1s;}
#header.open .mobile_top .mbtop > li:nth-child(1) > a,
#header.open .mobile_top .mbtop > li:nth-child(1) ul{transition-delay: 1.1s;}
#header.open .mobile_top .mbtop > li:nth-child(2):before{transition-delay: 1.1s;}
#header.open .mobile_top .mbtop > li:nth-child(2) > a,
#header.open .mobile_top .mbtop > li:nth-child(2) ul{transition-delay: 1.3s;}
#header.open .mobile_top .mbtop > li:nth-child(3):before{transition-delay: 1.4s;}
#header.open .mobile_top .mbtop > li:nth-child(3) > a,
#header.open .mobile_top .mbtop > li:nth-child(3) ul{transition-delay: 1.5s;}
#header.open .mobile_top .mbtop > li:nth-child(4):before{transition-delay: 1.6s;}
#header.open .mobile_top .mbtop > li:nth-child(4) > a,
#header.open .mobile_top .mbtop > li:nth-child(4) ul{transition-delay: 1.7s;}
#header.open .mobile_top .mbtop > li:nth-child(5):before{transition-delay: 1.8s;}
#header.open .mobile_top .mbtop > li:nth-child(5) > a,
#header.open .mobile_top .mbtop > li:nth-child(5) ul{transition-delay: 1.9s;}

@media (max-width:1440px){
	#navi .sitemap_text{width:18rem;}
	#navi .sitemap_text h3{ font-size:2rem;}
	#navi .sitemap_text a{width:13rem;}

	.mobile_top{padding: 0 1rem 0 2rem;}
	.mobile_top .mbtop > li > a{font-size:var(--font40);}
	.mobile_top .mbtop > li ul li:not(:last-child) a{padding-right:2rem;}
}	

@media (max-width:1024px){
	.mobile_top .mbtop > li{flex-direction: column; justify-content: center; align-items: flex-start;}
	.mobile_top .mbtop > li > a{padding-bottom:0;}
	.mobile_top .mbtop > li ul{padding-bottom:1rem;}

}
@media (max-width:768px){
	#menuAll{background: #f7f7f7; align-items: normal; padding-top:4rem;}
	#navi{}
	#navi .sitemap_text{display:none;}

	.mobile_top{display: flex; flex-direction:column;  align-items: center;  justify-content: center; padding:0;   padding-bottom: 80px;color:#353535;}
	.mobile_top > p {font-size:1rem; color:#c5c5c5; height: 42px;display: flex;align-items: center;justify-content: center; width: 100%; position: absolute;   bottom: 4rem; left: 0;}
	.mobile_top:before{display:none;}
	.mobile_top .mbtop {width:100%;}
	.mobile_top .mbtop > li{display:block; padding:1rem 0;  transition: transform 0.8s, opacity 0.8s; transform: translateY(-50%); opacity: 0;}
	.mobile_top .mbtop > li:before{height:2px; }
	.mobile_top .mbtop > li > a{position:relative; padding:0; display:block; line-height:1; font-size: 1.41rem; transform:unset; text-align: center; text-transform: capitalize;}
	.mobile_top .mbtop > li > a:after,
	.mobile_top .mbtop > li > a:before{content: ""; display:none; position:absolute; transition: all 0.2s ease-out 0s; background:#121212;}
	.mobile_top .mbtop > li > a:before{right:0.08em; top:0.5em; width:0.8em; height:2px; }
	.mobile_top .mbtop > li > a:after{right:0.455em; top:0.15em; width:2px; height:0.8em; }
	.mobile_top .mbtop > li.open_li > a:after{transform: rotate(90deg);}
	.mobile_top .mbtop > li ul{display:none;  padding: 0.5rem 1rem; text-align: center;}
	.mobile_top .mbtop > li ul li{display:block; font-size: 1.11rem;}
	.mobile_top .mbtop > li ul li a{display: block; padding: 0.5rem; padding-right:0.5rem !important;}
	.mobile_top .mbtop > li ul li a:after{display:none;}
	.mobile_top .mbtop > li.open_li{padding-bottom:0;}
	.mobile_top .mbtop > li.open_li ul{display:block; background:#fff;margin-top:1.5rem;}
	#header.open .mobile_top .mbtop > li:before{width:0;background:#e3e3e3;}

    #header.open .mobile_top .mbtop > li {transform: translateY(0); opacity: 1;}
	#header.open .mobile_top .mbtop > li:nth-child(1){transition-delay:0.3s;}
	#header.open .mobile_top .mbtop > li:nth-child(2){transition-delay:0.4s;}
	#header.open .mobile_top .mbtop > li:nth-child(3){transition-delay:0.6s;}
	#header.open .mobile_top .mbtop > li:nth-child(4){transition-delay:0.7s;}
	#header.open .mobile_top .mbtop > li:nth-child(5){transition-delay:0.8s;}
}



/********************************************************
■ 푸터
********************************************************/
#footer{clear:both; padding:4.5rem 0; color:#fff; font-size:.8rem; letter-spacing:0.02em; background: url('../../images/foot_bg.jpg')no-repeat 50% bottom; background-size:cover; z-index:1; font-family: "Exo 2", 'Pretendard GOV', serif;}
#footer .inner{ max-width: 76rem; padding: 0 1rem; margin: 0 auto;}
#footer .fot_top{display:flex; justify-content: space-between; align-items: flex-end; gap:1.5rem;}
#footer .fot_menu > ul{display:flex; gap:2rem; }
#footer .fot_menu > ul li ul{margin-top:1rem; opacity:0.5;}
#footer .fot_menu > ul li ul li:not(:first-child){margin-top:1.3rem;}
#footer .fot_left h4{font-size:0.9rem; font-weight:600; margin-bottom:2.2rem;}
#footer .fot_left ul{display:flex; flex-wrap: wrap;  font-weight:300; }
#footer .fot_left ul li{position:relative;}
#footer .fot_left ul.fotul1 li:not(:last-child)::after { display: inline-block; width: 1px; height: 12px; margin: 0 12px; background: #d9d9d9; content: ''; }  
#footer .fot_left ul.fotul2{margin-top:0.75rem;}
#footer .fot_left ul.fotul2 li:not(:last-child)::after { display: inline-block; width: 3px; height: 3px; border-radius:50%; margin: 0 12px 3px; background: #d9d9d9; content: ''; vertical-align:middle;}



#footer .fot_logos{display:flex; flex-direction: column; align-items: flex-end; gap:1.5rem; font-weight:300;}
#footer .copyright{position:relative; display:flex; justify-content: space-between; align-items: flex-end; gap:1rem; margin-top:3rem; padding-top:1.5rem; }
#footer .copyright:before{content:""; position:absolute; left:calc(50% - 50vw); top:0px; width:100vw; height:1px; background:#fff; opacity:0.2;}
#footer .copyright p.addP{display:flex; gap:1.25rem 2.25rem; flex-wrap: wrap;}
#footer .copyright p.addP .add{width:100%;}
#footer .copyright p.copy{text-align:right; white-space: nowrap;}

@media (max-width:1024px){
	#footer .copyright p.addP{gap:0.25rem 2rem;}
}
@media (max-width:768px){
	#footer .fot_top{flex-direction: column;}
	#footer .fot_logos{flex-direction: row; width: 100%;}
	#footer .fot_logos img{height:1.5rem;}
	#footer .fot_menu{display:none;}
	#footer .copyright{margin-top: 2rem; flex-direction: column; align-items: flex-start;}
	#footer .copyright p.addP{flex-direction: column;}
	#footer .fot_left ul.fotul1 li:not(:last-child)::after{background:transparent;}
}



/******************************************************** 
■ Mouse Pointer
********************************************************/
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:9999999; pointer-events:none;}
.mouse-pointer .pointer-circle{width:3rem; height:3rem;  margin:-1.5rem 0 0 -1.5rem; border: 1px solid rgba(0,174,234,1);  border-radius: 50%; z-index: 9999; pointer-events: none; isolation: isolate;  transition: all 0.2s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0s;}
.mouse-pointer .pointer-txt{visibility: hidden; display:flex;  justify-content: center; align-items: center; color: #fff; width: 10rem; height: 10rem; margin:-5rem 0 0 -5rem; font-size: 0.75rem; text-align: center; font-weight: 400; line-height: 1.2; font-family: "Exo 2", 'Pretendard GOV', serif; text-shadow:0 0 14px rgba(0,0,0,0.1);  background-color: rgba(0,133,199,0.3);  border: 1px solid rgba(255,255,255,0.5);  backdrop-filter: blur(10px); box-shadow:0 0 20px rgba(0,0,0,0.2); border-radius: 50%;  transform: scale(0);}

.mouse-pointer.hover{}
.mouse-pointer.hover .pointer-circle{background:rgba(0,0,0,0.1); border-color:rgba(0,174,234,0.1); mix-blend-mode:difference;}
.mouse-pointer.more{}
.mouse-pointer.more .pointer-circle{display:none;}
.mouse-pointer.more .pointer-txt{visibility: visible;  transform: scale(1);}
.mouse-pointer.none{display:none;}


@media (max-width:1024px){
	.mouse-pointer{display:none;}
}

/********************************************************
■ 팝업 롤링
********************************************************/
.layerPopup {position:absolute;top:230px;left:10rem; width:450px; background:#fff;line-height:auto;z-index:99999;border:10px solid #15334F;box-shadow:0 0 4px rgba(0,0,0,0.2); padding-bottom:40px;}
.layerPopWrap{position:relative; width:100%; height:100%;}
.layerPopup ul li img{width:100%;}

@media (max-width:1030px){
	.layerPopup {left:50% !important;  transform:translateX(-50%);}
}
@media (max-width:768px){
	/* 추가*/
	.mobile_dim{width: 100%; height:100%; position: absolute; top: 0; left: 0; margin: 0; z-index: 1039; display: inline-block; background: rgba(0,0,0,0.5);}
	.layerPopup img{width:100% !important;}
	.layerPopup {left:5% !important;  transform:translateX(0%); width:90% !important; height:auto !important; top:130px;}
	.chkvsb{font-size:0.7rem !important;}
}

/********************************************************
■ 높은 해상도 대비
********************************************************/

@media (min-width:2100px){
	html{font-size:22px;}
}
@media (min-width:2400px){
	html{font-size:25px;}
}
@media (min-width:2550px){
	html{font-size:26.5px;}
}
@media (min-width:2880px){
	html{font-size:30px;}
}
@media (min-width:3840px){
	html{font-size:40px;}
}
@media (min-width:5640px){
	html{font-size:59px;}
}
@media (min-width:7640px){
	html{font-size:79px;}
}


/********************************************************
■ 팝업 - (메인 로그인관련팝업//PRIDE공유대학 기준)
********************************************************/
.con_pop{background: rgba(0, 0, 0, .6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;}
.con_pop .popin{width: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);  text-align: center; z-index: 100; border-radius: 1rem; overflow:hidden;}
.con_pop .popin h3{color: #fff; background: #3B4481;  padding:0 1rem; font-size: 1.2rem; font-weight: 500; height: 2.5rem; line-height: 2.6rem; }
.con_pop .popin .txt{padding: 1.5rem 2rem; font-size: 0.9rem; line-height: 1.5;background: #fff; }
.con_pop .popin table{border-top: 2px solid #333; margin-top: 0.75rem;}
.con_pop .popin table th{background-color: #f9f9f9; border-bottom: 1px solid #e9e9e9; vertical-align: middle; text-align: center;}
.con_pop .popin table td{color: #666;  padding: 10px 15px; vertical-align: middle; border-bottom: 1px solid #e9e9e9;}

.con_pop .bottom_button{display: flex; width:100%; position:relative; z-index:10;}
.con_pop .bottom_button a{flex-basis: 50%; display: block; height: 3rem; line-height: 3rem; font-size: 0.9rem;  background: #eee; color: #111;}
.con_pop .bottom_button a.confirm{background: linear-gradient(45deg, #6d5bf2, #5c309d 30%, #5c309d 70%, #6d5bf2); color: #fff;}
.con_pop .bottom_button a.w100{flex-basis: 100%;}

.con_pop .close{position: absolute; right: 1rem; top: 12px;}
.con_pop .close a{color: #fff; font-size: 1.2rem;}
.con_pop .close span{font-size: 0;}

.con_pop .popin h4{font-size:1.4rem;  color:#333; border-bottom:1px solid #ddd; padding-bottom:1rem; margin-bottom:1rem;}
.con_pop .popin h4 b{font-weight:bold; color:var(--sub);}
.con_pop .popin h4 img{margin-bottom:10px;}
.con_pop .popin .bg span{position:relative; color:#3b4481; font-weight:bold;}
.con_pop .popin .bg span:before{content: ''; display: block; position: absolute; width: 100%; height: 50%; background: rgba(59,68,129,0.1); left: 0; bottom:0;}
.con_pop .popin .logo img{width:10rem; margin-top:0.5rem;}
.con_pop .popin b{font-weight:bold;}
.con_pop .alert img{margin-bottom:10px; width:10rem;}
.con_pop .alert h4{color:#212121;}
.con_pop small{ z-index: 1;  position: relative; margin-top:0.5rem; display:block;}

.con_pop .popin h5{font-size:1.2rem;  color:#333;margin-top:1rem;}
.con_pop .popin .bg{margin-top:1.5rem; padding:1.5rem 0 0; position:relative; color:#333; z-index:0;}
.con_pop .popin .bg:before{ content : ""; display : block; position : absolute; left :-50%; top:0; width : 200%; height : 20rem; background : #f0f2ff; z-index:-1;}
.con_pop .popin .cen_button{margin-bottom:1.5rem;position:relative; z-index:10;}
.con_pop .popin .cen_button a{display:block; width:8rem; margin:0 auto; height:2.3rem; line-height:2.3rem; background:#38387f; color:#fff; border-radius:0.5rem;}

ul.dot li{margin-bottom:5px; position: relative; padding-left:15px;  text-align:left;}
ul.dot li:before{ content : ""; display : block; position : absolute; left :0; top:0.5em; width : 6px; height : 6px; background : #666; border-radius:50%; }

/*비밀변경팝업*/
#editPass p span{color:var(--sub);}
#editPass ul li{display:flex; align-items: center}
#editPass ul li:not(:first-child){margin-top:0.5rem;}
#editPass ul li label{width:7rem; flex-shrink: 0; text-align: left;  font-weight: 600;}
#editPass ul li input{ height: 2.2rem; background: #fff url(/images/default/main/icon_pw.svg) no-repeat right 0.75rem top 50%; background-size: 1.2rem 1.2rem;}

@media (max-width: 768px){
	.con_pop .popin{width: 90%; margin: 0 auto;}
	.con_pop .popin .txt{padding:1.5rem 1rem;}
}