@charset "utf-8";

:root {
    --content-w: 1200px;
    --font-color: #111;
    --font-size: 18px;
}

@media screen and (max-width:980px) {
    :root {
        --font-size: 16px;
    }
}

@media screen and (max-width:480px) {
    :root {
        --font-size: 14px;
    }
}

/* iOS에서 input 포커스 시 확대 방지 */
@supports (-webkit-overflow-scrolling: touch) {

    input,
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* 초기화 */
html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', 'Malgun Gothic', 'dotum', 'Sans-serif';
    color: var(--font-color);
    font-size: var(--font-size);
    font-weight: 500;
    letter-spacing: -0.25px;
    background: #fff;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Pretendard', 'Malgun Gothic', 'dotum', 'Sans-serif';
    color: var(--font-color);
    ;
    font-size: var(--font-size);
    font-weight: 500;
}

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

ul,
li,
dl,
dt,
dd {
    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;
    font-size: var(--font-size);
    font-weight: 500;
    outline: none;
}

input,
button {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', 'Malgun Gothic', 'dotum', 'Sans-serif';
    font-size: var(--font-size);
    font-weight: 500;
}

input[type="submit"] {
    cursor: pointer
}

button {
    cursor: pointer
}

textarea,
select {
    font-family: 'Pretendard', 'Malgun Gothic', 'dotum', 'Sans-serif';
    color: var(--font-color);
    font-size: var(--font-size);
    font-weight: 500;
    outline: none;
}

select {
    margin: 0
}

p {
    margin: 0;
    padding: 0;
    word-break: break-all
}

hr {
    display: none
}

pre {
    overflow-x: scroll;
    font-size: var(--font-size);
}

a {
    color: var(--font-color);
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

a:hover {
    color: var(--color);
    text-decoration: none;
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.placeholdersjs {
    color: #aaa !important
}

input::placeholder {
    color: #aaa;
}

input::-webkit-input-placeholder {
    color: #aaa;
}

input::-ms-input-placeholder {
    color: #aaa;
}

textarea::placeholder {
    color: #aaa;
}

textarea::-webkit-input-placeholder {
    color: #aaa;
}

textarea::-ms-input-placeholder {
    color: #aaa;
}

#panel,
#container_wrap,
#tnb_wrap,
#tnb,
#header_wrap,
#header,
#gnb_wrap,
#gnb,
#body_wrap,
#side_wrap,
#content_wrap,
#bottom_wrap,
#bottom,
#bnb_wrap,
#bnb,
#footer_wrap,
#footer {
    display: block;
    position: relative;
}

#panel:after,
#container_wrap:after,
#tnb_wrap:after,
#tnb:after,
#header_wrap:after,
#header:after,
#gnb_wrap:after,
#gnb:after,
#body_wrap:after,
#side_wrap:after,
#content_wrap:after,
#bottom_wrap:after,
#bottom:after,
#bnb_wrap:after,
#bnb:after,
#footer_wrap:after,
#footer:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}


#container_wrap {
    width: 100%;
    min-height: 100vh;
	min-height: -webkit-fill-available; /* 안드로이드/iOS 웹뷰 대응 */
    /*padding: 100px 0 0 0;*/
}

@media screen and (max-width:980px) {
    #container_wrap {
        /*padding: 56px 0;*/
    }
}



#header {
    width: 100%;
    padding: 0 130px;
}

#header a.logo {
    display: block;
    float: left;
}

#header a.logo img {
    width: 173px
}

#header a.btn_back {
    display: block;
    float: left;
    width: 30px;
}

#header a.btn_back img {
    vertical-align: middle;
}

#header .title {
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 600;
}

#header ul.tnb li a .count {
    display: block;
    position: absolute;
    right: -5px;
    top: 14px;
    min-width: 16px;
    padding: 0 4px;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    background: #c7000b;
    border-radius: 10px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 30px auto;
}

.container.w-1180 {
    max-width: 1180px;
}

@media screen and (max-width: 1540px) {
    .container {
        margin: 0 auto;
        padding: 0 16px;
    }
}

@media screen and (max-width:980px) {
    .container {
        margin: 0;
        padding: 0 16px;
    }
}

ul.tnb {
    display: block;
    float: right;
}

ul.tnb:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

ul.tnb li {
    display: block;
    float: left;
    margin: 0 0 0 16px;
}

ul.tnb li:first-child {
    margin: 0;
}

ul.tnb li.mobile {
    display: none;
}

ul.tnb li a {
    display: inline-block;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    line-height: 34px;
    border-radius: 4px;
}

/*ul.tnb li a img {width:24px;height:auto;}*/
ul.tnb li i {
    font-size: 24px;
    vertical-align: middle;
}

ul.tnb li a.btn_reg {
    padding: 0 16px;
    color: #fff;
    background: #17393c
}

ul.tnb li a.btn_normal {
    padding: 0 12px;
    font-size: 12px !important;
    line-height: 30px !important;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 4px;
}

ul.tnb li a.btn_basic {
    padding: 0 8px;
    font-size: 10px !important;
    line-height: 20px !important;
    color: #17393c;
    background: #fff;
    border: 1px solid #17393c;
    border-radius: 4px;
}


.nav_user {
    float: right;
    display: none;
}

#header .nav_user {
    display: block;
}

.nav_user ul {
    display: flex;
    gap: 16px;
}

.nav_user ul li {
    display: inline-block;
}

.nav_user ul li a {
    display: inline-block;
    line-height: 100px;
}

.nav_user ul li img {
    width: 32px;
    height: 32px;
}

.nav_user ul li img.no_bd {
    border: 0;
    border-radius: 0;
}

.nav_user ul li i {
    font-size: 16px;
}

.nav_user ul li.mobile {
    display: none;
}

.nav_user ul li ul {
    display: none;
    position: absolute;
    right: 0;
    top: 80px;
    width: 140px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    z-index: 99;
}

.nav_user ul li ul li {
    display: block;
}

.nav_user ul li ul li a {
    display: block;
    position: relative;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    line-height: 40px;
    border-radius: 10px;
}

.nav_user ul li ul li a:hover {
    background: #f2f3f7
}

.nav_user ul li ul li .arrow {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    margin: -10px 0 0 0;
    line-height: 20px;
}

.nav_user ul li ul li .arrow i {
    font-size: 12px;
}

.nav_user ul li ul li ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 40px;
    width: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    z-index: 99;
}


.nav_user .flag {
    position: relative;
}

.nav_user a.btn_national {}

.nav_user a.btn_national img {
    width: 32px;
    height: 32px;
    border: solid 1px #ccc;
    border-radius: 50%;
}

.nav_user .selec_lgge {
    display: none;
    position: absolute;
    left: 50%;
    top: 40px;
    width: 50px;
    margin: 0 0 0 -25px;
    padding: 8px 0;
    text-align: center;
    line-height: 32px;
    background: #fff;
    border: solid 1px #ddd;
    z-index: 1;
}

.nav_user .selec_lgge a {
    float: none;
    margin: 0 auto 5px auto;
    line-height: normal;
    text-align: center;
}

.nav_user .selec_lgge a:last-child {
    margin: 0 auto;
}

.nav_user .selec_lgge a img {
    width: 32px;
    border: solid 1px #eee;
    border-radius: 50%;
}

@media screen and (max-width:980px) {
    #header a.logo img {
        width: 91px;
        height: auto;
    }

    #header .title {
        float: none;
        margin: 0 60px;
        text-align: center;
    }

    ul.tnb li {
        display: none;
    }

    ul.tnb li.mobile {
        display: block;
    }

    ul.tnb li a {
        font-size: 13px;
    }

    .nav_user ul li a {
        line-height: 56px;
    }

    .nav_user ul li ul li ul {
        left: auto;
        right: 100%;
    }

    .nav_user ul li.mobile {
        display: block;
    }
}


#viz {
    width: 1540px;
    margin: 0px auto;
}

#viz .swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

#viz .swiper-slide .pc {
    display: block;
}

#viz .swiper-slide .mobile {
    display: none;
}

@media screen and (max-width:980px) {
    #viz {
        width: 100%;
        padding: 0 20px;
    }

    #viz .swiper-slide img {
        max-width: 100%;
        border-radius: 15px;
    }
}

@media screen and (max-width:400px) {
    #viz {
        width: 100%;
        margin: 0px auto;
    }

    #viz .swiper-slide .pc {
        display: none;
    }

    #viz .swiper-slide .mobile {
        display: block;
    }

}


section.intro {
    padding: 30px 0 0 0;
}


.category {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 40px auto;
}

.category:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.category .item {
    display: block;
    float: left;
    width: 12.28%;
    text-align: center;
}

.category .item .icon {
    display: block;
    margin: 0 0 16px 0;
}

.category .item .icon img {
    max-width: 70px;
    border-radius: 50%;
    background: #E1F4FE;
}

.category .item .icon .normal {
    background: #f3f7ff;
}

.category .item p {
    font-size: 16px;
}

.category .item img {
    max-width: 70px;
}

/*
section.intro {padding:60px 0;}
.swiper_ctg {width:100%;max-width:960px;margin:0 auto 40px auto;}
.swiper_ctg .swiper-slide {width:70px;text-align:center;}
.swiper_ctg .swiper-slide .icon {display:block;margin:0 0 16px 0;}
.swiper_ctg .swiper-slide .icon img {max-width:71px;max-height:70px;}
.swiper_ctg .swiper-slide p {font-size:20px;}
*/

