@charset "utf-8";

@charset "utf-8";
/* *******************************************************
 * filename : animate.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-07-26
******************************************************** */

/* Basic */
@media screen {
    html:not(.no-js) [data-scroll] {
		transition:var(--transition-custom2);
		pointer-events: none;
		will-change: transform;
		will-change: opacity;
    }
	html:not(.no-js) [data-scroll].animated {
		pointer-events: auto;
    }
	html:not(.no-js) [data-scroll^="fade"][data-scroll^="fade"] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform;
    }
    html:not(.no-js) [data-scroll^="fade"][data-scroll^="fade"].animated {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
    html:not(.no-js) [data-scroll="fade-up"] {
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
    }
    html:not(.no-js) [data-scroll="fade-down"] {
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    html:not(.no-js) [data-scroll="fade-right"] {
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0);
    }
    html:not(.no-js) [data-scroll="fade-left"] {
        -webkit-transform: translate3d(30px, 0, 0);
        transform: translate3d(30px, 0, 0);
    }
}

/* Custom */
[data-scroll][data-scroll][data-scroll-duration="100"],
body[data-scroll-duration="100"] [data-scroll] {
    transition-duration: 0.1s;
}
[data-scroll][data-scroll][data-scroll-delay="100"],
body[data-scroll-delay="100"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="100"].animated,
body[data-scroll-delay="100"] [data-scroll].animated {
    transition-delay: 0.1s;
}
[data-scroll][data-scroll][data-scroll-duration="150"],
body[data-scroll-duration="150"] [data-scroll] {
    transition-duration: 0.15s;
}
[data-scroll][data-scroll][data-scroll-delay="150"],
body[data-scroll-delay="150"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="150"].animated,
body[data-scroll-delay="150"] [data-scroll].animated {
    transition-delay: 0.15s;
}
[data-scroll][data-scroll][data-scroll-duration="200"],
body[data-scroll-duration="200"] [data-scroll] {
    transition-duration: 0.2s;
}
[data-scroll][data-scroll][data-scroll-delay="200"],
body[data-scroll-delay="200"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="200"].animated,
body[data-scroll-delay="200"] [data-scroll].animated {
    transition-delay: 0.2s;
}
[data-scroll][data-scroll][data-scroll-duration="250"],
body[data-scroll-duration="250"] [data-scroll] {
    transition-duration: 0.25s;
}
[data-scroll][data-scroll][data-scroll-delay="250"],
body[data-scroll-delay="250"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="250"].animated,
body[data-scroll-delay="250"] [data-scroll].animated {
    transition-delay: 0.25s;
}
[data-scroll][data-scroll][data-scroll-duration="300"],
body[data-scroll-duration="300"] [data-scroll] {
    transition-duration: 0.3s;
}
[data-scroll][data-scroll][data-scroll-delay="300"],
body[data-scroll-delay="300"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="300"].animated,
body[data-scroll-delay="300"] [data-scroll].animated {
    transition-delay: 0.3s;
}
[data-scroll][data-scroll][data-scroll-duration="350"],
body[data-scroll-duration="350"] [data-scroll] {
    transition-duration: 0.35s;
}
[data-scroll][data-scroll][data-scroll-delay="350"],
body[data-scroll-delay="350"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="350"].animated,
body[data-scroll-delay="350"] [data-scroll].animated {
    transition-delay: 0.35s;
}
[data-scroll][data-scroll][data-scroll-duration="400"],
body[data-scroll-duration="400"] [data-scroll] {
    transition-duration: 0.4s;
}
[data-scroll][data-scroll][data-scroll-delay="400"],
body[data-scroll-delay="400"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="400"].animated,
body[data-scroll-delay="400"] [data-scroll].animated {
    transition-delay: 0.4s;
}
[data-scroll][data-scroll][data-scroll-duration="450"],
body[data-scroll-duration="450"] [data-scroll] {
    transition-duration: 0.45s;
}
[data-scroll][data-scroll][data-scroll-delay="450"],
body[data-scroll-delay="450"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="450"].animated,
body[data-scroll-delay="450"] [data-scroll].animated {
    transition-delay: 0.45s;
}
[data-scroll][data-scroll][data-scroll-duration="500"],
body[data-scroll-duration="500"] [data-scroll] {
    transition-duration: 0.5s;
}
[data-scroll][data-scroll][data-scroll-delay="500"],
body[data-scroll-delay="500"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="500"].animated,
body[data-scroll-delay="500"] [data-scroll].animated {
    transition-delay: 0.5s;
}
[data-scroll][data-scroll][data-scroll-duration="550"],
body[data-scroll-duration="550"] [data-scroll] {
    transition-duration: 0.55s;
}
[data-scroll][data-scroll][data-scroll-delay="550"],
body[data-scroll-delay="550"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="550"].animated,
body[data-scroll-delay="550"] [data-scroll].animated {
    transition-delay: 0.55s;
}
[data-scroll][data-scroll][data-scroll-duration="600"],
body[data-scroll-duration="600"] [data-scroll] {
    transition-duration: 0.6s;
}
[data-scroll][data-scroll][data-scroll-delay="600"],
body[data-scroll-delay="600"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="600"].animated,
body[data-scroll-delay="600"] [data-scroll].animated {
    transition-delay: 0.6s;
}
[data-scroll][data-scroll][data-scroll-duration="650"],
body[data-scroll-duration="650"] [data-scroll] {
    transition-duration: 0.65s;
}
[data-scroll][data-scroll][data-scroll-delay="650"],
body[data-scroll-delay="650"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="650"].animated,
body[data-scroll-delay="650"] [data-scroll].animated {
    transition-delay: 0.65s;
}
[data-scroll][data-scroll][data-scroll-duration="700"],
body[data-scroll-duration="700"] [data-scroll] {
    transition-duration: 0.7s;
}
[data-scroll][data-scroll][data-scroll-delay="700"],
body[data-scroll-delay="700"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="700"].animated,
body[data-scroll-delay="700"] [data-scroll].animated {
    transition-delay: 0.7s;
}
[data-scroll][data-scroll][data-scroll-duration="750"],
body[data-scroll-duration="750"] [data-scroll] {
    transition-duration: 0.75s;
}
[data-scroll][data-scroll][data-scroll-delay="750"],
body[data-scroll-delay="750"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="750"].animated,
body[data-scroll-delay="750"] [data-scroll].animated {
    transition-delay: 0.75s;
}
[data-scroll][data-scroll][data-scroll-duration="800"],
body[data-scroll-duration="800"] [data-scroll] {
    transition-duration: 0.8s;
}
[data-scroll][data-scroll][data-scroll-delay="800"],
body[data-scroll-delay="800"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="800"].animated,
body[data-scroll-delay="800"] [data-scroll].animated {
    transition-delay: 0.8s;
}
[data-scroll][data-scroll][data-scroll-duration="850"],
body[data-scroll-duration="850"] [data-scroll] {
    transition-duration: 0.85s;
}
[data-scroll][data-scroll][data-scroll-delay="850"],
body[data-scroll-delay="850"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="850"].animated,
body[data-scroll-delay="850"] [data-scroll].animated {
    transition-delay: 0.85s;
}
[data-scroll][data-scroll][data-scroll-duration="900"],
body[data-scroll-duration="900"] [data-scroll] {
    transition-duration: 0.9s;
}
[data-scroll][data-scroll][data-scroll-delay="900"],
body[data-scroll-delay="900"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="900"].animated,
body[data-scroll-delay="900"] [data-scroll].animated {
    transition-delay: 0.9s;
}
[data-scroll][data-scroll][data-scroll-duration="950"],
body[data-scroll-duration="950"] [data-scroll] {
    transition-duration: 0.95s;
}
[data-scroll][data-scroll][data-scroll-delay="950"],
body[data-scroll-delay="950"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="950"].animated,
body[data-scroll-delay="950"] [data-scroll].animated {
    transition-delay: 0.95s;
}
[data-scroll][data-scroll][data-scroll-duration="1000"],
body[data-scroll-duration="1000"] [data-scroll] {
    transition-duration: 1s;
}
[data-scroll][data-scroll][data-scroll-delay="1000"],
body[data-scroll-delay="1000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1000"].animated,
body[data-scroll-delay="1000"] [data-scroll].animated {
    transition-delay: 1s;
}
[data-scroll][data-scroll][data-scroll-duration="1100"],
body[data-scroll-duration="1100"] [data-scroll] {
    transition-duration: 1.1s;
}
[data-scroll][data-scroll][data-scroll-delay="1100"],
body[data-scroll-delay="1100"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1100"].animated,
body[data-scroll-delay="1100"] [data-scroll].animated {
    transition-delay: 1.1s;
}
[data-scroll][data-scroll][data-scroll-duration="1200"],
body[data-scroll-duration="1200"] [data-scroll] {
    transition-duration: 1.2s;
}
[data-scroll][data-scroll][data-scroll-delay="1200"],
body[data-scroll-delay="1200"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1200"].animated,
body[data-scroll-delay="1200"] [data-scroll].animated {
    transition-delay: 1.2s;
}
[data-scroll][data-scroll][data-scroll-duration="1300"],
body[data-scroll-duration="1300"] [data-scroll] {
    transition-duration: 1.3s;
}
[data-scroll][data-scroll][data-scroll-delay="1300"],
body[data-scroll-delay="1300"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1300"].animated,
body[data-scroll-delay="1300"] [data-scroll].animated {
    transition-delay: 1.3s;
}
[data-scroll][data-scroll][data-scroll-duration="1400"],
body[data-scroll-duration="1400"] [data-scroll] {
    transition-duration: 1.4s;
}
[data-scroll][data-scroll][data-scroll-delay="1400"],
body[data-scroll-delay="1400"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1400"].animated,
body[data-scroll-delay="1400"] [data-scroll].animated {
    transition-delay: 1.4s;
}
[data-scroll][data-scroll][data-scroll-duration="1500"],
body[data-scroll-duration="1500"] [data-scroll] {
    transition-duration: 1.5s;
}
[data-scroll][data-scroll][data-scroll-delay="1500"],
body[data-scroll-delay="1500"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1500"].animated,
body[data-scroll-delay="1500"] [data-scroll].animated {
    transition-delay: 1.5s;
}
[data-scroll][data-scroll][data-scroll-duration="1600"],
body[data-scroll-duration="1600"] [data-scroll] {
    transition-duration: 1.6s;
}
[data-scroll][data-scroll][data-scroll-delay="1600"],
body[data-scroll-delay="1600"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1600"].animated,
body[data-scroll-delay="1600"] [data-scroll].animated {
    transition-delay: 1.6s;
}
[data-scroll][data-scroll][data-scroll-duration="1700"],
body[data-scroll-duration="1700"] [data-scroll] {
    transition-duration: 1.7s;
}
[data-scroll][data-scroll][data-scroll-delay="1700"],
body[data-scroll-delay="1700"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1700"].animated,
body[data-scroll-delay="1700"] [data-scroll].animated {
    transition-delay: 1.7s;
}
[data-scroll][data-scroll][data-scroll-duration="1800"],
body[data-scroll-duration="1800"] [data-scroll] {
    transition-duration: 1.8s;
}
[data-scroll][data-scroll][data-scroll-delay="1800"],
body[data-scroll-delay="1800"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1800"].animated,
body[data-scroll-delay="1800"] [data-scroll].animated {
    transition-delay: 1.8s;
}
[data-scroll][data-scroll][data-scroll-duration="1900"],
body[data-scroll-duration="1900"] [data-scroll] {
    transition-duration: 1.9s;
}
[data-scroll][data-scroll][data-scroll-delay="1900"],
body[data-scroll-delay="1900"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1900"].animated,
body[data-scroll-delay="1900"] [data-scroll].animated {
    transition-delay: 1.9s;
}
[data-scroll][data-scroll][data-scroll-duration="2000"],
body[data-scroll-duration="2000"] [data-scroll] {
    transition-duration: 2s;
}
[data-scroll][data-scroll][data-scroll-delay="2000"],
body[data-scroll-delay="2000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="2000"].animated,
body[data-scroll-delay="2000"] [data-scroll].animated {
    transition-delay: 2s;
}
[data-scroll][data-scroll][data-scroll-duration="3000"],
body[data-scroll-duration="3000"] [data-scroll] {
    transition-duration: 3s;
}
[data-scroll][data-scroll][data-scroll-delay="3000"],
body[data-scroll-delay="3000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="3000"].animated,
body[data-scroll-delay="3000"] [data-scroll].animated {
    transition-delay: 3s;
}

[data-scroll][data-scroll][data-scroll-duration="4000"],
body[data-scroll-duration="4000"] [data-scroll] {
    transition-duration: 3s;
}
[data-scroll][data-scroll][data-scroll-delay="4000"],
body[data-scroll-delay="4000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="4000"].animated,
body[data-scroll-delay="4000"] [data-scroll].animated {
    transition-delay: 3s;
}
[data-scroll][data-scroll][data-scroll-easing="linear"],
body[data-scroll-easing="linear"] [data-scroll] {
    transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
[data-scroll][data-scroll][data-scroll-easing="ease"],
body[data-scroll-easing="ease"] [data-scroll] {
    transition-timing-function: ease;
}
[data-scroll][data-scroll][data-scroll-easing="ease-in"],
body[data-scroll-easing="ease-in"] [data-scroll] {
    transition-timing-function: ease-in;
}
[data-scroll][data-scroll][data-scroll-easing="ease-out"],
body[data-scroll-easing="ease-out"] [data-scroll] {
    transition-timing-function: ease-out;
}
[data-scroll][data-scroll][data-scroll-easing="ease-in-out"],
body[data-scroll-easing="ease-in-out"] [data-scroll] {
    transition-timing-function: ease-in-out;
}



.load { z-index: 101; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100vh;  display: none;}
.load-wrapper { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; position: absolute; width: 100%; height: 100vh; }
.load .bar { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; height: 10%; }
.load .bar .item { width: 100%; height: 0%; background: #fcfbf4; }

.main-hero { position: relative; width: 100%; min-height: 250vh; }

.intro { z-index: 100; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: right; color: #fff; background: #201e20 url('/trimage/assets/images/main/intro-background.jpg') no-repeat center / cover;  display: none;}
.intro .text-wrap { max-width: 1340px; width: 90%; }
.intro .heading { overflow: hidden; font-family: 'Roboto Slab'; font-size: clamp(22px, 6vw, 70px); }
.intro .heading .split { padding: .2em 0; line-height: 0.8; }
.intro .title { overflow: hidden; margin: 42px 0 26px; font-family: 'KoPubWorld Batang'; font-size: clamp(20px, 5.5vw, 55px); font-weight: 300; }
.intro .title .split { padding-top: 0.1em; line-height: 1; }
.intro .split { display: block; transform: translateY(100%) rotate(5deg); transform-origin: left; }
.intro .line { display: block; position: relative; width: 100%; height: 1px; }
.intro .line .item { position: absolute; top: 0; right: 0; width: calc(100vw - (50vw - 670px)); height: 1px; background: #8b734b; transform: scaleX(0); transform-origin: left; }
.intro .line .bar { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: #8b734b; transition: width ease 2s; }




/* 영역구분 */
#wrap {position:relative; width:100%; margin:0 auto; text-align:center;}
.wrap {display:inline-block; vertical-align:middle; position:relative; width:100%; 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:#161514 !important;}	/* 메인 */
.ck {color:#000 !important;}	/* 검은색 */
.cw {color:#fff !important;}	/* 흰색 */
.cb {color:#101111 !important;}	/* 진한 회색 */
.cl {color:#bfbec5 !important;} /* 연한 회색 */
.cg {color:#679c80 !important;}	/* 녹색 */
.cj {color:#9a5d7f !important;}	/* 마젠타 */
.cr {color:#4e6b7b !important;}	/* 그래이쉬 블루 */
.tangy {color:#ff6955 !important;}	/* 오렌지 블루 */

/* 타이틀 */
.title {font-size:30px; line-height:40px; word-wrap:normal; word-break:keep-all; letter-spacing:-0.5px;}
.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.semibold, .title .semibold {font-weight:600;}
.title.bold, .title .bold {font-weight:700;}
.title.black, .title .black {font-weight:900;}
.title.t1, .title .t1 {font-size:40px; line-height:50px;}
.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;}
.title span {display:inline-block;}
.title > span {width:100%;}

/* 텍스트 */
.text {font-size:20px; font-weight:400; line-height:30px; word-wrap:normal; word-break:keep-all; letter-spacing:-0.7px;}
.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.t1, .text .t1 {font-size:18px;}
.text.t2, .text .t2 {font-size:15px; line-height:25px;}
.text a {color:#101111;}
.text.cw a, .text .cw a {color:#fff;}
.text a:hover {color:#101111; text-decoration:underline; text-decoration-color:#101111;}
.text.cw a:hover, .text .cw a:hover {color:#fff; 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;}
.text span {display:inline-block;}
.text > span {width:100%;}
.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%;}
.form .f_wrap + .f_wrap {margin-top:60px;}
.form .f_field {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%;}
.form .f_field .ff_title {display:inline-block; width:100%; font-size:18px; font-weight:500; color:#161514; 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; padding-bottom:10px; border-bottom:#161514 solid 1px;}
.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; width:100%; border:none; font-size:18px; font-weight:500; color:#161514; letter-spacing:-0.5px; line-height:40px; text-align:left;}
.form .f_field input::placeholder {color:#161514;}
.form .f_field textarea {display:inline-block; vertical-align:middle; border:none; width:100%; height:120px; font-size:18px; resize:none; font-weight:500; color:#161514; letter-spacing:-0.5px; line-height:30px; text-align:left;}
.form .f_field textarea::placeholder {font-weight:300; color:#737373;}

.form .f_wrap + .f_btn {margin-top:30px;}
.form .f_btn .ff_wrap {border-bottom:none;}
.form .f_btn .chk_box {display:inline-block; margin-top:5px;}
.form .f_btn .chk_box a {font-weight:500; text-underline-position:under; text-decoration:underline;}
.form .f_btn .chk_box input:checked + label b {font-weight:400;}

/* 폼스타일 */
.input {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:40px; margin:0; padding:0; padding-left:20px; border:none; background-color:#F2F1F1; outline:none; font-size:14px; font-weight:500; color:#202325; letter-spacing:-0.5px; line-height:40px; text-align:left;}
.input:focus {border:none !important; outline:none !important;}
.input:placeholder {color:#202325 !important;}
.select {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:40px; margin:0; padding:0; padding-left:20px; border:none;background-color:#F2F1F1; outline:none; font-size:14px; font-weight:500; color:#202325; 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:#202325 !important;}
.textarea {display:block; vertical-align:middle; box-sizing:border-box; width:100%; width:98%\9; height:90px; margin:0; padding:10px 15px; outline:none; border-radius:0; background-color:#F2F1F1; border:none; resize:none; border:rgba(16,17,17,0.2) solid 0; font-size:14px; font-weight:400; color:#101111; letter-spacing:-0.5px; line-height:24px; text-align:left;}
.popup .p_body .pb_agreement > textarea::-webkit-scrollbar {width:10px;}
.popup .p_body .pb_agreement > textarea::-webkit-scrollbar-thumb {background-color:#2361A2; border-radius:10px; background-clip:padding-box; border:2px solid transparent;}
.popup .p_body .pb_agreement > textarea::-webkit-scrollbar-thumb:hover {background-color:#2361A2;}
.popup .p_body .pb_agreement > textarea::-webkit-scrollbar-track {background-color:#F2F1F1; border-radius:5px;}
.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;}



/* 서식 */
.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;}


.button {display:inline-block; vertical-align:middle; position:relative; padding:0 20px; border-radius:20px; border:#161514 solid 1px; font-size:15px; color:#161514; line-height:38px; letter-spacing:-0.5px; transition:0.3s;}
.button.big {box-sizing:border-box; width:230px; border-radius:30px; font-size:20px; line-height:58px; letter-spacing:0;}
.button.normal {border-radius:30px; width:180px; font-size:18px; line-height:48px;}
.button.middle {box-sizing:border-box; width:150px;}
.button.small {padding:0 13px; font-size:11px; line-height:28px;}
.button:hover {background-color:#161514; color:#fff;}
.button.t1 {border-color:#fff; color:#fff;}
.button.t2 {border-color:#fff; background-color:#fff; color:#161514;}
.button.t3 {border-color:#161514; background-color:#161514; color:#fff;}
.button.t1:hover {background-color:#fff; color:#161514;}
.button.t2:hover {border-color:#161514;}
.button.t3:hover {background-color:#fff; color:#161514;}
.button.arrow {padding-right:60px;}
.button.arrow i {display:inline-block; position:absolute; right:20px; top:50%; width:6px; height:6px; margin-top:-3px; border-top:currentColor solid 1px; border-right:currentColor solid 1px; color:#161514; transform:rotate(45deg); transition:0.3s;}
.button.arrow:hover i {color:#fff; right:18px;} 
.button.t1.arrow i {color:#fff;}
.button.t1.arrow:hover i {color:#161514;}

.chk_box {position:relative; font-size:0; line-height:0;}
.chk_box input {position:absolute; left:50%; top:50%; width:24px; height:24px; margin-left:-12px; margin-top:-12px !important; opacity:0; z-index:1; cursor:pointer;}
.chk_box label {display:inline-block; position:relative; box-sizing:border-box; width:24px; height:24px; background-color:#F2F1F1; cursor:pointer; letter-spacing:-0.5px;}
.chk_box label:after {content:""; position:absolute; left:7px; top:50%; width:12px; height:7px; margin-top:-5px; border-left:#D9D9D9 solid 3px; border-bottom:#D9D9D9 solid 3px; transform:rotate(-45deg);}
.chk_box label span {display:none;}
.chk_box input:checked + label {background-color:#161514; border-color:#161514;}
.chk_box input:checked + label:after {border-color:#fff;}
.chk_box label b {position:absolute; left:35px; top:0; font-size:15px; font-weight:400; color:#202325; line-height:30px; white-space: nowrap;}
.chk_box input:checked + label b {font-weight:500;}



@media all and (max-width:1440px) {
.title {font-size:27px; line-height:37px;}
.title.t1, .title .t1 {font-size:35px; line-height:45px;}
.text {font-size:17px; line-height:27px;}
.text.t1, .text .t1 {font-size:16px;}
}





@media all and (max-width:1024px) {

.form .f_wrap + .f_wrap {margin-top:40px;}
.form .f_field .ff_title,
.form .f_field input,
.form .f_field textarea {font-size:16px; line-height:30px;}



.title {font-size:23px; line-height:33px;}
.title.t1, .title .t1 {font-size:33px; line-height:43px;}
.text {font-size:16px; line-height:26px;}
.text.t1, .text .t1 {font-size:15px;}
/* 버튼 */
.button {padding:0 15px; border-radius:18px; font-size:14px; line-height:32px;}
.button.arrow {padding-right:40px;}
.button.arrow i {right:15px; width:5px; height:5px; margin-top:-2.5px;}
.button.arrow:hover i {right:13px;} 
.button.big {width:auto; border-radius:20px; font-size:15px; line-height:38px; letter-spacing:-0.5px;}
.button.normal {border-radius:20px; width:160px; font-size:15px; line-height:38px;}
}





@media all and (max-width:768px) {
.title {font-size:20px; line-height:30px;}
.title.t1, .title .t1 {font-size:30px; line-height:40px;}
.button.big {padding:0 15px; border-radius:18px; font-size:14px; line-height:32px;}
}





@media all and (max-width:600px) {
.form .f_wrap + .f_wrap {margin-top:30px;}
.form .f_btn .chk_box {width:100%;}
.form .f_btn .button {margin-top:15px; width:100%;}
}