@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* 초기화 */
html,
body {
    height: 100%;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

html {
    overflow-y: scroll
}

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

html,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
img {
    margin: 0;
    padding: 0;
    border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
td {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    line-height: 1.4;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

ul,
ol,
li {
    margin: 0;
    padding: 0;
    list-style: none
}

legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden
}

label,
input,
button,
select,
img {
    vertical-align: middle
}

input,
button {
    margin: 0;
    padding: 0;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1em
}

button {
    cursor: pointer
}

textarea,
select {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1em
}

select {
    margin: 0
}

p {
    margin: 0;
    padding: 0;
}

hr {
    display: none
}

pre {
    overflow-x: scroll;
    font-size: 1.1em
}

a:link,
a:visited {
    color: #000;
    text-decoration: none;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

a:hover,
a:focus,
a:active {
    color: #000;
    text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    display: table;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9;
    /* ie8 */
}

.mon {
    font-family: "Montserrat", sans-serif;
}

.w_1320 {
    max-width: 1320px;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

.flex {
    display: flex;
}

.blind {
    display: none;
}

.con {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
}

@media screen and (max-width: 1320px) {
    .w_1320 {
        padding: 0 20px;
    }

    .con {
        padding: 0 20px;
    }
}

:root {
    --color-primary: #0a1e5a;
    --color-primary-rgb: 10 30 90;
    --color-primary-dark: #1a1a1a;
    --color-point: #0066ff;
    --color-point-rgb: 250 0 45;
    --color-light: #fff;
    --color-light-rgb: 255 255 255;
    --color-header-bg: rgba(0, 0, 0, .6);
    --color-blue-2: #005abb;
    --color-blue-3: #0189ff;
    --color-blue-4: #e5ecf9;
    --color-blue-5: #f1f4fb;
    --color-red-2: #b10b49;
    --color-red-3: #fdebef;
    --color-gray-1: #000;
    --color-gray-1-rgb: 0 0 0;
    --color-gray-2: #666;
    --color-gray-3: #767676;
    --color-gray-4: #e1e1e1;
    --color-gray-5: #dadada;
    --color-gray-6: #E0E0E0;
    --color-gray-7: #f0f0f0;
    /*     --color-gray-8: #f5f5f5; */
    --color-gray-8: #f4f6f8;
    */ --color-gray-9: #fafafa;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 10px;
    bottom: 10px;
    z-index: 996;
    background: #fff;
    width: 60px;
    height: 60px;
    transition: all 0.4s;
    border-radius: 50%;
    border: 1px solid #efefef;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
}

.back-to-top i {
    font-size: 34px;
    color: var(--color-point);
    line-height: 0;
}

.back-to-top:hover i {
    color: #fff;
}

.back-to-top:hover {
    background: var(--color-point);
    color: #fff;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
    border: 1px solid var(--color-point);
}

@media screen and (max-width: 768px) {
    .back-to-top {
        width: 50px;
        height: 50px;
    }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    background: #fff;
    transition: all 0.5s;
    z-index: 997;
    border-bottom: 1px solid #eee;
}

e #header:after {
    content: none;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 160px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.27)), color-stop(39%, rgba(0, 0, 0, 0.27)), to(rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.27) 0, rgba(0, 0, 0, 0.27) 39%, rgba(0, 0, 0, 0) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.27) 0, rgba(0, 0, 0, 0.27) 39%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.27) 0, rgba(0, 0, 0, 0.27) 39%, rgba(0, 0, 0, 0) 100%);
    background: url('/img/law-header-bg2.png');
}

#header .nav__bg.on {
    height: 316px;
    border-bottom: 1px solid rgba(156, 156, 156, 0.25);
    border-top: 1px solid rgba(156, 156, 156, 0.25);
    transition: height .3s, background-color .2s, top .3s;
}

#header .nav__bg {
    position: absolute;
    top: 136px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 0;
    background-color: #f7f7f7;
    transition: 0.4s;
}

#header .t_menu_wrap {
    color: #777
}

#header .logo {
    width: 134px;
    height: 53px;
    background: url('../img/t_logo.png') no-repeat;
    position: absolute;
    transition: 0.3s;
    margin: 20px 0 0 0;
    z-index: 99;
    background-size: contain;
    cursor: pointer;
}

#header .logo a {
    color: #fff;
    cursor: pointer;
    position: absolute;
    font-size: 1.4rem;
    font-weight: 900;
    font-size: 0;
    display: block;
    width: 134px;
    height: 53px;
}

#header .logo img {
    max-height: 40px;
}

#header .t_menu {
    z-index: 99;
    transition: 0.3s;
    display: flex;
    justify-content: right;
    height: 40px;
    align-items: center;
}

#header .t_menu>div {
    margin-left: 5px;
    padding: 4px 0;
}

#header .t_menu a {
    font-size: 14px;
    color: #777;
    padding: 7px 12px 8px 12px;
}

#header.header-scrolled,
#header.header-inner-pages {
    color: #000;
    background: rgba(256, 256, 256, 1);
    padding: 0;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 1%), 0 2px 10px 0 rgb(0 0 0 / 3%)
}

#header.header-scrolled:after {
    background: #fff;
    color: #000;
    height: auto;
}

#header.header-scrolled .nav__bg {
    top: 76px
}

#header.header-scrolled .nav__bg.on {}

#header.header-scrolled .logo {
    height: 40px;
}

#header.header-scrolled .t_menu {
    height: 0;
    line-height: 0;
    transition: 0.3s;
}

#header.header-scrolled .t_menu a {
    color: #999999;
}

@media (max-width: 970px) {
    #header {
        padding: 26px 0;
    }

    #header.header-scrolled .logo {}

    #header.header-scrolled,
    #header.header-inner-pages {
        padding: 16px 0;
    }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.pc-menu {
    width: 100%;
    margin: 0 auto;
    max-width: 960px;
    z-index: 99999999;
    padding: 0;
}

.pc-menu ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    list-style: none;
    justify-content: flex-start;
    align-items: center;
}

.pc-menu>ul>li {
    width: calc(100% / 5);
}

.pc-menu li {
    position: relative;
}

#header.header-scrolled .gnb__list--dep01>a {
    color: #000;
    line-height: 4.1;
}

.gnb__list--dep01>a {
    position: relative;
    color: #fff;
    text-align: center;
    transition: 0.24s;
}

.gnb__list--dep01>a {
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    line-height: 1.3333333333;
    text-align: center;
    transition: 0.24s;
}

.gnb__list--dep01>a::before {
    background-color: var(--color-point);
    bottom: 0px;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    transition: all .3s ease-in-out;
    ;
    width: 0;
}

#header.header-scrolled .gnb__list--dep01>a::before {
    bottom: 0;
}

.gnb__list--dep01.line a::before {
    left: 0;
    width: 100%
}

.gnb__item--dep02 a:hover {
    color: var(--color-point);
}

.gnb__list--dep02 {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s;
    flex-direction: column;
    height: 314px;
    border-left: 1px solid rgba(156, 156, 156, 0.25);
    ;
}

.gnb__list--dep02 a {
    font-size: 15px;
    color: #000;
}

.gnb__list--dep02.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.gnb__list--dep01>a.w150 {
    width: 120px;
}

.gnb__list--dep01>a,
.gnb__list--dep01>a:focus {
    padding: 0 10px;
    position: relative;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    transition: 0.3s;
    line-height: 5;
}

.gnb__list--dep01>a:hover {}

li.gnb__item--dep02:first-child {
    padding-top: 20px;
}

.gnb__item--dep02 {
    display: block;
    width: 100%;
}

.gnb__item--dep02 a {
    font-size: 16px;
    padding: 5px 0;
    display: block;
    text-align: center;
}

.pc-menu a i,
.pc-menu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    display: none;
}

#header.on {
    background: #fff;
    border-bottom: 1px solid #efefef;
}

#header.on .gnb__list--dep01>a,
#header.on .logo {}

@media (max-width: 1440px) {
    .pc-menu {
        display: none;
    }
}

/**
* Mobile Navigation 
*/
#header .logo_m {
    display: none;
}

/*상단 메뉴버튼*/
.mobile-nav-toggle {
    color: #fff;
    padding: 1rem;
    font-size: 40px;
    cursor: pointer;
    display: block;
    text-align: center;
    transition: 0.3s;
    line-height: 40px
}

.header-scrolled .mobile-nav-toggle {}

.header-scrolled .mobile-nav-toggle.bi-x {
    color: #fff;
}

.mobile-nav-toggle.bi-x {
    color: #fff;
    font-size: 34px;
    cursor: pointer;
    display: block;
    text-align: center;
    transition: 0.3s;
    line-height: 34px;
    padding: 0;
}

.SiteMap_btn {
    background: url('../img/menu.svg') no-repeat;
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 99;
    cursor: pointer;
    display: block;
    background-position: center;
}

.header-scrolled .SiteMap_btn {
    top: 20px;
    transition: 0.2s;
}

.header-scrolled .mobile-nav-toggle {}

#header.header-scrolled .t_menu_wrap {
    line-height: 0;
    height: 0;
    transition: 0.2s;
    display: none;
}

@media screen and (max-width: 1440px) {
    #header {
        padding: 0;
        height: 60px;
    }

    #header .logo {
        width: 81px;
        height: 32px;
        background-size: contain;
        margin: 14px 0 0 -5px;
        transition: 0.3s;
    }

    #header .t_menu_wrap {
        display: none;
    }

    .SiteMap_btn {
        top: 10px;
        right: 15px;
    }

    #header.header-scrolled .logo {}

    .mobile-nav-toggle {
        font-size: 30px;
        padding: 1rem;
    }
}

@media screen and (max-width: 970px) {
    #header {
        padding: 0;
    }

    #header.header-scrolled .logo {}

    #header.header-scrolled,
    #header.header-inner-pages {
        padding: 0
    }

    .main-visual-txt {
        width: 90%;
        margin: 0 auto;
        word-break: keep-all;
    }

    /* .mobile-nav-toggle {display: block;} */
    .bi-list {
        color: #fff;
    }

    .bi-x {
        color: #fff;
    }

    .header-scrolled .SiteMap_btn {
        top: 10px
    }
}

@media screen and (max-width: 640px) {}

/*--------------------------------------------------------------
# site-map
--------------------------------------------------------------*/
.scrollbar {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    /*  */
}

/* 스크롤바의 폭 너비 */
.scrollbar::-webkit-scrollbar {
    width: 0px;
}

.scrollbar::-webkit-scrollbar-thumb {
    background: rgba(220, 20, 60);
    /* 스크롤바 색상 */
    border-radius: 10px;
    /* 스크롤바 둥근 테두리 */
}

.scrollbar::-webkit-scrollbar-track {
    background: rgba(220, 20, 60, .1);
    /*스크롤바 뒷 배경 색상*/
}

.modal-open {
    overflow: hidden;
    height: 100vh;
}

.SiteMap {
    display: none;
}

.SiteMap .sitemap_wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    width: 1320px;
    max-width: 100%;
    margin: 0 auto;
}

#m_gnb {
    background: #f8f8f8;
    padding: 50px;
}

.x_btn_wrap {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    top: 60px;
}

.SiteMap_x-btn {
    background: #000;
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 9999;
    cursor: pointer;
    width: 34px;
    height: 34px;
}

.modal-open .SiteMap {
    display: block;
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    background-position: right bottom -70px;
}

.SiteMap a:link,
.SiteMap a:visited {
    color: #777;
}

.SiteMap .tit {
    padding: 20px 0 20px 0;
    margin-bottom: 46px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #e1e1e1;
    ;
}

.SiteMap h2 {
    font-size: 60px;
    color: #000;
    font-weight: 700;
    letter-spacing: -1px;
}

.SiteMap h2 b {
    color: var(--color-point);
}

.SiteMap.open {
    display: block;
}

.SiteMap .sitemap_wrap .s_t_menu ul {
    display: flex;
}

.SiteMap .sitemap_wrap .s_t_menu ul li:nth-child(2) {
    margin-right: 6px;
}

.SiteMap .sitemap_wrap .s_t_menu ul li:nth-child(3) {
    margin-right: 8px;
}

.SiteMap .sitemap_wrap .s_t_menu a {
    font-size: 18px;
    padding: 7px 12px 8px 12px;
}

@media (max-width: 1320px) {
    .SiteMap .sitemap_wrap {
        display: block;
    }

    .SiteMap .sitemap_wrap .t_menu {
        position: absolute;
        right: 74px;
    }

    .SiteMap .tit {
        padding: 0 0 0 0;
        height: 110px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        ;
    }

    .SiteMap .sitemap_wrap .s_t_menu ul {
        align-items: center;
        height: 50px;
    }

    .SiteMap .tit .s_t_menu {
        background: #efefef;
        width: 100%;
        height: 60px;
    }

    .SiteMap .sitemap_wrap .s_t_menu a {
        font-size: 14px;
    }

    .SiteMap_x-btn {
        right: 15px;
    }

    .SiteMap .tit .sitemap_logo {
        width: 81px;
        height: 60px;
        background: url(../img/t_logo.png) no-repeat;
        background-size: contain;
        margin: 14px 0 0 15px;
    }

    .SiteMap .tit h2 {
        font-size: 0;
    }

    .SiteMap .tit a {
        font-size: 14px;
    }

    .SiteMap .tit .m_sangju {
        margin-right: 50px;
    }
}

@media screen and (max-width: 1200px) {
    .SiteMap {
        height: auto;
    }

    .SiteMap .w_1200 {
        justify-content: start;
    }

    .modal-open .SiteMap {
        overflow-y: scroll;
        position: relative;
    }

    #m_gnb {
        padding: 0;
    }

    .x_btn_wrap {
        top: 0
    }

    .head_wrap.w_1320 {
        padding: 0;
    }
}

@media screen and (max-width: 970px) {
    .head_wrap.w_1320 {
        width: 100%;
        padding: 0;
    }
}

/*sitemap_ 모바일메뉴_아래로 슬라이드*/
@-webkit-keyframes arrow-slide {
    0% {}

    100% {
        -webkit-transform: rotate(225deg);
        z-index: 3
    }
}

@-webkit-keyframes arrow-slide1 {
    0% {}

    100% {
        -webkit-transform: rotate(225deg);
        z-index: 3
    }
}

#m_gnb>ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#m_gnb>ul>li {
    padding: 8px 10px;
    width: 100%;
    position: relative;
}

#m_gnb>ul>li a {
    display: block;
    font-size: 30px;
    color: #777;
    font-weight: 800;
}

#m_gnb>ul>li a:hover {
    color: #0066ff;
}

#m_gnb .tnb {
    background: #0f4c7d;
    width: 86%;
    margin: 0px auto;
    padding: 5px;
    text-align: center;
}

#m_gnb ul>li>ul.active {
    display: block;
}

#m_gnb ul>li>ul>li {
    font-size: 13px;
    padding: 5px 0
}

#m_gnb ul>li>ul>li a {
    font-size: 16px;
    display: inline-block;
    background: linear-gradient(to top, #f5f9ff 100%, transparent 0) no-repeat left bottom 3px;
    transition: all .3s ease-in-out;
    background-size: 0 7px;
    color: #777;
    font-weight: 400;
}

#m_gnb ul>li>ul>li a:active,
#m_gnb ul>li>ul>li a:focus,
#m_gnb ul>li>ul>li a:hover {
    background-size: 100% 7px;
    font-weight: 700;
    font-weight: 400;
}