.sch_form {
    display: block;
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.sch_form:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.sch_form .input {
    display: block;
    width: 100%;
    height: 80px;
    padding: 0 40px;
    font-size: 24px;
    background: #f7f8f9;
    border: none;
    border-radius: 50px;
}

.sch_form .btn_search {
    display: block;
    position: absolute;
    right: 40px;
    top: 0;
    width: 40px;
    height: 80px;
    background: none;
    border: none;
    z-index: 1;
}

.sch_form2 {
    display: block;
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.sch_form2:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.sch_form2 .input {
    display: block;
    width: 100%;
    height: 80px;
    padding: 0 40px;
    font-size: 24px;
    background: #f7f8f9;
    border: none;
    border-radius: 50px;
}

.sch_form2 .btn_search {
    display: block;
    position: absolute;
    right: 40px;
    top: 0;
    width: 40px;
    height: 80px;
    background: none;
    border: none;
    z-index: 1;
}


@media screen and (max-width:980px) {
    section.intro {
        padding: 20px 0;
    }

    .swiper_ctg {
        margin: 0;
    }

    .swiper_ctg .swiper-slide p {
        font-size: 16px;
    }

    .sch_form {
        display: none;
    }
}

@media screen and (max-width:480px) {
    .swiper_ctg .swiper-slide p {
        font-size: 14px;
    }

    .sch_form2 .input {
        display: block;
        width: 100%;
        height: 50px;
        padding: 0 30px;
        font-size: 18px;
        background: #f7f8f9;
        border: none;
        border-radius: 50px;
    }

    .sch_form2 .btn_search {
        display: block;
        position: absolute;
        right: 30px;
        top: 10px;
        width: 20px;
        height: 30px;
        background: none;
        border: none;
        z-index: 1;
    }

    .sch_form2 .btn_search img {
        width: 30px;
        height: 30px;
    }

    .sch_form2 .input::placeholder {
        font-size: 18px !important;
    }

    .tail-right {
        display: none;
    }
}


@media screen and (max-width:980px) {
    section.intro {
        width: auto;
        max-width: auto;
        margin: 5px 20px;
        padding: 0;
        border-radius: 15px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .category {
        width: auto;
        max-width: auto;
        margin: 0 10px;
        padding: 20px 10px;

    }

    .category .item {
        width: 25%;
        padding: 10px 0;
    }

    .category .item p {
        font-size: 16px;
    }

    /*.swiper_ctg {margin:0;}
.swiper_ctg .swiper-slide p {font-size:16px;}*/
    .sch_form {
        display: none;
    }
}

@media screen and (max-width:480px) {
    .category .item .icon {
        margin: 0 0 8px 0;
    }

    .category .item .icon img {
        width: 60px;
    }

    .category .item p {
        font-size: 12px;
    }

    section.lounge a.btn_edqa .arrow {
        right: 0px !important;
    }

    /*.swiper_ctg .swiper-slide p {font-size:14px;}*/
}



section.banner {
    padding: 0 0 60px 0;
}

section.banner .cont {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
}

section.banner h3 {
    display: block;
    margin: 0 0 10px 0;
    color: #17393C;
    font-size: 24px;
    font-weight: 700;
}

section.banner .sub {
    display: block;
    margin: 0 0 30px 0;
    color: #424242;
    font-size: 18px;
}

.swiper_bnr {}

.swiper_bnr .swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

ul.ctg_mobile {
    display: none;
    margin: 20px 20px 0 20px;
}

ul.ctg_mobile:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

ul.ctg_mobile li {
    display: block;
    float: left;
    width: 25%;
    text-align: center;
}

ul.ctg_mobile li .icon {
    display: block;
    margin: 0 0 5px 0;
}

ul.ctg_mobile li .icon img {
    width: 60px;
    height: auto;
    border-radius: 50%;
}

ul.ctg_mobile li p {
    font-size: 16px;
}

@media screen and (max-width:1540px) {
    section.banner h3 {
        padding: 0 20px;
    }

    section.banner .sub {
        padding: 0 20px;
    }
}

@media screen and (max-width:980px) {
    section.banner {
        padding: 0 0 20px 0;
        /*border-bottom:solid 10px #eee*/
    }

    section.banner h3 {
        display: block;
        font-size: 20px;
    }

    section.banner .sub {
        display: block;
        font-size: 16px;
    }

    ul.ctg_mobile {
        display: block;
    }
}

@media screen and (max-width:760px) {
    section.banner h3 {
        margin: 0 0 5px 0;
        font-size: 18px;
    }

    section.banner .sub {
        margin: 0 0 15px 0;
        font-size: 14px;
    }
}

@media screen and (max-width:480px) {
    ul.ctg_mobile li .icon img {
        width: 48px;
        height: auto;
    }

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

section.lounge {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 40px 0;
}

section.lounge img {
    border-radius: 20px;
    display: block;
    max-width: 100%;
    width: 100%;
}

section.lounge a.btn_edqa {
    display: block;
    position: absolute;
    top: 27%;
    left: 5%;
    width: 95%;
    font-size: 32px;
    color: #fff;
    font-weight: 700;
}

section.lounge a.btn_edqa .icon {
    display: inline-block;
    width: 46px;
    height: 46px;

    text-align: center;
    line-height: 30px;
    border: solid 6px #183a3d;
    border-radius: 50%;
}

section.lounge a.btn_edqa .icon i {
    font-size: 32px;
}

section.lounge a.btn_edqa .arrow {
    display: block;
    position: absolute;
    right: 30px;
    top: 50%;
    line-height: 40px;
    margin: -20px 0 0 0;
}

section.lounge a.btn_edqa .arrow i {
    font-size: 32px;
}

@media screen and (max-width:480px) {
    section.lounge {
        max-width: 90%;
        padding: 0 0 25px 0;
    }

    section.lounge img {
        width: 100%;
        height: 100px;
    }

    section.lounge a.btn_edqa {
        font-size: 18px;
        width: 90%;
        top: 30%;
    }

    section.lounge a.btn_edqa .arrow i {
        font-size: 20px;
    }
}



section.service {
    padding: 0 20px 72px 20px;
    overflow: hidden;
}

section.service .cont {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

section.service h3 {
    display: block;
    color: #17393C;
    font-size: 27px;
    font-weight: 700;
}

section.service .sub {
    display: block;
    margin: 0 0 20px 0;
    width: 100%;
    color: #a1a1a1;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.swiper_tabs {
    margin: 0 0 0 0;
}

.swiper_tabs .swiper-slide {
    width: auto;
}

.swiper_tabs .swiper-slide a {
    display: inline-block;
    padding: 0 16px;
    color: #767676;
    font-size: 16px;
    line-height: 30px;
    background: #F7F8F9;
    border-radius: 30px;
}

.swiper_tabs .swiper-slide a:hover {
    background: #17393C;
    font-weight: 600;
    color: #fff;
}

.swiper_tabs .swiper-slide a.active {
    color: #fff;
    font-weight: 600;
    background: #17393C
}

section.service ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

section.service ul li {
    display: block;
    position: relative;
    width: calc(25% - 15px);
    box-sizing: border-box;
}

section.service ul li:nth-child(4n) {
    margin: 0;
}

section.service ul li:nth-child(5),
section.service ul li:nth-child(6) {
    display: none
}

section.service ul li a.thumb {
    display: block;
    position: relative;
    margin: 0 0 16px 0;
}

section.service ul li a.thumb img {
	width: 100%;             /* 부모 요소 너비에 맞춤 */
    aspect-ratio: 4 / 3;     /* 어떤 이미지든 강제로 4:3 비율 유지 */
    object-fit: cover;       /* 비율을 맞추느라 이미지가 찌그러지지 않게 중심부 커팅 */
    
    /* 공통 스타일 */
    border-radius: 10px;
    border: 1px solid #ddd;
     display: block;          /* 하단 미세한 공백 제거 */
	 border-radius: 10px;

}

section.service ul li button.good {
    display: block;
    position: absolute;
    color: red;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    z-index: 10;
}

section.service ul li button.good i {
    font-size: 20px;
}

section.service ul li .ctg {
    margin: 0 0 10px 0;
    color: #767676;
    font-size: 16px;
    font-weight: 400;
    min-height: 19px;
}

section.service ul li .ctg span {
    padding: 5px 10px;
    font-size: 12px;
    color: #17393C;
    border: 1px solid #17393C;
    border-radius: 10px;
}


section.service ul li a.title {
    display: block;
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

section.service ul li .price {
    margin: 0 0 4px 0;
    color: #17393C;
    font-size: 20px;
    font-weight: 600;
}

section.service ul li .val {
    color: #767676;
    font-size: 16px;
    font-weight: 400;
}

section.service ul li .val img {
    margin: 0 0 4px 0;
    vertical-align: middle
}

section.service ul li .box {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
}

section.service ul li a.thumb_icon {
    display: block;
    text-align: center;
    line-height: 250px;
    background: #DFF8FB
}

section.service ul li .con {
    padding: 40px 10px;
    ;
    text-align: center;
}

section.service ul li a.label {
    display: block;
    margin: 0 0 10px 0;
    color: #195257;
    font-size: 36px;
    font-weight: 700;
}

section.service ul li p {
    color: #666;
    font-size: 24px;
    font-weight: 400;
    word-break: keep-all;
}


section.service .swiper_portfolio .box {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

section.service .swiper_portfolio a.thumb_icon {
    display: block;
    text-align: center;
    line-height: 170px;
    background: #DFF8FB
}

section.service .swiper_portfolio a.thumb_icon img {
    width: 50%;
    height: auto;
    border-radius: 10px;
}

section.service .swiper_portfolio .con {
    padding: 20px 10px;
    text-align: center;
}

section.service .swiper_portfolio a.label {
    display: block;
    margin: 0 0 10px 0;
    color: #195257;
    font-size: 20px;
    font-weight: 700;
}

section.service .swiper_portfolio p {
    color: #666;
    font-size: 24px;
    font-weight: 400;
    word-break: keep-all;
}


@media screen and (max-width:1540px) {
    section.service h3 {}

    section.service .sub {}
}

@media screen and (max-width:1024px) {
    section.lounge {
        margin: 0 20px;
    }

    section.service {}

    section.service h3 {
        font-size: 20px;
    }

    section.service .sub {
        font-size: 16px;
    }

    .swiper_tabs .swiper-slide a {
        font-size: 14px;
    }

    section.service ul {
        gap: 15px;
    }

    section.service ul li {
        width: calc(33.333% - 10px);
        margin: 0;
    }

    section.service ul li:nth-child(4n) {
        margin: 0;
    }

    section.service ul li:nth-child(3n) {
        margin: 0;
    }

    section.service ul li:nth-child(5),
    section.service ul li:nth-child(6) {
        display: block
    }

    section.service ul li a.title {
        margin: 0 0 5px 0;
        font-size: 16px;
    }

    section.service ul li .val {
        font-size: 14px;
    }

    section.service ul li a.thumb button.good {
        right: 10px;
        top: 10px;
        width: 24px;
        height: 24px;
        color: red;
    }

    section.service ul li .ctg {
        margin: 8px 0 10px 0;
        font-size: 12px;
    }

    section.service ul li .price {
        font-size: 18px;
    }




    section.service ul.pro li {
        width: calc(49% - 5px);
        margin: 0 10px 10px 0;
    }

    section.service ul.pro li:nth-child(4n) {
        margin: 0 10px 10px 0;
    }

    section.service ul.pro li:nth-child(3n) {
        margin: 0 10px 10px 0;
    }

    section.service ul.pro li:nth-child(2n) {
        margin: 0 0 10px 0;
    }

    section.service ul li a.thumb_icon {
        line-height: 180px;
    }

    section.service ul li a.thumb_icon img {
        width: 120px;
        height: auto;
    }

    section.service ul li .con {
        padding: 30px 10px;
    }

    section.service ul li a.label {
        font-size: 30px;
    }

    section.service ul li p {
        font-size: 18px;
    }

    section.service .swiper_portfolio .box {
        width: calc(100% - 5px);
        margin: 0 10px 10px 0;
    }

    section.service .swiper_portfolio a.thumb_icon {
        line-height: 120px;
    }

    section.service .swiper_portfolio a.thumb_icon img {
        width: 100px;
        height: auto;
    }

    section.service .swiper_portfolio .con {
        padding: 10px 10px;
    }

    section.service .swiper_portfolio a.label {
        font-size: 14px;
    }

    section.service .swiper_portfolio p {
        font-size: 14px;
    }


}

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

    section.service h3 {
        margin: 0 0 5px 0;
        font-size: 18px;
    }

    section.service .sub {
        margin: 0 0 15px 0;
        font-size: 13px;
    }

    section.service ul {
        gap: 10px;
    }

    section.service ul li {
        width: calc(50% - 5px);
        margin: 0;
    }

    section.service ul li:nth-child(4n) {
        margin: 0;
    }

    section.service ul li:nth-child(3n) {
        margin: 0;
    }

    section.service ul li:nth-child(2n) {
        margin: 0;
    }

    section.service ul li a.thumb_icon {
        line-height: 140px;
    }

    section.service ul li a.thumb_icon img {
        width: 80px;
        height: auto;
    }

    section.service ul li .con {
        padding: 20px 20px;
    }

    section.service ul li a.label {
        margin: 0 0 5px 0;
        font-size: 24px;
    }

    section.service ul li p {
        font-size: 16px;
    }
}

@media screen and (max-width:480px) {
    section.service ul li a.thumb_icon {
        line-height: 110px;
    }

    section.service ul li a.thumb_icon img {
        width: 70px;
        height: auto;
    }

    section.service ul li a.label {
        margin: 0 0 5px 0;
        font-size: 24px;
    }

    section.service ul li a.title {
        font-size: 14px;
    }

    section.service ul li .val {
        font-size: 12px;
    }

    section.service ul li .ctg {
        font-size: 12px;
    }

    section.service ul li .price {
        font-size: 18px;
    }

    section.service ul li button.good {
        top: 70px;
    }


    section.service ul li .con {
        padding: 10px 20px;
    }

    section.service ul li a.label {
        font-size: 16px;
    }

    section.service ul li p {
        font-size: 14px;
    }

    header {
        border-bottom: none !important;
    }

    .h_info,
    .log {
        display: none !important;
    }

    section.recruit .half {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px;
    }

    section.recruit .half:nth-child(2) {
        margin-left: 0px !important;
    }

    section.recruit .half .more-btn {
        margin-right: 20px !important;
    }
}


.swiper_pro a.thumb {
    display: block;
    position: relative;
    margin: 0 0 16px 0;
}

.swiper_pro a.thumb img {
    max-width: 320px;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.swiper_pro button.good {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    z-index: 100;
}

.swiper_pro a.title {
    display: block;
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 400;
}

.swiper_pro .val {
    color: #767676;
    font-size: 16px;
    font-weight: 400;
}

.swiper_pro .val img {
    margin: 0 0 4px 0;
    vertical-align: middle
}



.swiper_serv a.thumb {
    display: block;
    position: relative;
    margin: 0 0 16px 0;
}

.swiper_serv a.thumb img {
    width: 100%;
    height: 213px;
    border-radius: 10px;
}

.swiper_serv button.good {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    z-index: 100;
}

.swiper_serv a.title {
    display: block;
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 400;
}

.swiper_serv .val {
    color: #767676;
    font-size: 16px;
    font-weight: 400;
}

.swiper_serv .val img {
    margin: 0 0 4px 0;
    vertical-align: middle
}


#popularity a.thumb {
    display: block;
    position: relative;
    margin: 0 0 16px 0;
}

#popularity a.thumb img {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    /*
	min-height: 241.14px;
    max-height: 241.14px;
    */
    object-fit: cover;
    background: #f5f5f5;
    /* 연한 회색 배경 */
    border: 1px solid #ddd;
}

#popularity button.good {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    z-index: 100;
}

#popularity button.good i {
    font-size: 24px;
    color: red;
    /* 기준 색상을 흰색으로 설정 */
    /*filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));*/
}

#popularity a.title {
    display: block;
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
    /* 줄바꿈 금지 */
    overflow: hidden;
    /* 넘친 내용 숨김 */
    text-overflow: ellipsis;
    /* ... 표시 */
}

#popularity .val {
    color: #767676;
    font-size: 16px;
    font-weight: 400;
}

#popularity .val img {
    margin: 0 0 4px 0;
    vertical-align: middle
}



