@charset "UTF-8";

/********************************************************
■ 기본
********************************************************/
.tablet{display:none;}
.mob{display:none;}
/*세팅*/
:root{
	--green:#9DF1D7;
	--green2:#007461;
	--darkGreen:#016153;
	--yellow:#FFDC61;
	--black:#212121;
	--black2:#000;
	--krds-contents-size: 1400px;
	--krds-contents-wrap-size: 1448px;
}

@media (max-width:1030px){
	.tablet{display:block;}
}
@media (max-width:767px){
	.web{display:none;}
	.mob{display:block;}

}

/********************************************************
■ 공통
********************************************************/
/* 헤더 따라오는 효과 제거시 주석 제거요망*/
#krds-header {border-bottom:none !important;  position: relative;}
#krds-header:has(.is-open) {z-index: 99;}
#krds-header .header-in { border-bottom:none !important;}
#wrap[class*=scroll] #krds-header:not(.sample) .header-in { position: relative;}
#wrap.scroll-down #krds-header:not(.sample) .header-in {  transform: translateY(0%);}

/*** 헤더 ***/
#krds-header .header-container .logo{display: inline-flex;  width: 25.4rem; height: 4.1rem;}
#krds-header .header-container .logo a{display: block; width: 100%; height: 100%; background-image: url(../../../images/skin/istd/main/logo_b.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
#krds-header .header-container .btn-navi.logout::before{-webkit-mask-repeat: no-repeat; -webkit-mask-position: center center;  -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(../../../images/krds/ico_logout.svg);  mask-image: url(../../../images/krds/ico_logout.svg);}

.krds-drop-wrap.my-drop .drop-menu{width: 21rem;}
.krds-drop-wrap.my-drop .my-name{font-size: var(--krds-pc-font-size-body-large); font-weight: var(--krds-font-weight-bold); margin-bottom: var(--krds-gap-3);}
.krds-drop-wrap.my-drop .my-time{font-size: var(--krds-pc-font-size-body-small);}
.krds-drop-wrap.my-drop .my-time dt{margin-bottom: var(--krds-gap-2); color: var(--krds-light-color-text-subtle);}
.krds-drop-wrap.my-drop .my-time dd{display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: var(--krds-gap-3);}
.krds-drop-wrap.my-drop .my-time .time{display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--krds-gap-1); color: var(--krds-light-color-text-primary);}
.krds-drop-wrap.my-drop .my-time .time::before{display: inline-flex; content: ""; width: var(--krds-icon--size-small); height: var(--krds-icon--size-small); background: url(../../../images/krds/ico_time.svg) center; background-size: contain;}

