@charset "utf-8";

:root {
	/* --alt-font: "Plus Jakarta Sans", sans-serif;*/
	--primary-font: "GmarketSans", sans-serif;
	/* --secondary-font: "Archivo", sans-serif; */

	--main-color: #010101;
	--sub-color:#10121e;
	--white-color: #fff;
	--placeholder-color:#a1a1a1;
	--border-base-color:#d4d3d5;
	--bg-point-color:#000;
	--bg-beige-color:#f3b100;
	--bg-white-color:#fff;
	--bg-bright-gray-color:#f6f6f7;
	--bg-base-color:#3f4355;
	--table-th-border:#65697b;
	--table-td-border:#d8dae1;
	--box-shadow-btn: 0 10px 20px rgba(0,0,0,0.1);
	--border-bottom-gray:#e6e8ed;
	--bg-body-color:#f4f5fa;
}

.mainColor {  color:var(--main-color) !important;}
.placeholderColor {color:var(--placeholder-color) !important;}
.whiteColor { color:var(--white-color) !important;}
.baseBorder { border:1px solid var(--table-td-border); }

.bgBaseColor { background:var(--bg-base-color) !important; }
.bgWhiteColor { background:var(--bg-white-color) !important; }
.bgPointColor { background:var(--bg-point-color) !important; }
.bgBeigeColor { background:var(--bg-beige-color) !important;  }


.header { 
	height:80px; background:rgba(255,255,255,1); 
	display:flex; align-items:center; padding:0 0 0 46px; box-shadow:0 5px 10px rgba(0,0,0,0.1); position: fixed;
	z-index:1000;
	width: 100%;
}
h1.logo a { font-size:32px; font-weight:900; font-family:"Archivo", serif; letter-spacing: -1px; }
nav.nav { padding-left:120px; height: 80px; position: relative; }
nav.nav > ul { display:flex; align-items:center; height: 100%; }
nav.nav > ul > li { padding-right:60px; height: 100%;}
nav.nav > ul > li > a { 
	font-size:16px; font-weight:600; color:#000; position: relative; height: 100%; position: relative; display: flex; align-items: center;
	font-family: "GmarketSans";
}
nav.nav > ul > li > a::before { content: ""; position: absolute; left:0; bottom:0; height:1px; width:0;background:#000; transition: all 0.2s ease-out; display: block;}
nav.nav > ul > li > a:hover::before { width: 100%; }


.depth1 > li { position: relative; }
.depth1 > li > a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 8px; text-decoration: none; font-weight: 600; border-radius: 10px; transition: background .2s ease, color .2s ease; }

/* 2depth */
.depth2 { 
	list-style: none; margin: 0; padding: 15px 12px 20px; position: absolute; left: -25px; top: 100%; min-width: 180px; display: none; background:#fff; border-radius:0 0 20px;  
	 box-shadow:0 5px 10px rgba(0,0,0,0.1); 
}
.depth2 li a { display: block; padding: 10px 25px; text-decoration: none; font-weight: 500; white-space: nowrap; font-family: "GmarketSans"; font-size:14px;}
.depth2 li a:hover { background:rgba(0,0,0,0.07); border-radius:10px }


.mnb a { 
	display:flex; justify-content: center; align-items: center;
	 background: #000;;
	 width: 80px;
	 height: 80px;
	 position: absolute; right: 0; top: 0;
}
.mnb a i { background:url(../images/i_mnb.png) no-repeat center / 100%; display: block; width: 24px; height: 24px; transition: all 0.3s;}
.mnb a:hover i { background-image: url(../images/i_mnb_ov.png); }


.util {
	position: absolute;
	right:110px;
	display: flex;
	justify-content: flex-end;
}

.util a { padding-left:12px; padding-right:12px; display: inline-flex; align-items: center; }
.util a i {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	
}
.util a span {
	font-size:14px; font-weight:700;
	display: inline-block;
	line-height: 1;
	padding-top:3px;
	margin-left:7px;
}
.util a:hover span { text-decoration: underline;}

i.i_login {
	display: block;
	width: 21px;
	height: 21px;
	background-image: url(../images/new/i_login.png);
}
i.i_logout {
	display: block;
	width: 18px;
	height: 20px;
	background-image: url(../images/new/i_logout.png);
}
i.i_mypage {
	display: block;
	width: 17px;
	height: 19px;
	background-image: url(../images/new/i_mypage.png);	
}