#m_gnb .close_btn_box {
    position: absolute;
    right: 0
}

#m_gnb .close_btn_box .close_btn {
    display: block;
    padding: 20px;
    background: #f5f5f5;
}

.gw-nav-list span {
    font-size: 20px;
    margin-bottom: 30px;
    display: block;
}

#m_gnb>ul>li>a {
    padding: 10px 0;
    margin-bottom: 10px;
    color: #000;
    line-height: 1.4;
}

@media screen and (min-width: 1321px) {
    .arrow-up.active {
        display: block !important;
        height: 100% !important;
    }

    .gw-submenu {
        display: block !important;
        height: 100% !important;
    }
}

@media screen and (max-width: 1320px) {
    #m_gnb {
        background: #fff;
        padding: 0;
    }

    #m_gnb>ul {
        display: block;
    }

    #m_gnb>ul>li {
        border-bottom: 1px solid hsla(0, 0%, 85%, .1);
        padding: 0px 15px;
        border-bottom: 1px solid #eee;
    }

    #m_gnb>ul>li>a {
        padding: 20px 0;
        margin-bottom: 0;
        font-size: 20px;
    }

    #m_gnb ul>li>ul {
        display: none;
        padding: 10px 20px;
        background: #f7f7f7;
    }

    #m_gnb ul>li>ul>li a:active,
    #m_gnb ul>li>ul>li a:focus,
    #m_gnb ul>li>ul>li a:hover {
        background-size: 0;
    }

    #m_gnb>ul>li {}

    .gw-nav-list span {
        margin-bottom: 0;
        padding: 16px 0;
        font-size: 18px
    }

    .gw-nav-list>li.arrow-down:after {
        content: '';
        width: 7px;
        height: 7px;
        position: absolute;
        right: 10px;
        top: 25px;
        border-top: 1px solid #bababa;
        border-left: 1px solid #bababa;
        -webkit-transform: rotate(45deg);
        -webkit-animation: arrow-slide .5s 0s ease both;
    }

    .gw-nav-list>li.init-arrow-down:after {
        content: '';
        width: 7px;
        height: 7px;
        position: absolute;
        right: 10px;
        top: 25px;
        border-right: 1px solid #bababa;
        border-bottom: 1px solid #bababa;
        -webkit-transform: rotate(45deg);
    }

    .gw-nav-list>li.arrow-up:after {
        content: '';
        width: 7px;
        height: 7px;
        position: absolute;
        right: 10px;
        top: 25px;
        border-right: 1px solid #bababa;
        border-bottom: 1px solid #bababa;
        -webkit-transform: rotate(45deg);
        -webkit-animation: arrow-slide1 .5s 0s ease both;
    }

    .gw-nav-list>li.init-arrow-up:after {
        content: '';
        width: 7px;
        height: 7px;
        position: absolute;
        right: 10px;
        top: 25px;
        border-top: 1px solid #bababa;
        border-left: 1px solid #bababa;
        -webkit-transform: rotate(45deg);
    }
}

@media screen and (max-width: 970px) {
    #footer .c1 .call {
        display: none;
    }

    #footer .ft_nav ul {
        flex-direction: column;
        flex-direction: row;
        justify-content: flex-start;
    }

    #footer .ft_nav ul li a {
        padding: 0 10px;
        margin-right: 15px;
    }
}

/* button style*/
a.btn_s_01 {
    background: #0b4da3;
    border: 1px solid #0b4da3;
    border-radius: 4px;
    color: #fff !important;
}

a.btn_s_02 {
    background: #fff;
    border: 1px solid var(--color-point);
    border-radius: 4px;
    color: var(--color-point) !important
}

a.btn_s_03 {
    position: relative;
    color: var(--color-point) !important;
}

a.btn_s_03::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 5px;
    height: 5px;
    background: var(--color-point);
    border-radius: 20px;
}

a.btn_s_04 {
    background: #0b4da3;
    border: 1px solid #0b4da3;
    border-radius: 4px;
    color: #fff !important;
    padding: 8px 20px;
    font-size: 14px;
    display: inline-block;
}



/*--------------------------------------------------------------
# 메인
--------------------------------------------------------------*/
/* main contents 공통 */
.main_wrap {
    color: #555;
    font-size: 17px;
    margin-top: 133px;
    word-break: keep-all;
}

/* main contents con1*/
.main_wrap .con1 {
    padding: 60px 0;
    background: #f5f9ff
}

.main_wrap .con1 .main_bn {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.main_wrap .con1 .mv_tit {
    font-size: 50px;
    font-weight: 800;
    color: #000;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-top: 20px;
}

.main_wrap .con1 .mv_tit b {
    color: #0066ff;
}

.main_wrap .con1 .mv_stit {
    margin-top: 10px;
    margin-bottom: 10px;
}

.main_wrap .con1 .mv_stit span {
    color: #0066ff;
    text-underline-offset: 7px;
    text-decoration-line: underline;
}

.main_wrap .main_bn {
    z-index: 2
}

.main_wrap .con1 {
    position: relative
}

.main_wrap .con1 .obj {
    width: 100%;
}

.main_wrap .con1 .obj>i {
    overflow: hidden;
    position: absolute;
    z-index: 1
}

.main_wrap .con1 .particle_1 {
    top: 0%;
    left: -100px;
    width: 401px;
    height: 390px;
    background: url('/img/particle1.png') left top / cover no-repeat;
}

.main_wrap .con1 .particle_2 {
    top: -100px;
    right: 0;
    width: 229px;
    height: 390px;
    background: url('/img/particle2.png') right top / cover no-repeat;

}

.main_wrap .con1 .particle_3 {
    top: 50%;
    left: 0%;
    width: 406px;
    height: 532px;
    background: url('/img/particle3.png') left/cover no-repeat;
}

.main_wrap .con1 .particle_4 {
    bottom: 0%;
    right: 0%;
    width: 353px;
    height: 253px;
    background: url('/img/particle4.png') right/cover no-repeat;
}


.half_wrap .bnt_wrap {
    width: 100%;
    max-width: 260px;
    height: 60px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.075em;
    position: relative;
    text-align: center;
}

.half_wrap .btn {
    width: 100%;
    max-width: 260px;
    height: 60px;
    border-radius: 2px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.075em;
    position: relative;
    text-align: center;
}

.half_wrap .btn a {
    color: #fff;
    line-height: 45px;
}

.half_wrap .btn02 {
    border: 1px solid #0066ff;
    background: #0066ff;
    color: #fff;
    margin-left: 12px;
    transition: all 1s;
}

.half_wrap .btn02:hover span {
    transition: all .8s;
    margin-left: -60px;
}

.half_wrap .btn02:hover:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 15px;
    height: 11px;
    background: url(../img/arr_right_wh.png) no-repeat;
}

.half_wrap .btn01 {
    border: 1px solid #004aab;
    background: #004aab;
    color: #fff;
    transition: all 1s;
}

.half_wrap .btn01:hover span {
    transition: all .8s;
    margin-left: -60px;
}

.half_wrap .btn01:hover:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 15px;
    height: 11px;
    background: url(../img/arr_right_wh.png) no-repeat;
}

.half_wrap {
    box-sizing: border-box;
    margin: 12px auto 0;
    max-width: 560px;
    width: 100%;
}

/*main_Swiper*/
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper .mv01 {
    padding: 30px 80px;
}

/* main contents con2*/
.main_wrap .con2 {
    padding: 160px 0 0 0;
    position: relative;
    background: url('../img/main_con2_bg.png') no-repeat;
    background-position: top 90px center;
    z-index: 2
}

.main_wrap .con2 .bg_txtbox {
    font-size: 200px;
    color: #e7effd;
}

.main_wrap .con2 .tit_wrap {
    text-align: center;
    font-size: 40px;
    color: #000;
    letter-spacing: -0.5px;
    margin-bottom: 50px;
}

.main_wrap .con2 .tit_wrap .tit {
    font-weight: 800;
}

.main_wrap .con2 .tit_wrap .tit b {
    color: #0066ff;
}

.main_wrap .con2 .tit_wrap .s_tit {
    font-size: 18px;
    color: #666;
}

.main_wrap .con2 .plus_wrap i {
    width: 15px;
    height: 11px;
    background: url(../img/arr_right.png) no-repeat;
    display: block;
}

.main_wrap .con2 ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1em;
    z-index: 2;
}

.main_wrap .con2 ul a {
    font-size: 15px;
}

.main_wrap .con2 ul a h3 {
    font-size: 26px;
    margin-bottom: 20px;
    color: #0066ff;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.main_wrap .con2 ul li {
    position: relative;
    min-height: 270px;
}

.main_wrap .con2 ul li .txt {
    padding: 45px 30px;
}

.main_wrap .con2 ul li:hover {
    border: 1px solid #0066ff;
    transition: .2s;
}

.main_wrap .con2 ul li p {
    max-width: 200px;
    color: #777;
}

.main_wrap .con2 ul li {
    background: #ffff;
    border: 1px solid #c9deff;
}

.main_wrap .con2 ul li:nth-child(1) {
    background: url('../img/main_con2_ico1.png') no-repeat #fff;
    background-position: right 35px bottom 35px;
}

.main_wrap .con2 ul li:nth-child(2) {
    background: url('../img/main_con2_ico2.png') no-repeat #fff;
    background-position: right 35px bottom 35px;
}

.main_wrap .con2 ul li:nth-child(3) {
    background: url('../img/main_con2_ico6.png') no-repeat #fff;
    background-position: right 35px bottom 35px;
}

.main_wrap .con2 ul li:nth-child(4) {
    background: url('../img/main_con2_ico5.png') no-repeat #fff;
    background-position: right 35px bottom 35px;
}

.main_wrap .con2 ul li:nth-child(5) {
    background: url('../img/main_con2_ico4.png') no-repeat #fff;
    background-position: right 35px bottom 35px;
}

.main_wrap .con2 ul li:nth-child(6) {
    background: url('../img/main_con2_ico3.png') no-repeat #fff;
    background-position: right 35px bottom 35px;
}

.main_wrap .con2 ul li:nth-child(7) {
    background: url('../img/main_con2_ico7.png') no-repeat #fff;
    background-position: right 35px bottom 35px;
}

.main_wrap .con2 ul li:nth-child(8) {
    background: url('../img/main_con2_ico8.png') no-repeat #fff;
    background-position: right 35px bottom 35px;
}

.main_wrap .con2 ul li .img {
    overflow: hidden;
    border-radius: 4px;
}

.main_wrap .con2 ul li:hover .img {
    position: relative;
}

.main_wrap .con2 ul li:hover .img::after {
    background: rgba(0, 0, 0, 0.6);
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.main_wrap .con2 .plus_wrap {
    margin-top: 20px;
    position: absolute;
    bottom: 58px;
}

.main_wrap .con2 ul li:hover .btn-plus__icon {
    transform: translate(-50%, -50%) rotate(-180deg)
}

.main_wrap .con2 .btn_wrap {
    margin: 0 auto;
    padding: 50px 0;
    text-align: center;
}

.main_wrap .con2 .btn_black a {
    color: #fff;
    line-height: 45px;
}

.main_wrap .con2 .btn_black {
    border: 1px solid #000;
    background: #000;
    color: #fff;
    transition: all 1s;
}

.main_wrap .con2 .btn_black:hover span {
    transition: all .8s;
    margin-left: -60px;
}

.main_wrap .con2 .btn_black:hover:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 15px;
    height: 11px;
    background: url(../img/arr_right_wh.png) no-repeat;
}

.main_wrap .con2 .btn {
    width: 100%;
    max-width: 260px;
    height: 60px;
    border-radius: 2px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.075em;
    position: relative;
    text-align: center;
}

/* main contents con3*/
.main_wrap .con3 {
    padding: 100px 0;
}

