@charset "utf-8";
/* 제작사 :D.LOFT - http://www.dloft.net/ */
/* 작성자 :김우석 - kkv9413@dloft.net */
/* 작성일 :2022.04.11 */
/* CSS Document */

/* 영역구분 */
#wrap {position:relative; width:100%; margin:0 auto; text-align:center;}
.wrap {display:inline-block; vertical-align:middle; box-sizing:border-box; position:relative; width:100%; max-width:1920px; margin:0 auto; padding:0 60px;}
.blind {display:block; overflow:hidden; position:absolute !important; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; text-indent:-9999px;}

html {
	/* Prevent font scaling in landscape */
	-webkit-text-size-adjust:none; /*Chrome, Safari, newer versions of Opera*/
	-moz-text-size-adjust:none; /*Firefox*/
	-ms-text-size-adjust:none; /*Ie*/
	-o-text-size-adjust:none; /*old versions of Opera*/
}
*::-webkit-scrollbar {width:8px;}
*::-webkit-scrollbar-thumb {background-color:#6b6d76; border-radius:8px; background-clip:padding-box; border:2px solid transparent;}
*::-webkit-scrollbar-thumb:hover {background-color:#6b6d76;}
*::-webkit-scrollbar-track {background-color:#d1d1d1;}


/* 컬러 */
.cm {color:#aaf05f !important;} /* 메인 */
.ck {color:#000 !important;} /* 검은색 */
.cw {color:#fbf4e5 !important;} /* 흰색 */
.cb {color:#161514 !important;} /* 진한 회색 */
.cr {color:#ff7632 !important;} /* 붉은색 */
.cp {color:#ab9bf5 !important;} /* 보라색 */
.cy {color:#ffcc1c !important;} /* 노란색 */


/* 타이틀 */
.title {font-size:15px; line-height:30px; word-wrap:normal; word-break:keep-all;}
.title.font, .title .font {font-family:'NanumSquare', sans-serif;}
.title.thin, .title .thin {font-weight:100;}
.title.light, .title .light {font-weight:300;}
.title.medium, .title .medium {font-weight:500;}
.title.bold, .title .bold {font-weight:700;}
.title.black, .title .black {font-weight:900;}
.title.t1, .title .t1 {font-size:120px; line-height:110px;}
.title.t2, .title .t2 {font-size:100px; line-height:110px;}
.title.t3, .title .t3 {font-size:50px; line-height:50px;}
.title.enter {white-space:nowrap;}
.title.enter span, .title .enter span, .title.enter strong, .title .enter strong{display:block;}

/* 텍스트 */
.text {font-size:14px; font-weight:400; line-height:30px; word-wrap:normal; word-break:keep-all;}
.text.font, .text .font {font-family:'NanumSquare', sans-serif;}
.text.word, .text .word {word-break:break-all;}
.text.thin, .text .thin {font-weight:100;}
.text.light, .text .light {font-weight:300;}
.text.medium, .text .medium {font-weight:500;}
.text.bold, .text .bold {font-weight:700;}
.text.black, .text .black {font-weight:900;}
.text.big, .text .big {font-size:16px; line-height:30px;}
.text a {color:#101111;}
.text.cw a, .text .cw a {color:#fbf4e5;}
.text a:hover {color:#101111; text-decoration:underline; text-decoration-color:#101111;}
.text.cw a:hover, .text .cw a:hover {color:#fbf4e5; text-decoration:underline; text-decoration-color:#c79d70;}
.text img {display:inline-block; vertical-align:middle; max-width:100%; margin:0;}
.text input {display:inline-block; vertical-align:middle;}
.text label {cursor:pointer;}
.text u {text-decoration:none; border-bottom:rgba(255, 255, 255, 0.1) solid 2px;}
.overflow {min-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}
.text.enter, .text .enter {white-space:nowrap;}
.text.enter span, .text .enter span, .text.enter strong, .text .enter strong {display:block;}
.und {position:relative; z-index:0; font-weight:500;}
.und:before {content:''; display:inline-block; vertical-align:middle; position:absolute; left:0; bottom:0; z-index:-1; width:100%; height:6px; background-color:#ff6955; opacity:0.2;}
.und.t1:before {height:10px;}
.und.t2:before {background-color:#000; opacity:0.3;}
b.bold {font-weight:500 !important;}

/* 꾸밈요소 */
.line {border-style:solid; border-color:#dadce1;}
.line.bcm {border-color:rgba(175, 177, 176, 0.2);}
.line.bcl {border-color:rgba(191, 190, 197, 0.2);}
.line.bcg {border-color:rgba(103, 156, 128, 0.2);}
.line.bcj {border-color:rgba(154, 93, 127, 0.2);}
.line.bcr {border-color:rgba(78, 107, 123, 0.2);}
.line.bcb {border-color:#101111}
.line.bci {border-color:rgba(16,17,17,0.2);}
.line.dashed {border-style:dashed;}
.line.dotted {border-style:dotted;}
.line.bt {border-top-width:1px;}
.line.bl {border-left-width:1px;}
.line.br {border-right-width:1px;}
.line.bb {border-bottom-width:1px;}

/* 폼태그 */
.form {display:inline-block; vertical-align:middle; width:100%; text-align:left;}
.form .f_wrap {display:inline-block; vertical-align:middle; width:100%; padding:5px 0;}
.form .f_field {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%;}
.form .f_field .ff_title {position:absolute; left:0; top:0; width:80px; height:40px; overflow:hidden; font-size:15px; font-weight:500; color:#101111; letter-spacing:-0.5px; line-height:40px; text-align:left;}
.form .f_field .ff_title label {position:relative;}
.form .f_field .ff_wrap {display:block; margin-left:100px !important;}
.form .f_field .ff_wrap.text {margin-top:5px;}
.form .f_field .ff_wrap.content {min-height:40px; margin-top:0; line-height:40px;}
.form .f_field input {display:inline-block; vertical-align:middle;}


/* 폼스타일 */
.input {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:50px; margin:0; padding:0 20px; outline:none; border:#d9d4cc solid 1px; border-radius:8px; font-size:15px; font-weight:100; color:#101111; background-color:#fffefc; letter-spacing:-0.5px; line-height:38px; text-align:left; box-shadow:none !important; outline:none !important;}
.input::placeholder {color:#101111}
.input:hover {border-color:#d9d4cc !important;}
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    -webkit-text-fill-color: #161514 !important;
}
.select {display:block; vertical-align:middle; width:100%; height:50px; margin:0;padding:0 20px;  border:#d9d4cc solid 1px; border-radius:8px;
	font-size:15px; font-weight:100; color:#101111; letter-spacing:-0.5px; line-height:38px; text-align:left; background: url("/img/component/icon_arrow.svg") no-repeat right 10px center; -webkit-appearance: none;  -moz-appearance: none; appearance: none;}
.select:hover {border-color:#d9d4cc;}
.select::placeholder {color:#101111}

.textarea {display:block; vertical-align:middle; box-sizing:border-box; width:100%; width:98%\9; min-height:40px; margin:0; padding:0; outline:none; border:#b0b0b0 solid 1px; border:rgba(16,17,17,0.2) solid 0;
	font-size:15px; font-weight:100; color:#d9d4cc; letter-spacing:-0.5px; line-height:38px; text-align:left;}
.file {display:block; vertical-align:middle; width:100%; height:40px; margin:0; padding:0; outline:none; border:rgba(16,17,17,0.2) solid 0;
	font-size:15px; font-weight:100; color:#d9d4cc; letter-spacing:-0.5px; line-height:38px; text-align:left;}
.file:hover {border-color:#d9d4cc;}


/* 서식 */
.template {display:inline-block; vertical-align:middle; width:100%; text-align:left; word-wrap:normal; word-break:keep-all;}
.template > h4 {display:block; position:relative; width:auto; margin-top:30px; padding-left:20px; font-size:20px; font-weight:500; color:#101111; line-height:30px;}
.template > h4:first-child {margin-top:0;}
.template > h4:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:0; top:8px; width:6px; height:6px;border-radius:50%; border:#afb1b0 solid 3px;}
.template > strong {display:block; position:relative; width:auto; margin-top:20px; margin-left:25px; font-size:14px; font-family:'Noto Sans KR'; font-weight:500; color:#777; line-height:24px;}
.template > p {display:block; position:relative; width:auto; margin-top:10px; margin-left:25px; font-size:14px; font-family:'Noto Sans KR'; font-weight:400; color:#777; line-height:24px;}
.template > .box {margin-top:20px; margin-left:25px; padding:20px 25px; border:#e6e6e6 solid 1px; background-color:#f9f9f9; font-size:14px; font-family:'Noto Sans KR'; font-weight:400; color:#777; line-height:24px;}
.template strong {font-weight:500; color:#101111;}
.template a {color:#101111;}
.template a:hover {text-decoration:underline; text-decoration-color:rgba(0, 174, 239, 0.7);}
.template > ul {display:block; position:relative; width:auto; margin-top:10px; margin-left:25px; font-size:14px; font-family:'Noto Sans KR'; font-weight:400; color:#777; line-height:24px;}
.template > ul > li {position:relative; margin:5px 0; padding-left:10px;}
.template > ul > li:before {content:""; position:absolute; left:0px; top:11px; width:3px; height:3px; border-radius:50%; background-color:#999;}
.template > ul > li > ul {display:block; position:relative; width:auto; margin:5px 15px; font-size:12px; font-family:'Noto Sans KR'; font-weight:400; color:#999; line-height:22px;}
.template > ul > li > ul > li {position:relative; padding-left:10px;}
.template > ul > li > ul > li:before {content:""; position:absolute; left:0px; top:11px; width:4px; height:1px; background-color:#999;}
.template > ul > li > p {display:block; position:relative; width:auto; margin:5px 15px; padding-left:10px; font-size:12px; font-family:'Noto Sans KR'; font-weight:400; color:#999; line-height:22px;}
.template > ul > li > p:before {content:""; position:absolute; left:0px; top:10px; width:4px; height:1px; background-color:#999;}
.template > .table {margin-top:10px; margin-left:25px;}



/* 팝업
.popup {position:fixed; left:0; right:0; top:-100%; bottom:100%; z-index:999999; width:auto !important; height:auto !important; background:rgba(14, 14, 14, 0.9);}
.popup.on {top:0; bottom:0;}
.popup .p_box {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; z-index:2; overflow:hidden; width:300px; height:250px; margin-top:-125px; margin-left:-150px; border-radius:5px; background:#fbf4e5; box-shadow:0 20px 60px rgba(0, 0, 0, 0.5); transform:scale(0.8); transition:0.4s; -webkit-transition:0.4s;}
.popup.on .p_box {transform:scale(1);}
.popup .p_out {position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; cursor:default;}
.popup .p_head {position:relative; box-sizing:border-box; height:60px; padding:15px 20px; background:linear-gradient(to bottom, #fbf4e5 0%, #fafafa 100%);}
.popup .p_body {position:absolute; left:0; right:0; top:60px; bottom:0; overflow:auto; padding:50px;}
.popup .p_title {display:inline-block; vertical-align:middle; position:relative; float:left; padding-left:10px; font-size:18px; color:#101111; letter-spacing:-1px; line-height:30px;}
.popup .p_title:before {content:""; position:absolute; left:0; top:50%; width:4px; height:16px; margin-top:-8px; border-radius:2px; background-color:#afb1b0;}
.popup .p_close {display:inline-block; vertical-align:middle; position:absolute; right:10px; top:50%; z-index:9999; overflow:hidden; width:40px; height:40px; margin-top:-20px;}
.popup .p_close:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:18px; height:2px; margin-top:-1px; margin-left:-8px; border-radius:2px; background-color:#0e0e0e; transform:rotate(45deg); -ms-transform:rotate(45deg); transition:0.2s; -webkit-transition:0.2s;}
.popup .p_close:after {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:18px; height:2px; margin-top:-1px; margin-left:-8px; border-radius:2px; background-color:#0e0e0e; transform:rotate(135deg); -ms-transform:rotate(135deg); transition:0.2s; -webkit-transition:0.2s;}
.popup .p_close:hover:before {background-color:#afb1b0; transform:rotate(135deg); -ms-transform:rotate(135deg);}
.popup .p_close:hover:after {background-color:#afb1b0; transform:rotate(225deg); -ms-transform:rotate(225deg);}
.popup .p_wrap {display:inline-block; vertical-align:middle; width:100%;}
.popup .p_body .pb_area {display:inline-block; vertical-align:middle; width:100%; margin-top:50px;}
.popup .p_body .pb_area:first-child {margin-top:0;}
.popup .p_body .pb_area.space {margin-top:10px;}
.popup .p_body .pb_title {margin-bottom:30px;}
.popup.w400 .p_box {width:400px; margin-left:-200px;}.popup.w450 .p_box {width:450px; margin-left:-225px;} .popup.w500 .p_box {width:500px; margin-left:-250px;} .popup.w550 .p_box {width:550px; margin-left:-275px;} .popup.w600 .p_box {width:600px; margin-left:-300px;} .popup.w650 .p_box {width:650px; margin-left:-325px;} .popup.w700 .p_box {width:700px; margin-left:-350px;} .popup.w750 .p_box {width:750px; margin-left:-375px;} .popup.w800 .p_box {width:800px; margin-left:-400px;} .popup.w850 .p_box {width:850px; margin-left:-425px;} .popup.w900 .p_box {width:900px; margin-left:-450px;} .popup.w950 .p_box {width:950px; margin-left:-475px;} .popup.w1000 .p_box {width:1000px; margin-left:-500px;} .popup.w1100 .p_box {width:1100px; margin-left:-550px;} .popup.w1200 .p_box {width:1200px; margin-left:-600px;}
.popup.w50p .p_box {left:25%; right:25%; width:auto; margin-left:0;} .popup.w60p .p_box {left:20%; right:20%; width:auto; margin-left:0;} .popup.w70p .p_box {left:15%; right:15%; width:auto; margin-left:0;} .popup.w80p .p_box {left:10%; right:10%; width:auto; margin-left:0;} .popup.w90p .p_box {left:5%; right:5%; width:auto; margin-left:0;}
.popup.h300 .p_box {height:300px; margin-top:-150px;} .popup.h350 .p_box {height:350px; margin-top:-175px;} .popup.h400 .p_box {height:400px; margin-top:-200px;} .popup.h450 .p_box {height:450px; margin-top:-225px;} .popup.h500 .p_box {height:500px; margin-top:-250px;} .popup.h550 .p_box {height:550px; margin-top:-275px;} .popup.h600 .p_box {height:600px; margin-top:-300px;} .popup.h650 .p_box {height:650px; margin-top:-325px;} .popup.h700 .p_box {height:700px; margin-top:-350px;} .popup.h750 .p_box {height:750px; margin-top:-375px;} .popup.h800 .p_box {height:800px; margin-top:-400px;}
.popup.h50p .p_box {top:25%; bottom:25%; height:auto; margin-top:0;} .popup.h60p .p_box {top:20%; bottom:20%; height:auto; margin-top:0;} .popup.h70p .p_box {top:15%; bottom:15%; height:auto; margin-top:0;} .popup.h80p .p_box {top:10%; bottom:10%; height:auto; margin-top:0;} .popup.h90p .p_box {top:5%; bottom:5%; height:auto; margin-top:0;}
 */

@media all and (max-width:1440px) {
.wrap {padding:0 40px;}
}



@media all and (max-width:1024px) {
.wrap {padding:0 30px;}

/* 팝업 */
.popup .p_box {left:10% !important; right:10% !important; top:10% !important; bottom:10% !important; width:auto !important; height:auto !important; margin-top:0 !important; margin-left:0 !important;}
.popup .p_body {padding:30px;}
.popup .p_body .pb_area {margin-top:30px;}
.popup .p_body .pb_area:first-child {margin-top:0;}
.popup .p_body .pb_title {margin-bottom:20px;}
}


@media all and (max-width:768px) {
.wrap {padding:0 20px;}

/* 팝업 */
.popup .p_head {height:50px; padding:10px 15px;}
.popup .p_title {padding-left:8px; font-size:16px; line-height:30px;}
.popup .p_body {top:50px; padding:20px;}
.popup .p_body .pb_area {margin-top:20px;}
.popup .p_body .pb_area:first-child {margin-top:0;}
.popup .p_body .pb_title {margin-bottom:15px;}
}


@media all and (max-width:600px) {
/* 버튼 */
.button.icon {float:none; width:100%; padding-left:30px; text-align:center;}

}


@media all and (max-width:480px) {
/* 팝업 */
.popup .p_body {padding:15px;}
.popup .p_body .pb_area {margin-top:15px;}
.popup .p_body .pb_area:first-child {margin-top:0;}
}