/********************************************************
■ 공통
********************************************************/
html, body { max-width: 100%;}
html{font-size:20px;}
body{font-size:1rem;}
body {
	/* overflow: hidden; */
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
.web{display: block}
.tablet,
.mob{display: none;}

#wrap{position: relative; overflow: hidden; line-height: 1.3; font-size:0.9rem; width: 100%;}
#wrap img { border: none; max-width:100%;}
#wrap i{vertical-align: middle;}

/* 레이어팝업 강제 Body 스크롤방지 */
.scrollOff {position: fixed; overflow: hidden; height: 100%; width: 100%;}

:root {
	--main: #FF821E;
	--black:#121212;
	--red:#cf1e00;
	--green:#29a760;
	--green2:#5EA16C;
	--lorange:#FFFAF5;
	--lgray:#F0F0F0;
	--lgray2:#F3F3F3;
	--lgray3:#F5F5F5;
	--lgray4:#E8E8E8;
	--lgray5:#ededed;
	--lgray6:#D9D9D9;
	--lgray7:#c5c5c5;

	
	--gray2:#222;
	--gray3:#353535;
	--gray4:#444;
	--gray5:#555;
	--gray6:#656565;
	--gray7:#777;
	--gray8:#888;
	--gray9:#999;
	--bg-orange: #FF821E url('../images/default/main/bg_orange.jpg')repeat 0 0;
	--bg-black: #212121 url('../images/default/main/bg_black.jpg')repeat 0 0;
	--bg-gray: #F4F4F4 url('../images/default/main/bg_gray.jpg')repeat 0 0;
	--bg-lgray: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url(../images/default/main/bg_gray.jpg)repeat 0 0;
	--gr-orange:linear-gradient(rgba(255,130,30,1), rgba(255,130,30,0));
	--bg-logo:#FFF8F1 url('../images/default/main/bg-logo.svg')no-repeat right bottom -40px;
	
}
@media all and (max-width:1340px){
	/* -----공통----- */
	html{font-size: 19px;}
    body{font-size: 1rem}
}

@media all and (max-width:1030px){
	/* -----공통----- */
	html{font-size: 17px;}
    body{font-size: 1rem}
	.web{display: none}
	.tablet{display: block;}
}
@media all and (max-width: 767px){
	/* -----공통----- */
	html{font-size: 15px;}
    body{font-size: 1rem}
	.tablet{display: none;}
	.mob{display: block;}
}




/********************************************************
■ 헤더
********************************************************/
#header{position: fixed; width:100%; height:8rem; border-bottom:1px solid var(--lgray5);   z-index:105;-webkit-transition:all .3s;transition:all .3s; background-color: #fff;}

#header .inn{ position: relative; max-width:75rem; margin:0 auto; height:5.5rem; padding-left: 12rem; text-align: center;}
#header h1{
	position:absolute; 
	left:0; 
	top:50%; 
	transform:translateY(-50%); 
	-webkit-transform: translateY(-50%); 
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
#header h1 a{display: block;}
#header h1 img{height: 3rem; }

#header .gnb{background:var(--lgray3); height:2.5rem; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items: center;  justify-content: flex-end; }
#header .gnb .inner{width:75rem;margin:0 auto; text-align:right; }
#header .gnb ul{display:inline-block; font-size:0.8rem;}
#header .gnb ul li{display:inline-block; font-size:0.8rem; padding:0 1rem;}
#header .gnb ul li a{display:block;   text-align:center;}
#header .gnb ul li a:hover{color:#212121; font-weight:500;}
#header .gnb ul li b{color:var(--main);}
#header .gnb ul li:not(:first-child){border-left:1px solid var(--lgray6); }
#header .gnb .link{display:inline-flex; font-size:0.8rem; border:1px solid #959595; background:#fff; border-radius:3px;}
#header .gnb .link a{display:inline-block; line-height:1.5rem; padding:0 1.5rem 0; color:#777;}
#header .gnb .link a.on{background:rgba(0,0,0,.05); color:var(--black); font-weight:500;}
#header .gnb .link a:not(:first-child){border-left:1px solid #959595;}

/* 네비게이션 */
#header #nav {display:inline-block;}
#header #nav ul {display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display: flex; justify-content: space-between; clear:both;  position:relative; box-sizing:border-box;height:100%;}
#header #nav ul li { display:inline-block;width: auto; float:none; vertical-align:top;position:relative;}
#header #nav ul li {position:relative; }
#header #nav ul li a{text-align:center; color:var(--black); font-size:1.3rem; font-weight:600; display:inline-block; height:5.5rem; line-height:5.5rem; text-transform: uppercase; position:relative; padding:0 2rem; transition: all .2s; -webkit-transition: all .2s; }
#header #nav ul li.on > div a,
#header #nav ul li.active > div a{color:var(--main)}

/* 탑메뉴 2차 */
#header #nav ul li ul {z-index: 100; display:none; position: absolute;  width:100%; height: auto; left:0; top:5.5rem; box-sizing:border-box; padding:1.5rem 1rem;   border-top:none; text-align:center;}
#header #nav ul li ul:before{
	content: ''; 
	position: absolute; 
	left: 50%; 
	right: 0; 
	top: -1px; 
	height: 3px; 
	width: 0; 
	transform: translateX(-50%); 
	-webkit-transform: translateX(-50%); 
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transition: width 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 
	-webkit-transition: width 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 
	background-color: var(--main);
}
#header #nav ul li.on ul:before{width:100%;}
#header #nav ul li ul li {padding-bottom:1rem; display:block;}
#header #nav ul li ul li a{ display:block; text-align:center;  color:#444;  font-weight:500; font-size:1.1rem; height:auto; line-height:1.3; padding:0;}
#header #nav ul li ul li a:before{content:""; display:block; clear:both;}
#header #nav ul li ul li a:hover{color:var(--main); }
#header #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;}
#header #nav ul li.on ul{background:var(--lorange);}