.allMenuBox {
	position: fixed;
	left:0; top:0;
	z-index:9999;
	width: 100vw;
	height: 100vh;
	display: none;
	background:#000;
}
.allMenuBox.on { display: block; }
.ambHeader { height: 15vh; display: flex; align-items: center; width: 100%; background:#000; padding-left:5vw;}
.ambHeader h1 { height: 100%; display: flex; align-items: center; }
.ambHeader h1 a { font-size:2.5vw; font-weight:900; font-family:"Archivo", serif; letter-spacing: -1px; color:#fff;}
.ambHeader p { 
	font-size:1.5vw; font-weight:900;
	font-family: 'Frank Ruhl Libre';
	margin-left:120px;
	color:rgba(255,255,255,0.5);
}
.ambHeader a.am_close {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10vw;
	height: 15vh;
	background:#1a1a1a;
	position: absolute;
	right: 0;
	top: 0;
}
.ambHeader a.am_close i.i_close {
	display: block;
	width: 27px;
	height: 27px;
	background:url(../images/i_close.png) no-repeat center / 100%;
	position: relative;
	transition: all 0.5s;
}

.ambHeader a.am_close:hover i.i_close {
	transform: rotate(90deg);
}



.ambCon { height: calc(85vh); background:#000; border-top:1px solid #1a1a1a; display: flex; }
.ambcLeft { 
	border-right:1px solid #1a1a1a; 
	background:url(../images/allmenu_img.jpg) no-repeat center / cover;
	flex:0 0 30%;
}
.ambcRight { flex:0 0 70%; display: flex; flex-wrap:wrap; height: 100%;}
.ambcList section { flex:0 0 50%; height:100%; position: relative;}
.ambcList section article { 
	height:auto;
	padding:50px 0 30px 3vw;
	border-top:1px solid #1a1a1a;
}
.ambcList section:nth-child(1) { border-right:1px solid #1a1a1a;}

.ambcList section article h2 { margin-bottom:2vh;}
.ambcList section article h2 a { font-size:1.4vw; color:#fff; font-weight:700; font-family: "GmarketSans";}

.ambcList section article h2:nth-of-type(2),
.ambcList section article h2:nth-of-type(3) { margin-top:50px;}

.ambcList section article ul li { margin-bottom:1vh;}
.ambcList section article ul li a { font-size:0.9vw; color:rgba(255,255,255,0.7); font-weight:300; font-family: "GmarketSans"; padding:0.7vh 0; display: inline-block; }
.ambcList section article ul li a:hover { border-bottom:1px solid rgba(255,255,255,0.3); }

.t_copy { font-size:12px; color:rgba(255,255,255,0.3); position:absolute; right:3vw; bottom:40px; text-transform: uppercase;}


.mainIntroduce {
	position: fixed;
	left:30px; bottom: 30px;
	z-index:10;
}
.mainIntroduce a { 
	display: flex; justify-content: center; align-items: center; padding:15px 19px; 
	border-radius:30px; background:rgba(255,255,255,1); box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	transition: all 0.3s;
}
.mainIntroduce a i.i_introMa { background:url(../images/i_bot.png) no-repeat; display: block; width: 25px; height: 26px; transition: all 0.3s;}
.mainIntroduce a em { padding-left:10px; font-size: 16px; font-weight: 700; color:#353535; transition: all 0.3s;}

.mainIntroduce a.on { background:#000;}
.mainIntroduce a.on i {background:url(../images/i_bot_white.png) no-repeat; }
.mainIntroduce a.on em { display: none;}


.container { width: 100%; height: calc(100vh); position: relative; padding-top:84px; }
.containerChat { width: 100%; height: calc(100%); position: relative; padding-top:90px; }
.containerPercent { height: calc(100%); }

.subContent { margin: 0 auto; padding:40px 0;}
.widthMiddle { max-width:1500px; }

.comH2 { font-size:40px; color:#000; font-family: "GmarketSans"; font-weight:700; line-height:1.2; padding-bottom:28px;}
.totalCase p { display: flex; align-items: center; padding:14px 20px; background: #fff; border-radius:30px; box-shadow: 0 2px 5px rgba(0,0,0,0.1) }
.totalCase span { font-size:18px;}
.totalCase strong { font-size:18px; font-weight: 700;margin-left:5px;}


.checkingPoint { 
	display: flex; align-items: center; padding:14px 20px; 
	background: #fff; border-radius:30px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.checkingPoint i { 
	background:url(../images/i_check_case.png) no-repeat; display: block; width: 12px; height: 9px;
}
.checkingPoint em { font-size:14px; font-weight: 700;margin-left:10px;  font-family: "GmarketSans";}

.miDiv {
	position: fixed;
	z-index: 999;
	left:50%; 
	bottom:30px;
	transform: translateX(-50%);
	width:1000px;
	height: auto;
	padding:35px 40px; 
	border-radius:17px; 
	background:rgba(255,255,255,1); 
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	display: none;
	transition: all 0.3s;
}
.miDiv.on {
	display: block;
}
.miDiv h2 {
	font-size:20px;
	font-family: "GmarketSans"; 
	font-weight:700;
	line-height:1.2;
}
.miDiv .btnHide {
	background:#f4f4f4;
	width:41px; height: 41px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius:17px;
	border:1px solid #d3d3d3;
	position: absolute; right: 20px; top: 20px;
}
.i_arrow_hide {
	width:12px; height: 12px;
	background:url(../images/i_right_hide.png) no-repeat; display: block;
}

.introDivCon { 
	display: flex;
	margin-top:20px;
	width:100%;
}
.introDivCon i.i_bot_large {
	width:53px; height: 53px;
	background:url(../images/i_bot_large.png) no-repeat; display: block;
	flex:0 0 108px;
	margin-top:5px;
}
.introDivCon div { flex:0 0 calc(100% - 108px); }
.introDivCon div p {
	font-size:16px;
	color:#000;
	line-height:2;
	font-family: "GmarketSans"; 	
	word-break: keep-all;
	padding-right:50px;
}

.topBtnArea { display: flex; justify-content: flex-end; padding:0 0 10px;}
.bottomBtnArea { display: flex; justify-content: flex-end; padding:10px 0 0;}

.codeArea { display: flex; justify-content: space-between; }
.codeArea > article { flex:0 0 47%; }
.codeArea > .rightBtnDiv { flex:0 0 5%;}

.codeDiv { width:100%;}
.codeTable thead tr th { 
	padding:17px 5px 14px; 
	font-size:12px; 
	font-weight:500; text-align: center; 
	border-top:1px solid #000; border-bottom:1px solid #d2d2d2; 
}
.codeTable tbody tr td { 
	padding:10px 5px ; 
	font-size:12px; font-weight:500; text-align: center;  
	border-bottom:1px solid #d2d2d2; 
}

.rightBtnDiv {
	text-align: center;
	margin:0 auto;
	position: relative;
}
a.btnRight {
	display: flex;
	justify-content: center;
	align-items: center;
	width:40px;
	height:40px;	
	margin: 0 auto;
	border-radius:20px;
	border:1px solid #d2d2d2;
	position: absolute;
	left:50%; top:50%;
	transform: translate(-50%,-50%);
}
a.btnRight:hover {  background:#f5f5f5; }
.i_arrow_right {
	display: inline-block;
	width:8px; height:13px;
	background:url(../images/new/i_arrow_right.png) no-repeat center / 100%; 
}


.disFlex { display:flex ;}
.justifyBetween { justify-content: space-between;}
.alignItemsCenter { align-items: center; }
.justifyFlexEnd { justify-content: flex-end; }

.conLayout { padding:40px 40px; background: #fff; border-radius: 17px; border:1px solid #d2d2d2; box-shadow: 0 2px 5px rgba(0,0,0,0.1)  }
.conLayout_c { padding:20px 20px; background: #fff; border-radius: 17px; border:1px solid #d2d2d2; box-shadow: 0 2px 5px rgba(0,0,0,0.1)  }
.conLayout_p { 
	padding:40px 20px; 
	background: #fff; 
	border-radius: 17px; 
	border:1px solid #d2d2d2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}


.boardList { position: relative;}
.boardList li { 
	display: flex; justify-content: space-between; align-items: center; padding:35px 0 30px; 
	/* border-bottom:1px solid #d2d2d2; */
	border-top:1px solid #d2d2d2;
}
.boardList li:first-child { border-top: none;}
.boardList li a.board_link { font-size:22px; font-family: "GmarketSans"; font-weight:400; line-height:1.2; }
.boardList li a.board_link:hover { text-decoration: underline;}
.boardList li span.board_date {  font-family: "GmarketSans"; font-weight:300; line-height:1.2; font-size:14px; }

.topBackArea { 
	position: fixed;
	left:30px; top:110px;
	z-index:100;
}

.justifyBetween { justify-content: space-between;}
.justifyCenter { justify-content: center;}
.justifyStart { justify-content:flex-start; }

.ml50 { margin-left:50px;}


.boardTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:40px 0 20px;
	border-bottom:1px solid #d2d2d2;
}
.com_h3 { font-size:26px; color:#000; font-weight:400; line-height:1.3;  font-family: "GmarketSans";  }
.bt_list { display: flex; align-items: center; }
.bt_list li { margin-left:20px; font-size:14px; font-family: "GmarketSans"; font-weight:400;}

.boardView { padding:40px 0;}
.bvText { line-height:1.8; font-size:15px; font-family: "GmarketSans"; font-weight:400;}

a.btn { background:#000; padding:10px 30px; color:#fff; border-radius:30px; font-size:14px;}
a._List { color:#fff}

.partnersList { display: flex; flex-wrap: wrap;}
.partnersList li { flex:0 0 25%; padding:15px; }
.partnersList li div { border:1px solid #d2d2d2; border-radius:17px; padding:15px; }
.partnersList li div img { max-width:100%; width:100%;}
.partnersList li p { padding:20px 0; text-align: center; font-size:16px; font-weight:500; color:#000;  font-family: "GmarketSans";  }

/* paginate */
.pgWrap { padding:20px 0 0}
.paginate {text-align:center;display: flex; justify-content: center;}
.paginate a {
	display:inline-flex;
	justify-content: center;
	align-items: center;
	height:38px;text-align:center;color:#000;font-size:14px;line-height:1;border-radius:5px;
	padding:0 11px;
	overflow: hidden;
	background:#fff;
	margin:0 2px;
	transition: all 0.3s;
	border:1px solid #c4c4c4;
}
.paginate a span {display:inline-block;padding:0 3px;line-height:1em;}
.paginate a.active,
.paginate a:hover {background:#000;color:#fff;}
.paginate a.active span { color:#fff;}
.paginate a:hover span {color:#fff;}

.paginate a.first,
.paginate a.prev,
.paginate a.next,
.paginate a.last {
	background:#fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.paginate a.prev i {
	width:17px; height:9px;
	background:url(../images/pg_prev.png) no-repeat center; 
}
.paginate a.next i {
	width:17px; height:9px;
	background:url(../images/pg_next.png) no-repeat center; 
}

.paginate a.prev:hover,
.paginate a.first:hover,
.paginate a.next:hover,
.paginate a.last:hover {
	/* border:1px solid rgba(63,67,85,0.5); */
}

.com_h3_case1 {
	font-size:18px; font-weight: 700;
	padding-bottom:15px;
	font-family: "GmarketSans";
	padding-left:10px;
}

.conBoxArea {  background:#f3f5f7; border:1px solid #d2d2d2; border-radius:17px; padding:25px 10px 25px 25px; }
.conBoxArea1 { height:calc(185px);  }
.conBoxArea2 { height:calc(100vh - 420px);  }

.overflowColor1 { overflow:hidden; overflow-y:auto; transition:all 0.5s; }
.overflowColor1::-webkit-scrollbar { width: 6px; border-radius:0;  }
.overflowColor1::-webkit-scrollbar-track {background: #9a9fa5; border-radius:0; }
.overflowColor1::-webkit-scrollbar-thumb {background: #051529; border-radius:0;}
.overflowColor1::-webkit-scrollbar-thumb:hover { background: #6b6b6b; 	border-radius:0;}

.cbaList { padding-right:10px; }
.cbaList li { display: flex; align-items: center; margin-top:15px; border-bottom:1px solid #d2d2d2; padding-bottom:10px;}
.cbaList li:first-child { margin-top:0;}
.cbaList li strong { flex: 0 0 170px; margin-right:20px; font-size:16px; line-height:1.4;}
.cbaList li span { font-size:16px; word-break:break-all; line-height:1.4;}

.mt30 { margin-top:30px; }

.deListArticle { }
.deListTableTitle { display: flex; width:calc(100% - 30px); padding-right:30px; margin-bottom:5px; }
.deListTableTitle li { 
	margin-right:10px; border-radius:5px; padding:12px 0; 
	text-align: center; border:1px solid #d2d2d2; background:#dce8ef; 
	color:#000; 
	font-size:16px; 
	align-items: center;
	display: flex;
	justify-content: center;
}

.deListTableCont { display: flex; width:calc(100% - 30px); padding-right:30px; }
.deListTableCont li { 
	margin-right:10px; border-radius:5px; padding:15px 0; text-align: center; 
	color:#000; 
	font-size:16px; 
	border-bottom:1px solid #d2d2d2;
}
.wd-20per li { flex:0 0 20%; }
a.deLink { color:#4d6ec1; text-decoration: underline; font-weight:600; }
a.deLink:hover { color:#001855; }


.abTop { padding-bottom:40px; display:flex; align-items: center;}

.tabArea { display: flex; margin-left:10px;}
.tabArea li { margin-right:10px;}
a.d_chk {
	display: flex; align-items: center; padding:14px 20px; 
	background: #fff; border-radius:30px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	border:1px solid #e8e8e8;
}
a.d_chk i.i_check {
	display: block;
	background:url(../images/i_check_case.png) no-repeat; display: block; width: 12px; height: 9px;
}
a.d_chk span {
	font-size:14px; font-weight: 700;margin-left:10px;  font-family: "GmarketSans";
	color:#333;
}

a.d_chk.on { background:#000;}
a.d_chk.on i.i_check {
	background:url(../images/i_check_case_white.png) no-repeat;
}
a.d_chk.on span {
	color:#fff;
}

a.d_chk:hover { background:#f6f6f6; }
a.d_chk.on:hover { background:#000; }


.abCon { width:100%; }
.history { width:100%; }
.history article { display: flex; margin-bottom:40px; width:100%;}
.history article:first-child { margin-top:0; }
.history article .calendarYear { flex:0 0 240px; font-size:55px; font-family: 'Frank Ruhl Libre'; font-weight:700; }
.history article .calList { border-top:1px solid #d2d2d2; padding:32px 0; flex:1; }
.history article .calList li { display: flex; padding:13px 0; }
.history article .calList li em { flex:0 0 55px; font-size:20px; font-weight:700; line-height:1.3;}
.history article .calList li span { flex:1; font-size:20px; line-height:1.3; font-weight:400; }


.checkingPoint { 
	display: flex; align-items: center; padding:14px 20px; 
	background: #fff; border-radius:30px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.checkingPoint i { 
	display: block;
	background:url(../images/i_check_case.png) no-repeat; display: block; width: 12px; height: 9px;
}
.checkingPoint em { font-size:14px; font-weight: 700;margin-left:10px;  font-family: "GmarketSans";}


.flexBoxType { display: flex; flex-direction: column; align-items: center; padding-top:20vh;}
.searchArea { 
	width:700px; height: 70px; 
	display: flex; align-items: center; justify-content: space-between; 
	background:#fff;
	position: relative;
	border-radius:70px; 
	margin:0 auto;
 }

.searchArea .selectBox { 
	flex:0 0 150px;
	height:100%;
	display: flex;
	align-items: center;
}
.searchArea .inpSearch  { 
	flex:0 0 calc(100% - 150px);
	height:100%;
	padding-left:20px;
	padding-right:75px;
	font-size:16px;
	font-family: "GmarketSans"; 
}
.searchArea .btnSearch  { 
	flex:0 0 70px;
	position: absolute;
	right:5px; top:0; width:70px; height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	border-radius:35px;
	overflow: hidden;
}

.selectBox .select {
	font-size:14px;
	padding-left:25px;
	width:100%;
	background: transparent;
	font-weight: 400;
	font-family: "GmarketSans"; 
	line-height: 1.2;
	height: 100%;
	outline: none;
}

.btnSearch {
	position: absolute;
	right:0;
	top:0;
	width:50px; 
	height:50px;
}

.i_search_com {
	background: transparent url(../images/i_search.png) no-repeat center / 100%;
	width:20px; height: 20px;
	display: block;
}

.exSearch { display: flex; align-items: center; }
.exSearch h5 { 
	font-weight:500; 
	font-size:12px; 
	border-radius:30px; background:rgba(255,255,255,0.5);
	background: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
	background: #000;
	color: #fff;
	padding:12px 15px 11px 15px; 
	display: inline-flex;
	align-items: center;
	margin-right:5px;
	text-align: center;
	line-height:1.2;
}

.exList { padding:25px 0; display: flex; justify-content: center; }
.exList li { margin:0 2px; }
.exList li a { 
	border-radius:30px; background:rgba(255,255,255,0.5); 
	text-align: center; padding:12px 15px 11px 15px; 
	box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
	display: flex;
	font-size:12px;
	align-items: center;
}
.exList li a:hover { background: #fff;}
.exList li a em { font-size:12px; color:#000; font-weight:500; margin-right:7px;}
.exList li a span { font-size:12px; color:#000; position: relative; padding-left:8px;}
.exList li a span::before { content:""; display: block; width: 1px; height: 12px; 
	position: absolute; left: 0; top: 0;  
	background:#d2d2d2;
}


.sListWrap { 
	margin-top:200px;
}
.sListArea { 
	display: flex; justify-content: center;
}
.sListArea li { 
	margin:0 4px;
	padding:35px 32px;
	border-radius:17px;
	background: #fff;
	position: relative;
	width:280px;
}
.sListArea li h4 { 
	padding-bottom:72px;
}
.sListArea li h4 em { 
	font-size:22px; font-weight:700; font-family: "GmarketSans"; 
	display: block; padding-bottom:4px;
}
.sListArea li h4 span { 
	font-size:14px; font-weight:300; font-family: "GmarketSans"; 
	display: block;
}

.sListArea li div { 
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	align-items: flex-end;
}
.sListArea li div strong { display: block; text-align: right; font-size:32px; font-weight:700; color:#3751d3; line-height: 1.2; font-family: "GmarketSans"; }
.sListArea li div span { display: block; text-align: right; font-size:14px; font-weight:300; color:#000; line-height: 1; font-family: "GmarketSans"; }

.sListArea li i { 
	position: absolute;
	right:30px; top:32px;
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}

.i_explosive {
	width:45px; height:40px;
	background-image: url(../images/i_explosive.png) ;
}
.i_worker {
	width:44px; height:44px;
	background-image: url(../images/i_worker.png) ;
}
.i_gene {
	width:41px; height:42px;
	background-image: url(../images/i_gene.png) ;
}
.i_compound {
	width:39px; height:38px;
	background-image: url(../images/i_compound.png) ;	
}
.i_medical_prescription {
	width:43px; height:45px;
	background-image: url(../images/i_medical_prescription.png) ;
}




body, .earthBase { background: url(../images/bg_base.jpg) no-repeat center / cover;  background-attachment: fixed;}
.earthBaseMain { background: url(../images/bg_main.jpg) no-repeat center / cover; background-attachment: fixed;}
.earthBaseMain.on { background: url(../images/bg_com.jpg) no-repeat center / cover;  background-attachment: fixed; }

.mainTxt {
	position: absolute;
	left:50%; top:25vh;
	transform: translateX(-50%);
	transition: all 0.5s ease-out;
	width:100%;
}
.mainTxt p { text-align: center;}
.mainTxt p span { display: block; font-size:80px; font-weight:900; font-family: "Frank Ruhl Libre", sans-serif; color: #000; line-height: 1.3; }

.mainTxt.on {
	transition: all 0.5s ease-out;
	top:20vh;
}
.mainTxt.on p span { font-size:50px; color:#fff;}


.mainInp {
	position: absolute;
	left:50%; top:70vh;
	transform: translateX(-50%);
	transition: all 0.5s ease-out;
}
.mainInp.on {
	top:50vh;
}
.comInp {
		display: flex; align-items: center; padding:40px 19px; 
		width:730px;
		border-radius:30px; background:rgba(255,255,255,1); box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		position: relative;
}

.btnPlus {
	width:60px; height: 60px;
	border-radius: 30px;
	position: absolute;
	left: 8px;
	top:50%;
	transform: translateY(-50%);
	display: flex; justify-content: center; align-items: center;
	z-index:15;
}
.btnPlus i.i_plus {
	background:url(../images/i_plus.png) no-repeat; display: block; width: 19px; height: 18px; 
}
.mainSearchText {
	position: relative;
	left:60px;
	width: calc(100% - 160px);
	max-height:150px;
	overflow-y: auto;
	padding-right:20px;
}

.mainSearchText .baseTextarea {
	font-size:14px;
	color:#6b6b6b;
	line-height:1.6;
	font-family: "GmarketSans"; 
	width:100%;
	min-height:70px;
	resize: none;
	outline:none;
}

.msa { display: block; font-size: 18px; width: 100%; }

.btnMike {
	position: absolute;
	right:85px;
	top:50%;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
	display: flex; justify-content: center; align-items: center;
	z-index:15;
}
.btnMike .i_mike {
	background:url(../images/i_mike.png) no-repeat; display: block; width: 21px; height: 32px; 
}
.btnAI {
	width:60px; height: 60px;
	border-radius: 30px;
	background: #000;
	position: absolute;
	right: 15px;
	top:50%;
	transform: translateY(-50%);
	display: flex; justify-content: center; align-items: center;
	overflow: hidden;
	z-index:15;
}

.btnAI.on::after {
	content: "";
	position: absolute;
	left:0; top:0;
	width: 60px;
	height: 60px;
	animation-name: circleMv;
	animation-duration: 1.6s;
	animation-iteration-count: infinite;
	animation-fill-mode:forwards;
	 animation-timing-function: linear; 
	background:url(../images/i_main_b.png) no-repeat;
	background-size:100%;
}
.btnAI .i_ai {
	background:url(../images/i_main_btn_w.png) no-repeat; display: block; width: 26px; height: 26px; 
	background-size:100%;
	position: relative;
	z-index: 3;
}


@keyframes circleMv {
	0% { transform: rotate(0)}
	100% { transform: rotate(360deg)}
}



.mainInp_ps {
	position: fixed;
	left:50%; bottom:30px;
	transform: translateX(-50%);
	/* transition: all 0.5s ease-out; */
	width:1000px;
	margin:0 auto;
	z-index:10;
}

.comInp_ps {
		display: flex; align-items: center; padding:30px 18px; 
		width:1000px;
		border-radius:30px; background:rgba(255,255,255,1); 
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		position: relative;
		overflow: hidden;
}

.ps_plus {
	left:15px; bottom:20px;
	right:auto; top:auto;
	transform: translateY(0);	
}
.ps_mike {
	left:auto; top:auto;
	bottom:20px;
	right:85px;
	transform: translateY(0);	
}
.ps_ai {
	left:auto; top:auto;
	bottom:20px;
	right:20px;
	transform: translateY(0);	
}

.mainSearchText_ps {
	position: relative;
	width: calc(100%);
	padding:0 40px 60px 20px;
	max-height:170px;
	overflow-y: auto;

}
.mainSearchText_ps::after {
	content:"";display:block;
	width:100%;
	height:70px;
	background:#fff;
	position: fixed;
	left: 0;
	bottom:0;
	border-radius:0 0 30px 30px;
}


.mainSearchText_ps .baseTextarea {
	font-size:14px;
	color:#6b6b6b;
	line-height:1.6;
	position: relative;
	font-family:"Archivo", serif;
	font-family: "GmarketSans"; 	
	padding-right:20px;
	width:100%;
	min-height:70px;
	resize: none;
	outline:none;
}

.psr1 { 
	position: absolute;
	right:10px;
	top:10px;
	z-index:2;
}
.psr2 { 
	position: fixed;
	right:20px;
	top:20px;
	z-index:10;
}

.btnCopyPaste { 
	width:42px; height: 42px; 
	display: flex; justify-content: center;
	align-items: center;
}
.i_copy {
	background:url(../images/i_copy.png) no-repeat center / 100%; display: block; 
	width: 15px; height: 15px;
	opacity: 0.5;
}

.chatBoxFull { 
	/* height: calc(100vh - 110px);  */
	padding:30px 0 110px; 
	/* position: fixed;  */
	width: 100%; 
	z-index:1; 
	overflow-y: auto; 
	/* padding-left:25px;
	padding-right:10px;  */
}
.chatBoxFull::after {
	content:"";display: block;
	position: fixed;
	left:0; bottom:0; height:370px;
	background: linear-gradient(to top, rgba(207,218,226),rgba(207,218,226, 0.7), rgba(207,218,226, 0));
	width:100%;
	z-index:2;
}
.chatBoxArea { max-width:1000px; margin:0 auto; position: relative; padding-bottom:250px;}
.chatDiv { margin-bottom:30px;}
.chatDiv article { display: block;  }
.chatDiv article strong { display: block; font-size:14px; font-weight:700; padding-bottom:10px; line-height:1.2; font-family: "GmarketSans"; }

.chatDiv article .chatBox { 
	position: relative;
	border-radius:30px; 
	background:rgba(255,255,255,1); box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	display: inline-flex;
	width: 100%;
}
.chatDiv article .chatBox .comTexta1 { 
	font-size:14px;
	color:#6b6b6b;
	line-height:1.6;
	position: relative;
	font-family: "GmarketSans"; 
	padding:20px 35px 20px 25px;
}
.chatDiv article .chatBox._bgGray { background:#eff6f9; }
.chatDiv.xLeft { display: flex; }
.chatDiv.xRight  { display: flex; justify-content: flex-end; }
.chatDiv.xRight article strong { text-align: right; }

.w30per { width:30%; }
.w40per { width:40%; }
.w50per { width:50%; }
.w60per { width:60%; }
.w70per { width:70%; }
.w80per { width:80%; }



/* 관리자 */
.containerAdm { width: 100%; height: calc(100vh); position: relative; padding-top:84px; }


/* Login */
.loginBox {
    border-radius:10px; 
    background:#fff;
    padding:60px 40px 40px;
    text-align:center;
    width:450px; 
    margin:0 auto;
	box-shadow: 0 5px 30px rgba(0,0,0,0.08);
	margin-top:80px;
}

.loginBox article { text-align: left;}
.loginBox article h2 { font-size:36px; font-weight:900 ; line-height: 1; text-align: center; padding-bottom:30px; 
	/* font-family:"Archivo", serif; */
}
.loginBox article p { font-size:18px; font-weight:600; padding:10px 0 20px; display: none;}
.lgDiv { margin-top:10px}
.autoSave { padding:10px 0 10px;}
.lgDivEtc { display: flex; margin:20px 0 20px; justify-content: space-between; }
.lgDivEtc div { display: flex; align-items: center;}
.lgDivEtc div a { 
    font-size:14px; color:#6e6e6e; 
    font-weight:600; display: flex; align-items: center;
	text-decoration: underline;
}
.lgDivEtc div:nth-child(1) a  { margin-right:0; position: relative;}
.lgDivEtc div:nth-child(1) a:nth-child(2)::before { 
    position: absolute; left:0; top:4px; content:""; display:block; height:12px; width:2px; 
    background:#d9d9d9; 
}
.lgDivEtc div a:nth-child(2) { padding-left:12px; position: relative; }
.lgDivEtc div a:nth-child(2)::before { content:""; display:block; height:12px; }

.inpLoginTxt { width:452px; }
.checkingLogin strong {
    padding-left:6px;
	font-size:14px;
	font-weight:400;
	font-family: "GmarketSans";
	display: inline-block;
	padding-top:3px;
	vertical-align: -1px;
}
.checkingLogin input[type="checkbox"]:checked + i + strong { 
    color:#000;
}
.subBtn.custom-btn2 { background:#000 !important}

.btnLoginB { border-radius:0;}
.btnLoginBox { margin-top:20px;}
.btnLoginBox a { 
    height:52px; width:100%; display: flex; justify-content: center; align-items: center; 
	font-size:16px; font-weight:700; 
    border-radius:7px; 
	padding-top:2px;
}
.btnLoginBox a span { color:#fff !important; }



.titleLabel { display: block; margin-bottom: 10px; font-size:14px; font-weight:500; color:#3e3e3e; margin-top:20px;}
.titleLabel em { color:var(--red-color); font-style: normal; margin-left:3px;}

.spaceB1 { justify-content: space-between;}
.spaceB1 > div:nth-child(1) { flex:0 0 40%;}
.spaceB1 > div:nth-child(2) { flex:0 0 30%;}
.spaceB1 > div:nth-child(3) { flex:0 0 65px; }

input:focus { outline: none;}

.fsbDiv { display: flex; margin-bottom:5px; position: relative; }
.fsbDiv input[type="text"]:focus { 
    /* border:1px solid #000;  */
	color:#000;
	background:#fff;
 }
.fsbDiv input[type="password"]:focus { 
    /* border:1px solid #000;  */
	color:#000;
	background:#fff;
}

.logA { 
    position:absolute; right:0; top:0; width:50px; height:50px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.logA svg path { fill:#CECECE; }
.logA svg path { fill:#CECECE; }

.fsbDiv input[type="text"]:focus + .logA svg path { fill: #000;}
.fsbDiv input[type="password"]:focus + .logA svg path { fill: #000;}

.etcLogin { display: flex; justify-content: center; align-items: center;}
.etcLogin li { margin:10px 3px 0; } 

.jcEnd { justify-content: flex-end;}


.conLayout_in { padding:15px; background: #fff; border-radius: 17px; border:1px solid #d2d2d2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.conLayout_table { padding:0; background: #fff; border-radius: 17px; border:1px solid #d2d2d2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.conLayout_table_search { 
	padding:15px 10px 5px; 
	background: transparent; 
	border-radius: 17px; 
	/* border:1px solid #d2d2d2; 
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);  */
	margin-bottom:10px;
	display: flex;
	justify-content: center; 
}


.admSearchTop { display: flex; align-items: center; padding:0 0 0 30px; position: relative; }
.admSearchTop .aFlex { display: flex; align-items: center; }
.admSearchTop .aFlex label { 
	display: inline-flex; align-items: center;
    position: relative;
    padding-right: 15px;
	padding-top:4px;
}
.admSearchTop .aFlex label strong { font-size:16px; font-weight:700;}
.admSearchTop .aFlexSecond label {  flex:0 0 auto; padding-left:30px; }
.admSearchTop .aFlexSecond { flex:0 0 auto; }
.admSearchTop .aFlexBtn { flex:0 0 110px; height:48px; position: absolute; right:0; top:0; }

.admSearchTop .aFlexDate .span_dash { margin:0 5px;}

.nDate{ background: #f5f7f9 url(../images/new/i_date_n.png) no-repeat right 10px center / 18px 18px !important; }



.admSearchCase { display: inline-flex; }
.admSearchCase > * { margin:0 3px; }

.btnPicSearch2 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	border-radius:7px;
	background:#000;
	color:#fff; font-size:14px; font-weight:700;
	font-family: "GmarketSans";	
}
.btnPicSearch2:hover { text-decoration: underline;}
.btnPicSearch2 span {  display: block;}

.conMiddleLayout { padding:30px 0 10px;}
.ptNone { padding-top:0 !important; }

.listHeader { display: flex; justify-content: space-between; }
.lectureTotal {
	padding:0 0 10px 10px;
	display: flex;
	align-items: center;
	flex:0 0 auto;
}
.lectureTotal i {
	display: block;
	width:28px;
	height:24px;
	background:url(../images/new/i_total.png) no-repeat center / 100%; 
}
.lectureTotal > span { font-size:16px; margin-left:10px; padding-top:7px;}
.lectureTotal > span strong { font-weight:700;}

.lectureTotal > span.mypage { font-size:16px; margin-left:10px; padding-top:7px;}
.lectureTotal > span.mypage strong { font-weight:700; }
.lectureTotal > span.mypage em { font-weight:700; }

.color_blue {  color:#4c93ff }
.color_violet {  color:#8981ff }
.color_green {  color:#43ba81 }


.fxHorCenter {
	display: flex; justify-content: center; align-items: center;
	width:100%;
}
.fxHorEnd {
	display: flex; justify-content: flex-end; align-items: center;
	width:100%;
}


.boardTable { border-radius:17px 17px 0 0; overflow: hidden; width: 100%;}
.boardTable thead tr th { 
	border-bottom:1px solid #d2d2d2; 
	text-align: center; 
	padding:15px 0 12px;
	background: #f5f7f9; 
	font-size:14px;
	color:#000;
	font-family: "GmarketSans";
	font-weight:700;
}
.boardTable tbody tr td { 
	border-bottom:1px solid #d2d2d2; 
	text-align: center; padding:14px 5px 11px; 
	font-size:14px;
	color:#6f6f6f;
	transition: all 0.3s ease-out;
}
.boardTable tbody tr:nth-child(even) td { background:#fdfdfd;}

.boardTable tbody tr:hover td { background:var(--bg-body-color); }
.boardTable tbody tr td.taLeft { padding-left:20px; text-align: left;}
.colorDelay { color:#1976d2}

.bChecking { text-align: center;}
.boardChk input[type="checkbox"] {
	appearance: none;
}
.boardChk input[type="checkbox"] + i { 
	border: none;
	display: inline-block;
	width:20px; height:20px;
	background:url(../images/new/b_check_off.png) no-repeat center / 100%;
}
.boardChk input[type="checkbox"]:checked + i { 
	background:url(../images/new/b_check_on.png) no-repeat center / 100%;
}
.boardBottomBtnArea { padding:20px 20px 20px; position: relative; }

.bdrNone { border-radius:0 !important; }
.inqTable thead th { border-top:1px solid #d2d2d2; }
.baLeft { display: flex;}
.baLeft a { margin-right:5px;}

.baCenter { display: flex; justify-content: center;}
.baCenter a { margin:0 2.5px;}

.baRightPos {
	position: absolute;
	right:0; top:20px;
}




.boardTitle_link { text-align: left; }
.boardTitle_link a { margin-right:10px; display: inline-block; }
.boardTitle_link a:hover { text-decoration: underline;}

.i_secret {
	display: inline-block;
	width: 11px;
	height: 15px;
	background:url(../images/new/i_secret.png) no-repeat center / 100%;
	vertical-align: -4px;
}

.tda_left { text-align: left;}
.ic_comm { font-size:14px; }
.ib_wait { color:#898989; }
.ib_complete { color:#ec3131; }

.inqDivList ul li { display: flex; border-top:1px solid #d2d2d2; padding:20px 20px 17px; align-items: center;}
.inqDivList ul li:nth-child(1) { border-top:none; }
.inqDivList ul li label { flex:0 0 10%; font-size:14px; font-weight:700; line-height: 1.5;}
.inqDivList ul li .idc { flex:0 0 90%; }
.inqDivList ul li .idc p { font-size:14px; line-height:1.5;}

.inqDivList ul li .idc_file p { margin-top:5px;}
.inqDivList ul li .idc_file p:nth-child(1) { margin-top:0;}
.inqDivList ul li .idc_file p a.i_file { padding-left:20px; position: relative; }
.inqDivList ul li .idc_file p a.i_file::before {
	content:"";
	width: 14px;
	height: 14px;
	background:url(../images/new/i_file.png) no-repeat left center / 100%;
	position: absolute; left:0; top:-1px;
}
.inqDivList ul li .idc_file p a.i_file:hover { text-decoration: underline;}

.inqDivList ul li .idc.inqTitleText p { font-size:20px; font-weight:700;}
.texta_case1 { 
	border: 1px solid #d2d2d2; width: 100%; min-height: 180px; padding:15px; font-size:14px; color:#000; 
	line-height:1.5;
	background: #f3f5f7;
	font-family: var(--primary-font); border-radius:10px;
	resize: none;
}
.inq_sort { color:#4a63e1; font-weight:700;}
.fileAddList { display: flex; flex-wrap: wrap; }


.formConTop article { display: flex; border-bottom:1px solid #d2d2d2; align-items: center; padding:20px 20px 17px; }
.formConTop article:nth-child(1) { border-top:none;}

.fxBox { display: flex; align-items: center; }
.fxBox label { flex:0 0 140px;}
.fxBox label strong { 
	display: inline-block; position: relative; padding-right:5px; 
	font-size:14px; font-weight:800;
}
.fxBox label strong .nece { 
	position: absolute;
	right:-5px;
	top:0;
	display: block;
	width:6px; height: 6px;
	border-radius:3px;
	background:#d32f2f;
}
.fxBox .inBox { margin-right:5px; }

.notPassword { padding:10px 10px; font-size:14px; color:red; font-weight:400; display: none;}

.joinNewBox h4 { border-bottom:1px solid #000; padding:20px 0 15px;}

.d_title_h4 h4 { display: flex; margin-bottom:20px; }
.d_title_h4 h4 strong { 
	color:#000; 
	font-size:18px; font-weight:800; 
	display: inline-flex; position: relative;
	padding-right:8px;
}

.totalAgree { padding:20px 0 20px; }

.joinAgree { padding-top:10px; }
.agreeList { 
	border-bottom:1px solid #d2d2d2;
	padding:20px 0;
}
.agreeList > .agBox { padding:6px 20px; display: flex; justify-content: space-between; align-items: center;}
.agBox { position: relative;}
.agBox label span { color:#000; font-size:14px; font-weight:400; }
.agBox label span em { color:#a2a2a2; }

.agreeConBox { padding:10px 20px 20px; display: none; }
.agreeConBox > div { 
	border:1px solid #d2d2d2; padding:20px; font-size:14px; line-height:1.7; 
	background:#f3f5f7;
	border-radius:17px 0 0 17px;
	overflow-y: auto;
	height:140px; 
}
.fw700 { font-weight:700 !important; }

.wName { width:10vw}
.wEmail { width:24vw;}


.wd1 { width:290px !important;}
.wd2 { width:230px !important;}
.wd3 { width:180px !important;}
.wd4 { width:525px !important;}
.wd5 { width:450px !important;}
.wd6 { width:330px !important;}

.w40 { width:40px !important;}
.w60 { width:60px !important;}
.w80 { width:80px !important;}
.w100 { width:100px !important;}
.w120 { width:120px !important;}
.w140 { width:140px !important;}
.w150 { width:150px !important;}
.w160 { width:160px !important;}
.w200 { width:200px !important;}
.w250 { width:250px !important;}
.w300 { width:300px !important;}
.w400 { width:400px !important;}
.w500 { width:500px !important;}
.w600 { width:600px !important;}
.w700 { width:700px !important;}
.w800 { width:800px !important;}


.w5per { width: 5% !important; }
.w10per { width: 10% !important; }
.w12per { width: 12% !important; }
.w13per { width: 13% !important; }
.w15per { width: 15% !important; }
.w17per { width: 17% !important; }
.w20per { width: 20% !important;}
.w22per { width: 22% !important;}
.w28per { width: 28% !important;}
.w30per { width: 30% !important;}
.w32per { width: 32% !important; }
.w40per { width: 40% !important;}
.w50per { width: 50% !important;}
.w60per { width: 60% !important;}
.w70per { width: 70% !important;}
.w80per { width: 80% !important;}
.w90per { width: 90% !important;}
.w100per { width: 100% !important;}



/* layer */
.commLayer {
	position: fixed;
	left:0; top:0; 
	width:100vw;
	height: 100vh;
	z-index:99999;
	display: none;
}

.commFx { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; z-index:10;}
.commLayerBox { 
	background: #fff; border-radius: 17px; border:1px solid #d2d2d2; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: relative; 
}
.commShadow { position: fixed; left: 0; top: 0; z-index:2; width: 100%; height: 100%; background:rgba(0,0,0,0.4) }
.commHeader { 
	padding:30px 30px 20px; 
	position: relative; border-bottom:1px solid #d2d2d2; 
	background:#f5f7f9; border-radius:17px 17px 0 0;
}

.commHeader h2 { display: flex; align-items: center; }
.commHeader h2 i { margin-right:12px;}
.commHeader h2 span { font-size:26px; font-weight:700; }
.i_title_comm {
	width:36px; height: 33px;
	display: block;
	background:url(../images/new/i_layer_title.png) no-repeat center / 100%;
}

.commLayerBtn { display: flex; justify-content: center ; padding:20px 30px 20px; border-top:1px solid #d2d2d2; }
.commLayerBtn button { margin:0 2px;}


a.btnLayerClose {
	width:44px; height: 44px;
	background:f8f8f8;
	border-radius:24px;
	border:1px solid #d2d2d2;
	position: absolute;
	right: 20px; top: 50%;
	margin-top:-22px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}
a.btnLayerClose:hover {
	/* background:#d2d2d2; */
	transform: rotate(180deg);
}
.i_layer_close {
	width:14px; height: 14px;
	display: block;
	background:url(../images/new/i_layer_close.png) no-repeat center / 100%;
}

.commCon { padding:15px 0;}
.commLayerList { 
	padding:0 30px;
}
.commLayerList li { display: flex; align-items: center; margin:10px 0;  }
.commLayerList li label { font-size:14px; font-weight:700; flex:0 0 90px; padding-top:4px;}
.commLayerList li > div { flex:1 1 auto;  }


/* button */
.btns {
	display: flex; 
	justify-content: center; align-items: center; 
	font-size:14px; 
	font-weight:700; 
	height:42px;
	border-radius:7px;
	padding-top:2px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	font-family: "GmarketSans";
	background:#fff;
	border:1px solid #d2d2d2;
}
.btns:hover { text-decoration: underline;}

.btnc {
	display: flex; 
	justify-content: center; align-items: center; 
	font-size:16px; 
	font-weight:700; 
	height:42px;
	border-radius:7px;
	padding-top:2px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	font-family: "GmarketSans";
	background:#fff;
	border:1px solid #d2d2d2;
}

a.btnView {
	height:40px; display: flex; justify-content: center; align-items: center; 
	border-radius:7px;
	transition: all 0.3s;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	font-family: "GmarketSans";
	background:#fff;
	border:1px solid #d2d2d2;
}
a.btnView span { font-size:14px; font-weight: 700; color:var(--bg-base-color); display: block; padding-top:2px;}
a.btnView:hover { background:var(--bg-point-color); box-shadow: 0 3px 6px rgba(0,0,0,0.15); border:1px solid var(--bg-white-color);}
a.btnView:hover span { color:var(--bg-white-color)}

.btnView {
	height:40px; display: flex; justify-content: center; align-items: center; 
	border-radius:7px;
	transition: all 0.3s;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	font-family: "GmarketSans";
	background:#fff;
	border:1px solid #d2d2d2;
	color:#fff;
}
.btnView span { font-size:14px; font-weight: 700; color:var(--bg-base-color); display: block; padding-top:2px;}
.btnView:hover { background:var(--bg-point-color); box-shadow: 0 3px 6px rgba(0,0,0,0.15); border:1px solid var(--bg-white-color);}
.btnView:hover span { color:var(--bg-white-color)}


/* btn search */
.btnPicSearch {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	border-radius:7px;
	background:#000;
	color:#fff; font-size:16px; font-weight:700;
	font-family: "GmarketSans";	
}
.btnPicSearch:hover { text-decoration: underline;}
.btnPicSearch span {  margin-right:10px; display: block;}
.btnPicSearch i {
	display: block;
	width: 15px; height: 15px;
	background:url(../images/new/i_search_c.png) no-repeat center / 100%;
	margin-left:10px;
	margin-bottom:5px;
}

.btnPay {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 48px;
	border-radius:17px;
	background:#000;
	color:#fff; font-size:16px; font-weight:700;
	font-family: "GmarketSans";	
	padding:2px 0 0;
}
.btnPay:hover { text-decoration: underline;}


/* btn back */
.btnBack {
	border:1px solid #d2d2d2;
	padding:15px 20px;
	border-radius:17px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	background: #fff;
}
.btnBack:hover { background:#f6f6f6; }
.btnBack i.i_back {
	background:url(../images/i_back.png) no-repeat; display: block; width: 20px; height: 16px;
}

a.moreAgree { 
	display: flex;
	justify-content: center;
	align-items: center;
	background:#000;
	color:#fff;
	font-size:12px;
	font-weight:500;
	border-radius:5px;
	padding:8px 10px 6px;
	line-height:1;
	position: relative;
}
a.moreAgree.on { 
	background:#fff;
	color:#000;
	border:1px solid #d2d2d2;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	padding-right:25px;
}
a.moreAgree.on::after {
	content:"x";
	font-size:14px; 
	position: absolute;
	right:7px; top:5px;
}


/* input[type=text] */
.inp { 
	height:40px; 
	padding:3px 0 0 15px; 
	font-size:14px; 	
	border-radius: 7px; 
	background:#f5f7f9;
	border:1px solid #d2d2d2; 
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	line-height:1;
	font-family: 'GmarketSans',sans-serif;
}
.inpm { 
	height:40px; 
	padding:3px 0 0 15px; 
	font-size:14px; 	
	border-radius: 7px; 
	background:#f5f7f9;
	border:1px solid #d2d2d2; 
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	line-height:1;
	font-family: 'GmarketSans',sans-serif;
}
.inpx { 
	height:50px; 
	padding:2px 15px 0; 
	font-size:14px; 
    border-radius: 7px;
	background:#f5f7f9;
	border:1px solid #d2d2d2; 
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	font-weight:700;
	line-height:1;
	font-family: 'GmarketSans',sans-serif;
}
.inpw_h1 { 
	height:40px; 
	padding:2px 15px 0; 
	font-size:14px; 
    border-radius: 7px;
	background:#fff;
	border:1px solid #d2d2d2; 
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	line-height:1;
	font-family: 'GmarketSans',sans-serif;
}
.inpw_h2 { 
	height:50px; 
	padding:2px 15px 0; 
	font-size:14px; 
    border-radius: 7px;
	background:#fff;
	border:1px solid #d2d2d2; 
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	font-weight:700;
	line-height:1;
	font-family: 'GmarketSans',sans-serif;
}


/* select */
.selectCase { 
	position: relative; 
	height:40px; 
	background:#f5f7f9; 
	border:1px solid #d4d3d5; 	
	border-radius: 7px; 
	overflow: hidden;	
}
.selectCase .selectbox {
	box-sizing: border-box;
	width:100%;
	position: relative;
	padding-left:15px;
	padding-right:25px;
	appearance: none;	
	background: transparent;
	outline: none;
	height: 40px;
	font-family: "GmarketSans"; 
	font-size:14px;	
	z-index:10;
	cursor: pointer;
}
.selectCase::before { 
	content:"";
	width:40px;
	height: 38px;
	border-left:1px solid #e6e6e6;
	display: block;
	position: absolute;
	right:0; top:1px;
	z-index:1;
}
.selectCase::after { 
	content:"";
	display:block; 
	position: absolute; right:13px; top:50%; 
	transform: translateY(-50%); 
	background:url(../images/new/i_select_arrow.png) no-repeat center / 100%;
	width:13px; height:7px;
	z-index:2;
}
.selectCase input[type="text"] { width: 100%; margin-right:5px; }



.selectCase2 { 
	position: relative; 
	height:40px; 
	background:#fff; 
	border:1px solid #d4d3d5; 	
	border-radius: 7px; 
	overflow: hidden;	
}
.selectCase2 .selectbox {
	box-sizing: border-box;
	width:100%;
	position: relative;
	padding-left:15px;
	padding-right:25px;
	appearance: none;	
	background: transparent;
	outline: none;
	height: 40px;
	font-family: "GmarketSans"; 
	font-size:14px;	
	z-index:10;
	cursor: pointer;
}
.selectCase2::before { 
	content:"";
	width:40px;
	height: 38px;
	border-left:1px solid #e6e6e6;
	display: block;
	position: absolute;
	right:0; top:1px;
	z-index:1;
}
.selectCase2::after { 
	content:"";
	display:block; 
	position: absolute; right:13px; top:50%; 
	transform: translateY(-50%); 
	background:url(../images/new/i_select_arrow.png) no-repeat center / 100%;
	width:13px; height:7px;
	z-index:2;
}
.selectCase2 input[type="text"] { width: 100%; margin-right:5px; }



.selectDiv { 
	border-radius: 7px; border:1px solid #d2d2d2; 
	height:40px; padding:3px 10px 0 10px; 
	background:#f5f7f9;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	background:#fff;
}
.selectDiv .select { 
	height:100%; width:100%; 
	font-size:14px; 	
	font-family: "GmarketSans"; 	
	outline: none;	
	cursor: pointer;
}
.selectDiv2 { 
	border-radius: 7px; border:1px solid #d2d2d2; 
	height:40px; padding:3px 10px 0 10px; 
	background:#f5f7f9;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.selectDiv2 .select { 
	height:100%; width:100%; 
	font-size:14px; 	
	font-family: "GmarketSans"; 	
	background: transparent;
	outline: none;	
	cursor: pointer;
}


::placeholder { color:#cecece; font-weight:500;}


.newCaseUl { padding:0 20px;}
.newCaseUl li { margin-top:10px; }
.newCaseUl li:nth-child(1) { margin-top:0; }



.flexCase1 { display: flex; align-items: center; padding:10px 0;}
.flexCase1 > div { margin-right:20px; }

/* input[type=checkbox] */
.comFormChk label { height: 18px; cursor: pointer; display: inline-flex; align-items: center; }
.comFormChk label input[type="checkbox"] {display: none; }
.comFormChk label input[type="checkbox"] + i { 
    display: inline-flex; 
    width:22px; height: 22px; 
    cursor: pointer;
    background: #fff;
	border:1px solid #c7c7c7;
	border-radius:12px;
	position: relative;
}
.comFormChk label input[type="checkbox"] + i::before {
	content:"";
	display: inline-block;
	width: 9px;
	height: 7px;
	position: absolute;
	left:50%; top:50%;
	transform: translate(-50%,-50%);
	z-index:2;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	background-image:url(../images/i_check_case.png);
	opacity: 0.3;
}
.comFormChk label input[type="checkbox"]:checked + i::after { 
	content:"";display: inline-block;
	width:22px; height:22px;
	border-radius:12px;
	background:#000;
	position: absolute;
	left:50%; top:50%;
	transform: translate(-50%,-50%);
}
.comFormChk label input[type="checkbox"]:checked + i::before {
	background-image:url(../images/i_check_case_white.png);
	opacity: 1;
}
.comFormChk label span { margin-left:10px; padding-top:3px; }

/* input[type=radio] */
.comFormRadio label { height: 18px; cursor: pointer; display: flex; align-items: center; }
.comFormRadio label input[type="radio"] {display: none; }
.comFormRadio label input[type="radio"] + i { 
    display: flex; 
    width:22px; height: 22px; 
    cursor: pointer;
    background: #fff;
	border:1px solid #d2d2d2;
	border-radius:12px;
	position: relative;
}
.comFormRadio label input[type="radio"]:checked + i::after { 
	content:"";display: block;
	width:11px; height:11px;
	border-radius:7.5px;
	background:#000;
	position: absolute;
	left:50%; top:50%;
	transform: translate(-50%,-50%);
}
.comFormRadio label span { 
	margin-left:10px; 
	font-weight:500; 
	font-size:14px; padding-top:3px;
	font-family: "GmarketSans"; 
	flex:0 0 auto;
}

.comFormRadio2 label { height: 18px; cursor: pointer; display: inline-flex; align-items: center; }
.comFormRadio2 label input[type="radio"] {display: none; }
.comFormRadio2 label input[type="radio"] + i { 
    display: flex; 
    width:22px; height: 22px; 
    cursor: pointer;
    background: #fff;
	border:1px solid #d2d2d2;
	border-radius:12px;
	position: relative;
}
.comFormRadio2 label input[type="radio"]:checked + i::after { 
	content:"";display: block;
	width:11px; height:11px;
	border-radius:7.5px;
	background:#000;
	position: absolute;
	left:50%; top:50%;
	transform: translate(-50%,-50%);
}



.layerWidthCase1 { width:600px; }
.layerWidthCase2 { width:400px; }
.layerWidthCase3 { width:500px; }

.flexListRow { display: flex; flex-wrap:wrap;}
.flexListRow section { margin:0 5px 10px}

.pay_title { text-align: center; font-size:40px; font-weight:700; padding:40px 0;}
.pay_tab_wrap { display: flex; justify-content: center; margin-bottom:40px; }
.pay_tab { display: inline-flex; justify-content: center; border-radius:40px; background:#e9eaf0; padding:8px;}
.pay_tab li { margin-left:3px; }
.pay_tab li:nth-child(1) { margin-left:0;}
.pay_tab li a { display: inline-flex; padding:12px 20px 10px; font-size:12px; text-align: center; border-radius:40px; line-height:1; font-weight:700;}
.pay_tab li a:hover {  background:rgba(255,255,255,0.5);}
.pay_tab li a.on { background:#fff; color:#000; }

.pay_list { display: flex; justify-content: center; }
.pay_list article { 
	padding:44px 30px 150px;
	border-radius:17px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	border:1px solid #d2d2d2;
	margin:0 5px;
	flex:0 0 280px;
	position: relative;
}

.pay_case1 { background: #fff; }
.pay_case2 { background:#4c93ff}
.pay_case3 { background:#8981ff;}
.pay_case4 { background:#43ba81;}
.pay_case5 { background:#f19149;}

.pay_comm { position: relative;}
.pay_comm h4 { display: flex; align-items: center; }
.pay_comm h4 strong { font-size:18px;color:#fff; font-weight:500; line-height: 1;}
.pay_comm p { margin-top:20px;}
.pay_comm p em { font-size:26px;color:#fff; font-weight:700;}
.pay_comm p strong { font-size:26px;color:#fff; font-weight:700;}
.pay_comm p span { font-size:12px; color:#fff; font-weight:500;}

.pay_comm dl { margin-top:50px;}
.pay_comm dl dt { font-size:12px;color:#fff; font-weight:500;}
.pay_comm dl dd { margin-top:14px; display: flex; align-items: center;}
.pay_comm dl dd span { color:#fff;}
.pay_comm dl dd span strong { color:#fff; font-size:14px;}
.pay_comm dl dd i { 
	display: inline-block;
	width: 9px;
	height: 7px;
	background:url(../images/new/i_check_w_on.png) no-repeat center / 100%;
	margin-right:7px;
	flex:0 0 9px;
}
.pay_comm dl dd span { font-size:12px;color:#fff; font-weight:500;  line-height:1.4;}

.pay_comm a.btnPayComm {
	border-radius:8px;
	display: flex;
	padding:15px 0;
	text-align: center;
	font-size:14px;
	background:#fff;
	position: absolute;
	font-weight:700;
	left: 0;
	bottom: 30px;
	width: calc(100% - 40px);
	margin:0 20px;
	justify-content: center;
	transition: all 0.2s ease-out;
}
.pay_comm a.btnPayComm._Case1 { background:#000; color:#fff;}
.pay_comm a.btnPayComm._Case2 { color:#4c93ff}
.pay_comm a.btnPayComm._Case3 { color:#8981ff}
.pay_comm a.btnPayComm._Case4 { color:#43ba81}
.pay_comm a.btnPayComm._Case5 { color:#f19149}

.pay_comm_dark dl dd i { 
	background:url(../images/new/i_check_d_on.png) no-repeat center / 100%;
}

.pay_comm_dark h4 { color:#000; }
.pay_comm_dark p em { color:#000;}
.pay_comm_dark p strong { color:#000;}
.pay_comm_dark p span { color:#000;}
.pay_comm_dark dl dt { color:#000;}
.pay_comm_dark dl dd span { color:#000;}
.pay_comm_dark dl dd span strong { color:#000;}

.pay_comm a.btnPayComm:hover { background: transparent; border:1px solid rgba(255,255,255,0.5); color:#fff;}
.pay_comm_dark a.btnPayComm:hover { background: transparent; border:1px solid rgba(0,0,0,0.5); color:#000;}

.pay_comm_dark h4 { display: flex; align-items: center; }
.pay_comm_dark h4 strong { font-size:18px;color:#000; font-weight:500; line-height: 1;}

.discount_text {
	color:rgba(255,255,255,0.7);
	font-size:12px;
	position: absolute;
	left:30px;
	top:120px;
	font-weight:700;
}

.discount_em {
	/* position: absolute;
	right:10px;
	top:10px; */
	border-radius:20px;
	background:rgba(0,0,0,0.8);
	padding:6px 10px 4px;
	color:#fff;
	font-size:12px;
	margin-left:10px;
}

.pay_comm_dark .discount_text { color:rgba(0,0,0,0.5);}
.after_notice { padding:40px 0 0;}
.after_notice h3 { font-size:18px; font-weight:700; line-height: 1; margin-bottom:20px;}
.after_notice ul { padding:25px 30px; background:#f3f3f3; border-radius:10px;}
.after_notice ul li { margin-top:7px; line-height:1.4; font-size:13px;}
.after_notice ul li:nth-child(1) { margin-top:0 }
.after_notice ul li strong { line-height:1.4; font-size:13px; color:red;}
.after_notice ul li::before { content:""; font-size:13px; font-weight:500; display: inline-block; width: 15px;}
.after_notice ul li:nth-child(1)::before { content:"1.";}
.after_notice ul li:nth-child(2)::before { content:"2.";}
.after_notice ul li:nth-child(3)::before { content:"3.";}

.payListWrap > div { display: none; }
.payListWrap > div.on { display: flex; }

.comparisonDiv { width:1200px; margin:0 auto; padding:150px 0 100px;}
.p_title_h3 { font-size:24px; font-weight:700; line-height: 1;}
.cdDivCase { padding:30px 0 0;}

.payTable { overflow: hidden; width: 100%;}
.payTable thead tr th { 
	border-bottom:1px solid #000; 
	padding:15px 10px 12px;
	font-size:14px;
	color:#000;
	font-family: "GmarketSans";
	font-weight:700;
	/* background:#f6f6f6;
	border-top:1px solid #000; */
}
.payTable tbody tr th,
.payTable tbody tr td { 
	border-bottom:1px solid #d2d2d2; 
	padding:15px 10px 12px; 
	font-size:14px;
}

.payTable tbody tr th {
	font-weight:700;
}

.chk_large_on {
	display: inline-flex;
	width: 14px;
	height: 11px;
	background:url(../images/new/i_check_d_large.png) no-repeat center / 100%;
}

.str_hit1, 
.str_hit2 { display: block; text-align: left; font-weight: 700; color:#000; padding:7px 0 0; font-size:12px; }


.btnSubscribe {
	display: inline-block;
	padding:8px 10px 6px;
	font-size:14px;
	transition: all 0.2s ease-out;
}
.btnSubscribe.unsubscribe {
	border-radius:5px;
	color:#333;
	border:1px solid #d2d2d2; 
}
.btnSubscribe.unsubscribe:hover { background:#000; color:#fff;}
.btnSubscribe.expiration {
	border:none;
	color:#db413a;
	cursor: default;
}

.commConCase1 { min-height:180px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.commConCase1 p { font-size:14px; line-height:1.4; margin:5px 0; color:#333;}
.commConCase1 p.cc_p1 { font-size:20px; padding-bottom:0; }
.ccDate { font-size:16px; font-weight:700; }

.onlyText { font-size:14px; }

.newPassBox { display: none !important; }
.newPassBox.on { display: flex !important; }

.blc_right a { position: absolute; right:10px; top:10px; margin-top:0;}


.subscribeArea { padding:50px 35px 20px;}
.subscribeArea dl { 
	margin:20px 0; border:1px solid #d2d2d2; background:#f5f7f9;  box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
	padding:25px; border-radius:17px;
}
.subscribeArea dl dt { margin-bottom:10px; font-size:16px; font-weight:500;}
.subscribeArea dl dd { font-size:30px; font-weight:700;}

.subscribeArea .subsChkArea .comFormChk label span { font-size:14px !important; }

.subscribeArea .subsBtnArea { padding:30px 0 20px;}
.subscribeArea .payReadyNoticeWrap h3 { margin:10px 0 ; position: relative; display: flex; justify-content: space-between; align-items: center;}
.subscribeArea .payReadyNoticeWrap h3 strong { font-weight:700; font-size:14px; }
.btnUpHide { 
	display: inline-flex;
	width:30px;
	height: 30px;
	border:1px solid #d2d2d2;
	border-radius:10px;
	align-items: center;
	justify-content: center;
	font-size:12px;
	font-weight:700;
	transform: rotate(-90deg);
	cursor: pointer;
	transition: all 0.2s ease-out;
}
.btnUpHide.on {
	transform: rotate(90deg);
}

.subscribeArea .payReadyNoticeWrap ul li { font-size:12px; margin:6px 0; line-height: 1.5; }
.subscribeArea .payReadyNoticeWrap ul li::before { content:""; margin-right:5px;  }
.subscribeArea .payReadyNoticeWrap ul li:nth-child(1)::before { content:"1."; }
.subscribeArea .payReadyNoticeWrap ul li:nth-child(2)::before { content:"2."; }
.subscribeArea .payReadyNoticeWrap ul li:nth-child(3)::before { content:"3."; }
.subscribeArea .payReadyNoticeWrap ul li:nth-child(4)::before { content:"4."; }

.payReadyNoticeList { display: none; }
.payReadyNoticeList.on { display: block;}


.payMethodArea { padding:50px 35px 20px;}

.payMethodArea > p { 
	margin:10px 0 40px; font-size:14px; font-weight:500;
	line-height: 1.4;
}

.methodList li { 
	display: flex; justify-content: space-between; align-items: center; 
	border-top:1px solid #d2d2d2;
	padding:20px 0;
}
.methodList li:nth-child(1) { border-top: none;}
.payYear { display: flex; align-items: center;}
.payYear strong { font-size:14px; }
.payYear span { font-size:12px; font-weight:500; margin-left:5px; }

.bdt_none { border-top:none !important;}


.i_kakao_pay {
	display: block;
	width: 46px;
	height: 19px;
	background:url(../images/new/i_kakao_pay.png) no-repeat center / 100%;
	margin-left:10px;
}
.i_naver_pay {
	display: block;
	width: 46px;
	height: 19px;
	background:url(../images/new/i_naver_pay.png) no-repeat center / 100%;
	margin-left:10px;
}


.useAgreeLayer { display: block; }
.marketLayer { display: block; }
.policyLayer { display: block; }

.layerWidthCaseBox { width:800px; }
.commConCaseAgree { height:400px; padding:20px 40px; overflow-y: auto; }
.commConCaseAgree > * { line-height:1.5; font-size:14px; word-break: break-all;}
.commConCaseAgree h3 { margin:30px 0 10px;}
.commConCaseAgree > ul li { margin-top:15px; }
.commConCaseAgree > ul li ul { padding-left:20px;}

.mcTable { border-bottom:1px solid #d2d2d2; border-right:1px solid #d2d2d2;}
.mcTable thead tr th {
	border-top:1px solid #d2d2d2;
	border-left:1px solid #d2d2d2;
	padding:6px 3px;
	text-align: center;
	font-size:12px;
	background: #f3f3f3;
	
}

.mcTable tbody tr td { 
	border-top:1px solid #d2d2d2;
	border-left:1px solid #d2d2d2;
	padding:6px 3px;
	text-align: center;
	font-size:12px;
}


/* loading 1 */
.loadingDivBox { 
	display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; 
	background:rgba(0,0,0,0.3); 
	position: fixed; left:0; top: 0; z-index: 999999; 
}
.lds-default,
.lds-default div {
  box-sizing: border-box;
}
.lds-default {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-default div {
  position: absolute;
  width: 6.4px;
  height: 6.4px;
  background: currentColor;
  background: rgba(255,255,255,1);
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 36.8px;
  left: 66.24px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22.08px;
  left: 62.29579px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11.30421px;
  left: 51.52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7.36px;
  left: 36.8px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11.30421px;
  left: 22.08px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22.08px;
  left: 11.30421px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 36.8px;
  left: 7.36px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 51.52px;
  left: 11.30421px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62.29579px;
  left: 22.08px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66.24px;
  left: 36.8px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62.29579px;
  left: 51.52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 51.52px;
  left: 62.29579px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

/* loading 2 */
svg {
 width: 3.25em;
 transform-origin: center;
 animation: rotate4 2s linear infinite;
}

circle {
 fill: none;
 stroke: hsl(214, 97%, 59%);
 stroke: rgba(255,255,255,1);
 stroke-width: 2;
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
 stroke-linecap: round;
 animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
 100% {
  transform: rotate(360deg);
 }
}

@keyframes dash4 {
 0% {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
 }

 50% {
  stroke-dasharray: 90, 200;
  stroke-dashoffset: -35px;
 }

 100% {
  stroke-dashoffset: -125px;
 }
}


/* loading 3 */
/* From Uiverse.io by Nawsome */ 
.pl {
  width: 6em;
  height: 6em;
}

.pl__ring {
  animation: ringA 2s linear infinite;
}

.pl__ring--a {
  stroke: #f42f25;
  stroke: #000;
  stroke: #fff;
}

.pl__ring--b {
  animation-name: ringB;
  stroke: #f49725;
  stroke: #000;
  stroke: #fff;
}

.pl__ring--c {
  animation-name: ringC;
  stroke: #255ff4;
  stroke: #000;
  stroke: #fff;
}

.pl__ring--d {
  animation-name: ringD;
  stroke: #f42582;
  stroke: #000;
  stroke: #fff;
}

/* Animations */
@keyframes ringA {
  from, 4% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }

  12% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -335;
  }

  32% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -595;
  }

  40%, 54% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -660;
  }

  62% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -665;
  }

  82% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -925;
  }

  90%, to {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -990;
  }
}

@keyframes ringB {
  from, 12% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -110;
  }

  20% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -115;
  }

  40% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -195;
  }

  48%, 62% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  70% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  90% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -305;
  }

  98%, to {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
}

@keyframes ringC {
  from {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  8% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  28% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  36%, 58% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  66% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  86% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  94%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

@keyframes ringD {
  from, 8% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  16% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  36% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  44%, 50% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  58% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  78% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  86%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}


/* loading 4 */
/* From Uiverse.io by boryanakrasteva */ 
@-webkit-keyframes honeycomb {
  0%,
  20%,
  80%,
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  30%,
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes honeycomb {
  0%,
  20%,
  80%,
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  30%,
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.honeycomb {
  height: 24px;
  position: relative;
  width: 24px;
}

.honeycomb div {
  -webkit-animation: honeycomb 2.1s infinite backwards;
  animation: honeycomb 2.1s infinite backwards;
  background: #f3f3f3;
  height: 12px;
  margin-top: 6px;
  position: absolute;
  width: 24px;
}

.honeycomb div:after, .honeycomb div:before {
  content: '';
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  position: absolute;
  left: 0;
  right: 0;
}

.honeycomb div:after {
  top: -6px;
  border-bottom: 6px solid #f3f3f3;
}

.honeycomb div:before {
  bottom: -6px;
  border-top: 6px solid #f3f3f3;
}

.honeycomb div:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  left: -28px;
  top: 0;
}

.honeycomb div:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  left: -14px;
  top: 22px;
}

.honeycomb div:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  left: 14px;
  top: 22px;
}

.honeycomb div:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  left: 28px;
  top: 0;
}

.honeycomb div:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  left: 14px;
  top: -22px;
}

.honeycomb div:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  left: -14px;
  top: -22px;
}

.honeycomb div:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  left: 0;
  top: 0;
}



/* search form 2 */
.search-container {
    position: relative; /* 자식 요소의 위치 기준 */
    flex:1;
    margin: 0 auto;
	padding-right:50px;
}

#search-box {
    width: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
    /* border: 1px solid #ccc; */
    /* border-radius: 70px; */
    font-size: 16px;
}

.suggestions-list {
    position: absolute;
    top: 100%; /* 검색창 바로 아래에 위치 */
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: none; /* 초기에는 숨김 */
    border-radius:15px;
    overflow: hidden;
}

.suggestions-list li {
    padding: 15px 20px 13px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size:14px;
}

.suggestions-list li:hover {
    background-color: #f0f0f0;
}

@media (max-width:1024px){
	.search-container { width:100%; }
}


/* search form 3 */
.search-wrap{flex:1;margin:0 auto;background:#fff; border-radius:30px;}
.search-box{position:relative}

.search-input{
	width:100%;
	box-sizing:border-box;
	padding:12px 48px 12px 16px;
	font-size:18px;
	border-radius:24px;
	/* background:var(--bg); */
	/* box-shadow:0 1px 6px rgba(32,33,36,.08) inset; */
	transition:box-shadow .15s, border-color .15s;
}
/* .search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 4px 12px rgba(26,115,232,.15)} */

.search-btn{
	position:absolute;right:0;top:50%;
	transform: translateY(-50%);
	width:50px;
	height:50px;
	display: flex;
	justify-content: center;
	align-items: center;

}

/* suggestion box */
.suggestions{
	position:absolute;left:0;right:0;top:calc(100% + 8px);
	background:#fff;border-radius:8px;box-shadow:var(--shadow);overflow:hidden;border:1px solid rgba(0,0,0,.06);
	display:none; z-index:40;
}
.suggestions.visible{display:block}
.suggest-item{display:flex;align-items:center;padding:10px 12px;cursor:pointer}
.suggest-item:hover,.suggest-item.active{background:#f1f3f4}
.suggest-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;margin-right:10px;color:var(--muted);font-size:14px}
.suggest-text{flex:1;font-size:15px;color:#202124}
.suggest-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.hint{padding:8px 12px;font-size:13px;color:var(--muted);border-top:1px solid rgba(0,0,0,.04)}

/* small responsive */
/* @media (max-width:480px){body{padding:18px}.search-input{font-size:16px}} */



.noticeListType1 { padding:20px;}
.noticeListType1 dl { 
	padding:30px; 
	background: #f5f7f9;
	border-radius:17px;
}
.noticeListType1 dl dt { font-size:14px; padding:0 0 8px; font-weight:700; }
.noticeListType1 dl dd { 
	position: relative; margin-top:6px; font-size:12px; line-height:1.4; padding-left:16px;
	color:#666;
}
.noticeListType1 dl dd:nth-child(1) { margin-top:0;}
.noticeListType1 dl dd::before { 
	content: "";
	display: inline-block;
	width: 9px;
	height: 7px;
	background:url(../images/new/i_check_d_on.png) no-repeat center / 100%;
	position: absolute;
	left:0; top:5px; 
}

#ui-datepicker-div { z-index: 99999 !important;}

.footer {
	background:#000;
	padding:80px 15% 60px;
}
.innerFooter h1 { font-size:22px; font-weight:700; color: rgba(255,255,255,0.8); margin-bottom:25px;}
.innerFooter p { font-size:14px; color:rgba(255,255,255,0.6); line-height:1.4; margin:10px 0;}
.innerFooter p.last { margin-top:30px; color:rgba(255,255,255,0.4);}