@media screen and (max-width:980px) {
    .swiper_serv a.title {
        margin: 0 0 5px 0;
        font-size: 16px;
    }

    .swiper_serv .val {
        font-size: 14px;
    }

    .swiper_serv a.thumb button.good {
        right: 10px;
        top: 10px;
        width: 18px;
        height: 18px;
    }

    .swiper_pro a.title {
        margin: 0 0 5px 0;
        font-size: 16px;
    }

    .swiper_pro .val {
        font-size: 14px;
    }

    .swiper_pro a.thumb button.good {
        right: 10px;
        top: 10px;
        width: 18px;
        height: 18px;
    }


    #popularity a.title {
        margin: 0 0 5px 0;
        font-size: 16px;
    }

    #popularity .val {
        font-size: 14px;
    }

    #popularity a.thumb button.good {
        right: 10px;
        top: 10px;
        width: 18px;
        height: 18px;
    }

}

@media screen and (max-width:480px) {
    .swiper_serv button.good {
        display: block;
        position: absolute;
        right: 5px !important;
        top: 5px !important;
        width: 24px;
        height: 24px;
        background: none;
        border: none;
        z-index: 100;
    }

    .swiper_serv a.title {
        font-size: 14px;
    }

    .swiper_serv .val {
        font-size: 12px;
    }

    .swiper_pro button.good {
        display: block;
        position: absolute;
        right: 5px !important;
        top: 5px !important;
        width: 24px;
        height: 24px;
        background: none;
        border: none;
        z-index: 100;
    }

    .swiper_pro a.title {
        font-size: 14px;
    }

    .swiper_pro .val {
        font-size: 12px;
    }

    #popularity button.good {
        display: block;
        position: absolute;
        right: 5px !important;
        top: 5px !important;
        width: 24px;
        height: 24px;
        background: none;
        border: none;
        z-index: 100;
    }

    #popularity a.title {
        font-size: 14px;
    }

    #popularity .val {
        font-size: 12px;
    }

    #popularity a.thumb img {
        min-height: 108px;
        max-height: 108px;
    }

    .swiper_serv a.thumb img {
        height: 120px;
    }

}


section.recruit {
    padding: 20px 0px 60px 0px;
}

section.recruit .cont {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

section.recruit .half {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

section.recruit .half:nth-child(2) {
    margin-left: 35px;
}

section.recruit .half .header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

section.recruit .half h3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    margin: 0;
}

section.recruit .half .more-btn {
    flex-shrink: 0;
    color: #424242;
}


section.recruit h3 {
    display: block;
    margin: 0 0 10px 0;
    color: #17393C;
    font-size: 27px;
    font-weight: 700;
}

section.recruit ul {}

section.recruit ul li {
    display: block;
    border-bottom: solid 1px #eee;
}

section.recruit ul li a {
    display: block;
    color: #424242;
    font-size: 18px;
    font-weight: 400;
    line-height: 54px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('ellipsis.xml#ellipsis');
}

section.recruit .sub {
    display: block;
    margin: 0 0 30px 0;
    color: #a1a1a1;
    font-size: 18px;
}


section.customer {
    overflow: hidden;
    padding: 60px 0;
}

section.customer .cont {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

section.customer .cont .inner {
    width: 48%;
    float: left;
}

section.customer h3 {
    display: block;
    margin: 0 0 10px 0;
    color: #17393C;
    font-size: 24px;
    font-weight: 700;
}

section.customer ul {}

section.customer ul li {
    display: block;
    border-bottom: solid 1px #eee;
}

section.customer ul li a {
    display: block;
    color: #424242;
    font-size: 18px;
    font-weight: 400;
    line-height: 54px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('ellipsis.xml#ellipsis');
}



@media screen and (max-width:980px) {
    section.recruit {
        padding: 20px 0;
    }

    section.recruit .half {
        display: block;
        width: 100%;
    }

    section.recruit .half:nth-child(2) {
        margin-left: 0;
        margin-top: 40px;
    }

    section.recruit h3 {
        font-size: 20px;
    }

    section.recruit .sub {
        font-size: 16px;
    }

    section.recruit ul li a {
        font-size: 16px;
        line-height: 50px;
    }

    section.customer {
        padding: 40px 0;
    }

    section.customer .cont .inner {
        width: 100%;
        margin-bottom: 30px;
    }

    section.customer h3 {
        font-size: 20px;
    }

    section.customer .sub {
        font-size: 16px;
    }

    section.customer ul li a {
        font-size: 16px;
        line-height: 50px;
    }

    #line_type ul {
        margin: 0 !important;
    }

    #bo_btn_top ul {
        margin: 0 !important;
    }

    .btn_bo_user {
        margin: 0 !important;
    }
}

@media screen and (max-width:760px) {
    section.recruit h3 {
        margin: 0 0 5px 0;
        font-size: 18px;
    }

    section.recruit .sub {
        margin: 0 0 15px 0;
        font-size: 14px;
    }

    section.customer h3 {
        margin: 0 0 5px 0;
        font-size: 18px;
    }

    section.customer .sub {
        margin: 0 0 15px 0;
        font-size: 14px;
    }
}



.list_header {
    display: none;
    margin: 0 0 20px 0;
    padding: 0 20px;
}

.list_header:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.list_header .total {
    display: block;
    float: left;
    color: #767676;
    font-size: 14px;
    line-height: 20px;
}

.list_header .sort {
    display: block;
    float: right;
    position: relative;
    height: 20px;
    color: #767676;
    font-size: 14px;
    background: none;
    border: none;
}

.list_header .sort .sort_layer {
    display: none;
    position: absolute;
    right: 0;
    top: 20px;
    width: 80px;
    padding: 5px;
    background: #fff;
    border: solid 1px #ddd;
    z-index: 3;
}

.list_header .sort .sort_layer a {
    display: block;
    color: #767676;
    font-size: 14px;
    line-height: 24px;
}

section.popular ul.list_type li:nth-child(5),
section.popular ul.list_type li:nth-child(6) {
    display: block;
}

section.popular ul li .ctg span {
    padding: 3px 10px;
    font-size: 10px;
    color: #17393C;
    border: 1px solid #17393C;
    border-radius: 5px;
}


@media screen and (max-width:1024px) {
    .list_header {
        display: none;
    }

}


@media screen and (max-width:480px) {
    .list_header {
        display: block;
    }

	
	section.popular a.title {margin-top:10px !important; font-size: 16px !important; }
	section.popular .val {font-size:12px !important;}
	

    section.popular ul.list_type li {
        width: 100%;
		padding:5px 0;
    }

    section.popular ul.list_type li:nth-child(4n) {
        margin: 0 0 20px 0;
    }

    section.popular ul.list_type li:nth-child(2n) {
        margin: 0 0 20px 0;
    }

    section.service ul.list_type li a.thumb {
        min-height: 108px !important;
    }

    section.popular ul.list_type li a.thumb img {
        border-radius: 12px;
    }
}



#content_wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.img_det {
    float: left;
    width: 700px;
    margin: 0 0 60px 0;
}

.img_det img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.clb {
    clear: both
}

#content_wrap .info {
    display: block;
    float: right;
    position: sticky;
    right: 0;
    top: 100px;
    width: 420px;
    margin: 0 0 0 auto;
}

#content_wrap .info .user {
    display: block;
    position: relative;
    margin: 0 0 20px 0;
    padding: 0 60px;
}

#content_wrap .info .user .profile_img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
}

#content_wrap .info .user .profile_img img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

#content_wrap .info .user label.level {
    display: inline-block;
    padding: 0 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    background: #17393C;
    border-radius: 40px;
}

#content_wrap .info .user strong {
    display: block;
    margin: 6px 0 0 0;
    color: #222;
    font-size: 18px;
    font-weight: 400;
}

#content_wrap .info .user span.share {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 36px;
    margin: -18px 0 0 0;
    cursor: pointer;
}

#content_wrap .info .user span.share img {
    width: 36px;
    height: auto;
}

#content_wrap .info .title {
    margin: 0 0 10px 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 120%;
}

#content_wrap .info .price {
    margin: 0 0 10px 0;
    color: #17393C;
    font-size: 32px;
    font-weight: 600;
}

#content_wrap .info .val {
    margin: 0 0 30px 0;
    color: #767676;
    font-size: 16px;
    font-weight: 400;
}

#content_wrap .info .val a.btn_review {
    display: none;
}

.share-dialog {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none;
}

.share-dialog .bg {
    position: fixed;
    background-color: rgba(0, 0, 0, .2);
    inset: 0;
}

.share-dialog .content {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #fff;
    z-index: 11;
    border-radius: 20px;
    min-width: 400px;
}

.share-dialog .content h5 {
    font-size: 18px;
    text-align: center;
    margin: 2rem 2.5rem;
    font-weight: 600;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-dialog .content span.close {
    display: flex;
    width: 42px;
    height: 28px;
    cursor: pointer;
    position: absolute;
    top: 2rem;
    right: 2.5rem;
}

.share-dialog .content span.close svg {
    display: inline-block;
    text-align: center;
    height: 28px;
}

.share-dialog .content .button-wrap {
    display: flex;
    margin: 0 40px 40px;
    justify-content: center;
}

.share-dialog .content .button-wrap .kakao-share,
.share-dialog .content .button-wrap .link-copy {
    cursor: pointer;
}

.share-dialog .content .button-wrap p {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.share-dialog .content .button-wrap img {
    display: block;
    max-width: 48px;
    margin: 0 10px 12px;
}

.star {
    display: inline-block;
    position: relative;
    /*width: 80px;*/
    height: 14px;
    background: url(../img/star_off.png) no-repeat 0 50%;
}

.star .star_on {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 14px;
    background: url(../img/star.png) no-repeat 0 50%;
}

ul.time {
    margin: 0 0 10px 0;
}

ul.time:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

ul.time li {
    display: block;
    float: left;
    width: calc(50% - 5px);
    margin: 0 10px 0 0;
    color: #767676;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    line-height: 48px;
    background: #F7F8F9;
    border-radius: 8px;
}

ul.time li:last-child {
    margin: 0;
}

ul.stat {
    margin: 0 0 60px 0;
    background: #F7F8F9;
    border-radius: 8px;
}

ul.stat:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

ul.stat li {
    display: block;
    float: left;
    width: 25%;
    padding: 20px 0;
    text-align: center;
}

ul.stat li .icon {
    display: block;
    margin: 0 0 10px 0;
}

ul.stat li .icon img {
    display: block;
    max-width: 32px;
    margin: 0 auto;
}

ul.stat li label {
    display: block;
    margin: 0 0 4px 0;
    color: #767676;
    font-size: 16px;
    font-weight: 400;
}

ul.stat li strong {
    display: block;
    color: #17393C;
    font-size: 18px;
    font-weight: 700;
}

#content_wrap .button:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#content_wrap .button a {
    display: block;
    float: left;
    width: calc(33% - 5px);
    margin: 0 10px 0 0;
    color: #17393C;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    line-height: 60px;
    background: #F6F6F6;
    border-radius: 6px;
}

#content_wrap .button button {
    display: block;
    float: left;
    width: calc(30% - 5px);
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    line-height: 55px;
    background: #17393C;
    border-radius: 6px;
}