/* 탑메뉴 2차 배경 */
.bg_box{margin: 0 auto !important; display: none; position: absolute; width: 100%; height: 18rem; top: 8rem; z-index: 10; box-sizing: border-box; background-color: #fff; box-sizing: border-box; box-shadow: 3px 15px 15px rgba(0,0,0,0.1);height: calc(18rem + 1px);}

/* 사이트맵 */
#header .btn-gnb-menu{ 
	display:none;/*웹일때 숨김*/
	position: absolute;
	right:1rem;
	top:50%;
	width:2rem; 
	height:0.75rem; 
	cursor:pointer; 
	z-index:9999;
	text-align:center; 
	transform:translateY(-50%);
	-webkit-transform: translateY(-50%); 
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transition: all 0.25s;
	-webkit-transition: all 0.25s; 
}
#header .btnAll {position:relative; display:block; margin:0 auto; width:100%; height:100%; outline: none; z-index:9999;}
#header .btnAll span { 
	display: inline-block; 
	width: 100%; 
	height: 0.2rem; 
	position: absolute; 
	background-color: var(--main); 
	transition: all 0.25s; 
	-webkit-transition: all 0.25s; 
}
#header .btnAll > span:nth-child(1) { top: 0; right:0; width:80%;}
#header .btnAll > span:nth-child(2) { bottom: 0; right:0; }
#header.open .btnAll > span:nth-child(1) { 
	top: 0.5rem; 
	width: 1.5rem;
	transform: rotate(-135deg); 
	-webkit-transform: rotate(-135deg); 
	-moz-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
}
#header.open .btnAll > span:nth-child(2) {
	bottom:auto; 
	top: 0.5rem; 
	width: 1.5rem;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg); 
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
}

#header #menuAll{position:relative; z-index:0}
#header #menuAll:before{
	content:''; 
	position:fixed; 
	top:0;
	right:-100%; 
	width:100%; 
	height:100vh; 
	background:rgba(0,0,0,0.6);  
	transition: right 0.2s ease-out 0s; 
	-webkit-transition: right 0.2s ease-out 0s; 
	z-index:-1;
}
#header #navi{
	position:fixed;
	top:0; 
	right:-20rem; 
	height:100vh; 
	width:20rem; 
	padding-top:0; 
	overflow:hidden; 
	z-index:20; 
	transition:right 0.45s ease-out 0s; 
	-webkit-transition: right 0.45s ease-out 0s; 
	overflow-y: auto; 
	padding:3rem 0 0;
	background:#fff; 
}

#header.open #navi{ right:0;}
#header.open #menuAll:before{right:0;}
#header #navi .gnb{display:none;}
#header.open .btn-gnb-menu{display:block; top:1.25rem; right:2rem; position: fixed; }

#menuAll .mobile_top{width: 100%; height:100%; position:relative; display:-webkit-box; padding-left:2rem; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-direction: column;}
#menuAll .mobile_top .mbtop{width: 100%; height:100%;  overflow-y:auto;}
#menuAll .mobile_top .mbtop > li{display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display: flex;  flex-direction: column; overflow:hidden; }
#menuAll .mobile_top .mbtop > li:not(:first-child){margin-top:2rem;}
#menuAll .mobile_top ul li > a{display:block;  line-height:1; font-size:1.3rem; font-weight: 600; color:var(--black); position:relative; text-transform:uppercase;}
#menuAll .mobile_top ul li > a:after{content: "\ea4c";  display: none;  position: absolute;  right: 0px;  top: 0px; font-size: 1.5rem;  font-family: 'remixicon' !important; color: var(--black);}
#menuAll .mobile_top ul li ul{margin-left: 1rem; margin-top: 1rem; }
#menuAll .mobile_top ul li ul li{ position:relative; }
#menuAll .mobile_top ul li ul li a{ display:block; background:none;font-size:1rem; line-height:2; font-weight:500; text-align: left; padding:0; color:#656565; white-space: nowrap; }
#menuAll .mobile_top ul li ul li a:after{display:none; }
#menuAll .mobile_top ul li ul li a strong{color:var(--main);}



@media all and (max-width:1540px){
	#header h1{left:1rem;}
	#header .gnb .inner{width:100%; padding:0 1rem;}
	
}
@media all and (max-width:1340px){
	#header .inn{text-align:right; }
	#header #nav ul li a{font-size:1.1rem; padding:0 1.5rem;}
	#header #nav ul li ul li a{font-size:0.9rem;}
}
@media all and (max-width:1030px){
	#header{height:4rem;}
	#header .inn{height:4rem;}
	#header h1 img{height:2.5rem;}
	
	#header .btn-gnb-menu{display:block; }
	#header.open .btn-gnb-menu{top:50%; right:1rem; position: absolute; }
	#header .gnb{display:none; }

	#header #nav{display:none;}
	#header #navi{padding:0;}
	#header #navi .gnb{display:flex; height:6rem;  margin-bottom:2rem; flex-direction: column; padding:1rem; align-items: flex-start; gap:0.5rem;}
	#header #navi .gnb ul{width:100%; text-align:left; padding:0 1rem;}
	#header #navi .gnb ul li{font-size:1rem;}
	#header #navi .gnb ul:not(.link) li:first-child{padding-left:0;}
	#header #navi .gnb .link{margin:0 1rem;}
	#header #navi .gnb .link a{padding:0 0.5rem; line-height:1.75rem;}
	#menuAll .mobile_top{height:calc(100% - 8rem);}
}
@media all and (max-width:767px){
	#header.open .btn-gnb-menu{top:45%;}
	#header #navi .gnb ul{ padding:0 ;}
	#header #navi .gnb .link{margin:0; width:100%;}
	#header #navi .gnb .link a{flex:1; text-align:center;}

	#menuAll .mobile_top{padding:0 1rem;}
	#menuAll .mobile_top ul li > a{font-size:1.5rem;}
	#menuAll .mobile_top ul li > a:after{display:block;}
	#menuAll .mobile_top ul li ul{display:none;}
	#menuAll .mobile_top ul li.open_li ul{display:block;}
	#menuAll .mobile_top ul li ul li a{font-size:1.2rem;}
	

	
}




