@charset "utf-8";
/** margin & paddig **/
.mt1{margin-top:1em;}
.mt2{margin-top:2em;}
.mt3{margin-top:3em;}
.mt4{margin-top:4em;}
.mt5{margin-top:5em;}
.mb2{margin-bottom:2em;}
.mb3{margin-bottom:3em;}
.mb4{margin-bottom:4em;}
.mb5{margin-bottom:5em;}

/** 서브공통 **/ 
#container > h3{
    font-size: var(--sub-h3-size);
    text-align: center;
    /* padding-top: 1em;
    padding-bottom: 1em; */
}
.sub_title_con {
	height: 100vh;
	width: 100%;
	/* background-color: #ccc; */
	/* margin-top: 90px; */
	/* margin-bottom: 8em; */
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	flex-direction: column;
}

/* .sub_title_con.bgimg_ab{
    background-image: url(/img/slide/sub-slide.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
} */

.sub_title_con .sub_slide{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100vh;
}

.sub_title_con .sub_slide li {height: 100%;}
.sub_title_con .sub_slide .swiper-autoheight, .sub_title_con .sub_slide .swiper-autoheight .swiper-slide {height:100vh;}
.sub_title_con .sub_slide .swiper-wrapper {
    position: relative;
}

.sub_title_con .title_txt {width: var(--width-sub-size);margin: 0 auto;margin-bottom: 2%;}

.sub_title_con h2 {
    font-size: 3.5em;
    color: white;
    /* visibility: hidden; */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 11;
    position: relative;
    text-shadow: 0 5px 20px #00000080;
    font-weight: 700;
    /* font-family: var(--font-point); */
}

.sub_title_con .sub_slide .swiper-wrapper img{
    width: 100%;
	height:100vh;
	object-fit:cover;
	object-position:center;
}

.swiper .swiper-button-next{
    right: 15px;
    top: 95%;
    color: #fff;
    z-index: 111;
}

.swiper .swiper-button-prev{
    left: 85.10%;
    color: #fff;
    top: 95%;
    z-index: 111;
}

.swiper .swiper-button-prev:after,
.swiper .swiper-rtl .swiper-button-next:after{
    font-size: var(--font-size36);
}


.swiper .swiper-button-next:after,
.swiper .swiper-rtl .swiper-button-prev:after{
    font-size: var(--font-size36);
    position: absolute;
}

.swiper .swiper-pagination{
    display: flex;
    justify-content: center;
    color: #fff;
    align-items: center;
    font-size: 2em;
    letter-spacing: 0.2em;
}

.swiper .swiper-pagination.numbox{
    width: 300px;
    height: 95px;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 84.3%;
    bottom: 0px;
}

.swiper .swiper-pagination .swiper-pagination-current{
    font-size: 2em;
    font-family: var(--font-basic);
}