#content_wrap .button a img {
    vertical-align: middle;
}


.customer .left_det {
    float: left;
    width: 1000px;
    margin: 0 0 60px 0;
}

.customer .left_det p {
    margin: 60px 0;
}

.customer .anyq {
    display: block;
    margin: 0 0 20px 0;
    text-align: center;
}

.customer .anyq p {
    margin: 0 0 20px 0;
    font-size: 18px;
}

.customer .anyq a {
    display: inline-block;
    width: 160px;
    color: #fff;
    line-height: 40px;
    background: #17393c;
    border-radius: 4px;
}

.customer .right_info {
    display: block;
    float: right;
    position: sticky;
    right: 0;
    top: 100px;
    width: 480px;
    margin: 0 0 0 auto;
}

.customer .right_info a {
    color: #17393C;
}




#content {
    width: 700px;
}

.tabs {
    margin: 0 0 60px 0;
}

.tabs ul {
    border-bottom: solid 1px #eee;
}

.tabs ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.tabs ul li {
    display: block;
    float: left;
    width: 25%;
}

.tabs ul li a {
    display: block;
    position: relative;
    color: #767676;
    font-size: 20px;
    text-align: center;
    line-height: 44px;
}

.tabs ul li a.selected {
    color: #17393C;
    font-weight: 600;
}

.tabs ul li a.selected:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: #17393C
}

.panel dd {}

.panel h3 {
    display: block;
    margin: 0 0 30px 0;
    color: #17393C;
    font-size: 24px;
    font-weight: 700;
}

.panel article img {
    max-width: 100%;
    height: auto;
}

ul.kind {}

ul.kind li {
    display: block;
    margin: 0 0 20px 0;
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
}

ul.kind li:last-child {
    margin: 0;
}

ul.kind li.active {
    border: 2px solid #17393C;
}

.economy {
    background: #C3E3FF;
}

.business {
    background: #eee;
}

.first_class {
    background: #FFF6D3;
}

ul.kind li h4 {
    display: block;
    margin: 0 0 16px 0;
    font-size: 24px;
    font-weight: 700;
}

ul.kind li h4 .val {
    font-size: 16px;
    font-weight: 500;
}

ul.kind li strong {
    display: block;
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
}

ul.kind li p {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 400;
}


.panel article {
    height: 340px;
    font-size: 18px;
    line-height: 120%;
    overflow: hidden;
    -webkit-transition: all .6s ease-out;
    -moz-transition: all .6s ease-out;
    -o-transition: all .6s ease-out;
    transition: all .6s ease-out;
}

.panel article.arti1.active {
    height: auto;
}

.panel article.arti2.active {
    height: auto;
}

.panel a.btn_more {
    display: block;
    margin: 20px 0 0 0;
    color: #767676;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 48px;
    border: solid 1px #E3E3E3;
    border-radius: 6px;
}

.val_avr {
    margin: 0 0 10px 0;
    font-size: 20px;
    line-height: 24px;
}

.star_b {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 20px;
    background: url(../img/star_b_off.png) no-repeat 0 50%;
    vertical-align: baseline;
}

.star_b .star_on {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    background: url(../img/star_b.png) no-repeat 0 50%;
}

ul.graph {
    margin: 0 0 40px 0;
    padding: 20px;
    background: #f7f8f9;
    border-radius: 8px;
}

ul.graph li {
    display: block;
    margin: 0 0 10px 0;
    line-height: 20px;
}

ul.graph li:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

ul.graph li:last-child {
    margin: 0;
}

ul.graph li label {
    display: block;
    float: left;
    width: 50%;
    color: #424242;
    font-size: 18px;
    font-weight: 400;
}

ul.graph li .bar {
    display: block;
    float: left;
    position: relative;
    width: calc(50% - 40px);
    height: 6px;
    margin: 7px 0 0 0;
    background: #E3E3E3;
    border-radius: 10px;
    overflow: hidden;
}

ul.graph li .bar_in {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 6px;
    background: #195257
}

ul.graph li .grade {
    display: block;
    float: left;
    width: 40px;
    font-size: 16px;
    font-weight: 500;
    text-align: right;
}

.rev_total {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.rev_total strong {
    font-size: 24px;
    font-weight: 600;
}

.review {}

.review ul {}

.review ul li {
    display: block;
    padding: 30px 0;
    border-bottom: dotted 1px #eee
}

.review .rev_user {
    display: block;
    position: relative;
    margin: 0 0 10px 0;
    padding: 0 0 0 50px;
}

.review .rev_user .profile_img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
}

.review .rev_user .profile_img img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.review .rev_user .name {
    font-size: 14px;
}

.review .rev_user .lbl {
    display: inline-block;
    position: relative;
    margin: 0 0 0 8px;
    padding: 0 0 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.review .rev_user .lbl:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    background: #ddd;
    border-radius: 50%;
}

.review .rev_user .lbl.echo {
    color: #111
}

.review .rev_user .lbl.busi {
    color: #3273FF
}

.review .rev_user .lbl.first {
    color: #EB9D00
}

.review .rev_user .val {
    display: block;
    margin: 4px 0 0 0;
    font-size: 14px;
    font-weight: 400
}

.review .rev_user .date {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #AAAAAA;
    font-size: 14px;
    font-weight: 400;
}

.review p {
    font-size: 18px;
    line-height: 140%;
    font-weight: 400;
}

.review .rev_ans {
    margin: 20px 0 0 0;
    padding: 20px;
    font-size: 16px;
    line-height: 120%;
    font-weight: 400;
    background: #F7F8F9;
    border-radius: 8px;
}

.review .rev_ans strong {
    display: block;
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
}

#review_wrap {
    padding: 20px;
}


@media screen and (max-width:1540px) {
    #content_wrap {
        padding: 0 20px;
    }

    .img_det {
        width: 50%;
    }

    #content_wrap .info {
        width: 46%;
    }

    #content {
        width: 50%;
    }
}


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

    .img_det {
        float: none;
        width: 100%;
        margin: 0;
    }

    #content_wrap .info {
        float: none;
        position: relative;
        right: auto;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 30px 20px;
    }

    #content_wrap .info .user {
        padding: 0 60px;
    }

    #content_wrap .info .user label.level {
        font-size: 13px;
        line-height: 24px;
    }

    #content_wrap .info .user strong {
        font-size: 16px;
    }

    #content_wrap .info .user a.share {
        display: none;
    }

    #content_wrap .info .title {
        margin: 0 0 10px 0;
        font-size: 20px;
    }

    #content_wrap .info .price {
        margin: 0 0 5px 0;
        font-size: 24px;
    }

    #content_wrap .info .val {
        margin: 0;
        font-size: 14px;
    }

    #content_wrap .info .val a.btn_review {
        display: inline-block;
    }

    #content_wrap .info ul.time {
        display: none;
    }

    #content_wrap .info ul.stat {
        display: none;
    }

    #content_wrap .button {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 80px;
        width: 100%;
        padding: 10px 20px;
        background: #fff;
        z-index: 3;
    }

    #content_wrap .button a {
        margin: 0 10px 0 0;
        font-size: 18px;
        line-height: 50px;
    }

    #content_wrap .button a:first-child {
        width: 50px;
        margin: 0;
    }

    #content_wrap .button a:last-child {
        width: calc(50% - 5px);
        margin: 0;
    }

    #content_wrap .button a .label {
        display: none;
    }

    #content_wrap .button button {
        width: calc(50%);
        height: 50px;
        margin: 0;
        font-size: 18px;
        line-height: 50px;
    }


    #content {
        width: 100%;
    }

    .tabs {
        margin: 0;
    }

    .tabs ul li {
        width: 33.33%;
    }

    .tabs ul li:last-child {
        display: none;
    }

    .tabs ul li a {
        font-size: 18px;
        line-height: 44px;
    }

    .panel {
        border-bottom: solid 10px #eee;
    }

    .panel dd {
        padding: 40px 20px;
    }

    .panel h3 {
        display: block;
        margin: 0 0 20px 0;
        font-size: 20px;
    }

    ul.kind li {
        margin: 0 0 20px 0;
    }

    ul.kind li h4 {
        margin: 0 0 10px 0;
        font-size: 20px;
    }

    ul.kind li h4 .val {
        font-size: 14px;
    }

    ul.kind li strong {
        margin: 0 0 10px 0;
        font-size: 16px;
    }

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

    .panel article {
        font-size: 16px;
    }

    ul.time li {
        font-size: 14px;
        line-height: 40px;
    }

    ul.stat {
        margin: 0;
    }

    ul.stat li {
        padding: 15px 0;
    }

    ul.stat li .icon {
        margin: 0 0 8px 0;
    }

    ul.stat li .icon img {
        width: 36px;
        height: auto;
    }

    ul.stat li label {
        margin: 0 0 4px 0;
        font-size: 14px;
    }

    ul.stat li strong {
        font-size: 16px;
    }

    .val_avr {
        font-size: 18px;
    }

    ul.graph {
        margin: 0 0 30px 0;
    }

    ul.graph li label {
        width: 100px;
        font-size: 16px;
    }

    ul.graph li .bar {
        width: calc(100% - 140px);
    }

    ul.graph li .grade {
        width: 40px;
        font-size: 16px;
    }

    .rev_total {
        font-size: 16px;
    }

    .rev_total strong {
        font-size: 18px;
    }

    .review ul li {
        padding: 20px 0;
    }

    .review .rev_user .name {
        font-size: 13px;
    }

    .review .rev_user .lbl {
        font-size: 12px;
    }

    .review .rev_user .val {
        font-size: 13px;
    }

    .review .rev_user .date {
        font-size: 13px;
    }

    .review p {
        font-size: 16px;
    }

    .review .rev_ans {
        margin: 20px 0 0 0;
        font-size: 16px;
    }

    .review .rev_ans strong {
        font-size: 14px;
    }
}



@media screen and (max-width:480px) {
    #content_wrap .info .user label.level {
        font-size: 12px;
        line-height: 22px;
    }

    #content_wrap .info .user strong {
        margin: 3px 0 0 0;
        font-size: 14px;
    }

    #content_wrap .info .title {
        margin: 0 0 15px 0;
        font-size: 18px;
    }

    #content_wrap .info .price {
        margin: 0 0 5px 0;
        font-size: 18px;
    }

    #content_wrap .info .val {
        margin: 0;
        font-size: 12px;
    }

    #content_wrap .button a {
        font-size: 16px;
    }

    .tabs {}

    .tabs ul li a {
        font-size: 16px;
        line-height: 40px;
    }

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

    .panel dd {
        padding: 30px 20px;
    }

    ul.kind li {
        margin: 0 0 15px 0;
    }

    ul.kind li h4 {
        margin: 0 0 5px 0;
        font-size: 18px;
    }

    ul.kind li h4 .val {
        font-size: 12px;
    }

    ul.kind li strong {
        margin: 0 0 8px 0;
        font-size: 14px;
    }

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

    .panel article {
        font-size: 14px;
    }

    ul.time li {
        font-size: 12px;
        line-height: 30px;
    }

    ul.stat {
        margin: 0;
    }

    ul.stat li {
        padding: 15px 0;
    }

    ul.stat li .icon {
        margin: 0 0 8px 0;
    }

    ul.stat li .icon img {
        width: 24px;
        height: auto;
    }

    ul.stat li label {
        margin: 0 0 2px 0;
        font-size: 12px;
    }

    ul.stat li strong {
        font-size: 14px;
    }

    .val_avr {
        font-size: 16px;
    }

    ul.graph {
        margin: 0 0 20px 0;
    }

    .rev_total {
        font-size: 16px;
    }

    .rev_total strong {
        font-size: 16px;
    }

    .customer .left_det {
        width: 100%;
    }

    .customer .left_det p {
        padding: 0 20px;
    }

    .customer .right_info {
        width: 100%;
    }
}

#float {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    border-top: solid 1px #eee;
    z-index: 1000;
}

#float a {
    display: block;
    float: left;
    width: 20%;
    padding: 10px 0;
    text-align: center;
    position: relative;
}

#float a .icon {
    display: block;
    width: 100%;
    height: 24px;
    margin: 0 0 5px 0;
}

#float a p {
    color: #aaa;
    font-size: 12px;
}

#float a:nth-child(1) .icon {
    background: url(../img/icon_ft01.png) no-repeat 50% 50%;
    background-size: 24px auto;
}

