@charset "utf-8";


	/** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	 | layout style
	 */

		html, body { height: 100%; margin:0; padding:0; }
		body { display: flex; flex-direction: column;  background-color: #fbfbfb;}
		.site_wrap { flex: 1 0 auto; /* min-height: calc(100% - 60px); */}
		.site_footer { flex-shrink: 0;  height: 60px;  background-color:#1a1c2b;}

		.site_wrap .site_header { width: 100%; height: 56px; }
		.site_wrap .site_header .fixed-top { background-color:#ffffff; }
		.site_wrap .site_container { /*height: 100%;*/ }


		.ctnt_wrap {position:relative; margin:0 auto; padding:0 15px; }
		/* 
		.ctnt_max {width:100%; max-width: 1320px; margin:0 auto; background-color: parent;} */
		.ctnt_max {width: 1400px; /* margin:0 auto; */ background-color: parent;}

		.navbar-brand { line-height: 30px;}
		
		.offcanvas-title { padding: 5px 0; line-height: 30px;}
		.offcanvas-header { padding-top: 8px; padding-bottom: 8px; }

		/*
		.site_top_logo {position: relative; display:inline-block;width: 20px; height: 20px;}
		.site_top_logo::before {
			position:absolute; 
			content:'';
			width: 20px; height: 20px;
			background-image:url('/assets/images/layout/favicon.ico');
			background-size:20px 20px;
			background-repeat: no-repeat;
			background-position: center center;
			top: 50%;
			margin-top: -9px;
		}
		*/


		.site_top_logo {position: relative; display:inline-block;width: 20px; height: 20px;}
		.site_top_logo::before {
			content:'';
			width: 20px; height: 20px;
			background-image:url('/assets/images/layout/favicon.ico');
			background-size:20px 20px;
			background-repeat: no-repeat;
			background-position: center center;
			position:absolute; 
			left:0;
			top: 50%;
			margin-top: -9px;
		}



	/** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	 | scrollbar style
	 */

		body {
		  overflow-y:scroll;
		  -ms-overflow-style: -ms-autohiding-scrollbar;             /* <=== 익스플로러를 위한 CSS */ 
		  scrollbar-width: thin; scrollbar-color: #2f3542 #C4C4C4;  /* <=== 파이어폭스를 위한 CSS */ 
		}
		body::-webkit-scrollbar {width: 7px;}
		body::-webkit-scrollbar-thumb {background-color: #2f3542;}
		body::-webkit-scrollbar-track {background-color: #C4C4C4;}



	/** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	 | Footer Area
	 */

		/* MOBILE */
		.footer_logo { color: #d0d0d0}

		/* DESKTOP */
		@media screen and (min-width: 992px) {
			.footer_logo { }
		}

	/** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	 | Header Area
	 */

		.redstar { color: red;}


		.dropdown-menu, .dropdown-menu a { font-size: 14px; }
		.max_w500px{ max-width: 500px; }

		/*
		.practice_wrap { width: 100%; padding: 16px; position: relative; }
		.practice_wrap .prt_ttl { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc; font-size: 16px; font-weight: normal; vertical-align: baseline; }
		.practice_wrap .prt_ttl > span { font-size: 16px; font-weight: normal; vertical-align: baseline; }
		.practice_wrap .prt_ttl > strong { font-size: 18px; font-weight: bold; vertical-align: baseline; }
		*/

		.prob_text {font-size: 20px;}




		/* DESKTOP */
		/*
		@media screen and (min-width: 992px) { */

			.site_header {}
				.navbar {}
				.navbar .container-fluid { margin:0; /* padding:0; */ }
				.navbar-brand { width: 100px; /* padding:0; padding-left: 50px !important; */}
				.desktop .navbar-nav .nav-item { margin-right:15px; }
				.desktop .navbar-nav .nav-item a.nav-link::before {transition: 300ms;content: "";position: absolute;background-color: #616161;}

				/* navbar_fadeup *//*
				.desktop .navbar-nav .nav-item a.nav-link::before {width: calc(100% - 12px); left: 6px; height: 5px;bottom: -8px;opacity: 0;}
				.desktop .navbar-nav .nav-item a.nav-link:hover::before {opacity: 1;}
				*/

				/* navbar_growup */
				.desktop .navbar-nav .nav-item a.nav-link::before {width: calc(100% - 12px); left: 6px; height: 0px; bottom: -8px;opacity: 0;}
				.desktop .navbar-nav .nav-item a.nav-link:hover::before {opacity: 1; height: 5px;}
				.desktop .navbar-nav .nav-item.active a.nav-link::before {opacity: 1; height: 5px;}

				.desktop .dropdown-menu { 
					top: 115% !important; border-top: none; border-top-left-radius: 0px; border-top-right-radius: 0px; border:none;
					box-shadow: 0 3px 3px rgba(0,0,0,0.2);
				}
				.desktop .dropdown-menu .dropdown-item { font-size: 14px; }

			.site_container { }
				.content_wrap { 
					display: flex; flex-direction: row; align-items: stretch; 
					/*
					box-shadow: 5px 0 5px -3px #dddddd; */
				}
				/*
				.content_wrap .ctnt_snb { 
					background-color:#f8f8f8;
					width: 270px;
					padding: 0;
					border-right: 1px dashed #dedede;
					box-shadow: -5px 0px 5px -3px #dddddd;
				}
				.content_wrap .ctnt_snb .snb_wrap { margin:0; padding:20px 20px; }
				.content_wrap .ctnt_snb .snb_ttl { 
					border: 1px solid #999999;
					box-shadow: inset 0 0 5px #b5b5b5;
				}
				.content_wrap .ctnt_snb .snb_list {
					
					border-top: 0px solid #555;
					border-bottom: 0px solid #555;
				}
				*/

				.desktop.snb_list ul { margin:0; padding:0; list-style: none; }
				.desktop.snb_list ul li { padding-left: 5px; font-size: 14px; padding: 0px; border-bottom: 1px dashed #dedede;}
				.desktop.snb_list ul li.snb_list_ttl { font-weight: bold; margin-top: 15px; padding: 6px; border-top: 2px solid #828282; border-bottom: 1px solid #999999; }
				.desktop.snb_list ul li a { display:block; text-decoration:none; padding: 5px; }
				.desktop.snb_list ul li a:hover { background-color: #ffffff; }

				.desktop.snb_list ul li.active a { background-color: #ffffff; font-weight:bold; color:#333; position: relative; }
				.desktop.snb_list ul li.active a::after { content: ' <'; position: absolute; right: 5px; }

				.content_wrap .ctnt_body {
					width: calc(100% - 270px);
				}

				/*
				.practice_wrap { padding: 20px; }
				*/

		/*
		} */




	/** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	 | auth
	 */



		/* MOBILE */
		@media screen and (max-width: 991px) {
			#exchg_chart { width: 100%; height: 300px; }


		}

		/* DESKTOP */
		@media screen and (min-width: 992px) {
			#exchg_chart { width: 100%; height: 500px; }


		}

	/** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	 | auth
	 */

		.auth_wrap {
			display: flex;
			justify-content: center; /* 가로축 정렬*/
			align-items: center; /* 세로축 정렬 */
			width: 100%;
			height: 100vh;
			padding:20px;
			background-color:#f8f8fa;

			font-size: 15px;
		}
		.auth_inner {
			margin: 0 auto;
			padding: 20px 10px;
			width: 100%;
			max-width: 420px;
		}
		.auth_top {
			display: flex;
			justify-content: center; /* 가로축 정렬*/
			align-items: center; /* 세로축 정렬 flex-start, baseline, center, flex-end */
			margin:0 auto;
			width: 100%;
			/* 이미지 사용시
			*/
			/* background-image: url('https://preview.colorlib.com/theme/bootstrap/login-form-15/images/bg-1.jpg.webp'); */
			background-image: url('/assets/images/pixabay/beach-2413081_1920.jpg');
			background-repeat:no-repeat;
			background-size:cover;
			background-position:center 78%;
		}
		.auth_top .site_name {margin:0; padding:0; font-size: 28px; font-weight: bold; line-height:80px;}
		.auth_box {
			margin:0 auto 20px;
			padding: 30px;
			width: 100%;
			background-color: #ffffff;
			border-radius: 5px;
			-webkit-box-shadow: 0px 10px 34px -15px rgb(0 0 0 / 24%);
			-moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
			box-shadow: 0px 10px 34px -15px rgb(0 0 0 / 24%);
			overflow:hidden;
		}
		.auth_box .auth_title {font-size: 18px; margin-bottom: 12px; font-weight:bold;}
		.auth_box .btn_auth { width:100%; padding: 12px 0; }


		#auth_login_wrap {
			width: 240px; margin:0 auto; display: ;
		}

		.auth_util { margin-top:5px; font-size: 14px; }
		.auth_util_login { display:flex;justify-content: space-between; }
		/*
		.auth_util_login > div:nth-child(1) { width: 40%; }
		.auth_util_login > div:nth-child(2) { width: 60%;  text-align:right; }
		*/


	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	 | [Form, input, select, ..]
	*/

		fieldset {
			min-width: 0;
			padding: 0;
			margin: 0;
			border: 0;
		}
		legend {
			float: left;
			width: 100%;
			padding: 0;
			margin-bottom: 0.5rem;
			font-size: calc(1.275rem + .3vw);
			line-height: inherit;
		}
		.errmsg_red, .errmsg_red::placeholder, .errmsg_red p, .errmsg_red p::placeholder {
			color: red; 
			font-size: 14px; 
			opacity: 0.8;
			filter: alpha(opacity=80);
			-ms-filter: "alpha(opacity=80)";
			-khtml-opacity: 0.8;
			-moz-opacity: 0.8;
			letter-spacing: -0.5px;
		}

		.screen_out {
			overflow: hidden;
			position: absolute;
			width: 0;
			height: 0;
			line-height: 0;
			text-indent: -9999px;
		}
		.input_text {/* padding: 0.75rem; */ width:100%; }


		.sr-only {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0,0,0,0);
			white-space: nowrap;
			border: 0;
		}


		#span_captcha_html { border-radius: 0.25rem; -webkit-appearance: none; -webkit-border-radius: 0.25rem; overflow:hidden; }

		/* gray_scale */
		img.gray_scale, .gray_scale img {
			-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
			filter: grayscale(100%);
		}






	/** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	 | 글자와 단어 수 세기, 등등
	 */


		.box_wrap { width: 100%; max-width: 980px; margin:0 auto; }
		.page_ttl {font-size: 19px; margin-bottom: 10px; font-weight:600;}
		.frm_cnt_letter { }
		.letter_textarea { display: block;overflow-y: scroll; width: 100%;height: 300px; border: none;outline: none; color: #333;font-size: 14px;letter-spacing: -.2px; line-height: 21px; word-break: break-all; background-color:#fafafa; padding:15px; resize: none; border:1px dashed #cccccc; }
		.cnt_letter_only, .cnt_letter_space, .cnt_letter_space_enter, .cnt_word, .cnt_line, .cnt_page, .cnt_paragraph, .cnt_sentence { color: #ff0000;}
		.cnt_letter_space::before {content:'[원고지]'; position:absolute; left: 5px; font-size:14px; color:#7474ba; }
		.cnt_letter_space_enter::before {content:'[네이버,트위터]'; position:absolute; left: 5px; font-size:14px; color:#7474ba; }

		.cnt_letter_only::after, .cnt_letter_space::after, .cnt_letter_space_enter::after { content:' 자';  font-size:17px; color:#626262;}
		.cnt_word::after, .cnt_line::after  { content:' 개';  font-size:17px; color:#626262;}
		.cnt_line::after  { content:' 줄';  font-size:17px; color:#626262;}
		.cnt_page::after { content:' 장';  font-size:17px; color:#626262;}
		.cnt_paragraph::after { content:' 개';  font-size:17px; color:#626262;}
		.cnt_sentence::after { content:' 개';  font-size:17px; color:#626262;}
		.cnt_init { color: #333; }
		
		.result_wrap {display: flex; flex-direction: row; justify-content: space-between; }

		.calc_result { width: 50%;}
		.calc_result dl { display: flex; flex-direction: row; justify-content: flex-start; margin:5px 0 0 0; line-height: 40px;  }
		.calc_result dt { position:relative; width: 50%; padding: 0 10px; text-align: center;  border: 1px solid #eee; border-right: 1px dashed #eee; background-color:#f5f5fa; font-weight: normal;}
		.calc_result dd { position:relative; width: 49%; padding: 0 10px; text-align: right;  border: 1px solid #eee; border-left: none; font-size: 20px; }

		.box_spellchk { width: 100%; max-width:840px;  margin:0 auto; }

		@media (max-width: 768px) {
		.letter_textarea { height:200px; }
		.result_wrap {display: flex; flex-direction: column;}
		.calc_result { width: 100%;}
		.calc_result dt { width: 46%;}
		.calc_result dd { width: 54%;}
		}








	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	 * [2022-08-26] custom css
	 */
		.article_title {
			box-sizing: border-box;
			border-right-width: 0px;
			border-bottom: #000000 1px solid;
			margin: 0 0 15px 0px;
			border-left: #575757 4px solid;
			letter-spacing: 0px;
			line-height: 1.3;
			border-top-width: 0px;
			padding: 0px 5px 3px 5px;
			/* font-size: 1.35em; */
			font-size: 16px;
			margin-bottom: 10px;
			font-weight:600;
		}