/**************************************************
* 버전관리
* 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: 1rem; min-width:320px;}
#wrap img { border:none; }
#wrap i{vertical-align:middle;}
.no-scroll {height:100dvh; overflow:hidden;}

/*-----폰트 설정-----*/

/* 포인트 폰트 */
.Oswald {font-family: 'Oswald', serif;}
.Paperlogy {font-family: 'Paperlogy', serif;}
.pretendard {font-family:'Pretendard GOV', serif}


/* 폰트 사이즈 */
.fs60 {font-size: clamp(2.489rem, 2.386rem + 0.639vw, 3rem);}
.fs57 {font-size:2.85rem}
.fs52 {font-size:2.6rem}
.fs50 {font-size:2.5rem}
.fs45 {font-size: clamp(1.728rem, 1.624rem + 0.652vw, 2.25rem);}
.fs42 {font-size: clamp(2.074rem, 2.068rem + 0.033vw, 2.1rem);}
.fs40 {font-size: clamp(1.728rem, 1.674rem + 0.34vw, 2rem);}
.fs35 {font-size: clamp(1.44rem, 1.378rem + 0.388vw, 1.75rem);}
.fs30 {font-size: clamp(1.44rem, 1.428rem + 0.075vw, 1.5rem);}
.fs25 {font-size: clamp(1.2rem, 1.19rem + 0.063vw, 1.25rem);}
.fs20 {font-size: 1rem;}
.fs17 {font-size:0.85rem}


/*-----컬러 및 기타 설정-----*/
:root{
	--main: #FF8600;
	--lmain: #FFF5EA;
	--dmain: #EC7D01;
	--sub: #1c86b6;
	--gradiant: linear-gradient(153.435deg, #EF7E00 0%, #D85600 100%);
	--black: #121212;
	--gray33: #333;
	--gray6A: #6a6a6a;
	--gray99: #999;
	--brown: #7F2800;
	--basic_trans: 0.3s cubic-bezier(0.79,0.14,0.15,0.86);
	--inn-width:1640px;
}


@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;}

	/* 폰트 사이즈 */
	.fs57 {font-size:3.35rem}
	.fs52 {font-size:3.05rem}
	.fs50 {font-size:2.94rem}
	.fs20 {font-size: 1.11rem;}
	.fs17 {font-size:1rem}
}
@media (max-width:390px){
	/* -----공통----- */
	html{font-size: 15px;}
    body{font-size: 1rem}
}

/********************************************************
■ 헤더
********************************************************/
#header{position: absolute; top:0; left: 0; width:100%;  z-index:200;-webkit-transition:all .3s;transition:all .3s; background:transparent; border-bottom:1px solid rgba(255,255,255,0.3);}
#header h1 img{width:10rem; transition: all 0.3s;}
#header .header_inner{display:flex;  align-items: center; justify-content: space-between; max-width:84rem; padding:0 1rem; height:5rem; margin: 0 auto; position: relative; transition: all 0.2s ease 0s;}
#header .lang ul{display:flex;  font-size: 0.85rem; font-weight: 800;} 
#header .lang ul li a{color:#fff; opacity:0.5;}
#header .lang ul li + li{position:relative; margin-left:0.8rem; padding-left:0.8rem;}
#header .lang ul li + li:before{content:""; position:absolute; left:0px; top:0.3em; width:1px; height:0.8em; background:#fff;}
#header .lang ul li.on a{opacity:1;text-decoration:underline;text-underline-position: under; }

/*-----네비게이션-----*/
#header .header_inner #nav {display: flex; align-items: center; position:absolute; top:50%; right: 6.75rem; transform:translate(0,-50%); transition: all 0.2s ease 0s; }
#header .header_inner #nav > ul {clear:both; position:relative; box-sizing:border-box;height:100%;}
#header .header_inner #nav ul li { display:inline-block;width: auto; float:none; vertical-align:top; position:relative;}
#header .header_inner #nav ul li > div > a {text-align: center;  color: #fff;  font-size: 1rem; font-weight: 600; display: inline-block;  height: 100%;  line-height: 5.5rem;  position: relative;   padding: 0px 2.5rem;  transition: all 0.2s ease 0s;}
#header .header_inner #nav ul li > div > a:after {content:""; display:block; width: 2.2rem; height:13px;  position:absolute; bottom:0; left:50%; transition: all 0.3s; background:url('/images/default/main/menu_arr.svg') no-repeat 0 center;  opacity:0; transform: translate(-50%,0) scaleX(0);}
#header .header_inner #nav ul li.on > div > a:after {opacity:1; transform: translate(-50%,0) scaleX(1);}
#header .header_inner #nav ul li.active > div > a{color:var(--main);}