#float a:nth-child(2) .icon {
    background: url(../img/icon_ft02.png) no-repeat 50% 50%;
    background-size: 24px auto;
}

#float a:nth-child(3) .icon {
    background-size: 34px auto;
    text-align: center;
}

#float a:nth-child(4) .icon {
    background: url(../img/icon_ft04.png) no-repeat 50% 50%;
    background-size: 24px auto;
}

#float a:nth-child(5) .icon {
    background: url(../img/icon_ft05.png) no-repeat 50% 50%;
    background-size: 24px auto;
}

#float a.active:nth-child(1) .icon {
    background: url(../img/icon_ft01_on.png) no-repeat 50% 50%;
    background-size: 24px auto;
}

#float a.active:nth-child(2) .icon {
    background: url(../img/icon_ft02_on.png) no-repeat 50% 50%;
    background-size: 24px auto;
}

#float a.active:nth-child(3) .icon {
    background: url(../img/icon_ft03_on.png) no-repeat 50% 50%;
    background-size: 24px auto;
}

#float a.active:nth-child(4) .icon {
    background: url(../img/icon_ft04_on.png) no-repeat 50% 50%;
    background-size: 24px auto;
}

#float a.active:nth-child(5) .icon {
    background: url(../img/icon_ft05_on.png) no-repeat 50% 50%;
    background-size: 24px auto;
}

.citp {
    position: absolute;
    margin: 0px auto;
    width: 40px;
    top: -12.5px;
    left: 50%;
    transform: translate(-50%, 0%);
}

@media screen and (max-width:980px) {
    #float {
        display: block;
    }
}


#footer_wrap {
    padding: 40px 20px;
    border-top: solid 1px #eee;
}

#footer {
    width: 100%;
    max-width: var(--content-w);
    margin: 0 auto;
    font-size: 12px;
    line-height: 140%;
    text-align: center;
    word-break: keep-all;
}

#footer .cp_info {
    margin: 0 0 20px 0;
    color: #797979;
}

#footer .cp_info span {
    display: inline-block;
    position: relative;
    margin: 0 6px 0 0;
    padding: 0 6px 0 0;
    font-size: 13px;
    line-height: 160%;
}

#footer .cp_info span:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    margin: -7px 0 0 0;
    background: #222;
}

#footer .cp_info span.none {
    margin: 0;
    padding: 0;
}

#footer .cp_info span.none:after {
    display: none;
}

#footer .cp_info strong {
    color: #222;
    font-weight: 600;
}

#footer p {
    margin: 0 0 20px 0;
    color: #999;
}

#footer p.pc {
    display: block;
}

#footer p.mobile {
    display: none;
}

#footer .copy {
    color: #bbb;
}

ul.bnb {
    display: none;
    margin: 0 0 20px 0;
    font-size: 0;
    line-height: 0;
    text-align: center;
}

ul.bnb li {
    display: inline-block;
    position: relative;
    margin: 0 10px 0 0;
    padding: 0 10px 0 0;
}

ul.bnb li:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    margin: -7px 0 0 0;
    background: #222;
}

ul.bnb li:last-child {
    margin: 0;
    padding: 0;
}

ul.bnb li:last-child:after {
    display: none;
}

ul.bnb li a {
    display: block;
    color: #797979;
    font-size: 13px;
    line-height: 20px;
}


button.btn_info {
    display: none;
    width: 100%;
    margin: 20px 0;
    font-size: 14px;
    text-align: center;
    background: none;
    border: none;
}

button.btn_info span {
    display: inline-block;
}

button.btn_info.active span {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

@media screen and (max-width:980px) {
    #footer .cp_info {
        display: none;
    }

    #footer .cp_info br {
        display: none;
    }

    #footer .cp_info span {
        display: block;
    }

    #footer .cp_info span:after {
        display: none;
    }

    #footer p.pc {
        display: none;
    }

    #footer p.mobile {
        display: block;
    }

    ul.bnb {
        display: block;
    }

    button.btn_info {
        display: block;
    }
}



#od_pay_sl h3 {
    font-size: 1.167em;
    margin: 20px 0 5px
}

#od_pay_sl input[type="radio"] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    text-indent: -999px;
    left: 0;
    z-index: -1;
}

#od_pay_sl .lb_icon {
    display: inline-block;
    float: left;
    width: 50%;
    background: #fff;
    border: 1px solid #eceff4;
    margin: -1px 0 0 -1px;
    cursor: pointer;
    height: 60px;
    position: relative;
    padding-left: 65px;
    padding-top: 20px;
    z-index: 1
}

#od_pay_sl input[type="radio"]:checked+.lb_icon {
    border: 1px solid #ff006c;
    z-index: 3
}

#sod_frm_paysel {}

#sod_frm_paysel legend {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

#sod_frm_paysel .KPAY {
    background: url('../../../img/kpay.png') no-repeat 50% 50% #fff;
    overflow: hidden;
    text-indent: -999px
}

#sod_frm_paysel .PAYNOW {
    background: url('../../../img/paynow.png') no-repeat 50% 50% #fff;
    overflow: hidden;
    text-indent: -999px
}

#sod_frm_paysel .PAYCO,
#sod_frm_paysel .paycopay_icon {
    background: url('../../../img/payco.png') no-repeat 50% 50% #fff;
    overflow: hidden;
    text-indent: -999px
}

#sod_frm_paysel .inicis_lpay,
#sod_frm_paysel .lpay_icon {
    background: url('../../../img/lpay_logo.png') no-repeat 50% 50% #fff;
    overflow: hidden;
    text-indent: -999px
}

#sod_frm_paysel .inicis_kakaopay {
    position: relative;
    overflow: hidden;
    text-indent: -999px
}

#sod_frm_paysel .inicis_kakaopay em {
    position: absolute;
    top: 15px;
    left: 45px;
    width: 70px;
    height: 30px;
    background: url('../../../img/kakao.png') no-repeat 50% 50% #ffeb00;
    overflow: hidden;
    text-indent: -999px;
    border-radius: 30px
}

#sod_frm_paysel .kakaopay_icon {
    background: url('../../../img/kakao.png') no-repeat 50% 50% #fff;
    overflow: hidden;
    text-indent: -999px
}

#sod_frm_paysel .naverpay_icon {
    background: url('../../../img/ico-default-naverpay.png') no-repeat 50% 50% #fff;
    overflow: hidden;
    text-indent: -999px
}

#sod_frm_paysel .samsungpay_icon {
    background: url('../../../img/samsungpay.png') no-repeat 50% 50% #fff;
    display: inline-block;
    overflow: hidden;
    text-indent: -999px
}

#sod_frm_paysel .ssgpay_icon {
    background: url('../../../img/ssgpay_icon.png') no-repeat 50% 50% #fff;
    display: inline-block;
    overflow: hidden;
    text-indent: -999px
}

#sod_frm_paysel .skpay_icon {
    background: url('../../../img/skpay11_icon.png') no-repeat 50% 50% #fff;
    background-size: 70px;
    display: inline-block;
    overflow: hidden;
    text-indent: -999px
}

#sod_frm_paysel .bank_icon {
    background: url('../../../img/pay_icon1.png') no-repeat 15px 50% #fff
}

#sod_frm_paysel .vbank_icon {
    background: url('../../../img/pay_icon2.png') no-repeat 15px 50% #fff
}

#sod_frm_paysel .iche_icon {
    background: url('../../../img/pay_icon2.png') no-repeat 15px 50% #fff
}

#sod_frm_paysel .hp_icon {
    background: url('../../../img/pay_icon3.png') no-repeat 24px 50% #fff
}

#sod_frm_paysel .card_icon {
    background: url('../../../img/pay_icon4.png') no-repeat 17px 50% #fff
}

#forderform .sod_right #sod_bsk_tot {
    border: 1px solid #e3e5e8
}

#forderform .od_pay_buttons_el {
    margin-top: 20px;
    border: 1px solid #e3e5e8;
    background: #fff;
    padding: 10px
}

#forderform .od_pay_buttons_el h3 {
    font-size: 1.167em;
    margin: 0px 0 5px
}

#forderform #sod_frm_pt {
    border-top: 1px solid #e3e5e8
}

.sod_right .pay_tbl {
    border: 1px solid #e3e5e8;
    border-bottom: 0 none
}

.sod_right #od_tot_price {
    border: 1px solid #e3e5e8
}

#sod_frm_pay .od_pay_buttons_el:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#sod_frm_pay .sod_frm_point {
    margin-top: 20px;
    border: 1px solid #e3e5e8
}

#sod_frm_pay .sod_frm_point div {
    background: #fff;
    padding: 10px;
    text-align: left;
    text-align: right
}

#sod_frm_pay .sod_frm_point div:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ''
}

#sod_frm_pay .sod_frm_point div label {
    float: left;
    line-height: 30px;
    font-weight: bold
}

#sod_frm_pay .sod_frm_point div span {
    display: block
}

#sod_frm_pay .sod_frm_point div span:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ''
}

#sod_frm_pay .sod_frm_point div strong {
    float: left;
    color: #666
}

#sod_frm_pay .sod_frm_point .max_point_box em {
    font-style: normal !important
}

#sod_frm_pay .sod_frm_point #od_temp_point {
    height: 30px;
    text-align: right;
    padding: 0 5px;
    border: 1px solid #ccc;
}


#content_wrap .btn_confirm {
    margin: 50px 0 0 0;
}

#content_wrap .btn_confirm:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#content_wrap .btn_cancle {
    display: block;
    float: left;
    width: calc(50% - 5px);
    margin: 0 10px 0 0;
    color: #17393C;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    line-height: 60px;
    background: #F6F6F6;
    border-radius: 6px;
}

#content_wrap .btn_submit {
    display: block;
    float: left;
    width: calc(50% - 5px);
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    line-height: 55px;
    background: #17393C;
    border-radius: 6px;
}


.message_manage {
    display: block;
    position: relative;
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: 20px;
    background: #f6f6f6;
}

.message_manage .empty {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    color: #999;
    text-align: center;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.message_manage .empty strong {
    display: block;
    margin: 0 0 10px 0;
    color: #222;
    font-weight: 500;
}

.message_manage_article {
    position: relative;
    margin: 0 0 20px 0;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.message_manage_article .ing {
    margin: 0 0 20px 0;
    color: #1398d9;
    font-size: 16px;
    font-weight: 600;
}

.message_manage_article .date {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
    color: #999;
}

.message_manage_article img {
    border-radius: 50%;
    position: absolute;
}

.message_manage_article .article {
    margin: 0 0 10px 0;
}

.message_manage_article .article:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.message_manage_article .article a.img {
    display: block;
    float: left;
    width: 120px;
}

.message_manage_article .article a.img img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 5px;
}

.message_manage_article .article .cont {
    position: relative;
    margin: 0 0 0 90px;
}

.message_manage_article .article .cont a.subj {
    display: block;
    font-size: 14px;
    line-height: 140%;
    padding: 10px 0 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.message_manage_article .article .cont .od {
    color: #999;
}

.message_manage_article .article .price {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 16px;
    font-weight: 600;
}

.message_manage_article .label {
    display: block;
    position: relative;
    margin: 0 0 10px 0;
    padding: 0 10px;
    line-height: 50px;
    background: #f6f6f6;
    border-radius: 5px;
}

.message_manage_article .label a {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 48px;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 5px;
}

.message_manage_article .label img {
    border-radius: 50%;
}

.message_manage_article p {
    margin: 0 0 10px 0;
    line-height: 140%;
}

.message_manage_article .plan {
    color: #999;
}

.message_manage_article .plan strong {
    color: #222;
    font-weight: 500;
}

.message_manage_article .title {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 0;
}

.message_manage_article .pay {
    padding: 10px 0;
    font-size: 16px;
    color: #222;
    font-weight: 500;
}

.clear {
    clear: both;
}

.gab_top20 {
    margin-top: 20px;
}

.gab_bottom30 {
    margin-bottom: 30px;
}

.chk_box {
    position: relative;
}

/* 화면낭독기 사용자용 */
#hd_login_msg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden
}

.msg_sound_only,
.sound_only {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    width: 1px !important;
    height: 1px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden
}

/* checkbox, radio*/
.selec_chk {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    outline: 0;
    z-index: -1;
}

.chk_box {
    position: relative;
}

.chk_box input[type="checkbox"]+label {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    line-height: 22px;
    vertical-align: baseline;
    cursor: pointer;
}

.chk_box input[type="checkbox"]+label span {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    width: 22px;
    height: 22px;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 4px;
}

.chk_box input[type="checkbox"]+label:hover span {
    border: solid 1px #ddd;
}

.chk_box input[type="checkbox"]+label span:after {
    content: "\f00c";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 22px;
    height: 22px;
    font-family: "FontAwesome";
    color: #999;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    background: none;
    z-index: 1;
    cursor: pointer;
}

.chk_box input[type="checkbox"]:checked+label {}

.chk_box input[type="checkbox"]:checked+label span {
    background: #032c5e;
    border: solid 1px #032c5e;
}

.chk_box input[type="checkbox"]:checked+label span:after {
    color: #fff;
}

.all_chk.chk_box input[type="checkbox"]+label span {}

.chk_box input[type="radio"]+label {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    line-height: 20px;
    vertical-align: baseline;
    cursor: pointer;
}

.chk_box input[type="radio"]+label span {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    width: 22px;
    height: 22px;
    background: #bdbdbd;
    border: solid 1px #bdbdbd;
    border-radius: 50%;
}

.chk_box input[type="radio"]+label:hover span {
    border: solid 1px #bdbdbd;
}

.chk_box input[type="radio"]+label span:after {
    content: "\f00c";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 22px;
    height: 22px;
    font-family: "FontAwesome";
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    background: none;
    z-index: 1;
    cursor: pointer;
}

.chk_box input[type="radio"]:checked+label {}

.chk_box input[type="radio"]:checked+label span {
    background: #032c5e;
    border: solid 1px #032c5e
}

.chk_box input[type="radio"]:checked+label span:after {
    color: #fff;
}

#sitemap_wrap {
    clear: both;
    padding: 40px 20px;
    border-top: solid 1px #eee;
}