.main_wrap .con3 .flex {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.main_wrap .con3 .call_center {
    width: 310px;
    line-height: 1.4;
}

.main_wrap .con3 .call_center .logo {
    margin-bottom: 20px;
}

.main_wrap .con3 .call_center .s_txt {
    font-size: 18px;
}

.main_wrap .con3 .call_center .call {
    font-size: 36px;
    font-weight: 800;
    padding: 10px 0 6px 0;
    color: #0066ff;
}

.main_wrap .con3 .call_center p {
    font-size: 15px;
    color: #777
}

.main_wrap .con3 .service_wrap {
    width: 100%;
    max-width: 910px;
}

.main_wrap .con3 .service_wrap .tit {
    font-size: 18px;
    font-weight: 700;
    color: #0066ff;
    padding: 10px 16px;
    border: 1px solid #0066ff;
    border-radius: 50px;
    display: inline-block;
}

.main_wrap .con3 .service_wrap .list {
    margin-top: 30px;
    text-align: center;
}

.main_wrap .con3 .service_wrap .list .ico {
    border-radius: 50%;
    width: 113px;
    height: 113px;
    margin: 0 auto;
}

.main_wrap .con3 .service_wrap .list a .ico:hover {
    border: 1px solid #c9deff;
}

.main_wrap .con3 .service_wrap .list p {
    margin-top: 16px;
}

.main_wrap .con3 .service_wrap .list .list01 .ico {
    background: url('../img/main_con3_ico1.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list02 .ico {
    background: url('../img/main_con3_ico2.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list03 .ico {
    background: url('../img/main_con3_ico3.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list04 .ico {
    background: url('../img/main_con3_ico4.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list05 .ico {
    background: url('../img/main_con3_ico5.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list06 .ico {
    background: url('../img/main_con3_ico6.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list07 .ico {
    background: url('../img/main_con3_ico7.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list08 .ico {
    background: url('../img/main_con3_ico8.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list09 .ico {
    background: url('../img/main_con3_ico9.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list10 .ico {
    background: url('../img/main_con3_ico10.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list11 .ico {
    background: url('../img/main_con3_ico11.png') no-repeat #f5f9ff;
    background-position: center;
}

.main_wrap .con3 .service_wrap .list .list12 .ico {
    background: url('../img/main_con3_ico12.png') no-repeat #f5f9ff;
    background-position: center;
}

.bx-wrapper {
    border: 0;
    box-shadow: none;
    margin-bottom: 0;
}

.bx-viewport {
    height: auto !important;
}

.main_wrap .con3 .bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 42%;
    outline: 0;
    text-indent: -9999px;
    z-index: -99;
    font-size: 0px;
    background: none;
    width: 50px;
    height: 50px;
}

.main_wrap .con3 .bx-wrapper .bx-pager {
    bottom: 30px;
}

.main_wrap .con3 .bx-wrapper .bx-controls-direction a.bx-prev {
    left: -40px
}

.main_wrap .con3 .bx-wrapper .bx-controls-direction a.bx-prev::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 2px solid #aaa;
    border-left: 2px solid #aaa;
    transform: rotate(315deg);
    border-radius: 1px;
    margin: 8px 0 0 13px;
}

.main_wrap .con3 .bx-wrapper .bx-controls-direction a.bx-next {
    right: -64px
}

.main_wrap .con3 .bx-wrapper .bx-controls-direction a.bx-next::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 2px solid #aaa;
    border-left: 2px solid #aaa;
    transform: rotate(135deg);
    border-radius: 1px;
    margin: 8px 0 0 13px;
}

/* main contents con4*/
.main_wrap .con4 {
    padding: 100px 0;
}

.main_wrap .con4>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 100px;
}

.main_wrap .con4 .title {
    position: relative;
}

.main_wrap .con4 .title h1 {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    display: inline-block;
    letter-spacing: -1px;
}

.main_wrap .con4 .notice {
    font-size: 16px
}

.main_wrap .con4 .notice ul {
    margin-top: 30px;
}

.main_wrap .con4 .notice ul li {
    padding: 25px 30px;
    margin-bottom: 8px;
    background: #fafafa;
    border-radius: 6px;
}

.main_wrap .con4 .notice ul li .date {
    float: right;
    color: #777;
    ;
}

.main_wrap .con4 .more {
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 14px;
}

.main_wrap .con4 .more i {
    width: 15px;
    height: 11px;
    background: url(../img/arr_right.png);
    margin-left: 5px;
}

.main_wrap .con4 .date_box {
    background: url(../img/main_menu_date.png) no-repeat;
    padding: 11px 10px;
    font-size: 11px;
    font-weight: 600;
    width: 66px;
    height: 64px;
    line-height: 1.2;
    text-align: center;
    border-radius: 6px;
    letter-spacing: -0.5px;
    color: #fff;
    margin-right: 20px;
}

/* main contents con5*/
.main_wrap .con5 {
    background: #0066ff;
}

.main_wrap .con5 .flex {
    justify-content: space-between;
    padding: 60px
}

.main_wrap .con5 .txt {
    font-size: 50px;
    color: #fff;
    font-weight: 700;
    margin-top: 34px;
}

.main_wrap .con5 .s_txt {
    font-size: 20px;
    color: #a3bdff;
    font-weight: 600;
}

.main_wrap .con5 .tit {
    margin-bottom: 16px;
}

.main_wrap .con5 .txt b {
    color: #fadd4e;
    font-weight: 700;
}

.main_wrap .con5 .btn_black a {
    color: #fff;
    display: block;
    height: 60px;
    line-height: 60px;
}

.main_wrap .con5 .btn_black {
    display: inline-block;
    width: 100%;
    max-width: 220px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.075em;
    position: relative;
    text-align: center;
    border: 1px solid #000;
    background: #000;
    color: #fff;
}

/* main contents con6*/
.main_wrap .con6 {
    padding: 100px 0;
    background: #f3faff;
}

.main_wrap .con6 .tit_wrap {
    text-align: center;
    font-size: 40px;
    color: #000;
    letter-spacing: -0.5px;
    margin-bottom: 50px;
}

.main_wrap .con6 .tit_wrap .tit {
    font-weight: 800;
}

.main_wrap .con6 .tit_wrap .tit b {
    color: #0066ff;
}

.main_wrap .con6 .tit_wrap .s_tit {
    font-size: 18px;
    color: #666;
}

.main_wrap .con6 .slider ol {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    px
}

.main_wrap .con6 .slider ol>li {
    border: 1px solid #c9deff;
    padding: 16px;
    text-align: center;
    border-radius: 4px;
    background: #fff;
}

.main_wrap .con6 .slider .bx-wrapper {}

.main_wrap .con6 .bx-wrapper .bx-controls-direction a {
    width: 42px;
    height: 42px;
}

.main_wrap .con6 .bx-wrapper {
    background: none !important;
    max-width: 1220px !important;
    margin: 0 auto;
}

.main_wrap .con6 .bx-wrapper .bx-prev {
    left: -50px;
    background: url('../img/control.png') no-repeat -84px 0
}

.main_wrap .con6 .bx-wrapper .bx-next {
    right: -50px;
    background: url('../img/control.png') no-repeat -126px 0
}

.main_wrap .con6 .bx-wrapper .bx-controls-auto .bx-prev:hover {
    background: url('../img/control.png') no-repeat -84px 0;
    border: 1px solid #ff0000;
}

.main_wrap .con6 .bx-wrapper .bx-controls-direction a:hover.bx-prev {
    background-position: 0px 0;
}

.main_wrap .con6 .bx-wrapper .bx-controls-direction a:hover.bx-next {
    background-position: -42px 0;
}

.main_wrap .con6 .bx-pager {
    display: none !important;
}

.main_wrap .con6 .bx-wrapper img {
    display: inline-block;
}

@media screen and (max-width: 1320px) {
    .main_wrap {
        margin-top: 0;
    }

    .main_wrap .con2 ul li .txt {
        padding: 20px;
    }

    .main_wrap .con2 ul a h3 {
        margin-bottom: 10px;
    }

    .main_wrap .con2 ul li p {
        ;
    }

    .main_wrap .con3 .service_wrap ul {
        gap: 30px;
    }

    .main_wrap .con3 .flex {
        gap: 5%;
    }

    .main_wrap .con3 .call_center {
        width: 25%;
    }

    .main_wrap .con3 .service_wrap {
        width: 70%;
    }

    .main_wrap .con3 .service_wrap .list {
        margin: 30px;
    }

    .main_wrap .con3 .bx-wrapper .bx-controls-direction a.bx-next {
        right: -50px
    }

    .main_wrap .con4>div {
        gap: 40px;
    }

    .main_wrap .con6 .bx-wrapper {
        max-width: 90%;
    }
}

@media screen and (max-width: 970px) {


    .main_wrap .con1 .particle_1 {
        background-size: 60%;
    }

    .main_wrap .con1 .particle_2 {
        background-size: 60%;

    }

    .main_wrap .con1 .particle_3 {
        width: 300px;
        background-size: 40%;


    }

    .main_wrap .con1 .particle_4 {
        background-size: 60%;
        height: 150px;

    }


    .main_wrap .con2 {
        background-size: contain;
    }

    .main_wrap .con2 .tit_wrap {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .main_wrap .con2 .tit_wrap .s_tit {
        font-size: 16px;
    }

    .main_wrap .con2 ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .main_wrap .con2 ul li {
        min-height: 200px;
    }

    .main_wrap .con2 ul li p {
        font-size: 14px;
    }

    .main_wrap .con2 ul li .txt {
        top: 20%
    }

    .main_wrap .con2 ul a h3 {
        font-size: 22px;
    }

    .main_wrap .con3 .service_wrap ul {
        grid-template-columns: repeat(4, 1fr);
    }

    .main_wrap .con3 .flex {
        flex-direction: column;
        gap: 30px
    }

    .main_wrap .con3 .call_center {
        width: 100%;
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, 1fr)
    }

    .main_wrap .con3 .call_center>div {
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 20px;
    }

    .main_wrap .con3 .call_center .s_txt {
        font-size: 15px;
    }

    .main_wrap .con3 .service_wrap {
        width: 100%;
    }

    .main_wrap .con3 .service_wrap .list .ico {
        width: 85px;
        height: 85px;
    }

    .main_wrap .con3 .call_center .logo img {
        width: 140px;
    }

    .main_wrap .con2 .plus_wrap {
        bottom: 20px;
    }

    .main_wrap .con4 {
        padding: 60px 0;
    }

    .main_wrap .con4>div {
        display: block;
    }

    .main_wrap .con4 .notice ul li a {
        font-size: 15px;
    }

    .main_wrap .con4 .title h1,
    .main_wrap .con3 .title h1 {
        font-size: 26px;
    }

    .main_wrap .con4 .movie {
        margin-bottom: 30px;
    }

    .main_wrap .con4 .flex {
        flex-direction: column;
        text-align: center;
    }

    .main_wrap .con4 .tit h1 {
        font-size: 32px;
        display: block;
    }

    .main_wrap .con4 .banners_Wrap {
        width: 100%;
    }

    .main_wrap .con4 .banners_Wrap ul {
        margin-top: 30px;
        justify-content: space-between;
    }

    .main_wrap .con4 .banners_Wrap ul li h3 {
        font-size: 14px;
    }

    .main_wrap .con2 ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .main_wrap .con2 ul li:nth-child(1) {
        background: url('../img/main_con2_ico1.png') no-repeat #fff;
        background-position: right 20px bottom 20px;
        background-size: 40px;
    }

    .main_wrap .con2 ul li:nth-child(2) {
        background: url('../img/main_con2_ico2.png') no-repeat #fff;
        background-position: right 20px bottom 20px;
        background-size: 40px;
    }

    .main_wrap .con2 ul li:nth-child(3) {
        background: url('../img/main_con2_ico3.png') no-repeat #fff;
        background-position: right 20px bottom 20px;
        background-size: 40px;
    }

    .main_wrap .con2 ul li:nth-child(4) {
        background: url('../img/main_con2_ico4.png') no-repeat #fff;
        background-position: right 20px bottom 20px;
        background-size: 40px;
    }

    .main_wrap .con2 ul li:nth-child(5) {
        background: url('../img/main_con2_ico5.png') no-repeat #fff;
        background-position: right 20px bottom 20px;
        background-size: 40px;
    }

    .main_wrap .con2 ul li:nth-child(6) {
        background: url('../img/main_con2_ico6.png') no-repeat #fff;
        background-position: right 20px bottom 20px;
        background-size: 40px;
    }

    .main_wrap .con2 ul li:nth-child(7) {
        background: url('../img/main_con2_ico7.png') no-repeat #fff;
        background-position: right 20px bottom 20px;
        background-size: 40px;
    }

    .main_wrap .con2 ul li:nth-child(8) {
        background: url('../img/main_con2_ico8.png') no-repeat #fff;
        background-position: right 20px bottom 20px;
        background-size: 40px;
    }

    .main_wrap .con5 .flex {
        padding: 30px;
    }

    .main_wrap .con5 .txt {
        font-size: 32px;
    }

    .main_wrap .con5 .s_txt {
        font-size: 18px;
    }

    .main_wrap .con6 .tit_wrap {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .main_wrap .con6 .tit_wrap .s_tit {
        font-size: 16px;
    }

    .main_wrap .con6 .slider ol {
        grid-template-columns: repeat(3, 1fr);
    }

    .main_wrap .con6 .slider ol>li {
        padding: 10px 0;
    }

    .main_wrap .con6 .bx-wrapper .bx-controls-direction a {
        width: 35px;
        height: 35px;
    }

    .swiper .mv01 {
        padding: 30px 0;
    }
}

@media screen and (max-width: 640px) {
    .main_wrap .con2 ul li {
        min-height: 110px;
    }

    .main_wrap .con1 {
        padding: 60px 0 0 0;
    }

    .main_wrap .con1 .mv_tit {
        font-size: 30px;
    }

    .main_wrap .con1 .mv_stit {
        font-size: 16px;
    }

    .main_wrap .con4 .tab_menu {
        font-size: 15px;
    }

    .main_wrap .con4 .notice ul li .date {
        font-size: 13px;
    }

    .main_wrap .con4 .more {
        top: 5px
    }

    .main_wrap .con2 {
        padding: 40px 0;
    }

    .main_wrap .con2 .btn_wrap {
        padding: 30px 0 0 0;
    }

    .main_wrap .con2 ul li {}

    .main_wrap .con2 ul li p {
        display: none
    }

    .main_wrap .con2 ul li .txt {
        top: 30%;
        left: 24px;
    }

    .main_wrap .con2 ul a h3 {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .main_wrap .con2 .plus_wrap {
        margin-top: 10px;
    }

    .main_wrap .con3 .call_center {
        grid-template-columns: repeat(1, 1fr);
    }

    .main_wrap .con3 .call_center .call {
        font-size: 16px;
        padding: 0;
    }

    .main_wrap .con3 .call_center>div {
        display: flex;
        gap: 20px
    }

    .main_wrap .con3 .call_center .logo {}

    .main_wrap .con3 .service_wrap ul {
        gap: 14px;
        padding-top: 10px;
    }

    .main_wrap .con3 .service_wrap ul li {
        font-size: 14px;
    }

    .main_wrap .con3 .call_center p {
        font-size: 14px;
    }

    .main_wrap .con3 .call_center .logo img {}

    .main_wrap .con3 .call_center .s_txt {
        font-size: 14px;
    }

    .main_wrap .con3 .service_wrap ul li .ico {
        height: 60px;
        margin: 12px 0;
    }

    .main_wrap .con3 .service_wrap ul li .ico span {
        width: 28px;
        height: 28px;
    }

    .main_wrap .con3 {
        padding: 30px 0;
    }

    .main_wrap .con3 .service_wrap .list p {
        font-size: 14px;
    }

    .main_wrap .con3 .service_wrap .list .ico {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }

    .main_wrap .con4 .title h1,
    .main_wrap .con3 .title h1 {
        font-size: 18px;
    }

    .main_wrap .con4 {
        padding: 40px 0;
    }

    .main_wrap .con4 .tit h1 {
        font-size: 26px;
        display: block;
    }

    .main_wrap .con4 .notice ul {
        margin-top: 16px;
    }

    .main_wrap .con4 .notice ul li {
        padding: 14px;
        text-align: left;
    }

    .main_wrap .con4 .title {
        text-align-last: left;
    }

    .main_wrap .con4 .banners_Wrap ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .main_wrap .con4 .banners_Wrap ul li {
        ;
        font-size: 14px;
        height: auto;
        padding: 14px;
    }

    .main_wrap .con5 .flex {
        flex-direction: column-reverse;
        padding: 50px 10px;
    }

    .main_wrap .con5 .txt {
        text-align: center;
        font-size: 22px;
        margin-top: 10px;
    }

    .main_wrap .con5 .s_txt {
        font-size: 14px;
    }

    .main_wrap .con5 .img_obj {
        text-align: center;
    }

    .main_wrap .con5 .img_obj img {
        max-width: 240px;
    }

    .main_wrap .con5 .btn_wrap {
        margin: 0 auto;
    }

    .main_wrap .con6 {
        padding: 40px 0;
    }

    .main_wrap .con6 .slider ol {
        gap: 6px;
    }

    .main_wrap .con6 .slider ol>li {
        padding: 6px 0;
    }

    .con6 .bx-controls-direction {
        display: none;
    }

    .half_wrap .btn {
        font-size: 15px;
        height: 50px;
        padding: 0;
        line-height: 50px;
    }

    .main_wrap .con2 .btn {
        font-size: 15px;
        height: 50px;
        padding: 0;
        line-height: 50px;
        max-width: 220px;
    }

    .con3 .bx-wrapper .bx-controls-direction a.bx-next {
        right: -50px
    }
}

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
/*footer*/
#footer {
    color: #999;
    padding: 70px 0 74px 0;
    font-size: 15px;
    background: #18293f;
}

#footer a {
    color: #999;
}

#footer a:hover {}

#footer b {
    color: #fff;
}

#footer .c1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#footer .c1>div {
    display: flex;
}

#footer .c1 .ft_logo2 {
    margin-left: 30px;
}

#footer .c1 .call {
    font-weight: 600;
    font-size: 30px;
    color: #fff;
    letter-spacing: -1px;
}

#footer .c1 .call span {
    margin-right: 5px;
}

#footer .c2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#footer .c2 .sns ul {
    display: flex;
}

#footer .ft_logo a {
    width: 124px;
    height: 53px;
    background: url(../img/b_logo.png) no-repeat;
    background-size: contain;
    ;
    display: block;
}

#footer .ft_logo2 a {
    width: 188px;
    height: 42px;
    background: url(../img/b_logo2.png) no-repeat;
    background-size: contain;
    ;
    display: block;
}

#footer .ft_wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

#footer .ft_nav {
    display: block;
}

