@charset "utf-8";

/* 
 * common CSS Document
 */

/* Form Control */
input,
select,
textarea,
label{display:inline-block; box-sizing:border-box; width:auto; vertical-align:middle; line-height:1.4;}
input[type=text],
input[type=password],
input[type=tel],
input[type=date],
input[type=email],
input[type=number],
textarea{height: 40rem;padding:7rem 8rem;margin:2rem 0rem;border:1px solid #ddd;background:#fff;vertical-align:middle;}
textarea{resize:none;}
select{height: 40rem;padding:0 8rem;margin:2rem 0rem;border:1px solid #ddd;background:#fff;vertical-align:middle;}
select::-ms-expand {background-color:transparent; border:0;}
input[type="text"],
input[type="password"],
input[type="submit"],
input[type="button"],
input[type="number"],
input[type="file"],
select,
textarea{-webkit-border-radius:1px; -webkit-appearance:none;}
select{padding-right:30rem; background:url(/images/board/select_arrow.svg) no-repeat calc(100% - 10rem) 50%; background-size:7rem 7rem;}
body[class*="ie"] select{padding-right:10rem;}
input[type=file]{background:#eee; font-size:1.08em;}
input[readonly],
input[disabled]{background:#eee;}
input[type=checkbox],
input[type=radio]{width:13rem; height:13rem; margin:2rem 3rem 1rem 0;}
input[type=checkbox] + label,
input[type=radio] + label{margin-right:20rem;}
table{width:100%;}

.input50{width:50rem !important;}
.input70{width:70rem !important;}
.input100{width:100rem !important;}
.input200{width:200rem !important;}
.input300{width:300rem !important;}
.input400{width:400rem !important;}
.inputFull{width:100% !important;}

/* 필수입력 */
.marking{display:inline-block; position:relative; width:10rem; height:14rem; margin-bottom:-2rem; vertical-align:middle; text-indent:100%; overflow:hidden; white-space:nowrap;} 
.marking:after{content:'*'; display:inline-block; position:absolute; top:0; left:0; line-height:17rem; font-size:14rem; font-weight:600; text-indent:0; color:#c51917;}

/* ie update */
#update{position:fixed; top:0rem; left:0rem; z-index:99; width:100%; background:#1a1b1d; text-align:center; font-weight:300; color:#f9ed89;}
#update a{display:inline-block; margin-left:10rem; color:#ff7f7f;}

/* 정렬 */
.tac{text-align:center !important;}
.tal{text-align:left !important;}
.tar{text-align:right !important;}

/* margin */
.mt0{margin-top:0rem !important;}
.mt10{margin-top:10rem !important;}
.mt20{margin-top:20rem !important;}
.mt30{margin-top:30rem !important;}

/* button */
.btn_area{padding:30rem 0; text-align:center;}
.btn_area.right{text-align:right;}
.btn_area.left{text-align:left;}
.button{display:inline-block; overflow:hidden; position:relative; min-width:100rem; height:45rem; line-height:43rem; box-sizing:border-box; padding:0 15rem; margin:2rem 0rem; background:#41464e; border:1px solid #25282d; color:#fff !important; text-align:center; vertical-align:middle; transition:all 0.4s ease-out 0.1s; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0);}
.button span{position:relative; z-index:2;}
.button.red{background:#c40251; border:1px solid #c40251;}
.button.blue{background:#2377d0; border:1px solid #1760ad;}
.button.black{background:#2d2b2b; border:1px solid #1f1f1f;}
.button.gray{background:#92999e; border:1px solid #92999e;}
.button.white{background:#fff; border:1px solid #cdcdcd; color:#444 !important;}
.button.lg{min-width:150rem; height:50rem; line-height:48rem; font-size:16rem; letter-spacing:-1rem;}
.button.sm{min-width:60rem; height:23rem; line-height:21rem; padding:0 10rem; font-size:12rem;}
.btn_area .button{height:45rem; line-height:43rem;}
.btn_area .button.sm{height:23rem; line-height:21rem;}
.btn_area .button.lg{height:50rem; line-height:48rem;}
table .button{height:33rem; line-height:31rem;}

/* button hover */
.button:before{content:''; display:block; position:absolute; top:0rem; right:0rem; bottom:0rem; left:0rem; z-index:1; width:120%; height:110%; background:#fff; transform:translateX(-120%) skew(-15deg); transition:transform 0.7s cubic-bezier(0, 0, 0.21, 0.87) 0s;}
.button:hover:before,
.button:focus:before{background:#fff; transform:translateX(-10%) skew(-15deg) perspective(500rem);}
.button:hover,
.button:focus{color:#222 !important; box-shadow:0rem 10rem 15rem rgba(0,0,0,0.15);}
input.button:hover,
input.button:focus{opacity:0.8; color:#fff !important;}
label.button.white:hover,
label.button.white:focus{color:#222 !important;}
label.button.white:before{display:none;}

/* table */
#content table.table{margin-top:15rem; border-top:1px solid #868686;}
#content table.table thead th{background:#f5f5f5; border-bottom:1px dashed #cecece;}
#content table.table thead tr:last-child th{border-bottom:1px solid #868686;}
#content table.table thead th[rowspan]{border-bottom:1px solid #868686; border-right:1px dashed #cecece;}
#content table.table tbody th{background:#f5f5f5; border:1px solid #e0e0e0; border-right-color:#868686;}
#content table.table thead + tbody th{background:transparent; border-right-color:#e0e0e0;}
#content table.table th,
#content table.table td{padding:10rem; letter-spacing:-0.5rem; line-height:1.4; word-break:keep-all;}
#content table.table th{text-align:center; font-weight:500;}
#content table.table tbody td{border:1px solid #e0e0e0; text-align:left;}
#content table.table tbody tr td:last-child{border-right-width:0rem;}
#content table.table tbody tr td:first-child,
#content table.table tbody tr th:first-child{border-left-width:0rem;}
#content table.table thead + tbody tr td{text-align:center;}
#content table.table .tal{text-align:left !important;}
#content table.table .tar{text-align:right !important;}
#content table.table .list{margin-top:0rem;}
#content .mob_info{display:none;}

.scrollTable_wrap{position:relative; overflow:hidden;}
.scrollTable_wrap::after{content:"";position:absolute;opacity:0;top:0rem;right:0rem;z-index:1;width: 18%;height:100%;visibility: hidden;background: linear-gradient(-90deg, rgba(255, 255, 255, 100%),rgb(255 255 255 / 99%), rgba(255, 255, 255, 0));transition:all 0.3s ease;pointer-events:none;}

/* tab all - cols */
.tabCol ul{display:table; width:100%; table-layout:fixed;}
.tabCol ul > li{display:table-cell; margin-left:-0.1rem; vertical-align:middle;}
.tabCol ul > li:first-child{margin-left:0rem;}
.tabCol ul > li > a{display:block; text-align:center;}

/* sitemap */
.area_sitemap{box-sizing:border-box; margin:0 auto; padding:0 15rem;}
.area_sitemap .gnb:after{content:''; display:block; clear:both;}
.area_sitemap .gnb > li{float:left; width:15%; margin-left:2%;}
.area_sitemap .gnb > li:first-child{margin-left:0rem;}
.area_sitemap .gnb > li > a{display:block; position:relative; padding:40rem 0rem; background:#eff7f9; font-size:23rem; font-weight:600; color:#1b1b1b; text-align:center; letter-spacing:-1rem; transition:all 0.3s ease 0s;}
.area_sitemap .gnb > li > a span{position:relative; z-index:5;}
.area_sitemap .gnb > li > a:after{content:''; display:block; position:absolute; left:0rem; top:0rem; z-index:2; width:100%; height:100%; background:#54b9f3; background-image:linear-gradient(0deg, #54b9f3, #0ab19b); background-image:-ms-linear-gradient(0deg, #54b9f3, #0ab19b); background-image:-webkit-linear-gradient(0deg, #54b9f3, #0ab19b); background-image:-moz-linear-gradient(0deg, #54b9f3, #0ab19b); background-image:-o-linear-gradient(0deg, #54b9f3, #0ab19b); transform:scaleX(0); transform-origin:0 0; transition:all 0.4s ease-out 0s;}
.area_sitemap .gnb > li > a:hover,
.area_sitemap .gnb > li:hover > a{color:#fff;}
.area_sitemap .gnb > li > a:hover:after,
.area_sitemap .gnb > li:hover > a:after{transform:scaleX(1);}
.area_sitemap .gnb > li > ul{margin-top:30rem;}
.area_sitemap .gnb > li > ul > li{margin-bottom:10rem; padding-left:20rem;}
.area_sitemap .gnb > li > ul > li > a{display:inline-block; position:relative;  padding-left:10rem; font-size:18rem; font-weight:300; color:#333; letter-spacing:-1rem; transition:all 0.3s ease 0s;}
.area_sitemap .gnb > li > ul > li > a:before{content:''; display:block; position:absolute; left:0rem; top:13rem; width:4rem; height:1px; background:#666; transition:all 0.3s ease 0s;}
.area_sitemap .gnb > li > ul > li > a:hover{color:#3c9ed6;}
.area_sitemap .gnb > li > ul > li > a:hover:before{background:#3c9ed6;}

/* layer popup - basic */
.layerPop{position:absolute; z-index:90; overflow:hidden; border:1px solid #353535; border-radius:14rem; z-index:10;}
.layerPop a{display:block;}
.layerPop img{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;}

/* layer popup - btn control */
[data-pop-layer="layer"]{position:fixed; top:0rem; left:0rem; 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%; min-width:400rem; min-height:600rem; box-sizing:border-box; background:#fff; box-shadow:3rem 15rem 20rem rgba(0,0,0,0.15); transform:translate(-50%, -50%);}
[data-pop-layer="layer"] .popBox h2{height:67rem; padding:0 20rem !important; border-bottom:1px solid #eee; font-size:25rem !important; font-weight:500; letter-spacing:-1rem;}
[data-pop-layer="layer"] .popBox h2:after{content:''; display:inline-block; height:100%; vertical-align:middle;}
[data-pop-layer="layer"] .popBox h2 span{display:inline-block; width:99%; vertical-align:middle;}
[data-pop-layer="layer"] .popBox .btn_close{position:absolute; top:0rem; right:-70rem; width:70rem; height:68rem; line-height:68rem; background:#34383e; box-shadow:3rem 10rem 15rem 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:532rem; box-sizing:border-box; padding:20rem 20rem 40rem;}
body[class*="ie"] [data-pop-layer="layer"] .popBox h2{height:68rem; box-sizing:border-box;}

/* loading */
.area_loding{position:fixed; top:0rem; left:0rem; z-index:90; width:100%; height:100%; background:rgba(255,255,255,0.7);}
.area_loding .img{position:absolute; top:50%; left:50%; z-index:91; width:150rem; height:150rem; transform:translate(-50%, -50%);}

/* privacy popup */
.privacy-pop__inner{max-width:450rem; min-height:auto !important;}
.privacy-pop__inner{padding:38rem 33rem;}
.privacy-pop__inner h4{margin-bottom:18rem; font-weight:400; font-size:22rem; color:#111;}
.privacy-pop__item dt{display:flex; align-items:center; position:relative; font-weight:800; font-size:15rem; color:#111;}
.privacy-pop__item dt::before{content:''; display:block; width:4rem; height:4rem; margin-right:9rem; background:#111;}
.privacy-pop__item dd{line-height:1.7;margin-top:4rem;padding-left:12rem;font-weight:300;font-size:15rem;color:#111;word-break: keep-all;}
.privacy-pop__item{margin-top:14rem;}
a.privacy-pop__btn{display:block; width:100%; margin-top:21rem; padding:16rem 0rem; background:#111; font-size:15rem; color:#fff; text-align:center;}
.privacy-pop button.btn_close{display:none;}

@media screen and (max-width:1024rem){
	.area_sitemap .gnb > li{width:32%; margin-left:2%; margin-bottom:30rem;}
	.area_sitemap .gnb > li:nth-child(3n+1){clear:both; margin-left:0rem;}	
	
	[data-pop-layer="layer"] .popBox{top:0rem !important; left:0rem !important; width:100% !important; height:100%  !important; min-width:inherit; min-height:inherit; transform:translate(0,0);}
	[data-pop-layer="layer"] .popBox h2{height:67rem; box-sizing:border-box; padding-right:80rem !important;}
	[data-pop-layer="layer"] .popBox .popConts{height:calc(100% - 67rem); max-height:inherit;}
	[data-pop-layer="layer"] .popBox .btn_close{right:0rem; box-shadow:none;}

	.layerPop{left:50% !important; transform:translateX(-50%);}
}

@media screen and (max-width:600rem){
	#content .scrollTable{overflow:auto;}
	#content .scrollTable .table{width:650rem;margin-right: 40rem;}
	
	.scrollTable_wrap{width:111%;}

	#content .mob_info{display:block;}
	
	.area_sitemap .gnb > li{width:49%;}
	.area_sitemap .gnb > li:nth-child(3n+1){clear:none; margin-left:2%;}	
	.area_sitemap .gnb > li:nth-child(2n+1){clear:left; margin-left:0rem;}
	.area_sitemap .gnb > li > a{font-size:20rem;}

	.layerPop{top:15vh; width:90% !important; height:auto !important;}
	.layerPop img{max-width:100%; width:100%;}
	.layerPop .btn button{margin-left:10rem; font-size:12rem;}
	.layerPop .btn button:last-child{margin:0 10rem 0 0;}
	
	[data-pop-layer="layer"] .popBox h2{font-size:20rem !important;}
}

@media screen and (max-width:540rem){
	.scrollTable .table{width:600rem; min-width:100%;}
		
	.scrollTable_wrap::after{opacity:1; visibility:visible;}
	.scrollTable_wrap.posEnd::after{width:0;}
}

@media screen and (max-width:420rem){
	.area_sitemap .gnb > li > ul > li > a{font-size:16rem;}
	
	[data-pop-layer="layer"] .popBox h2{font-size:17rem !important;}
	[data-pop-layer="layer"] .popBox h2 span{line-height:1.3;}
}

/* 221028 이용약관 */
.privacy h2{font-weight:700; font-size:40rem; color:#222; text-align:center; }
.privacy h3{margin-bottom:20rem; font-weight:700; font-size:17rem; color:#222; }
.privacy ul li,
.privacy p{line-height:1.6; font-weight:300; color:#666;}
.privacy p{font-size:14rem;}
.privacy ul li{font-size:15rem;}
.privacy ul li + li{margin-top: 8rem;}
.privacy ul li ul {margin-top:5rem; margin-bottom:20rem; padding-left:15rem;}
.privacy .privacy_box{padding:40rem 0; border-bottom:1px solid #ddd;}
.privacy .privacy_box:first-child{padding-top: 0;}
.privacy .privacy_box:last-child{border:none; padding-bottom: 0;}
@media(max-width:1279rem){
	.privacy h2{ font-size: 24rem; }
}
@media(max-width:767rem){
	.privacy h3{ font-size: 15rem; }
}

/* 사이트 관리 */
.site_tooltip{ cursor: help; }
.site_tooltip.cursor_normal{ cursor: auto; }
.site_tooltip-box{ position: relative; }
.site_tooltip-text{ position: absolute; top: calc( 100% + 10rem ); left: 0; max-width: 400rem; width:max-content; padding: 10rem; background: #fff; border-radius: 5rem; box-shadow: 0 0 3rem rgba(0, 0, 0, 0.5); visibility: hidden; cursor: auto; z-index: 1; }
.site_tooltip:hover .site_tooltip-text{ visibility: visible; }
.preview_og__bg{ display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 238rem; height: 215rem; background: #bacee0; font-family: 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif; visibility: hidden; pointer-events: none; }
.preview_og__bg.show{ visibility: visible; }
.preview_og{ width: 198rem; height: 175rem; background: #fff; border-radius: 3rem; box-shadow: -1rem 1rem 2rem #00000010; }
.preview_og__img{ position: relative; width: 100%; height: 100rem; border-radius: 3rem 3rem 0 0; object-fit: cover; }
.preview_og__txt{ height: 75rem; padding: 10rem; box-sizing: border-box; font-size: 12rem; font-weight: 200; color: #b2b2b2;  }
.preview_og__txt-title{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #272727; }
.preview_og__txt-description{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.preview_og__txt-url{ margin-top: 2rem; }