/*탑메뉴 2차*/
#header .header_inner #nav ul li ul {z-index: 100; display:none; position: absolute;  width:100%; height: auto; left:0; top:calc(5.5rem + 2rem); box-sizing:border-box; padding:0 0.5rem;   border-top:none; text-align:center;}
#header .header_inner #nav strong{font-weight:500; color:var(--main);}
#header .header_inner #nav ul li ul li {display:block;}
#header .header_inner #nav ul li ul li:not(:first-child) {margin-top:1.5rem;}
#header .header_inner #nav ul li ul li a{ display:block; text-align:center; transition: 0.3s;  color:rgba(18,18,18,0.6);  font-weight:400; font-size:0.9rem; line-height:1.3; padding:0; position:relative; text-indent: -0.7rem;}
#header .header_inner #nav ul li ul li a span{transition: all 0.3s ease;}
#header .header_inner #nav ul li ul li a:before{content:""; display:inline-block; margin-right:0.2rem; flex-shrink: 0; width:0rem; height:0.7rem;  background:url('/images/default/main/menu_a.svg') no-repeat 0 0; background-size:0.7rem auto;  transition: width 0.3s;}
#header .header_inner #nav ul li ul li a:hover{color:var(--main);}
#header .header_inner #nav ul li ul li a:hover:before,
#header .header_inner #nav ul li ul li a:has(strong):before{width:0.7rem; }
#header .header_inner #nav ul li ul li a:hover span{position:relative; padding-left:1.1rem; background:url('/images/default/main/menu_arr.svg') no-repeat 0 center; background-size:0.75rem auto;}