#footer .ft_nav ul {
    display: flex;
    flex-wrap: wrap;
}

#footer .ft_nav ul li a {
    padding: 16px 8px;
    display: block;
    font-size: 16px;
    color: #fff;
}

#footer .ft_nav .privacy {
    text-decoration: underline;
    text-underline-offset: 7px;
}

#footer .sns {
    display: flex;
}

#footer .sns li {
    margin-left: 9px;
}

#footer .sns a {
    display: block;
    width: 30px;
}

#footer .sns a img {
    width: 100%;
}

#footer .ft_info_wrap {
    display: flex;
}

#footer .ft_info_wrap .ft_nav li {
    padding: 4px 0;
}

#footer .info_item:first-child {
    width: 100%;
    ;
}

#footer .info_item {
    display: block;
}

#footer .ft_info {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
    width: 720px;
    color: #999;
}

#footer .hfms_company {
    display: inline-block;
}

#footer .hfms_company a {
    padding: 5px 10px;
    font-size: 14px;
    background: #04101f;
    border-radius: 2px;
}

#footer .ft_info b {
    display: inline-block;
    margin-right: 6px;
}

#footer .ft_info .copy {
    width: 100%;
    font-size: 14px;
    margin-top: 10px;
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    margin-top: 25px;
    border-top: 1px solid #3e3e3e
}

.footer__copyright {
    font-size: 14px;
    font-weight: 500;
    color: #7f7f7f
}

/*우측하단 고정 버튼*/
.bottom-nav__chat {
    background: #fbe231;
    border: 0px solid #fbe231;
    box-sizing: border-box;
    margin-top: 6px;
}

.bottom-nav__chat2 {
    background: #004aab;
    border: 0px solid #004aab;
    box-sizing: border-box;
}

@media all and (min-width: 1025px) {
    .bottom-nav {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 99;
    }

    .bottom-nav__chat,
    .bottom-nav__chat2 {
        border-radius: 50%;
    }

    .bottom-nav__chat2 a {
        display: block;
        background: url('../img/icoChat2.svg') no-repeat center / 25px;
        width: 50px;
        height: 50px;
    }

    .bottom-nav__chat a {
        display: block;
        background: url('../img/icoChat.svg') no-repeat center / 25px;
        width: 50px;
        height: 50px;
    }

    .bottom-nav__chat span,
    .bottom-nav__chat2 span {
        display: none;
    }

    .bottom-nav__top {
        background: #fff;
        border: 1px solid #ddd;
        margin-top: 6px;
        box-sizing: border-box;
        border-radius: 50%;
    }

    .bottom-nav__top a {
        display: block;
        background: url('../img/icoArrowTop.svg') no-repeat center / 20px;
        width: 50px;
        height: 50px;
    }

    .bottom-nav__top span {
        display: none;
    }
}

@media all and (max-width: 1024px) {
    .bottom-nav {
        position: fixed;
        right: .6rem;
        bottom: 2rem;
        z-index: 9998;
    }

    .bottom-nav__chat,
    .bottom-nav__chat2 {
        border-radius: 50%;
    }

    .bottom-nav__chat a {
        display: block;
        background: url('../img/icoChat.svg') no-repeat center / 1.5rem;
        width: 2.7rem;
        height: 2.7rem;
    }

    .bottom-nav__chat2 a {
        display: block;
        background: url('../img/icoChat2.svg') no-repeat center / 1.5rem;
        width: 2.7rem;
        height: 2.7rem;
    }

    .bottom-nav__chat span,
    .bottom-nav__chat2 span {
        display: none;
    }

    .bottom-nav__top {
        background: #fff;
        border: 1px solid #eee;
        margin-top: .5rem;
        box-sizing: border-box;
        border-radius: 50%;
    }

    .bottom-nav__top a {
        display: block;
        background: url('../img/icoArrowTop.svg') no-repeat center / 1.2rem;
        width: 2.7rem;
        height: 2.7rem;
    }

    .bottom-nav__top span {
        display: none;
    }
}

@media screen and (max-width: 1320px) {
    #footer .ft_wrap {
        flex-direction: column;
        margin-top: 36px;
    }

    #footer .ft_wrap .ft_logo,
    #footer .ft_wrap .ft_info_wrap {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 970px) {
    #footer .c2 {
        flex-direction: column;
        /* justify-content: center; */
    }

    #footer .ft_logo a {
        width: 90px;
    }

    #footer .ft_logo2 a {
        width: 120px;
    }

    #footer .c1 {
        margin-bottom: 10px;
    }

    #footer .c1 .ft_logo2 {
        margin-left: 20px;
    }

    #footer {
        padding: 40px 0;
    }

    #footer .c1>div {}

    #footer .ft_nav ul {
        padding: 10px 0;
    }

    #footer .ft_nav ul li a {
        padding: 4px 0;
    }

    #footer .sns {
        justify-content: flex-start;
        width: 100%;
        margin-top: 5px;
    }

    #footer .ft_wrap {
        margin-top: 15px;
    }

    #footer .sns li {
        margin-left: 0;
        margin-right: 8px;
    }
}

@media screen and (max-width: 640px) {
    #footer {
        font-size: 13px;
    }

    #footer .ft_nav ul li a {
        margin-right: 15px;
        font-size: 13px;
    }

    #footer .ft_info {
        gap: 4px 6px
    }

    #footer .ft_wrap .ft_logo,
    #footer .ft_wrap .ft_info_wrap {
        margin-bottom: 20px;
    }
}




/*table*/
dl,
ul,
ol,
menu,
li {
    list-style: none;
    padding: 0;
}

dl,
ol,
ul {
    padding: 0;
    margin: 0;
}

#sub_con {
    margin-top: 120px;
    margin-bottom: 80px;
}

#sub_con .sub_wrap {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

.table_comm .w10 {
    width: 10%;
}

.table_comm {
    width: 100%;
    border-top: 2px solid;
    font-size: 18px
}

.table_comm tbody th {
    padding: 0.7em 0.7em 0.7em 0;
    border-bottom: 1px solid #ebebeb;
    color: #000;
    text-align: left;
    vertical-align: top;
    font-weight: 600;
    vertical-align: middle;
}

.table_comm tbody td {
    color: #333;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    min-height: 47px;
    border-bottom: 1px solid #ebebeb;
}

.table_comm .required::after,
.w_container .tit .required::after {
    content: '';
    display: inline-block;
    position: relative;
    top: -1px;
    width: 5px;
    height: 5px;
    margin-left: 5px;
    border-radius: 50%;
    background: #ff8b00;
    vertical-align: middle;
}

.table_comm .w50 {
    width: 50%;
    display: flex;
    align-items: center;
}

.table_comm .w50 span {
    margin: 0 5px;
}

.table_comm .input_comm {
    width: 50%;
}

.table_comm .input_comm2 {
    width: 100%;
}

.table_comm .title .input_comm {
    width: 100%;
}

.table_comm .textarea_comm {
    width: 100%;
    font-family: " Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
}

.textarea_comm::placeholder {
    color: 777;
    font-size: 16px;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
}

.input_comm {
    display: inline-block;
    box-sizing: border-box;
    height: 38px;
    padding-left: 1em !important;
    padding-right: 1em !important;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    font-size: 17px;
    line-height: 36px;
    background-color: #fff !important;
    width: 100%;
}

.input_comm2 {
    display: inline-block;
    box-sizing: border-box;
    height: 38px;
    padding-left: 1em !important;
    padding-right: 1em !important;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 36px;
    background-color: #fff !important;
    width: 100%;
}

.select_comm {
    display: inline-block;
    position: relative;
    height: 38px;
    padding-left: 1em !important;
    padding-right: 2.5em !important;
    font-size: 1rem;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    -webkit-appearance: none;
    background: url(/img/select_arr.gif) calc(100% - 1em) center no-repeat;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
}

.textarea_comm {
    display: inline-block;
    min-height: 38px;
    padding: 1em !important;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    font-size: 17px;
    resize: none;
    max-height: 200px;
    overflow-y: scroll;
}

.en .select_comm {
    font-family: "Montserrat", sans-serif;
}


input[type='text'],
input[type='file'],
input[type='password'],
input[type='number'],
input[type='tel'] {
    /* border:1px solid #e4e4e4; */
    background: transparent;
    padding: 0;
    -webkit-appearance: none;
}

textarea {
    padding: 5px;
    border: 1px solid #e4e4e4;
    background: transparent;
}

select {
    border: 1px solid #e4e4e4;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    background: transparent;
    cursor: pointer;
}


.check_comm {
    display: inline-block;
    position: relative;
    line-height: 24px;
    padding-left: 28px;
    font-size: 15px
}

.check_comm input {
    display: inline-block;
    position: absolute;
    left: 0;
    -webkit-appearance: none;
}

.check_comm input::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 3px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    vertical-align: middle;
    background: #e8e8e8;
    transition: .2s;
}

.check_comm input::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 3px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    vertical-align: middle;
    background: url(/img/ico_check.svg) center center no-repeat;
}

.check_comm input:checked::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 3px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    vertical-align: middle;
    background: #1d98eb;
}

.radio_comm {
    display: inline-block;
    position: relative;
    line-height: 24px;
    padding-left: 32px;
}

.radio_comm input {
    display: inline-block;
    position: absolute;
    left: 0;
    -webkit-appearance: none;
}

.radio_comm input::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 1px;
    left: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #d6d9df;
    border-radius: 50%;
    vertical-align: middle;
}

.radio_comm input::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 1px;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    vertical-align: middle;
    background: #d6d9df;
    transform: scale(0);
    transform-origin: center;
    transition: .2s;
}

.radio_comm input:not(:disabled):hover::after {
    transform: scale(.5);
}

.radio_comm input:checked::before {
    border-color: #788395;
}

.radio_comm input:checked::after {
    transform: scale(.5);
    background-color: #788395;
}

.radio_comm input:disabled::before {
    border-color: #efefef;
    background: #efefef;
}

.btn_comm {
    padding-top: 56px;
    text-align: center;
}

.mt20 {
    margin-top: 20px;
}

.mb5 {
    margin-bottom: 5px;
}

.show-640 {
    display: block;
}




/* form*/



.cs .w50 {
    width: 50%;
}

.cs .nice-select {
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 46px;
    height: 46px;
}

.cs .nice-select .option {
    line-height: 44px;
    height: 44px;
}

.show-768 {
    display: none;
}

.show-1320 {
    display: none;
}

.con1_2 .show-pc {
    display: block;
}


@media all and (max-width: 1320px) {
    .con1_2 .show-pc {
        display: none;
    }

    .show-1320 {
        display: block;
    }


}





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

    #header {
       /* padding: 18px 0;*/
    }

    #header .logo {
        background-size: contain;
        margin:0;
        transition: 0.3s;
        top: 14px
    }

    #header.header-scrolled .logo {
        background-size: contain;
        margin:0;
        top: 14px;
    }

    #header.header-scrolled,
    #header.header-inner-pages {
        /* padding: 16px 0;*/
    }

    #header .t_menu {
        display: none;
    }

    .show-991 {
        display: block;
    }

    .con-navbar {
        display: none;
    }

    .navbar {
        justify-content: right;
    }

    .mobile-nav-toggle {
        display: block;
    }

    #header.header-scrolled,
    #header.header-inner-pages {
        height: 61px;
    }

    .navbar ul {
        display: none;
    }

    .navbar-mobile>ul {
        display: block !important;
    }

    .main-visual-txt {
        width: 90%;
        margin: 0 auto;
        word-break: keep-all;
    }

}


@media all and (max-width: 768px) {
    .table_comm {
        font-size: 14px;
    }

    .table_comm tbody th {
        padding: 0.5em;
        font-size: 14px;
    }

    .table_comm .input_comm {
        width: 100%;
        font-size: 14px
    }

    .table_comm .select_comm {
        font-size: 14px
    }

    .table_comm .w50 {
        width: 100%;
        flex-wrap: wrap;
        gap: 5px;
    }

    .select_comm {
        height: 40px;
        line-height: 38px;
    }

    .input_comm {
        height: 40px;
        line-height: 38px;
    }

    .table_comm .w10 {
        width: 20%;
    }

    .w_container .agree {
        font-size: 14px
    }

    .check_comm {
        font-size: 14px
    }

    .btn_box {
        margin-top: 20px;
    }


    .textarea_comm {
        max-height: 120px;
        font-size: 14px;
    }



    .textarea_comm::placeholder {
        font-size: 13px;
    }




}



/* Table style */
.table-highlighter {
    width: 100%;
    border-top: 2px solid #222
}

.table-highlighter tr {
    height: 78px
}

.table-highlighter th {
    color: #222;
    background-color: #f8f8f8;
    font-size: 18px;
}

.table-highlighter td {
    color: #555
}

.table-highlighter th,
.table-highlighter td {
    min-height: 125px;
    font-size: 17px;
    vertical-align: middle;
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    padding: 10px;
    text-align: center;
}

.table-highlighter th:last-child,
.table-highlighter td:last-child {
    border-right: none
}

.table-highlighter ul {
    margin-top: 6px;
}

.table-sub {
    width: 50%
}

.table-sub:nth-child(1) {
    padding-left: 40px
}

.table-sub:nth-child(2) {
    padding-left: 13px
}

.table-sub__item {
    position: relative;
    padding-bottom: 16px;
    font-size: 16px;
    text-align: left
}

.table-sub__item::before {
    content: "-";
    display: inline-block;
    margin-right: 5px
}

.table-sub__item:last-child {
    padding-bottom: 0
}

.table-highlighter__col {
    display: flex;
    justify-content: center;
    padding: 38px 0
}

.table-highlighter__col.start {
    align-items: center;
    justify-content: flex-start;
    padding-left: 40px
}

@media screen and (max-width: 768px) {
    .table-highlighter tr {
        height: 45px
    }

    .table-highlighter th,
    .table-highlighter td {
        min-height: auto;
    }

    .table-highlighter th {
        font-size: 14px;
    }

    .table-highlighter td {
        font-size: 14px;
    }

    .table-highlighter th,
    .table-highlighter td {
        padding: 6px;
    }
}

/*--------------------------------------------------------------
# sub
--------------------------------------------------------------*/
/*sub_page 공통*/



a.s_black_btn2 {
    padding: 2px 16px;
    background: #fff;
    color: #000;
    font-size: 14px;
    border-radius: 2px;
    display: inline-block;
    height: auto;
    border: 1px solid #000;
}

a:hover.s_black_btn2,
a:active.s_black_btn2,
a:focus.s_black_btn2 {
    background: #000 !important;
    color: #fff !important;
}



.col-style {
    display: flex
}

.col-style_left {
    position: relative;
    flex-shrink: 0;
    width: 310px
}

.col-style_right {
    position: relative;
    width: calc(100% - 310px);
}

.four_wrap {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    gap: 10px;
    padding-top: 40px;
}

.four_wrap .btn_1 {
    width: 100%;
    padding: 0;
    margin: 0;
    max-width: 200px;
    border-radius: 2px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.075em;
    position: relative;
    text-align: center;
}

.four_wrap .btn_1 a {
    color: #fff;
    display: block;
    height: 60px;
    line-height: 58px;
}

.four_wrap .btn04 {
    border: 1px solid #004aab;
    background: #004aab;
    color: #fff;
}

.four_wrap .btn05 {
    border: 1px solid var(--color-point);
    background: #fff;
}

