.wrap{width:100%;overflow: auto;height:100vh;background: #F2F6FA;position: relative;}
.wrap.mobile-menu-show:before{content:"";position: fixed;width: 100%;height: 100%;background: #6b6b6b8a;z-index: 100;}
header {
    height: 60px;
    background: #fff;
    padding: 0;
    position: fixed;
    width: 100%;
    z-index: 100;
}
header>.pc-ver{display:none}
header>div>.row{
    margin: 0;
    height: 100%;
    align-content: center;
    overflow: hidden;
    justify-content: space-between;
}
header>div>.row>div{
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 0;
}
header>div>.row>div:after{
    /* content:""; */
    height:24px;
    width:2px;
    position:absolute;
    background: rgba(255, 255, 255, 0.3);
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
header>div>.row>div:last-child:after{display:none}
header>div>.row>div>.row{
    justify-content: space-between;
}
header>div>.row>div>.row>div{
    align-self: center;
    flex-grow: 0;
    white-space: nowrap;
    width: auto;
    flex-basis: auto;
}
header .logo-box{
    height: 100%;
}
header .logo-box a{
    display: block;
}
header .logo-box a img{
    height: 28px;
}
header .searchbox{
    width: auto;
    display: flex;
    align-items: center;
    position: relative;
    margin: 16px;
}
header .searchbox .check-radio-box input+label{
    color: #fff;
    font-size: 12px;
    line-height: 100%;
}
header .searchbox [class*='form-area-box']{
	width: 100%;
}
header .searchbox [class*='form-area-box'] [class*="ele-icon-box"]{
    height: 44px;
/* DarkMode/03/90% */
    /* background: var(--DarkMode03-90); */
    border-radius: 999px;
    border: 2px solid var(--blue-500);
    padding: 0 8px;
}
header .searchbox [class*='form-area-box'] [class*="ele-icon-box"] .check-radio-box{
    height: 24px;
/* Primary/Primary */
    flex-basis: 114px;
    max-width: 114px;
    display: flex;
    justify-content: center;
    padding: 0;
}
header .searchbox [class*='form-area-box'] [class*="ele-icon-box"] .check-radio-box label{
    color: #fff;
    font-size: 12px;
    padding:0;
    display: flex;
    flex-direction: row-reverse;
    background: var(--blue-500);
    border-radius: 999px;
    padding: 0 8px;
    width: 100%;
    justify-content: center;
}
header .searchbox [class*='form-area-box'] [class*="ele-icon-box"] .check-radio-box input[type="checkbox"]+label:before{
    content: "\f547";
    font-size: 16px;
    color: #fff;
    padding-right: 0;
}
header .searchbox [class*='form-area-box'] [class*="ele-icon-box"] .check-radio-box input[type="checkbox"]:checked+label{
    background: var(--orange);
}
header .searchbox [class*='form-area-box'] [class*="ele-icon-box"] .check-radio-box input[type="checkbox"]:checked+label:before{
    content: "\ed1c";
}
header .searchbox [class*='form-area-box'] [class*="ele-icon-box"] input{
    border: 0;
    background: #fff0;
    height: 100%;
    font-weight: 300;
    font-size: 12px;
    color: var(--blue-500);
}
header .menubox>.menu{
    width: auto;
    height: 100%;
}
header .menubox>.menu>.row{
    margin: 0;
    height: 100%;
}
header .menubox>.menu>.row>div{
    padding: 0;
}
header .menubox>.menu>.row>div:nth-child(1){
    flex-basis: 175px;
    max-width: 175px;
    border-right: 1px solid var(--gray-300);
    background: var(--gray-10per);
}
header .menu2{
    display: flex;
    justify-content: flex-start;
    padding: 16px;
    margin-top: 0;
    border: 1px solid var(--gray-300);
    border-left: 0;
    border-right: 0;
}
header .menu2>.row{
    margin: -4px;
    align-items: center;
    width: calc(100% + 8px);
}
header .menu2>.row>div{
    padding: 4px;
    display: flex;
    align-items: center;
}
header .menubox{
    background: #fff;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    border-top: 1px solid var(--Elements-Line);
    overflow: hidden;
    padding: 0;
    max-height: 0px;
}
header .menubox .top{
    padding: 16px;
}
header .menubox .top>.row>div{
    display: flex;
    align-items: center;
}
header .menubox.trans{
    box-shadow: var(--dropShadow-elevation-default-le2);
    max-height: 100vh;
}
header .menubox .menu [class*='btn-']{
    height: auto;
    border: 1px solid var(--gray-300);
    border-left: 0;
    border-top: 0;
    border-right: 0;
    border-radius: 0;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    justify-content: flex-start;
    line-height: 1;
}
header .menubox .menu [class*='btn-'].active{
    position: relative;
    background: #fff;
    color: var(--blue-500);
}
header .menubox .menu [class*='btn-'].active:before{
	content:"";
	height: 100%;
	position: absolute;
	width: 2px;
	background: #fff;
	right: -1px;
}
header .menubox .menu .sub-menu{display: none;}
header .menubox .menu .sub-menu.active{display: block;}
header .menubox .menu .sub-menu ul{
    padding: 0 16px;
}
header .menubox .menu .sub-menu ul>li.tit{
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-300);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 12px;
}
header .menubox .menu .sub-menu ul>li:not(.tit){
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    display: flex;
    line-height: 1;
    align-items: center;
    margin-bottom: 12px;
}
header .menubox .menu .sub-menu ul>li:not(.tit):before{
	content:"";
	width: 3px;
	height: 3px;
	background: var(--gray-950);
	display: inline-block;
	margin: 0 8px;
}
@keyframes menuin {
  0%{
  }
  100% {
  }
}
@keyframes menuout {
  0%{
	  max-height: 1000px;
  }
  100% {
	  max-height: 0px;
  }
}
/**/

/*footer*/
footer{
    height: auto;
    background: var(--DarkMode01);
    padding: 16px;
    padding-bottom: 24px;
    padding: 32px 0;
}
footer>div>.row-1{
    align-items: center;
    justify-content: space-between;
    margin: 0;
}
footer>div>.row-1>div{
    flex-grow: 0;
    white-space: nowrap;
    padding: 8px 0;
    padding: 16px 0;
    border-top: 1px solid var(--gray-200);
}
footer>div>.row-1>div a{
    font-size: 16px;
    font-weight: 600;
}
footer>div>.row-1>div .btn-special-1{
    border: 1px solid var(--gray-200);
    /* width: 100%; */
    padding: 8px 16px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    height: 40px;
    width: calc(50% - 4px);
    background-color: #fff;
}
footer>div>.row-1>div .btn-special-1 img{width:24px}
footer>div>.row-2{margin: 0;}
footer>div>.row-2 .txt1>img{display: block;height: 32px;margin: auto;margin-bottom: 16px;}
footer>div>.row-2>div{padding: 24px 0;}
footer>div>.row-3{
    margin: 0 -4px;
    align-items: center;
}
footer>div>.row-3>div{
    padding: 0 4px;
    padding: 0;
    padding-top: 16px;
    padding-top: 24px;
    text-align: center;
}
footer>div>.row-2 .txt1{
    color: #141718;
/* �젣紐�-蹂몃Ц/14pt/Light */
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 16.8px */
    border-top: 1px solid var(--gray-200);
    text-align: center;
    font-size: 12px;
}
footer>div>.row-3 .txt1{
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    border-top: 1px solid var(--gray-200);
    font-size: 12px;
}


/*//*/
.datum-point{
	width: 100%;
	margin:auto;
	padding: 0 16px;
}
/*mobile animation*/
.animation-box{
    display: block;
    position: relative;
    height: 100%;
    width: 60px;
}
.animation-box .menu,
.animation-box .menu::before,
.animation-box .menu::after {
    background: #9FB1BD;
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    transition: background ease .3s, top ease .3s .3s, transform ease .3s;
    width: 20px;
    margin: 0;
}

.animation-box:hover .menu,
.animation-box:hover .menu::before,
.animation-box:hover .menu::after {
    background: var(--blue-500);
}
.animation-box .menu {
    left: 18px;
    top: 27px;
}
.animation-box .menu::before {
    top: -6px;
}
.animation-box .menu::after {
    top: 6px;
}
.floating.right-box{
    position: fixed;
    bottom: 32px;
    display: flex;
    left: 0;
    flex-direction: column;
    /* width: 1440px; */
    transform: translateX(-50%);
    z-index: 1;
    align-items: self-end;
    margin-left: 92%;
    z-index: 100;
}
.floating.right-box>.list{
    border-radius: 999px;
    border: 1.5px solid rgb(255 255 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.48) 100%);
/* 諛곌꼍釉붾윭/�뿰�븿/sm-LV2 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--dropShadow-elevation-le2);
    padding: 11px;
    font-size: 24px;
    color: var(--gray-950);
    margin-bottom: 8px;
    position: relative;
    overflow: visible;
    transition: all 0.3s;
}
.floating.right-box>.list>[class*="icon-"]{
	font-size: inherit;
	color: inherit;
	line-height: 1;
	display: block;
	position: relative;
	z-index: 1;
}
.floating.right-box>.list.trans,
.floating.right-box>.list:hover{border: 1.5px solid rgba(102, 176, 255, 0.30);background: var(--gradient-blue-B001);color: #fff;}
.floating.right-box>.list>em{
    position: absolute;
    bottom: 11px;
    right: 9px;
    display: flex;
    line-height: 1;
    background: var(--orange-500);
    color: #fff;
    border-radius: 999px;
    width: 12px;
    height: 12px;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    font-style: normal;
    font-weight: 600;
    z-index: 2;
}
.floating.right-box.tooltipbox .fake-modal.trans.custum-modal{
    z-index: 10000;
    opacity: 1;
    display: block;
    overflow: visible;
    top: auto;
}
.floating.right-box.tooltipbox .fake-modal.custum-modal{right: 62px;left: auto;top: 0;}
.banner {
    position: relative;
    padding-top: 60px;
    z-index: 2;
}
.banner>.box{
    height: 320px;
    position: relative;
    padding: 56px 16px;
    height: auto;
    margin:auto;
    max-width:1216px;
    overflow: hidden;
}
.banner>.box>.top{
    display: flex;
    justify-content: space-between;
    padding: 0 18px;
    margin-bottom: 8px;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}
.banner>.box>.top>p{
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin-bottom: 24px;
}
.banner>.box>.top>.check-radio-box{line-height: 1;display: flex;justify-content: center;margin-bottom: 8px;}
.banner>.box>.top>.check-radio-box>label{font-size:16px;font-size: 13px;}
.banner>.box>.top>.check-radio-box>label:before{font-size:20px;font-size: 16px;}
.banner>.box>.search-box{
    padding: 30px 30px;
    border-radius: 999px;
    border: 2px solid rgb(255 255 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
/* 諛곌꼍釉붾윭/湲곕낯/sm-LV3 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--dropShadow-elevation-le3);
    margin-bottom: 24px;
    position: relative;
    /* border-radius: 16px; */
    padding: 16px;
    margin-bottom: 24px;
}
.banner>.box>.search-box:before{
	/* content:""; */
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, 0.05);
	position:absolute;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.banner>.box>.search-box>.row{
    margin: 0 -12px;
    align-items: center;
    margin: -4px;
}
.banner>.box>.search-box>.row>div{padding: 0 12px;padding: 4px;}
.banner>.box>.search-box>.row>div>[class*='form-area-box'] .ele-icon-box{border-radius: 999px !important;padding: 0 16px;}
.banner>.box>.search-box>.row>div>[class*='form-area-box'] .ele-icon-box>input,
.banner>.box>.search-box>.row>div>[class*='form-area-box'] .ele-icon-box>.custom-selet{height: 46px;font-size:16px;height: 40px;font-size: 13px;font-weight: 300;}
.banner>.box>.search-box>.row>div>[class*='form-area-box'] .custom-selet button{font-size: 13px;}
.banner>.box>.search-box>.row>div>[class*='form-area-box'] .custom-selet button:before{right: 16px;}
.banner>.box>.search-box>.row>div>.row>div>[class*="btn-"]{
    border-radius: 999px;
    width: 100%;
    padding: 0;
    height: 48px;
    height: 40px;
    width: 40px;
    padding: 10px;
    position:relative;
    z-index: 1;
}
.banner>.box>.search-box>.row>div>.row>div>[class*="btn-"]>span{display:none}
.banner.sub-page-1{
    position: relative;
    width: 100%;
    margin: auto;
    /* margin-top: 60px; */
    /* z-index: 100; */
}

.banner>.box .searchlist{
    display: flex;
    align-items: center;
    padding: 0 56px;
    margin: 0 -12px;
    margin: 0 -6px;
    padding: 0 16px;
    /* flex-direction: column; */
    align-items: start;
    /* justify-content: space-between; */
    align-items: center;
}
.banner>.box .searchlist>*{
    display: flex;
    align-items: center;
}
.banner>.box .searchlist .tit{
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    padding-right: 8px;
}
.banner>.box .searchlist ul{
    display: flex;
    align-items: center;
    margin: -4px;
    flex-wrap: wrap;
    flex: 1 0 0%;
}
.banner>.box .searchlist ul>li{padding: 4px;}
.banner>.box .searchlist ul>li>a{
    font-style: normal;
    font-weight: 700;
    color: var(--blue-500);
    background: var(--blue-10per);
    display: flex;
    border-radius: 999px;
    align-items: center;
    font-size: 8px;
    height: 18px;
    padding: 0 6px;
}
.banner>.box .searchlist .info{
    padding: 0 12px;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    font-size: 10px;
    padding-left: 0;
    padding-right: 0;
}
.banner>.box>img{
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 105px;
    /* display: none; */
}
.banner>.box>p{
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-style: normal;
    line-height: 1;
    font-weight: 300;
    width: 100%;
    padding: 16px;
}
.banner>.box>p>span{
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    color: var(--blue-500);
    line-height: 1;
}
.banner>.box>p>em{
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    color: var(--blue-500);
    line-height: 1;
}
.banner>.imgbox {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
}
.banner>.imgbox:after{
	content:"";
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 40px;
	background: #F2F6FA;
	filter: blur(27.5px);
}
.banner>.imgbox>img{position: absolute;opacity: 0.5;}
.banner>.imgbox .img1{
    top: 0;
    width: 530px;
    display: none;
}
.banner>.imgbox .img2{
	left: 50%;
    transform: translateX(-50%);
}
.banner>.imgbox .img3{
    right: 0;
    width: 530px;
    top: -60px;
    display: none;
}
.sub-page-bgimg-2>img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -122px;
    width: 100%;
    /* display: none; */
}
    [class*="sub-page-2"].banner>.box>.info{
    height: 24px;
    display: inline-flex;
    padding: 0 10px;
    align-items: center;
    font-size: 11px;
}
    [class*="sub-page-2"].banner>.box>.top{
    padding: 0;
    margin-bottom: 0;
    margin-top: 8px;
    align-items: self-start;
}
[class*="sub-page-2"].banner>.box>.top>p>span{
	display: block;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
}
    [class*="sub-page-2"].banner>.box>.top>.title{
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    color: #000;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-bottom: 32px;
}
    [class*="sub-page-2"].banner>.box>.top>.title .bookmark{
    font-size: 24px;
    margin-left: 8px;
    color: var(--gray-500);
}
[class*="sub-page-2"].banner>.box>.top>.title .bookmark.active{color: var(--orange-500);}
[class*="sub-page-2"].banner>.box>.top>.navigation>.row{justify-content: center;flex-wrap: nowrap;}
    [class*="sub-page-2"].banner{
    width: 100%;
}
.sub-page-2-1.banner>.box>.top{ align-items: normal;}
[class*="sub-page-bgimg-3"]>img{
    position: absolute;
    width: 952.288px;
    right: -356.288px;
    top: -210px;
}
[class*="sub-page-3"].banner>.box{padding: 40px 16px;}
[class*="sub-page-3"].banner>.box>.top{
    padding: 0;
    margin-bottom: 0;
}
[class*="sub-page-3"].banner>.box>.top>p{/* text-align: center; */display: flex;flex-direction: column;align-items: center;}
[class*="sub-page-3"].banner>.box>.top>p>span{
    display: block;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
}
[class*="sub-page-3"].banner>.box>.top>p>span.txt2{
	font-size: 15px;
	font-style: normal;
	font-weight: 300;
	margin: 16px 0;
}
[class*="sub-page-3"].banner>.box>.top .navigation>.row{
    justify-content: center;
}
.sub-page-bgimg-3-1>img{
    width: 952.288px;
    height: 454.15px;
    right: -356.288px;
    top: -140px;
}
.sub-page-bgimg-3-2>img{
    position: absolute;
    width: 952.288px;
    height: 454.15px;
    top: auto;
    right: -356.288px;
    top: -160px;
}
.sub-page-bgimg-3-3>img{
    position: absolute;
    top: auto;
    width: 952.288px;
    height: 454.15px;
    top: -95px;
    right: auto;
    left: -222px;
}

