:root .blue {--main-color: #54bdda;}
:root .yellow {--main-color: #ffe800;}
:root .brown {--main-color: #c36d15;}
body {min-width: 280px; margin: 0 auto; position: relative;}
body * {line-height: 150%;}
#wrap {overflow: unset; position: relative;}

/* header */
#header {
    position: fixed;
    top: 0;
    z-index: 1000;
    height: 80px;
    width: 100%;
    min-width: 280px;
    border-bottom: 1px solid #000;
    background-color: #fff;
}
#logo {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    height: 80px;
}
#logo::after {display: block; content: ""; clear: both;}
#logo a {
    width: 120px;
    height: 100%;
    display: block;
    float: left;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../img/main/logo-header.png') center / 120px auto no-repeat;
}
#logo a + span {
    float: left;
    display: block;
    font-weight: normal;
    font-size: 14px;
    margin: 35px 0 0 10px;
}
#all_menu_btn {
    display: none;
    width: 26px;
    height: 26px;
    text-indent: -9999px;
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../img/main/all_menu_btn.png') center / 22px auto no-repeat;
}
#all_menu_btn.open {background: url('../img/main/btn_close.png') center / 18px auto no-repeat;}

@media screen and (max-width: 1024px) {
    #all_menu_btn {display: block;background-size: 20px auto;}
    #header {height: 60px;}
    #logo {height: 60px;left: 20px;}
    #logo a {background-size: 119px auto;}
    #logo a + span {margin-top: 25px;}
    #all_menu_btn.open {background-size: 16px auto;}
}
@media screen and (max-width: 768px) {
    #logo a + span {font-size: 13px; width: 95px; line-height: 120%; margin-top: 15px;}
}
/* --header */

/* layout */
#contents {display: flex; justify-content: space-between; margin: 80px 0 0 300px;}
#all_menu {
    border-right: 1px solid #000;
    width: 300px;
    background-color: #fff;
    position: fixed;
    left: 0;
    height: 100%;
}
#content {padding: 30px 60px 60px;}
#content h3 {
    font-size: 40px;
    border-bottom: 2px solid #000;
    padding: 20px 0;
    margin: 100px 0 20px;
    line-height: 130%;
}
#content h3:first-child {margin-top: 0;}
#content h3 span {
    font-size: 24px;
    font-weight: 500;
    background-color: #ffe800;
    display: inline-block;
    padding: 0 15px;
    border-radius: 15px;
    margin-left: 15px;
    vertical-align: middle;
    line-height: 150%;
}
#content h4 {font-size: 28px; margin-bottom: 25px;}
#content h4 + .tbl_basic {margin-top: 25px;}
#content h5 {font-size: 20px; margin: 25px 0 10px;}
#content h5 + .blt_list {margin-left: 20px;}

@media screen and (max-width: 1440px) {
    #contents {margin: 80px 0 0 250px;}
    #all_menu {width: 250px;}
    #content {padding: 15px 40px 40px;}
}
@media screen and (max-width: 1024px) {
    #contents {margin: 60px 0 0 0;}
    #all_menu {
        display: none;
        width: 100%;
        height: calc(100vh - 60px);
        overflow-y: auto;
        border-right: none;
        z-index: 1000;
    }
    #content {padding: 15px 20px 40px; margin-bottom: 20px;}
}
@media screen and (max-width: 768px) {
    #content h3 {padding: 10px 0; font-size: 30px;}
    #content h3 span {font-size: 18px; padding: 0 10px; margin-left: 10px;}
    #content h4 {font-size: 22px; margin-bottom: 15px;}
    #content h5 {font-size: 18px; margin: 20px 0 5px;}
    #content h5 + .blt_list {margin-left: 10px;}
}
/*-- layout */

