@charset "utf-8";
/* 작성일 :2022.07.24 */
/* CSS Document */

/* 영역구분 */
#wrapper {background-color:#fff; min-width:0;}
#wrap {position:relative; width:100%; min-width:320px; margin:0 auto; text-align:center;}
.wrap {display:inline-block; vertical-align:middle; position:relative; width:100%; max-width:1400px; margin:0 auto;}
.blind {display:block; overflow:hidden; position:absolute !important; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; text-indent:-9999px;}

/* 컬러 */
.cm {color:#00893c !important;}	/* 메인 */
.ck {color:#000 !important;}	/* 검은색 */
.cw {color:#fff !important;}	/* 흰색 */
.cb {color:#908f8f !important;}	/* 진한 회색 */
.ci {color:#eee !important;} /* 연한 회색 */

/* 타이틀 */
.title {font-size:25px; line-height:35px; word-wrap:normal; word-break:keep-all; letter-spacing:-1px;}
.title.thin, .title .thin {font-weight:100;}
.title.extralight, .title .extralight {font-weight:200;}
.title.light, .title .light {font-weight:300;}
.title.regular, .title .regular {font-weight:400;}
.title.medium, .title .medium {font-weight:500;}
.title.semibold, .title .semibold {font-weight:600;}
.title.bold, .title .bold {font-weight:700;}
.title.extrabold, .title .extrabold {font-weight:800;}
.title.black, .title .black {font-weight:900;}
.title.t1, .title .t1 {font-size:50px; line-height:60px; letter-spacing:-1.5px;}
.title.t2, .title .t2 {font-size:40px; line-height:50px; letter-spacing:-1.3px;}
.title.enter {white-space:nowrap;}
.title.enter span, .title .enter span, .title.enter strong, .title .enter strong {display:block;}
.title span {display:inline-block;}

/* 텍스트 */
.text {font-size:15px; font-weight:400; line-height:25px; word-wrap:normal; word-break:keep-all;}
.text.word, .text .word {word-break:break-all;}
.text.thin, .text .thin {font-weight:100;}
.text.extralight, .text .extralight {font-weight:200;}
.text.light, .text .light {font-weight:300;}
.text.regular, .text .regular {font-weight:400;}
.text.medium, .text .medium {font-weight:500;}
.text.semibold, .text .semibold {font-weight:600;}
.text.bold, .text .bold {font-weight:700;}
.text.extrabold, .text .extrabold {font-weight:800;}
.text.black, .text .black {font-weight:900;}
.text.big, .text .big {font-size:30px; line-height:40px;}
.text.middle, .text .middle {font-size:18px; line-height:30px;} /* 사용중 */
.text.small, .text .small {font-size:14px; line-height:25px;}
.text.enter, .text .enter {white-space:nowrap;}
.text.enter span, .text .enter span, .text.enter strong, .text .enter strong {display:block;}
.text.overflow, .text .overflow {min-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}


/* 꾸밈요소 */
.line {border-style:solid; border-color:#eee;}
.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;}

/* 플러스 모양 데코 */
.plusebutton {display:inline-block; vertical-align:middle; position:relative; width:40px; height:40px; border-radius:50%; background-color:#fff;}
.plusebutton i {position:absolute; left:50%; top:50%; width:14px; height:14px; margin-left:-7px; margin-top:-7px; transition:0.3s;}
.plusebutton:hover i {transform:rotate(90deg);}
.plusebutton i:before {content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background-color:#000;}
.plusebutton i:after {content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background-color:#000;}

/* 화살표 모양 데코 */
.arrowbutton {display:inline-block; vertical-align:middle; position:relative; width:40px; height:40px; border-radius:50%; background-color:#fff;}
.arrowbutton i {position:absolute; left:50%; top:50%; width:14px; height:14px; margin-left:-7px; margin-top:-7px; transition:0.3s;}
.arrowbutton i:before {content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; margin-left:-3px; margin-top:-4px; border-top:#000 solid 2px; border-right:#000 solid 2px; transform:rotate(135deg);}
.open .arrowbutton i:before {margin-top:-2px; transform:rotate(-45deg);}

/* 폼태그 */
.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:40px; margin:0; padding:0; padding-left:20px; border:none; outline:none; font-size:15px; font-weight:400; color:#000; letter-spacing:-0.5px; line-height:40px; text-align:left;}
.input:focus {border:none !important; outline:none !important;}
.input:placeholder {color:#908f8f}
.select {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:40px; margin:0; padding:0; padding-left:20px; border:none; outline:none; font-size:15px; font-weight:400; color:#908f8f; letter-spacing:-0.5px; line-height:40px; text-align:left; background-image:url("/images/common/icon_arrow.svg"); background-size:20px 20px; background-position:center right 15px; background-repeat:no-repeat; -webkit-appearance: none;}
.select:focus {border:none !important; outline:none !important;}
.select:placeholder {color:#908f8f}
.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:#101111; 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:#101111; letter-spacing:-0.5px; line-height:38px; text-align:left;}
.file:hover {border-color:#101111;}


/* 버튼 */
.buttonwrap {display:inline-block; vertical-align:middle; width:100%; font-size:0; line-height:0;}
.buttonwrap li {display:inline-block; vertical-align:middle; padding:0 5px; font-size:0; line-height:0;}
.button {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; min-width:170px; height:40px; border-radius:20px; border:#000 solid 2px; background-color:#000; font-size:15px; font-weight:600; color:#fff; line-height:36px; transition:0.2s; -webkit-transition:0.2s; text-align:center;}
.button.normal {border-width:1px; border-radius:0; line-height:38px;}
.button.small {min-width:auto; padding:0 20px;}
.button.middle {min-width:140px;}
.button.t1 {background-color:transparent; color:#000;}
.button:hover {text-decoration:underline; text-underline-position:under;}
.button.t2 {border-color:#00893c; background-color:#00893c; color:#fff;}

a.btn_frmline, button.btn_frmline {background-color:#666;}

.btn_cancel {background:#666 !important; color:#fff !important; border:#666 solid 1px !important; transition:.5s !important;}
.btn_submit {background:transparent; color:#000; border:#000 solid 1px; transition:0.5s !important;}

.btn_cancel:hover {background:transparent !important; color:#000 !important; border:#000 solid 1px !important;}
.btn_submit:hover {background:#666; color:#fff; border:#666 solid 1px;}



@media all and (max-width:1600px) {
.wrap {max-width:1280px;}
/* 타이틀 */
.title {font-size:23px;}
.title.t1, .title .t1 {font-size:45px; line-height:55px;}
.title.t2, .title .t2 {font-size:36px;}
}





@media all and (max-width:1440px) {
.wrap {max-width:1100px;}
/* 타이틀 */
.title {font-size:20px; line-height:30px;  letter-spacing:-0.8px;}
.title.t1, .title .t1 {font-size:40px; line-height:50px;}
.title.t2, .title .t2 {font-size:34px; line-height:45px; letter-spacing:-1px;}

/* 텍스트 */
.text {font-size:14px;}
.text.middle, .text .middle {font-size:16px; line-height:25px;}
}





@media all and (max-width:1280px) {
.wrap {max-width:880px;}
/* 타이틀 */
.title {font-size:18px;}
.title.t1, .title .t1 {font-size:35px; line-height:45px;}
.title.t2, .title .t2 {font-size:30px; line-height:40px; letter-spacing:-0.8px;}
/* 텍스트 */
.text {font-size:13px;}
.text.middle, .text .middle {font-size:15px;}
}





@media all and (max-width:1024px) {
.wrap {max-width:700px;}
/* 타이틀 */
.title {font-size:17px; line-height:25px;}
.title.t1, .title .t1 {font-size:32px; line-height:40px;}
.title.t2, .title .t2 {font-size:27px;}
/* 텍스트 */

}





@media all and (max-width:768px) {
.wrap {max-width:100%; padding:0 25px;}
/* 타이틀 */
.title {font-size:16px;  letter-spacing:-0.5px;}
.title.t1, .title .t1 {font-size:27px; line-height:35px;}
.title.t2, .title .t2 {font-size:23px; line-height:35px;}
/* 텍스트 */
.text {font-size:14px;}
.text.big, .text .big {font-size:20px;}
.text.middle, .text .middle {font-size:16px;}

.input {height:35px; padding-left:15px; font-size:14px; line-height:35px;}
.select {height:35px; padding-left:15px; font-size:14px; line-height:35px;}

/* 버튼 */
.button {min-width:160px; height:35px; font-size:14px; line-height:31px;}
.button.normal {line-height:33px;}
}





@media all and (max-width:600px) {
/* 타이틀 */
.title {font-size:15px;}
.title.t1, .title .t1 {font-size:25px; line-height:33px;}
.title.t2, .title .t2 {font-size:20px; line-height:30px;}

/* 텍스트 */
.text {font-size:13px;}

.plusebutton {width:30px; height:30px;}
.plusebutton i {width:12px; height:12px; margin-left:-6px; margin-top:-6px;}

.arrowbutton {width:30px; height:30px;}
}