@charset "utf-8";

* { margin:0px; font-family:'Nanum Gothic','나눔고딕','Apple SD Gothic Neo','Helvetica',sans-serif; } /* Nanum Gothic  Noto Sans KR */
body, html { margin:0px; position:relative; width:100%; text-align:center; -webkit-text-size-adjust: 100%; }
img { padding:0px; margin:0px; border:0px; }

#toastmessage { display:none; z-index:30000; position:fixed; left:50%; width:280px; margin-left:-140px; bottom:100px; padding:10px; background-color:#000000; color:#FFFFFF; transition-duration:0.25s; text-align:center; font-size:12px; line-height:170%; }

@keyframes lotate { 100% { transform: rotate(-360deg); } }
#pageloading { display:none; position:fixed; z-index:30; top:0px; left:0px; right:0px; bottom:0px; } 
.loadingbg { position:fixed; top:0px; left:0px; right:0px; bottom:0px; background-color:rgba(0, 0, 0, 0.2); }
.loadingimg { position:fixed; z-index:1; animation-name:lotate; animation:lotate 3s infinite; top:50%; left:50%; width:36px; height:36px; margin-top:-18px; margin-left:-18px; border-radius:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M11.501 4.025v-4.025h1v4.025l-.5-.025-.5.025zm-7.079 5.428l-3.884-1.041-.26.966 3.881 1.04c.067-.331.157-.651.263-.965zm5.995-5.295l-1.039-3.878-.967.259 1.041 3.883c.315-.106.635-.197.965-.264zm-6.416 7.842l.025-.499h-4.026v1h4.026l-.025-.501zm2.713-5.993l-2.846-2.845-.707.707 2.846 2.846c.221-.251.457-.487.707-.708zm-1.377 1.569l-3.48-2.009-.5.866 3.484 2.012c.15-.299.312-.591.496-.869zm13.696.607l3.465-2-.207-.36-3.474 2.005.216.355zm.751 1.993l3.873-1.038-.129-.483-3.869 1.037.125.484zm-3.677-5.032l2.005-3.472-.217-.125-2.002 3.467.214.13zm-1.955-.843l1.037-3.871-.16-.043-1.038 3.873.161.041zm3.619 2.168l2.835-2.834-.236-.236-2.834 2.833.235.237zm-9.327-1.627l-2.011-3.484-.865.5 2.009 3.479c.276-.184.568-.346.867-.495zm-4.285 8.743l-3.88 1.04.26.966 3.884-1.041c-.106-.314-.197-.634-.264-.965zm11.435 5.556l2.01 3.481.793-.458-2.008-3.478c-.255.167-.522.316-.795.455zm3.135-2.823l3.477 2.007.375-.649-3.476-2.007c-.116.224-.242.439-.376.649zm-1.38 1.62l2.842 2.842.59-.589-2.843-2.842c-.187.207-.383.403-.589.589zm2.288-3.546l3.869 1.037.172-.644-3.874-1.038c-.049.218-.102.434-.167.645zm.349-2.682l.015.29-.015.293h4.014v-.583h-4.014zm-6.402 8.132l1.039 3.879.967-.259-1.041-3.884c-.315.106-.635.197-.965.264zm-1.583.158l-.5-.025v4.025h1v-4.025l-.5.025zm-5.992-2.712l-2.847 2.846.707.707 2.847-2.847c-.25-.22-.487-.456-.707-.706zm-1.165-1.73l-3.485 2.012.5.866 3.48-2.009c-.185-.278-.347-.57-.495-.869zm2.734 3.106l-2.01 3.481.865.5 2.013-3.486c-.299-.149-.591-.311-.868-.495zm1.876.915l-1.042 3.886.967.259 1.04-3.881c-.33-.067-.65-.158-.965-.264z'/%3E%3C/svg%3E"); background-size: 36px auto; background-position:center; background-repeat:no-repeat; }

/* 아이폰 기본 스타일 제거 */
button, input, textarea { appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; color:#000000; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23444444' d='m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291 1.002-1.299 3.044-3.945 4.243-5.498z'/%3E%3C/svg%3E");
background-size: 16px auto; background-position:right; background-repeat:no-repeat; }

/* 익스플로러 select 화살표 제거 - 화살표 없애기 for IE10, 11*/ 
/* select::-ms-expand { display:none; } */

/* a link */
a { cursor:pointer; text-decoration:none; }
a.normal { color:#000000; cursor:pointer; text-decoration:none; }
a.normal:hover { text-decoration:underline; }

/* scroll */
::-webkit-scrollbar { -webkit-appearance: none; width: 7px; }
::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .3); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3); }

