@charset "utf-8";

/*========================================================================================================================================= */
/*================================================================ common ================================================================= */
/*========================================================================================================================================= */

section.img-section {
    padding: 0 !important;
}

#wrapper {
    margin-top: 0px;
}
section:last-of-type {
    padding-bottom: 120px;
}
main {
    overflow: hidden;
}

.link {
    position: absolute;
    top: -120px;
    left: 0;
}
.res-bg {
    padding: 120px 0 !important;
}
.title-num {
    display: flex;
    padding-top: 5px;
    margin: 0 auto 10px;
    background: #7bb9b8;
    color: #fff;
    font-size: 30px;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    font-family: 'NanumSquare', san-serif;
    font-weight: 700;
    transform: skew(-0.1deg);
    border-radius: 50%;
}

.stick ul.flex li h6 {
    background: #7bb9b8;
    color: #fff;
    padding: 10px;
    font-family: 'NanumSquare', san-serif;
    font-weight: 700;
    transform: skew(-0.1deg);
}
.stick ul.flex li:nth-child(2n) h6 {
    background: #7bb9b8;
}

/* 숫자 스타일 */
.num::before {
    content: attr(data-num);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #7bb9b8;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}
.num.num-posa::before {
    position: absolute;
    margin: 0;
}

/* 미들 타이틀 (작은 타이틀) */
.middle-title {
    /*  */
    font-weight: 500;
    text-align: center;
    margin-bottom: 40px;
}
.middle-title p {
    font-weight: 400;
    white-space: pre-line;
    margin-top: 20px;
}
.middle-title h4 {
    font-weight: 500;
}
.middle-title h6 {
    font-family: 'NanumSquare', san-serif;
    font-weight: 700;
    transform: skew(-0.1deg);
    white-space: pre-line;
}
.middle-title > span.num::before {
    font-family: 'NanumSquare', san-serif;
    font-weight: 400;
    transform: skew(-0.1deg);
    margin: 0 auto 20px;
}

/* 테이블 스타일 */
.table-wrap {
    text-align: center;
}
.table-wrap .middle-title h4 {
    display: inline-block;
    padding: 12px 20px 8px;
    background-color: #7bb9b8;
    color: #fff;
}
.table-wrap table {
    width: 100%;
    white-space: pre-line;
}
.table-wrap table tr,
.table-wrap table th,
.table-wrap table td {
    font-size: 18px;
    padding: 15px 10px;
    border: 1px solid #eee;
    vertical-align: middle;
}
.table-wrap table thead tr,
.table-wrap table tbody tr th {
    background: #f5f5f5;
    font-weight: 600;
}
.table-wrap .imp-icon img {
    max-width: 50px;
    margin-bottom: 10px;
}

/* 사진 들어간 테이블 */
.photo-table table {
    text-align: center;
    width: 100%;
}
.photo-table table tr,
.photo-table table tr td {
    padding: 15px 10px;
    border: 1px solid #ccc;
    vertical-align: middle;
}
.photo-table table td {
    white-space: pre-line;
}
.photo-table table thead tr:first-of-type td,
.photo-table table thead tr {
    border: none;
}
.photo-table table thead tr:first-of-type td {
    padding: 0;
}
.photo-table table thead tr:last-of-type td {
    background: #f7f7f7;
    font-weight: 600;
    font-size: 20px;
}
.photo-table table thead tr:first-of-type td:not(:first-child) {
    /* border: 1px solid #ccc; */
    border-bottom: none;
}

.photo-table tbody tr td:first-child {
    background-color: #fffcf8;
}

/* 숫자 리스트 */
.num-list .num {
    position: relative;
    margin-bottom: 30px;
    padding-left: 50px;
    text-align: left; /* display: flex; align-items: center; */
}
.num-list .num:last-child {
    margin-bottom: 0;
}
.num-list .num::before {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0px;
    width: 35px;
    height: 35px;
    font-size: 20px;
}
.num-list .num:nth-child(2n)::before {
    background-color: #374550;
}
.num-list.middle .num::before {
    top: 50%;
    transform: translateY(-50%);
}

/* 이미지 테두리 리스트 */
.line-list img {
    border: 1px solid #ccc;
}

/* 원형 이미지 테두리 리스트 */
.circle-list img {
    border-radius: 50%;
    border: 1px solid #ccc;
}

/* 파란 선 들어간 네모 박스 */
.line-box li > div {
    position: relative;
    padding: 30px 20px 30px 30px;
    border: 1px solid #eee;
}
.line-box li > div::after {
    content: '';
    display: block;
    width: 10px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #7bb9b8;
}
.line-box h5 {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-weight: 500;
}
.line-box p {
    white-space: pre-line;
}

/* 사진+텍스트 들어간 기본 스타일 */
.basic-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 40px;
}
.basic-box:first-of-type {
    margin-top: 0;
}
.basic-box li:first-child {
    flex: 1;
}
.basic-box li:last-child {
    margin-left: 30px;
    flex: 1;
}
.basic-box li h5 {
    margin: 0 0 15px;
    font-weight: 600;
    white-space: pre-line;
    
    transform: skew(-0.1deg);
}
.basic-box li.num h5 {
    margin: 20px 0 15px;
}
.basic-box li p {
    white-space: pre-line;
}
.basic-box.line li h5 {
    position: relative;
    padding-bottom: 10px;
}
.basic-box.line li h5::before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: #7bb9b8;
}