.four_wrap .btn05 a {
    color: var(--color-point);
}

.four_wrap .btn06 {
    border: 1px solid #c9deff;
    background: #f5f9ff;
}

.four_wrap .btn06 a {
    color: #000;
}

.three_wrap {
    box-sizing: border-box;
    margin: 12px auto 0;
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.three_wrap .bnt_wrap {
    width: 100%;
    max-width: 260px;
    height: 70px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.075em;
    position: relative;
    text-align: center;
}

.three_wrap .btn {
    width: 100%;
    max-width: 260px;
    height: 70px;
    border-radius: 2px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.075em;
    position: relative;
    text-align: center;
}

.three_wrap .btn a {
    color: #fff;
    line-height: 55px;
}

.three_wrap .btn02 {
    border: 1px solid #0066ff;
    background: #0066ff;
    color: #fff;
    transition: all 1s;
}

.three_wrap .btn02:hover span {
    transition: all .8s;
    margin-left: -60px;
}

.three_wrap .btn02:hover:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 15px;
    height: 11px;
    background: url(../img/arr_right_wh.png) no-repeat;
}

.three_wrap .btn01 {
    border: 1px solid #004aab;
    background: #004aab;
    color: #fff;
    transition: all 1s;
}

.three_wrap .btn01:hover span {
    transition: all .8s;
    margin-left: -60px;
}

.three_wrap .btn01:hover:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 15px;
    height: 11px;
    background: url(../img/arr_right_wh.png) no-repeat;
}

.three_wrap .btn03 {
    border: 1px solid #000;
    background: #000;
    color: #fff;
    transition: all 1s;
}

.three_wrap .btn03:hover span {
    transition: all .8s;
    margin-left: -60px;
}

.three_wrap .btn03:hover:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 15px;
    height: 11px;
    background: url(../img/arr_right_wh.png) no-repeat;
}


.btn_wrap_half {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}

.btn_wrap_half a.ok_btn {
    border: 1px solid #004aab;
    background: #004aab;
    color: #fff;
}

.btn_wrap_half a.cancle_btn {
    border: 1px solid #efefef;
    background: #efefef;
}

.btn_wrap_half a {

    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 2px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.075em;
    position: relative;
    text-align: center;
    height: 60px;
    line-height: 58px;
    display: block;
    min-width: 280px;
    width: 100%;
}


.s_top {
    margin-top: 134px;
}

.sub__visual {
    position: relative;
    height: 240px;
}

.sub__visualBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.sub__visualTitle__wrap {
    height: 240px;
}

.sub__visualTitle {
    line-height: 1.5;
    font-size: 50px;
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.5px;
    text-align: center;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -55%);
}

.sub__visualTitle .sub_t_tit {
    font-size: 18px;
    font-weight: 500;
}

.sub_inner {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
}

.common-title-wrap {
    border-bottom: 1px solid #eee;
    padding: 80px 0 50px 0;
}

.common-title-wrap h1 {
    letter-spacing: -0.5px;
    font-size: 46px;
    color: #222;
    font-weight: 800;
    line-height: 48px;
}

.sub_s_tit {
    font-size: 24px;
    font-weight: 600;
    color: #000;
}

.sub_container {
    margin: 120px 0 150px 0;
    word-break: keep-all;
    font-size: 19px;
    color: #777;
    line-height: 1.75;
    font-weight: 300;
}

.sub_container h2 {
    font-weight: 700;
    font-size: 36px;
    color: #222;
    padding-bottom: 40px;
}

.sub_container h3 {
    font-weight: 700;
    color: #555;
    font-size: 30px;
}

.sub_container p {}

.notice_alert {
    position: relative;
    padding-left: 26px;
    font-size: 16px;
    line-height: 23px;
    padding-top: 10px;
    font-weight: 500;
    color: #777;
}

.notice_alert:before {
    content: '!';
    color: #fff;
    font-weight: 700;
    background: #000;
    position: absolute;
    top: 12px;
    left: 0;
    padding: 0px 8px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 2px;
}

.sec {
    margin-bottom: 80px;
}

.in {
    display: flex;
    justify-content: space-between;
}

.in .right {
    width: 75%;
}

.s_dot li {
    margin-left: 10px;
    position: relative;
}

.s_dot li::before {
    content: '';
    width: 2px;
    height: 2px;
    background: #777;
    position: absolute;
    left: -5px;
    top: 10px;
    border-radius: 2px;
}

.dot li {
    margin-left: 10px;
    position: relative;
}

.dot li::before {
    content: '';
    width: 3px;
    height: 3px;
    background: #777;
    position: absolute;
    left: -8px;
    top: 15px;
    border-radius: 2px;
}

.common__title {
    position: relative;
    padding-bottom: 16px;
    font-size: 46px;
    color: #333;
    letter-spacing: -1px;
    font-weight: 700;
    line-height: 1.4;
}

.common__title b {
    font-weight: 700;
    color: var(--color-point);
}

.common__s_title {
    font-size: 22px;
    color: #555;
    font-weight: 400;
    letter-spacing: -0.5px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.tal {
    text-align: left !important;
}

.tb_01 td {
    padding: 20px 30px;
}

.tb_01 .tt2 {
    font-weight: 600;
    color: #000;
    font-size: 18px;
}

.tb_01 .num {
    width: 36px;
    height: 36px;
    background: #0b4da3;
    color: #fff;
    line-height: 36px;
    font-size: 14px;
    border-radius: 50%;
    margin: 0 auto;
}

.tb_01 th {
    max-width: 200px;
    text-align: center;
    width: 100px;
}

.tb_01 th .num.even {
    background: var(--color-point);
}

.tb_01 ul li {}

.tb_01 .s02_1 {
    margin-top: 5px;
}

/*tab_menu*/
.tab-link,
.tab-link2 {
    display: inline-block;
    /* padding: 10px 6px 15px 6px; */
    text-align: center;
    cursor: pointer;
    font-weight: 600;
}

.tab-link.current,
.tab-link2.current {
    color: var(--color-point);
}

.tab-content,
.tab-content2 {
    display: none;
}

.tab-content.current,
.tab-content2.current {
    display: block;
    width: 100%;
}

.tab_menu_wrap2 .tab-list {
    width: 100%;
    max-width: 500px;
}

.tab_menu_wrap2 .tab-list li {
    width: calc(100% / 2);
}

.tab_menu_wrap2 .tab_menu {
    background-color: #f6f6f6;
    /*     padding: .2rem; */
    border-radius: .2rem;
    font-size: 17px;
}

.tab_menu_wrap2 .tab-full .tab-list li:not(:first-child, .current, .current + li)::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 19px;
    bottom: 1.4rem;
    width: 1px;
    background-color: #ddd;
    height: 16px;
}

.business_2 .tab_menu_wrap2 .tab_menu ul>li a {
    line-height: 2.2rem;
    padding: 10px 6px 15px 6px;
    color: #8692A0;
    display: block;
}


.business_2 .tab_menu_wrap2 .tab_menu ul>li {
    padding: 0;
}

.tab_menu_wrap2 .tab-full .tab-list .tab-link.current a {
    color: #fff;
}

.tab_menu_wrap2 .tab-full .tab-list .tab-link.current {
    color: #fff;
    background-color: var(--color-point);
    box-shadow: .4rem .4rem .8rem 0rem rgba(0, 0, 0, .15);
    font-weight: 500
}

.tab_menu_wrap2 .tab_menu ul {
    display: flex;
}

.tab_menu_wrap2 .tab_menu ul>li {
    width: calc(100% / 2);
    line-height: 2.2rem;
    color: #8692A0;
    padding: 10px 6px 15px 6px;
}

.tab_menu_wrap2 .tab-content {
    padding: 70px 0 0 0;
}


@media screen and (max-width: 1440px) {

    .s_top {
        margin-top: 59px;
    }
}


@media screen and (max-width: 1260px) {
    .sub_inner {
        margin: 0 auto;
        padding: 0 20px;
    }

    .in {
        display: block
    }

    .in .right {
        width: 100%;
    }

    .sub_container {
        margin: 70px 0 80px 0;
    }

    .sub_container h2 {
        font-size: 26px;
        padding-bottom: 30px;
    }

    .sub_container h3 {
        font-size: 22px;
    }
}

@media screen and (max-width: 970px) {
    .col-style {
        flex-direction: column;
    }

    .col-style_left {
        width: 100%;
        max-width: none;
        margin-bottom: 15px;
    }

    .col-style_right {
        width: 100%;
        max-width: none;
    }

    .common-title-wrap {
        margin-bottom: 30px;
        padding: 40px 0 30px 0;
    }

    .common-title-wrap h1 {
        font-size: 34px;
    }

    .sub_container {
        font-size: 16px;
    }

    .common__s_title {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .sub_s_tit {
        font-size: 20px;
        font-weight: 600;
        color: #000;
    }

    .three_wrap .btn a {
        font-size: 15px;
    }

    .three_wrap .btn01:hover:after {
        content: none;
    }

    .three_wrap .btn01:hover span {
        margin-left: 0;
    }

    .three_wrap .btn02:hover:after {
        content: none;
    }

    .three_wrap .btn02:hover span {
        margin-left: 0;
    }

    .three_wrap .btn03:hover:after {
        content: none;
    }

    .three_wrap .btn03:hover span {
        margin-left: 0;
    }

    .four_wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px
    }

    .four_wrap>div {}

    .four_wrap .btn_1 {
        max-width: 100%;
    }

    .four_wrap .btn_1 a {
        font-size: 15px;
        height: 50px;
        line-height: 48px;
    }

    .btn_wrap_half {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .btn_wrap_half a {
        min-width: auto;
        font-size: 15px;
        height: 50px;
        line-height: 48px;
    }

}

@media screen and (max-width: 768px) {
    .sub_container {
        font-size: 14px;
        line-height: 1.6
    }

    .sub_container h3 {
        font-size: 18px;
    }

    .sub_container {
        margin: 40px 0 5cqi 0;
        font-size: 15px;
    }

    .sub__visualTitle {
        font-size: 36px;
    }

    .common-title-wrap {
        padding: 30px 0 20px 0;
    }

    .common-title-wrap h1 {
        font-size: 20px;
        line-height: 1.4;
    }

    .sub_s_tit {
        font-size: 16px;
    }

    .notice_alert {
        font-size: 13px;
        line-height: 1.6;
    }

    .sub_container p {
        font-size: 14px;
        line-height: 1.6;

    }

    .tb_01 td {
        padding: 16px;
    }

    .tb_01 th {
        max-width: 54px
    }

    .tb_01 .tt2 {
        font-size: 15px
    }

    .tb_01 .num {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 13px;
    }

    .dot li {
        margin-left: 10px;
    }

    .dot li::before {
        content: '';
        width: 2px;
        height: 2px;
        background: #777;
        position: absolute;
        left: -7px;
        top: 10px;
        border-radius: 2px;
    }

    #container {
        padding: 60px 0;
        font-size: 15px;
    }

    .sub__visual {
        height: 150px;
    }

    .sub__visualTitle__wrap {
        height: 150px;
    }

    .sub_container {
        margin: 30px 0 50px 0;
    }

    .sec {
        margin-bottom: 40px;
    }

    .sub_container h2 {
        font-size: 20px;
        padding-bottom: 20px;
    }

    .three_wrap {
        flex-direction: column;
        max-width: 360px;
    }

    .three_wrap .btn {
        max-width: 100%;
        height: 60px;
    }

    .three_wrap .btn a {
        line-height: 45px;
    }
}

/*--------------------------------------------------------------------------
| Animation
|--------------------------------------------------------------------------*/
/* Common Animation */
html:not(.old-ie) .animate-element {
    transition: visibility 1.1s ease, opacity 1.1s ease, transform 1.1s ease;
}

/* Fade */
html:not(.old-ie) .fadeIn {
    visibility: hidden;
    opacity: 0
}

html:not(.old-ie) .fadeIn.animated,
html:not(.old-ie) body.is-mobile .fadeIn {
    visibility: visible;
    opacity: 1
}

html:not(.old-ie) .fadeInUp {
    position: relative;
    visibility: hidden;
    opacity: 0;
    transform: translateY(110px)
}

html:not(.old-ie) .fadeInUp.animated,
html:not(.old-ie) body.is-mobile .fadeInUp {
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

html:not(.old-ie) .fadeInDown {
    position: relative;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-110px)
}

html:not(.old-ie) .fadeInDown.animated,
html:not(.old-ie) body.is-mobile .fadeInDown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

html:not(.old-ie) .fadeInRight {
    position: relative;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-110px)
}

html:not(.old-ie) .fadeInRight.animated,
html:not(.old-ie) body.is-mobile .fadeInRight {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

html:not(.old-ie) .fadeInLeft {
    position: relative;
    visibility: hidden;
    opacity: 0;
    transform: translateX(110px)
}

html:not(.old-ie) .fadeInLeft.animated,
html:not(.old-ie) body.is-mobile .fadeInLeft {
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

/* Sub:Breadcrumb Menu */
.breadcrumb-nav {
    position: relative;
    background-color: #ffffff;
    z-index: 99;
    border-bottom: 1px solid #e3e3e3;
    background: #efefef;
}

.breadcrumb-nav__wrap {
    display: flex;
    justify-content: flex-end;
    max-width: 1320px;
    padding: 0
}

.breadcrumb-menu {
    display: flex;
    flex-shrink: 0;
    position: relative;
    width: 100%;
    max-width: 587px;
    height: 65px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd
}

.breadcrumb-menu__item>a {
    color: #555;
    border: 2px solid #efefef;
}

.breadcrumb-menu__item>a.breadcrumb-menu__home-link {
    border: 0
}

.breadcrumb-menu__item {
    display: flex;
    flex-grow: 1;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 260px;
    border-left: 1px solid #ddd
}

/* .breadcrumb-menu__item.open {background-color:#3b3b3b;} */
.breadcrumb-menu__item.depth-last>a {
    font-weight: 600;
    color: #000;
}

.breadcrumb-menu__item--home {
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: 65px;
    border-left: 0
}

.breadcrumb-menu__home-link {
    display: block;
    background: url('/img/icon_home.svg') no-repeat;
    width: 24px;
    height: 24px;
}

.breadcrumb-menu__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 0 35px;
    font-size: 17px;
    font-weight: 500;
    color: #fff
}

.breadcrumb-menu__link>.ellips {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.breadcrumb-menu__link.has-list::after {
    content: "\F282";
    font-family: bootstrap-icons !important;
    ;
    font-style: normal;
    line-height: 1;
    font-variant: normal;
    text-transform: none;
    speek: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: transform .3s;
    speak: none;
    border-radius: 50%;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 25px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
    color: var(--color-gray-1);
    width: 25px;
    height: 25px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
}

.open .breadcrumb-menu__link.has-list::after {
    transform: rotate(-180deg);
    color: var(--color-point);
}

.breadcrumb-menu.open .breadcrumb-menu__link.has-list i::before {
    transform: rotate(45deg);
    background: var(--color-point);
}

.breadcrumb-menu.open .breadcrumb-menu__link.has-list i::after {
    transform: rotate(135deg);
    background: var(--color-point);
}

.breadcrumb-menu__item.open>a {
    border: 2px solid var(--color-point);
}

.breadcrumb-menu__list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    background-color: #fff;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1);
    z-index: 10
}

.breadcrumb-menu__list-item {
    border-bottom: 1px solid var(--color-gray-7)
}

.breadcrumb-menu__list-link {
    display: flex;
    align-items: center;
    height: 65px;
    font-size: 16px;
    color: #333;
    padding: 0 35px;
    transition: color .1s, background-color .1s
}

.breadcrumb-menu__list-item.act>.breadcrumb-menu__list-link {
    color: #fff;
    background-color: var(--color-point);
}

.breadcrumb-menu__list-item:not(.act)>.breadcrumb-menu__list-link:hover {
    color: #fff;
    background-color: var(--color-point);
    background-color .1s
}

.breadcrumb-menu__item.open>.breadcrumb-menu__list {
    visibility: visible;
    opacity: 1
}

@media screen and (max-width: 768px) {
    .breadcrumb-menu {
        height: 50px;
    }

    .breadcrumb-menu__link {
        font-size: 15px;
        padding: 0 20px;
    }

    .breadcrumb-menu__list-link {
        height: 50px;
        font-size: 15px;
        padding: 0 20px;
    }

    .breadcrumb-menu__link.has-list::after {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
    }
}

/*sub_page : 회사소개_인사말*/
.greeting .c2 {
    margin-top: 50px;
}

.greeting__img {
    margin: 40px 0
}

.greeting__desc-wrap {
    margin-top: 40px;
    width: 100%;
}

.greeting__desc {
    margin-bottom: 27px;
    color: #777;
    line-height: 1.75;
    font-weight: 300;
}

.greeting__desc b {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 6px;
    ;
}

.line_box {
    padding: 50px;
    border: 1px solid #eee;
    text-align: center
}

@media screen and (max-width: 768px) {
    .common__title {
        font-size: 26px;
        padding-bottom: 20px;
    }

    .greeting__desc-wrap {
        margin-top: 20px;
    }

    .line_box {
        padding: 10px;
    }

    .greeting__img {
        margin: 10px 0
    }
}

/*sub_page : 회사소개_03 ci소개*/
.ci .logo {
    border: 1px solid #e0e0e0;
}

/* **************************************** *
 * 조직도
 * **************************************** */
.org_24 {
    margin: 100px auto;
}

.organ-wrap {
    position: relative;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    box-sizing: border-box;
    padding: 0;
}

.organ-wrap>div {
    position: relative;
    margin-top: 30px;
    font-size: 22px;
    color: #fff;
}

.organ-wrap div>div {
    width: 100%;
    max-width: 280px;
    background: #ddd;
    height: 100px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .15);
    border-radius: 50px;
    position: relative;
    margin: 0 auto;
}