.sitemap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.sitemap:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.sitemap .cust_info {
    float: left;
    width: 340px;
}

.sitemap .cust_info p {
    margin: 20px 0;
    font-size: 14px;
}

.sitemap .cust_info a {
    display: block;
    float: left;
    width: 49%;
    margin: 0 2% 0 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 40px;
    border: solid 1px #ddd;
    border-radius: 5px;
}

.sitemap .cust_refer {
    display: block;
    position: relative;
    padding: 10px 10px 10px 60px;
    ;
    color: #17393c;
    font-size: 14px;
    line-height: 140%;
    background: #f6fdfe;
    border: solid 1px #b8eaf0;
    border-radius: 5px;
}

.sitemap .cust_refer .icon {
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background: #d3ebef;
    border-radius: 50%;
}

.sitemap .cust_refer .icon i {
    font-size: 20px;
}

.sitemap ul {}

.sitemap ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.sitemap ul li {
    display: block;
    float: left;
    width: 25%;
}

.sitemap ul li strong {
    display: block;
    margin: 0 0 20px 0;
    font-size: 14px;
    font-weight: 600;
}

.sitemap ul li a {
    display: block;
    margin: 0 0 10px 0;
    color: #999;
    font-size: 14px;
}

.sitemap ul li a:last-child {
    margin: 0;
}

.sitemap .app {
    margin: 30px 0 0 0;
    display: flex;
}

.sitemap .app a {
    display: block;
    padding: 0 20px;
    font-size: 16px;
    line-height: 44px;
    border: solid 1px #444;
    border-radius: 8px;
}

.sitemap .app a img {
    width: 20px;
    height: auto;
}

.tail-right {
    float: right;
    width: calc(100% - 420px);
}

.tail-right .language-box {
    display: flex;
    align-items: end;
    margin: 20px 0 0;
    justify-content: end;
    padding: 0 16px;
}

.tail-right .language-box select {
    display: block;
    border: 1px solid #ddd;
    padding: 12px 4px;
    font-size: 14px;
    flex: 0 0 25%;
}

@media screen and (max-width:480px) {
    .sitemap .cust_info {
        float: none;
        width: 100%;
        margin: 0 0 40px 0;
    }

    .sitemap .cust_info p {
        font-size: 13px;
    }

    .sitemap .cust_info a {
        font-size: 13px;
    }

    .sitemap .cust_refer {
        padding: 10px 10px 10px 50px;
        font-size: 13px;
    }

    .sitemap .cust_refer .icon {
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

    .sitemap .cust_refer .icon i {
        font-size: 18px;
    }

    .sitemap ul {
        float: none;
        width: 100%;
    }

    .sitemap ul li {
        width: 50%;
        margin: 0 0 20px 0;
    }

    .sitemap ul li strong,
    .sitemap ul li a {
        font-size: 13px;
    }

    .sitemap .app a {
        font-size: 14px;
        line-height: 40px;
    }

    .sitemap .app a img {
        width: 16px;
        height: auto;
    }

    #sitemap_wrap {
        display: none;
    }
}

/* 버튼 */
.btn {
    display: inline-block;
    /*padding:0 16px;color:#fff;line-height:55px;*/
    font-size: 16px;
    text-align: center;
    font-weight: 400;
    border: none;
    vertical-align: top;
    cursor: pointer;
    border-radius: 4px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn i {
    font-size: 16px;
}

.btn.btn_act,
.btn.btn_submit {
    color: #fff;
    background: #032c5e
}

.btn.btn_close,
.btn.btn_cancel,
.btn.btn_normal {
    color: #165331;
    line-height: 53px;
    background: #fff;
    border: solid 1px #165331;
}

.btn.btn_frmline,
.btn.btn_normal2 {
    color: #666;
    line-height: 53px;
    background: #fff;
    border: solid 1px #444;
}

.btn.btn_admin {
    padding: 0 12px;
    background: #165331;
    color: #fff;
}

.btn.btn_admin:hover {
    color: #fff;
    background: #444;
}

.btn.btn_rss {
    background: #ff7700
}

.btn.btn_rss:hover {
    color: #fff;
    background: #444;
}

/* confirm button */
.btn_confirm {
    text-align: center;
}

.btn_confirm:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.btn_confirm .btn {
    width: 180px;
    margin: 0 4px;
    font-size: 16px;
    line-height: 60px;
}

.btn_confirm .btn.btn_normal,
.btn_confirm .btn.btn_cancel {
    line-height: 58px;
    border: solid 1px #ddd;
}

.frm_input {
    display: block;
    position: relative;
    width: 100%;
    height: 55px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 53px;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 4px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* file */
.file_wr .frm_file {
    border: solid 1px #ddd;
}

.file_wr .frm_file::file-selector-button {
    display: none;
}

.file_wr .frm_file:after {
    content: '\f093';
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 46px;
    height: 46px;
    color: #fff;
    font-family: "FontAwesome";
    color: #bbb;
    font-size: 16px;
    text-align: center;
    line-height: 46px;
    text-indent: 0;
    background: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}


/* select */
.select {
    display: block;
    position: relative;
    width: 100%;
}

.select select {
    display: block;
    width: 100%;
    height: 55px;
    line-height: 53px;
    font-size: 16px;
    text-indent: 10px;
    border: solid 1px #ddd;
    border-radius: 4px;
}

.select select {
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select select option {
    display: block;
    padding: 10px;
    border: solid 1px #ddd;
}

.select:after {
    content: "\f078";
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 40px;
    height: 55px;
    font-family: "FontAwesome";
    font-size: 12px;
    text-align: center;
    line-height: 55px;
    background: none;
    z-index: 1;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.select.selected:after {
    color: #ff7700;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

/* ckeditor 단축키 */
.cke_sc {
    display: none;
    margin: 0 0 5px 0;
    text-align: right
}

.btn_cke_sc {
    display: inline-block;
    padding: 0 10px;
    height: 23px;
    border: 1px solid #ccc;
    background: #fafafa;
    color: #000;
    text-decoration: none;
    line-height: 1.9em;
    vertical-align: middle;
    cursor: pointer
}

.cke_sc_def {
    margin: 0 0 5px;
    padding: 10px;
    border: 1px solid #ccc;
    background: #f7f7f7;
    text-align: center
}

.cke_sc_def dl {
    margin: 0 0 5px;
    text-align: left;
    zoom: 1
}

.cke_sc_def dl:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.cke_sc_def dt,
.cke_sc_def dd {
    float: left;
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px solid #e9e9e9
}

.cke_sc_def dt {
    width: 20%;
    font-weight: bold
}

.cke_sc_def dd {
    width: 30%
}

/* ckeditor 태그 기본값 */
#bo_v_con ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px
}

#bo_v_con ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px
}

#bo_v_con li {
    display: list-item
}

/* cheditor 이슈 */
.cheditor-popup-window *,
.cheditor-popup-window :after,
.cheditor-popup-window :before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.contents {
    padding: 60px 0;
}

@media screen and (max-width:480px) {
    .contents {
        padding: 20px;
        font-size: 14px;
    }
}

/* confirm button */
.btn_confirm {
    text-align: center;
}

.btn_confirm:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.btn_confirm .btn {
    width: 180px;
    margin: 0 4px;
    font-size: 16px;
    line-height: 60px;
}

.btn_confirm .btn.btn_normal,
.btn_confirm .btn.btn_cancel {
    line-height: 58px;
    border: solid 1px #ddd;
}

.faq_content {
    padding: 20px 10px 40px 10px;
}

.faq_content p {
    margin: 0px !important;
    line-height: 150%;
    font-size: 18px !important;
}

.red {
    color: #ef3f54 !important;
}

.blue {
    color: #116ad4 !important;
}

.green {
	color: #27ae60 !important;	
}

#viz_pro {
    display: block;
    position: relative;
    height: 860px;
    background: url(/theme/crewtor/img/viz_pro.jpg) no-repeat 50% 50%;
    background-size: cover;
}

#viz_pro .cont {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    max-width: 1440px;
    padding: 0 20px;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#viz_pro h3 {
    display: block;
    margin: 0 0 60px 0;
    color: #fff;
    font-size: 48px;
    word-break: keep-all;
}

#viz_pro h3 strong {
    font-weight: 700;
}

#viz_pro p {
    margin: 0 0 40px 0;
    color: #fff;
    font-size: 30px;
    line-height: 160%;
    word-break: keep-all;
}

#viz_pro a {
    display: block;
    width: 240px;
    color: #17393c;
    text-align: center;
    line-height: 54px;
    background: #fff;
    border-radius: 10px;
}


@media screen and (max-width:1280px) {
    #viz_pro h3 {
        font-size: 44px;
    }

    #viz_pro p {
        font-size: 24px;
    }
}


@media screen and (max-width:980px) {
    #viz_pro {
        height: 640px;
        background: url(/theme/crewtor/img/viz_pro_mobile.jpg) no-repeat 50% 50%;
        background-size: cover;
    }

    #viz_pro h3 {
        font-size: 36px;
    }

    #viz_pro p {
        font-size: 18px;
    }

    #viz_pro a {
        width: 200px;
        font-size: 16px;
        line-height: 48px;
    }
}


@media screen and (max-width:768px) {
    #viz_pro {
        height: 480px;
    }

    #viz_pro h3 {
        font-size: 30px;
    }

    #viz_pro p {
        font-size: 16px;
    }

    #viz_pro a {
        width: 180px;
        font-size: 14px;
        line-height: 44px;
    }
}


.sec_pro {
    position: relative;
    padding: 100px 20px;
}

.sec_pro h3 {
    display: block;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -1px;
}

.sec_pro h4 {
    display: block;
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -1px;
    word-break: keep-all;
}

.sec_pro p {
    min-height: 120px;
    font-size: 20px;
    line-height: 160%;
    letter-spacing: -0.5px;
    word-break: keep-all;
}

.sec_pro p strong {
    font-weight: 700;
}