.scrollbars::-webkit-scrollbar { -webkit-appearance: none; width: 7px; }
.scrollbars::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .3); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3); }

/* font */
.font8 { font-size:8px; }
.font9 { font-size:9px; }
.font10 { font-size:10px; }
.font11 { font-size:11px; }
.font12 { font-size:12px; }
.font13 { font-size:13px; }
.font14 { font-size:14px; }
.font15 { font-size:15px; }
.font16 { font-size:16px; }
.font17 { font-size:17px; }
.font18 { font-size:18px; }
.font19 { font-size:19px; }
.font20 { font-size:20px; }
.fontbold { font-weight:600; }

.fontblack { color:#000000; }
.fontgray { color:#888888; }
.fontstrike { text-decoration:line-through; }

/* blanks */
.blankszero { clear:both; height:0px; }
.blanks { clear:both; height:10px; }
.blanks5 { clear:both; height:5px; }
.blanks10 { clear:both; height:10px; }
.blanks15 { clear:both; height:15px; }
.blanks20 { clear:both; height:20px; }
.blanks25 { clear:both; height:25px; }
.blanks30 { clear:both; height:30px; }
.blanks40 { clear:both; height:40px; }
.blanks50 { clear:both; height:50px; }
.blanks60 { clear:both; height:60px; }
.blanks70 { clear:both; height:70px; }
.blanks100 { clear:both; height:100px; }
.blanks200 { clear:both; height:200px; }

.ellipsis1 { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.ellipsis2 { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ellipsis3 { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.ellipsis4 { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; }

.alignleft		{ text-align:left; }
.aligncenter	{ text-align:center; }
.alignright		{ text-align:right; }
.cursors		{ cursor:pointer; }

/* form - shadow : x-position y-position blur spread color :  box-shadow:0px 0px 5px 1px #DFE0E2; */
form { margin:0px; padding:0px; }
input { -webkit-appearance: none; -webkit-border-radius: 0; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input::placeholder { color: #888888; font-size:11px; }
textarea { resize: vertical; }


.containers_none { position:relative; top:0px; left:0px; width:100%; background-color:#FFFFFF; }
.containers_line { position:relative; top:0px; left:0px; width:100%; background-color:#FFFFFF; border-bottom:1px dotted #e5e5e5; }

.boxtop_line { z-index:1; position:fixed; top:0px; width:100%; left:0px; height:100px; background-color:#FFFFFF; box-shadow:0 0 10px 2px #BABEC5; }
.boxtop_bg { position:relative; top:0px; width:100%; left:0px; height:100px; }
.boxtop { position:relative; top:0px; width:1200px; left:50%; margin-left:-600px; text-align:left; }

.logo_img { position:absolute; left:0px; padding:27px 10px 27px 0px; top:0px; width:45px; }
.logo_txt { position:absolute; left:55px; padding:32px 10px 32px 10px; top:0px; font-size:24px; font-weight:900; color:#000000; font-family:'Noto Sans KR'; }
.right_txt { position:absolute; right:0px; padding:32px 10px 32px 10px; top:0px; font-size:20px; font-weight:600; color:#000000; font-family:'Noto Sans KR'; }

.boxcon { position:relative; top:0px; width:1200px; left:50%; margin-left:-600px; background-color:#FFFFFF; }
.boxcon_title { position:relative; top:0px; padding-top:100px; padding-bottom:50px; font-size:30px; font-weight:700; color:#000000; text-align:left; font-family:'Noto Sans KR'; }

.titlebar { width:5px; height:30px; background-color:#000000; } 
.conblank { clear:both; height:100px; background-color:#FFFFFF; }
.boxcon70 { width:70%; }
.boxcon80 { width:80%; }
.boxcon90 { width:90%; }
.footer_txt { position:relative; top:20px; margin-left:300px; text-align:left; font-size:13px; line-height:200%; }
.onlypc { display:block; }
.onlymobile { display:none; }

@media all and (min-width: 1301px) {
	.boxtop { width:1200px; left:50%; margin-left:-600px; }
	.boxcon { width:1200px; left:50%; margin-left:-600px; }
	.conblank { clear:both; height:120px; }
	.boxcon_title { padding-top:120px; padding-bottom:40px; font-size:22px; }
	.boxtop_line { height:100px; }
	.boxtop_bg { height:100px; }
	.logo_img { padding:27px 10px 27px 0px; width:45px; }
	.logo_txt { left:55px; padding:32px 10px 32px 10px; font-size:24px; }
	.right_txt { padding:32px 10px 32px 10px; font-size:20px;}
	.footer_txt { top:20px; margin-left:300px;font-size:13px; }
	.onlypc { display:block; }
	.onlymobile { display:none; }
}
@media all and (min-width: 1201px) and (max-width: 1300px) {
	.boxtop { width:1100px; left:50%; margin-left:-550px; }
	.boxcon { width:1100px; left:50%; margin-left:-550px; }
	.conblank { clear:both; height:100px; }
	.boxcon_title { padding-top:100px; padding-bottom:40px; font-size:22px; }
	.boxtop_line { height:100px; }
	.boxtop_bg { height:100px; }
	.logo_img { padding:27px 10px 27px 0px; width:45px; }
	.logo_txt { left:55px; padding:32px 10px 32px 10px; font-size:24px; }
	.right_txt { padding:32px 10px 32px 10px; font-size:20px;}
	.footer_txt { top:20px; margin-left:300px; font-size:13px; }
	.onlypc { display:block; }
	.onlymobile { display:none; }
}
@media all and (min-width: 1101px) and (max-width: 1200px) {
	.boxtop { width:1000px; left:50%; margin-left:-500px; }
	.boxcon { width:1000px; left:50%; margin-left:-500px; }
	.conblank { clear:both; height:100px; }
	.boxcon_title { padding-top:100px; padding-bottom:30px; font-size:22px; }
	.boxtop_line { height:90px; }
	.boxtop_bg { height:90px; }
	.logo_img { padding:24px 10px 24px 0px; width:40px; }
	.logo_txt { left:45px; padding:26px 10px 26px 10px; font-size:23px; }
	.right_txt { padding:28px 10px 28px 10px; font-size:19px;}
	.footer_txt { top:20px; margin-left:280px; font-size:12px; }
	.onlypc { display:block; }
	.onlymobile { display:none; }
}
@media all and (min-width: 1001px) and (max-width: 1100px) {
	.boxtop { width:900px; left:50%; margin-left:-450px; }
	.boxcon { width:900px; left:50%; margin-left:-450px; }
	.conblank { clear:both; height:100px; }
	.boxcon_title { padding-top:100px; padding-bottom:30px; font-size:20px; }
	.boxtop_line { height:90px; }
	.boxtop_bg { height:90px; }
	.logo_img { padding:24px 10px 24px 0px; width:40px; }
	.logo_txt { left:45px; padding:26px 10px 26px 10px; font-size:23px; }
	.right_txt { padding:28px 10px 28px 10px; font-size:19px;}
	.footer_txt { top:20px; margin-left:280px; font-size:12px; }
	.onlypc { display:block; }
	.onlymobile { display:none; }
}
@media all and (min-width: 901px) and (max-width: 1000px) {
	.boxtop { width:800px; left:50%; margin-left:-400px; }
	.boxcon { width:800px; left:50%; margin-left:-400px; }
	.conblank { clear:both; height:100px; }
	.boxcon_title { padding-top:100px; padding-bottom:30px; font-size:20px; }
	.boxtop_line { height:80px; }
	.boxtop_bg { height:80px; }
	.logo_img { padding:22px 10px 22px 0px; width:36px; }
	.logo_txt { left:40px; padding:24px 10px 24px 10px; font-size:20px; }
	.right_txt { padding:25px 10px 25px 10px; font-size:18px;}
	.footer_txt { top:20px; margin-left:240px; font-size:12px; }
	.onlypc { display:block; }
	.onlymobile { display:none; }
}
@media all and (min-width: 801px) and (max-width: 900px) {
	.boxtop { width:700px; left:50%; margin-left:-350px; }
	.boxcon { width:700px; left:50%; margin-left:-350px; }
	.conblank { clear:both; height:100px; }
	.boxcon_title { padding-top:100px; padding-bottom:30px; font-size:20px; }
	.boxtop_line { height:80px; }
	.boxtop_bg { height:80px; }
	.logo_img { padding:22px 10px 22px 0px; width:36px; }
	.logo_txt { left:40px; padding:24px 10px 24px 10px; font-size:20px; }
	.right_txt { padding:25px 10px 25px 10px; font-size:18px;}
	.footer_txt { top:20px; margin-left:220px; font-size:11px; }
	.onlypc { display:block; }
	.onlymobile { display:none; }
}
@media all and (min-width: 701px) and (max-width: 800px) {
	.boxtop { width:94%; left:3%; margin-left:0px; }
	.boxcon { width:94%; left:3%; margin-left:0px; }
	.conblank { clear:both; height:80px; }
	.boxcon_title { padding-top:80px; padding-bottom:30px; font-size:18px; }
	.boxcon70 { width:80%; }
	.boxcon80 { width:90%; }
	.boxcon90 { width:100%; }
	.boxtop_line { height:80px; }
	.boxtop_bg { height:80px; }
	.logo_img { padding:22px 10px 22px 0px; width:36px; }
	.logo_txt { left:40px; padding:24px 10px 24px 10px; font-size:20px; }
	.right_txt { padding:25px 10px 25px 10px; font-size:18px;}
	.footer_txt { top:20px; left:3%; margin-left:0px; font-size:11px; }
	.onlypc { display:none; }
	.onlymobile { display:block; }
}
@media all and (min-width: 601px) and (max-width: 700px) {
	.boxtop { width:94%; left:3%; margin-left:0px; }
	.boxcon { width:94%; left:3%; margin-left:0px; }
	.conblank { clear:both; height:60px; }
	.boxcon_title { padding-top:60px; padding-bottom:20px; font-size:18px; }
	.boxcon70 { width:90%; }
	.boxcon80 { width:90%; }
	.boxcon90 { width:100%; }
	.boxtop_line { height:80px; }
	.boxtop_bg { height:80px; }
	.logo_img { padding:22px 10px 22px 0px; width:36px; }
	.logo_txt { left:40px; padding:24px 10px 24px 10px; font-size:20px; }
	.right_txt { padding:25px 10px 25px 10px; font-size:18px;}
	.footer_txt { top:20px; left:3%; margin-left:0px; font-size:11px; }
	.onlypc { display:none; }
	.onlymobile { display:block; }
}
@media all and (min-width: 501px) and (max-width: 600px) {
	.boxtop { width:94%; left:3%; margin-left:0px; }
	.boxcon { width:94%; left:3%; margin-left:0px; }
	.conblank { clear:both; height:60px; }
	.boxcon_title { padding-top:60px; padding-bottom:20px; font-size:17px; }
	.boxcon70 { width:100%; }
	.boxcon80 { width:100%; }
	.boxcon90 { width:100%; }
	.boxtop_line { height:70px; }
	.boxtop_bg { height:70px; }
	.logo_img { padding:20px 10px 20px 0px; width:30px; }
	.logo_txt { left:34px; padding:22px 10px 22px 10px; font-size:18px; }
	.right_txt { padding:19px 10px 22px 10px; font-size:15px;}
	.footer_txt { top:20px; left:3%; margin-left:0px; font-size:11px; }
	.onlypc { display:none; }
	.onlymobile { display:block; }
}
@media all and (max-width: 500px) {
	.boxtop { width:94%; left:3%; margin-left:0px; }
	.boxcon { width:94%; left:3%; margin-left:0px; }
	.conblank { clear:both; height:40px; }
	.boxcon_title { padding-top:40px; padding-bottom:20px; font-size:17px; }
	.boxcon70 { width:100%; }
	.boxcon80 { width:100%; }
	.boxcon90 { width:100%; }
	.boxtop_line { height:70px; }
	.boxtop_bg { height:70px; }
	.logo_img { padding:20px 10px 20px 0px; width:30px; }
	.logo_txt { left:34px; padding:22px 10px 22px 10px; font-size:18px; }
	.right_txt { padding:19px 10px 22px 10px; font-size:15px;}
	.footer_txt { top:20px; left:3%; margin-left:0px; font-size:11px; }
	.onlypc { display:none; }
	.onlymobile { display:block; }
}