.organ-wrap>div>div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.organ-wrap div.ceo>div {
    background: #004aab;
}

.organ-wrap div.cco {
    height: 140px;
    z-index: 99;
}

.organ-wrap div.cco .line {
    position: absolute;
    right: 0;
    width: 50%;
    height: 1px;
    background-color: #E0E0E0;
    display: block;
    top: 48px;
    z-index: -99;
}

.organ-wrap div.cco>div {}

.organ-wrap div>div a,
.organ-wrap div>div p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: #fff
}

.organ-wrap div.left-side {
    position: absolute;
    right: 0%;
    top: 0;
    background: rgb(68, 68, 68) !important;
    background: linear-gradient(132deg, rgba(68, 68, 68, 1) 0%, rgba(85, 85, 85, 1) 100%) !important;
}

.head-office {
    width: 100%;
    margin-top: 50px !important;
    padding: 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.head-office ul {
    width: 100%;
    max-width: 280px;
    position: relative
}

.head-office ul li {
    border: 1px solid #E0E0E0;
    height: 80px;
    border-radius: 40px;
    background: #fff;
}

.head-office ul li:nth-child(n+2) {
    margin-top: 10px
}

.head-office ul li:first-child {
    background: #F5F5F5;
    font-weight: 600;
    font-size: 22px;
}

.head-office ul li:first-child {}

.head-office ul li:first-child p {
    cursor: auto
}

.head-office ul li {
    color: #000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 19px;
    font-weight: 300;
}

/*line*/
.left-side::before {
    /*     content: '';
    position: absolute;
    z-index: -1;
    width: 271px;
    left: 170px;
    height: 1px;
    background: #E0E0E0;
    top: 50%; */
}

.head-office ul::before {
    content: '';
    position: absolute;
    width: calc(100% + 47px);
    height: 50px;
    border-left: 1px solid #E0E0E0;
    border-top: 1px solid #E0E0E0;
    top: -50px;
}

.head-office ul:nth-child(n+2):before {
    border-right: 1px solid #E0E0E0;
    border-left: 0;
    left: auto;
    right: 50%;
}

.organ-wrap>div:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 130px;
    background: #E0E0E0;
    z-index: -1;
    left: 50%;
    top: 11px;
    margin-left: -1px;
}

.organ-wrap>div.head-office-2:after {
    display: none
}

.head-office::after {
    display: none !important
}

@media(max-width: 1260px) {
    .organ-wrap>div {
        padding: 0 20px;
    }

    .head-office {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px
    }

    .head-office ul::before {
        width: calc(100%);
    }

    .head-office ul:nth-child(n+2):before {
        width: calc(100% + 20px);
    }
}

@media(max-width: 1023px) {
    .org_24 {
        margin: 80px auto;
    }

    .organ-wrap {
        font-size: 17px;
        padding: 0 5%;
    }

    .organ-wrap>div {
        margin-top: 20px;
        font-size: 19px;
        padding: 0;
    }

    .organ-wrap div>div {
        width: 210px;
        height: 80px;
    }

    .organ-wrap div.cco {
        height: 90px;
    }

    .organ-wrap div.cco>div {}

    .organ-wrap div.cco .line {}

    .head-office ul {}

    .head-office ul li {
        height: 55px;
    }

    .head-office ul li a,
    .head-office ul li p {
        font-size: 16px;
    }

    /*line*/
    .left-side::before {
        width: 300px;
        left: 120px;
    }

    .head-office ul::before {
        height: 25px;
        top: -25px;
    }

    .organ-wrap>div:after {
        height: 105px;
    }
}

@media(max-width: 768px) {
    .head-office {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }

    .org_24 {
        margin: 50px auto;
    }

    .organ-wrap {
        font-size: 15px;
        padding: 0;
    }

    .organ-wrap::before {
        content: '';
        display: block;
        width: 1px;
        height: 650px;
        background: #E0E0E0;
        position: absolute;
        top: 0;
        left: 23%;
        z-index: -10
    }

    .organ-wrap div>div {
        max-width: calc(50% - 15px);
        height: 60px;
        border-radius: 30px;
        margin: 0;
        width: 50%;
        font-size: 15px;
    }

    .organ-wrap>div {
        margin-top: 0;
        font-size: 14px;
    }

    .organ-wrap div.cco {
        height: 90px;
    }

    .organ-wrap div.left-side {
        right: inherit;
        left: 50%;
        margin-left: 15px;
    }

    .organ-wrap div.cco:before {
        content: '';
        position: absolute;
        z-index: -1;
        width: 50%;
        left: 23%;
        height: 1px;
        background: #E0E0E0;
        top: 40%;
    }

    .left-side::before {
        content: none;
    }

    .organ-wrap div.cco>div {}

    .head-office {
        margin-top: 0px !important;
        padding: 0
    }

    .head-office ul {
        max-width: 100%;
        position: relative;
    }

    .head-office ul:nth-child(n+2) {
        margin-top: 20px
    }

    .head-office ul li:first-child {
        position: absolute;
        font-size: 15px;
    }

    .head-office ul li {
        width: calc(50% - 15px);
        max-width: calc(50% - 15px);
        height: 50px;
        font-size: 15px;
    }

    .head-office ul li a,
    .head-office ul li p {
        font-size: 15px;
    }

    .head-office ul li:nth-child(n+2) {
        margin-top: 6px;
        margin-left: calc(50% + 15px);
        width: calc(50% - 15px);
    }

    .head-office ul li:nth-child(2) {
        margin-top: 0;
        position: relative
    }

    .head-office ul li:nth-child(2)::after {
        content: '';
        display: block;
        width: 100px;
        height: 1px;
        background: #E0E0E0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 90%;
        z-index: -10
    }

    /*line*/
    .left-side::before {
        width: 120px;
        left: initial;
        right: 80%
    }

    .head-office ul::before {
        display: none;
        width: calc(100% + 60px);
        height: 20px;
        top: -10px;
    }

    .organ-wrap div.cco .line {
        height: 0;
    }

    .organ-wrap>div:after {
        height: 0;
    }

    .organ-wrap>div.cco:after {
        height: 0
    }
}

.organ-wrap2 {
    padding: 50px 100px;
}

.organ-wrap2 .box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    height: 80px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    position: relative;
    background: rgb(221, 221, 221);
    border-radius: 4px;
    margin: 0px auto;
    color: #fff;
    font-size: 18px;
    margin-top: 30px;
}

.organ-wrap2 .box.red {
    background: linear-gradient(132deg, rgba(218, 33, 40, 1) 0%, rgba(190, 14, 21, 1) 100%);
}

.organ-wrap2 .box.gray {
    background: linear-gradient(132deg, rgba(68, 68, 68, 1) 0%, rgba(85, 85, 85, 1) 100%) !important;
}

.organ-wrap2 .box.gray_light {
    background: #787d83;
    max-width: 180px;
}

.organ-wrap2 .dep02 {
    position: relative;
    height: 180px;
}

.organ-wrap2 .dep02>div {
    position: absolute;
    left: 0%;
    top: 0;
    height: 150px;
    text-align: left;
}

.organ-wrap2 .dep03 {
    display: flex;
    width: 100%;
}

.organ-wrap2 .dep03 .left_side {
    width: 20%;
}

.organ-wrap2 .dep03 .right_side {
    width: 80%;
}

.organ-wrap2 .dep03 .right_side>div {
    margin-right: 39%;
}

.organ-wrap2 .dep03 ul {
    display: flex;
}

.organ-wrap2 .dep03 ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    position: relative;
    border-radius: 4px;
    margin: 0px auto;
    color: #000;
    font-size: 18px;
    margin-top: 30px;
    background-color: #fff;
    border: 1px solid #000;
    max-width: 190px;
}

/*sub_page : 효성cms+_01 효성cms+*/
.service_1 .con1 {
    margin-bottom: 80px;
}

.service_1 .con2 {
    padding: 120px 0;
    background: #f5f9ff;
}

.service_1 .con3 .list {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    gap: 30px
}

.service_1 .con3 .list li {
    box-sizing: border-box;
    padding: 50px;
    border: 1px solid #e0e0e0;
    animation: blink 1.2s linear infinite;
}

.service_1 .con3 .list li h3 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
}

.service_1 .con3 .list li h3 span {
    display: block;
    font-size: 36px;
    font-weight: inherit;
    color: var(--color-point);
}

.service_1 .con3 .list li p {
    font-size: 17px;
    line-height: 1.6;
}

#wide_img,
#wide_img2 {
    height: 420px;
    max-width: 1260px;
    margin: 0 auto;
    margin-top: 60px;
    transition: 0.3s;
    background-position: center;
    width: 100%;
}

.service_1 .pic01 {
    background-position: center;
    background: url('../img/sub/p2010_1.jpg') center no-repeat;
}

.service_1 .pic02 {
    background-position: center;
    background: url('../img/sub/p2010_2.jpg') center no-repeat;
}

@media(max-width: 970px) {
    .service_1 .con2 {
        padding: 60px 0;
    }

    .service_1 .con3 .list {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        gap: 20px
    }

    .service_1 .con3 .list li {
        padding: 30px;
    }

    .service_1 .con3 .list li h3 {
        font-size: 20px;
    }

    .service_1 .con3 .list li h3 span {
        font-size: 22px;
    }

    .service_1 .con3 .list li p {
        font-size: 15px;
    }

    .greeting__desc {
        margin-bottom: 0;
    }
}

@media(max-width: 640px) {
    .service_1 .con1 {
        margin-bottom: 40px;
    }

    .service_1 .con2 {
        padding: 40px 0;
    }

    .service_1 .con3 .list {
        display: block;
    }

    .service_1 .con3 .list li {
        padding: 24px;
        margin-bottom: 12px;
    }

    .service_1 .con3 .list li h3 {
        font-size: 17px;
    }

    .service_1 .con3 .list li h3 span {
        font-size: 18px;
    }

    .service_1 .con3 .list li p {
        font-size: 14px;
    }

    .service_1 .pic02 {
        background: url('../img/sub/p2010_2_m.jpg') center no-repeat;
    }

    #wide_img,
    #wide_img2 {
        height: 260px;
    }


}

/*sub_page : 효성cms+_02 효성cms+ 장점*/
.service_2 .con1 .list .desc li {
    position: relative;
    padding-left: 8px;
}

.service_2 .con1 .list .desc li::before {
    content: '';
    width: 3px;
    height: 3px;
    background: #777;
    position: absolute;
    left: 0;
    top: 13px;
    border-radius: 3px;
}

.oneline ul.list {
    display: block;
    font-size: 17px;
}

.oneline ul.list>li {
    box-sizing: border-box;
    padding: 30px 50px;
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

.oneline ul.list>li h3 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
}

.oneline ul.list>li h3 span {
    display: block;
    font-size: 36px;
    font-weight: inherit;
    color: var(--color-point);
}

.service_2 .con1 .d_line .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
}

.service_2 .con1 .d_line .list>li {
    box-sizing: border-box;
    padding: 30px 50px;
    border: 1px solid #e0e0e0;
}

.service_2 .con1 .d_line .list .left {
    flex-shrink: 0;
    width: 100px;
}

.service_2 .con1 .d_line .list .right {
    width: calc(100% - 100px)
}

.service_2 .con1 .d_line .list>li .desc {
    font-size: 17px;
    margin-top: 8px;
}

.service_2 .con1 .d_line .list h3 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
}

.service_2 .con1 .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.service_2 .con1 .flex .left {
    width: 150px;
    margin-right: 20px;
}

.service_2 .con2 .list {
    grid-template-columns: repeat(4, 1fr);
    display: grid;
    gap: 30px;
}

.service_2 .con2 .list li {
    box-sizing: border-box;
    padding: 50px;
    border: 1px solid #e0e0e0;
    animation: blink 1.2s linear infinite;
}

.service_2 .con2 .list li h3 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
}

.service_2 .con2 .list li h3 span {
    display: block;
    font-size: 30px;
    font-weight: inherit;
    color: var(--color-point);
}

.service_2 .con2 .list li p {
    font-size: 17px;
    line-height: 1.6;
}

.service_2 .con3 .step {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 40px;
    flex-wrap: wrap;
    font-size: 17px;
}

.service_2 .con3 .step li {
    position: relative;
    margin: 0;
    background: #fff;
    padding: 10px;
    text-align: center;
}

.service_2 .con3 .step li span {
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    margin-top: 2px;
    flex-shrink: 0;
    margin-right: 4px;
    font-weight: 700;
    color: #000;
    width: 100%;
    margin-bottom: 20px;
}

.service_2 .con3 .step li:after {
    content: "\F282";
    font-family: bootstrap-icons !important;
    font-style: normal;
    line-height: 1;
    font-variant: normal;
    font-size: 20px;
    font-weight: 100;
    position: absolute;
    right: -14%;
    top: 37%;
    transform: rotate(-90deg);
    color: #c1c1c1;
}