/********************************************************
■ 컨텐츠
********************************************************/
#container{padding-top:10rem;}
#container .layout{width:75rem; margin:0 auto; display:flex; padding-bottom:6rem; min-height: 550px;}

#container #left_menu{width:13rem;}
#container #left_menu h2{font-size:1.3rem; font-weight:700; color:var(--gray3); margin-bottom:2.5rem; text-align:center;}
#container #left_menu h2 span{position:relative; display:inline-block; padding-right:1rem;  }
#container #left_menu h2 span:before{content:''; position:absolute; right:0px; top:0px; width:10px; height:10px; background:url('../images/default/content/left_title.png')no-repeat 0 0; background-size:100%;}
#container #left_menu ul{}
#container #left_menu ul li{ height:3.5rem; }
#container #left_menu ul li:not(:first-child) a{border-top:0;}
#container #left_menu ul li:first-child a{border-top-right-radius:6px;}
#container #left_menu ul li:last-child a{border-bottom-right-radius:6px;}
#container #left_menu ul li a{border:1px solid #e1e1e1; position:relative; display: flex; align-items: center;  font-size:1rem; color:#656565; padding-left:2.5rem; height:100%;}
#container #left_menu ul li.on a{color:#fff; font-weight:600; background:var(--bg-orange); border-color:var(--main)}
#container #left_menu ul li:not(:first-child).on a:before{height:calc(100% + 1px); top:0;}
#container #left_menu ul li.on a:before{content:''; position:absolute; left:-200%; top:-1px; height:calc(100% + 2px); width:200%; background:var(--bg-orange);}


#container #content{flex:1; margin-left:4rem;}

#container #content .location{display:flex; justify-content: space-between; margin-bottom:2.15rem;}
#container #content .location h3{font-size:1.7rem; font-weight:700; color:var(--gray3);}
#container #content .location .navigate{display: flex; align-items: center; color:#999; font-size:0.75rem;}
#container #content .location .navigate span{flex-shrink: 0; position:relative;  display:inline-block; padding-left:1.35rem; margin-left:1rem;}
#container #content .location .navigate span:before{ content: "\e940"; position:absolute; left:0px; top:0px; font-family: 'xeicon';}
#container #content .location .navigate span.home{width:1rem; height:1rem; font-size:0;  padding-left:0; margin-left:0; background:url('../images/default/content/icon_home.svg')no-repeat 50% 50%; background-size: 100% 100%;}
#container #content .location .navigate span a{font-weight:600; color:var(--gray3)}