/* 헤더 웹 메뉴 */
.krds-main-menu{--krds-main-menu--sub-menu-only-2depth-padding-y: 5rem;	--krds-main-menu--main-trigger-padding-x: var(--krds-padding-4);}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul{grid-row-gap: var(--krds-gap-7);}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul a, 
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul button{border:1px solid var(--krds-light-color-border-gray-light);	border-radius:var(--krds-radius-xlarge1); padding:2rem;}
.krds-main-menu #nav > ul{display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; gap: var(--krds-gap-5);}
.krds-main-menu #nav > ul > li > div a{display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--krds-gap-3); position: relative;  height: var(--krds-main-menu--main-trigger-size-height); color: var(--krds-main-menu--main-trigger-color-text); padding: 0 var(--krds-main-menu--main-trigger-padding-x); transition: var(--krds-transition-base); font-size: var(--krds-main-menu--main-trigger-font-size); font-weight: var(--krds-font-weight-bold);}
.krds-main-menu #nav > ul > li > div a:before{display: inline-flex; content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 0.4rem; background-color: #007461; transition: var(--krds-transition-base);}
.krds-main-menu #nav > ul > li > div a:after{content: ""; display: inline-flex; width: var(--krds-icon--size-medium);  height: var(--krds-icon--size-medium); background-color: var(--krds-light-color-text-basic); forced-color-adjust: none; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(../../../images/krds/ico_angle.svg); mask-image: url(../../../images/krds/ico_angle.svg); background-color: var(--krds-main-menu--main-trigger-color-text); transition: var(--krds-transition-base); transform: rotate(0deg);}
.krds-main-menu #nav > ul > li.active > div a:before,
.krds-main-menu #nav > ul > li > div a.on:before{left: 0; width: 100%;}
.krds-main-menu #nav > ul > li > div a.on:after{transform: rotate(-180deg);}
.krds-main-menu #nav > ul > li > div a:focus{box-shadow: var(--krds-box-shadow-outline-inset); outline-offset: -0.4rem;}
.krds-main-menu #nav > ul > li > ul{position: absolute; top: 100%; left: calc(50% - calc(var(--krds-contents-wrap-size) / 2)); margin-top: 0.1rem; display: none; width: var(--krds-contents-wrap-size); padding:var(--krds-main-menu--sub-menu-only-2depth-padding-y) var(--krds-contents-padding-x); background-color: var(--krds-main-menu--toggle-color-surface); grid-gap: var(--krds-gap-7); grid-template-columns: repeat(3, 1fr);}
.krds-main-menu #nav > ul > li > ul:before{content:"";	position: absolute;	left:-50%; top:0; width:200vw; height:100%;	background:#fff; z-index:-1;}
.krds-main-menu #nav > ul > li > ul.is-open{display:grid;}
.krds-main-menu #nav > ul > li > ul li a{display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; width: 100%; gap: var(--krds-gap-3); padding: 2rem; background-color: var(--krds-main-menu--sub-menu-color-action); border-radius: var(--krds-radius-xlarge1); font-size: var(--krds-main-menu--sub-menu-trigger-color-font-size); border: 1px solid var(--krds-light-color-border-gray-light);}
.krds-main-menu #nav > ul > li > ul li a:before{content: ""; width: 0.4rem; height: 0.4rem; margin-top: var(--krds-padding-4); background-color: var(--krds-light-color-text-basic); border-radius: var(--krds-radius-max);}
.krds-main-menu #nav > ul > li > ul li a:hover{	background-color: var(--krds-main-menu--sub-menu-color-action-hover);}
.krds-main-menu #nav > ul > li > ul li ul{display:none;}
.krds-main-menu #nav a.blank:after{content:""; display: inline-flex; width: var(--krds-icon--size-medium); height: var(--krds-icon--size-medium); background-color: var(--krds-light-color-text-basic); forced-color-adjust: none; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(../../../images/krds/ico_go.svg); mask-image: url(../../../images/krds/ico_go.svg);}
/* 헤더 모바일 */
.krds-main-menu-mobile{--krds-main-menu-mobile--main-trigger-font-size: var(--krds-mobile-font-size-body-small); --krds-main-menu-mobile--main-trigger-padding-x: var(--krds-padding-4);}
.krds-main-menu-mobile .gnb-wrap .gnb-body .gnb-menu .submenu-wrap{	width: calc(100% - var(--krds-main-menu-mobile--menu-left-width));}
.krds-main-menu-mobile .gnb-wrap .gnb-body .gnb-menu .submenu-wrap .gnb-sub-list .depth3-wrap .depth3-trigger{position:relative; padding-left:2.4rem;}
.krds-main-menu-mobile .gnb-wrap .gnb-body .gnb-menu .submenu-wrap .gnb-sub-list .depth3-wrap .depth3-trigger::before{position:absolute; left:1rem; top:0.5em;}
#wrap[class*=scroll] #krds-header:not(.sample) .header-in{border-bottom:none;}
/*모바일 레프트 메뉴 krds-적용하면 제거해야함*/
.krds-main-menu-mobile .gnb-wrap .gnb-body{background: var(--krds-main-menu-mobile--menu-color-surface);}
.krds-main-menu-mobile .gnb-wrap .gnb-body .gnb-menu{position: relative; background:#fff; height: 100%;}
.krds-main-menu-mobile .gnb-wrap .gnb-body .gnb-menu:before{content:""; position: absolute; left:0; top:0; height:100%; background:var(--krds-main-menu-mobile--menu-color-surface);  width: 12.4rem;}
#mobile-nav .mbtop{ display: block;  width: 100%; height:100%;  position: relative;}
#mobile-nav .mbtop > li{ width: 12.4rem;}
#mobile-nav .mbtop > li > div a {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; position: relative; font-size:1.5rem; font-weight: var(--krds-font-weight-bold); height:6.4rem; padding:0 1.2rem;  }
#mobile-nav .mbtop > li a.blank:after{content:"";  display: inline-flex; width: var(--krds-icon--size-medium); height: var(--krds-icon--size-medium); background-color: var(--krds-light-color-text-basic); forced-color-adjust: none; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center;-webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center;  mask-size: contain; -webkit-mask-image: url(../../../images/krds/ico_go.svg); mask-image: url(../../../images/krds/ico_go.svg); vertical-align: middle; margin-left:0.2rem;}
#mobile-nav .mbtop > li > ul{display:none;  align-items: normal; justify-content: flex-start; flex-direction: column; position: absolute;   right: 0;   top: 0;    width: calc(100% - 12.4rem); padding:1.6rem; background:#fff; }
#mobile-nav .mbtop > li > ul > li > ul a{font-size:1.5rem; padding:1.2rem; display:block;} 
#mobile-nav .mbtop > li.open_li > div a{color:#052b57; background:#fff;}
#mobile-nav .mbtop > li.open_li > ul{display:block;}
#mobile-nav .mbtop > li.open_li > ul > li:first-child > a{padding:0.8rem 0.8rem 1.6rem;}
#mobile-nav .mbtop > li.open_li > ul > li > a{ padding:1.6rem 0.8rem 1.6rem; display:block; font-size:1.5rem; font-weight: var(--krds-font-weight-bold); border-bottom:1px solid #8a949e; }
#mobile-nav .mbtop > li.open_li > ul > li > a strong{color:var(--krds-color-light-primary-70)}
/*** 푸터 ***/
#krds-footer{overflow: hidden;}
#krds-footer .f-logo{width: 32rem; height: 3.7rem; background-image: url(../../../images/skin/istd/main/f_logo.svg);}
#krds-footer .f-btm{position:relative;}
#krds-footer .f-btm:before{	content:"";	position:absolute; left:60%; top:-12.5rem; height:12.5rem; aspect-ratio: 250 / 125;	background: url(../../../images/default/main/foot_bg.svg) no-repeat left bottom;background-size:100%; z-index: -1; }
#krds-footer .f-cnt .f-info .info-cs{flex-direction: row;}
#krds-footer .f-cnt .f-info .info-cs strong{gap: var(--krds-gap-4);}
#krds-footer .f-cnt .f-info .info-cs strong span{font-weight:400;}
#krds-footer .f-cnt .f-info .info-cs li:not(:first-child){padding-left:var(--krds-gap-4);	position:relative;}
#krds-footer .f-cnt .f-info .info-cs li:not(:first-child):before{content:""; position:absolute; left:0; top:0.3em; width:1px; height:0.8em;	background:var(--krds-color-light-gray-60);}

@media (min-width: 1024px) {
  #krds-footer .f-cnt .f-link { width: 15%; margin-top: -4rem; }
}
@media (max-width: 1440px) {
	.krds-main-menu{ --krds-main-menu--main-trigger-font-size: var(--krds-pc-font-size-body-medium);}
	.krds-main-menu #nav > ul > li > ul{width:100%; left:0;}
	#krds-footer > .inner{padding: var(--krds-padding-10) var(--krds-contents-padding-x) var(--krds-padding-8);	}
}
@media (max-width: 1280px) {
	.krds-main-menu{ --krds-main-menu--main-trigger-font-size: var(--krds-pc-font-size-body-small);}
}
@media (max-width: 1024px) {
	#krds-header .header-container .logo{ width: 17.5rem;}
	#krds-header .inner{padding-right:1rem;}

	#krds-footer .f-logo{width: 26rem;}
	#krds-footer .f-cnt .f-info .info-cs{flex-direction: column;}
	#krds-footer .f-cnt .f-info .info-cs li:not(:first-child){padding-left:0;}
	#krds-footer .f-cnt .f-info .info-cs li:not(:first-child):before{display:none;}
}
@media (max-width: 767px) {
	#krds-header{  --krds-header--navi-font-size-mobile: var(--krds-mobile-font-size-body-xsmall);}
	#krds-header .header-container .btn-navi.login,
	#krds-header .header-container .btn-navi.logout {display:none;}
	
	#krds-footer .f-btm:before{ top: -7.5rem; height: 7.5rem;}
	
}
/*컬러변경*/
.krds-form-check input[type=checkbox]:checked ~ label:before {
    background-color: var(--green2);
    border-color: var(--green2);
}
.krds-form-check input[type=radio]:checked ~ label:after {
    background-color: var(--green2);
}
.krds-form-check input[type=radio]:checked ~ label:before {
    border-color: var(--green2);
}
/*********************************************************
■ top버튼
********************************************************/
.page-top-button{ width: 8.1rem;  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; flex-direction: row; background:url('../../../images/default/main/topBtn.svg')no-repeat 0 0; background-size:100%; filter: drop-shadow(0 0px 10px rgba(0, 0, 0, 0.14)); position: fixed; right: 0; bottom: 6.4rem; z-index: -1; visibility: hidden; opacity: 0;}
.page-top-button .svg-icon{display:none;}
.page-top-button:before{content:"";position:absolute; right:0px; top:-5rem; width:9.4rem;  aspect-ratio: 94 / 62; background:url('../../../images/default/main/ai_character03.svg')no-repeat 0 0; background-size:100%; filter: drop-shadow(0 10px 4px rgba(0, 0, 0, 0.10)); animation: topmove 10s linear infinite both;}
.page-top-button.active{z-index: 60; visibility: visible; opacity: 1;}
@keyframes topmove {
  50%  {transform:translateX(1rem);}
}
@media (max-width: 1024px) {
	.page-top-button{ bottom: 4rem; width: 6rem;}
	.page-top-button:before{ top:-2rem; right: 1rem; width:5rem; }
}

/********************************************************
■ 팝업
********************************************************/
.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: 60rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);  text-align: center; z-index: 100; border-radius: 2rem; overflow:hidden; background:#fff;}
.con_pop .popin h3{color: #fff; background: #143666;  padding:0 2rem; font-size: 2.4rem; font-weight: 500; height: 5rem; line-height: 5rem; }
.con_pop .popin .txt{padding: 3rem 4rem; font-size: 1.6rem; line-height: 1.5;background: #fff; }
.con_pop .popin table{border-top: 2px solid #333; margin-top: 1.5rem;}
.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: 6rem; line-height: 6rem; font-size: 1.8rem;  background: #eee; color: #111;}
.con_pop .bottom_button a.confirm{background: #21A3DD; color: #fff;}
.con_pop .bottom_button a.w100{flex-basis: 100%;}
.con_pop .close{position: absolute; right: 2rem; top: 0; height:5rem; line-height:5rem;}
.con_pop .close a{color: #fff; font-size: 2.4rem;}
.con_pop .close span{font-size: 0;}
.con_pop .popin h4{font-size:2.4rem;  color:#333; border-bottom:1px solid #ddd; padding-bottom:2rem; margin-bottom:2rem;}
.con_pop .popin h4 b{font-weight:bold; color:#21A3DD;}
.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:20rem; margin-top:1rem;}
.con_pop .popin b{font-weight:bold;}
.con_pop .alert img{margin-bottom:10px; width:20rem;}
.con_pop .alert h4{color:#212121;}
.con_pop small{ z-index: 1;  position: relative; margin-top:1rem; display:block;}
.con_pop .popin h5{font-size:2.4rem;  color:#333;margin-top:2rem;}
.con_pop .popin .bg{margin-top:3rem; padding:3rem 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 : 40rem; background : #f1f9fe; 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:16rem; margin:0 auto; height:4.6rem; line-height:4.6rem; background:#38387f; color:#fff; border-radius:1rem;}
#loading .popin{width:33rem; padding:4rem 2rem;}
#loading .popin .loading_spinner{width:70px; height:70px; margin:0 auto; }
@media (max-width: 767px){
	.con_pop .popin{width: 90%; margin: 0 auto;  padding:4rem 2rem;}
	.con_pop .popin .txt{padding:3rem 2rem;}
}