.service_2 .con3 .step li:last-child::after {
    content: "";
}

.service_2 .con3 .step .txt b {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    margin-bottom: 20px;
    margin-top: 30px;
}

.service_2 .con3 .step .ico {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.4;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    background: #efefefef;
    margin: 0 auto;
}

.service_2 .con3 .step .ico {
    margin-bottom: 16px;
}

@media(max-width: 970px) {
    .oneline ul.list>li {
        padding: 30px;
        margin-bottom: 16px;
    }

    .oneline ul.list>li h3 {
        font-size: 20px;
    }

    .oneline ul.list ul>li {
        font-size: 15px;
    }

    .service_2 .con2 .list {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        gap: 20px
    }

    .service_2 .con2 .list li {
        padding: 30px;
    }

    .service_2 .con2 .list li h3 {
        font-size: 20px;
    }

    .service_2 .con2 .list li h3 span {
        font-size: 22px;
    }

    .service_2 .con2 .list li p {
        font-size: 15px;
    }

    .service_2 .con3 .step .txt b {
        font-size: 20px;
    }

    .service_2 .con3 .step .txt p {
        font-size: 15px;
    }

    .service_2 .con3 .step {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .service_2 .con3 .step li:after {
        content: ""
    }

    .service_2 .con1 .d_line .list h3 {
        font-size: 20px;
    }

    .service_2 .con1 .d_line .list>li .desc {
        font-size: 15px;
        line-height: 1.4;
    }

    .service_2 .con1 .flex {
        flex-direction: column;
    }

    .service_2 .con1 .d_line .list>li {
        padding: 30px;
        text-align: center;
    }

    .service_2 .con1 .flex .left {
        margin-right: 0;
    }

    .service_2 .con1 .d_line .list .left {
        width: 80px;
    }

    .service_2 .con1 .d_line .list .right {
        width: 100%;
    }
}

@media(max-width: 640px) {
    .oneline ul.list>li h3 {
        font-size: 17px;
    }

    .oneline ul.list ul>li {
        font-size: 14px;
    }

    .service_2 .con2 .list li h3 {
        font-size: 17px;
    }

    .service_2 .con2 .list li p {
        font-size: 14px;
    }

    .service_2 .con3 .step .txt b {
        font-size: 17px;
    }

    .service_2 .con3 .step .txt p {
        font-size: 14px;
    }

    .service_2 .con1 .flex {
        gap: 10px;
        flex-direction: row;
    }

    .service_2 .con1 .d_line .list h3 {
        font-size: 17px;
    }

    .service_2 .con1 .d_line .list>li .desc {
        font-size: 14px;
    }

    .service_2 .con1 .d_line .list>li {
        padding: 20px 16px;
        text-align: left;
    }

    .service_2 .con1 .d_line .list {
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
    }

    .service_2 .con2 .list {
        gap: 12px;
    }

    .service_2 .con1 .flex .left {
        margin-right: 20px;
    }

    .service_2 .con3 .step .ico {
        width: 80px;
        height: 80px;
    }

    .service_2 .con3 .step .ico img {
        width: 28px;
    }

    .service_2 .con3 .step li span {
        font-size: 16px;
        line-height: 0;
    }
}

/*sub_page : 효성cms+_03 프로그램 특징*/
.service_3 .con1 .li_box_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    flex-wrap: wrap;
    font-size: 17px;
}

.service_3 .con1 .li_box_wrap li {
    position: relative;
    margin: 0;
    background: #fff;
    text-align: center;
    border: 1px solid #e0e0e0;
    padding: 30px 20px;
}

.service_3 .con1 .li_box_wrap li span {
    display: inline-block;
    width: 40px;
    background: #000;
    color: #fff;
    position: absolute;
    left: -4px;
    top: -4px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
}

.service_3 .con1 .li_box_wrap .txt b {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: #0066ff;
    margin-bottom: 10px;
    margin-top: 30px;
}

.service_3 .con1 .li_box_wrap .txt p {
    text-align: left;
    width: 80%;
    margin: 0 auto;
}

.service_3 .con1 .li_box_wrap .ico {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.4;
    margin: 0 auto;
}

.service_3 .con1 .li_box_wrap .ico {
    margin: 10px 0;
}

.service_3 .con1 .li_box_wrap li:nth-last-child(odd) {
    /* background: #f5f9ff;border: 1px solid #c9deff; */
}

.service_3 .con1 .li_box_wrap li:nth-last-child(odd) span {
    background: #000;
}

.service_3 .con1 .li_box_wrap li:hover {}