/* left */
.all_menu a {display: block;}
.all_menu > li.on {background-color: #5fceea;}
.all_menu > li {border-bottom: #000 solid 1px;}
.all_menu > li > a {font-size: 18px; padding: 15px 50px 15px 30px; word-break: keep-all;}
.all_menu > li.depth {background: url('../img/content/banner_arr.png') calc(100% - 30px) center / auto 13px no-repeat;}
.all_menu > li.depth.on {background: url('../img/content/banner_arr_on.png') calc(100% - 30px) 25px / 13px auto no-repeat #5fceea;}
.all_menu > li.depth > ul {display: none;}
.all_menu > li.depth.on > ul {
    display: block;
    border-top: #000 solid 1px;
    background-color: #f0f0f0;
    padding: 15px 30px;
}
.all_menu > li > ul > li > a {position: relative; padding: 2px 0 2px 17px;}
.all_menu > li > ul > li.on > a,
.all_menu > li > ul > li > a:hover {text-decoration: underline;}
.all_menu > li > ul > li > a::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 10px;
}

@media screen and (max-width: 1024px) {
    .all_menu > li > a {padding: 15px 40px 15px 20px;}
    .all_menu > li.depth {background-position: calc(100% - 20px) center;}
    .all_menu > li.depth.on {background-position: calc(100% - 20px) 25px;}
    .all_menu > li.depth.on > ul {padding: 15px 20px;}
}
@media screen and (max-width: 768px) {
    .all_menu > li > a {font-size: 16px; padding: 12px 40px 12px 20px;}
    .all_menu > li.depth {background-size: auto 12px;}
    .all_menu > li.depth.on {background-position: calc(100% - 20px) 21px; background-size: 12px auto;}
    .all_menu > li.depth.on > ul {padding: 12px 20px;}
    .all_menu > li > ul > li > a {padding: 2px 0 2px 15px; font-size: 15px;}
    .all_menu > li > ul > li > a::after {width: 6px; height: 6px; top: 9px;}
}
/*-- left */

/* content */
.flex {display: flex; justify-content: space-between; align-items: center; margin-top: 100px;}
.flex > * {width: 100%;}
.flex > *:first-child {margin-right: 15px;}
.flex > *:last-child {margin-left: 15px;}

.flex.normal {align-items: normal;}
.flex .tit {font-size: 18px; margin-bottom: 30px;}

.img.dot {border: 2px dotted #000;}
.img.short {width: 50%;}
.img.sns {height: 35px; margin-bottom: 10px;}
.img.sns img {height: 100%;}

@media screen and (max-width: 1260px) {
    .flex {margin-top: 80px;}
    .flex > *:first-child {margin-right: 10px;}
    .flex > *:last-child {margin-left: 10px;}
    .flex .img {width: 80%;}

    .img.short {width: 60%;}
}
@media screen and (max-width: 1024px) {
    .flex {margin-top: 60px;}
    .flex .img {width: 100%;}

    .img.short {width: 60%;}
}
@media screen and (max-width: 768px) {
    .flex {flex-direction: column; align-items: flex-start; margin-top: 40px;}
    .flex > *:first-child {margin: 0 auto 10px auto;}
    .flex > *:last-child {margin: 10px auto 0 auto;}
    .flex.reverse {flex-direction: column-reverse;}
    .flex.reverse > *:first-child {margin: 10px auto 0 auto;}
    .flex.reverse > *:last-child {margin: 0 auto 10px auto;}

    .flex .tit {font-size: 16px; margin-bottom: 20px;}
    .flex .img {max-width: 350px; margin: 0 auto;}

    .img.short {width: 100%; margin-top: 10px;}
    .img.sns {height: 30px; margin-bottom: 5px; max-width: none;}
}

/* tabel */
[class^='tbl_'] table {width: 100%;}
[class^='tbl_'] th {font-size: 17px; padding: 8px; line-height: 130%;}
[class^='tbl_'] td {padding: 10px 15px;}
[class^='tbl_'] .blt_list {min-height: auto;}
[class^='tbl_'] .blt_list li {font-size: 16px;}

.tbl_basic {border-top: 1px solid #000;}
.tbl_basic tr {border-bottom: 1px solid #000;}
.tbl_basic th + td {border-left: 1px solid #000;}
.tbl_basic th {background-color: var(--main-color);}

.tbl_dotted tr + tr {border-top: 2px dashed #000;}
.tbl_dotted th + td {border-left: 2px dashed #000;}
.tbl_dotted th,
.tbl_dotted dt {font-size: 20px; padding: 12px 8px; text-align: center; word-break: keep-all;}
.tbl_dotted th span {font-size: 16px; line-height: 100%;}
.tbl_dotted td,
.tbl_dotted dd {padding: 15px 20px; vertical-align: top;}
.tbl_dotted .blt_list li {font-size: 18px;}
.tbl_dotted .blt_list .guide {font-size: 16px;}
.tbl_dotted .guide {margin-top: 10px;}

.tbl_dotted dt {border-top: 2px dashed #000; border-bottom: 2px dashed #000; font-weight: bold;}
.tbl_dotted dd {display: flex; flex-direction: column; height: calc(100% - 60px);}
.tbl_dotted dd .img {margin-top: auto;}

.tbl_dotted.flex {align-items: normal; margin-top: 0 !important;}
.tbl_dotted.flex > * {margin: 0;}
.tbl_dotted.flex > * + * {border-left: 2px dashed #000;}

.tbl_dotted .flex {margin-top: 0;}
.tbl_dotted .flex > .img {width: 80%;}

.tbl_dotted.small {max-width: 800px; margin: 20px auto; border-top: 1px dashed #000; border-bottom: 1px dashed #000;}
.tbl_dotted.small tr + tr {border-top: 1px dashed #000;}
.tbl_dotted.small tr > * + * {border-left: 1px dashed #000;}
.tbl_dotted.small th,
.tbl_dotted.small td {
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    padding: 10px 8px;
}
.tbl_dotted.small .rLine {border-right: 1px dashed #000;}

@media screen and (max-width: 1260px) {
    .tbl_dotted.flex .img {width: 100%;}
}
@media screen and (max-width: 768px) {
    [class^='tbl_'] th {font-size: 16px;}
    [class^='tbl_'] td {font-size: 15px;}
    [class^='tbl_'] .blt_list {margin-bottom: 0;}
    [class^='tbl_'] .blt_list li {font-size: 15px;}

    .tbl_dotted th,
    .tbl_dotted dt {font-size: 17px; padding: 8px; line-height: 25px;}
    .tbl_dotted td,
    .tbl_dotted dd {padding: 10px 15px;}
    .tbl_dotted .blt_list li {font-size: 16px;}
    .tbl_dotted .blt_list .guide {font-size: 15px;}
    .tbl_dotted .guide {margin-top: 5px;}

    .tbl_dotted:not(.small) tr {display: block;}
    .tbl_dotted:not(.small) tr + tr {border: none; margin-top: 20px;}
    .tbl_dotted:not(.small) th + td {border: none;}
    .tbl_dotted:not(.small) th {display: block; border-top: 1px dashed #000; border-bottom: 1px dashed #000;}
    .tbl_dotted:not(.small) th span {font-size: 15px;}
    .tbl_dotted:not(.small) td {padding: 10px 0; display: block;}

    .tbl_dotted dt {border-width: 1px;}
    .tbl_dotted dd {padding: 10px 0;}

    .tbl_dotted.flex > * + * {border-left: none; margin-top: 20px;}

    .tbl_dotted .flex > .img {width: 100%; margin-top: 10px;}

    .tbl_dotted.small th,
    .tbl_dotted.small td {font-size: 14px; padding: 6px; word-break: break-all;}
}
/* --tabel */

/* list */
.blt_list {min-height: 150px;}
.blt_list li {position: relative; padding-left: 12px; font-size: 18px;}
.blt_list li::before {
    content: '-';
    position: absolute;
    left: 0;
}
ol.blt_list {counter-reset: number 0;}
ol.blt_list li {padding-left: 18px;}
ol.blt_list li::before {
    counter-increment: number 1;
    content: counter(number) '.';
}
ol.blt_list.icon li {padding-left: 30px; position: relative;}
ol.blt_list.icon li::before {
    content: counter(number);
    font-size: 15px;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 24px;
}

.blt_list.auto {min-height: auto; margin-bottom: 20px;}
.blt_list.line li {padding: 15px 0 15px 12px;}
.blt_list.line li + li {border-top: 1px solid #000;}
.blt_list.line .noTop {border-top: none; margin-top: -25px;}
.blt_list .table {padding-left: 0; display: block; width: auto; height: auto;}
.blt_list .table::before {display: none;}

.blt_list .point {background-color: var(--main-color);}
.blt_list .fcR {color: #ff0000;}
.blt_list .guide {margin: 10px 0; font-size: 16px;}
.blt_list .mark {padding-left: 20px; margin-top: 20px;}
.blt_list .mark::before {content: '※';}
.blt_list .mark p {font-size: 16px; margin-top: 5px;}

@media screen and (max-width: 768px) {
    .blt_list {min-height: auto; margin-bottom: 20px;}
    .blt_list li {font-size: 16px;}

    ol.blt_list.icon li {padding-left: 25px;}
    ol.blt_list.icon li::before {
        font-size: 13px;
        width: 18px;
        height: 18px;
        line-height: 20px;
    }

    .blt_list.line {margin-bottom: 0;}
    .blt_list.line li {padding: 10px 0 10px 12px;}

    .blt_list .guide {margin: 5px 0; font-size: 15px;}
    .blt_list .mark p {font-size: 15px;}
}

.img_list {display: flex; margin-top: 30px;}
.img_list li:not(:last-child) {margin-right: 20px;}
.img_list p {text-align: center; font-size: 14px; line-height: 130%; margin-top: 10px;}

@media screen and (max-width: 768px) {
    .img_list {flex-wrap: wrap; max-width: 400px; margin: 30px auto 0;}
    .img_list li {width: calc((100% - 15px) / 2);}
    .img_list li:nth-child(2n) {margin-right: 0;}
    .img_list li:nth-child(2n + 1) {margin-right: 15px;}
    .img_list li:nth-child(n + 3) {margin-top: 20px;}
    .img_list p {font-size: 13px; margin-top: 5px;}
}

.dot_list {display: flex;}
.dot_list li {
    /* border: 2px dotted #000; */
    margin: 0 20px;
    position: relative;
    width: 100%;
}
/* .dot_list .ex::after,
.dot_list .text::after,
.dot_list .img::after {
    content: '예시';
    width: 65px;
    height: 65px;
    line-height: 65px;
    text-align: center;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 50%;
    font-size: 15px;
    position: absolute;
    right: -25px;
    top: -25px;
    z-index: 100;
}
.dot_list .text::after {content: '텍스트';}
.dot_list .img::after {content: '이미지';} */

.dot_list + .flex {margin-top: 40px;}
.dot_list + .flex > * {margin: 0 20px;}

@media screen and (max-width: 1260px) {
    .dot_list li {margin: 0 15px;}
    .dot_list .ex::after,
    .dot_list .text::after,
    .dot_list .img::after {
        right: -20px;
    }

    .dot_list + .flex > * {margin: 0 15px;}
}
@media screen and (max-width: 768px) {
    .dot_list li {margin: 0 10px;}
    .dot_list .ex::after,
    .dot_list .text::after,
    .dot_list .img::after {
        width: 55px;
        height: 55px;
        line-height: 55px;
        right: -15px;
        top: -20px;
        font-size: 13px;
    }

    .dot_list + .flex {margin-top: 25px; flex-direction: row; align-items: center;}
    .dot_list + .flex > * {margin: 0 10px;}
}
@media screen and (max-width: 600px) {
    .dot_list {flex-wrap: wrap; max-width: 350px; margin: 0 auto;}
    .dot_list li {margin: 0;}
    .dot_list li + li {margin-top: 5px;}

    .dot_list + .flex {flex-direction: column; align-items: flex-start;}
    .dot_list + .flex > * {margin: 0 auto;}
}

.step_list {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 150px;
    counter-reset: number 0;
    max-width: 500px;
    margin: 0 auto;
}
.step_list li {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color);
    color: #fff;
    font-size: 18px;
    position: relative;
    line-height: 110%;
    word-break: keep-all;
    text-align: center;
}
.step_list li::before {
    content: '';
    width: calc(100% + 100px);
    border-bottom: 2px dashed #000;
    position: absolute;
    left: -100px;
    bottom: 0;
}
.step_list li::after {
    counter-increment: number 1;
    content: counter(number);
    font-size: 15px;
    background-color: var(--main-color);
    border-radius: 50%;
    position: absolute;
    left: -100px;
    bottom: -11px;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 24px;
}

.step_list.type2 {
    max-width: none;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
}
.step_list.type2 li {
    height: 50px;
    width: calc((100% - 20px) / 3);
    background-color: #000;
}
.step_list.type2 li:not(:nth-child(3n)) {margin-right: 10px;}
.step_list.type2 li:nth-child(n + 4) {margin-top: 10px;}
.step_list.type2 li::before {display: none;}
.step_list.type2 li::after {left: -5px; top: -7px;}

.step_list + .blt_list {margin-top: 20px;}

/* 전시용 */
.yellow .step_list li {color: #000;}
.yellow .step_list li::after {background-color: #000; color: #fff;}
.yellow .step_list.type2 li {color: #fff;}
.yellow .step_list.type2 li::after {background-color: var(--main-color); color: #000;}

@media screen and (max-width: 1260px) {
    .step_list {padding-left: 120px;}
    .step_list li::before {left: -90px; width: calc(100% + 90px);}
    .step_list li::after {left: -90px;}
}
@media screen and (max-width: 768px) {
    .step_list {max-width: 350px; padding-left: 70px; margin: 0 auto;}
    .step_list li {font-size: 16px; height: 40px;}
    .step_list li::before {left: -70px; width: calc(100% + 70px); border-width: 1px;}
    .step_list li::after {
        font-size: 13px;
        width: 18px;
        height: 18px;
        line-height: 20px;
        left: -70px;
        bottom: -9px;
    }

    .step_list.type2 li {height: 40px; width: calc((100% - 16px) / 3);}
    .step_list.type2 li:not(:nth-child(3n)) {margin-right: 8px;}
    .step_list.type2 li:nth-child(n + 4) {margin-top: 8px;}
    .step_list.type2 li::after {left: -3px; top: -5px;}

    .step_list + .blt_list {margin-top: 10px;}
}
@media screen and (max-width: 425px) {
    .step_list {padding-left: 50px;}
    .step_list li::before {left: -50px; width: calc(100% + 50px);}
    .step_list li::after {left: -50px;}
}

.guide {
    padding-left: 26px;
    margin-top: 20px;
    background: url('../img/banner/icon_guide.png') left 2px / 20px no-repeat;
}
.guide + .guide {margin-top: 10px;}

.guide.type2 {background: url('../img/banner/icon_guide2.png') left 3px / 20px no-repeat; font-size: 18px;}

@media screen and (max-width: 768px) {
    .guide {
        padding-left: 24px;
        margin-top: 15px;
        font-size: 15px;
        background-size: 18px;
        background-position: left 1px;
    }
    .guide + .guide {margin-top: 5px;}

    .guide.type2 {font-size: 16px; background-size: 18px; background-position: left 3px;}
}
/* --list */
/*-- content */