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

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

.inner1480 {width:74rem; margin: 0 auto; padding-top:10rem;}
.inner1280 {width:64rem; margin: 0 auto; padding-top:10rem;}
.TT {font-family: 'TTwelcome', 'sans-serif';}


/*세팅*/
:root{
	--main: #1378bc;
	--sub01: #ff6000;
	--sub02: #486be8;
	--sub03: #f87256;
	--sub04: #f4a51d;
	--height:calc(var(--vh, 1vh) * 100);
}
@media (max-width:1480px){
	.inner1480 {width:100%; padding:5rem 1rem 0;}
}
@media (max-width:1280px){
	.inner1280 {width:100%; padding:5rem 1rem 0;}
}
@media (max-width:1024px){
	html{font-size:17px;}
    body{font-size:1rem}
	#wrap{font-size:1rem;}
	.tablet{display:block;} /*태블릿 부터 바뀜*/
	.web{display:none;} /*태블릿*/
}

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

/********************************************************
■ 헤더
********************************************************/
#header{width:100%; position:absolute; top:0; left:0; z-index: 9999;}
#header .header_inner {display: flex; align-items: center;justify-content: space-between; width:74rem; height: 5.5rem; margin:0 auto;}
#header .header_inner .logo img {width:12.1rem;}


/*-----언어별-----*/
.lang {position:relative;}
.select_btn{display:flex; align-items: center; gap:0.5rem; position:relative; color:#fff;}
.select_btn img {width:1.2rem; height:1.2rem;}
.option_list { display:none; position: absolute;  top: 2rem;  right:0; z-index:1000; background: #fff;  padding: 0.75rem 1.65rem;}
.option_list:after {position: absolute; top: 0; left: 50%; content: ""; display: block;  width: 0px;  height: 0px;  margin-top: -0.2rem;  margin-left: -0.15rem;  border-left: 0.3rem solid transparent; border-right: 0.3rem solid transparent;  border-bottom: 0.3rem solid #fff; transform:translate(-50%,0);}
.option_list li { margin-top: 0.25rem;}
.option_list li a { display: block;  font-size: 0.75rem;  color: #353535;  font-weight:600;}
.option_list li a:hover { text-decoration: underline !important; color:var(--main);}
.option_list li:first-child { margin-top: 0;}


@media (max-width:1480px){
	#header .header_inner{width: 100%; padding:0 1rem;}
	#header .header_inner #nav ul li a {font-size: .9rem; padding: 0 1.5rem;}
}

@media (max-width:1030px){
	#header h1 img {width: 6rem;}
	#header .header_inner {height: 4rem;}

	/*언어*/
	.option_list{top:3rem; right:0;}

	/*-----사이트맵 버튼-----*/
	#header .btn-gnb-menu{width: 4rem; height: 4rem;}
}

@media (max-width:767px){
	/*탑메뉴*/
	#header .header_inner{height:3.6rem;}
	#header .header_inner .logo img {width:10rem;}
	#header #navi:after{height:3.6rem;}
	#menuAll .mobile_top{margin-top:3.6rem;}
	#header .btn-gnb-menu{width:3.6rem; height:3.6rem;}
	.select_btn {color:#010101;}
	.select_btn img {content:url("/images/default/main/lang_b.svg");}
}



/********************************************************
■ 푸터
********************************************************/
#footer{clear:both; padding:2rem 0 3rem; color:#000; font-weight:500; background: #e5e5e5; z-index:1;}
#footer .inner {width:74rem; margin: 0 auto; display:flex; gap:1rem 2.25rem; position:relative;}

#footer .ft_logo img {width:12.1rem;}
#footer .ft_add ul {display:flex; gap:0.1rem 0.75rem; flex-wrap:wrap;}
#footer .ft_add ul li {position:relative;}
#footer .ft_add ul li:not(:last-child):after {content:'/'; display:block; position:absolute; top:0; right:-0.5rem;}

#footer .ft_right {display:flex; gap: 0 2.75rem; align-items: center; position:absolute; top:0; right:0;}
#footer .ft_right .top {display: flex; align-items: center; justify-content: center; width:3rem; height:auto; aspect-ratio:1; background:#3a88c1; border-radius:100%; color:#fff; font-size:2rem;}

#footer .ft_sns {display:flex; gap: 0.5rem 0.85rem;}
#footer .ft_sns > li {width:1.5rem;}
#footer .ft_sns > li img {width:100%;}
#footer .copy{margin-top:2rem;text-transform:uppercase; color:#AEAEAE;}


@media (max-width:1480px){
	#footer .inner {width:100%; padding: 0 1rem; flex-direction:column;}
	#footer .ft_right {gap:0 1.5rem; right:1rem;}
}
@media (max-width:767px){
	#footer {font-size:0.9rem;}
	#footer .inner {align-items: center; text-align:center;}
	#footer .ft_add ul {flex-direction:column;}
	#footer .ft_add ul li:not(:last-child):after {display:none;}

	#footer .ft_right {position:static;}
	#footer .ft_right .top {width:2rem; font-size:1.5rem;}
}

/********************************************************
■ 팝업 롤링
********************************************************/
.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:767px){
	/* 추가*/
	.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: 767px){
	.con_pop .popin{width: 90%; margin: 0 auto;}
	.con_pop .popin .txt{padding:1.5rem 1rem;}
}