.sec_pro ul {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.sec_pro ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.sec_pro ul li {
    display: block;
    float: left;
    padding: 20px;
}

.sec_pro.sec01 h3 {
    margin: 0 0 160px 0;
    color: #17393c;
}

.sec_pro.sec01 ul li {
    width: 25%;
}

.sec_pro.sec01 ul li .box {
    display: block;
    position: relative;
    padding: 80px 0;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.sec_pro.sec01 ul li .icon {
    display: block;
    margin: 0 0 40px 0;
    text-align: center;
}

.sec_pro.sec01 ul li .icon img {
    width: 160px;
    height: auto;
}

.sec_pro.sec01 ul li h4 {
    color: #17393c;
    text-align: center;
}

.sec_pro.sec01 ul li p {
    color: #999;
    text-align: center;
}

.sec_pro.sec02 {
    background: #17393c;
}

.sec_pro.sec02 h3 {
    margin: 0 0 60px 0;
    color: #fff;
}

.sec_pro.sec02 ul li {
    width: 50%;
}

.sec_pro.sec02 ul li .box {
    display: block;
    position: relative;
    padding: 60px 30px;
    background: #fff;
    border-radius: 30px;
}

.sec_pro.sec02 ul li h4 {
    text-align: left;
}

.sec_pro.sec02 ul li p {
    text-align: left;
}


@media screen and (max-width:1280px) {
    .sec_pro h3 {
        font-size: 40px;
    }

    .sec_pro.sec01 ul li {
        width: 50%;
    }
}


@media screen and (max-width:980px) {
    .sec_pro {
        padding: 80px 20px;
    }

    .sec_pro h3 {
        font-size: 36px;
    }

    .sec_pro h4 {
        font-size: 20px;
    }

    .sec_pro p {
        min-height: 80px;
        font-size: 18px;
    }

    .sec_pro ul li {
        padding: 10px;
    }

    .sec_pro.sec01 h3 {
        margin: 0 0 80px 0;
    }

    .sec_pro.sec01 ul li .box {
        padding: 60px 0;
    }

    .sec_pro.sec01 ul li .icon img {
        width: 120px;
        height: auto;
    }

    .sec_pro.sec02 ul li {
        width: 100%;
    }

    .sec_pro.sec02 ul li .box {
        padding: 40px 20px
    }
}


@media screen and (max-width:768px) {
    .sec_pro h3 {
        font-size: 30px;
    }

    .sec_pro h4 {
        font-size: 18px;
    }

    .sec_pro p {
        font-size: 16px;
    }

    .sec_pro.sec01 h3 {
        margin: 0 0 60px 0;
    }

    .sec_pro.sec01 ul li .icon img {
        width: 80px;
        height: auto;
    }

    .sec_pro.sec01 ul li .box {
        padding: 40px 0;
    }

    .sec_pro.sec02 ul li .box {
        padding: 30px 20px
    }
}


@media screen and (max-width:480px) {
    .sec_pro h3 {
        font-size: 24px;
    }

    .sec_pro h4 {
        font-size: 16px;
    }

    .sec_pro p {
        font-size: 14px;
    }

    .sec_pro.sec01 h3 {
        margin: 0 0 40px 0;
    }
}

.l104000001 {
    background: #ebf4ff !important;
    color: #116ad4 !important;
}

.a104000002 {
    background: #0752ab;
    color: #fff;
}

.a104000002:hover {
    background: #0752ab;
    color: #fff;
}

.btn_profile {
    margin-top: 5px !important;
    background: #17393C;
    color: #fff;
}

.skiptranslate {
    display: none;
}

.mgt50 {
    margin-top: 50px !important;
}


.top_banner {
    position: relative;
}

.top_banner .bn_logo {
    position: absolute;
    top: 38px;
    right: 60px;
    width: 80px !important;
}

.top_banner h2 {
    position: absolute;
    color: #fff !important;
    top: 110px;
    left: 80px;
    font-size: 50px !important;
    font-weight: 700 !important;
}

.top_banner p {
    position: absolute;
    color: #fff !important;
    top: 175px;
    left: 80px;
    font-size: 25px !important;
    font-weight: 500 !important;
    letter-spacing: 1px;
}


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

    .top_banner .bn_logo {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 20px !important;
    }

    .top_banner h2 {
        position: absolute;
        color: #fff !important;
        top: 25px;
        left: 28px;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    .top_banner p {
        position: absolute;
        color: #fff !important;
        top: 45px;
        left: 28px;
        font-size: 10px !important;
        font-weight: 500 !important;
        letter-spacing: 1px;
    }

}


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

    .top_banner .bn_logo {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 20px !important;
    }

    .top_banner h2 {
        position: absolute;
        color: #fff !important;
        top: 25px;
        left: 28px;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    .top_banner p {
        position: absolute;
        color: #fff !important;
        top: 45px;
        left: 28px;
        font-size: 10px !important;
        font-weight: 500 !important;
        letter-spacing: 1px;
    }


}


section.service .swiper_ai a.thumb {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

section.service .swiper_ai a.thumb:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*background: linear-gradient(to right, rgba(26, 58, 61, 1) 0%, rgba(26, 58, 61, 0) 100%);*/
}

section.service .swiper_ai a.thumb img {
     width: 100%;
	aspect-ratio: 4 / 3; /* 원하는 비율로 설정 */
	object-fit: cover;    /* 이미지가 비율에 맞게 꽉 차도록 함 */
    border-radius: 10px;  
 
}

section.service .swiper_ai a.thumb .label {
    display: block;
    position: absolute;
    left: 10%;
    top: 50%;
    color: #fff;
    z-index: 2;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

section.service .swiper_ai .label .title {
    color: #fff;
    font-size: 30px;
    font-weight: 800;
}

section.service .swiper_ai .label .title strong {
    color: #7cd9e1;
    font-weight: 800;
}

section.service .swiper_ai .label p {
    font-size: 18px;
    font-weight: 300;
}

@media screen and (max-width:980px) {
    section.service .swiper_ai .label .title {
        font-size: 24px;
    }

    section.service .swiper_ai .label p {
        font-size: 16px;
    }
}

@media screen and (max-width:480px) {
    section.service .swiper_ai .label .title {
        font-size: 18px;
    }

    section.service .swiper_ai .label p {
        font-size: 14px;
    }
}

section.service .swiper_lounge a.thumb {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

section.service .swiper_lounge a.thumb:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(26, 58, 61, 1) 0%, rgba(26, 58, 61, 0) 100%);
}

section.service .swiper_lounge a.thumb img {
    width: 100%;
    height: auto;
}

section.service .swiper_lounge a.thumb .label {
    display: block;
    position: absolute;
    left: 10%;
    top: 50%;
    color: #fff;
    z-index: 2;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

section.service .swiper_lounge .label .title {
    color: #fff;
    font-size: 30px;
    font-weight: 800;
}

section.service .swiper_lounge .label .title strong {
    color: #7cd9e1;
    font-weight: 800;
}

section.service .swiper_lounge .label p {
    font-size: 18px;
    font-weight: 300;
}

@media screen and (max-width:980px) {
    section.service .swiper_lounge .label .title {
        font-size: 24px;
    }

    section.service .swiper_lounge .label p {
        font-size: 16px;
    }
}

@media screen and (max-width:480px) {
    section.service .swiper_lounge .label .title {
        font-size: 18px;
    }

    section.service .swiper_lounge .label p {
        font-size: 14px;
    }
}

section.service .swiper_edn a.card {
    display: block;
    position: relative;
    padding: 20px 0;
    background: url(../img/edn_bg.jpg) no-repeat 50% 50%;
    background-size: cover;
    border: 1px solid #eee;
    border-radius: 20px;
    overflow: hidden;
}


section.service .swiper_edn a.card h4 {
    display: block;
    margin: 0 0 8px 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

section.service .swiper_edn a.card .img {
    display: block;
    position: relative;
    width: 40%;
    margin: 0 auto 6px auto;
    padding: 5px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 197, 108, 1) 0%, rgba(246, 240, 232, 1) 50%, rgba(255, 197, 108, 1) 100%);
}

section.service .swiper_edn a.card .img img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

section.service .swiper_edn a.card .img:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

section.service .swiper_edn a.card .img img {
    border-radius: 10px;
}

section.service .swiper_edn a.card .name {
    display: block;
    color: #666;
    font-size: 12px;
    text-align: center;
    font-weight: 400;
    /*letter-spacing: 16px;*/
}

section.service .swiper_edn a.card .name strong {
    display: block;
    color: #222;
    font-size: 18px;
    font-weight: 800;
    /*letter-spacing: 10px;*/
}

section.service .swiper_edn a.card .tags {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 35%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('ellipsis.xml#ellipsis');

    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

section.service .swiper_edn a.card .tags span {
      display: block;
      margin: 0 0 10px 0;
      padding: 0 8px;
	  width: 80px;             /* 원하는 제한 너비 */
	  white-space: nowrap;      /* 줄바꿈 방지 */
	  overflow: hidden;         /* 영역 밖 텍스트 숨김 */
	  text-overflow: ellipsis;  /* 말줄임표(...) 표시 */


    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 34px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

section.service .swiper_edn a.card .tags span:last-child {
    margin: 0;
}


@media screen and (max-width:980px) {
    section.service .swiper_edn a.card h4 {
        font-size: 20px;
    }

    section.service .swiper_ai .label p {
        font-size: 16px;
    }

    section.service .swiper_edn a.card .name {
        font-size: 11px;
    }

    section.service .swiper_edn a.card .name strong {
        font-size: 30px;
    }

    section.service .swiper_edn a.card .tags span {
        font-size: 14px;
        line-height: 24px;
    }
}

@media screen and (max-width:480px) {
    section.service .swiper_edn a.card h4 {
        font-size: 18px;
    }

    section.service .swiper_ai .label p {
        font-size: 14px;
    }

    section.service .swiper_edn a.card .name {
        font-size: 11px;
    }

    section.service .swiper_edn a.card .name strong {
        font-size: 12px;
    }

    section.service .swiper_edn a.card .tags span {
        font-size: 9px;
        line-height: 22px;
    }
}


.crewtor-nav {
    margin: 20px 0 10px 0;
}

.crewtor-nav .nav-content {
    display: flex;
    gap: 4px;
    font-size: 13px;
    align-items: center;
}

.crewtor-nav .nav-content svg {}

.crewtor-nav .nav-content a {
    color: #727585;
}

.wish-nav {
    margin-top: 10px;
}

.wish-nav .wish-nav-content {}

.wish-nav .wish-nav-content a {
    display: inline-flex;
    background: #F7F8F9;
    color: #767676;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 24px;
}

.wish-nav .wish-nav-content a.active {
    background: #17393C;
    color: #fff;
    font-weight: 600;
}











.exam_wishlist {
    margin: 20px 0 20px 0;
}

.exam_wishlist .empty {
    text-align: center;
    font-size: 14px;
    padding: 120px 0;
}

.exam_wishlist ul {}

.exam_wishlist ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.exam_wishlist ul li {
    display: block;
    float: left;
    width: 48%;
    margin: 0 4% 50px 0;
}

.exam_wishlist ul li:nth-child(2n) {
    margin: 0 0 50px 0;
}

.exam_wishlist ul li .box {
    display: block;
    position: relative;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

.exam_wishlist ul li .box .ed_hd:after,
.exam_wishlist ul li .box .ed_bottom:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.exam_wishlist ul li .box .ed_hd {
    margin: 0 0 30px 0;
    color: #ccc;
    font-size: 18px;
    font-weight: 600
}

.exam_wishlist ul li .box .ed_hd .view {
    display: block;
    float: right;
}

.exam_wishlist ul li .box a.subj {
    display: block;
    position: relative;
    height: 90px;
    font-size: 24px;
    font-weight: 800;
    line-height: 120%;
    z-index: 1;
}

.exam_wishlist ul li .box a.subj:before {
    content: 'Q';
    display: block;
    position: absolute;
    left: -15px;
    top: -4px;
    color: #ccc;
    font-size: 40px;
    font-weight: 800;
    z-index: -1;
}

.exam_wishlist ul li .box a.subj2 {
    display: block;
    position: relative;
    height: 90px;
    font-size: 24px;
    font-weight: 800;
    line-height: 120%;
    z-index: 1;
}

.exam_wishlist ul li .box .profile_box {
    display: flex;
    align-items: center;
    margin: 0 0 30px;
    gap: 8px;
}

.exam_wishlist ul li .box .profile_box .profile_img {}

.exam_wishlist ul li .box .profile_box .profile_img img {
    display: block;
    max-width: 40px;
}

.exam_wishlist ul li .box .profile_box .ans {}

.exam_wishlist ul li .box .ed_bottom {
    line-height: 50px;
}

.exam_wishlist ul li .box .ed_bottom a.ctg {
    display: inline-block;
    margin: 0 10px 0 0;
    padding: 0 30px;
    color: #ccc;
    font-size: 18px;
    font-weight: 500;
    line-height: 48px;
    border: solid 1px #ddd;
    border-radius: 40px;
}

.exam_wishlist ul li .box .ed_bottom a.ctg.active {
    color: #fff;
    line-height: 50px;
    border: none;
}

.exam_wishlist ul li .box .ed_bottom .profile_img {
    display: inline-block;
    width: 50px;
    margin: 0 10px 0 0;
}

.exam_wishlist ul li .box .ed_bottom .profile_img img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.exam_wishlist ul li .box .ed_bottom .ans {
    display: inline-block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 10px;
}

.exam_wishlist ul li .box .ed_bottom .ans span {
    color: #ccc;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 2px;
}

.exam_wishlist ul li .box .ed_bottom .zzim {
    display: block;
    float: right;
    color: #b7b7b7;
    cursor: pointer;
}

.exam_wishlist ul li .box .ed_bottom .zzim.active {
    color: #F9DD04;
}

.exam_wishlist ul li .box .ed_bottom .zzim i {
    font-size: 40px;
    line-height: 50px;
}





#header-v2 {
    padding: 0 9em;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: #fff;
    overflow: hidden;
    transition: height .25s ease;
    border-bottom: 1px solid #eee;
}

#header-v2 .header-v2-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    position: relative;
}

#header-v2 .l-box {
    display: flex;
    gap: 170px;
    align-items: center;
}

#header-v2 .l-box .logo-box {}

#header-v2 .l-box .logo-box img {
    display: block;
    max-width: 100%;
    width: 150px;
}

#header-v2 .l-box .menu-box {
    display: flex;
    gap: 70px;
}