/* 원 안에 아이콘 없는 박스 */
.circle-box > div > div {
    border-radius: 50%;
    background-color: #374550;
    color: #fff;
}
.circle-box:nth-child(2n-1) > div > div {
    background-color: #78b8b7;
}
.circle-box > div > div::after {
    content: '';
    display: block;
    padding-bottom: 100%;
}
.circle-box p {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 50%;
    transform: translate(0, 50%);
    text-align: center;
    white-space: pre-line;
}
.circle-box h5 {
    position: absolute;
    white-space: pre-line;
    text-align: center;
    bottom: 50%;
    transform: translateY(50%);
    display: inline-block;
    width: 100%;
}
/* .circle-box span{font-size: 24px; font-weight: bold;} */

/* 원 안에 아이콘 들어간 리스트 */
.circle-icon > li > div > div {
    border-radius: 50%;
    border: 2px solid #f5f5f5;
    width: 100%;
    height: 100%;
}
/* .circle-icon > li:nth-child(2n-1) > div > div {
    border: 2px solid #d9dfee;
} */
.circle-icon > li > div > div::after {
    content: '';
    display: block;
    padding-bottom: 100%;
}
.circle-icon > li > div > div > div {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    height: 50%;
    width: 100%;
}
.circle-icon p {
    margin-top: 15px;
    line-height: 1.4;
}