.bg_box{display:none; position: absolute; width: 100%; height: 20rem; top:0; left:0; box-sizing:border-box; z-index:-1;}
.bg_box:before {content:''; display:block; width:100%; height:100%; background:url('/images/default/main/gnb_bg.svg') no-repeat center top; background-size: cover; position:absolute; top:0; left:0; z-index:-4;}
.bg_box .bg_box_img{width: var(--inn-width); margin: 0 auto; height: 100%; position: relative;  display: flex;  flex-direction: column;  align-items: flex-start; color: #fff; z-index:0;}
.bg_box .deco{position: absolute; right:0; bottom: -1.2rem;}


/* 헤더 오버스크롤 */
#header.over h1 img{content:url('/images/default/main/logo_b.svg?v=1')}
#header.over .header_inner {position:relative;}
#header.over .header_inner:before {content:""; display:block; width: 100vw; height:1px;  position:absolute; bottom:0; left:50%;  transform:translateX(-50%); background:rgba(255,255,255,0.3);}
#header.over .header_inner #nav ul li:nth-child(-n+2) > div > a{padding: 0px 4rem;}
#header.over .header_inner #nav ul li > div > a{color:#000;  }
#header .header_inner #nav ul li > div > a:hover,
#header.over .header_inner #nav ul li.on > div > a{color:var(--main);}
#header.over .lang ul li a{color:#000;}
#header.over .lang ul li + li:before{background:#000;}


/*검색창*/
.seachBtn{width: 1.75rem; aspect-ratio: 1; border-radius: 1rem; vertical-align: middle; background: var(--main) url('/images/default/main/icon_search.svg')no-repeat 50% 50%; background-size:0.8rem; font-size:0; }
.search_area{position: fixed; left: 0px;  top: -100%; width: 100%; height: 10rem;  padding: 0 1rem;  font-size: 1rem;  background: #fff;  border-top: 1px solid #ddd; transition: all 0.45s;  z-index: 400;}
.search_area form{ width:44rem; height:100%; display: flex;  align-items: center; justify-content: center; margin:0 auto;}
.search_area form fieldset{display: flex;  align-items: center; width: 100%;}
.search_area .search_input_wrap{ display: flex;  align-items: center; width:100%;  height:100%;}
.search_area .search_input_wrap .typeahead__field{position:relative; width: 100%;}
.search_area .search_input_wrap .typeahead__field .insearch{width:100%; border:none; border-bottom:2px solid var(--black); height:3rem; padding: 0 2rem 0 0.5rem;} 
.search_area .search_input_wrap .typeahead__field .typeahead__cancel-button{display:inline-block; top:1.1em; right: 0; width:1.5rem; height:1.5rem; line-height:1.5rem; text-align:center; padding:0; background:#ecf5fc; color: #17639f; border-radius:50%; font-size: 1.1rem;}
.search_area form fieldset .closeBtn{margin-left:1rem; font-size:2rem; color:var(--black); cursor:pointer; }
.search_area .typeahead__container.result .typeahead__list{top:3rem; padding:0;}
.search_area.open{top: 0;  }




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



@media (max-width:1440px){
	#header .header_inner {width:100%; padding: 0 1rem;}
	#header .header_inner #nav ul {gap: 1rem;}
	#header .header_inner #nav > ul > li > div > a {font-size: 0.85rem; padding: 0 1rem;}
	#header.over .header_inner #nav ul li:nth-child(-n+2) > div > a{padding: 0px 1.5rem;}
	#header .header_inner #nav ul > li > ul > li > a {font-size:0.8rem;}
	.bg_box .bg_box_img {width:100%; padding: 0 1rem;}
}
@media (max-width:1024px){ 
	#header h1 img{width: 8rem;} 
	#header .header_inner {height: 4rem; padding-right:0;}
	#header .header_inner #nav {right: 9.75rem;}
	#header .header_inner #nav > ul  {display:none;}
	#header .header_r{display:flex; justify-content: flex-end; align-items: center; gap:1rem;}
	#header .lang ul{font-size:1rem;}
	#header .btn-gnb-menu {display:block;}
}


/*사이트맵*/
#header.open #menuAll {display:none;}
#header #navi{ position:fixed; top:0; right:0; display: flex; width:100%; height:100%; padding-top:0; overflow:hidden;  z-index:100; opacity:0; visibility: hidden; transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);   }
#header.open #navi {background: rgba(42,25,16,0.9 ); box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );opacity:1; visibility: visible;  overflow-y: scroll; backdrop-filter: blur(5px);}

#menuAll .navi_addr{width:15rem; padding:0 1rem 2rem; display: flex;  color: #fff; opacity:0.7; flex-direction: column;  justify-content: flex-end; font-size:0.7rem; }
#menuAll .navi_addr p.word1{font-weight:600;     margin-bottom: 0.5rem;}
#menuAll .navi_addr p.word3{margin-bottom:1rem;}
#menuAll .navi_addr a{color:#fff; margin-top: 0.5rem;}

#menuAll .mobile_top{width:calc(100% - 20rem); height:100%; position:relative; display: flex; flex-direction: column;}
#menuAll .mobile_top .mbtop{width: 100%; height:100%; margin-top:4rem; padding:3rem 0; overflow-y:auto;}
#menuAll .mobile_top .mbtop > li{display: flex; align-items: center; overflow:hidden;}
#menuAll .mobile_top .mbtop > li + li{ margin-top:3rem;}
#menuAll .mobile_top ul li > a{display:block;  line-height:1; font-size:3rem; font-weight: 700; color:#fff; position:relative; transform: translate3d(0%, 150%, 0px); transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98); text-transform:uppercase;}
#menuAll .mobile_top ul li > a:before{content:'';display:inline-block; position:relative; height:7px; width:0; margin-right:0.5rem; transition: all 0.2s ease-out 0s; background:#fff; }
#menuAll .mobile_top ul li > a:hover:before{width:60px;}
#menuAll .mobile_top ul li ul{margin-left: 2rem;  display:flex; gap:0.5rem 1rem; flex-wrap:wrap; transform: translate3d(0%, 150%, 0px); transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);}
#menuAll .mobile_top ul li ul li a{ display:block; background:none;font-size:.9rem; font-weight:500; text-align: left; padding:0; color:#fff; opacity: 0.8; white-space: nowrap; transition: all 0.3s;}
#menuAll .mobile_top ul li ul li a:hover {opacity:1;}
#menuAll .mobile_top ul li ul li a:before{display:none; margin-right:0;}
#menuAll .mobile_top ul li ul li ul{display:none !important;}
#menuAll .mobile_top .mbtop::-webkit-scrollbar {width:5px;height:3px;background-color:#111;;}
#menuAll .mobile_top .mbtop::-webkit-scrollbar-thumb {background-color:var(--bora); -webkit-border-radius:3px;border-radius:3px;}

#menuAll .mobile_top ul li.open_li.on > ul li a strong{color:var(--bora);}
#menuAll .mobile_top ul li.open_li.on > a{color:#999; }
#menuAll .mobile_top ul li.open_li.on > a strong{font-weight:700;}
#menuAll .mobile_top ul li.open_li.on > a:before{width:60px; background:#999;}

#header.open #menuAll .mobile_top .mbtop > li a{transform: translate3d(0%, 0%, 0px);}
#header.open #menuAll .mobile_top .mbtop > li a:hover {color:#fff;}
#header.open #menuAll .mobile_top .mbtop > li ul{transform: translate3d(0%, 0%, 0px);}
#header.open #menuAll .mobile_top .mbtop > li:nth-child(1) a,
#header.open #menuAll .mobile_top .mbtop > li:nth-child(1) ul{transition-delay: .3s;}
#header.open #menuAll .mobile_top .mbtop > li:nth-child(2) a,
#header.open #menuAll .mobile_top .mbtop > li:nth-child(2) ul{transition-delay: .4s;}
#header.open #menuAll .mobile_top .mbtop > li:nth-child(3) a,
#header.open #menuAll .mobile_top .mbtop > li:nth-child(3) ul{transition-delay: .5s;}
#header.open #menuAll .mobile_top .mbtop > li:nth-child(4) a,
#header.open #menuAll .mobile_top .mbtop > li:nth-child(4) ul{transition-delay: .6s;}
#header.open #menuAll .mobile_top .mbtop > li:nth-child(5) a,
#header.open #menuAll .mobile_top .mbtop > li:nth-child(5) ul{transition-delay: .7s;}

.navi_contact{position:absolute; right:2rem; bottom:2rem;}
.navi_contact a{position:relative; display: flex; align-items: center;  justify-content: center; color:var(--main);  font-size:1.5rem; width:5rem; height:5rem; background:#fff; border-radius:50%;cursor:pointer; z-index:1;}
.navi_contact svg{animation: roll 14s infinite linear;    transition: all 0.3s; fill: #fff;  position: absolute;  height: auto;  width: 180%;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}
@keyframes roll {
	0% {transform: translate(-50%, -50%) rotate(0deg) ;}
	100% {transform: translate(-50%, -50%) rotate(-360deg);}
}

@media (max-width:1640px){
	#menuAll .mobile_top ul li ul {margin-left:0;}
	#menuAll .mobile_top .mbtop > li {flex-direction: column;  align-items: flex-start; gap: 0.5rem;}
}
@media (max-width:1030px){
	#header.open #menuAll {display:block;}
	#header #navi{flex-direction: column; }
	#menuAll .navi_addr{width:100%; order:2; padding: 0 1rem 1rem; font-size: 0.85rem;margin-top: 3rem;}
	#menuAll .mobile_top{margin-top:5rem;}
	#menuAll .mobile_top{width:100%; order:1;  }
	#menuAll .mobile_top .mbtop{margin-top:0; padding:0 1rem; width:auto;}
	#menuAll .mobile_top .mbtop > li{flex-direction: column; align-items: flex-start;}
	#menuAll .mobile_top .mbtop > li + li{margin-top: 2rem;}
	#menuAll .mobile_top .mbtop > li:not(.nosub) > a:after{content: "\ea4e";  display:block;position:absolute; right:0; top:0px; font-size:1.5rem;  font-family: 'remixicon' !important; color:#fff;}
	#menuAll .mobile_top ul li > a{font-size:1.41rem; width: 100%;}
	#menuAll .mobile_top ul li ul{display:none; margin-top:1rem; margin-left:0.5rem;}
	#menuAll .mobile_top ul li.open_li ul{display:block;}
	#menuAll .mobile_top ul li ul li{margin-left:0;}
	#menuAll .mobile_top ul li ul li a{ padding:0.5rem 0; font-size:1.1rem;}
	#menuAll .mobile_top ul li ul li a:hover{color:#fff;}

	.navi_contact{right:1rem; bottom:1rem;}
}


/********************************************************
■ 푸터
********************************************************/
	#footer .quick_menu { display: flex; align-items: center; justify-content: center; gap:0 1.25rem; height:100%;}
	#footer .quick_menu li a {display:flex; align-items: center; justify-content: center; width:clamp(2.2rem, 1.98rem + 1.375vw, 3.3rem); border-radius: 100%; aspect-ratio: 1;  transition: all 0.3s; background: rgba(255, 255, 255, 0.25); transition: background 0.4s ease-out 0s;}
	#footer .quick_menu li a img {width: 55%;}
	#footer .quick_menu li a:hover{background: rgba(255, 255, 255, 0.5);}

	#footer{position: relative; color:#fff; font-size:0.85rem; background: #262728;z-index:1; font-weight:600;}
	#footer .inn{display:flex; align-items: center; justify-content: space-between; flex-wrap: wrap;gap: 1rem 0; position: relative; max-width:84rem; margin:0 auto; padding:clamp(4rem, 3.9rem + 0.625vw, 4.5rem) 1rem;}

	#footer .ft_left {display:flex;  flex-wrap: wrap; gap: clamp(1.6rem, 1.52rem + 0.5vw, 2rem);}
	#footer .ft_left .ft_logo img {width:10rem;}
	#footer .ft_add li{display:flex; flex-wrap:wrap; align-items: center;}
	#footer .ft_add li + li{margin-top:0.5rem;}
	#footer .ft_add li a,
	#footer .ft_add li p{font-weight: 400; color:#fff; padding-left:0.2rem;}
	#footer .ft_add li span{width:2rem; flex-shrink: 0;}
	#footer .ft_right{position: static; display:flex; gap: clamp(1.2rem, 1.14rem + 0.375vw, 1.5rem); align-self: flex-end; font-size: 2.85rem; font-weight: 700; text-align:right;}
	#footer .ft_right p{display:flex; justify-content: flex-end; align-items: flex-end; gap:0 1.5rem;  line-height: 1;}
	#footer .ft_right p + p{margin-top:1.5rem;}
	#footer .ft_right span{position: relative; display:inline-block; height:4rem; }
	#footer .ft_right span:before{content:""; position:absolute; left:0px; bottom:0px; width:100%;  background-size:cover; background-repeat:no-repeat; background-position:0 bottom;}
	#footer .ft_right .img1{aspect-ratio: 16.05/4;}
	#footer .ft_right .img1:before{aspect-ratio: 321/177; background-image: url('/images/default/main/foot_img01.webp')}
	#footer .ft_right .img2{aspect-ratio: 14/4;}
	#footer .ft_right .img2:before{aspect-ratio: 280/98; background-image: url('/images/default/main/foot_img02.webp')}
	#footer .copy{color:#fff; text-align: right; font-size: 0.75rem;font-weight: 300;  opacity: 0.8; border:none; padding:0;}

	#footer .topBtn{position:absolute; bottom: clamp(4rem, 3.9rem + 0.625vw, 4.5rem); right: -4.5rem; display: flex; align-items: center;  justify-content: center; width:clamp(2.4rem, 1.98rem + 2.625vw, 4.5rem);  aspect-ratio: 1; text-align:center; background:#FFF5EA; border-radius: 0.2rem; color: #EF7E00; font-size: 1rem; font-weight: 700; z-index:2; box-shadow:0 0 10px rgba(0,0,0,0.1);}

	@media (max-width:1860px){ 
		#footer .inn {padding-right: 6rem;}
		#footer .topBtn {right:1rem;}
	}
	@media (max-width:1440px){ 
		#footer .ft_right{font-size: 2rem;  }
		#footer .ft_right span{height:2.5rem;}
	}
	@media (max-width:1324px){ 
		#footer .topBtn {bottom: calc(clamp(4rem, 3.9rem + 0.625vw, 4.5rem) + 1rem);}
	}
	@media (max-width:1024px){ 
		#footer .inn {padding-right:1rem;}
		#footer .ft_top .ft_logo img {width:8rem;}
		#footer .topBtn{position:fixed; right:1rem; bottom: 1rem; width: 2.5rem;  font-size: 0.8rem;}
	}
	@media (max-width:768px){ 
		#footer{font-size:0.95rem;}
		#footer .inn {flex-direction: column; gap: 1.5rem 0;}
		#footer .ft_left {flex-direction: column;text-align: center; justify-content: center; align-items: center;}	
		#footer .ft_add li {justify-content: center;}
		#footer .ft_right{position:relative; right:auto; top:auto; margin-bottom:0; width: 100%;  justify-content: center;font-size:6.5vw;}
		#footer .ft_right p{justify-content: flex-start; gap:0 1vh;}
		#footer .ft_right p:first-child{justify-content: flex-end;}
		#footer .ft_right p:last-child{justify-content:  space-between;}
		#footer .ft_right span{height:3.7vh;}
		#footer .copy {text-align:center}
	}
	@media (max-width:450px){ 
		
	}
	@media (max-width:390px){ 
		#footer .ft_right{font-size:7.7vw;}
	}

/********************************************************
■ 팝업 롤링
********************************************************/
.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('https://dgsmidc.negagea.kr/hive/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;}
}

/*-----준비중 팝업-----*/
.modalCon { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; }
.modalCon.open { display: block; animation: fadeIn 1s ease both; }
.modalCon .bg { position: absolute; width: 100%; height: 100%; top: -100%; left: 0; background: rgba(0, 0, 0, .7); transition: .4s ease;}
.modalCon.open .bg { top: 0 !important;}
.modalCon .m-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.modalCon .closeBtn { position: absolute; top: calc(100% + .9rem); left: 50%; transform: translateX(-50%); }
.modalCon .closeBtn .icon { width: 32px; height: 32px; background: url(../../images/ico_close_white.svg) no-repeat center / contain; transition: .5s ease; }
.modalCon .boxWrap { position: relative; background: #fff; opacity: 0; transform: scale(.8); transition: .5s ease; max-width: 640px; width: 90%;}
.modalCon.open .boxWrap { opacity: 1; transition-delay: .3s; transform: none; }
.modalCon .boxWrap .box { width: 100%; height: 100%; padding: 1.5rem; box-sizing: border-box; height: auto; overflow-y: auto; max-height: calc(90vh - 4rem); }
.modalCon .boxWrap .box .clickBtn {width: 100%; background: #2B1910; height: 3rem; border-radius:0.4rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem; transition: .5s ease; }
.comingsoonModal .boxWrap { max-width: 23rem; color: #000; border-radius: 1.7rem 1.7rem 1rem 1rem; position:relative; z-index: 0;}
.comingsoonModal .boxWrap:after {content:''; display:block; width:calc(100% - 0.4rem); height:10rem; border-radius:100%; border: 4px solid var(--dmain); height: 10rem;position: absolute; top: -5rem; left: 50%; transform: translateX(-50%); background: #fff; z-index: -1;}
.comingsoonModal .boxWrap .box { display: flex; flex-direction: column; gap: 1.35rem; align-items: center; text-align: center; padding: 3.2rem 2.25rem  1.7rem; position: relative; background: #fff url('/images/default/content/bg_article1.svg') no-repeat right -30% bottom -80%;  background-size: 50% auto; background-blend-mode: difference; border: 4px solid var(--dmain); border-top: none; border-radius:0 0 1rem 1rem; overflow: visible;}
.comingsoonModal .boxWrap .box .img {position: absolute; bottom: 10.5rem; left: 50%;  transform: translateX(-50%);}
.comingsoonModal .boxWrap .box .img img {width:10.7rem; opacity: 0; }
.comingsoonModal.open .boxWrap .box .img img { animation: scaleMove 1s .1s ease both; }
.comingsoonModal .boxWrap .box .textBox { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; align-items: flex-start; gap: .4rem; }
.comingsoonModal .boxWrap .box .textBox .title { font-size: 1.35rem; font-weight: 600; color: var(--black); line-height: 1; margin:0;}
.comingsoonModal .boxWrap .box .textBox .text { font-size: 0.85rem; font-weight: 400; }
.comingsoonModal.open .boxWrap .box .textBox { animation: upMove 1s .1s ease both; }
.comingsoonModal.open .boxWrap .box .clickBtn { animation: scaleMove 1s .3s ease both; }


@keyframes scaleMove {
    0% {
        transform: scale(.8);
        opacity: 0;
    }

    100% {
        transform: none;
        opacity: 1;
    }
}
@keyframes scaleZoomMove {
    0% {
        transform: scale(1.1);
    }
}
@keyframes upMove {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: none;
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width:768px){
	/*-----준비중 팝업-----*/
	.comingsoonModal .boxWrap .box {padding-left:2rem; padding-right:2rem;}
	.comingsoonModal .boxWrap .box .textBox .title {font-size:1.47rem}
	.comingsoonModal .boxWrap .box .textBox .text {font-size:1rem;}
}