#header-v2 .l-box .menu-box .menu-item {
    position: relative;
}

#header-v2 .l-box .menu-box .menu-item>a {
    font-size: 18px;
}

#header-v2 .l-box .menu-box .menu-item .sub-menu {
    position: absolute;
    top: calc(100% + 60px);
    left: 0;
    min-width: 120px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease .25s;
}

#header-v2 .l-box .menu-box .menu-item .sub-menu h5 {}

#header-v2 .l-box .menu-box .menu-item .sub-menu a {
    font-size: 18px;
    font-weight: 500;
    display: block;
}

#header-v2 .l-box .menu-box .menu-item .sub-menu a+a {
    margin: 21px 0 0;
}

#header-v2 .r-box {
    display: flex;
    gap: 60px;
}

#header-v2 .btn-v1 {
    display: flex;
    padding: 10px 30px;
    border: 1px solid #B7B7B7;
    border-radius: 10px;
    font-size: 15px;
    align-items: center;
    justify-content: center;
}

#header-v2 .btn-v2 {
    display: flex;
    padding: 10px 30px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    background: #17393C;
    color: #fff;
    align-items: center;
    justify-content: center;
}

#header-v2 .r-box .member-btn-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

#header-v2 .r-box .member-btn-box a {
    position: relative;
}

#header-v2 .r-box .member-btn-box a label {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) translateX(50%)
}

#header-v2 .r-box .member-btn-box a img {
    display: block;
    max-width: 25px;
}

#header-v2.is-open .l-box .menu-box .menu-item .sub-menu {
    opacity: 1;
    pointer-events: auto;
}

.mobile-login-wrap {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.mobile-menu-wrap {}

.mobile-menu-wrap .mobile-menu-contents {
    display: none;
}

.mobile-menu-wrap .mobile-menu-contents .menu-layer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2001;
    width: 80%;
    background: #fff;
    overflow-y: auto;
}

.mobile-menu-wrap .mobile-menu-contents .menu-layer .close-btn-wrap {
    padding: 20px 20px 0;
    display: flex;
    justify-content: flex-end;
}

.mobile-menu-wrap .mobile-menu-contents .menu-layer .close-btn-wrap img {
    display: block;
    max-width: 16px;
}

.menu-layer .profile-wrap {
    padding: 20px 20px;
}

.menu-layer .profile-wrap .profile-info {
    margin: 0 0 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-layer .profile-wrap .profile-info .left-profile {}

.menu-layer .profile-wrap .profile-info .left-profile h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
}

.menu-layer .profile-wrap .profile-info .left-profile p {
    font-size: 12px;
    color: #969696;
}

.menu-layer .profile-wrap .profile-member-btn {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.menu-layer .profile-wrap .profile-member-btn a {
    flex: 1;
}

#header-v2 .menu-layer .profile-wrap .profile-member-btn .btn-v1 {
    font-size: 13px;
    color: #969696;
}

.menu-layer hr {
    height: 1px;
    background: #d9d9d9;
    display: block;
    width: calc(100% - 40px);
    margin: 0 auto 20px;
}

.menu-layer .mobile-menu-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
}

.menu-layer .mobile-menu-list .article {}

.menu-layer .mobile-menu-list .article .mobile-top-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.menu-layer .mobile-menu-list .article .mobile-top-menu img {
    display: block;
    max-width: 15px;
    transition: .2s ease;
}

.menu-layer .mobile-menu-list .article .mobile-top-menu img.rotate {
    transform: rotate(180deg);
}

.menu-layer .mobile-menu-list .article .mobile-bottom-menu {
    display: none;
    padding: 16px 16px;
}

.menu-layer .mobile-menu-list .article .mobile-bottom-menu .bm-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-layer .mobile-menu-list .article .mobile-bottom-menu a {
    font-size: 14px;
    padding: 8px 0;
}

.menu-layer .select-box {
    padding: 0 20px;
    margin: 20px 0 0;
}

.menu-layer .select-box select {
    font-size: 16px;
    color: #000;
    border-radius: 4px;
    padding: 4px 6px;
}


.mobile-menu-wrap .mobile-menu-contents .bg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.mobile-menu-btn {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    transform: translateY(-50%);
    display: none;
}

.mobile-menu-btn span {
    display: block;
    width: 19px;
    height: 4px;
    background: #17393C;
}


@media screen and (max-width: 1540px) {
    #header-v2 {
        padding: 0 16px;
        height: auto !important;
    }

    #header-v2 .l-box {
        gap: 60px;
    }

    #header-v2 .l-box .menu-box {
        gap: 40px;
    }

    #header-v2 .l-box .menu-box .menu-item>a {
        font-size: 16px;
    }
}

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

    #header-v2 {
        padding: 0 10px !important;
    }

    #header-v2 .header-v2-inner {
        height: 56px;
        justify-content: center;
    }

    #header-v2 .r-box,
    #header-v2 .l-box .menu-box {
        display: none;
    }

    #header-v2 .l-box .logo-box img {
        width: 94px;
    }

    #header-v2 .btn-v1 {
        font-size: 8px;
        padding: 4px 3px;
    }

    .mobile-menu-wrap {
        display: block !important;
    }

    .mobile-menu-btn {
        display: block;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

}


.language-box .selec {
    display: block;
    position: relative;
    width: 182px;
}

.language-box .selec a.btn {
    display: block;
    width: 100%;
    padding: 0 10px;
    color: #999;
    font-size: 14px;
    line-height: 38px;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 10px;
}

.language-box .selec a i {
    font-size: 14px;
    line-height: 38px;
}

.language-box .selec:after {
    content: "\e941";
    display: block;
    position: absolute;
    right: 15px;
    top: 0px;
    height: 40px;
    font-family: "xeicon";
    color: #ccc;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    background: none;
    z-index: 1;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.language-box .selec.selected:after {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.language-box .selec_layer {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 52px;
    overflow-y: auto;
    padding: 5px 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.language-box .selec_layer a {
    display: block;
    padding: 0 10px;
    color: #111;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
}

.language-box .selec_layer a:hover {
    background: #eee;
}


.select-box .selec {
    display: block;
    position: relative;
    width: 120px;
}

.select-box .selec a.btn {
    display: block;
    width: 100%;
    padding: 0 10px;
    color: #999;
    font-size: 14px;
    line-height: 38px;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 10px;
}

.select-box .selec a i {
    font-size: 14px;
    line-height: 38px;
}

.select-box .selec:after {
    content: "\e941";
    display: block;
    position: absolute;
    right: 15px;
    top: 0px;
    height: 40px;
    font-family: "xeicon";
    color: #ccc;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    background: none;
    z-index: 1;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.select-box .selec.selected:after {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.select-box .selec_layer {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 52px;
    overflow-y: auto;
    padding: 5px 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.select-box .selec_layer a {
    display: block;
    padding: 0 10px;
    color: #111;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
}

.select-box .selec_layer a:hover {
    background: #eee;
}

#goog-gt-vt {
    display: none;
}




section.search {
    padding: 20px;
}

section.search .cont {
    width: 100%;
    max-width: 834px;
    margin: 0 auto;
}

section.search .form {
    border: 1px solid #969696;
    border-radius: 48px;
    height: 48px;
    display: flex;
    align-items: center;
}

section.search .form .input {
    flex: 1;
}

section.search .form .input input {
    background: transparent;
    padding: 0 32px;
    width: 100%;
    height: 48px;
    font-size: 21px;
    font-weight: 500;
    border: none;
}

section.search .form .btns {
    flex: 0 0 auto;
    padding: 0 20px;
}

section.search .form .btns button {
    width: 24px;
    height: 24px;
    background: url("../img/search_line.svg") no-repeat center / contain;
    border: none;
}

.mb50 {
    margin-bottom: 50px;
}

section.search {
    padding: 20px;
}

section.search .cont {
    width: 100%;
    max-width: 834px;
    margin: 0 auto;
}

section.search .form {
    border: 1px solid #ddd;
    border-radius: 48px;
    height: 48px;
    display: flex;
    align-items: center;
}

section.search .form .input {
    flex: 1;
}

section.search .form .input input {
    background: transparent;
    padding: 0 32px;
    width: 100%;
    height: 48px;
    font-size: 21px;
    font-weight: 500;
    border: none;
}

section.search .form .btns {
    flex: 0 0 auto;
    padding: 0 20px;
}

section.search .form .btns button {
    width: 24px;
    height: 24px;
    background: url("../img/search_line.svg") no-repeat center / contain;
    border: none;
}

.mb50 {
    margin-bottom: 50px;
}

.dot {
    width: 2px;
    height: 2px;
    background: #333;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}


/* 팝업레이어 */
#hd_pop {
    z-index: 1000;
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 0
}

#hd_pop h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

.hd_pops {
    position: absolute;
    max-width: 100%;
    border: 1px solid #e9e9e9;
    background: #fff
}

.hd_pops img {
    max-width: 100%
}

.hd_pops_con {
    max-width: 100%;
}

.hd_pops_footer {
    padding: 0;
    background: #000;
    color: #fff;
    text-align: left;
    position: relative
}

.hd_pops_footer:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.hd_pops_footer button {
    padding: 10px;
    border: 0;
    color: #fff
}

.hd_pops_footer .hd_pops_reject {
    background: #000;
    text-align: left
}

.hd_pops_footer .hd_pops_close {
    background: #393939;
    position: absolute;
    top: 0;
    right: 0
}

/* 위로가기 버튼 */
.progress-wrap {
    position: fixed;
    right: 25px;
    bottom: 100px;
    /* 채널톡 위쪽 위치 */
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap svg path {
    fill: none;
    stroke: #1f2029;
    /* 채워질 선 색상 */
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear;
}

.arrow-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: 800;
}

@media screen and (max-width: 480px) {
    .progress-wrap {
        width: 44px;
        height: 44px;
        right: 14px;
        bottom: 120px;
    }


    .drxGAZ {
        position: fixed;
        overflow: visible;
        display: flex;
        flex-wrap: nowrap;
        width: auto;
        background: transparent;
        bottom: calc(env(safe-area-inset-bottom) + 68px);
        right: 14px;
    }

}

@media screen and (max-width:980px) {
    .tail-right {
        width: 100%;
    }

    .sitemap .cust_info {
        float: none;
        width: 100%;
        margin: 0 0 40px 0;
    }

    .sitemap ul {
        float: none;
        width: 100%;
        margin: 0 0 40px 0;
    }
}

section.board {
    overflow: hidden;
}

section.board .cont {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 필터 버튼 스타일 */
.filter-bar {
    padding: 20px 0;
    display: flex;
    gap: 8px;
}

.filter-btn {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
}

.filter-btn.active {
    border-color: #000;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .filter-bar {
        padding: 20px 0px;
    }