/*퀵배너*/
.quick-wrap{position: fixed; right:1rem; top:10rem; z-index: 10; background:#f0f0f0; border-radius:6px; padding:0.5rem; box-shadow:0 0 10px rgba(0,0,0,0.1); transition: all 0.3s;}
.quick-wrap ul{background:#fff; padding:0 0.5rem; border-radius:6px;}
.quick-wrap ul li{text-align:center; font-size:0.7rem; padding:0.75rem 0; font-weight:500;}
.quick-wrap ul li img{display:block; margin:0 auto 0.5rem;  }

@media all and (max-width:1700px){
	.quick-wrap{display:none;}
}
@media only screen and (max-width : 320px) {
	
	#container .layout{width:100%; padding:0 1rem 6rem;}
	#container #content{margin-left:2rem;}
}

@media all and (max-width:1540px){
	#container .layout{width:100% !important; padding:0 1rem 6rem;}
	#container #content{margin-left:2rem;}
}
@media all and (max-width:1340px){
	#container #left_menu{width:10rem;}
	#container #left_menu ul li a{padding-left: 1rem;}
}
@media all and (max-width:1030px){
	#container #left_menu{display:none;}
	#container #content{margin-left:0;}
	#container #content .location .navigate span{ padding-left:1rem; margin-left:0.5rem;}
}

/********************************************************
■ 푸터
********************************************************/
#footer{background:#210C0C;}
#footer .inner{padding:4rem 2.5rem 2rem; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: space-between; font-size:0.8rem; color:rgba(255,255,255,0.8);}
#footer .logo-box{width:500px;}
#footer .logo-box img{height:2.2rem;}
#footer .logo-box > div{display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: space-between; align-items: center; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid  rgba(255,255,255,0.3);}
#footer .logo-box span{position:relative; }
#footer .logo-box span > a{display:inline-block;}
#footer .logo-box a:first-child{color:rgba(255,255,255,1);}
#footer .logo-box a:nth-child(2){position:relative; padding-left:1.5rem; margin-left:1.5rem; color:var(--main);}
#footer .logo-box a:nth-child(2):before{content:''; position:absolute; left:0; top:calc(50% - 1.5px); width:3px; height:3px; border-radius:50%; background:#fff;}
#footer .add-box span{position:relative; display:inline-block; padding-right:2.25rem; color:rgba(255,255,255,0.5);}
#footer .add-box span:before{content:''; position:absolute; right:0; top:calc(50% - 1.5px); width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,0.5);}
#footer .add-box a{display:block; color:var(--main); font-weight:500; font-size:1.5rem;}
#footer .add-box p{margin-top:1rem;}
#footer .mark-box{display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; gap:0 2rem;}
#footer .mark-box img{display:block; margin:0 auto 0.5rem;}
#footer .down-box{}
#footer .down-box > span{position:relative; display:inline-block; padding-right:2.25rem; color:rgba(255,255,255,0.5);}
#footer .down-box > span:before{content:''; position:absolute; right:0; top:calc(50% - 1.5px); width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,0.5);}
#footer .down-box div{display:flex; gap:0 1rem; margin-top:1rem;} 
#footer .down-box div a{ display: flex; align-items: center; justify-content: center; gap:0 0.75rem; background:#fff; border-radius:4px; padding:1rem; color:var(--gray3); font-size:0.6rem;}
#footer .down-box div a b{display:block; font-size:1rem; }

#footer .copy{background:#fff; font-size:0.8rem; color:var(--gray8); text-align:center; padding:0.5rem 1rem;}
#footer .copy b{color:var(--main); font-weight:500;}

@media all and (max-width:1640px){
	#footer .inner{ padding: 4rem 2rem 2rem;}
}
@media all and (max-width:1340px){
	#footer .inner{flex-wrap:wrap; gap:0.5rem;}
	#footer .logo-box{width:100%; margin-bottom:2rem;}
}
@media all and (max-width:1030px){
	#footer .inner{padding: 4rem 1rem 2rem;}
}
@media all and (max-width:567px){
	#footer .inner{padding: 2rem 1rem 2rem;  gap:1.5rem 0.5rem;}
	#footer .logo-box{margin-bottom:0rem;}
	#footer .logo-box a:nth-child(2){padding-left:.5rem; margin-left:.5rem; }
	#footer .logo-box p + p{color:rgba(255,255,255,0.5);}
	#footer .add-box span{font-size:0.8rem;}
	#footer .add-box p{margin-top:0;}
	#footer .mark-box{gap:0 1rem;}
	#footer .down-box{width:100%;}
	#footer .down-box div a{flex:1; padding:1rem 0.5rem; gap:0 0.5rem;}
	#footer .down-box div a img{width:1.5rem;}
}

/********************************************************
■ 폰트사이즈
********************************************************/
.fs28{font-size:1.4rem;}
.fs24{font-size:1.2rem;}
.fs20{font-size:1rem;}
.fs16{font-size:0.8rem;}
.fs15{font-size:0.75rem;}
.fs13{font-size:0.65rem;}

/*글자 색상*/
.tOrange{color:var(--main);}
.tGreen{color:var(--green);}
.tgray{color:var(--gray9);}

/********************************************************
■ 라디오버튼, 체크박스
********************************************************/

.chks {display:inline-block;position:relative; font-weight:normal;}
.chks input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.chks input + label {display:inline-block; vertical-align:middle; line-height:1.4rem; font-size:0.8rem; position:relative; padding-left:2rem; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;}
.chks input + label:before {content:'';position:absolute;left:0px;top:0px;margin:0;width:1.6rem;height:1.4rem; background: url('../images/default/content/check.svg')no-repeat 0 0;  background-size:100%;  }
.chks input:checked + label:before {background-image: url('../images/default/content/check_on.svg')}
.chks input[type="radio"] + label:before {background-image:url('../images/default/content/radio.svg')}
.chks input[type="radio"]:checked + label:before{background-image:url('../images/default/content/radio_on.svg')}

.check {display:inline-block;position:relative; font-weight:normal;}
.check input[type="checkbox"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.check input[type="checkbox"] + label {display:inline-block; vertical-align:middle; line-height:1.5rem; position:relative; padding-left:40px; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;}
.check input[type="checkbox"] + label:before {content:'';position:absolute;left:0px;top:0px;margin:0;width:1.5rem;height:1.5rem;text-align:center;box-sizing:border-box; border-radius:0.25em; background-color: #fff; border:1px solid var(--lgray6); transition: background-color .15s ease-in-out,background-position .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.check input[type="checkbox"]:checked + label:before {background:var(--main); border-color:var(--main);}
.check input[type="checkbox"]:checked + label:after {content:"\eb75"; display:block; position:absolute; left:0; top:0; text-align:center; width:1.5rem; font-family: 'remixicon'; color:#fff; }
.check input[type="checkbox"]:disabled + label:before{background:var(--lgray4); border-color:var(--lgray4)}
.check input[type="checkbox"]:checked:disabled + label:after{color:var(--gray8)}

.check input[type="radio"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.check input[type="radio"] + label {display:inline-block; vertical-align:middle; line-height:1.5rem; position:relative; padding-left:40px; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;}
.check input[type="radio"] + label:before {content:'';position:absolute;left:0px;top:0px;margin:0;width:1.5rem;height:1.5rem;text-align:center;box-sizing:border-box; border-radius:50%; background-color: #fff; border:1px solid var(--lgray6); transition: background-color .15s ease-in-out,background-position .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.check input[type="radio"]:checked + label:before {background:var(--main); border-color:var(--main);}
.check input[type="radio"]:checked + label:after {content:"\eb75"; display:block; position:absolute; left:0; top:0; text-align:center; width:1.5rem; font-family: "remixicon"; color:#fff; }
.check input[type="radio"]:disabled + label:before{background:var(--lgray4); border-color:var(--lgray4)}
.check input[type="radio"]:checked:disabled + label:after{color:var(--gray8)}


/********************************************************
■ 팝업 공통
********************************************************/

.pop-wrap{display:none; position:fixed; left:50%; top:50%; border-radius:4px; padding:1rem; min-width: 21rem; background:var(--bg-gray); transform:translate(-50%,-50%); z-index:110;}
.pop-wrap.open{display:block; }
.pop-wrap #close{position:absolute; right:-1.5rem; top:-1.5rem; width:3rem; height:3rem; border-radius:50%; background:#fff url('../images/default/main/btn_plus.png')no-repeat 50% 50%; background-size:1rem 1rem; outline:0.5rem solid rgba(240,240,240,0.8); transform: rotate(45deg ); font-size:0; box-shadow:0 0 20px rgba(0,0,0,0.3); z-index: 1;}
.pop-wrap .pop-wrap-box{ background: #fff url(../images/default/main/pop_bg.svg)no-repeat left -1rem bottom -1rem; background-size: 3.6rem 3.6rem;  border-radius: 6px;  box-shadow: 0 2px 30px rgba(0,0,0,0.2);  padding: 1.5rem;}

.pop-wrap .pop-text-box{background:#fff; border-radius: 6px; box-shadow: 0 2px 30px rgba(0,0,0,0.2);}
.pop-wrap .pop-text{text-align:center; padding:1rem 0;}
.pop-wrap .pop-text h4{font-size:1.2rem;}
.pop-wrap .pop-text p{margin-top:1rem; font-size:0.9rem; color:var(--gray7);}
.pop-wrap .pop-text .pop-img{display:block; margin:0 auto 1rem; height:5rem;}

.pop-wrap .pop-btns{display:flex; gap:0 0.5rem; margin-top:1rem;}
.pop-wrap .pop-btns button{display:block;  flex:1; height:2.5rem; text-align:center; border-radius:4px; font-size:1rem;}
.pop-wrap .pop-btns .btn_confirm{background:var(--bg-orange); border:1px solid var(--main);  color:#fff;}
.pop-wrap .pop-btns .btn_cancel{color:var(--gray6); border:1px solid var(--gray9); }

/*팝업 스크롤*/
.pop-scroll{max-height:80vh; box-shadow: 0 2px 30px rgba(0,0,0,0.2);}
.pop-scroll .pop-title{position: relative; height:3rem; line-height:3rem; color:var(--black); font-size:1.25rem; border-radius:6px 6px 0 0; border-bottom:1px solid #ececec; background:#fff;  padding:0 1rem; font-weight:700;}
.pop-scroll .pop-wrap-box{  border-radius: 0 0 6px 6px; box-shadow:none; overflow:auto; height:80vh;}
.pop-scroll .pop-title + .pop-wrap-box{height:calc(80vh - 7rem);}
/*팝업 스크롤 높이50%*/
.pop-scroll.min{max-height:50vh;}
.pop-scroll.min .pop-title + .pop-wrap-box{height:calc(50vh - 7rem);}

/*새창팝업*/
.winpop{position:relative; background:var(--bg-lgray); width:100%; height:100%; padding:0 20px 20px;}
.winpop .close{position:absolute; right:20px; top:15px; width:50px; height:50px; border-radius:50%; background:#fff url('../images/default/main/btn_plus.png')no-repeat 50% 50%; background-size:20px 20px; transform: rotate(45deg ); outline:5px solid rgba(240,240,240,0.8); font-size:0;  z-index: 1; box-shadow: 0 2px 10px rgba(0,0,0,0.2);}
.winpop .title{display: flex; align-items: center;  justify-content: center; height:80px; text-align:center; font-size:26px; font-weight:700; color:var(--black);}
.winpop .pop-body{position:relative; padding:20px; border-radius:6px; background:#fff; height:calc(100% - 80px); box-shadow: 0 2px 30px rgba(0,0,0,0.2); overflow-y:auto;}
.winpop .pop-body:before{content:''; position:absolute; right:0px; bottom:0px; width:88px; height:75px; background:url('../images/default/main/pop_bg.png')no-repeat 0 0; }
.winpop .pop-body .h5{position:relative;padding-left:10px; z-index: 0; margin-bottom:15px;}
.winpop .pop-body .h5:not(:first-child){margin-top:20px;}
.winpop .pop-body .h5:before{content:''; position:absolute; left:0px; top:50%; width:100%; height:1px; background:#EBEBEB; z-index:-1;}
.winpop .pop-body .h5 span{display:inline-block; padding:0 20px; line-height:40px; border-radius:10px; background:#F0F0F0; font-size:19px; font-weight:500; color:var(--gray3);}
.winpop .pop-body .sdot li{background-position:0 1px; font-size:16px}
.winpop .pop-body .sdot li + li{margin-top:10px;}


@media all and (max-width:1030px){
	.pop-wrap{padding:0.5rem;}
	.pop-wrap .pop-wrap-box{padding:0.75rem;}
}
@media all and (max-width:767px){
	.pop-wrap #close{ right:0; top:-1.25rem; width:2.5rem; height:2.5rem; }
}

/********************************************************
■ 아이콘
********************************************************/

[class^="icon_"]{display:inline-block; width:0.9rem; height:0.9rem; background-size:100%; background-position:0 0; background-repeat:no-repeat; vertical-align:middle;}
.icon_calendar{background-image:url('../images/default/main/icon_calendar.svg')}
.icon_calenda_wr{background-image:url('../images/default/main/icon_calendar_w.svg')}
.icon_calendar_check{background-image:url('../images/default/main/icon_calendar_check.svg')}
.icon_calendar_check_w{background-image:url('../images/default/main/icon_calendar_check_w.svg')}
.icon_cash{background-image:url('../images/default/main/icon_cash.svg')}
.icon_cash_w{background-image:url('../images/default/main/icon_cash_w.svg')}
.icon_find{background-image:url('../images/default/main/icon_find.svg')}
.icon_find_w{background-image:url('../images/default/main/icon_find_w.svg')}
.icon_drop{background-image:url('../images/default/main/icon_drop.svg')}
.icon_drop_w{background-image:url('../images/default/main/icon_drop_w.svg')}
.icon_hospital{background-image:url('../images/default/main/icon_hospital.svg')}
.icon_hospital_w{background-image:url('../images/default/main/icon_hospital_w.svg')}
.icon_phone{background-image:url('../images/default/main/icon_phone.svg')}
.icon_phone_w{background-image:url('../images/default/main/icon_phone_w.svg')}
.icon_tel{background-image:url('../images/default/main/icon_tel.svg')}
.icon_tel_w{background-image:url('../images/default/main/icon_tel_w.svg')}
.icon_map{background-image:url('../images/default/main/icon_map.svg')}
.icon_map_w{background-image:url('../images/default/main/icon_map_w.svg')}
.icon_map_g{background-image:url('../images/default/main/icon_map_g.svg')}
.icon_edit{background-image:url('../images/default/main/icon_edit.svg')}/*회색*/
.icon_turn{background-image:url('../images/default/main/icon_turn.svg')}/*흰색*/
.icon_print{background-image:url('../images/default/main/icon_print.png')}
.icon_man{background-image:url('../images/default/main/icon_man.svg')}
.icon_woman{background-image:url('../images/default/main/icon_woman.svg')}
.icon_search{background-image:url('../images/default/main/icon_search.svg')}
.icon_search_w{background-image:url('../images/default/main/icon_search_w.svg')}
.icon_check{background-image:url('../images/default/main/icon_check.svg')}
.icon_check_w{background-image:url('../images/default/main/icon_check_w.svg')}
.icon_forbid{background-image:url('../images/default/main/icon_forbid.svg')}
.icon_forbid_w{background-image:url('../images/default/main/icon_forbid_w.svg')}
.icon_survey{background-image:url('../images/default/main/icon_survey.svg')}

.icon_question{position:relative; width:1rem; height:1rem; background-image:url('../images/default/main/icon_question.svg'); cursor:pointer;}
.icon_question .quest-tip{display:none; position:absolute; left:50%; top:1.6rem; width: max-content; background:var(--lgray3); color:var(--gray5); font-size:0.7rem; line-height:1.3; z-index: 1; padding: 0.2rem; transform:translateX(-50%);}
.icon_question:hover .quest-tip{display:block; }

.icon_alert{width:1.75rem; height:1.75rem; background-image:url('../images/default/main/icon_alert.svg'); margin-right:5px; }
.icon_alert_g{width:1.75rem; height:1.75rem; background-image:url('../images/default/main/icon_alert_g.svg'); margin-right:5px; }

[class^="resIcon"]{display:inline-block; width:1.5rem; height:1.5rem; margin-right:5px;  background-size:100%; background-position:0 0; background-repeat:no-repeat; vertical-align:middle;}
.resIcon01{background-image:url('../images/default/content/resIcon01.png')}
.resIcon02{background-image:url('../images/default/content/resIcon02.png')}
.resIcon03{background-image:url('../images/default/content/resIcon03.png')}
.resIcon04{background-image:url('../images/default/content/resIcon04.png')}

/********************************************************
■ 버튼
********************************************************/
.btn-wrap{display: flex; justify-content: center; gap: 0.4rem; text-align:center; margin-top:3rem;}
.btns{display: inline-flex; align-items: center;  justify-content: center; gap:0.5rem;margin: 2px; min-width:6rem; height:2.5rem; font-size:0.85rem; font-weight:500; color:var(--gray8); border:1px solid #DEDEDE; background:#fff; border-radius:4px; box-shadow: inset -2px -2px 2px rgba(0,0,0,0.1), inset 2px 2px 2px rgba(255,255,255,0.2); transition: all 0.2s ease-out 0s; vertical-align:top;}
.btns.big{min-width:8.5rem; height:3rem; box-shadow:0 5px 10px rgba(0,0,0,0.15);}
.btns.small{height:auto; border-radius: 4px; padding: 6px 12px; font-size:0.7rem;}

.btns.font-orange{color:var(--main)}
.btns.red{color:#fff; background:var(--red); border-color:#9a1600;}
.btns.ivory{color:var(--main); background:#FFF5EB; border-color:var(--main);}
.btns.dark{color:#fff; background:var(--gray8); border-color:var(--gray7);}
.btns.orange{color:#fff; background:var(--main); border-color:#e56f11; }
.btns.gray{ color:var(--gray4); background:#F6F6F6; border-color:var(--gray9);}
.btns.white{ color:var(--gray6); background:#fff; border-color:var(--gray9);}
.btns.green{ color:#fff; background:var(--green); border-color:#1c9250;}

.btns:not(.default):is(:hover, :active, :focus-visible){background:var(--lgray3); border-color:var(--lgray6)}
.btns.red:not(.default):is(:hover, :active, :focus-visible){background:#9a1600; border-color:#9a1600;}
.btns.ivory:not(.default):is(:hover, :active, :focus-visible){background:#ffefe0;  border-color:var(--main);}
.btns.dark:not(.default):is(:hover, :active, :focus-visible){background:var(--gray7); border-color:var(--gray7);}
.btns.orange:not(.default):is(:hover, :active, :focus-visible){background:#e56f11; border-color:#e56f11;}
.btns.gray:not(.default):is(:hover, :active, :focus-visible){background:var(--lgray5); border-color:var(--gray9);}
.btns.green:not(.default):is(:hover, :active, :focus-visible){background:#219a56; border-color:#188648;}

.btns.default{box-shadow:none; cursor:default;}

.btnIcon{display:inline-block; color:#fff; background:var(--black); border-radius:4px; height:1.7rem; font-size:0.7rem;  padding-right:10px; overflow:hidden; transition: all 0.2s ease-out 0s;}
.btnIcon i{display: inline-block; width: 1.5rem; height: 1.7rem; line-height: 1.7rem; background:rgba(255,255,255,0.1); margin-right:4px;}
.btnIcon.gray{color:#fff; background:var(--gray9); }
.btnIcon.red{color:#fff; background:var(--red); }
.btnIcon.orange{color:#fff; background:var(--main); }
.btnIcon.green{color:#fff; background:var(--green); }

@media all and (max-width:767px){
	.btns{min-width: 6rem; font-size: 0.8rem; gap: 0.25rem;}
	.btns.big{min-width:10rem; height:3.5rem; font-size:1rem;}
	
	.btn-wrap .btns.big{min-width:auto; flex:1;}
}

/********************************************************
■ 블릿 요소
********************************************************/
.dot{padding-left:1.1rem; background:url('../images/default/content/dot.svg')no-repeat 0rem 50%; background-size:0.7rem; }

.sdot li{padding-left:1.1rem;  background:url('../images/default/content/dot.svg')no-repeat 0rem 0.2rem; background-size:0.7rem;}
.sdot li + li{margin-top:0.3rem;}

.bar{padding-left:1.2rem; background:url('../images/default/main/bar.svg')no-repeat 0rem 50%; background-size:0.8rem;}

.box_tel{position:relative; padding-left:1.9rem; line-height:1.5;}
.box_tel:before{content: ""; position:absolute; left:0px; top:0px; width:1.4rem; height:1.4rem; background:url('../images/default/content/box_tel.svg')no-repeat 0 0;  background-size:100%; }
.box_map{position:relative; padding-left:1.9rem; line-height:1.5;}
.box_map:before{content: ""; position:absolute; left:0px; top:0px; width:1.4rem; height:1.4rem; background:url('../images/default/content/box_map.svg')no-repeat 0 0;  background-size:100%; }

/*비행기모양 블릿*/
.bullet{padding-left:1.9rem; background:url('../images/default/content/bullet.svg')no-repeat 0.1rem 0.1rem; background-size:1.2rem 1.2rem;}


.box-bg{background:var(--lgray3); padding:1rem 1.5rem; border-radius:6px; margin-bottom:1.5rem; font-weight:500;}

/*경고블릿*/
.warning{position:relative; color:var(--red); padding-left:1rem;}
.warning:before{content: "\ec80"; position:absolute; left:0px; top:0px;  font-family: "remixicon"; line-height: 1.3; display:inline-block; margin-right:0.2rem; vertical-align: middle;}

.btn-print{display:inline-block; width:2rem; height:2rem; border-radius:0.5rem; background:#fff url('../images/default/main/icon_print_line.svg')no-repeat 50% 50%; background-size:1.2rem; font-size:0; box-shadow:0 0 10px rgba(149,149,149,.2);}



/*도트*/
.dot-dl + .dot-dl{margin-top:2rem;}
.dot-dl dt{font-size:0.95rem; font-weight:600; color:var(--gray3); margin-bottom:0.5rem;}
.dot-dl dd{position:relative; font-size:0.85rem; color:var(--gray6); padding-left:0.75rem; margin-bottom:0.25rem;}
.dot-dl dd:before{content:''; position:absolute; left:0px; top:0.4rem; width:0.2rem; height:0.2rem; border-radius:50%; background:var(--main);}

/*info-box*/
.info-box{position:relative; padding:2.5rem 4rem; border-top:1px solid rgba(0,0,0,0.3); }
.info-box:before{content:''; position:absolute; left:0px; top:-1.5px; width:80%; height:3px; border-radius:1.5px; background:var(--black); }
.info-box .bg{display:flex; align-items:center; gap:0 1.75rem; background:#F6F6F6 url('../images/default/content/box_bg.png')no-repeat right top; line-height:1.6; padding:1.75rem 1rem; padding-left:5rem; font-size:0.85rem; }
.info-box .bg h4{font-size:1.1rem; margin-bottom:1rem;  line-height:1.2; }

.info-box .search-box{margin-top:1rem;}
.info-box .search-box .search_input_wrap{display:flex; align-items: center;}
.info-box .search-box .search_input_wrap .typeahead__field{flex:1; }
.info-box .search-box .search_input_wrap .typeahead__field input[type="text"]{border-radius:4px 0 0 4px; border-right:none; height:2.5rem;}
.info-box .search-box .search_input_wrap .inbtn{width:2.5rem; height:2.5rem; font-size:0; background:var(--main) url('../images/default/main/icon_search_w.svg')no-repeat 50% 50%; background-size:1.2rem 1.2rem; border-radius:0 4px 4px 0;}

.info-box .search-bg{padding:1.75rem 5rem;}
.info-box .search-bg .search-box{margin-top:0; flex:1}

/*검진예약 미진행일때*/
.no-reserve-box{padding:1rem; background:#F0F0F0; border-radius:6px; margin-bottom:2rem;}
.no-reserve-box > div{background:#fff; border-radius:6px;}
.no-reserve-box .title{padding:2rem; display:flex; justify-content: center; align-items: center; gap:2rem; border-bottom:1px solid #BEBEBE;}
.no-reserve-box .title h4{font-size:1.1rem; color:var(--gray3); line-height:1.5;}
.no-reserve-box .title h4 span{display:block; font-size:0.85rem; font-weight:400; }
.no-reserve-box .text{position:relative; padding:1rem; text-align:center;}
.no-reserve-box .text:before{content:''; position:absolute; left:5rem; top:-1.5px; width:calc(100% - 10rem); height:3px; background:var(--black); border-radius:1.5px;}
.no-reserve-box .text p{margin-bottom:1rem;}
.no-reserve-box .text li{margin-top:0.5rem;}
.no-reserve-box .text li b{margin-right:1.5rem; color:var(--black);}
.no-reserve-box .text li i{width:1.9rem; height:1.9rem; background-color:var(--lgray3); border-radius:50%; margin-right:0.5rem; background-size: 1.1rem 1.1rem; background-position: 50% 50%;}

@media all and (max-width:1340px){
	.info-box{padding:2rem;}
	.info-box .bg{padding-left:2.5rem;}
	.info-box .search-bg{padding:1.75rem 2.5rem;}
}
@media all and (max-width:1030px){
	.info-box{padding:1rem;}
	.info-box .bg{padding-left:1rem;}
	.info-box .search-bg{padding:1.75rem 2.5rem;}
}
@media all and (max-width:767px){
	.info-box{padding:1rem 0;}
}
@media all and (max-width:567px){
	.info-box .bg{flex-direction: column; gap:1rem;}
	.info-box .bg img{height:5rem;}
	.info-box .bg div{flex:1; width: 100%;}
}



/********************************************************
■ 탭
********************************************************/
/* 1차탭 - 건강자가진단 */
.tab-wrap{margin-bottom:3.5rem;}
.tab-wrap .tab-view{display:none;}
.tab-menu ul{display:flex; flex-wrap:wrap; gap:2rem 0;}
.tab-menu ul li{width:25%; text-align:center; }
.tab-menu ul li a{position: relative; display:block; font-size: 1.2rem; color: var(--gray5); padding: 0 0 1rem; cursor: pointer;}
.tab-menu ul li a:before{ content: '';display:none; position: absolute; left: 0; bottom: 0px; height: 4px; border-radius: 2px; width: 100%; background: var(--main);}
.tab-menu ul li.on a{color:var(--main); font-weight:600;}
.tab-menu ul li.on a:before{display:block;}

.tab-menu ul li [class^="msIcon"],
.tab-menu ul li [class^="tab2_icon"]{display:inline-block; width:1.5rem; height:1.5rem; margin-right:0.4rem; background-size:100%; background-position:0 0; background-repeat:no-repeat; vertical-align:middle;}
.tab-menu ul li .msIcon01{background-image:url('../images/default/content/myself01_tab.svg')}
.tab-menu ul li .msIcon02{background-image:url('../images/default/content/myself02_tab.svg')}
.tab-menu ul li .msIcon03{background-image:url('../images/default/content/myself03_tab.svg')}
.tab-menu ul li .msIcon04{background-image:url('../images/default/content/myself04_tab.svg')}
.tab-menu ul li .msIcon05{background-image:url('../images/default/content/myself05_tab.svg')}
.tab-menu ul li .msIcon06{background-image:url('../images/default/content/myself06_tab.svg')}
.tab-menu ul li .msIcon07{background-image:url('../images/default/content/myself07_tab.svg')}
.tab-menu ul li .msIcon08{background-image:url('../images/default/content/myself08_tab.svg')}
.tab-menu ul li .tab2_icon01{background-image:url('../images/default/content/tab2_icon01.svg')}
.tab-menu ul li .tab2_icon02{background-image:url('../images/default/content/tab2_icon02.svg')}
.tab-menu ul li .tab2_icon03{background-image:url('../images/default/content/tab2_icon03.svg')}
.tab-menu ul li .tab2_icon04{background-image:url('../images/default/content/tab2_icon04.svg')}
.tab-menu ul li.on .msIcon01{background-image:url('../images/default/content/myself01_tab_on.svg')}
.tab-menu ul li.on .msIcon02{background-image:url('../images/default/content/myself02_tab_on.svg')}
.tab-menu ul li.on .msIcon03{background-image:url('../images/default/content/myself03_tab_on.svg')}
.tab-menu ul li.on .msIcon04{background-image:url('../images/default/content/myself04_tab_on.svg')}
.tab-menu ul li.on .msIcon05{background-image:url('../images/default/content/myself05_tab_on.svg')}
.tab-menu ul li.on .msIcon06{background-image:url('../images/default/content/myself06_tab_on.svg')}
.tab-menu ul li.on .msIcon07{background-image:url('../images/default/content/myself07_tab_on.svg')}
.tab-menu ul li.on .msIcon08{background-image:url('../images/default/content/myself08_tab_on.svg')}
.tab-menu ul li.on .tab2_icon01{background-image:url('../images/default/content/tab2_icon01_on.svg')}
.tab-menu ul li.on .tab2_icon02{background-image:url('../images/default/content/tab2_icon02_on.svg')}
.tab-menu ul li.on .tab2_icon03{background-image:url('../images/default/content/tab2_icon03_on.svg')}
.tab-menu ul li.on .tab2_icon04{background-image:url('../images/default/content/tab2_icon04_on.svg')}

@media all and (max-width:767px){
	.tab-wrap{margin-bottom:1.5rem;}
	.tab-wrap .tab-view{ position: relative;  display: block; cursor: pointer; border: 1px solid var(--main); background:var(--main); font-size: 1.1rem; color: #fff; padding-left: 1rem;  text-align: left;  height: 3.5rem;  line-height: 3.5rem;}
	.tab-wrap .tab-view i{ position: absolute; top: 50%; right: 1rem; margin-top: -9px;  display: block; color: #fff;}
	.tab-wrap .tab-view.on i{transform: rotateX(180deg);}
	.tab-menu{position: relative; height: 0; width: 100%; z-index: 1;}
	.tab-menu ul{display:none; gap:0; z-index: 100; position: absolute;  width: 100%;  left: 0; margin: 0 auto;  line-height: 0; background: #fff; box-shadow: 0px 2px 5px rgb(0 0 0 / 15%);}
	.tab-menu ul li{width:50%; float:left; text-align:left; }
	.tab-menu ul li a{padding:1rem 1rem; font-size:1rem; border-top: 1px solid #EAECF1;}
	.tab-menu ul li.on a:before{display:none;}
	.tab-menu ul li [class^="msIcon"]{width:1rem; height:1rem;}
}

/*2차탭*/
.tab-2nd{border:1px solid  var(--lgray6); background:#fff; }
.tab-2nd ul{display:flex;}
.tab-2nd ul li{flex: 1; height:4rem;}
.tab-2nd ul li + li{border-left:1px solid var(--lgray6);}
.tab-2nd ul li a{display: flex; align-items: center;  justify-content: center; width:100%; height:100%; font-weight:500; text-align:center; font-size:1.1rem; color:var(--gray5); cursor:pointer;  }
.tab-2nd ul li.on a{background:var(--bg-orange); color:#fff;}