@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
* {font-family: 'roboto', 'NotoSansCJKkr', sans-serif;;}


/* FONT */
div, li, 
h1, h2, h3, h4, h5, 
span, p, strong, em, i, a { letter-spacing: -.8px; line-height: 1; word-break: keep-all; }

.htxt { font-size: 0; color: transparent; }
.container { margin: 0 auto; padding: 0 20px; width: 100%; max-width: 1320px; height: 100%; }
h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; }

.f-nanum { font-family: 'NanumSquare', sans-serif; }

.align-left { text-align: left; }
.align-center { text-align: center; }

/* VISUAL */
#visual { padding-top: 98px; width: 100%; height: 450px; background-color: #ccc; background-repeat: no-repeat; background-position: center; background-size: cover; }
#visual .container { display: flex; align-items: center; }
#visual .box-txt { color: #fff; }
#visual h2 { font-size: 40px; font-weight: 400; color: inherit; }
#visual p { margin-top: 30px; font-size: 18px; line-height: 1.8; color: inherit; }

/* BREADCRUMB */
#breadcrumb { width: 100%; height: 60px; border: 1px solid #e0e0e0; border-left: 0; border-right: 0; }
#breadcrumb nav { display: flex; width: 100%; height: 100%;}
#breadcrumb nav .home { display: flex; justify-content: center; align-items: center; width: 60px; height: 100%; border-left: 1px solid #e0e0e0;  }
#breadcrumb nav .box-select { position: relative; width: 250px; height: 100%; }
#breadcrumb nav .box-select a.selected { border: 0; border-right: 1px solid #e0e0e0; }
#breadcrumb nav .box-select a.selected:hover ul {display: block;}
#breadcrumb nav .box-select:nth-child(2) a.selected { border-left: 1px solid #e0e0e0; }
#breadcrumb nav .box-select ul { bottom: -1px; }

#content { min-height: 800px; }

/* INPUT */
.box-input { width: 100%; height: 100%; }
.box-input input { width: 100%; height: 100%; font-size: 18px; color: #666; border: none; background-color: transparent; }
.box-input input::placeholder {color: #666;}
.box-input button { padding: 0; width: 100%; height: 100%; border: none; background-color: transparent; }
.box-input button:focus {outline:auto;}

.box-select { position: relative; width: 100%; height: 100%; z-index: 1; }
.box-select a.selected { display: flex; align-items: center; position: relative; width: 100%; height: 100%; font-size: 16px; color: #666666; font-weight: 300; border: 1px solid #e0e0e0; }
.box-select a.selected:after { content: ""; display: block; position: absolute; top: 50%; right: 18px; width: 0px; height: 0px; border-top: 5px solid none; border-bottom:5px solid #c8c8c8; border-right: 5px solid transparent; border-left: 5px solid transparent; transform: rotate(180deg) translateY(0%); }
.box-select:hover a.selected:after { top: calc(50% - 5px); border-bottom-color:#b1b1b1; transform: rotate(0deg) translateY(50%); }
.box-select ul { display: none; position: absolute; bottom: 0px; left: 0; width: 100%; border: 1px solid #e0e0e0; background-color: #fff; transform: translateY(100%); }
.box-select ul.on { display: block; }
.box-select ul li { margin-top: 15px; text-align:left;  }
.box-select ul li:first-child { margin-top: 0px; }
/*.box-select ul li a { display: inline-block; width: auto; font-size: 16px; color: #b5b5b5; border-bottom: 1px solid transparent; }*/
.box-select ul li a { display: inline-block; width: auto; font-size: 16px; color: #545454; border-bottom: 1px solid transparent; }
.box-select ul li a:hover,
.box-select ul li.active a { color: #ea002c; border-color: #ea002c; }
.box-select ~ .box-select a.selected { border-left: none; }
.formBoard .box-select ~ .box-select a.selected { border-left: 1px solid #e0e0e0; }
.box-select ~ .box-select ul { width: calc(100% + 1px); transform: translate(-1px, 100%); }

.box-select ul li.mobile_only {display:none;}
.box-select ul li.mobile_only + li:nth-child(2) {margin-top:0;}

.box-select.short a.selected { padding: 0 18px; }
.box-select.short a.selected:after { right: 18px; }
.box-select.long a.selected { padding: 0 30px; }
.box-select.long a.selected:after { right: 30px; }
.box-select.short ul { padding: 22px 18px; }
.box-select.long ul { padding: 30px; }

.box-select.gray a.selected { background-color: #fafafa; }

@media (max-width: 1023px) {
    #visual { height: 400px; }
    #breadcrumb .container { padding: 0; }
}

@media (max-width: 767px) {
    .container { padding: 0 10px; }

    #visual { height: 360px; }
    #visual h2 { font-size: 34px; }
    #visual p { margin-top: 15px; font-size: 16px; }
    #visual p br { display: none; }

    #breadcrumb nav .home { display: none; }
    #breadcrumb nav .depth_1 { display: none; }
    #breadcrumb nav .box-select { width: 100%; }

    /* .box-select a.selected { font-size: 13px; } */
    .box-select ul li a { font-size: 14px; }

	.box-select ul li.mobile_only {display:block;}
	.box-select ul li.mobile_only + li:nth-child(2) {margin-top:15px;}
}

@media (max-width: 425px) {
    /* #visual { height: 250px; } */
}

@media (max-width: 375px) {
    /* #visual { height: 220px; } */
}

.go-container {position: fixed; top: -55px; left:0; right:0; z-index: 9999; text-align: center; padding: 15px 0; width: 100%; color:#000; background:#efefef; width:100%;}
.go-container:focus {top: 0; border: 2px solid #EA002C;}