@media(max-width: 970px) {
    .service_3 .con1 .li_box_wrap {
        gap: 20px;
    }

    .service_3 .con1 .li_box_wrap .txt b {
        font-size: 20px;
    }

    .service_3 .con1 .li_box_wrap li {
        padding: 20px 10px;
    }

    .service_3 .con1 .li_box_wrap .txt p {
        width: 95%;
    }

    .service_3 .con1 .li_box_wrap li span {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .service_3 .con1 .li_box_wrap {
        font-size: 14px;
    }
}

@media(max-width: 640px) {
    .service_3 .con1 .li_box_wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .service_3 .con1 .li_box_wrap .txt b {
        font-size: 18px;
    }

    .service_3 .con1 .li_box_wrap li {
        padding: 20px 10px;
    }
}

/*sub_page : 효성cms+_04 서비스 제휴사*/
.service_4 .family_li_wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.service_4 .family_li_wrap li {
    border: 1px solid #c9deff;
    padding: 16px;
    text-align: center;
    border-radius: 4px;
    background: #fff;
}

@media(max-width: 970px) {
    .service_4 .family_li_wrap {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
}

@media(max-width: 640px) {
    .service_4 .family_li_wrap {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

.service_5 .con1 .list {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 30px
}

.service_5 .con1 .list li {
    box-sizing: border-box;
    padding: 50px;
    border: 1px solid #e0e0e0;
    animation: blink 1.2s linear infinite;
}

.service_5 .con1 .list li h3 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
}

.service_5 .con1 .list li h3 span {
    display: block;
    font-size: 36px;
    font-weight: inherit;
    color: var(--color-point);
}

.service_5 .con1 .list li p {
    font-size: 17px;
    line-height: 1.6;
}

.service_5 .con2 .step {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 40px;
    flex-wrap: wrap;
    font-size: 17px;
}

.service_5 .con2 .step li {
    position: relative;
    margin: 0;
    background: #fff;
    padding: 10px;
    text-align: center;
}

.service_5 .con2 .step li span {
    border-radius: 50%;
    display: none;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    margin-top: 2px;
    flex-shrink: 0;
    margin-right: 4px;
    font-weight: 700;
    color: #000;
    width: 100%;
    margin-bottom: 20px;
}

.service_5 .con2 .step .txt b {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    margin-bottom: 20px;
    margin-top: 30px;
}

.service_5 .con2 .step .ico {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.4;
    border-radius: 50%;
    width: 160px;
    height: 160px;
    background: #fff;
    margin: 0 auto;
    border: 1px solid #c9deff;
}

.service_5 .con2 .step .ico {
    margin-bottom: 16px;
}

.service_5 .con3 .c1 {
    border: 1px solid #e0e0e0;
    margin: 0 auto;
    padding: 100px 0;
    margin-top: 30px;
    background: url('../img/sub/line.gif');
}

.service_5 .con3 .c1 .logo {
    width: 560px;
    text-align: center;
    margin: 0 auto;
}

.service_5 .con3 .c2 {
    margin-top: 40px;
}

.service_5 .con3 .c2 .box {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.service_5 .con3 .c2 .box li {}

.service_5 .con3 .c2 .box li span {
    display: block;
    height: 50px;
    background: #0032a0;
}

.service_5 .con3 .c2 .box li dl {
    line-height: 1;
}

.service_5 .con3 .c2 .box li dt {
    padding: 20px 0 0;
    color: #0032a0;
    font-weight: 400;
}

.service_5 .con3 .c2 .box li dd {
    padding: 10px 0 0;
    font-size: 14px;
    white-space: nowrap;
}

.service_5 .con3 .c2 .box li:nth-child(2) span {
    background: #00205b;
}

.service_5 .con3 .c2 .box li:nth-child(3) span {
    background: #ffb81c;
}

.service_5 .con3 .c2 .box li:nth-child(2) dt {
    color: #00205b;
}

.service_5 .con3 .c2 .box li:nth-child(3) dt {
    color: #ffb81c;
}

.col-style {
    display: flex
}

.col-style__left {
    position: relative;
    flex-shrink: 0;
    width: 310px
}

.col-style__right {
    position: relative;
    width: calc(100% - 310px);
    max-width: 950px;
}

@media(max-width: 970px) {
    .col-style {
        flex-direction: column;
    }

    .col-style__left {
        width: 100%;
        max-width: none;
        margin-bottom: 15px;
    }

    .col-style__right {
        width: 100%;
        max-width: none;
    }

    .service_5 .con2 .list {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        gap: 20px
    }

    .service_5 .con1 .list li {
        padding: 30px;
    }

    .service_5 .con1 .list li h3 {
        font-size: 20px;
    }

    .service_5 .con1 .list li h3 span {
        font-size: 22px;
    }

    .service_5 .con1 .list li p {
        font-size: 15px;
    }

    .service_5 .con3 .c1 {
        padding: 60px 0;
    }

    .service_5 .con3 .c1 .logo {
        width: 400px;
    }

    .service_5 .con2 .step .txt b {
        font-size: 20px;
    }

    .service_5 .con2 .step .txt p {
        font-size: 15px;
    }

    .service_5 .con2 .step {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .service_5 .con2 .step li:after {
        content: ""
    }

    .service_5 .con3 .c2 .box {
        grid-template-columns: auto;
    }




}

@media(max-width: 640px) {
    .service_5 .con1 .list {
        display: block;
    }

    .service_5 .con1 .list li {
        padding: 24px;
        margin-bottom: 12px;
    }

    .service_5 .con1 .list li h3 {
        font-size: 17px;
    }

    .service_5 .con1 .list li h3 span {
        font-size: 18px;
    }

    .service_5 .con1 .list li p {
        font-size: 14px;
    }

    .service_5 .con2 .step .txt b {
        font-size: 17px;
        margin-bottom: 10px;
        margin-top: 22px;
    }

    .service_5 .con2 .step .txt p {
        font-size: 14px;
    }

    .service_5 .con2 .step .ico {
        width: 140px;
        height: 140px;
    }

    .service_5 .con3 .c1 .logo {
        width: 260px;
    }

    .service_5 .con3 .c1 {
        background-size: 10px;
        padding: 40px 0;
    }
}

/*sub_page 효성 cms+결제*/
.d_line_all .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
}

.d_line_all .list>li {
    box-sizing: border-box;
    padding: 30px 50px;
    border: 1px solid #e0e0e0;
}

.d_line_all .list .left {
    flex-shrink: 0;
    width: 140px;
}

.d_line_all .list .right {
    width: calc(100% - 140px);
    margin-left: 20px;
}

.d_line_all .list>li .desc {
    font-size: 17px;
    margin-top: 8px;
}

.d_line_all .list h3 {
    font-size: 26px;
    font-weight: 800;
    color: #333;
}

.step5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0 40px;
    flex-wrap: wrap;
    font-size: 17px;
}

.step5 li {
    position: relative;
    margin: 0;
    background: #fff;
    padding: 10px;
    text-align: center;
}

.step5 li span {
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    margin-top: 2px;
    flex-shrink: 0;
    margin-right: 4px;
    font-weight: 700;
    color: #000;
    width: 100%;
    margin-bottom: 20px;
}

.step5 li:after {
    content: "\F282";
    font-family: bootstrap-icons !important;
    font-style: normal;
    line-height: 1;
    font-variant: normal;
    font-size: 20px;
    font-weight: 100;
    position: absolute;
    right: -14%;
    top: 37%;
    transform: rotate(-90deg);
    color: #c1c1c1;
}

.step5 li:last-child::after {
    content: "";
}

.step5 .txt b {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    margin-bottom: 20px;
    margin-top: 30px;
}

.step5 .ico {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.4;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    background: #efefefef;
    margin: 0 auto;
}

.step5 .ico {
    margin-bottom: 16px;
}

.li_2_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.li_2_box li {}

.li_2_box .img_wrap {
    margin-bottom: 30px;
}

.li_2_box .img_wrap img {
    width: 100%;
}

.li_2_box h3 {
    font-size: 26px;
    color: #000;
}

.li_2_box .desc {
    margin-top: 15px;
    padding: 0 40px 40px 0;
    font-size: 18px;
    line-height: 1.5;
}

.Overview_wrap {
    padding: 70px 20px;
    text-align: center;
    border: 1px solid #e5e5e5;
}

.introduce_7 h3 {
    font-size: 24px;
    color: var(--color-point);
    ;
}

.introduce_7 .con4 .c1 {
    margin-bottom: 60px;
}

.introduce_7 .con4 p {
    max-width: 900px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.introduce_7 .li_2_box .img_wrap {
    margin-bottom: 20px;
}

.introduce_7 .li_2_box span {
    color: #000;
    font-weight: 600;
}

.introduce_7 .tab_menu_wrap2 .tab_menu ul>li {
    padding: 0;
}

.introduce_7 .tab_menu_wrap2 .tab_menu ul>li a {
    padding: 10px 6px 15px 6px;
    color: #8692A0;
    display: block;
    line-height: 2.2rem;
}



@media screen and (max-width: 970px) {
    .step5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .step5 .txt b {
        font-size: 20px
    }

    .d_line_all .list {}

    .d_line_all .list .left {
        width: 80px;
        flex-shrink: 0;
    }

    .d_line_all .list .right {
        width: calc(100% - 80px);
    }

    .d_line_all .list h3 {
        font-size: 20px;
    }

    .d_line_all .list>li {
        padding: 24px 16px;
    }

    .d_line_all .list>li .desc {
        font-size: 15px;
    }

    .li_2_box {
        gap: 30px;
        grid-template-columns: repeat(2, 1fr);
    }

    .li_2_box .img_wrap {
        margin-bottom: 30px;
    }

    .li_2_box h3 {
        font-size: 20px;
    }

    .li_2_box .desc {
        padding: 0 30px 30px 0px;
        font-size: 15px;
    }

    .Overview_wrap {
        padding: 40px 20px;
    }

    .introduce_7 h3 {
        font-size: 20px;
    }

    .introduce_7 .con4 p {
        margin-bottom: 20px;
    }

    .introduce_7 .con4 .c1 {
        margin-bottom: 30px;
    }




}

@media screen and (max-width: 768px) {
    .d_line_all .list {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px
    }

    .step5 .txt b {
        font-size: 16px;
        margin: 14px;
    }

    .step5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .step5 li:after {
        content: none
    }

    .li_2_box {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }

    .li_2_box h3 {
        font-size: 17px;
    }

    .li_2_box .img_wrap {
        margin-bottom: 20px;
    }

    .introduce_7 h3 {
        font-size: 17px;
    }
}

@media screen and (max-width: 640px) {
    .step5 .ico {
        width: 80px;
        height: 80px;
    }

    .step5 li span {
        font-size: 16px;
        line-height: 0;
    }

    .step5 p {
        line-height: 1.4;
    }

    .d_line_all .list h3 {
        font-size: 17px;
    }

    .d_line_all .list>li .desc {
        font-size: 14px;
    }

    .Overview_wrap {
        padding: 20px;
    }

    .li_2_box h3 {
        font-size: 20px;
        padding: 0;
    }

    .li_2_box .desc {
        padding: 0 20px 20px 0px;
    }

    .introduce_7 .tab_menu_wrap2 .tab_menu ul>li a {
        padding: 8px 6px 10px 6px;
    }
}

/*sub_page 업종별 솔루션*/
.list_st01 {
    grid-template-columns: repeat(1, 1fr);
    display: grid;
    gap: 30px;
}

.list_st01>li {
    box-sizing: border-box;
    padding: 30px 50px;
    font-size: 17px;
    line-height: 1.6;
    border: 1px solid #e0e0e0;
    animation: blink 1.2s linear infinite;
}

.list_st01>li h3 {
    font-size: 28px;
    font-weight: 700;
    color: #333;
}

.list_st01>li h3 span {
    display: block;
    font-size: 30px;
    font-weight: inherit;
    color: var(--color-point);
    display: inline-block;
    margin-right: 10px;
}

.list_st01>li p {
    margin: 10px 0 20px 0;
    font-size: 19px;
}

.list_st01>li>ul {
    margin-top: 15px
}

.list_st01>li>ul>li b {
    font-weight: 500;
}






.business_1 h4,
.business_2 h4 {
    color: #000;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 10px;
}

.service_item {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.service_wrap2 {
    width: 100%;
}

.service_wrap2 .tit {
    font-size: 18px;
    font-weight: 700;
    color: #0066ff;
    padding: 10px 16px;
    border: 1px solid #0066ff;
    border-radius: 50px;
    display: inline-block;
}

.service_wrap2 .list {
    text-align: center;
}

.service_wrap2 .list .ico {
    border-radius: 2px;
    width: 84px;
    height: 84px;
    margin: 0 auto;
}

.service_wrap2 .list p {
    margin-top: 16px;
    font-size: 17px;
}

.service_wrap2 .list .list01 .ico {
    background: url('../img/main_con3_ico1.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list02 .ico {
    background: url('../img/main_con3_ico2.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list03 .ico {
    background: url('../img/main_con3_ico3.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list04 .ico {
    background: url('../img/main_con3_ico4.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list05 .ico {
    background: url('../img/main_con3_ico5.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list06 .ico {
    background: url('../img/main_con3_ico6.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list07 .ico {
    background: url('../img/main_con3_ico7.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list08 .ico {
    background: url('../img/main_con3_ico8.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list09 .ico {
    background: url('../img/main_con3_ico9.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list10 .ico {
    background: url('../img/main_con3_ico10.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list11 .ico {
    background: url('../img/main_con3_ico11.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list12 .ico {
    background: url('../img/main_con3_ico12.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list13 .ico {
    background: url('../img/main_con3_ico13.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list14 .ico {
    background: url('../img/main_con3_ico14.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list15 .ico {
    background: url('../img/main_con3_ico15.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list16 .ico {
    background: url('../img/main_con3_ico16.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.service_wrap2 .list .list17 .ico {
    background: url('../img/main_con3_ico17.png') no-repeat #f5f9ff;
    background-size: 46px;
    background-position: center;
}

.business_2 .list_st01 {
    margin-top: 30px;
}

.business_1 .img_box,
.business_2 .img_box {
    margin-top: 40px;
}

.business_2 .blue_box {
    border: 1px solid #c9deff;
    padding: 50px 0;
    text-align: center;
    border-radius: 4px;
    background: #fff;
    margin: 20px 0 60px 0;
}

.business_2 .tab_menu_wrap2 .tab-list {
    max-width: 1320px
}

.business_2 .con1 p {
    width: 100%;
    max-width: 900px
}

.business_2 .li_box_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    flex-wrap: wrap;
    font-size: 17px;
}

.business_2 .li_box_wrap li {
    position: relative;
    margin: 0;
    background: #fff;
    text-align: center;
    border: 1px solid #e0e0e0;
    padding: 30px 20px;
}

.business_2 .li_box_wrap li span {
    display: inline-block;
    width: 40px;
    background: #000;
    color: #fff;
    position: absolute;
    left: -4px;
    top: -4px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
}

.business_2 .li_box_wrap .txt b {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: #0066ff;
    margin-bottom: 10px;
    margin-top: 30px;
}

.business_2 .li_box_wrap .txt p {
    text-align: c;
    width: 80%;
    margin: 0 auto;
}

.business_2 .li_box_wrap .ico {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.4;
    margin: 0 auto;
}

.business_2 .li_box_wrap .ico {
    margin: 10px 0;
}

.business_2 .li_box_wrap li:nth-last-child(odd) {
    /* background: #f5f9ff;border: 1px solid #c9deff; */
}

.business_2 .li_box_wrap li:nth-last-child(odd) span {
    background: #000;
}

.business_2 .li_box_wrap li:hover {}

.business_2 h2.tit_bn {
    background: #18293f;
    text-align: center;
    color: #fff;
    padding: 20px;
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 40px;
}

@media screen and (max-width: 970px) {
    .business_2 .list_st01 {
        margin-top: 20px;
    }

    .business_1 .service_wrap2 .list {
        margin-top: 10px;
    }

    .business_1 .service_wrap2 .list p {
        font-size: 15px;
    }

    .list_st01>li p {
        font-size: 15px;
    }

    .business_1 .con3 .s_dot {
        font-size: 15px;
    }

    .business_1 .con3 .col-style__left {
        margin-bottom: 4px;
    }

    /*    .slider3 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    } */
    .tab_menu_wrap2 .tab_menu ul {
        flex-wrap: wrap;
    }

    .service_wrap2 .list .ico {
        width: 100%;
        min-width: 80px;
    }

    .service_wrap2 .list {
        margin-top: 0px;
    }

    .business_2 .li_box_wrap {
        gap: 20px;
    }

    .business_2 .li_box_wrap .txt b {
        font-size: 20px;
    }

    .business_2 .li_box_wrap li {
        padding: 20px 10px;
    }

    .business_2 .li_box_wrap .txt p {
        width: 95%;
    }

    .business_2 .li_box_wrap li span {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .business_2 .li_box_wrap {
        font-size: 14px;
    }

    .business_2 h2.tit_bn {
        font-size: 18px;
    }
}

@media screen and (max-width: 768px) {
    .service_item {
        display: grid;
        grid-template-columns: repeat(4, 1fr)
    }

    .service_wrap2 .list p {
        font-size: 14px;
        margin-top: 8px;
    }

    .business_1 .service_wrap2 .list p {
        font-size: 14px;
    }

    .business_1 h4,
    .business_2 h4 {
        font-size: 16px;
    }

    .list_st01 {
        gap: 20px
    }

    .list_st01>li {
        padding: 26px 20px;
    }

    .list_st01>li h3 span {
        font-size: 18px;
        margin-right: 5px;
    }

    .list_st01>li h3 {
        font-size: 18px;
    }

    .list_st01>li p {
        font-size: 14px;
    }

    .business_1 .con3 .s_dot {
        font-size: 14px;
    }

    .tab_menu_wrap2 .tab_menu ul>li {
        font-size: 15px;
        padding: 10px 6px 12px 6px;
        line-height: 1.5;
    }

    .slider3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px
    }

    .tab_menu_wrap2 .tab-content {
        padding: 60px 0 0 0;
    }
}

@media screen and (max-width: 640px) {
    .service_item {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px
    }

    .list_st01 {
        gap: 16px
    }

    .business_2 .li_box_wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .business_2 .li_box_wrap .txt b {
        font-size: 18px;
    }

    .business_2 .li_box_wrap li {
        padding: 20px 10px;
    }

    .tab_menu_wrap2 .tab-content {
        padding: 40px 0 0 0;
    }

    .business_2 .blue_box {
        padding: 30px 20px;
    }

    .business_2 .tab_menu_wrap2 .tab_menu ul>li a {
        padding: 8px 6px 10px 6px;
    }
}

/*sub_page 고객지원*/
.guide .tab_menu_wrap2 .tab-list {
    max-width: 1320px;
}

.guide .tit_wrap {
    border: 1px solid #c9deff;
    border-radius: 6px;
    padding: 50px;
    text-align: center;
    position: relative;
    margin: 40px 0;
    box-sizing: border-box;
}

.guide .tit_wrap .tit {
    font-size: 24px;
    font-weight: 700;
    color: #0066ff;
    line-height: 28px;
    position: relative;
    display: inline-block;
}

.guide .review_box {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    flex-direction: column-reverse;
}

.guide .review_box .pp_box {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: row-reverse;
}

.guide .review_box .pp_box .name {
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
}

.guide .tit_wrap .tit:before {
    content: "";
    width: 18px;
    height: 13px;
    background: url(/img/sub/qmark_icon.svg) no-repeat;
    top: -2px;
    left: -24px;
    position: absolute;
}

.guide .tit_wrap .tit:after {
    content: "";
    width: 18px;
    height: 13px;
    background: url(/img/sub/qmark_icon.svg) no-repeat;
    top: -3px;
    right: -24px;
    position: absolute;
    transform: rotate(180deg);
}

.guide .faq_wrap {
    margin-top: 70px;
    position: relative;
    border-top: 2px solid #555;
    margin-bottom: 20px;
}

.guide .faq_wrap li h3 {
    font-size: 18px;
    font-weight: 500;
    color: #000;
}

.guide .faq_wrap li h3 .tit_bg {
    color: var(--color-point);
    margin-right: 14px;
    font-size: 24px;
    top: 27px;
    left: 28px;
    display: inline-block;
    position: absolute;
    text-align: center;
}

.guide .faq_wrap li {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    letter-spacing: -0.5pt;
    font-size: 1.2rem;
    font-weight: 500;
    color: #555;
    line-height: 30px;
}

.guide .faq_wrap li h3.faq_li_open a {
    color: #000;
}

.faq_con .con_inner {
    border-top: 1px solid #ddd;
    padding: 50px 50px 50px 40px;
    background: #f9f9f9;
    margin: 0;
    font-weight: 300;
    font-size: 18px;
}

.faq_con .con_inner>div {
    width: 100%;
    max-width: 900px
}

.guide .faq_wrap li h3 {
    padding: 30px 45px 30px 60px;
}

.answer {
    font-weight: 700;
    float: left;
    margin-right: 14px;
    width: 16px;
    font-size: 20px;
    line-height: 100%;
    color: #666;
    margin-top: 3px;
}

.faq_con .con_inner b {
    font-weight: 600;
}

.guide .tab_menu_wrap2 .tab-content {
    padding: 70px 0 0 0;
}

.top_bn {
    display: flex;
    justify-content: space-between;
    padding: 60px 80px;
    background: #f5f9ff;
    margin-bottom: 50px;
}

.top_bn .txt {
    font-size: 50px;
    color: #000;
    font-weight: 400;
}

.top_bn .s_txt {
    font-size: 20px;
    color: #000;
    font-weight: 600;
}

.top_bn .tit {
    margin-bottom: 16px;
    line-height: 1.1;
    margin-top: 16px;
}

.top_bn .txt b {
    color: #0066ff;
    font-weight: 800;
}

.top_bn .btn_black a {
    color: #fff;
    display: block;
    height: 60px;
    line-height: 60px;
}

.top_bn .btn_black {
    display: inline-block;
    width: 100%;
    max-width: 220px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.075em;
    position: relative;
    text-align: center;
    border: 1px solid #000;
    background: #000;
    color: #fff;
}

.membership_login h3 {
    font-size: 28px;
    letter-spacing: -0.5px;
    color: #000;
}

.membership_login .con1 .d_line {
    margin-top: 30px;
}

.membership_login .con1 .d_line .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
}

.membership_login .con1 .d_line .list>li {
    box-sizing: border-box;
    padding: 30px 50px;
    border: 1px solid #e0e0e0;
}

.membership_login .con1 .d_line .list>li .desc {
    font-size: 17px;
    line-height: 1.4;
}

.membership_login .con1 .d_line .list>li .desc .btn_wrap {
    margin-top: 10px;
}

.membership_login .con1 .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.membership_login .con1 .flex .left {
    flex-basis: 135px;
    flex-shrink: 0;
}



@media screen and (max-width: 970px) {
    .top_bn {
        padding: 30px;
    }

    .top_bn .txt {
        font-size: 32px;
    }

    .top_bn .tit {
        margin-bottom: 5px;
    }

    .top_bn .s_txt {
        font-size: 18px;
    }

    .guide .tit_wrap {
        margin: 30px 0;
        padding: 40px;
    }

    .guide .faq_wrap {
        margin-top: 40px;
    }

    .membership_login .con1 .d_line .list h3 {
        font-size: 20px;
    }

    .membership_login .con1 .d_line .list>li .desc {
        font-size: 15px;
        margin-top: 4px;
    }

    .membership_login .con1 .flex {
        flex-direction: column;
    }

    .membership_login .con1 .d_line .list>li {
        padding: 30px;
        text-align: center;
    }

    .membership_login .con1 .flex .left {
        margin-right: 0;
    }

    .membership_login .con1 .d_line .list>li {
        padding: 30px;
    }

    .membership_login .con1 .d_line .list .left {
        flex-basis: 80px;
        width: 80px;
    }

    .membership_login .con1 .d_line .list .right {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .guide .tit_wrap .tit {
        font-size: 18px;
        line-height: 1.4;
    }

    .guide .faq_wrap li h3 {
        padding: 20px 30px 20px 50px;
    }

    .guide .faq_wrap li h3 .tit_bg {
        top: 15px;
        left: 18px;
    }

    .faq_con .con_inner {
        padding: 30px 30px 30px 20px
    }
}

@media screen and (max-width: 640px) {
    .guide .tit_wrap .tit {
        font-size: 16px;
    }

    .guide .review_box .pp_box .name {
        font-size: 14px;
    }

    .guide .tit_wrap {
        margin: 20px 0;
    }

    .guide .tit_wrap {
        margin: 30px 0;
        padding: 30px 40px
    }

    .guide .faq_wrap {
        margin-top: 30px;
    }

    .membership_login .con1 .flex {
        gap: 10px;
        flex-direction: row;
        align-items: flex-start;
    }

    .membership_login .con1 .d_line .list {
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
    }

    .membership_login .con1 .d_line .list h3 {
        font-size: 17px;
    }

    .membership_login .con1 .d_line .list>li .desc {
        font-size: 14px;
    }

    .membership_login .con1 .d_line .list>li {
        padding: 20px 16px;
        text-align: left;
    }

    .top_bn {
        flex-direction: column-reverse;
        padding: 50px 10px;
    }

    .top_bn .membership_login .con1 .d_line .list {
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
    }

    .membership_login .con2 .list {
        gap: 12px;
    }

    .membership_login .con1 .flex .left {
        margin-right: 14px;
    }

    .top_bn .flex {
        flex-direction: column-reverse;
        padding: 50px 10px;
    }

    .top_bn .txt {
        text-align: center;
        font-size: 22px;
        margin-top: 10px;
    }

    .top_bn .s_txt {
        font-size: 14px;
    }

    .top_bn .img_obj {
        text-align: center;
    }

    .top_bn .img_obj img {
        max-width: 240px;
    }

    .top_bn .btn_wrap {
        margin: 0 auto;
        padding-top: 10px;
    }

    .membership_login .con1 .d_line {
        margin-top: 20px;
    }
}