@media screen and (max-width: 1000px) {
	.sub_title_con{
	    height: 49vh;
	    padding-bottom: 0;
	    position: relative;
	}
	.sub_title_con .title_txt{
	    width: 100%;
	}

	.sub_title_con .sub_slide{height: 40vh;top: 9vh;}
	
	.sub_title_con .sub_slide .swiper-wrapper{
	    position: relative;
	}
	.sub_title_con .sub_slide .swiper-wrapper img{
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    object-position: center;
	}

	.swiper .swiper-button-next{
	    right: 7px;
	    top: 92%;
	    color: #fff;
	    z-index: 111;
	}
	.sub_title_con .sub_slide .swiper-autoheight, .sub_title_con .sub_slide .swiper-autoheight .swiper-slide {height: 100%;}
	.swiper .swiper-button-next:after, .swiper .swiper-rtl .swiper-button-prev:after{
	    font-size: var(--font-size36);
	    position: absolute;
	}

	.swiper .swiper-button-prev{
	    left: 81.1%;
	    color: #fff;
	    z-index: 111;
	    top: 92%;
	}

	.swiper .swiper-button-prev:after, .swiper .swiper-rtl .swiper-button-next:after{
	    font-size: var(--font-size36);
	}

	.swiper .swiper-pagination .swiper-pagination-current, .swiper .swiper-pagination .swiper-pagination-total{
	    display: none;
	}

	.swiper .swiper-pagination .swiper-pagination-current, .swiper .swiper-pagination .swiper-pagination-total{
	    display: none;
	}
	.swiper .swiper-pagination.numbox{
	    height: 35px;
	    background-color: rgba(255, 255, 255, 0.5);
	    left: 79.3%;
	    position: absolute;
	}
}
.sub_title_con .txt_nav {color:#fff;font-weight: 300;font-size: 0.9em;margin-top: 1.5em;display: flex;position: absolute;}
.sub_title_con .txt_nav li {
    padding: 0 .3em;
    line-height: 0;
}
.sub_all {color:#333;width: 100%;word-break: keep-all;position: relative;}
.sub_tit {margin: 3em 0 2em;}
.sub_tit_center {text-align:center;}
.sub_tit h4, .sub_tit_center h4{
    font-size: var(--sub-h4-size);
    position: relative;
    font-family: 'Nanum Gothic';
}
.sub_tit h4:after {display:none;content:"";position:absolute;width: 9px;height: 9px;background-color: var(--color-main);top: 0;/* right: 0; */margin-left: 5px;border-radius: 100%;}
.sub_tit_center p{
    color: #838383;
    font-size: 1.5em;
    line-height: 1em;
}
.tit_sub_p {
    text-align: center;
    margin-top: -0.5em;
    color: var(--color-point1);
    font-weight: 500;
    font-size: 1.4em;
}
.tit_sub_txt {
    font-size: var(--font-size2);
    text-align: center;
    margin-top: -1em;
}
.sub_conts {
    /* margin-bottom: 4em; */
}

/** 서브탭 **/
.subtab_case1 {}
.subtab_case1 .tabs {}
.subtab_case1 .tabs, .subtab_case1 .tabs :after, .subtab_case2 .tabs, .room_tabs * {transition: all .4s;}
.subtab_case2 {}
.subtab_case2 .tabs {
    display: flex;
    justify-content: space-between;
}
.subtab_case2 .s1 {}
.subtab_case2 .s1 li {
    padding: .6em 1.2em;
    background-color: var(--color-gray);
    border-radius: .5em;
}
.subtab_case2 .s1 li:hover {background-color: var(--color-point1);}
.subtab_case2 .s1 li.on {
    background-color: var(--color-main);
}
.subtab_case2 .s1 li.on a {color:#fff;}
.room_tabs {}
.room_tabs li{}
.room_tabs li.on a{
    color: var(--color-point4);
}
.room_inner {
    display: none;
}


.class_s1 > div.on {/* visibility:visible; */height: auto;display: block;animation: fadeInUp .5s;}

.tab_inner {/* visibility:hidden; */height: 0;display: none;width: 100%;}

.sub_conts div.on {display: block; height:auto;}

@media screen and (max-width: 1000px) {
	.page-num{display:none;}
	.sub_title_con h2 {
        font-size: 2.5em;
        text-align: left;
        padding-left: 3%;
        display: flex;
        justify-content: flex-start;
        font-weight: 500;
        width: 78%;
        }
	.sub_title_con .txt_nav {margin-top: 0.5em;}
	.sub_tit h4{font-size: 1.7em;}
	.subtab_case1 {
    width: 100%;
	}
	.tit_sub_p {
    letter-spacing: -1px;
    font-size: 0.95em;
	}
	.subtab_case2 .s1 {
    display: flex;
    flex-wrap: wrap;
	}
	.subtab_case2 .s1 li {
    width: 48%;
    margin-top: 0.5em;
	}

}

/** 백그라운드 및 박스 **/

.full_bg {
	width:100%;
	background-color: var(--color-bg-point4);
	padding: 1em 0 4em;
}
.bg_img {
	background: url(/img/page/1040/bg.png);
	margin-top: -22em;
	height: 705px;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	z-index: -1;
	position: absolute;
}
.linebox {
    border: 1px solid #ccc;
    border-radius: 1em;
    padding: 2em 3em;
    position: relative;
}
.linebox .flex {
    display: flex;
    align-items: baseline;
}
.linebox .flex .left {
    width: 18%;
    margin: 1em 0;
    padding: 0 0.6em;
}
.linebox .flex .right {width:80%;}
.linebox .flex .right h4{
    font-size: 2em;
    color: var(--color-point1);
    font-weight: 500;
}
.linebox .flex .right h4 span {
    color: var(--color-point4);
    font-weight: 600;
}
.linebox .flex .right p{
    font-size: var(--font-size2);
    line-height: 1.8em;
}
.linebox .flex .right p span{}

.linebox ul {
    text-align: center;
}
.linebox li {
    padding: 0.5em 0;
}
.linebox li h3 {
    font-size: var(--font-size3);
    font-weight: 500;
}
.linebox .st1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.linebox .st1 li{
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.6em;
    font-size: var(--font-size);
    padding: 2em;
    border-radius: 1em;
    margin-top: 2em;
    transition: all 0.4s ease-out;
    background-color: var(--color-gray);
    border: 1px solid #ccc;
}
.linebox .st1 li p {
    margin-top: .5em;
    word-break: keep-all;
}
.linebox .st1 li:hover {background: #fff;
    box-shadow: 0px 5px 24.3px 2.7px rgba(0, 0, 0, 0.10);
    transition: all 0.4s linear; background-repeat: no-repeat;
    background-position: 50%;
	border-color:#fff;
}
.linebox .st1 li:hover div {background-color:var(--color-main); color:#fff; transition: all 0.4s ease-out;}

.linebox .st2{}
.linebox .st2 li{
    padding: 1em;
    text-align: center;
    align-items: center;
    margin-top: 1em;
    justify-content: center;
}
.linebox .st2 li:nth-child(1), .linebox .st2 li:nth-child(2) {margin-top:0;}

.linebox .st3 {}
.linebox .st3 li {
    width: 24%;
}

.bgbox {
    background-color: var(--color-gray);
    border: 0;
    padding: 2em;
    background-image: url(/img/page/4020/bg_logo.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    border-radius: 1em;
    background-size: 17.5%;
}
.bgbox p {font-size: var(--font-size24);/* color: #fff; */text-align: center;line-height: 1.8em;font-weight: 300;}
.bgbox span {
    font-size: var(--font-size30);
    font-weight: 600;
}
.bgbox2 {
    background: var(--color-point1);
    /* padding: 2em; */
    margin-bottom: 3em;
    display: flex;
    align-items: center;
    border-radius: 0.5em;
    justify-content: center;
    border: 1px solid var(--color-main);
}
.bgbox2 .img {
    /* background-color: var(--color-white); */
    /* box-shadow: 2px 4px 9px #0963b72e; */
    margin-right: 4em;
}
.bgbox2 .txt h3{
    color: var(--color-main);
    font-size: var(--font-size30);
    line-height: 2em;
    font-family: 'Nanum Gothic';
    font-weight: 800;
}
.roundbox {
    padding: 3em;
    text-align: center;
    background-color: var(--color-bg-point4);
    border-radius: 1em;
}
.roundbox h3{
    font-size: var(--font-size4);
    font-weight: 500;
}
.roundbox h3 span {
    color: var(--color-point4);
    font-weight: 600;
}
.imgbox img{border-radius: 1em;}

.colbox{
    text-align: center;
    display: flex;
    justify-content: space-between;
}
.colbox li{width: 32%;height: 15em;padding: 2em 1em;border-radius: 1em;display: flex;flex-direction: column;align-items: center;justify-content: space-between;}

.colbox .tit {
    font-size: var(--font-size20);
    font-weight: 500;
}
.colbox li .icon{width: 84px;height: 84px;border-radius: 100%;
				background: #fff url(/img/icon/4080_1.png) no-repeat center;}
.colbox li.n1 {
    background-color: var(--color-point2);
}
.colbox li.n2 {
    background-color: var(--color-point1);
}
.colbox li.n3 {
    background-color: var(--color-point3);
}
.colbox li.n2 .icon {background-image: url(/img/icon/4080_2.png);}
.colbox li.n3 .icon {background-image: url(/img/icon/4080_3.png);}
.colbox p {
    /* margin-top: 1em; */
    font-size: var(--font-size);
    word-break: keep-all;
}

@media screen and (max-width: 1000px) {
	.linebox .flex {
    display: flex;
    flex-direction: column;
}
	.linebox .flex .left {
    width: 100%;
    padding: 0;
}
	.linebox .flex .right h4 {
    font-size: 1.4em;
}
	.linebox .flex .right{
    width: 100%;
}
	.linebox {
    padding: 1em;
    border-radius: 1em;
}
	.linebox .st1 {display: flex;flex-direction: column;}
	.linebox .st1 li{
    width: 100%;
    padding: 1em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
	.linebox .st1 li p {
    width: 80%;
}
	.linebox .st2 li:nth-child(1), .linebox .st2 li:nth-child(2){
    margin-top: 1em;
}
	.bgbox {padding: 2em 1em;background-size: 55%;}
	.bgbox p {
    letter-spacing: -1px;
}
	.bgbox span {
    font-size: 1.2em;
}
	.bgbox .img{
    margin: 1em 0;
}
	.bgbox .img img{
    width: 100%;
}
	.bgbox .txt {
    margin: 0 1em;
}
	.bgbox2 {
    display: flex;
    text-align: center;
    flex-direction: column;
}
	.bgbox2 .img {margin-right:0;border-bottom: 1px dashed #a7d0ff61;width: 100%;}
	.bgbox2 .txt {
    padding: 1em;
}
	.roundbox {
    padding: 2em;
    word-break: keep-all;
}
	.bg_img {
    background-size: cover;
    margin-top: -100%;
    height: 90%;
}
	.imgbox img {
    width: 100%;
}
	.colbox {display: flex;flex-direction: column;}
	.colbox li {
    margin-bottom: 0.5em;
    width: 100%;
}
	.colbox li span {
    font-size: 1.2em;}
	.colbox p {
    margin-top: 1em;
}
}

/** 리스트 **/
.dot_s1 {
    list-style: marker; list-style-type: disc; 
}
.dot_s1 li {line-height: 2em;/* list-style-position: inside; */font-size: var(--font-size2);margin-left: 1em;}
.dot_s1 li::marker {font-size:0.7em;color: var(--color-point4);}

.dl_s1 {
    width: 100%;
}
.dl_s1 dl {display: flex;align-items: baseline;margin-bottom: 1em;margin-left: 3em;}
.dl_s1 dl:last-child {margin-bottom:0;}
.dl_s1 dt {
    width: 13.2%;
    color: #333;
    font-size: var(--font-size20);
    position: relative;
    font-weight: 500;
    text-align: justify;
}
.dl_s1 dt:before{content:'';background:url('/img/icon/empathize-fill.svg');width: 20px;height: 20px;left: 0;top: 12%;margin-left: -30%;position: absolute;}
.dl_s1 dt:after{content:''; width:100%;display: inline-block;}
.dl_s1 dd {
    font-size: var(--font-size2);
    position:
    relative;
    width: 75%;
    margin-left: 3em;
}
.dl_s1 dd:before{content:'';position: absolute; border-left:1px solid #ccc; height:50%;top: 30%;left: -6%;}

.dl_s2 dl{
    padding: 0.6em 0;
}
.dl_s2 dt{font-weight: 600;color: var(--color-point4);font-size: var(--font-size2);}
.dl_s2 dd{}

.dl_s3 {}
.dl_s3 dl {
    display: flex;
    line-height: 3em;
    width: 100%;
    align-items: center;
    border-bottom: 1px dashed #ccc;
}
.dl_s3 dl.noline {border-bottom:none;}
.dl_s3 dt {width: 17%;color: var(--color-point1);font-size: var(--font-size20);font-weight: 500;}
.dl_s3 dd {
    font-size: var(--font-size2);
}
.ul_s1 {}
.ul_s1 li {
    font-size: var(--font-size2);
    position: relative;
    line-height: 1.8em;
    padding-left: 1.2em;
}
.ul_s1 li:before{content:'';width: 10px;height: 3px;background-color: var(--color-point1);border-radius: 1em;left: 0;top: 47%;position: absolute;}


.sizing dt {width:10%;}
.sizing dd {}
.wd40 {
    width: 42%;
}
.wd50 {width: 50%;}
.wd50 .link_apply ul {
    display: flex;
    justify-content: flex-start;
}
.wd50 .link_apply li {width: 48%;font-size: 1em;padding: 0;margin-right: 1em;line-height: 2em;font-weight: 500;}

.info_list{
    display: flex;
	margin-bottom:1em;
}
.info_ti{
    width: 26%;
    border-radius: 1em 0 0 1em;
    display: flex;
    align-items: center;
    color: var(--color-white);
    padding: 1em 3em;
}
.info_ti h4 {margin-left:1em;font-size: var(--font-size3);font-weight: 500;}
.info_tx{
    width: 75%;
    border: 1px solid #ccc;
    border-left: 0;
    border-radius: 0 1em 1em 0;
    display: flex;
    align-items: center;
}
.info_tx ul{
    padding: 1em 3em;
    line-height: 1.8em;
}
.info_tx ul li {
    font-size: var(--font-size2);
}
.icon_list {
    display: flex;
    flex-direction: column;
}
.icon_list div {
    width: 100%;
    border-radius: 1em 1em 0 0;
    text-align: center;
    justify-content: center;
}
.icon_list div.img {
    background-color: var(--color-point1);
    border-radius: 100%;
    /* box-shadow: 2px 4px 9px #0963b72e; */
    margin: 0;
    width: 130px;
    height: 130px;
    position: relative;
    }
.icon_list .info_tx {
    border-radius: 0 0 1em 1em;
    border: 1px solid #ccc;
    background-color: var(--color-bg-point1);
}
.icon_list ul{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 1em 0 2em;
}
.icon_list li {display: flex;flex-direction: column;align-items: center;width: 17%;}
.icon_list li img {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}
.icon_list li p{margin-top:1em;text-align: center;font-weight: 400;}
.icon_list .st2 {
    padding: 0;
}
.icon_list .st2 li{
    border: 1px solid #ccc;
    border-radius: 1em;
    padding: 1em;
    width: 19%;
	position:relative;
}
.icon_list .st2 li:after {content:"";position:absolute;display:block;background-color: #fff;background-image: url(/img/common/arrow-right.svg);background-repeat: no-repeat;background-position: 50%;width: 42px;height: 42px;border-radius: 50%;right: -13%;top: 40%;z-index: 1;box-shadow: 0px 5px 25px 3px rgb(0 0 0 / 10%);}
.icon_list .st2 li:last-child:after {display:none;}
.icon_list .st2 li .img {
    border-radius: 1em;
    width: 98%;
    background-color: var(--color-gray);
    padding: 1em 0;
}
.icon_list .st2 li .img img {
    width: 45%;
}
.icon_list .st2-1 {
}
.icon_list .st2-1 li {
    width: 13%;
    border: 0;
    padding: 0;
}
.icon_list .st2-1 li:after {
    right: -19%;
    top: 26%;
}
.ground {}
.ground ul {
    display: flex;
    justify-content: space-around;
}
.ground li{
    padding: 1em 1.4em;
    font-size: 1.2em;
    border: 1px solid #ccc;
    border-radius: 1em;
    color: var(--color-point1);
	background-color: var(--color-bg-point1);
}
.ground li:hover {/*background-color: var(--color-point1); border-color: var(--color-point1); color:#fff;*/}
.ground.icon {}
.ground.icon ul{}
.ground.icon ul li{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ground.icon ul li i{
    font-size: 2em;
    margin-bottom: .3em;
}

@media screen and (max-width: 1000px) {
	.info_list{
    display: flex;
    flex-direction: column;
    width: 100%;
}
	.info_ti{
    width: 100%;
    border-radius: 1em 1em 0 0;
    display: flex;
    padding: 1em;
    justify-content: center;
}
	.info_ti img{
    width: 11%;
}
	.info_ti h4 {margin-left: 0.5em;}
	.info_tx{
    width: 100%;
    border-radius: 0 0 1em 1em;
    border-left: 1px solid #ccc;
    border-top: 0;
}
	.info_tx ul{
    padding: 1em;
    word-break: keep-all;
    text-align: center;
    width: 100%;
}
	.icon_list ul{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}
	.icon_list ul li {
    width: 50%;
    margin: 1.5em 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
}
	.icon_list li p {
    margin-top: .5em;
}
	.icon_list div.img {width: 90px;height: 90px;}
	.icon_list ul li img {
    width: 60%;
}
	.icon_list .st2 {
    display: flex;
    justify-content: flex-start;
}
	.icon_list .st2 li {
    width: 47%;
    margin-right: 0.6em;
}
	.icon_list .st2 li:after {
    width: 30px;
    height: 30px;
    background-size: 50%;
}
	.icon_list .st2-1 li:after {
    right: -13%;
}
	.icon_list .st2-1 li .img {}
	.icon_list .st2-1 li .img img{
    width: 40%;
}
	.dot_s1 li {
    line-height: 1.6em;
    margin-bottom: 0.5em;
}
	.dl_s3 {}
	.dl_s3 dl {
    display: flex;
    flex-direction: column;
    line-height: 3em;
    padding-bottom: 1em;
}
	.dl_s3 dt {
    width: 100%;
}
	.dl_s3 dd {
    line-height: 1.6em;
}
	.ul_s1 li:before {
    top: 0;
    margin-top: 4%;
}
	.sizing dd {width:100%;}
	.wd50 .link_apply ul {
    display: flex;
}
	.wd50 .link_apply li {
    width: 100%;
}
	.ground ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
	.ground li {
    padding: 0.8em;
    font-size: 1em;
    border: 0;
    margin: 0.5em 0.5em 0 0;
}
}

/********* 미션 및 비전  *********/

.vision {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
    align-items: center;
}
.vision ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.vision li {
    background-color: rgb(240 246 204 / 60%);
    border: 4px solid rgb(0 0 0 / 0%);
    width: 210px;
    height: 210px;
    text-align: center;
    border-radius: 100%;
    font-size: var(--font-size24);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.vision li:nth-child(2){background-color: rgb(210 235 250 / 60%);}
.vision li:nth-child(3){background-color: rgb(253 235 214 / 60%);}
.vision li:nth-child(4){background-color: var(--color-point3);}
.vision li:after{/*content:"";background-image: url(/img/common/dot.png); position:absolute;width: 82px; height:5px;top: 60%;left: 100%;margin-left: 7%;transform: rotate( 26deg );*/}
.vision li:nth-child(2)::after{transform: rotate( -26deg );top: 40%;}
.vision li:last-child::after {display:none;}

.vision p {
    font-size: var(--font-size20);
}

.values ul {
    display: flex;
    justify-content: space-between;
}
.values li {
    width: 25%;
    text-align: center;
    padding: 2em;
    background: #fff;
    border: 4px solid var(--color-point4);
    border-radius: 1em;
    font-size: 1.5em;
    color: var(--color-point4);
    font-weight: 500;
    position: relative;
    transition: all .4s;
}
.values li:hover {background-color:var(--color-point4); color:#fff; border: 4px solid #fff;}
.values li:after {content:"";width: 15px;height: 15px;top: 46%; left:100%; border-radius:100%;position: absolute;background: #fff;margin-left: 23%;}
.values li:last-child::after{display:none;}

.injae {
    margin-top: 2em;
}
.injae ul {
    display: flex;
    flex-direction: column;
}
.injae li {
    display: flex;
    padding: 1em;
    align-items: center;
}
.injae .tit {
    width: 20%;
    background-color: var(--color-point4);
    color: #fff;
    padding: 1em 3em;
    border-radius: 1em 1em 0 0;
    font-size: var(--font-size2);
}
.injae .tit span {
    font-size: var(--font-size4);
    font-weight: 700;
    padding-right: 0.2em;
}
.injae .exp {
    padding-left: 4em;
    border-bottom: 1px solid #ccc;
    padding: 1.65em 6em;
    width: 80%;
}
.injae .exp p {
    font-size: var(--font-size2);
}
.injae_inner {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
}
.injae_inner .cont {
    text-align: center;
}
.injae_inner .iconbox {
    width: 200px;
    height: 200px;
    background-color: #f1f1f1;
    border-radius: 2em;
    margin: 0 auto;
    transition: all 0.4s linear;
    position: relative;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 36%;
}
.injae_inner .iconbox:hover {background: #fff;
    box-shadow: 0px 5px 24.3px 2.7px rgba(0, 0, 0, 0.10);
    transition: all 0.5s linear; background-repeat: no-repeat;
    background-position: 50%; background-size: 36%;
}

.injae_inner .cont p {
    padding-top: 1em;
}

@media screen and (max-width: 1000px) {
	.vision {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
	.vision p {}
	.vision ul {
	display: flex;
	margin-right: 1em;
	flex-direction: row;
	flex-wrap: wrap;
	}
	.vision li {
	width: 48%;
	height: 8.58em;
	background-size: 25%;
	background-position-y: 2em;
	font-size: 1.2em;
	padding-top: 4em;
	display: flex;
	margin-bottom: 1em;
	justify-content: space-around;
	}
	.vision li:after {
    display: none;
} 
	.vision li:nth-child(2){
    background-position-y: 2em;
    background-size: 20%;
}
	.vision li:nth-child(3){}
	.vision li:nth-child(4){}
	.vision li:nth-child(2n) {
    margin-top: 0;
}

	.values ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}
	.values li {
    width: 90%;
    height: auto;
    padding: 0.5em;
    margin-bottom: 1.5em;
    border-radius: 3em;
}
	.values li:after {
    top: 100%;
    left: 48%;
    margin-left: 0;
    margin-top: 5%;
    width: 12px;
    height: 12px;
}

	.injae {}
	.injae ul {
}
	.injae li {
    display: flex;
    flex-direction: column;
}
	.injae .tit {
    width: 100%;
}
	.injae .tit span {}
	.injae .exp {
    width: 100%;
    padding: 1em 0;
}
	.injae .exp p {
}
	.injae_inner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
	.injae_inner .cont {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 1em;
}
	.injae_inner .iconbox {
    width: 33%;
    height: 7em;
    background-size: 50%;
    margin: 0 1em 1em 0;
    border-radius: 1em;
    background-color: #fff;
    box-shadow: 0px 5px 24.3px 2.7px rgba(0, 0, 0, 0.10);
}
	.injae_inner .cont p {
    text-align: left;
    padding-top: 0;
    width: 57%;
}
}

/********* 인사말  *********/

.greeting {
    background-color: #fff;
    margin-top: -4em;
    border-radius: 1em;
    padding: 3em;
    box-shadow: 0px 5px 24.3px 2.7px rgba(0, 0, 0, 0.10);
    position: relative;
    display: table;
    z-index: 1;
}
.greeting_tit{
    display: flex;
    margin-bottom: 1em;
    background-color: #000;
    width: 74%;
    margin: 0 auto;
    margin-top: -25em;
    justify-content: flex-end;
    border-radius: 1em;
    align-items: center;
    position: relative;
    z-index: 1;
}
.greeting_txt {
    width: 100%;
    position: relative;
    height: auto;
    margin-top: 2em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.greeting_tit .tit {
    width: 100%;
    z-index: 1;
    color: #fff;
    padding-left: 6em;
    position: absolute;
}
.greeting_tit .tit h3 {
    font-size: var(--font-size30);
    color: #fff;
    line-height: 1.6em;
    position: relative;
    margin: 1em 0;
    }
.greeting_txt .tit h3:after{content:"";position: absolute;width: 110%;border-bottom: 3px solid var(--color-main);left: 0;bottom: 0;border-radius: 1em;}
.greeting_tit img {
    float: right;
    border-radius: 0 1em 1em 0;
}
.greeting .conts {}
.greeting .conts p{
    font-size: var(--font-size);
    padding-top: 1.4em;
    line-height: 1.8em;
    word-break: keep-all;
    font-weight: 400;
}
.greeting .conts strong {color:var(--color-main); font-size:var(--font-size22);}

.greeting .sign {float:right;padding-top:2em;font-weight: 100;position: relative;z-index: 1;font-size: var(--font-size20);}
.greeting .sign:before{width: calc(100% + 10px);height: 13px;border-radius: 20px;background: #cee9ff;position: absolute;left: -7px;bottom: -6px;z-index: -1;content: '';}
.greeting .sign strong {
    font-weight: 800;
    color: unset;
}
@media screen and (max-width: 1000px) {
	.greeting {
    margin-top: 2em;
    padding: 0;
    box-shadow: unset;
}
	
	.greeting_img {
    opacity: 0.5;
    margin-bottom: 17em;
    background-position-x: 12em;
}
	.greeting_tit {display: flex;flex-direction: column;align-items: flex-start;width: 92%;}
	.greeting_tit .tit {
    padding: 1em;
}
	.greeting_txt {
    width: 100%;
    margin-top: 0;
}
	.greeting_tit img {
    width: 100%;
}
	.greeting_tit .tit h3{
    font-size: 1em;
}
	.greeting_txt .tit h3:after {width:100%;}
	.greeting_txt .tit2 {}
	.greeting_txt .conts img{float:right;}
	.greeting_txt .conts p {}
}

.tab_inner2 {display:none;}



/********* 시설안내  *********/
.floor_1, .floor_2, .floor_3 {
    padding-top: 4em;
    }
.floor_1 .sub_tit,  .floor_2 .sub_tit, .floor_3 .sub_tit {margin-top:0;}
.facility {display: flex;align-items: flex-start;justify-content: space-around;}
.facility dl{
    text-align: center;
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 25%;
    cursor: pointer;
}
.facility dl:after{content:"";position:absolute;display:block;border-right: 1px dashed #ccc;height: 300px;right: 0;/* margin-right: -50%; */}
.facility dl:last-child::after{display:none;}
.facility dt{
    background-color: var(--color-main);
    border-radius: 100%;
    color: #fff;
    width: 74px;
    height: 74px;
    margin-bottom: 1em;
    font-size: var(--font-size20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-family: 'Nanum Gothic';
}
.facility dd{
    line-height: 2em;
}
.photo ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.photo li {
    background: #fff;
    box-shadow: 0px 5px 25px 3px rgb(0 0 0 / 10%);
    margin-bottom: 3em;
    border-radius: 1em;
}
.photo li:nth-child(4), .photo li:nth-child(5), .photo li:nth-child(6), .photo li:last-child {margin-bottom:0;}
.photo li img {border-radius:1em 1em 0 0; width:360px;height: 219px;}
.photo li .name {
    padding: 1em;
    text-align: center;
}

@media screen and (max-width: 1000px) {
	.floor_1, .floor_2, .floor_3 {padding-top: 4em;}
	.floor_1 .sub_tit,  .floor_2 .sub_tit, .floor_3 .sub_tit {margin-bottom:1em;}
	.facility {
    display: flex;
    flex-wrap: wrap;
}
	.facility p {padding-left:0; padding-top:1em;}
	.facility dl {
    width: 50%;
}
	.facility dl:after {height: 240px;}
	.facility dl:nth-child(2)::after {display:none;}
	.facility dt{
    width: 95%;
    border-radius: .5em;
    height: 2.5em;
}
	.dl_s1 {
    margin-top: 1em;
}
	.dl_s1 dl {width: 100%;margin-bottom: 0.5em;word-break: keep-all;margin-left: 1em;align-items: flex-start;}
	.dl_s1 dt {
    font-size: 1em;
    margin-left: 1em;
    width: 17%;
    height: 2em;
}
	.dl_s1 dt:before {
    margin-left: -45%;
    width: 16px;
    height: 16px;
    top: 8%;
}
	.dl_s1 dd {
    width: 61%;
    margin-left: 2em;
}
	.dl_s1 dd:before{
    height: 1em;
    top: 18%;
}
	.photo ul {}
	.photo ul li {
    width: 48%;
    border-radius: .5em;
    margin-bottom: 1em;
}
	.photo li img {width: 100%;height: auto;border-radius: .5em .5em 0 0;}
	.photo li .name {
    padding: .5em;
}
}





/** 윤리강령 **/

.eth span {color: var(--color-main);font-weight: 600;padding-right: 2em;}
.eth ul {
    height: auto;
}
.eth li {
    line-height: 3em;
    font-size: var(--font-size20);
    display: flex;
}
.eth_ti {}
.eth_ti p{
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.8em;
    word-break: keep-all;
}
.eth_ti > span {color:var(--color-point4);font-weight: 600;font-size: var(--font-size3);}
.eth_txt {font-size: var(--font-size2);}
.eth_txt p{
    text-align: center;
    margin: 1em 0;
    padding-top: 1em;
    border-top: 1px dashed #ccc;
    font-weight: 500;
}
.eth_txt dl{
}
.eth_txt dd{
    font-weight: 300;
    line-height: 1.6em;
    padding: 0.2em 0;
}
.eth_txt dt{
    font-weight: 500;
    padding: 1.5em 0 0.6em;
}
.eth_layer {
    padding: 2em;
    border: 1px solid #ccc;
    margin-top: 3em;
    border-radius: 1em;
    width: 100%;
}
.eth_layer p {
    font-size: 1.2em;
    text-align: center;
    margin: 2em 0;
    /* color: var(--color-main); */
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eth_layer p i {font-size: 43px;margin-right: .2em;color: var(--color-main);}
/*.eth_layer p:after {content:"";width: 72%;height: 2px; position:absolute; left:0;bottom: 0;margin-left: 17%;background-color: var(--color-main);}*/
.eth_layer .sub_tit_center {
    margin: 0 0 2em;
}
.eth_box {
    display: flex;
    justify-content: center;
    height: auto;
    padding: 3em 0;
    border-radius: 1em;
    background-image: url(/img/page/4030/bg_logo_light.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}
.eth_layer .ci{
    margin: 0 auto;
    padding: 1em 2em;
    text-align: center;
    background-color: #fff;
    }
.ci_box li{display: flex;align-items: center;padding: 0 1em;margin: 2em 0;border-radius: 1em;}
.ci_box li p{font-size: var(--font-size);line-height: 1.6em;flex: unset;text-align: left;font-weight: 400;width: 95%;justify-content: unset;letter-spacing: -.2px;}
}
.ci_box ul li span {
    border: 1px solid var(--color-main);
    border-radius: 100%;
    width: 40px;
    height: 40px;
    padding: 0 1em;
    margin-right: 2em;
    text-align: center;
}
.logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 1000px) {
	.eth span {
    padding-right: 1em;
}
	.eth ul {}
	.eth li {
    line-height: 1.6em;
    margin-bottom: 0.6em;
    display: flex;
    flex-direction: column;
    padding: 0;
}
	.eth li:last-child{margin-bottom:0;}
	div.eth_ti {
    font-size: 1em;
    margin-bottom: 2em;
}
	.eth_ti p{}
	.eth_ti > span {
    letter-spacing: -.5px;
    word-break: keep-all;
}
	.eth_txt {}
	.eth_txt p{}
	.eth_txt dl{}
	.eth_txt dd{}
	.eth_txt dt{}
	.eth_layer {
    padding: 1em;
    margin-top: 0;
}
	.eth_layer p {
    font-size: 1.1em;
    text-align: left;
    word-break: keep-all;
}
	.eth_layer .sub_tit_center {}
	.eth_box {padding: 2em 1em;}
	.ci_box {
}
	.eth_layer .ci {
    padding: 2em 0;
}
	.eth_layer .ci img {
    width: 40%;
}
	.ci_box li {
    padding: 1.2em 0.5em;
}
	.ci_box li p {
    width: 100%;
    text-align: center;
    margin: 1em 1em 0;
}
	.logo {
    display: flex;
    flex-direction: column;
}
	.logo img {width: 70%;margin-bottom: 1em;}
}

/** 이용절차(step) **/
.wrap {
    border: 1px solid #ccc;
    border-radius: 1em;
    margin-top: 3em;
}
.step_s1 {
    display: flex;
    justify-content: center;
}
.step_s1 li {
    width: 20%;
    text-align: center;
    position:
    relative;
    margin: 2.5em 0 2em;
    border-right: 1px dashed #ccc;
}
.step_s1 li.line_none {/* border-right:0; */}
.step_s1 li:last-child{border:0;}
.step_s1 li p {
    padding-top: 1em;
    font-size: var(--font-size20);
    font-weight: 500;
}

.step_s1 li:before {content:"STEP"; position:absolute; background-color:var(--color-point1); padding:0.5em 2em; color:var(--color-white); border-radius:3em;top: -46%; left:0; margin-left:25%;}
.step_sub li{
    margin-top: 3.2em;
}
.type1 li {width: 25%;}
.type1 li:before {
    margin-left: 28%;
}
@media screen and (max-width: 1000px) {
	.step_s1{
    display: flex;
    flex-wrap: wrap;
}
	.step_s1 li {
    width: 50%;
    margin-bottom: 3em;
    border-right: 0;
}
	.step_s1 li:before {
    padding: 0.5em 1em;
}
	.type1 li:before {
    margin-left: 20%;
}
}

/** 링크버튼 */
.link_apply {}
.link_apply ul {
    display: flex;
    justify-content: center;
}
.link_apply li {
    cursor: pointer;
    background-color: var(--color-main);
    font-size: var(--font-size20);
    width: 46%;
    text-align: center;
    padding: 1em;
    border-radius: 1em;
    font-weight: 600;
    margin-right: 3em;
    color: var(--color-white);
}
.link_apply li a {color: var(--color-white);}
.link_apply li i {padding-left:1em;}
.link_apply li:last-child {margin-right:0;}
.link_apply li:hover {background-color: var(--color-point1);}
.down_btn {
    display: flex;
    justify-content: flex-end;
}
.down_btn div {
    padding: .8em 1em;
    background-color: var(--color-point1);
    margin-right: 1em;
    border-radius: .5em;
    cursor: pointer;
    /* border: 1px solid var(--color-main); */
    transition: all 0.4s ease-out;
}
.down_btn div a {color:var(--color-main); font-weight:500;}
.down_btn div:last-child {margin-right:0;}
.down_btn div i, .btn_st2 i {
    padding: .5em;
    background-color: var(--color-main);
    border-radius: 100%;
    margin-left: 1em;
    color: #fff;
}
.down_btn div:hover {background-color:var(--color-main); }
.down_btn div:hover a {color:#fff;}
.down_btn div:hover i {background-color:#fff; color:var(--color-main);}
.btn_st1 {display: flex;justify-content: center;}
.btn_st1 div {background-color:#f5f5f5;border: 1px solid var(--color-main);}
.btn_st2 {
    padding: .8em 1em;
    background-color:#f5f5f5;
    border: 1px solid var(--color-main);
    border-radius: .5em;
}
.btn_st2 a {color:var(--color-main);}
.btn_st2:hover {background-color:var(--color-main); }
.btn_st2:hover a {color:#fff;}
.btn_st2:hover i {background-color:#fff; color:var(--color-main);}
@media screen and (max-width: 1000px) {
	.link_apply ul{
    display: flex;
    flex-direction: column;
}
	.link_apply li{
    width: 100%;
    background-color: var(--color-point1);
}
	.link_apply li:last-child {
    margin-top: 0.5em;
}
	.down_btn {display: flex;justify-content: space-between;}
	.down_btn div {
    margin-right: 0;
    width: 48%;
    text-align: center;
    padding: 0.5em;
}
	.down_btn div i, .btn_st2 i {background: none;color: var(--color-main);margin-left: 0;}
	.btn_st1 div{
    width: 100%;
}
	.btn_st2 {
    padding: 0.6em 1em;
}
}

/* 사업안내 */
.all_business {}
.all_business > ul {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
}
.all_business > ul > li {width: 48%; margin-right: 2.5em;}
.all_business > ul > li:nth-child(2n), .business li:last-child{margin-right:0;} 
.all_business .business ul{
    height: 20em;
    border: 1px solid #ccc;
    border-radius: 1em;
    margin-bottom: 3em;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    -webkit-transition: .5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.all_business .business li{
    font-size: var(--font-size2);
    margin-top: 0.5em;
    -webkit-transition: .5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.all_business .business li.tit{
    font-size: var(--font-size3);
    margin-top: 1em;
    color: var(--color-point2);
    font-weight: 500;
}
.all_business .business ul li.hover{opacity: 0;width: 100px;margin: 0 auto;}
.all_business .business ul:hover {background-color:var(--color-point2);}
.all_business .business ul:hover li:first-child{opacity: 0;margin-top: -10em;}
.all_business .business ul:hover li {color: var(--color-white);}
.all_business .business ul:hover li.hover {
										   display:
										   block;
										   background: #fff;
										   color: var(--color-point2);
										   font-weight: 500;
										   padding: 0.5em;
										   border-radius: 1em;
										   width: 30%;
										   margin: 0 auto; margin-top:1em;
										   opacity: 1;
										   -webkit-transition: .5s ease-in-out;
										   transition: 0.5s ease-in-out;
										  }
.biz_wr {
    padding: 2em;
    border: 1px solid #ccc;
    border-radius: 1em;
}
.biz {margin-top:2em;}
.biz li {margin-bottom:2em;border-bottom: 1px dashed #ccc;padding: 0 0 2em;}		
.biz .use {
    display: flex;
}
.biz .use .biz_tit {
    width: 22%;
    font-size: var(--font-size);
}
.guide_use {margin-top: 1em;}
.guide_use li {
    padding: 0 0 1em;
    margin-bottom: 1em;
}
.guide_use li:last-child {border-bottom:0;margin-bottom: 0;}
.biz_tit{
    /* color: var(--color-main); */
    font-size: var(--font-size24);
    position: relative;
}
.biz_tit span {
    width: 30px;
    height: 30px;
    background-color: var(--color-main);
    padding: .5em;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    line-height: .5;
    margin-right: .5em;
    font-size: var(--font-size20);
}
.biz_tit:after{display:none;content:"";position:absolute;width: 6px;height: 6px;background-color: var(--color-main);top: 0;/* right: 0; */margin-left: 5px;border-radius: 100%;}
.biz_info {margin-top: 1em;}
.biz_info h4{
    font-size: var(--font-size20);
    font-weight: 500;
    padding-bottom: 0.3em;
}
.biz_info p {word-break: keep-all;}
.biz_info .tit {
    font-size: var(--font-size20);
    margin-bottom: 1em;
    font-weight: 500;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 0.5em;
}
.biz_info dl {
    display: flex;
    flex-direction: row;
    line-height: 2.3em;
    align-items: baseline;
    margin-top: 1.5em;
} 
.biz_info dt{
    width: auto;
    text-align: left;
    background-color: var(--color-gray);
    margin-right: 1em;
    border-radius: 3em;
    margin-bottom: 0.5em;
    font-size: var(--font-size);
    font-weight: 500;
    background-repeat: no-repeat;
    display: inline-block;
    background-position-y: center;
    background-position-x: 1.2em;
    padding: 0 1.2em 1em 3em;
    height: 2.3em;
    color: var(--color-main);
} 
.biz_info dt:nth-of-type(1){background-image: url(/img/icon/biz_icon1.png);}
.biz_info dt:nth-of-type(2){background-image: url(/img/icon/biz_icon2.png);}
.biz_info dt:nth-of-type(3){background-image: url(/img/icon/biz_icon3.png);}
.biz_info dt:nth-of-type(4){background-image: url(/img/icon/biz_icon4.png);}

.biz_info dd{
    width: 20%;
    line-height: 1.5em;
    margin-bottom: 0.5em;
} 
.biz_info dd ul li {padding: 0;text-align: left;}
.use_info {
    padding-left: 3em;
}
.use_info p {
    /* font-weight: 400; */
}

/* 후원 */
.online {
    margin-top: 2em;
}
.online > ul{display: flex;justify-content: space-between;}
.online > ul > li{width:48%;}
.linebox li.link {
    background-color: var(--color-point1); width:50%;
    margin: 0 auto;
    border-radius: 3em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.linebox li.link:hover {background-color: var(--happybin-color);}
.linebox li.link2:hover {background-color: var(--together-color);}

.linebox li a{
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size20);
}

@media screen and (max-width: 1000px) {
	.all_business > ul{
    display: flex;
    flex-direction: column;
}
	.all_business > ul > li {width: 48%;}
	.all_business .business ul{
    padding: 1em;
    word-break: keep-all;
    height: auto;
    margin-bottom: 1em;
}
	.all_business .business li{
    width: 100%;
    height: 30%;
}
	.all_business .business li img{
    width: 32%;
}
	.all_business .business ul li.hover {
    opacity: 1;
    background: var(--color-bg-point2);
    padding: 0.5em;
    width: 40%;
    border-radius: 3em;
    margin: 1em auto;
    font-weight: 500;
    color: var(--color-point2);
}
	.biz {margin-top:0;}
	.biz_tit {word-break: keep-all;}
	.biz_info{
    margin-top: 1em;
}
	.biz_info dl{
    display: flex;
    flex-wrap: wrap;
}
	.biz_info dt{
    width: 30%;
    background-position-x: 22%;
    padding-left: 2.8em;
    /* text-align: center; */
    margin-right: 0;
}
	.biz_info dd{
    width: 70%;
    line-height: 1.6em;
    margin-bottom: 1em;
    /* text-align: center; */
    word-break: keep-all;
    padding: 0 1em;
}
	.biz_wr {
    padding: 1em;
}
	.biz .use {
    display: flex;
    flex-direction: column;
}
	.biz .use .biz_tit {
    width: 100%;
}
	.use_info {
    padding-left: 0;
}
	.online > ul{display: flex;flex-direction: column;}
	.online > ul > li{width:100%;}
	.linebox li.link{background-color: var(--happybin-color);width: 86%;}
	.linebox li.link2{
    background-color: var(--together-color);
}
	.kakao_map {width:100%;}
}

/** br 옵션 **/
br.mo {display: none;}
br.pc {}

@media screen and (max-width: 1000px) {
br.mo {display: unset;}
br.pc {display: none;}
	.ground.icon {}
.ground.icon ul{}
.ground.icon ul li{}
.ground.icon ul li i{}
}

/* 그림자 옵션 */
.shadow_in {
    box-shadow: inset 0px 10px 10px 0 rgb(121 121 121 / 10%);
    background-color: #f5f5f5;}

/* 카카오맵 */

.kakaomap .root_daum_roughmap .wrap_controllers {display:none;}


/* 후원 자원봉사 */
.sec {
    height: 21em;
}
.sec .bg{background-image: url(/img/page/3010/bg.jpg);width: 934px;height: 317px;position: relative;border-radius: 1em;}
.sec .jawon{background-image: url(/img/page/3030/bg.jpg);}
.sec .txt {width:772px;height:280px;background-color:#fff;float: right;position: relative;display: table;z-index: 1;margin-top: -12em;border-radius: 1em;padding: 3em 2em;box-shadow: 0px 5px 25px 3px rgb(0 0 0 / 10%);display: flex;justify-content: space-evenly;flex-direction: column;}
.sec .txt .ti {
    font-size: var(--font-size24);
    font-weight: 600;
    line-height: 1.6em;
    letter-spacing: -1px;
}
.sec .txt .tx {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5em;
    align-items: center;
    border-top: 1px dashed #ccc;
    padding-top: 1em;
}
.sec .txt .tx .inq {
    font-size: var(--font-size20);
}
.sec .txt .tx div span{
    color: var(--color-main);
    font-weight: 600;
    margin-right: .5em;
    font-size: var(--font-size22);
    line-height: 2em;
}

/* 유튜브 */
.yt{
    margin: 0 auto;
    text-align: center;
    margin-top: 2em;
}
.yt_link {
    float: right;
    background-color: #f70000;
    padding: .5em 1em;
    border-radius: .3em;
}
.yt_link a{
    color: #fff;
    font-size: .95em;
    display: flex;
    align-items: flex-start;
}
.yt_link iconify-icon {font-size: 1.7em; padding-right:.3em;}

@media screen and (max-width: 1000px) {
	.sec {display: table;height: auto;}
	.sec .bg {
    width: 100%;
    background-size: cover;
}
	.sec .txt {
    width: 100%;
    margin-top: -3em;
    padding: 2em 1em;
    height: auto;
}
	.sec .txt .ti {
}
	.sec .txt .tx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
	.sec .txt .tx .inq {font-size:1em;}
	.sec .txt .tx div span {
    font-size: 1.1em;
}
	.yt_link {margin-top: 1em;}
}

/* sub-sec-1 */
.sub-sec-1{
    display: flex;
    width: 100%;
}

.sub-sec-1 img{
    width: 50%;
    height: 100%;
}

.sub-txt{
    width: 50%;
    font-size: 17px;
    padding-left: 2em;
}

.sub-sec-1 .sub-txt-box.txt_box1,
.sub-sec-1 .sub-txt-box.txt_box2,
.sub-sec-1 .sub-txt-box.txt_box3{
    padding-bottom: 2em;
}

.sub-txt p{
    line-height: 2em;
}

/* map */
.map_wrap {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-start;
    padding-top: 7em;
    flex-wrap: wrap;
}

.map_wrap .kakao_map{
    width: 70%;
}
.map_wrap .adr {width:30%}

.map_wrap .adr h4{
    width: 100%;
    color: black;
    font-size: var(--font-size24);
    font-weight: 600;
}

.map_wrap .adr ul{
    width: 100%;
    margin: 1em 0 3em 0;
}

.map_wrap .adr ul li{
    line-height: 2em;
}

.map_wrap .adr ul li p{}

.map_wrap .adr ul li p span {font-weight: 500;display: inline-flex;width: 22%;justify-content: flex-start;}

.map_wrap .adr a{
    padding: 1em 3em;
    border: 1px solid black;
}

.map_wrap .rocation {margin-top:3em;border-top:2px solid #000;/* padding-top:3em; */}
.map_wrap .rocation > p {
    font-size: 1.1em;
    font-weight: 500;
    background-color: #f4f4f4;
    padding: 1em;
}
.map_wrap .rocation ul {}
.map_wrap .rocation ul li {
    display: flex;
    margin: 1em 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1em;
}
.map_wrap .rocation li h4 {
    width: 12%;
    font-size: var(--font-size22);
    color: var(--color-main);
    font-weight: 700;
}
.map_wrap .rocation li dl, .map_wrap .rocation li p {
    width: 88%;
}
.map_wrap .rocation dl dt {
    font-size: var(--font-size20);
    margin: 1em 0 .3em;
    font-weight: 500;
}
.map_wrap .rocation dl dt:first-child {margin-top:0}
.map_wrap .rocation dl dd {}

@media screen and (max-width: 1000px){
	.map_wrap .rocation {padding:0 3%}
	.map_wrap .rocation ul li {
    display: flex;
    flex-direction: column;
}
	.map_wrap .rocation li h4 {
    margin-bottom: 1em;
    width: 100%;
}
	.map_wrap {padding-top: 5em;}
	.map_wrap .adr {width:100%}
	.map_wrap .adr h4 {font-size:2em}
	.map_wrap .adr ul li p {font-size:16px; line-height:1.6}
	.map_wrap .kakao_map {width:100%}
}


.sub-sec-2{
    position: relative;
    background-image: url(/img/page/about/sub_bottom.jpg);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 506px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5em;
}

.sub-sec-2 img{
    display: block;
    width: 100%;
    height: 56vh;
}

.sub-top-txt{
    width: 50%;
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sub-sec-2 .dodocattxt{
    font-size: 2em;
    font-weight: 500;
    color: #ffffff;
}

.txt-border{
    width: 201px;
    height: 71px;
    background-color:rgb(255 255 255 / 75%);
    color: #284351;
    border-radius: 35px;
    text-align: center;
    line-height: 71px;
    margin-top: 2em;
    font-weight: 700;
}
.txt-border:hover {background-color: var(--color-main); color: #fff;}

@media screen and (max-width: 1000px) {
.sub-sec-1{
    flex-wrap: wrap;
    margin-top: 2em;
    display: flex;
    flex-direction: column-reverse;
}

.sub-sec-1 img{
    width: 100%;
    height: 100%;
}

.sub-txt{
    width: 100%;
    font-size: 1.4em;
    padding: 1.5em 0em 1em 0em;
}

.sub-txt p{
    line-height: 2em;
}

.sub-txt .txt_box_dp{
    display: inline;
    font-size: 16px;
}

.sub-sec-2{
    /* position: relative; */
	height:30vh;
    margin-top: 2em;
}

.sub-sec-2 img{
    display: block;
    width: 100%;
    height: 56vh;
}

.sub-sec-2 .dodocattxt{
    font-size: 2.5em;
    font-weight: 700;
}

.sub-sec-2 .sub-top-txt{
    width: 100%;
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.txt-border{
    width: 201px;
    height: 51px;
    background-color: var(--color-main);
    border-radius: 35px;
    text-align: center;
    line-height: 51px;
    margin-top: 1em;
    font-size: 1.5em;
    color: #fff;
}
}


/* sub_all*/
.sub_all{
    width: var(--width-sub-size);
    position: relative;
}

.room_img{
    display: flex;
}

.room_img img{
    position: relative;
    left: 0;
    /* padding-top: 2em; */
    width: 60%;
}

.bg_box{
    /* background-color: #f9f9f9; */
    width: 40%;
    /* height: 622px; */
    display: flex;
    align-items: center;
    position: relative;
    margin-top: -6em;
}

.room_img .bg_box::before{
	width: 1032px;
	height: 476px;
	content: '';
	position:absolute;
	top:0;
	left: -61%;
	background: url(/img/page/room_a/bg.jpg);
}

.room_img .info_txt{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 90%;
}

.info_txt .top_txt{
    font-size: 2em;
    font-weight: 800;
    margin-bottom: 1em;
    letter-spacing: 1px;
}
.info_txt .top_txt span {
    display: block;
}
.info_txt p{
    font-size: 17px;
    transform : rotate(0.04deg);
    word-break: keep-all;
}

@media screen and (max-width: 1000px){
.sub_all{width: 100%;}

.room_img{
    width: 100%;
    flex-direction: column;
}

.room_img img{width: 100%;}

.bg_box{
    height: auto;
    z-index: 1;
    margin: 1em 0 3em;
    width: 100%;
}

.room_img .bg_box::before{
    width: 1032px;
    height: 150px;
    content: '';
    background-color: #f9f9f9;
    position:absolute;
    top:0;
    left: 0;
    display: none;
}

.room_img .info_txt{
    display: flex;
    width: 100%;
}

.info_txt .top_txt{font-size: 2.2em;}
	.info_txt .top_txt span {
    display: unset;
    padding-left: 7px;
}

	.info_txt p{
	    font-size: 16px;
	    transform : rotate(0.04deg);
	}
}

/* room_info */
.room_info{
    display: flex;
    justify-content: space-between;
    padding: 3em 0 4em;
}

.room_info h2{
    margin: 1em 0;
    font-size: var(--font-size20);
    font-weight: 600;
}

.room_info .room_con{
    position: relative;
    width: 30%;
}
.room_info .room_con.wd20 {width:20%;}

.room_info .room_con::after{
    content: '';
    width: 1px;
    height: 132px;
    background-image: url(/img/line.png);
    position: absolute;
    top: 17%;
    left: -15%;
}

.room_info .room_con:first-child::after{
   display: none;
}

@media screen and (max-width: 1000px){
/* room_info */
.room_info{
    display: flex;
    flex-direction: column;
    font-size: 1.6em;
    padding: 0;
}

.room_info h2{
    margin: 0.5em 0;
}

.room_info .room_con{
    margin: .5em 0;
    width: 100%;
}
.room_info .room_con.wd20 {width: 100%;}	
}

/* room_table1 */
.room_table{
    width: 100%;
    margin: 1em 0;
    border: 1px solid #686868;
    text-align: center;
    font-size: 0.8em;
}

.room_table > thead > tr> th{
    border-bottom: 1px solid #686868;
    padding: 0.5em;
    font-weight: 400;
    text-align: center;
}

.room_table > tbody > tr> td{
    padding: 0.5em;
}

.room_info .room_con .room_con_txt{
    line-height: 1.8em;
    font-size: 0.9em;
    word-break: keep-all;
}


.room_table1{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.room_icon-box{
    display: flex;
    align-items: center;
    margin-bottom: 3em;
}

.room_table1 .table {
    font-size: 0.9em;
    line-height: 2em;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

.room_table1 .table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th {
    padding: 8px;
    line-height: 3em;
    vertical-align: top;
    border-top: 1px solid #ddd
}

.room_table1 .table .txt_color{
    color: #017ff5;
}

.room_table1 .room_reservation{
    display: flex;
    flex-direction: column;
}

.room_table1 .room_title{
    font-family: 'Noto Sans KR';
    font-weight: 400;
    padding: 0 2em;
}    

.room_table1 .on{
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    padding: 10px 10px;  
}

.room_table1 .table_bg,
.room_table1 .table_bg1{
    background-color: #f3f3f3;
}

.room_table1 .table_bg{
    font-weight: 500;
}

/* room_other */
.room_other{width: var(--width-sub-size);overflow-x: hidden;}
.room_other .swiper-horizontal {width:100%;margin: 1em 0;overflow: hidden;}
.room_other_txt{
    display: flex;
    align-items: center;
    position: relative;
}

.room_other .room_other_t{
    font-size: 2.2em;
    font-weight: 800;
}

.room_other .room_other_t::after{
    content: "";
    background-image: url(/img/line.2.png);
    width: 90%;
    height: 1px;
    display: flex;
    position: absolute;
    bottom: 38%;
    left: 22%;
}

.room_other_imgbox{
    display: flex;
    justify-content: space-between;
    margin-top: 4em;
    margin-bottom: 2em;
}
.room_img1 {
    position: relative;
}
.room_img1 img {
    width: 100%;
    object-fit: cover;
}
.room_img1 a{width:100%;height:100%;position: absolute;left: 0;top: 0;}
.room_other .room_dodo{
    margin-top: 1em;
    margin-bottom: 60px;
    text-align: center;
    font-size: 1em;
    font-weight: 600;
}
.room_map {background-image:url(/img/page/room_a/room_map.jpg);width: 100%;height: 595px;background-repeat: no-repeat;background-position: center;margin: 3em 0 4em;}
.room_map.left {
    background-position: left top;
    margin: 0;
    height: 650px;
}
@media screen and (max-width: 1000px) {
.room_table{
    width: 100%;
    margin: 1em 0;
    border: 1px solid #686868;
    text-align: center;
    font-size: 0.8em;
}

.room_table > thead > tr> th{
    border-bottom: 1px solid #686868;
    padding: 0.5em;
    font-weight: 400;
    text-align: center;
}

.room_table > tbody > tr> td{
    padding: 0.5em;
}

.room_info .room_con .room_con_txt{
    line-height: 1.8em;
    font-size: 1em;
}

.room_table1{
    display: flex;
    flex-direction: column;
    overflow-x: scroll;
    align-items: flex-start;
}
.room_map {background-size: 100%;height: 260px;margin: 1em 0;}
.room_map.left {
    height: 282px;
}
.room_icon-box{
    display: flex;
    align-items: center;
    margin-bottom: 2em;
    justify-content: space-between;
    width: 100%;
}

.room_table1 .room_icon-box .arrow_img{
    width: 29px;
}

.room_table1 .table {
    font-size: 0.9em;
    line-height: 2em;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

.room_table1 .table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th {
    padding: 8px;
    line-height: 3em;
    vertical-align: top;
    border-top: 1px solid #ddd
}

.room_table1 .table .txt_color{
    color: #017ff5;
}

.room_table1 .room_reservation{
    display: flex;
    flex-direction: column;
}

.room_table1 .room_title{
    font-family: 'Noto Sans KR';
    font-weight: 400;
    padding: 0 2em;
    font-size: 1.3em;
}
   
.room_table1 .on{
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    padding: 10px 10px;  
}

.room_table1 .table_bg,
.room_table1 .table_bg1{
    background-color: #f3f3f3;
}

.room_table1 .table_bg{
    font-weight: 500;
}

.room_other{
    margin-top: 4em;
    width: 100%;
}

.room_other_txt{
    display: flex;
    align-items: center;
    position: relative;
}

.room_other .room_other_t{
    font-size: 2.8em;
}

.room_other .room_other_t::after{
    display: none;
}

.room_other_imgbox{
    display: flex;
    justify-content: space-between;
    margin: 2em 0;
}

.room_other_imgbox .room_img1 img{
    width: 46vw;
    /* margin-right: 1em; */
}

.room_other .room_dodo{
    margin-top: 1em;
    margin-bottom: 1.5em;
    font-size: 1.3em;
}
} 

/* Barbecue */
.barbecue_img{
    display: flex;
}

.barbecue_img_bg{
    position: absolute;
    left: 66%;
    top: 16%;
    padding-top: 4em;
    background-image: url(/img/page/etc/etc_1.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
}

.barbecue_img .info_txt{
    margin-right: 10em;
}

.barbecue_img .bg_box{
    width: 60%;
    height: 514px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.barbecue_img .bg_box:before {content:'';width:100%;height: 100%;position: absolute;left: -25%;background: url(/img/page/room_a/bg.jpg);}
/* barbecue_img1 */

.room_img.etc_img {}

.room_img.etc_img .bg_box:before {
    /* left: -50%; */
}
.room_img.etc_img .bg_box .info_txt {
    width: 92%;
}
.room_img.etc_img img {
    width: 60%;
    height: 50%;
}

.barbecue_img1{
    display: flex;
    justify-content: space-between;
    padding: 5em 0;
}

.barbecue_con{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 46vh;
}

.barbecueimg_bg{
    width: 100%;
    background-image: url(/img/page/etc_a/etc_2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 1.8em;
}

.barbecueimg_bg1{
    width: 27%;
    background-image: url(/img/page/etc_a/etc_3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.barbecueimg_bg.etc_b {background-image: url(/img/page/etc_b/etc_2.jpg);}
.barbecueimg_bg1.etc_b {background-image: url(/img/page/etc_b/etc_3.jpg);}
.barbecueimg_bg.etc_c {background-image: url(/img/page/etc_c/etc_2.jpg);}
.barbecueimg_bg1.etc_c {background-image: url(/img/page/etc_c/etc_3.jpg);}

/* barbecue_special */
.barbecue_txt{
    display: flex;
    align-items: center;
    position: relative;
}

.barbecue_t{
    font-size: 2em;
    font-family: 'Noto Serif KR', serif;
    font-weight: 800;
}

.barbecue_txt .barbecue_t::after{
    content: "";
    background-image: url(/img/line.2.png);
    width: 1134px;
    height: 1px;
    display: flex;
    position: absolute;
    bottom: 38%;
    left: 14%;
}

.barbecue_imgbox{
    display: flex;
    justify-content: space-between;
    margin-top: 4em;
    margin-bottom: 2em;
}

.barbecue_special .barbecue_dodo{
    margin-top: 31px;
    margin-bottom: 60px;
    text-align: center;
    font-family: 'Noto Serif KR', serif;
    font-weight: 800;
}

@media screen and (max-width: 1000px){
	.barbecue_img_bg {
    position: absolute;
    left: 66%;
    top: 16%;
    padding-top: 4em;
    position: static;
    width: 100%;
    background-image: url(/img/etc_1.png);
    background-repeat: no-repeat;
    height: 100vh;
    background-size: cover;
	}
	.room_img.etc_img img {
    width: 100%;
	}
	.room_img.etc_img .bg_box .info_txt {
    width: 100%;
}
	.barbecue_img .info_txt{
    width: 100%;
    margin: 2em 0 3em 2em;
    line-height: 2.3em;
	}

	.barbecue_img .bg_box{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: static;
    background-color: transparent;
    margin-bottom: -12em;
	}

	.barbecue_img .bg_box .info_txt .top_txt{
    font-size: 3em;
	}

	.barbecue_img .bg_box .info_txt .mid_txt{
    font-size: 1.4em;
	}

	.barbecue_con{
    width: 100%;
    height: auto;
	}

	.barbecueimg_bg{
    width: 63%;
    background-size: cover;
    height: 30vh;
    margin: 0;
    background-position: center;
	}

	.barbecueimg_bg1{
    width: 35%;
    height: 30vh;
	}

	.barbecue_txt{
    display: flex;
    align-items: center;
    position: relative;
	}

	.barbecue_t{
    font-size: 2em;
    font-family: 'Noto Serif KR', serif;
    font-weight: 800;
	}

	.barbecue_txt .barbecue_t::after{
    display: none;
	}

	.barbecue_imgbox{
    display: flex;
    justify-content: space-between;
    margin-top: 4em;
    margin-bottom: 2em;
	}

	.barbecue_imgbox .barbecue_fleximg img{
    width: 207px;
    margin-right: 1em;
	}

	.barbecue_special .barbecue_dodo{
    margin-top: 1em;
    margin-bottom: 1.5em;
    font-size: 1.6em;
	}    
}

.etc_title_con {
    height: 36vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4em;
    background-image: url(/img/page/reservation/reservation.jpg);
}

.etc_title_con h3{
    font-size: 2em;
    color: #fff;
    margin-top: 2em;
    text-shadow: 1px 1px 5px #00000047;
}