[class*='sub-page-bgimg-']{width:100%;left:50%;transform: translateX(-50%);position: absolute;top: 0;overflow-x: hidden;height: 454.15px;overflow: hidden;}
.sub-page-bgimg-1>img{position: absolute;}
.sub-page-bgimg-1>.img1{
left: -203px;
top: -198px;
width: 621.457px;
width: 463.858px;
left: -156px;
top: -164px;
}
.sub-page-bgimg-1>.img2{
right: -502px;
top: -309px;
width: 989.985px;
width: 590.508px;
right: -264.471px;
top: -122px;
transform: rotate(311deg);
}

.sub-page-bgimg-4{height: 244px;}
.sub-page-bgimg-4>img{
    left: -285px;
    top: -172px;
    position: absolute;
    width: 822px;
    height: 392px;
}
.sub-page-4.banner>.box{padding: 40px 0;}
.sub-page-4.banner>.box>.top{
    margin: 0;
    padding: 21px 0;
}
.sub-page-4.banner>.box>.top>p{
    margin: 0;
}
.banner>.box .filter-box.trans{margin-top: -16px;/* position: fixed; */z-index: 1;}
.banner>.box .filter-box .fake-modal.custum-modal{
    overflow: visible;
    position: static;
}
.banner>.box .filter-box .fake-modal.custum-modal .cutum-modal-dialog{
    width: 100%;
    transform: none;
    position: static;
    max-width: inherit;
    padding: 24px;
    box-shadow: var(--dropShadow-elevation-le3);
    margin-top:0;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: visible;
}
.banner>.box .filter-box .fake-modal.custum-modal .modal-content{overflow: visible;}
.banner>.box .filter-box .fake-modal.custum-modal .cutum-modal-dialog .modal-body{padding: 0;max-height: inherit;}
.banner>.box .filter-box .fake-modal.custum-modal .cutum-modal-dialog .modal-body .modal-tit-1 .txt1{
    font-size: 16px;
}