/* 배경색 타이틀 */
.bg-tit {
    display: inline-block;
    padding: 4px 28px;
    margin: 0 auto;
    background: linear-gradient(to right, #1f3d74, #4067aa);
    color: #fff;
}

/* 둥근 모서리를 가진 배경색 타이틀 */
.radius-tit {
    display: inline-block;
    padding: 8px 42px;
    margin: 0 auto;
    border-radius: 40px;
    background: linear-gradient(to right, #1f3d74, #4067aa);
    color: #fff;
}

/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width: 1500px) {
}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width: 1200px) {
    #wrapper {
        margin-top: 54px;
    }
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width: 1025px) {
}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width: 900px) {
    /* 테이블 스타일 */
    .table-wrap .table-scroll {
        overflow-x: scroll;
        overflow-y: hidden;
        max-width: 100%;
    }
    .table-wrap table {
        min-width: 900px;
    }
    .table-wrap table tr,
    .table-wrap table th,
    .table-wrap table td {
        font-size: 15px;
    }
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width: 769px) {
    section:last-of-type {
        padding-bottom: 80px;
    }

    .res-bg {
        padding: 80px 0 !important;
    }

    /* 숫자 스타일 */
    .num::before {
        margin: 10px auto 0;
        width: 40px;
        height: 40px;
    }
    .num-list .num::before {
        margin: 0 10px 0 0;
    }

    /* 사진 들어간 테이블 */
    .photo-table table td {
        font-size: 15px;
    }
    .photo-table table thead tr:last-of-type td {
        font-size: 18px;
    }

    /* 사진+텍스트 들어간 기본 스타일 */
    .basic-box {
        display: block;
        text-align: center;
    }
    .basic-box:not(:first-of-type) {
        margin-top: 40px;
    }
    .basic-box li:last-child {
        margin-left: 0;
        margin-top: 20px;
    }
    .basic-box li h5 {
        margin: 20px 0 10px !important;
    }
    .basic-box li img {
        border-radius: 20px;
        max-width: 500px;
        width: 100%;
    }
    .basic-box.line li h5::before {
        left: 50%;
        transform: translateX(-50%);
    }

    /* 파란 선 들어간 네모 박스 */
    .line-box li::after {
        width: 8px;
    }
    .line-box li > div {
        height: auto !important;
    }
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width: 600px) {
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width: 425px) {
    section:last-of-type {
        padding-bottom: 60px;
    }

    .link {
        top: -60px;
    }
    .res-bg {
        padding: 50px 0 !important;
    }
    .stick .flex > li > div.m10 {
        margin: 5px;
    }
    .title-num {
        font-size: 20px;
        width: 45px;
        height: 45px;
    }

    /* 숫자 스타일 */
    .num::before {
        width: 35px;
        height: 35px;
        font-size: 17px;
        margin: 0 auto;
    }
    .num-list .num {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        padding-left: 40px;
    }
    .num-list .num:not(:first-child) {
        margin-top: 20px;
    }
    .num-list .num::before {
        width: 30px;
        height: 30px;
        margin: 0 auto;
        font-size: 16px;
    }

    /* 미들 타이틀 (작은 타이틀) */
    .middle-title {
        margin-bottom: 20px;
    }
    .middle-title p {
        margin-top: 10px;
    }
    .middle-title > span.num::before {
        margin: 0 auto 10px;
    }

    /* 사진+텍스트 들어간 기본 스타일 */
    .basic-box li img {
        border-radius: 10px;
        max-width: 70%;
    }
    .basic-box li h5 {
        margin: 15px 0 10px !important;
        line-height: 1.4;
    }

    /* 원 안에 아이콘 없는 박스 */
    .circle-box > div {
        margin: 5px !important;
    }
    .circle-box h5 {
        font-size: 15px;
    }

    /* 파란 선 들어간 네모 박스 */
    .line-box li::after {
        width: 5px;
    }
    .line-box li > div {
        padding: 25px 20px 30px 25px;
    }
    .line-box li h5 {
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    /* 테이블 스타일 */
    .table-wrap table {
        min-width: 700px;
    }
    .table-wrap table tr,
    .table-wrap table th,
    .table-wrap table td {
        font-size: 12px;
    }
    .table-wrap .imp-icon img {
        max-width: 30px;
        margin-bottom: 5px;
    }

    /* 사진 들어간 테이블 */
    .photo-table table td {
        font-size: 12px;
    }
    .photo-table table tr,
    .photo-table table tr td {
        padding: 10px 5px;
    }
    .photo-table table thead tr:last-of-type td {
        font-size: 15px;
    }

    /* 배경색 타이틀 */
    .bg-tit {
        padding: 3px 24px;
    }

    /* 둥근 모서리를 가진 배경색 타이틀 */
    .radius-tit {
        padding: 6px 32px;
    }
}

/*========================================================================================================================================= */
/*================================================================ common ================================================================= */
/*========================================================================================================================================= */

/*========================================================================================================================================= */
/*================================================================ banner ================================================================= */
/*========================================================================================================================================= */

/* common */
.banner-bg {
    padding: 300px 0;
}
.banner-bg h2 {
    color: #fff;
    text-align: center;
}
.banner-bg p {
    color: #fff;
    text-align: center;
    font-size: 13px;
    letter-spacing: 2px;
}
/* 서브페이지 배너 */
.banner-bg-01.banner-bg {
    background: url(../img/sub/banner_01.jpg) center/cover no-repeat;
}
.banner-bg-02.banner-bg {
    background: url(../img/sub/banner_02.jpg) center/cover no-repeat;
}
.banner-bg-03.banner-bg {
    background: url(../img/sub/banner_03.jpg) center/cover no-repeat;
}
.banner-bg-04.banner-bg {
    background: url(../img/sub/banner_04.jpg) center/cover no-repeat;
}
.banner-bg-05.banner-bg {
    background: url(../img/sub/banner_05.jpg) center/cover no-repeat;
}


/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width: 1500px) {
}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width: 1200px) {
    .banner-bg {
        padding: 150px 0;
    }
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width: 1025px) {
}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width: 900px) {
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width: 769px) {
    .banner-bg {
        padding: 100px 0;
    }
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width: 600px) {
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width: 425px) {
    .banner-bg {
        padding: 60px 0;
    }
}

