@charset "utf-8";

/* 7) layer pop */
/* layer popup - 이미지만 노출하는 항목 ex)인증서  */
.area_popLayer.img .popBox{display:flex; flex-flow:column wrap; justify-content:center; align-items:center; width:617rem !important; height:839rem; padding:0px; background-color:transparent; box-shadow:none;}
.area_popLayer.img .popBox .scrollbar-inner{overflow:inherit; height:auto; padding:0px;}
.area_popLayer.img .popBox .btn_close{top:0; right:-70rem;}
.area_popLayer.img.patent img{width:auto; max-width:100%; max-height:100%;}
.box_view_img .img{display:block;}
.box_view_img .img img{width:100%;}
	/* layer popup - btn control */
[data-pop-layer="layer"]{position:fixed; top:0px; left:0px; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.2);}
[data-pop-layer="layer"] .popBox{position:absolute; top:50%; left:50%; width:var(--popWid, 400rem); min-height:var(--popHig, 600rem); box-sizing:border-box; background:var(--color-white, #fff); box-shadow:3px 15px 30px rgba(0,0,0,0.15); line-height:1.4; transform:translate(-50%, -50%);}
[data-pop-layer="layer"] .popBox .popTitle{display:flex; align-items:center; min-height:var(--titleHig); box-sizing:border-box; padding:5rem 20rem; font-size:25rem; font-weight:600;}
[data-pop-layer="layer"] .popBox .btn_close{position:absolute; top:0px; right:-70rem; width:70rem; height:68rem; line-height:68rem; background:var(--point-color, #111); box-shadow:3px 10px 15px rgba(0,0,0,0.15);}
[data-pop-layer="layer"] .popBox .btn_close span{display:inline-block; position:relative; width:18rem; height:18rem; margin:-4rem auto 0; vertical-align:middle; background:url(../../images/module/btn_close.png) no-repeat 50% 0; background-size:18rem 18rem; text-indent:100%; overflow:hidden; white-space:nowrap;}
[data-pop-layer="layer"] .popBox .btn_close:focus{outline:none;}
[data-pop-layer="layer"] .popBox .popConts{overflow-y:auto; max-height:calc(var(--popHig) - var(--titleHig)); box-sizing:border-box; padding:20rem 20rem 40rem;}
	/* layer popup - size  */
[data-pop-layer="layer"] .popBox{--popWid:400rem; --popHig:600rem; --titleHig:67rem;}
	/* layer popup img only */
.area_popLayer--img .popBox{display:flex; flex-flow:column wrap; justify-content:center; align-items:center; width:617rem !important; height:839rem; padding:0px; background-color:transparent; box-shadow:none;}
.area_popLayer--img .popBox .scrollbar-inner{overflow:inherit; height:auto; padding:0;}
.area_popLayer--img .popBox .btn_close{top:0; right:-70rem;}
.area_popLayer--img.patent img{width:auto; max-width:100%; max-height:100%;}
.box_view_img .img{display:block;}
.box_view_img .img img{width:100%;}	
	/* layer popup - basic */
.layerPop{position:absolute; z-index:90; overflow:hidden; border:1rem solid #353535; border-radius:14rem; z-index:10;}
.layerPop a{display:block;}
.layerPop img{ display: block; max-width:100%;}
.layerPop .btn{display:flex; justify-content:space-between; padding:13rem 10rem; background:#353535; text-align:left;}
.layerPop .btn button{display:inline-block; margin-left:15rem; background:none; color:#fff; font-size:13rem;}
.layerPop .btn button:last-child{float:right; margin:0 12rem 0 0;}
@media screen and (max-width:1024px){
	/* 7) layer pop */
	[data-pop-layer="layer"] .popBox{--popHig:100% !important; top:0px !important; left:0px !important; width:100% !important; height:100%  !important; min-width:inherit; min-height:inherit; transform:translate(0,0);}
	[data-pop-layer="layer"] .popBox .popTitle{padding-right:80rem !important;}
	[data-pop-layer="layer"] .popBox .btn_close{right:0px; box-shadow:none;}
	.layerPop{top:100rem !important; left:50% !important; transform:translateX(-50%); max-width: 92%; }
		/* layer popup img only */
	.area_popLayer--img .popBox{background:#fff;}
	.area_popLayer--img .popBox .scrollbar-inner{overflow-y:auto; height:100%;}
	.area_popLayer--img .popBox .btn_close{right:0px;}
}
@media screen and (max-width:768px){
	/* 7) layer pop */
	/* layer popup img only */
	.box_view_img{display:flex; justify-content:center; align-items:center; height:100%;}
	.box_view_img .img{text-align:center;}
	.box_view_img .img img{width:80%;}
	.area_popLayer.img .popBox{width:100% !important;}
}
@media screen and (max-width:600px){
	/* 7) layer pop */
	[data-pop-layer="layer"] .popBox .popConts img,
	.layerPop img{max-width:100%; width:100%;}
}

/* dialog modal */
body:has(#dialog[open]){ overflow: hidden; }
.dialogBtn.show{ display: contents; background: 0; font-size: inherit; }
#dialog{ position: fixed; inset: 0; margin: auto; display: block; width: min(600px, 92vw); padding: 0; background: #fff; border: 0; z-index: 151; }
#dialog:not([open]){ visibility: hidden; opacity: 0; }
#dialog::backdrop{ display: none; }
.dialogHead{ display: flex; align-items: center; justify-content: space-between; height: 3.4375em; padding: .9375em; background: #686e82; box-sizing: border-box; color: #fff; }
.dialogBtn.close{ position: relative; width: 1.1875em; height: 1.1875em; background: url('/images/module/btn_close.png') no-repeat 50% / contain; font-size: inherit; }
.dialogBtn.close::before{ content: ''; position: absolute; inset: -5px; }
.dialogBody,
.dialogIframe{ overflow: auto; display: block; width: 100%; height: min(590px, calc(85vh - 3.4375em)); padding: .9375em; background: #fff; box-sizing: border-box; border: 0; }
.dialogBackdrop{ position: fixed; inset: 0; background: #000; opacity: .8; z-index: -1; }
@media(prefers-reduced-motion:no-preference){
	#dialog{ transition: opacity .4s, visibility .4s; }
	.dialogBackdrop{ transition: .4s; }
}