.content {
    margin-top: -19px;
    position: relative;
    margin-top: 0;
}
.search-value{border-top: 1px solid var(--gray-400);padding-top: 24px;padding-bottom: 32px;}
.search-value>.tit{
    font-style: normal;
    font-weight: 300;
    display: flex;
    align-items: flex-end;
    font-size: 16px;
    padding: 0 8px;
    margin-bottom: 16px;
}
.search-value>.tit>em{
	font-style: normal;
	font-weight: 600;
	color:var(--blue-500);
	font-size: 24px;
}
.search-value>.list{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
    border-radius: 999px;
    box-shadow: var(--dropShadow-elevation-le2);
    padding: 15px 16px;
    border-radius: 8px;
    border: 1px solid var(--gray-300);
}
.search-value>.list>.row{
    margin: 0 -8px;
    margin: -4px;
}
.search-value>.list>.row>div{
    padding: 0 8px;
    padding: 4px;
}
.search-value>.list .box{
    background: var(--gray-15per);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 999px;
    padding: 8px 24px;
    padding-right: 16px;
    transition: all 0.5s;
    cursor: pointer;
    padding: 7px 16px;
}
.search-value>.list .box p{
    font-style: normal;
    font-weight: 700;
    color: var(--gray-500);
    font-size: 14px;
}
.search-value>.list .box span{
    border-radius: 999px;
    padding: 7px 4.5px;
    background: var(--orange-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 12px;
}
.search-value>.list .box.active,
.search-value>.list .box:hover{background: var(--blue-500);}
.search-value>.list .box.active p,
.search-value>.list .box:hover p{color: #fff;}
.search-value>.list .box.active span,
.search-value>.list .box:hover span{background: #fff;color: var(--blue-500);}

/**/

/*intro-box*/
.intro-box{
    width: 100%;
    height: 100vh;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    background-image: url('../images/intro.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: auto;
}
.intro-box:before{
	content:"";
	background-image: url('../images/intrologo.svg');
	position: absolute;
	right: 0;
	bottom: 0;
	width: 521px;
	height: 519px;
}
.intro-box>.content{
    padding: 71px 0;
    margin: 0;
    box-sizing: border-box;
    height: auto;
    text-align: center;
    width: 1246px;
    margin: auto;
    /* overflow: auto; */
    /* height: 100%; */
}
.intro-box>.content>img{
    height: 59px;
    margin-bottom: 32px;
}
.intro-box>.content>div{
    margin-bottom: 32px;
    border-radius: 24px;
    border: 1px solid #FFF;
    background: linear-gradient(109deg, rgba(255, 255, 255, 0.48) -0.56%, rgba(255, 255, 255, 0.24) 109.05%);
    box-shadow: 0px 4px 35px 4px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 16px;
    line-height: 1;
    font-size: 0;
    height: calc(100% - 91px - 75px - 78px);
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 700px;
}
.intro-box>.content>div>img{/* width: auto; *//* position: absolute; *//* width: calc(100% - 32px); *//* left: 50%; *//* top: 50%; *//* transform: translate(-50%,-50%); */height: 100%;}
.intro-box>.content>div>button{
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.74);
	background: rgba(35, 35, 35, 0.50);
	backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	font-size: 38px;
	color: #fff;
	width: 72px;
	height: 72px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.intro-box>.content>button{
    border-radius: 999px;
    padding: 12px 24px;
    border: 0;
    background: var(--blue-500);
    color: #fff;
    display: block;
    margin: auto;
    margin-top: 0;
    margin-bottom: 32px;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
}
.intro-box>.content>button>*{color:inherit}
.intro-box>.content>span{
	font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 120%; /* 16.8px */
}
/*grid-box-1*/
[class*="grid-box-"]>.row{margin:-8px;}
[class*="grid-box-"]>.row>div{padding:8px;}
.grid-box-2>.row{margin:-8px -12px;}
.grid-box-2>.row>div{padding:8px 12px;}
.grid-box-4px>.row{margin:-4px;}
.grid-box-4px>.row>div{padding:4px;}
.grid-box-6px>.row{margin:-6px;}
.grid-box-6px>.row>div{padding:6px;}
.grid-box-8px>.row{margin:-8px;}
.grid-box-8px>.row>div{padding:8px;}

/*//*/
/*tab-box*/
.tab-box>div {
    overflow: visible;
    max-height:0px;
    box-shadow: none;
    border: 0;
    display: none;
}
.tab-box>div.on{
    display:block;
    max-height: 100000px;
}
.tab-box.only-ver>div.on{
    box-shadow: none;
    border-radius:0;
}
/*//*/
.mobile-fixed-btn {
    position: fixed;
    bottom: 0;
    z-index: 1;
}
.mobile-fixed-btn .capsule-box>.row>div{
    background: #fff;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    height: 48px;
    font-size: 16px;
}
.mobile-fixed-btn .capsule-box>.row>div:hover{color:var(--blue-500)}

/*prev-next-box*/
.prev-next-box{
    padding: 8px 0;
}
.prev-next-box>.row{
    justify-content: space-between;
}
.prev-next-box>.row>div{
    flex-grow: 0;
    white-space: nowrap;
}
.prev-next-box .box{
    display: flex;
    align-items: center;
    margin: 0 -8px;
}
.prev-next-box .box [class*="icon-"]{
    font-size: 36px;
    color: var(--blue-500);
    padding: 0 8px;
}
.prev-next-box .box .txt1{
    font-size: 24px;
    line-height: 1;
    padding: 0 8px;
}
.prev-next-box .box .txt1>span{
    display: block;
    line-height: 1;
}
/*//*/

/*sub-menu-bar*/

/* post-details- */
[class*='post-details-'] {
    padding: 32px 0;
    padding-bottom: 0;
}

[class*='post-details-']>.top {
    margin-bottom: 40px;
}

[class*='post-details-']>.top>.txt1 {
    font-weight: 600;
    font-size: 32px;
    font-size: 24px;
    margin-bottom: 16px;
    line-height: 120%; /* 28.8px */
}

[class*='post-details-']>.top .infobox {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-300);
}

[class*='post-details-']>.top .infobox>.row {
    margin: -4px -8px;
    justify-content: space-between;
}

[class*='post-details-']>.top .infobox>.row>div {
    padding: 4px 8px;
    flex-grow: 0;
    white-space: nowrap;
    /* flex-basis: 100%; */
    /* max-width: 100%; */
}

[class*='post-details-']>.top .infobox>.row>div>.txt1 {
    display: flex;
    align-items: center;
}

[class*='post-details-']>.top .infobox>.row>div>.txt1 i {
    margin-right: 5px;
    color: var(--blue-500);
    font-size: 18px;
}

[class*='post-details-']>.top .infobox>.row>div>.txt1 span {
    font-weight: 600;
    font-size: 14px;
    /* padding-right: 8px; */
    margin-right: 6px;
    position: relative;
    display: none;
}
[class*='post-details-']>.top .infobox>.row>div>.txt1 span:after {
    content: '';
    width: 1px;
    height: 14px;
    /* background: var(--Elements-Line); */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
[class*='post-details-']>.top .infobox>.row>div>.txt1 em {
    font-weight: 300;
    font-size: 14px;
}
[class*='post-details-']>.box {
    margin-bottom: 40px;
    /* padding-bottom: 16px; */
}
[class*='post-details-']>.box>*{max-width: 100%;}
[class*='post-details-']>.box.ver1{border-top: 1px solid var(--Elements-Line);border-bottom: 1px solid var(--Elements-Line);}
[class*='post-details-']>.box>.top {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--Elements-Line);
    margin-bottom: 16px;
}

[class*='post-details-']>.box>.body {
    overflow: hidden;
}
[class*='post-details-']>.box>.body .txt3{
    font-size: 14px;
}
.text-icon-3 {font-size: 20px;}
.text-icon-3 i{
    width: 32px;
    height: 32px;
    font-size: 20px;
}
[class*='post-details-']>.box>.body>.row {margin: 0 -16px;}

[class*='post-details-']>.box>.body>.row>div {padding: 0 16px;}
[class*='post-details-']>.box>.body>.row.ver1{margin: 0 -24px;}
[class*='post-details-']>.box>.body>.row.ver1>div{padding: 0 24px;}
[class*='post-details-']>.box>.body>.row>div.w-ver1{
    flex-basis: 92px;
    max-width: 92px;
}
[class*='post-details-']>.box>.body>.row>div.w-ver2{flex-grow:0;white-space: nowrap;}
[class*='post-details-']>.box>.body .txt1{
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    position: relative;
    padding-left: 6px;
}
[class*='post-details-']>.box>.body .txt1:before{
    content:'';
    width: 2px;
    height: 14px;
    background: var(--primary);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
[class*='post-details-']>.box>.body .txt2 {
    font-weight: 300;
    font-size: 15px;
    line-height: 150%;
}
[class*='post-details-']>.box>.body .txt2>span,
[class*='post-details-']>.box>.body .txt3>span{
    display: block;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
}

[class*='post-details-']>.box>.body .txt3>span{margin-bottom: 8px;display: flex;align-items: center;}
[class*='post-details-']>.box>.body .txt3>span>i{font-size:20px;margin-right: 4px;color: var(--blue-500);}
[class*='post-details-']>.box>.body .txt3>span:before{margin-bottom:0;}
[class*='post-details-']>.box>.body .txt1.ver1 {padding-left:0;display: flex;align-items: center;}
[class*='post-details-']>.box>.body .txt1.ver1 i{margin-right:6px;font-size: 20px;color: var(--blue-500);}
[class*='post-details-']>.box>.body .txt1.ver1:before{display:none;}
[class*='post-details-']>.box>.body .txt2 [class*='dot-'],[class*='dot-']{display:flex;
}
.post-details-box1{
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: #fff;
}
.post-details-box1>.row{margin:-12px}
.post-details-box1>.row>div{padding:12px;}
.post-details-box1 .txt1{
    display: flex;
    align-items: center;
	padding-bottom:16px;
	border-bottom:1px solid var(--gray-200);
}
.post-details-box1 .txt1 img{margin-right: 4px;width: 64px;}
.post-details-box1 .txt1 span{
	font-size: 18px;
font-style: normal;
font-weight: 600;
}
.post-details-box1 .txt2{
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
}
.post-details-box1 .list{
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-200);
}
.post-details-box1 .list li{
    display: flex;
    align-items: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    margin-bottom: 8px;
}
.post-details-box1 .list li:last-child{margin-bottom:0}
.post-details-box1 .list li i{
    font-size: 20px;
    margin-right: 4px;
    color: var(--blue-500);
}
.post-details-box1 .list li .check-radio-box label{font-size: 14px;}
.post-details-box1 .list li .check-radio-box label:before{font-size: 18px;}
.post-details-box1 .txt3{padding-top: 16px;display: flex;align-items: center;}
.post-details-box1 .txt3 i{
    font-size: 18px;
    margin-right: 5px;
}
.post-details-box1 .txt3 em{
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    margin-right: 5px;
}
.post-details-box1 .txt3 span{
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
}
.post-details-box2 {
    padding: 0;
}

.post-details-box2 .numbox {
    padding-bottom: 16px;
    display: flex;
    /* align-items: center; */
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 16px;
}

.post-details-box2 .numbox .num {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat";
    background: var(--blue-500);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-right: 8px;
    border-radius: 4px;
    padding: 0 7px;
}

.post-details-box2 .numbox .txt1 {
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
}
.post-details-box2 .check-radio-boxs>.row{ margin: -8px -16px;}
.post-details-box2 .check-radio-boxs>.row>div{padding: 8px 16px; display: flex;}
.post-details-box2 .check-radio-boxs .check-radio-box input+label{font-size: 15px;}
.post-details-box2 .check-radio-boxs .check-radio-box input+label:before{font-size: 20px;}
/* // */
/*top-box*/
.top-box{
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
    /* 諛곌꼍釉붾윭/�뿰�븿/sm-LV2 */
    box-shadow:var(--dropShadow-elevation-le2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px 32px;
    margin-bottom:32px;
    z-index: 10;
    position: relative;
    padding: 16px;
}
.top-box>.row{
    align-items: center;
    margin: -8px -4px;
}
.top-box>.row>div{
    padding: 8px 4px;
}
.top-box .txt1{
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    font-size: 16px;
}
.top-box .txt1 i{
    font-size: 24px;
    font-size: 18px;
}

.capsule-box{
    display: flex;
    align-items: center;
}
.capsule-box [class*="btn-"]{border: 1px solid #000;border-left: 0;border-radius: 0;font-weight: 600;padding: 0 7px;background: #fff;line-height: 1;}
.capsule-box>[class*="btn-"]:first-child{
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-left: 1px solid #000;
}
.capsule-box>[class*="btn-"]:last-child{
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    /* border-left: 1px solid #ccc; */
    /* border-radius: 6px; */
}
.capsule-box [class*="btn-"]:hover{
    transition: all .5s;
    border-color: var(--black-600);
    color: var(--black-600);
    background: var(--black-5per);
}
.capsule-box .active,
.capsule-box .active:hover{
    background: var(--black-500);
    color: #fff;
}
.capsule-box.bg-none-ver [class*="btn-"]{background:#fff0}
.capsule-box.bg-none-ver [class*="btn-"].active,
.capsule-box.bg-none-ver [class*="btn-"].active:hover{
	 background: var(--black-500);
    color: #fff;
}
.capsule-box.bg-none-ver [class*="btn-"]:hover{
	border-color: var(--black-600);
    color: var(--black-600);
    background: var(--black-5per);
}
/*//*/
[class*="shadow-blur-box-"]{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background:linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
    border-radius: 16px;
}
.shadow-blur-box-lev2{box-shadow: var(--dropShadow-elevation-le2);}
.paging-box ul>li>a {
    width: 20px;
    height: 20px;
    font-size: 12px;
}
/*//*/
.overflow-hidden-md-visible{overflow:hidden !important}

/*design-box*/
.design-box-1>.box {
    border-radius: 8px;
    overflow: hidden;
}
.design-box-1>.box>.row {
    margin: 0;
}
.design-box-1>.box>.row .top {
    padding: 8px 16px;
    background: var(--blue-10per);
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
}
.design-box-1>.box>.row .top i {
    font-size: 24px;
    margin-right: 4px;
}
.design-box-1>.box>.row .boxs {
    background: #fff;
    padding: 8px 16px;
}
.design-box-1>.box>.row .boxs.check-radio-boxs>.check-radio-box{
    display: flex;
    margin-bottom: 8px;
}
.design-box-1>.box>.row .boxs.check-radio-boxs>.check-radio-box:last-child{margin-bottom:0;}
.design-box-1>.box>.row .boxs.check-radio-boxs>.check-radio-box>label{width: 78px;}
.design-box-1>.box>.row .boxs.check-radio-boxs>.check-radio-box>:checked+label{font-weight:600;}
.design-box-1>.box>.row .boxs.check-radio-boxs>.check-radio-box>.stars i{
    font-size: 14px;
    color: var(--gray-500);
}
.design-box-1>.box>.row .boxs.check-radio-boxs>.check-radio-box>.stars i.F{
    color: var(--orange-500);
}
.design-box-1>.box>.row .boxs.input-boxs .form-area-box input{
    height: 95px;
}
.design-box-2{
    border: 1px solid var(--gray-300);
    padding: 16px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
}
.design-box-2 .txt1{
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1;
}
.design-box-3{
    border: 1px solid var(--gray-300);
    padding: 16px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
}
.design-box-3>.box{
    font-size: 0;
}
.design-box-3 .txt1{
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1;
}
.design-box-3 .box .btns{
    font-size: 0;
}
.design-box-3 .box .btns [class*="btn-"]{
    margin-right: 4px;
    width: 62px;
}
.design-box-4 {
    background: var(--gray-5per);
    border-radius: 8px;
    border: 1px solid var(--gray-500);
    padding: 32px;
    text-align: center;
}
.design-box-4>img {
    display: block;
    width: 64px;
    margin: auto;
    margin-bottom: 8px;
}
.design-box-4>.txt1 {
    margin-bottom: 32px;
    font-size: 10px;
    font-style: normal;
    font-weight: 300;
}
.design-box-4>.bartxt {
    margin: auto;
    margin-bottom: 24px;
    width: 410px;
}
.design-box-4>.bartxt .row {
    margin: 0 -4px;
    align-items: center;
}
.design-box-4>.bartxt .row>div {padding: 0 4px;}
.design-box-4>.bartxt .row>div .txt{
    font-size: 10px;
    font-style: normal;
    font-weight: 300;
}
.design-box-4>.bartxt .row>div .bar{
    background: #D9D9D9;
    height: 1px;
    width: 100%;
}
/*//*/
.bottom-box-btn>.row{
        margin: 0 -8px;
        justify-content: center;
        align-items: center;}
.bottom-box-btn>.row>div{    white-space: nowrap;
    padding: 8px;
    flex-grow: 0;}
/*sub-menu-bar*/
.sub-menu-bar{border-radius: 16px;background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);box-shadow: var(--dropShadow-elevation-le2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.sub-menu-bar>.row{margin: -8px;}
.sub-menu-bar>.row>div{
    font-size: 0;
    display: flex;
    align-items: center;
    padding: 8px;
}
.sub-menu-bar .box button{  
font-size: 16px; 
font-style: normal;
font-weight: 300;
border: 0;
padding: 0;
border-bottom: 4px solid #fff0;
}
.sub-menu-bar .box button:hover,
.sub-menu-bar .box button.active{
    color:var(--blue-500);
    border-bottom-color: var(--blue-500);
    font-weight: 600;
}
.sub-menu-bar .suport button{padding: 7px 1px;border-radius: 999px;font-size: 24px;}
.sub-menu-bar .suport button>i{font-size:inherit}

.navigation>.row>div{font-size:14px;}

/*tab-design-*/
[class*="tab-design-"]>ul {
    display: flex;
    align-items: center;
}
[class*="tab-design-"]>ul>li {
    flex: 1 0 0%;
    text-align: center;
    height: 40px;
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    color: var(--gray-950);
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
}
[class*="tab-design-"]>ul>li.disabled {color:#666; cursor:not-allowed;}
[class*="tab-design-"]>ul>li.active,
[class*="tab-design-"]>ul>li:not(.disabled):hover {
    border-color: var(--green-500);
    background: linear-gradient(180deg, rgba(0, 149, 126, 0.00) 10.94%, rgba(0, 149, 126, 0.15) 100%);
    color: var(--green-500);
}
[class*="tab-design-2"]{
    border-radius: 999px;
    padding: 6px 8px;
    background: var(--gray-15per);
    margin-bottom: 16px;
}
[class*="tab-design-2"]>.row{
    margin: -4px;
}
[class*="tab-design-2"]>.row>div{
    padding: 4px;
}
[class*="tab-design-2"] button.active,
[class*="tab-design-2"] button:hover{
	background: #fff;
	color: var(--gray-950);
}
[class*="tab-design-2"] button{
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 999px;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    background: #fff0;
    color: var(--gray-500);
}
[class*="tab-design-2"] button em{
    height: 18px;
    display: inline-flex;
    border-radius: 999px;
    padding: 0 8px;
    align-items: center;
    background: var(--gray-400);
    font-size: 11px;
    color: #fff;
}
[class*="tab-design-2"] button.active em{
    background: var(--orange-500);
}
.tab-design-2-1{
    border-radius: 8px;
    padding: 8px;
}
.tab-design-2-1 button{border-radius:8px;}
.tab-design-3>ul>li{
    font-size: 14px;
    font-weight: 300;
}
.tab-design-3>ul>li:hover,
.tab-design-3>ul>li.active{
    background: none;
    border: 0;
    position: relative;
    font-weight: 600;
}
.tab-design-3>ul>li:before{content:"";height: 0;width: 100%;position: absolute;bottom: -1px;z-index: 1;}
.tab-design-3>ul>li:hover:before,
.tab-design-3>ul>li.active:before{height:2px;background: var(--blue-500);}
.lev-box-2 li,
.lev-box-2 li>div{position:relative}
.lev-box-2>li {
    min-height: 34px;
    display: flex;
    cursor:pointer;
    flex-direction: column;
    justify-content: center;
}
.lev-box-2>li>div{display: flex;width: 100%;align-items: center;height: 34px;}
.lev-box-2 li .txt1{flex: 1 0 0%;height: 100%;display: flex;align-items: center;}
.lev-box-2 li>div>.txt1{
    height: 100%;
    width: 100%;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
    color: var(--gray-600);
}
.lev-box-2 li>div>.check-radio-box{
    margin-right: 4px;
    padding: 0;
	position:relative;
	z-index:10;
}
.lev-box-2 li>div>.check-radio-box label{font-size:18px;}
.lev-box-2 li>div>.check-radio-box label:before{content: "\ed22";font-size:inherit;}
.lev-box-2 li>div>.check-radio-box label:hover:before{color:var(--blue-500)}
.lev-box-2 li>div>span{
    border-radius: 999px;
    background: var(--orange-500);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    height: 18px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.lev-box-2 li>div>i {color: var(--gray-600);margin-left: 4px;font-size: 18px;}
.lev-box-2>li.active>div>.txt1 i:before{content: "\ed19";}
.lev-box-2>li.active{height: auto;}
.lev-box-2>li.active>div .txt1,
.lev-box-2>li.active>div .txt1>i,
.lev-box-2>li.active>div:hover .txt1{color:var(--blue-500);}
.lev-box-2 li.active>div>i{
    color: var(--blue-500);
    transform: rotate(90deg);
}
.lev-box-2>li>div:hover .txt1{color: var(--gray-950);font-weight: 600;}
.lev-box-2 .lev2>li.active>div>i{color:var(--blue-500);transform: rotate(90deg);}
.lev-box-2 .lev2,
.lev-box-2 .lev3{display:none;}

.lev-box-2 .active>.lev2{display:block;border-top: 1px solid var(--gray-200);}
.lev-box-2 .lev2>li.active>div>.txt1,
.lev-box-2 .lev2>li.active>div>.txt1 i,
.lev-box-2 .lev2>li.active>div:hover>.txt1{color:var(--blue-500)}
.lev-box-2 .lev2>li.active>div:before,
.lev-box-2 .lev2>li.active>div:hover:before{background:var(--blue-500)}
.lev-box-2 .lev2>li>div:hover>.txt1{color:var(--gray-950);font-weight:600;}
.lev-box-2 .lev2>li>div:hover:before{background:var(--gray-950)}
.lev-box-2 .active>.lev2>li.active>div>.txt1 i:before{content: "\ed19";}
.lev-box-2 .lev2{padding-left:24px;}
.lev-box-2 .lev2>li{padding-left:17px;min-height: 32px;}
.lev-box-2 .lev2>li:before,
.lev-box-2 .lev2>li:after{
    content: "";
    height: 100%;
    width: 1px;
    background: var(--gray-400);
    position: absolute;
    left: 0;
    top: 0;
}
.lev-box-2 .lev2>li:after{
    height: 1px;
    width: 10px;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    top: 16px;
}
.lev-box-2 .lev2>li:last-child:before{height: 17px;}
.lev-box-2 .lev2>li>div{display: flex;height: 32px;align-items: center;}
.lev-box-2 .lev2>li>div:before{
	content: "";
	background: var(--gray-400);
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 20px;
	left: -7px;
}
.lev-box-2 .lev2 .active>.lev3{display:block;}
.lev-box-2 .lev3{padding-left: 8px;}
.lev-box-2 .lev3>li{padding-left:17px;height: 32px;}
.lev-box-2 .lev3>li:before,
.lev-box-2 .lev3>li:after{
    content: "";
    height: 100%;
    width: 1px;
    background: var(--gray-400);
    position: absolute;
    left: 0;
    top: 0;
}
.lev-box-2 .lev3>li:after{
    height: 1px;
    width: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.lev-box-2 .lev3>li:last-child:before{height:50%;}
.lev-box-2 .lev3>li>div{display: flex;height: 100%;align-items: center;}
.lev-box-2 .lev3>li>div:before{
	content: "";
	background: var(--gray-400);
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 20px;
	left: -7px;
}
.lev-box-2 .lev3>li>div [class*="icon-"]{font-size: 18px;transform: none;color:var(--gray-600)}
.lev-box-2 .lev3>li>div [class*="icon-"].icon-question-circle:hover,
.lev-box-2 .lev3>li>div [class*="icon-"].icon-question-circle.active{color:var(--blue-500)}
.lev-box-2 .lev3>li>div [class*="icon-"].icon-star:hover,
.lev-box-2 .lev3>li>div [class*="icon-"].icon-star.active{color:var(--orange-500)}
.lev-box-2 .lev3>li>div .txt1 .cycle,
.lev-box-2 .lev3>li>div .txt1 .square,
.lev-box-2 .lev3>li>div .txt1 .rectangle,
.only-cycle,
.only-square,
.only-rectangle{
    width: 18px;
    height: 18px;
    display:inline-block;
	position: relative;
}
.lev-box-2 .lev3>li>div .txt1 .square::before,
.lev-box-2 .lev3>li>div .txt1 .cycle::before,
.lev-box-2 .lev3>li>div .txt1 .rectangle::before,
.only-cycle:before,
.only-square:before,
.only-rectangle::before{
    content:'';
	position:absolute;
	background:inherit;
}
.lev-box-2 .lev3>li>div .txt1 .cycle::before,
.only-cycle:before{
	width:12px;
	height:12px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	border-radius: 12px;
}
.lev-box-2 .lev3>li>div .txt1 .square::before,
.only-square:before{
	width:12.5px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(-45deg);
}
.lev-box-2 .lev3>li>div .txt1 .rectangle::before,
.only-rectangle:before{
	width:100%;
    height:100%;
}
.lev-box-2 .lev3>li>div .txt1 .cycle.color1::before,
.only-cycle.color1::before{background: #DB00FF;}
.lev-box-2 .lev3>li>div .txt1 .cycle.color2::before,
.only-cycle.color2::before{background:#FF00D6}
.lev-box-2 .lev3>li>div .txt1 .cycle.color3::before,
.only-cycle.color3::before{background:#9A0D84}
.lev-box-2 .lev3>li>div .txt1 .cycle.color4::before,
.only-cycle.color4::before{background:#3A0D9A}
.lev-box-2 .lev3>li>div .txt1 .cycle.color5::before,
.only-cycle.color5::before{background:#0D9A81}
.lev-box-2 .lev3>li>div .txt1 .cycle.color6::before,
.only-cycle.color6::before{background:#FEA613}
.lev-box-2 .lev3>li>div .txt1 .square.color1::before {background:var(--blue-500)}
.lev-box-2 .lev3>li>div .txt1 .square.color2::before {background:var(--green-500)}
.only-square { cursor: pointer; }
.only-square.active { border: 1px solid black; }
.only-square.color1::before { background: #000; }
.only-square.color2::before { background: #CCC; }
.only-square.color3::before { background-image: linear-gradient(to right, black 50%, transparent 50%); background-size: 4px 1px; }
.only-square.color4::before { background: #FF0000; }
.only-square.color5::before { background: #00FF00; }
.only-square.color6::before { background: #0000FF; }


.lev-box-2 .lev3>li>div .txt1 .rectangle.color1::before,
.only-rectangle.color1::before{background:#DE716E}

.lev-box-2 .lev3>li.active>div>.txt1,
.lev-box-2 .lev3>li.active>div>.txt1 i,
.lev-box-2 .lev3>li.active>div:hover>.txt1{color:var(--blue-500)}
.lev-box-2 .lev3>li.active>div:before,
.lev-box-2 .lev3>li.active>div:hover:before{background:var(--blue-500)}
.lev-box-2 .lev3>li.active>div>.txt1 i:before{content: "\ed19";}
.lev-box-2 .lev3>li>div:hover>.txt1{color:var(--gray-950);font-weight:600;}
.lev-box-2 .lev3>li>div:hover:before{background:var(--gray-950)}

/*lev3*/
/*.lev-box-2*/
.lev-box-3 li,
.lev-box-3 li>div{position:relative}
.lev-box-3>li {
    min-height: 34px;
    display: flex;
    cursor:pointer;
    flex-direction: column;
    justify-content: center;
}
.lev-box-3>li>div{display: flex;width: 100%;align-items: center;height: 34px;}
.lev-box-3 li .txt1{flex: 1 0 0%;height: 100%;display: flex;align-items: center;}
.lev-box-3 li>div>.txt1{
    height: 100%;
    width: 100%;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
    color: var(--gray-600);
}
.lev-box-3 li>div>.check-radio-box{
    margin-right: 4px;
    padding: 0;
	position:relative;
	z-index:10;
}
.lev-box-3 li>div>.check-radio-box label{font-size:18px;}
.lev-box-3 li>div>.check-radio-box label:before{content: "\ed22"; font-size: inherit;}
.lev-box-3 li>div>.check-radio-box label:hover:before{color:var(--blue-500)}
.lev-box-3 li>div>span{
    border-radius: 999px;
    background: var(--orange-500);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    height: 18px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.lev-box-3 li>div>i {color: var(--gray-600);margin-left: 4px;font-size: 18px;}
.lev-box-3>li.active>div>.txt1 i:before{content: "\ed19";}
.lev-box-3>li.active{height: auto;}
.lev-box-3>li.active>div .txt1,
.lev-box-3>li.active>div .txt1>i,
.lev-box-3>li.active>div:hover .txt1{color:var(--blue-500);}
.lev-box-3 li.active>div>i{
    color: var(--blue-500);
    transform: rotate(90deg);
}
.lev-box-3>li>div:hover .txt1{color: var(--gray-950);font-weight: 600;}
.lev-box-3 .lev2>li.active>div>i{color:var(--blue-500);transform: rotate(90deg);}
.lev-box-3 .lev2,
.lev-box-3 .lev3{display:none;}

.lev-box-3 .active>.lev2{display:block;border-top: 1px solid var(--gray-200);}
.lev-box-3 .lev2>li.active>div>.txt1,
.lev-box-3 .lev2>li.active>div>.txt1 i,
.lev-box-3 .lev2>li.active>div:hover>.txt1{color:var(--blue-500)}
.lev-box-3 .lev2>li.active>div:before,
.lev-box-3 .lev2>li.active>div:hover:before{background:var(--blue-500)}
.lev-box-3 .lev2>li>div:hover>.txt1{color:var(--gray-950);font-weight:600;}
.lev-box-3 .lev2>li>div:hover:before{background:var(--gray-950)}
.lev-box-3 .active>.lev2>li.active>div>.txt1 i:before{content: "\ed19";}
.lev-box-3 .lev2{padding-left:24px;}
.lev-box-3 .lev2>li{padding-left:17px;min-height: 32px;}
.lev-box-3 .lev2>li:before,
.lev-box-3 .lev2>li:after{
    content: "";
    height: 100%;
    width: 1px;
    background: var(--gray-400);
    position: absolute;
    left: 0;
    top: 0;
}
.lev-box-3 .lev2>li:after{
    height: 1px;
    width: 10px;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    top: 16px;
}
.lev-box-3 .lev2>li:last-child:before{height: 17px;}
.lev-box-3 .lev2>li>div{display: flex;height: 32px;align-items: center;}
.lev-box-3 .lev2>li>div:before{
	content: "";
	background: var(--gray-400);
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 20px;
	left: -7px;
}
.lev-box-3 .lev2 .active>.lev3{display:block;}
.lev-box-3 .lev3{padding-left: 8px;}
.lev-box-3 .lev3>li{padding-left:17px;height: 32px;}
.lev-box-3 .lev3>li:before,
.lev-box-3 .lev3>li:after{
    content: "";
    height: 100%;
    width: 1px;
    background: var(--gray-400);
    position: absolute;
    left: 0;
    top: 0;
}
.lev-box-3 .lev3>li:after{
    height: 1px;
    width: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.lev-box-3 .lev3>li:last-child:before{height:50%;}
.lev-box-3 .lev3>li>div{display: flex;height: 100%;align-items: center;}
.lev-box-3 .lev3>li>div:before{
	content: "";
	background: var(--gray-400);
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 20px;
	left: -7px;
}
.lev-box-3 .lev3>li>div [class*="icon-"]{font-size: 18px;transform: none;color:var(--gray-600)}
.lev-box-3 .lev3>li>div [class*="icon-"].icon-question-circle:hover,
.lev-box-3 .lev3>li>div [class*="icon-"].icon-question-circle.active{color:var(--blue-500)}
.lev-box-3 .lev3>li>div [class*="icon-"].icon-star:hover,
.lev-box-3 .lev3>li>div [class*="icon-"].icon-star.active{color:var(--orange-500)}

.listbtn>.row {margin: -2px;}
.listbtn>.row>div {padding: 2px;}
.listbtn .btns {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    background: #fff0;
}
.listbtn .btns>span{
    flex: 1 0 0%;
    text-align: left;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
}
.listbtn .btns>img{
    width: 20px;
    margin-right: 6px;
}
.listbtn .btns>em{
    border-radius: 999px;
    background: var(--orange-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    padding: 2.5px 8px;
    font-size: 11px;
    font-weight: 600;
}
.listbtn .btns:hover {background: var(--blue-5per);}
.listbtn .btns:hover span{font-weight: 600;}
.listbtn .btns.active {background: var(--blue-500);}
.listbtn .btns.active span{color:#fff;font-weight:600;}
.listbtn .btns.active em{background:#fff; color:var(--blue-500)}
[class*="details-box-"]>.imgs {
    height: 280px;
    position: relative;
    width: 416px;
    overflow: hidden;
    margin-bottom: 16px;
}
[class*="details-box-"]>.imgs>img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
[class*="details-box-"]>.top {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 16px;
    margin-bottom: 16px;
}
[class*="details-box-"] .txt1 {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    color: #000;
}
[class*="details-box-"]>.top>.info {
    margin-top: 4px;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 300;
    line-height: 135%; /* 13.5px */
    color: var(--gray-600);
}
[class*="details-box-"]>.top>.info>i {
    color: var(--gray-600);
    font-size: 14px;
}
[class*="details-box-"]>.top>.info>em {
    color: inherit;
/* 罹≪뀡/10pt/�꽭誘몃낵�뱶 */
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 135%; /* 13.5px */
}
[class*="details-box-"]>.center {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 16px;
    margin-bottom: 16px;
}
[class*="details-box-"] .txt2 {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 16.8px */
    color: #000;
}
[class*="details-box-"]>.bottom>.tit1 {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 16.8px */
    color: #000;
}
[class*="details-box-"]>.bottom>ul {
    margin: -4px;
}
[class*="details-box-"]>.bottom>ul>li {
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 15.6px */
    display: flex;
    align-items: center;
    padding: 4px;
}
[class*="details-box-"]>.bottom>ul>li>i {
    color: var(--gray-950);
    font-size: 16px;
    margin-right: 4px;
}

.infobtn {
    height: 18px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 8px;
    font-style: normal;
    font-weight: 600;
}
[class*="accordion-box"]{
    overflow-x: hidden;
    overflow-y: auto;
}
[class*="accordion-box"] .list{
    margin-bottom: 16px;
}
[class*="accordion-box"] .list [class*="top-tit-"]{border-bottom: 1px solid var(--gray-400);padding-bottom: 16px;overflow: hidden;}
[class*="accordion-box"] .list .contentbox{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}
[class*="accordion-box"] .list.active .contentbox{
    max-height: 1000px;
    overflow: hidden;
    /* transition: max-height 0.5s; */
    border: 1px solid var(--gray-300);
}
[class*="accordion-box"] .list.active [class*="top-tit-"]{
    border-bottom: 0;
    padding-bottom: 8px;
    margin-bottom: 0;
}
[class*="accordion-box"] .list .icons{font-size: 22px;}
[class*="accordion-box"] .list.active .icons{
    transform: rotate(90deg);
    color:var(--blue-500);
    display: block;
}
.accordion-box-1 .list{
    /* padding: 0 16px; */
    margin: 0;
}
.accordion-box-1 .list [class*="top-tit-"]{
    padding: 8px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--gray-200);
}
.accordion-box-1 .list.active{border-bottom:1px solid var(--gray-200)}
.accordion-box-1 .list.active [class*="top-tit-"]{background: var(--blue-5per);border-bottom: 1px solid var(--gray-200);padding: 8px 16px;}
.accordion-box-1 .list.active [class*="top-tit-"] .txt1{color:var(--blue-500)}
.accordion-box-1 .list.active .contentbox{border: 0;}
.accordion-box-1 .list .contentbox .list{
    display: flex;
    padding: 8px 16px;
    align-items: center;
    justify-content: space-between;
}
.accordion-box-1 .list .contentbox .list .check-radio-box label{font-size: 14px;color: var(--gray-600);font-weight: 300;}
.accordion-box-1 .list .contentbox .list .check-radio-box label:before{
    font-size: 18px;
}
.accordion-box-1 .list .contentbox .list>.icons{
    transform: none;
    font-size: 18px;
    color: var(--gray-600);
}
.accordion-box-1 .list .contentbox .list>.icons>i{color:inherit;font-size:inherit;line-height: 1;}
.layout-design-box-1>p{display: flex;}
.layout-design-box-1>p>span{flex: 1 0 0%;}
.layout-design-box-1>p a{color:var(--gray-500);margin-left:4px;display: flex;line-height: 1; font-size: 22px;}
.layout-design-box-1>p a.active{color:var(--blue-500)}
.layout-design-box-1>p a.icon-star.active{color: var(--orange-500);}
.layout-design-box-1>p a:hover{color:var(--blue-500)}
.layout-design-box-1>p a.icon-star:hover{color: var(--orange-500);}
.trans  .fake-modal.custum-modal,
.trans2 .fake-modal.custum-modal {
    z-index: 10000;
    opacity: 1;
    display: block;
    overflow: visible;
}


.fake-modal.custum-modal {
    position: absolute;
    width: fit-content;
    height: auto;
    padding: 0;
    right: 0;
    display: none;
}
.fake-modal.custum-modal {color:var(--gray-950)}
.fake-modal.custum-modal .cutum-modal-dialog{
    border: 1px solid var(--white-5per);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.76) 100%);
    box-shadow:var(--dropShadow-elevation-le5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: none;
    max-width: inherit;
    max-height: inherit;
    overflow: hidden;
    position: static;
}
.fake-modal.custum-modal .cutum-modal-dialog .modal-body {overflow: visible;}
.fake-modal.custum-modal.ver1 .cutum-modal-dialog{/* background:linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%); */background: none;border: 0;overflow: visible;backdrop-filter: none;-webkit-backdrop-filter: none;margin: 0;}
.fake-modal.custum-modal.ver1 .cutum-modal-dialog .modal-content{background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);overflow: visible;border: 1px solid var(--white-5per);border-radius: 10px; background: #fff;}
.fake-modal.custum-modal.ver1 .modal-header{
	padding-top:16px;
	padding-bottom:8px;
	margin:0 16px;
	overflow: visible;
}
.fake-modal.custum-modal.ver1 .modal-header .modal-title>i{font-size: 22px;}
.fake-modal.custum-modal.ver1 .modal-header .modal-title>span{font-size: 18px;}
.fake-modal.custum-modal.ver1 .modal-header .close-btn{font-size:22px;}
.fake-modal.custum-modal.ver1 .modal-body{
    padding: 16px;
    padding-top: 0;
}
[class*='popular-term-']{
	display: flex;
	flex-direction: column;
}
[class*='popular-term-'] p{
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	margin-bottom: 16px;
}
[class*='popular-term-'] ul{
	display: flex;
    align-items: center;
    margin: -4px;
    flex-wrap: wrap;
    flex: 1 0 0%;
}
[class*='popular-term-'] ul li{padding: 4px;}
[class*='popular-term-'] ul li a{
	font-style: normal;
	font-weight: 700;
	color: var(--blue-500);
	background: var(--blue-10per);
	display: flex;
	border-radius: 999px;
	align-items: center;
	font-size: 11px;
	height: 24px;
	padding: 0 10px;
}
.layout-list-box>.box{
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 8px;
	margin-bottom:8px;
}
.layout-list-box>.box:last-child{margin-bottom:0}
.layout-list-box>.box>*{padding: 0 3px;}
.layout-list-box>.box>.txt{flex: 1 0 0%;}
.layout-list-box>.box [class*="icon-"]{font-size:18px; color:var(--gray-950);}
.layout-list-box>.box .cycle{
	width: 12px;
	height: 12px;
	display:flex;
	border-radius: 12px;
}
.layout-list-box>.box .square{
	width: 18px;
	height: 18px;
	display:flex;
	border-width:3px;
	border-style: solid;
}
.layout-list-box>.box .cycle.color1{background:#DB00FF;}
.layout-list-box>.box .cycle.color2{background:#FF00D6}
.layout-list-box>.box .cycle.color3{background:#9A0D84}
.layout-list-box>.box .cycle.color4{background:#3A0D9A}
.layout-list-box>.box .cycle.color5{background:#0D9A81}
.layout-list-box>.box .square.color1{border-color:var(--blue-500)}
.layout-list-box>.box .square.color2{border-color:var(--green-500)}
.layout-list-box>.box .tooltipsbox{
    position: relative;
}
.layout-list-box>.box .tooltipsbox .tooltips{
    position: absolute;
    top: -44px;
    left:0;
    box-shadow: var(--dropShadow-elevation-le3);
    border: 1px solid var(--gray-300);
    padding: 8px;
    background: #fff;
    border-radius: 4px;
    display: none;
}
.layout-list-box>.box .tooltipsbox.trans .tooltips{display:block;z-index: 1;}
.layout-list-box>.box .tooltipsbox.icon-droplet .tooltips{
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px;
}
.layout-list-box>.box .tooltipsbox.square .tooltips{top: -55px;left: 50%;transform: translateX(-50%);}
.layout-list-box>.box .opacitybox{
    display: flex;
    align-items: center;
    white-space: nowrap;
	margin:0 -4px;
}
.layout-list-box>.box .opacitybox .opacity-input,
.opacitybox.onlyver .opacity-input{
    height: 4px;
    width: 85px;
    position: relative;
    background: var(--green-500-t30);
    background: rgba(0, 149, 126, 0.3);
    border-radius: 999px;
}
.opacitybox.onlyver .opacity-input{
    display: flex;
}
.layout-list-box>.box .opacitybox .opacity-input .bg,
.opacitybox.onlyver .bg{
    position: absolute;
    top: 0;
    left: 0;
    background: var(--green-500);
    border-radius: 6px;
    height: 100%;
}
.layout-list-box>.box .opacitybox .txt{padding: 0 4px;line-height: 1;font-size: 10px;font-style: normal;font-weight: 300;}
.layout-list-box>.box .opacitybox input,
.opacitybox.onlyver input{margin:0 4px;}

.layout-list-box>.box .opacitybox input,
.opacitybox.onlyver input{
    height: 4px;
    -webkit-appearance: none;
    width: 100%;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 85px;
    transform: translate(-50%,-50%);
    background: var(--gray-25per);
  }
  .layout-list-box>.box .opacitybox input:focus,
  .opacitybox.onlyver input:focus {
    outline: none;
  }
  .layout-list-box>.box .opacitybox input::-webkit-slider-runnable-track ,
  .opacitybox.onlyver input::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    /*animate: 0.2s;*/
   /* box-shadow: 1px 1px 1px #002200;*/
    background: #20592800;
    border-radius: 1px;
    border: 1px solid #18d50100;
  }
  .layout-list-box>.box .opacitybox input::-webkit-slider-thumb,
  .opacitybox.onlyver input::-webkit-slider-thumb {
    background: #ffffff;
      cursor: pointer;
      -webkit-appearance: none;
      border-radius: 24px;
      border: 4px solid var(--green-500);
      width: 14px;
      height: 14px;
      margin-top:-1px;
      box-shadow: var(--dropShadow-elevation-le2);	  
  }
  .layout-list-box>.box .opacitybox input::-ms-track,
  .opacitybox.onlyver input::-ms-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    /*animate: 0.2s;*/
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  .layout-list-box>.box .opacitybox input::-ms-fill-lower,
  .opacitybox.onlyver input::-ms-fill-lower {
    background: #205928;
    border: 1px solid #18D501;
    border-radius: 2px;
    box-shadow: 1px 1px 1px #002200;
  }
  .layout-list-box>.box .opacitybox input::-ms-fill-upper,
  .opacitybox.onlyver input::-ms-fill-upper {
    background: #205928;
    border: 1px solid #18D501;
    border-radius: 2px;
    box-shadow: 1px 1px 1px #002200;
  }
  .layout-list-box>.box .opacitybox input::-ms-thumb,
  .opacitybox.onlyver input::-ms-thumb {
    margin-top: 1px;
    box-shadow: 3px 3px 3px #00AA00;
    border: 2px solid #83E584;
    height: 23px;
    width: 23px;
    border-radius: 23px;
    background: #439643;
    cursor: pointer;
  }
  .opacitybox.onlyver.ver1 .opacity-input{
    background: #fff0;
    padding: 0 9px;
    height: 12px;
}
  .opacitybox.onlyver.ver1 .opacity-input .bg{
    height: 4px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 10;
    overflow: visible;
}
  .opacitybox.onlyver.ver1 .opacity-input .listbox{width: 100%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);z-index: 1; height:100%;}
  .opacitybox.onlyver.ver1 .opacity-input .listbox>.row{
    justify-content: space-between;
}
  .opacitybox.onlyver.ver1 .opacity-input .listbox>.row>div{
    flex-grow: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.opacitybox.onlyver.ver1 .opacity-input .listbox>.row>div:before{
	content:"";
	border-radius: 24px;
	width: 12px;
	height: 12px;
	display:inline-block;
	background: var(--gray-200);
}
.opacitybox.onlyver.ver1 .opacity-input .listbox>.row>div.active:before{background:var(--blue-500)}
  .opacitybox.onlyver.ver1 .opacity-input input{background: #fff0;z-index: 10;}
  .opacitybox.onlyver.ver1 .opacity-input input::-webkit-slider-thumb{
    background:var(--blue-500);
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 24px;
    /* border: 4px solid var(--blue-500); */
    width: 12px;
    height: 12px;
    margin-top:-1px;
    box-shadow: var(--dropShadow-elevation-le2);
  }
.opacitybox.onlyver.ver1 .opacity-input:after{content:"";width: 100%;height: 4px;position: absolute;background: var(--gray-200);top: 50%;transform: translateY(-50%);left: 0;}
 .opacitybox.onlyver .bg .tooltip{
    display:none;
    position: absolute;
    bottom: calc(100% + 6px);
    right: -18px;
    padding: 6px 10px;
    background: #fff;
    z-index: 10;
    opacity: 1;
    font-size: 8px;
    font-style: normal;
    font-weight: 300;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 4px;
    color: var(--gray-600);
    border: 0.6px solid var(--gray-500);
  }
  .opacitybox.onlyver .bg.trans .tooltip{display:block;}
.opacitybox.onlyver .bg .tooltip:after{
	content:"";
	border-radius: 3px;
	position: absolute;
	width: 12px;
	height: 12px;
	background: var(--gray-950);
	transform: rotate(45deg) translateX(-50%);
	left: 50%;
	bottom: -8px;
	opacity: 0;
}
.opacitybox.onlyver .bg .tooltip span{color: inherit;display: block;line-height: 1;}
  .opacitybox.onlyver.ver1 .bg.trans .tooltip{display:block;}
.opacitybox.onlyver.ver1 .bg .tooltip{
    display:none;
    position: absolute;
    bottom: calc(100% + 12px);
    right: -18px;
    padding: 6px 10px;
    background: var(--gray-950);
    /* background-image: url('../images/�댋�똻base.png'); */
    z-index: 10;
    font-size: 12px;
    opacity: 1;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 4px;
  }
.opacitybox.onlyver.ver1 .bg .tooltip:after{
	content:"";
	border-radius: 3px;
	position: absolute;
	width: 12px;
	height: 12px;
	background: var(--gray-950);
	transform: rotate(45deg) translateX(-50%);
	left: 50%;
	bottom: -8px;
}
.opacitybox.onlyver.ver1 .bg .tooltip span{color:#fff;display: block;line-height: 1;}
  .opacitybox.onlyver.ver1 .bg.trans .tooltip{display:block;}
  .layout-list-box>.box .opacitybox input:focus::-ms-fill-lower {background: #205928; }
  .layout-list-box>.box .opacitybox input:focus::-ms-fill-upper {background: #205928;}
  .layout-list-box>.box .palettebox>div,
  .onlyver.palettebox>div{
    margin: -2px;
    display: flex;
}   .layout-list-box>.box .palettebox .square{border:0;}
  .layout-list-box>.box .palettebox .square,
  .onlyver.palettebox .square{
    width: 12px;
    height: 12px;
    margin: 2px;
  }
[class*="swiper-button-"] {
    background-image: none !important;
    width: auto;
    height: auto;
    color: var(--blue-500);
    font-size: 28px;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    box-shadow: var(--dropShadow-elevation-le2);
}
.button-ver1 [class*="swiper-button-"]{
    width: 48px;
    height: 48px;
    background: var(--blue-10per);
    border-radius: 999px;
    font-size: 24px;
    color: var(--blue-500);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    cursor: pointer;
    z-index: 1;
    pointer-events: all;
    box-shadow: none;
}
.button-ver1 [class*="swiper-button-"]:before{color:inherit;font-size: inherit;}
.button-ver1 .swiper-button-next{right: -64px;}
.button-ver1 .swiper-button-prev{left: -64px;}
.floatingbox {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    /* height: 406px; */
    z-index: 2;
}
.floatingbox .fake-modal{position: static;}
.floatingbox .float_tooltipsbox .tooltips{
    position: absolute;
    top: -44px;
    left:0;
    box-shadow: var(--dropShadow-elevation-le3);
    border: 1px solid var(--gray-300);
    padding: 8px;
    background: #fff;
    border-radius: 8px;
    display: none;
}
.floatingbox .float_tooltipsbox.trans{z-index:10;    pointer-events: all;}
.floatingbox .float_tooltipsbox.trans .tooltips{display:block;z-index: 10;right: 0;left: auto;top: auto;bottom: 30px;pointer-events: all;}
.floatingbox .float_tooltipsbox.trans .tooltips>div{border-radius:8px;margin-bottom: 4px;position: relative;z-index: 1;cursor: pointer;pointer-events: all;}
.floatingbox .float_tooltipsbox.trans .tooltips>div:last-child{margin-bottom:0}
.floatingbox .float_tooltipsbox.trans .tooltips>div:hover{background:var(--blue-5per);/* background: red; */pointer-events: all;}
[class*="search-memory-list"]{
    border: 1px solid var(--gray-200);
    border-left: 0;
    border-right: 0;
    position: relative;
}
[class*="search-memory-list"]::before{
    content:'';
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 48px;
    background: var(--gray-200);
}
[class*="search-memory-list"].before-none::before{display:none;}
[class*="search-memory-list"]>ul{
    position: relative;
    z-index: 1;
}
[class*="search-memory-list"]>ul>li>.box{
    display: flex;
    padding: 8px;
    border-radius: 8px;
}
[class*="search-memory-list"]>ul>li *{transition: all 0.5s;}
[class*="search-memory-list"]>ul>li.day{padding: 6px 16px;}
[class*="search-memory-list"]>ul>li.day>span{
    border-radius: 999px;
    border: 1px solid var(--blue-500);
    padding: 4px 8px;
    color: var(--blue-500);
    font-size: 9px;
    font-style: normal;
    font-weight: 600;
    height: 20px;
    display: inline-flex;
    align-items: center;
    background: #fff;
}
[class*="search-memory-list"]>ul>li:not(.day){padding: 0px 30px;padding-right: 25px;padding-bottom: 4px;}
[class*="search-memory-list"]>ul>li>.box>i{font-size: 12px;width: 20px;height: 20px;border-radius: 999px;border: 1px solid var(--blue-500);display: flex;justify-content: center;align-items: center;color: var(--blue-500);background: #fff;}
[class*="search-memory-list"]>ul>li>.box>div{
    flex-grow: 1;
    padding: 0 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
	border-radius:8px;
}
[class*="search-memory-list"]>ul>li>.box>div>span{
    font-size: 10px;
    font-style: normal;
    font-weight: 300;
    color: var(--gray-600);
    display: block;
}
[class*="search-memory-list"]>ul>li>.box>a{
    font-size: 14px;
    opacity: 0;
}
[class*="search-memory-list"]>ul>li>.box:hover{background:var(--blue-5per)}
[class*="search-memory-list"]>ul>li>.box:hover>a{opacity: 1;}
.search-memory-list-1>ul{
    padding-top: 16px;
    padding-bottom: 24px;
}
.search-memory-list-1>ul>li>.box{align-items: center;}
.search-memory-list-1>ul>li.day{
    padding-top: 0;
    padding-bottom: 8px;
}
.search-memory-list-1>ul>li:not(.day){
    padding-bottom: 0;
    padding-left: 25px;
}
.search-memory-list-1>ul>li>.box>i{
    width: 32px;
    height: 32px;
    font-size: 18px;
    margin-right: 8px;
}
.search-memory-list-1>ul>li>.box>div.design-box-3{
    padding: 16px;
}
.search-memory-list-1>ul>li>.box:hover{
    background: none;
}
.search-memory-list-1>ul>li>.box>div.design-box-3 .box [class*="btn-"]{
    margin-right: 4px;
    width: 62px;
}
.search-memory-list-1>ul>li .btns{font-size: 0;}
.data-design-box-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.data-design-box-1>span {
    flex-grow: 0;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    color: #000;
    line-height: 130%; /* 18.2px */
}
.data-design-box-1>button {
    height: 48px;
    position: relative;
    padding: 14px 13px;
    padding-right: 38px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    color: var(--gray-500);
    overflow: hidden;
}
.data-design-box-1>button *,
.data-design-box-1>button{transition: all 0.5s;}
.data-design-box-1>button>span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.data-design-box-1>button>img {
    position: absolute;
    bottom: 0;
    height: 59px;
    right: 6px;
}
.data-design-box-1>button:hover{
    border-color: var(--blue-500);
    background: var(--blue-5per);
    color: var(--gray-950);
}
.data-design-box-1>button>img.hover{
    opacity: 0;
}
.data-design-box-1>button:hover>img.default{
    opacity: 0;
}
.data-design-box-1>button:hover>img.hover{
    opacity: 1;
}
.data-design-box-2>div{border-bottom:1px solid var(--gray-200);padding:7px 0;margin-bottom:8px;display: flex;justify-content: space-between;align-items: center;}
.data-design-box-2>div>span{font-size:14px; font-weight:300;}
.data-design-box-2>div>a{font-size:18px; color:var(--gray-500)}


.tolltipbox-1 {
    position: relative;
    display: inline-flex;
}

.tolltipbox-1 .tolltipbox{
    position: absolute;
    right: 0;
    top: 25px;
    white-space: nowrap;
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    box-shadow: var(--dropShadow-elevation-le3);
    background: #fff;
    padding: 8px 0;
    display:none;
}
.tolltipbox-1.trans .tolltipbox{display:block;}
.tolltipbox-1 .tolltipbox>ul{padding-bottom:6px;border-bottom: 1px solid var(--gray-300);}
.tolltipbox-1 .tolltipbox>ul>li{
    padding:4px 16px;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
}
.tolltipbox-1 .tolltipbox>ul>li:hover{color:var(--blue-500); background:var(--blue-5per)}
.tolltipbox-1 .tolltipbox>ul:last-child{padding-bottom:0px;border-bottom:0}
.tolltipbox-1 .tolltipbox.ver1 {
    width: 157px;
}
.tolltipbox-1 .tolltipbox.ver1>ul {
    padding: 6px 0;
}
.tolltipbox-1 .tolltipbox.ver1>ul>li{padding: 5px 16px;display: flex;align-items: center;}
.tolltipbox-1 .tolltipbox.ver1>ul>li:hover{font-weight:600}
.tolltipbox-1 .tolltipbox.ver1>ul>li>span{color:inherit;font-size:inherit;font-weight:inherit}
.tolltipbox-1 .tolltipbox.ver1>ul>li>i{
    margin-right: 4px;
    color: inherit;
}
.tolltipbox-1 .tolltipbox.ver1>ul.list-ver{display: flex;}
.tolltipbox-1 .tolltipbox.ver1>ul.list-ver>li{padding: 0px 16px;position: relative;}
.tolltipbox-1 .tolltipbox.ver1>ul.list-ver>li:first-child:before{
    content:"";
    height:16px;
    position: absolute;
    background: var(--gray-300);
    width: 1px;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
}
.page-layout-box>.row {
    margin: -8px;
}

.page-layout-box>.row>div {
    padding: 8px;
}

.page-layout-box .box {
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: var(--gray-5per);
    padding: 24px 16px;
}

.page-layout-box .box>img {
    margin: auto;
    display: block;
    margin-bottom: 16px;
}
.page-layout-box .box .txt1{
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 16px;
}
.page-layout-box .box .txt2{
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    display: block;
    line-height: 1;
}
.page-layout-box .box .txt3{
    display: block;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 18px */
}
.page-layout-box .arrow{
    display: block;
    margin: auto;
}


.page-layout-box2>.row {margin: -8px;}
.page-layout-box2>.row>div {padding: 8px;}
.page-layout-box2 .box {
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: var(--gray-5per);
    padding: 24px 16px;
}

.page-layout-box2 .box .num {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--blue-500);
    font-family: 'Montserrat';
    font-size: 100px;
    font-style: normal;
    font-weight: 700;
    line-height: 72%; /* 72px */
    text-align: center;
    color: #fff0;
    margin-bottom: 16px;
}
.page-layout-box2 .box .txt1{
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 16px;
}
.page-layout-box2 .box .txt2{
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    text-align: center;
    display: block;
    line-height: 1.2;
}
.page-layout-box2 .box .txt2>em{font-size:inherit;line-height: inherit;font-weight: 600;}
.page-layout-box3>.row {margin: -8px;}
.page-layout-box3>.row>div {padding: 8px;}
.page-layout-box3 .box {
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: var(--gray-5per);
    padding: 24px 16px;
}
.page-layout-box3 .box>img {
    margin: auto;
    display: block;
    margin-bottom: 16px;
    width: 80px;
}
.page-layout-box3 .box .txt1{
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 16px;
}
.page-layout-box3 .box .txt2{
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    display: block;
    line-height: 1.2;
    padding: 0 16px;
}
.page-layout-box3 .arrow{
    display: block;
    margin: auto;
}
.procedure-design1 {
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
    box-shadow: var(--dropShadow-elevation-le2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0 16px;
    margin-bottom: 40px;
    padding: 32px;
}
.procedure-design1>ul.row{
    justify-content: space-between;
    align-items: center;
    margin: -8px -5px;
}
.procedure-design1>ul.row>li{
    flex-grow: 0;
    white-space: nowrap;
    
    padding: 8px 5px;
}
.procedure-design1>ul.row>li.arrow>img{
    width: auto;
    display: block;
    margin-bottom: 0;
}
.procedure-design1>ul.row>li:not(.arrow){
	flex-basis: 123px;
	max-width: 123px;
}
.procedure-design1>ul.row>li>img{
    margin: auto;
    width: 56px;
    display: block;
    margin-bottom: 8px;
}
.procedure-design1>ul.row>li>p{
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
}
.procedure-design1>ul.row>li>span{
    font-size: 11px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 13.2px */
    white-space: normal;
    text-align: center;
    display: block;
}
.procedure-design1>ul.row>li .active{display: none;}
.procedure-design1>ul.row>li.active .default{display:none;}
.procedure-design1>ul.row>li.active .active{display: block;}
.convertbox-1{
    padding:16px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
    box-shadow:var(--dropShadow-elevation-le2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.convertbox-2{
    padding:16px;
    border-radius:8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
    border: 1px solid var(--gray-200);
    box-shadow: var(--dropShadow-elevation-le2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
   
}
.convertbox-3{
    padding:16px;
    box-shadow:var(--dropShadow-elevation-le2);
    border:1px solid var(--gray-200);
    border-radius:8px;
    background:#fff;
}
.convertbox-4{
    border:1px solid var(--gray-300);
    padding:24px 16px;
    background:#fff;
    border-radius: 8px;
}
.convertbox-5{
    border:1px solid var(--gray-200);
    padding:16px;
    background:#fff;
    border-radius:8px;
}
.convertbox-6{
    background:linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.76) 100%);
    padding:24px;
    border-radius:16px;
    border:1px solid var(--gray-300);
    box-shadow:var(--dropShadow-elevation-le2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.convertbox-7{border-radius: 8px;padding: 8px 16px;border:1px solid var(--gray-200);}
.convertbox-8{border:1px solid var(--gray-300);border-radius: 8px;padding:24px; background: #fff;}
[class*="table-box-"] table thead.ts-xl tr{font-size:16px;}
[class*="table-box-"] table .ts-xl tr{font-size:16px;}

.txt-page1 .txt1{
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 8px;
    margin-bottom: 8px;
    line-height:1;
}
.txt-page1 .txt1>i{
    font-size: 20px;
    margin-right: 8px;
}
.txt-page1 .txt2{font-size: 14px; margin-bottom:8px;}
.txt-page1 .txt2 .bold{
    display: block;
    font-weight: 600;
}
.txt-page1 .txt2:last-child{margin-bottom:0}
.txt-page1 .txt3box{
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 16px;
}
.txt-page1 .txt3box>.row{margin: -4px;}
.txt-page1 .txt3box>.row>div{padding: 4px;}
.txt-page1 .txt3{display: flex; align-items: flex-start;}
.txt-page1 .txt3>i{ font-size: 18px; margin-right: 5px;}
.txt-page1 .txt3>em{
    white-space: nowrap;
    line-height: 1;
    font-size: 14px;
    font-weight: 600;
    margin-right: 5px;
}
.txt-page1 .txt3>span{
    line-height: 1.2;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
}
.graphbox-map-1 {
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: #FFF;
    position: relative;
}

.graphbox-map-1 .top {
    position: absolute;
    top: 16px;
    left: 16px;
    width: calc(100% - 32px);
}
.graphbox-map-1 .top [class*="btn-"],
.graphbox-map-1 .top .zoom-in-out-box{
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background:linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.76) 100%);
/* 諛곌꼍釉붾윭/�뿰�븿/xs-LV1 */
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.graphbox-map-1 .top .zoom-in-out-box{
    padding: 8px 7.5px;
    width: 40px;
}
.graphbox-map-1 .top .zoom-in-out-box .zoom-in-out-bar{height:100px;}
.graphbox-map-1 .top .zoom-in-out-box .zoom-in-out-btn i{font-size:18px;}

.graphbox-map-1 .bottom {
    padding: 16px;
}

.graphbox-map-1 .bottom>.row {
    align-items: center;
}
.gradation-box-1{
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: var(--gray-5per);
    height: 100%;
    padding: 16px;
}
.gradation-box-1>.row{
    margin: 0 -4px;
    height: 100%;
}
.gradation-box-1>.row>div{
    padding: 0 4px;
    height: 100%;
}
.gradation-box-1 .num{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding: 39px 0;
    text-align: center;
}
.gradation-box-1 .num>span{
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
}
.gradation-box-1 .graph{
    width: 100%;
    height: 100%;
}
.legendbox {display: flex;justify-content: center;}
.legendbox>span {padding: 0 4px;}

.loginbox .bottom{text-align: left;}
.loginbox .bottom>.row>div{
    display: flex;
    align-items: center;
}
.loginbox .bottom .txtbox{
    display: flex;
    align-items: center;
    flex-grow: 0;
    white-space: nowrap;
}
.loginbox .bottom .txtbox .txt1{font-size: 13px;}
.loginbox .bottom .txtbox .bar{
    display: inline-block;
    margin: 0 8px;
    width: 1px;
    height: 12px;
}
.loginbox .bottom .check-radio-box label{
    font-size: 13px;
}
.loginbox .bottom .check-radio-box label:before{
    font-size: 16px;
}
.loginbox .intervarbox1{margin:0 -4px;}
.loginbox .intervarbox1>div{padding:0 4px;}
.loginbox .intervarbox2{margin:0 -2px;}
.loginbox .intervarbox2>div{padding:0 2px;}
.userjoinbox .check-radio-box label{font-size:13px;}
.userjoinbox .check-radio-box label::before{font-size:16px !important;}
.step-design-box1 {
    padding: 16px 8px;
    background: var(--blue-5per);
    border-radius: 8px;
    position: relative;
}
.step-design-box1 .bar {
    position: absolute;
    width: calc(100% - 66px);
    background: var(--blue-10per);
    height: 4px;
    left: 50%;
    transform: translateX(-50%);
    top: 80px;
}
.step-design-box1 .bar .bg {
    height: 100%;
    background: var(--blue-500);
    width: auto;
    border-radius: 999px;
}
.step-design-box1 ul {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.step-design-box1 ul>li {
    flex-grow: 0;
    text-align: center;
}
.step-design-box1 ul>li>img{
    display: none;
    margin: 8px auto;
    width: 40px;
}
.step-design-box1 ul>li>img.default{
    display: block;
}
.step-design-box1 ul>li>span {
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #9BA4AB;
    font-family: 'Montserrat';
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 1; /* 23.04px */
    font-family: 'Montserrat';
    text-align: center;
    color: #fff0;
}
.step-design-box1 ul>li>p {
    font-size: 12px;
    font-weight: 300;
}
.active-1.step-design-box1 .bar>.bg{width: 25%;}
.active-1.step-design-box1 ul>li:nth-child(1) .default{display:none}
.active-1.step-design-box1 ul>li:nth-child(1) .color{display:block}
.active-1.step-design-box1 ul>li:nth-child(1) span{color: var(--blue-500);}
.active-1.step-design-box1 ul>li:nth-child(1) p{font-weight: 600;}
.active-2.step-design-box1 .bar>.bg{width:75%;}
.active-2.step-design-box1 ul>li:nth-child(1) .default,
.active-2.step-design-box1 ul>li:nth-child(2) .default{display:none}
.active-2.step-design-box1 ul>li:nth-child(1) .color,
.active-2.step-design-box1 ul>li:nth-child(2) .color{display:block}
.active-2.step-design-box1 ul>li:nth-child(1) span,
.active-2.step-design-box1 ul>li:nth-child(2) span{color: var(--blue-500);}
.active-2.step-design-box1 ul>li:nth-child(1) p,
.active-2.step-design-box1 ul>li:nth-child(2) p{font-weight: 600;}
.active-3.step-design-box1 .bar>.bg{width:100%;}
.active-3.step-design-box1 ul>li:nth-child(1) .default,
.active-3.step-design-box1 ul>li:nth-child(2) .default,
.active-3.step-design-box1 ul>li:nth-child(3) .default{display:none}
.active-3.step-design-box1 ul>li:nth-child(1) .color,
.active-3.step-design-box1 ul>li:nth-child(2) .color,
.active-3.step-design-box1 ul>li:nth-child(3) .color{display:block}
.active-3.step-design-box1 ul>li:nth-child(1) span,
.active-3.step-design-box1 ul>li:nth-child(2) span,
.active-3.step-design-box1 ul>li:nth-child(3) span{color: var(--blue-500);}
.active-3.step-design-box1 ul>li:nth-child(1) p,
.active-3.step-design-box1 ul>li:nth-child(2) p,
.active-3.step-design-box1 ul>li:nth-child(3) p{font-weight: 600;}
.userjoinbox .intervarbox1{margin:-4px;}
.userjoinbox .intervarbox1>div{padding:4px;}

.check-radio-page-1>.row{
    margin: -4px;
}
.check-radio-page-1>.row>div{
    padding: 4px;
    flex-basis: 50%;
    max-width: 50%;
}
.check-radio-page-1 .check-radio-box>input+label{font-size: 15px;}
.check-radio-page-1 .check-radio-box>input+label span{padding:0 3px}
.check-radio-page-1 .check-radio-box>input+label::before{font-size: 20px; padding: 0 3px;}
.zoom-in-out-box {
	/* height: 140px; */
	/* width: 32px; */
	background: #FFFFFF;
	border: 1px  solid #B7B9C5;
	box-shadow: 0px  25px 25px rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	padding: 8px;
	justify-content: space-between;
}
.zoom-in-out-btn {
    border: 0;
    background: #fff0;
    padding: 0;
    height: auto;
    line-height: 1;
    margin-top: 8px;
}

.zoom-in-out-btn:focus {
	outline:none;
}
.zoom-in-out-btn:disabled,
.zoom-in-out-btn[disabled]{
	opacity:0.5;
}
.zoom-in-out-btn.plus {
	margin-bottom: 8px;
	margin-top: 0;
}

.zoom-in-out-btn i {
	position: relative;
	display: inline-block;
	font-size: 14px;
	color: inherit;
}

.zoom-in-out-bar {
	height: 85px;
	width: 4px;
	position: relative;
	background: var(--green-500-t30);
	background: rgba(0, 149, 126, 0.3);
	border-radius: 999px;
	transform: rotate(180deg);
}
.zoom-in-out-bar>input {
  height: 4px;
  -webkit-appearance: none;
  width: 100%;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 85px;
  transform: translate(-50%,-50%) rotate(90deg);
  background: var(--gray-25per);
}
.zoom-in-out-bar>input:focus {
  outline: none;
}
.zoom-in-out-bar>input::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  /*animate: 0.2s;*/
 /* box-shadow: 1px 1px 1px #002200;*/
  background: #20592800;
  border-radius: 1px;
  border: 1px solid #18d50100;
}
.zoom-in-out-bar>input::-webkit-slider-thumb {
 	 background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 24px;
	border: 4px solid var(--green-500);
	width: 14px;
	height: 14px;
	margin-top:-2.5px;
    box-shadow: var(--dropShadow-elevation-le2);
}

.zoom-in-out-bar>input::-ms-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  /*animate: 0.2s;*/
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.zoom-in-out-bar>input::-ms-fill-lower {
  background: #205928;
  border: 1px solid #18D501;
  border-radius: 2px;
  box-shadow: 1px 1px 1px #002200;
}
.zoom-in-out-bar>input::-ms-fill-upper {
  background: #205928;
  border: 1px solid #18D501;
  border-radius: 2px;
  box-shadow: 1px 1px 1px #002200;
}
.zoom-in-out-bar>input::-ms-thumb {
  margin-top: 1px;
  box-shadow: 3px 3px 3px #00AA00;
  border: 2px solid #83E584;
  height: 23px;
  width: 23px;
  border-radius: 23px;
  background: #439643;
  cursor: pointer;
}
.zoom-in-out-bar>input:focus::-ms-fill-lower {
  background: #205928;
}
.zoom-in-out-bar>input:focus::-ms-fill-upper {
  background: #205928;
}
.zoom-in-out-bar .bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--green-500);
    border-radius: 6px;
}
.zoom-in-out-bar .drag-btn {
	background: #fff;
	border-radius: 24px;
	border: 4px solid var(--green-500);
	position: absolute;
	left: 50% !important;
	transform: translateX(-50%);
	width: 16px;
	display: inline-block;
	height: 16px;
}

/*map*/
.map-box {position: absolute; left: 0; top: 0; display: flex; width:100%; bottom: 0; overflow: hidden; height: 100%;}
.map-box .map {position: relative;}
.map-box .map:nth-child(1) {width: 100%; height: 100%;}
.map-box .map:nth-child(2) {display: none;}
.map-box.separate .map {width: 50%; display: block;}
.map-box .mgas {display:none;}
.map-box .head{width: 100%;position: absolute;z-index: 100;}
.map-box .head .top{
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.76) 100%);
    box-shadow: var(--dropShadow-elevation-le2);
    padding: 10px 16px;
    overflow: hidden;
}
.map-box .head .top>.row{
    align-items: center;
    margin: -4px;
}
.map-box .head .top>.row>div{padding:4px;}
.map-box .leftbox1 {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-right: 1px solid var(--gray-200);
    box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.10), 4px 0px 4px 0px rgba(0, 0, 0, 0.05), 1px 0px 0px 0px rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.76) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 424px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.80) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2;
    transition: left 0.5s;
}
.map-box .leftbox1.trans{
    left: -424px;
}
.map-box .leftbox1.active{bottom: -273px;}
.map-box .leftbox1>.top{
border-bottom: 1px solid var(--gray-200);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.76) 100%);
/* 洹몃┝�옄/�뿰�븿/sm-LV2 */
box-shadow: var(--dropShadow-elevation-le2);
padding: 15px 16px;
}
.map-box .leftbox1>.top>.row{align-items: center;flex-wrap: nowrap;}
.map-box .leftbox1>.top>.row>div{
    font-size: 0;
    /* padding: 4px; */
}
.map-box .leftbox1>.top>.row>div img{height: 32px;}
.map-box .leftbox1 .contentbox {padding-top: 0;border-radius: 0;height: calc(100% - 69px);}
.map-box .leftbox1 .contentbox>.row{margin: 0;height: 100%;border-top: 1px solid var(--gray-200);}
.map-box .leftbox1 .contentbox>.row>div {padding: 0;}
.map-box .leftbox1 .contentbox .left{border-right: 1px solid var(--gray-200); background: var(--gray-10per); flex-basis: 80px;max-width: 80px;}
.map-box .leftbox1 .contentbox .left .box{padding: 8px;height: 100%;}
.map-box .leftbox1 .contentbox .left .box>button{padding: 8px;text-align: center;border-radius: 8px;color: var(--gray-500);width: 100%;margin-bottom: 8px;background: #fff0;}
.map-box .leftbox1 .contentbox .left .box>button>img{margin: auto;margin-bottom: 4px;height: 32px;}
.map-box .leftbox1 .contentbox .left .box>button:hover{background: var(--gray-10per);color: var(--gray-950); scale:1.1;}
.map-box .leftbox1 .contentbox .left .box>button.active{background:var(--blue-10per);color: var(--gray-950);}
.map-box .leftbox1 .contentbox .left .box>button span{
font-size: 11px;
font-style: normal;
font-weight: 600;
display: block;
color: inherit;
white-space: nowrap;
}
.map-box .leftbox1 .contentbox .right{
    /* overflow: auto; */
    height: 100%;
    position: relative;
}
.map-box .leftbox1 .fold-btn{
    position: absolute;
    right: -31px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 14px 4px;
    font-size: 21px;
}

.hover-img-FCbtn{border:0;}
.hover-img-FCbtn .default{display:block}
.hover-img-FCbtn:hover .hover,
.hover-img-FCbtn.active .hover{display:block}
.hover-img-FCbtn .hover{display:none}
.hover-img-FCbtn:hover .default,
.hover-img-FCbtn.active .default{display:none}

.map-box .leftbox1 .contentbox>.row>div .box [class*='form-area-box'] .ele-icon-box{border-radius: 999px;}
.map-box .leftbox1 .contentbox>.row>div .box .btnlistbox>.row{margin: -4px;}
.map-box .leftbox1 .contentbox>.row>div .box .btnlistbox>.row>div{
flex-basis: 20%;
max-width: 20%;
padding: 4px;
}
.map-box .leftbox1 .contentbox>.row>div .box .btnlistbox>.row>div .btns{
width: 100%;
height: 56px;
padding: 8px;
border-radius: 8px;
border: 1px solid var(--gray-15per);
/* 洹몃┝�옄/�뿰�븿/xs-LV1 */
box-shadow: var(--dropShadow-elevation-le1);
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
background: #fff0;
font-weight: 300;
}
.map-box .leftbox1 .contentbox>.row>div .box .btnlistbox>.row>div .btns span{
color: inherit;
font-size: 10px;
font-style: normal;
font-weight: inherit;
white-space: nowrap;
}
.map-box .leftbox1 .contentbox>.row>div .box .btnlistbox>.row>div .btns img{height:24px}
.map-box .leftbox1 .contentbox>.row>div .box .btnlistbox>.row>div .btns:hover{
border: 1px solid var(--gray-15per);
background: var(--gray-10per);
/* 洹몃┝�옄/�뿰�븿/sm-LV2 */
box-shadow: var(
--dropShadow-elevation-le2);
}
.map-box .leftbox1 .contentbox>.row>div .box .btnlistbox>.row>div .btns.active{
border-color: var(--blue-500);
background: var(--blue-10per);
color: var(--blue-500);
font-weight: 700;
box-shadow: var(--dropShadow-elevation-le2);
}
.map-box .leftbox1 .contentbox>.row>div .box .topbox{
margin: 0 -16px;
padding: 8px 16px;
background: var(--gray-10per);
border-bottom: 1px solid var(--gray-200);
}
.rightbox1 {
    position: absolute;
    right: 0;
    padding: 16px;
}
.rightbox1 .btnbox>ul>li{
    display: block;
    background: #FFFFFF;
    border: 1px solid rgba(166, 169, 185, 0.5);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 100%;
    font-size: 0;
    margin-bottom: 8px;
    position: relative;
}
.rightbox1 .btnbox>ul>li>button{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-style: normal;
    font-weight: 300;
    color: var(--gray-950);
    flex-direction: column;
}
.rightbox1 .btnbox>ul>li>button, .rightbox1 .btnbox>ul>li>.zoom-in-out-box{
    border-radius: 100%;
    border: 1px solid var(--white-5per);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.76) 100%);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.rightbox1 .btnbox>ul>li>button>i{
    display: block;
    font-size: 18px;
    color: inherit;
    margin-bottom: 1px;
}
.rightbox1>.btnbox>ul>li>button:hover, .zoom-in-out-btn:hover{color: var(--blue-500);}
.rightbox1>.btnbox>ul>li>button.active{color: var(--blue-500);}
.rightbox1 .btnbox>ul .tooltipbox .tooltip{right: 56px;left: auto;top: 0;width: calc(100vw - 85px);margin: 0;}

.viewbox { position: absolute; top: 0; left: 0; z-index: 1; padding: 16px; transition: left 0.5s; }
.viewbox > span {
	background-color: var(--forest-500); color: #FFF; padding: 8px 16px; border-radius: 12px; cursor: default;
}

.leftbox2 { position: absolute; left: 0; bottom: 0; padding: 16px; z-index: 1;}
.leftbox2 .btnbox>ul>li{
	display: block;
	background: #FFFFFF;
	border: 1px solid rgba(166, 169, 185, 0.5);        
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	border-radius: 100%;
	font-size: 0;
	margin-bottom: 8px;
	position: relative;
}
.leftbox2 .btnbox>ul>li>button{
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7px;
	font-style: normal;
	font-weight: 300;
	color: var(--gray-950);
	flex-direction: column;
	border-radius: 100%;
	border: 1px solid var(--white-5per);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.76) 100%);
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.leftbox2>.btnbox>ul>li>button.active{color: var(--green-500);}
.leftbox2>.btnbox>ul>li>button:hover{
	color: var(--green-500);
}
.leftbox2 .btnbox>ul>li>button>i{
	display: block;
	font-size: 18px;
	color: inherit;
	margin-bottom: 1px;
}
.leftbox2 .btnbox>ul>li>button+div{
	position: absolute;
	bottom: 50px;
}
.leftbox2>.btnbox>ul>li>.tooltip { display: none; background: #FFF; position: absolute; padding: 8px; }
.leftbox2>.btnbox>ul>li.trans >.tooltip,
.leftbox2>.btnbox>ul>li.trans2>.tooltip { display: flex !important; flex-direction: column; height: fit-content; bottom: 50px !important; }
.leftbox2>.btnbox>ul>li.trans >.tooltip > .legend-button-div { display: none; }
.leftbox2>.btnbox>ul>li.trans >.tooltip > .legend-content,
.leftbox2>.btnbox>ul>li.trans2 >.tooltip > .legend-content { display: none; }
.leftbox2>.btnbox>ul>li.trans >.tooltip > .legend-content.on,
.leftbox2>.btnbox>ul>li.trans2 >.tooltip > .legend-content.on { display: block; }
.leftbox2>.btnbox>ul>li.trans >.tooltip { width: 45px; }
.leftbox2>.btnbox>ul>li.trans >.tooltip > div:first-child { width: 100% !important; }
.leftbox2>.btnbox>ul>li.trans2>.tooltip { width: 270px; }
.leftbox2>.btnbox>ul>li.trans2>.tooltip > .legend-content > div.legend-unit { width: 100% !important; text-align: right; }
.leftbox2>.btnbox>ul>li.trans2>.tooltip > .legend-content > div.legend-unit > p { font-size: 13px; }
.leftbox2>.btnbox>ul>li.trans2>.tooltip > .legend-button-div { display: block; }
.leftbox2>.btnbox>ul>li.trans2>.tooltip > .legend-button-div > ul { display: flex; }
.leftbox2>.btnbox>ul>li.trans2>.tooltip > .legend-button-div > ul > li { width: 100%; text-align: center; }

.map-box .lock-button-div { display: none; }
.map-box.separate .lock-button-div { display: flex; }
.lock-button-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; align-items: center; justify-content: center; }
.lock-button-div > button { border: 0; border-radius: 10px; padding-top: 4px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.05); }
.lock-button-div > button:not(.active):hover i { color: var(--green-500); }
.lock-button-div > button.active { background-color: var(--green-500); }
.lock-button-div > button.active i { color: #FFF; }

.map-box>.subdetail{
position: absolute;
width: 333px;
top: 0;
left: -100%;
height: 100%;
border-right: 1px solid var(--gray-200);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.76) 100%);
box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.10), 4px 0px 4px 0px rgba(0, 0, 0, 0.05), 1px 0px 0px 0px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
transition: all 0.5s;
}
.map-box>.subdetail .leftbox1{width: 100%;box-shadow: none;border: 0;backdrop-filter: none;-webkit-backdrop-filter: none;}
.map-box>.subdetail.trans{left: 424px;}
.map-box>.subdetail .content {
padding: 16px 24px;
height: calc(100% - 63px);
overflow: auto;
z-index: 0;
}
.map-box>.subdetail .check-radio-box label{font-size: 14px;}
.map-box>.subdetail .check-radio-box label:before{font-size: 18px;}
.map-box.mobile-ver header{
    background:linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
/* 諛곌꼍釉붾윭/�뿰�븿/sm-LV2 */
    box-shadow: var(--dropShadow-elevation-default-le2);
    backdrop-filter: blur(10px);
    height: auto;
    border-bottom: 1px solid var(--gray-400);
    overflow: visible;
}
.map-box.mobile-ver .searchbox{margin: 0;width: 100%;display: block;padding: 16px;}
.map-box.mobile-ver .searchbox>.row{
    margin: -8px;
    /* flex-wrap: nowrap; */
    overflow: visible;
}
.map-box.mobile-ver .searchbox>.row>div{padding: 8px;white-space: nowrap;}
.map-box.mobile-ver .searchbox>.row>div:nth-child(2){
    flex-basis: calc(100% - 135px);
    max-width: calc(100% - 135px);
}
.map-box.mobile-ver .searchbox>.row>div [class*='form-area-box'] [class*="ele-icon-box"]{height: auto;border: 0;}
.map-box.mobile-ver .searchbox>.row>div [class*='form-area-box'] [class*="ele-icon-box"] input{height:32px;}
.map-box.mobile-ver .leftbox1 {
    height: 40vh;
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    border-right: 0;
    width: 100%;
    z-index: 1;
    transition: bottom 0.5s;
    padding-top: 16px;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
}
.map-box.mobile-ver .leftbox1.active{/* bottom: -273px; */bottom: -100%;}
.map-box.mobile-ver .leftbox1>.top{border-bottom: 1px solid var(--gray-400);
padding: 0;padding-bottom: 16px;margin: 0 16px;margin-bottom: 16px;background: #fff;box-shadow: none;}
.map-box.mobile-ver .leftbox1>.top>.row{margin:-4px}
.map-box.mobile-ver .leftbox1>.top>.row>div{padding:4px;}
.map-box.mobile-ver .leftbox1>.top .txt1{
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    display: flex;
    align-items: center;
}
.map-box.mobile-ver .leftbox1>.top .txt1>i{
    margin-right: 6px;
    font-size: 24px;
}
.Fc-select{
    position: relative;
}
.Fc-select>ul{
    display: none;
    position: absolute;
    top: 38px;
    background: #fff;
    z-index: 1;
    left: 0;
    padding: 8px 0;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: #fff;
    box-shadow: var(--dropShadow-elevation-default-le2);
    backdrop-filter: blur(10px);
}
.Fc-select>ul>li{
	padding: 6px 16px;
	display: flex;
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
}
.Fc-select>ul>li>i{margin-right: 4px;}
.Fc-select.trans>ul{display:block;}
.map-box.mobile-ver .leftbox1 .contentbox>.row{border-top:0}
.map-box.mobile-ver .leftbox1 .contentbox>.row>div .box .topbox{margin: 0;}
.map-box.mobile-ver .lev-box-2>li{padding:0 16px;}
.map-box.mobile-ver .rightbox1{
    top: auto;
    bottom: 0;
}
.map-box.mobile-ver .leftbox1 .contentbox{
    height: calc(100% - 48px - 16px - 5px - 20px);
}
.map-box.mobile-ver .rightbox1 .btnbox>ul .tooltipbox .tooltip {
    width: 100vw;
    right: 0;
    left: 0;
    position: fixed;
    bottom: 0;
    top: auto;
}
.map-box.mobile-ver .fake-modal.custum-modal.ver1 .cutum-modal-dialog .modal-content{
	border-radius: 0;
	border-top-right-radius: 16px;
	border-top-left-radius: 16px;
	padding-top: 16px;
}
.map-box.mobile-ver .fake-modal.custum-modal.ver1 .modal-header{
    padding-top: 0;
    padding-bottom: 16px;
    margin-bottom: 16px;
}
.map-box.mobile-ver .fake-modal.custum-modal .layout-list-box>.box{
    border-radius: 6px;
    border: 1px solid var(--gray-300);
    padding: 16px 8px;
    line-height: 1;
    height: 50px;
}
.map-box.mobile-ver .fake-modal.custum-modal .layout-list-box>.box .onchangeFc{
    display: none;
}
.map-box.mobile-ver .fake-modal.custum-modal .layout-list-box>.box.trans{
    flex-wrap: wrap;
    height: auto;
}
.map-box.mobile-ver .fake-modal.custum-modal .layout-list-box>.box.trans .onchangeFc{
    display: block;
    width: 100%;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--gray-300);
}
.map-box.mobile-ver .fake-modal.custum-modal .layout-list-box>.box.trans .onchangeFc>.row{
    align-items: center;
    margin: -4px;
}
.map-box.mobile-ver .fake-modal.custum-modal .layout-list-box>.box.trans .onchangeFc>.row>div{
    padding: 4px;
}
.map-box.mobile-ver .fake-modal.custum-modal .layout-list-box>.box.trans .onchangeFc>.row>div:nth-child(1){
    flex-grow: 0;
    white-space: nowrap;
}
.map-box.mobile-ver .fake-modal.custum-modal .layout-list-box>.box.trans .onchangeFc>.row>div [class*='btn-']{
    width: 100%;
    border-radius: 24px;
}
.map-box.mobile-ver .fake-modal.custum-modal .layout-list-box>.box.trans .onchangeFc>.row>div span{
    font-size: 14px;
    display: block;
    line-height: 1;
}
/**/
.textdesign-box-1>li{margin-bottom:24px;}
.textdesign-box-1>.commonTitle.squere{margin-bottom: 24px !important;}
.textdesign-box-1 .commonTitle.squere {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    padding-left: 28px;
    position: relative;
    display: flex;
    border-bottom: 1px solid #C2C8CC;
    margin-bottom: 16px;
    align-items: center;
}
.textdesign-box-1 li .commonTitle.squere{
    padding-bottom: 8px;
}
.textdesign-box-1 .commonTitle.squere>i{
    position: absolute;
    font-size: 22px;
    color: var(--blue-500);
    left: 0;
    top: 0;
}
.textdesign-box-1 li .boxs1{overflow:hidden;}
.textdesign-box-1 li .boxs1>.row{
margin: -12px;
}
.textdesign-box-1 li .boxs1>.row>div{
padding: 12px;
}
.textdesign-box-1 li .boxs1>.row>div>div{
border-radius: 8px;
border: 1px solid var(--gray-300);
background: #fff;
padding: 24px 0;
text-align: center;
height: 224px;
}
.textdesign-box-1 li .boxs1>.row>div>div>p{
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 125%; /* 22.5px */
margin: 6px 0;
}
.textdesign-box-1 li .boxs1>.row>div>div>span{
display: block;
font-size: 15px;
font-style: normal;
font-weight: 300;
line-height: 120%; /* 18px */
}
.textdesign-box-1 .commonTitle.squere .imgbox{
    border-radius: var(--Corner-2xs, 4px);
    border: 1px solid var( --gray-300);
    background: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    margin-left: 8px;
}
.textdesign-box-1 .commonTitle.squere .imgbox>img{
    height: 21px;
}
.textdesign-box-1 .dbox {
    border-radius: 8px;
    border: 1px solid var( --gray-300);
    background: #FFF;
    padding: 24px;
}
.textdesign-box-1 .dbox2{
    border-radius: 8px;
    padding: 16px;
background: var(--colour-10, rgba(155, 164, 171, 0.10));
}
.textdesign-box-1 .depth2 li{
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 18px */
    display:block;
    margin-bottom:6px;
}
.textdesign-box-1 .depth2 li:last-child{margin:0;}
.textdesign-box-1 .depth2:not(.clear) > li{
    font-size: 16px;
    font-weight: 500;
    line-height: 130%;
}
.textdesign-box-1 .depth3 li{position: relative;display: flex;align-items: center;}
.textdesign-box-1 .depth3 li:before{
	content:"";
	width:3px;
	height:3px;
	background: var(--gray-950);
	margin: 0 8px;
}
.textdesign-box-1 .depth3.before-none li:before{display:none;}
.textdesign-box-1 [class*="table-box-"] table thead.bs-1 tr th:last-child:before,
.textdesign-box-1 [class*="table-box-"] table tbody.bs-1 tr td:last-child:before, 
.textdesign-box-1 [class*="table-box-"] table tbody.bs-1 tr th:last-child:before{
	opacity:1;
}

.menu-div { display: none; }
.menu-div.on { display: block !important; }

.tab-content { display: none; height: calc(100% - 40px); overflow: auto; }
.tab-content.on { display: block !important; }

.tab-content .result { display: none; }
.tab-content .result.on { display: block !important; }

.search-artcl-div > div:nth-child(1) { min-width: 50px; }
.search-artcl-div > div:nth-child(2) { width: 100%; }
.search-artcl-div > div:nth-child(3) { min-width: 50px; }
.search-artcl-div > div:nth-child(4) { width: 100%; }

.legend-bar { width: 100%; max-height: 240px; overflow-y: auto; overflow-x: hidden; display: none; flex-direction: column; justify-content: center; align-items: flex-end; }
.legend-bar.on { display: block !important; }
.legend-bar > .legend { width: 30px; display: flex; height: 30px; min-height: 30px; }
.tooltipbox.trans2 .legend-bar > .legend { width: 100%;}

.tooltipbox        .legend-bar .legend > a { display: inline-block; height: 100%; cursor: pointer; }
.tooltipbox        .legend-bar .legend > a.icon-eye-slash:before { width: 100%; height: 100%; color: #FFF; display: flex; align-items: center; justify-content: center; }
.tooltipbox        .legend-input-div { display: none; }
.tooltipbox.trans2 .legend-input-div { display: block !important; }
.tooltipbox        .legend-preset { display: none; }
.tooltipbox.trans2 .legend-preset { display: flex !important; align-items: flex-end; width: 100%; }
.tooltipbox.trans  .legend-bar .legend > a { width: 100% !important; }
.tooltipbox.trans  .legend-bar .legend > div { display: none;  }
.tooltipbox.trans2 .legend-bar .legend > a { width: 30px !important; }
.tooltipbox.trans2 .legend-bar .legend > div { width: calc(100% - 30px) !important; display: flex !important; align-items: center; }
.tooltipbox.trans2 .legend-bar .legend > div > div:nth-child(1) { width: calc(100% / 2 - 5px); padding-left: 10px; }
.tooltipbox.trans2 .legend-bar .legend > div > div:nth-child(2) { width: 5px; }
.tooltipbox.trans2 .legend-bar .legend > div > div:nth-child(3) { width: calc(100% / 2 - 5px); padding-left: 10px; }
.tooltipbox.trans2 .legend-bar.simple .legend > div { padding-left: 10px; }
.tooltipbox        .legend-preset > .preset-btn { width: 100%; height: 25px; border: 1px solid var(--white-5per); /*border-radius: 100%; margin-bottom: 3px;*/ }
.tooltipbox        .legend-preset > .preset-btn.active { background: url(/images/icon/i-check.svg) no-repeat center center; }
.tooltipbox        .legend-preset.disabled { opacity: 0.5; }
.tooltipbox        .legend-preset.disabled > .preset-btn { cursor: not-allowed; }
.tooltipbox        .legend-unit { display: none; }
.tooltipbox.trans2 .legend-unit { display: block !important; }

.tooltipbox > div > .legend-content > div:nth-child(2) { display: flex; justify-content: center; }
.tooltipbox > div > .legend-content > div:nth-child(2) > div:first-child { width: 100% !important; }

.dashboard-modal [class^=dashboard-content-]    {display:none;}
.dashboard-modal [class^=dashboard-content-].on {display:block;}

.legend-modal { box-shadow: var(--dropShadow-elevation-le5); }
.sticky { position: sticky !important; top: 0 !important; z-index: 1;}

#click-popup1 { top: -10px; }
.overlay-popup { position: relative !important; }

.hide { display: none !important; }

button:hover .i-hover-animation { scale: 1.5; }

.download-popup .step-div { display: none; }
.download-popup .step-div.on { display: block !important; }
.download-popup .step-div h4 { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.download-popup .step-div .downLoadUl { border-bottom: 1px solid #222; border-top: 1px solid #222; }
.download-popup .step-div .downLoadUl li { display: flex; align-items: center; padding: 10px; }
.download-popup .step-div .downLoadUl li+li { border-top: 1px solid #222; }
.download-popup .step-div .downLoadUl li input[type=radio] { margin-right: 5px; }
.download-popup .step-div .downLoadUl li label { display: inline-flex; }
.download-popup .step-div .downLoadUl li label:first-child { justify-content: center; }

.download-popup .step-div .capsule-box.progress-box { display: block; }
.download-popup .step-div .capsule-box.progress-box > h3 { margin-bottom: 10px; font-size: medium; }
.download-popup .step-div .capsule-box .progress-container { position: relative; min-height: 30px; }
.download-popup .step-div .capsule-box .progress-container .progress-bar { position: absolute; width: 100%; min-height: 30px; background: var(--green-400); }
.download-popup .step-div .capsule-box .progress-container .progress-text { font-weight: 600; position: absolute; min-height: 30px; display: flex; align-items: center; width: 100%; justify-content: center; }
.download-popup.trans .fake-modal.custum-modal{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.download-popup.trans .fake-modal.custum-modal.ver1 .cutum-modal-dialog .modal-content{min-width: 500px;}

select option:checked {font-weight: bold;}

.download-guide-popup {position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: rgba(0, 0, 0, 0.7); overflow: hidden; display: none;}
.download-guide-popup.on {display: block;}
.download-guide-popup .left {position: absolute; left: 0; top: 0;}
.download-guide-popup .right {position: absolute; top: 0; right: 0; z-index: 1000;}
.download-guide-popup .bottom {position: absolute; bottom: 0; left: 0; z-index: 1000;}
.download-guide-popup > div > img {display: block;}
.download-guide-popup .input-div {position: absolute; bottom: 0; right: 0; z-index: 1001; padding: 16px;}


#mgas {width: 100%; justify-content: flex-end;padding :16px;}
.mgas .mgasBox {width : calc(100% - 424px); display:flex; flex-direction: column;  transition: width 0.5s ease;}
.mgas .mgasBox.expand {width : 100%;}
.mgas .mgasBox .emissionMonthly {flex-basis : 35%; padding:10px; display:flex; flex-direction: column;}
.mgas .mgasBox .custom-ext-box {
	padding: 16px;
	box-sizing: border-box;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 4px 80px 0 rgba(166, 169, 185, 0.1);
	display: flex;
	flex-direction: column;
/* 	justify-content: space-between; */
	justify-content: flex-start;
}
.mgas .mgasBox .detailedEmission {flex-basis: 65%; padding:10px; display:flex; flex-direction: column;}
.mgas .mgasBox .top {display: flex;}
.mgas .mgasBox .top .txt1 {display: flex;height: 100%;align-items: center;
	color: #000;
	font-weight: 500;
	position: relative;
	font-weight: 600;
	font-size: 20px;
	line-height: 100%;
}
.mgas .mgasBox .top .txt1 i {
    color: inherit;
    font-size: inherit;
    margin-right: 8px;
}

.mgas .mgasBox .no-data-message {
  width : 100%;
  height : 100%;
  min-height: 200px;
  display: flex;
  flex-direction : column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #999;
  font-size: 16px;
  line-height: 1.5;
}

.mgas .mgasBox .detailedEmission .table-box-2 tr:hover{
	cursor: pointer;
}
.mgas .mgasBox .detailedEmission .selected-row{
	background-color: #d5e8ff !important;
}

#btnResetMgasChart.inactive {
	background-color: var(--green-500);
	color: white;
}