/*========================================================================================================================================= */
/*================================================================ banner ================================================================= */
/*========================================================================================================================================= */

/* sub 1-1 */
.mv-section{
    position: relative;
    height: 500px;
}
.m_mv-section{
    display: none;
}

.mv-section img{
    position: absolute;
    transition: all 2s;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
.mv-section img:nth-child(1){
    opacity: 0;
    top: 50%;
    left: 50%;
}
.mv-section img:nth-child(2){
    opacity: 0;
    top: 50%;
    left: 50%;
}
.mv-section img:nth-child(3){
    top: 50%;
    left: 50%;
}
.active .mv-section img:nth-child(1){
    opacity: 1;
    left: 100%;
}
.active .mv-section img:nth-child(2){
    opacity: 1;
    left: 0;
}

@media (max-width:1200px) {
    .m_mv-section{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mv-section{
        display: none;
    }
}

/* sub 1-2 */
.doctors{
    display: flex;
    flex-wrap: wrap;
}
.doctors > div{
    padding: 20px;
}
.doctor-box {
    position: relative;
    color: #fff;
}
.doctor-box .img-bg-active{
    transition: all 0.5s;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 5px 5px 12px -3px #0000002b;
}

.doctor-sub{
    margin-top: 50px;
    position: absolute;
    padding: 20px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.doctor-sub > span:last-child{
    font-size: 18px;
}
.doctor-sub > span:first-child > span:last-child{
    font-size: 24px;
}

.doctor-sub > span:nth-child(1) {
    font-weight: 700;
    display: flex;
    align-items: end;
    gap: 8px;
}

.doctor-box:hover .img-bg-active{
        opacity: 1;
}
.doctor-box:hover .doctor-sub{
        color: #000;
}
.doctor-box:hover .doctor-sub > span:nth-child(1){
    color: #41619d;
}

@media (max-width:769px) {
    .doctor-sub{
        margin-top: 0px;
        padding: 8px;
    }
    .doctors > div{
        padding: 8px;
    }
    .doctor-sub > span:first-child > span:last-child{
        font-size: 12px;
    }
    .doctor-sub > span:last-child{
        font-size: 12px;
    }
}

/* sub 1-3 */
.ht-logo-box{
    padding: 14px;
}
.ht-logo-box > a{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ht-logo-box > a > span:first-child{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border-radius: 15px;
    box-shadow: 2px 2px 12px -3px #0000002b;
    padding: 8px;
}
.ht-logo-box > a > span:first-child > img{
    width: 100%;
}
.ht-logo-box > a > span:last-child{
    font-weight: 700;
}
.logo-swiper{
    overflow: hidden;
}
.logo-swiper .swiper-slide{
    padding: 30px;
}

.logo-section .swiper-button-prev, .logo-section .swiper-button-next{
    color: #000000;
    transition: opacity 0.5s;
    opacity: 0.3;
}
.logo-section .swiper-button-prev:hover, .logo-section .swiper-button-next:hover{
    opacity: 0.8;
}

.logo-swiper-btn-con{
    position: absolute;
    display: flex;
    justify-content: space-between;
    left: -30px;
    right: -30px;
    transform: translateY(50%);
    top: 50%;
    align-items: center;
}

@media(max-width:1200px) {
    .logo-swiper-btn-con{
        left: 10px;
        right: 10px;
    }
}

/* sub 1-4 */
.root_daum_roughmap{
    width: 100% !important;
}
.map-btn-con{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.map-btn-con > *{
    cursor: pointer;
}

@media(max-width:769px) {
    .map-btn-con{
        flex-direction: column;
    }
}

/* sub 2-1 */
.sub1-4-eq-box > li {
    padding: 20px;
}

@media(max-width:769px) {
    .sub1-4-eq-box > li {
        padding: 8px;
    }
}

/* sub 2-2 */


/* sub 4-1 */
.interrior{
    background-color: #f6f9ff;
    padding: 120px 0 ;
}

/* sub 3 common */
.sub3-banner{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	height: 400px;
}
.sub3-banner.sub3_1-banner{
    background: url(../img/custom/sub_3_1-bg.png) center/cover no-repeat;   
}
.sub3-banner.sub3_2-banner{
    background: url(../img/custom/sub_3_2-bg.png) center/cover no-repeat;   
}
.sub3-banner.sub3_3-banner{
    background: url(../img/custom/sub_3_3-bg.png) center/cover no-repeat;   
}
.sub3-banner.sub3_4-banner{
    background: url(../img/custom/sub_3_4-bg.png) center/cover no-repeat;   
}
.sub3-banner.sub3_5-banner{
    background: url(../img/custom/sub_3_5-bg.png) center/cover no-repeat;   
}

 @media (max-width:769px) {
        .sub_3-common-box > div:last-child{
            flex-direction: column-reverse;
        }
    }

    ul.sub_3-list {width: 1000px;max-width:100%; margin: 0 auto;}
				ul.sub_3-list li {position: relative; padding: 20px 0 18px 40px; font-size: 18px; line-height: 28px; border-bottom: 1px dashed #ccc;}     
				ul.sub_3-list li span {position: absolute; top: 20px; left: 0; display: inline-block; width: 30px; height: 30px; text-align: center; color: #fff; background: #0c2b64; border-radius: 30px; line-height: 30px; font-weight: bold; font-size: 14px;}  

                	.ser2  {
				    border: 1px solid #d7d7d7;
				    padding: 10px;
					vertical-align:  middle;
					   text-align: center;
					  line-height: 30px;
					  font-size: 18px;
					  color: #666666;
					  font-family: "NanumSquare"; 

				  }
			  
				.ser3 {
				    border: 1px solid #d7d7d7;
				    padding: 10px;
					vertical-align:  middle;
					   text-align: center;
					  line-height: 30px;
					  font-size: 18px;
					  color:#666666;
					  font-family: "NanumSquare"; 

				  }
			  
				 .ser1 {
				    width: 100%;
				    border-top: 3px solid #405b92;
				    border-left: 1px solid #d7d7d7;
				    margin-top: 10px;
				}

                .sub3-sub-notice {width: 100%; background: url() top center repeat-x ; overflow: hidden;}
                .sub3-sub-notice .wrap {margin: 0 auto; position: relative;}
                .sub3-sub-notice .wrap .section {margin: 0 0 30px 0;}
                .sub3-sub-notice .wrap h3 {height: 42px; font-weight: bold; font-size: 32px; color: #4166cf; margin: 0 0 30px 0;}
                .sub3-sub-notice .wrap h3 span {
                    width: 58px; height: 42px; background: url() no-repeat #4166cf;
                    border-radius:3px; color: #fff; 
                    display: inline-block; vertical-align: middle; 
                    text-align: center; line-height: 42px;
                    font-size: 24px;
                    font-weight: 300;
                    margin: -2px 0 0 0;
                }
                .sub3-sub-notice .wrap h4 {font-weight: bold; font-size: 26px; color: #4166cf; margin: 0 0 20px 0;}
                .sub3-sub-notice .wrap p {font-weight: 100; font-size: 20px; color: #606060; margin: 0 0 40px 0; line-height: 30px;} 


                @media screen and (max-width: 600px) {
                .sub3-sub-notice .wrap h3 span {display:none;}
                   .sub3-sub-notice .wrap h3 {height: 42px; font-weight: bold; font-size: 30px; color: #4166cf;text-align:center;line-height:120%;padding:10px;} 
                   .sub3-sub-notice .wrap h4 {font-weight: bold; font-size: 23px; color: #4166cf;text-align:center;}
                }
                
/* sub 3-1 */
.sub_3_1-box > div{
    padding: 16px;
}

/* sub 3-3 */
.sub_3_3-btn-box{
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* sub 4-1 */
.interrior img{
    width: 100%;
}
.interrior  .swiper-slide{
    overflow: hidden;
    border-radius: 15px;
}
.interrior .swiper, swiper-container{
    overflow: visible;
}
.interrior  .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{
    bottom: -30px;
}

/* sub 4-2 */
.floor-intro{
    background: url(../img/custom/sub_4_2-bg.png) center/cover no-repeat;   
}

.floor-guide{
		width: 100%;
	}
	.floor-intro{
		padding: 120px 0;
		color: #fff;
	}
	.floor-guide td{
		height: 100px;
		width: 40%;
		height: 100px;
		border: 2px solid #fff;
		text-align: center;
		vertical-align: middle; 
		position:relative;
	}
	.floor-guide td:last-child > div{
		overflow: hidden;
		top: -2px;
		left: -2px;
		right: -2px;
		bottom: -2px;
		position: absolute;
		transition: all 0.5s;
		border: 2px solid #fff;
	}
	.floor-guide td:last-child > div > img{
		filter: brightness(0.4);
	}
	.floor-guide td:last-child > div:hover{
		z-index: 2;
		bottom: -102px;
	}
	.floor-guide td:last-child > div:hover > img{
		filter: brightness(1);
	}
	.floor-guide td.floor{
		width: 20%;
		font-size: 35px;
		font-weight: 700;
		background-color: #0c2b64;
	}

	@media (max-width:769px) {
		.floor-guide td{
			width: 100%;
		}
		.floor-guide td:last-child{
			/* display: none; */
		}
		.floor-guide td{
			pointer-events: inherit;
		}
        .floor-guide td.floor{
            font-size: 25px;
        }
	}

	/* 모달 */
	.modal {
	  display: none;
	  position: fixed;
	  z-index: 1000;
	  inset: 0;
	  background-color: rgba(0, 0, 0, 0.6);
	}

	.modal-content {
	  background: #fff;
	  margin: 20vh auto;
	  padding: 2em;
	  border-radius: 10px;
	  width: 80%;
	  max-width: 500px;
	  position: relative;
	}
	.modal-content img{
		border-radius: 10px;
	}

	.closeBtn {
	  position: absolute;
	  top: 5px;
	  right: 20px;
	  font-size: 1.5em;
	  cursor: pointer;
	}

    #gallery img {width: 100%;}
    #gallery .swiper-button-prev,
    #gallery .swiper-button-next {position: absolute; top: 50%; transform: translateY(-50%); margin: 0; width: 50px; height: 50px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); color: #333;
text-align: center; line-height: 30px; cursor: pointer; transition: all 0.4s ease-in-out;}
    #gallery .swiper-button-prev:after,
    #gallery .swiper-rtl .swiper-button-next:after {display: none;}
    #gallery .swiper-button-next:after,
    #gallery .swiper-rtl .swiper-button-prev:after {display: none;}
    #gallery .swiper-button-prev i,
    #gallery .swiper-button-next i {font-size: 16px;}
    #gallery .swiper-button-prev {left: 10px;}
    #gallery .swiper-button-next {right: 10px;}
    #gallery .swiper-button-prev:hover,
    #gallery .swiper-button-next:hover {background-color: rgba(22, 22, 22, 0.8); color: #fff;}