/*서브-상단비주얼 */
#svisual{ width:100%; /*background:#182E4E;*/ background-image:url(../img/sub/svisual.jpg); margin:0px auto; text-align:left; position:relative; transition:all 0.3s ease;}
#svisual .s_text{position:relative; max-width:1400px; margin:0 auto; padding:50px 0; box-sizing:border-box; color:#fff; text-align:center; width: 100%;}
#svisual .s_text h2{font-size:3.20em; font-weight:600; margin:0 0 10px}
#svisual .s_text .slogan{font-size:1.45em; font-weight:400;  position:relative; line-height:1.5em; color:#fff}
#svisual .s_text .slogan span{display:inline-block;}
#svisual .s_text span{display:block; font-size:2em;}

#container{z-index:0;}
#container .line.gray{top:-28px; height:103%;}
#container .line.gray i{border-right:1px solid rgba(0,0,0,0.03);}

@media (max-width:1500px) {
	#svisual .line .left{left:calc(50% - 45%); left:-webkit-calc(50% - 45%);}
	#svisual .line .right{right:calc(50% - 45%); right:-webkit-calc(50% - 45%);}
}
@media (max-width:1400px) {
	#svisual .line{display:none;}
}

@media (max-width:1279px) {
#svisual {min-width:100%; background-position:center top; background-size:cover; transition:all 0.3s ease;}
#svisual .s_text{padding: 30px 10px; overflow: hidden;}
#svisual .s_text h2{font-size:2.20em; font-weight:600; margin:0 0 10px;}
#svisual .s_text .slogan{font-size:1.15em; font-weight:400; position:relative; line-height:1.5em; color:#fff}
}
@media (max-width:850px) {
#svisual{ transition:all 0.3s ease;}
#svisual .s_text h3{font-size:1.45em; margin-bottom:0;}
}
@media (max-width:768px) {
#svisual .s_text h2{font-size:1.70em; font-weight:600; margin:0 0 10px}
#svisual .s_text .slogan{font-size:1.20em; font-weight:400; position:relative; line-height:1.5em; color:#fff}
}
@media (max-width:550px) {
#svisual .s_text h3{font-size:1.35em;}
}


/*내용작업 */

img.sublogo {width: 20px; margin-bottom: 10px}

/*인사말*/

.greet h2 {font-family: 'Freesentation';font-size:2.5em;line-height:1em; text-align:center;color:#3DA5FF;margin-bottom:80px; font-weight: 600}
.greet h2 span{font-family: 'Freesentation';font-size:23px;color:#222;display: inline-block;margin-bottom: 10px;:;:m;}
.greet h2 strong{font-family: 'suit';font-size: 28px;color:#222;}

.greet h3:before{content: ""; display: block; width: 30px; height: 2px; background-color:#0b4380; margin-bottom: 15px; }
.greet h3{font-size: 1.6em; margin: 10px auto 30px auto; color: #0b4380;}
.greet{ background:url(../img/sub/greet_img.jpg) no-repeat left 200px/500px auto; padding-bottom:200px;}
.greet p{ font-size:1em; line-height:1.8em; color:#333; padding-left:250px; background:#fff; padding:50px 50px; margin:120px 0 0 400px;word-break: keep-all; word-wrap:break-word;}
.greet p strong{ font-size:1.3em; display:inline-block; margin-bottom:20px;}
@media (max-width: 1000px) {
.greet h2 {font-family: 'Freesentation';font-size:1.5em;line-height:1em; text-align:center;margin-bottom:80px;}
.greet h2 span{font-family: 'Freesentation';font-size:17px;color:#222;display: inline-block;margin-bottom: 10px;:;:m;}
.greet h2 strong{font-family: 'suit';font-size: 19px;}

.greet h3:before{content: ""; display: block; width: 30px; height: 2px; background-color:#0b4380; margin-bottom: 15px; }
.greet h3{font-size: 1.6em; margin: 10px auto 30px auto; color: #0b4380;}
  .greet{ background-position:center 175px; background-size:400px auto; padding-bottom:0;}
  .greet p{ font-size:1.1em; padding:30px 30px; width:90%; margin:250px auto 0 auto;}
}



#staff{background: #fff; color: #000; margin-bottom: 50px}
#staff{ display: flex;}
#staff:not(:last-child){ margin-bottom:50px}
#staff> div{width: 100%;}
#staff div.bgimg{ width: 40%;    border-bottom: 5px solid #c8c0b2;    /*box-shadow: 10px 10px 10px rgb(0 0 0 / 10%);*/}
#staff> div:not(.bgimg){ padding: 50px }
#staff .logo{margin-bottom: 10px; font-family: 'GowunBatang'}
#staff .logo img{ filter: grayscale(100%); opacity: 0.3; max-height:100px;  }
#staff .logo p{font-size: 1.1em; margin-top: 10px; opacity: 0.5; line-height: 1.5em;font-weight: 300;}
#staff .text span.mini_title{ margin-bottom: 10px;}
#staff .text h4{font-size: 1.8em; margin-bottom: 20px; line-height: 1.4em;color: #e5ae58;}
#staff .text .con p{margin-bottom: 30px; font-size: 1.15em;  line-height:1.8em; font-weight: 300;text-align:left}
#staff> div.bg1 {background: url("../img/sub/staff01.png") no-repeat center center/cover; border-radius: 40px;}


.object-fit img{width:100%;height:100%;object-fit:cover;}


#greet03{ margin-bottom: 50px}
#greet03   .swiper-slide {      text-align: center;      font-size: 18px;      background: #fff;      display: flex;      justify-content: center;      align-items: center;    }

#greet03 p{	font-size: 1.2em;	color: #e5ae58;	font-weight: 600;	margin: 0 0 20px;}
#greet03 h1{	font-size: 1.6em;	font-weight: 400;	word-break: keep-all;	color: #333;	line-height: 1.4em;	margin: 0 0 20px;}
#greet03     .swiper-slide img {      display: block;      width: 100%;      height: 100%;      object-fit: cover;    }
#greet03    .swiper {      width: 100%;      height: 300px;      margin-left: auto;      margin-right: auto;    }
#greet03     .swiper-slide {      background-size: cover;      background-position: center;    }
#greet03     .mySwiper2 {      height: 80%;      width: 100%;    }
#greet03    .mySwiper {      height: 20%;      box-sizing: border-box;      padding: 10px 0;    }
#greet03    .mySwiper .swiper-slide {      width: 25%;      height: 100%;      opacity: 0.4;    }
#greet03     .mySwiper .swiper-slide-thumb-active {      opacity: 1;    }
#greet03    .swiper-slide img {      display: block;      width: 100%;      height: 100%;      object-fit: cover;    }


/*약도*/
.map {}
.map_add_wrap {
  width: 100%;
  overflow: hidden;
  padding: 35px 0;
  font-size: 1.5em;
  font-weight: 500;
  box-sizing: border-box;
  text-align: center;
}

.map_add_wrap .ko {
  font-size: 0.92em;
  color: #69C;
  margin-top: 5px;
}

.map_box_wrap {
  width: 100%;
  overflow: hidden;
  margin: 20px 0 0;
  border-top: 1px solid #c2c2c2;
  border-right: 1px solid #c2c2c2;
  border-left: 1px solid #c2c2c2;
  display: flex;
}

.map_box_wrap .map_bx {
  width: 33.3%;
  float: left;
  box-sizing: border-box;
  border-left: 1px dotted #c8c5c5;
  padding: 1em 10px;
  align-items: stretch;
  text-align: center;
}

.map_box_wrap .map_bx:first-child {
  border: 0;
}

.map_box_wrap .map_bx .t {
  line-height: 1em;
  font-size: 1.3em;
  font-weight: 500;
  color: #273169;
  margin: 10px auto 10px;
}

.map_box_wrap .map_bx .c {
  font-size: 1.05em;
  letter-spacing: 0.5px;
}

.map_box_wrap .map_bx a.bt {
  display: inline-block;
  background: #fff;
  padding: 3px 12px;
  font-size: 0.88em;
  letter-spacing: -0.5px;
  margin: 3px;
  border-radius: 25px;
  border: 1px solid #dadada;
  transition: all 0.3s ease;
}

.map_box_wrap .map_bx a.bt:hover {
  font-weight: 500;
  color: #FFF;
  background: #273169;
  border: 1px solid #273169;
  transition: all 0.3s ease;
}

.map_box_wrap .glyphicon {
  font-size: 19px;
}

.map_add_wrap .glyphicon {
  font-size: 24px;
}

@media (max-width: 1279px) {
  .map_add_wrap {
    padding: 15px 10px;
    font-size: 0.9em;
    line-height: 1.4em;
  }

  .map_add_wrap span {
    display: block;
    margin-bottom: 5px;
  }

  .map_add_wrap br.mo {
    display: block
  }

  .map_box_wrap {
    display: block;
  }

  .map_box_wrap .map_bx {
    width: 100%;
    border-top: 1px dotted #ddd;
    padding: 7px
  }

  .map_box_wrap .map_bx:nth-of-type(2) {
    border-left: 0;
  }

  .map_box_wrap .map_bx:nth-of-type(3) {
    border-left: 0;
  }

  .map_box_wrap .map_bx:nth-of-type(2n) + .map_bx {
    clear: both
  }

  .map_box_wrap .map_bx .t {
    font-size: 1.2em;
  }

  .map_box_wrap .map_bx .c {
    font-size: 0.82em;
  }

  .map_box_wrap .map_bx img {
    height: 40px;
  }

  .map_box_wrap .map_bx .t {
    margin: 7px auto;
    font-size: 1em;
  }

  .map_box_wrap .map_bx a.bt {
    padding: 2px 12px;
  }
}


/*연혁*/
.history{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.history dt{font-size: 3em; font-family: 'MangoDdobak'; color: #3DA5FF; border-bottom: 1px solid #3DA5FF; display: inline-block; padding-left: 10px; margin-bottom: 20px}
.history dt:after{content:""; display:inline-block; width:0px; height:0px; border-top: 6px solid transparent; border-right: 6px solid #3DA5FF; border-left: 6px solid transparent; border-bottom: 6px solid #3DA5FF; vertical-align: bottom;}
.history dl:nth-child(odd){text-align: right;}
.history dl:nth-child(even){margin-top: 100px;}
@media screen and (max-width: 768px) {
  .history{grid-template-columns: 1fr;}
  .history dl:nth-child(odd){text-align: left;}
  .history dl:nth-child(even){margin-top: 10px;}
}


.treat {  position: relative;  z-index: 1; padding-bottom: 40px;margin-bottom: 40px}

.treat::after {
	top: 0;position: absolute; z-index: -1; content: ""; width: 100%; height: 100%;background:url(../img/common/logo2.svg) no-repeat right bottom; background-size: 40%;
	opacity: 0.2;
	background-color: #fff;
	background-blend-mode: hard-light; }
.treat img{    width: 100%;;}
.treat .treat01 {
	box-shadow: 10px 10px 10px rgb(0 0 0 / 10%);  border-bottom: 5px solid;    border-image: linear-gradient(to right, #2196F3, #4CAF50);    border-image-slice: 1;    margin-bottom: 55px;}
.treat h3 span.small{    font-size: 0.45em;    margin-bottom: 5px;    color: #2a2627;    padding: 2px 6px;    background: #E4E0D8;    display: inline-block; border-radius: 4px; font-family: 'SUIT'; font-weight: normal;}
.treat h3.title{font-size:1.9em; font-weight:500; margin-bottom:20px; font-weight: 600; position: relative;}
.treat h3.title.bg{font-family: 'GowunBatang';padding-left:35px;}
.treat h3.title.bg:before{content: ""; display: block; width: 1px; min-height: 50px; height: 100%; background: #ddd;
	position: absolute; left: 0; top: 10px;}
/*.treat h3.title.bg{background:url(../img/common/logo2.svg) no-repeat left 36px; background-size: 25px ;padding-left:35px;}*/
.treat p{    padding-top: 10px;  font-size: 1.25em;    line-height: 1.8em;    margin-bottom: 15px;}


.treatBox ul {
	margin-top: 40px;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-pack: justify;	-ms-flex-pack: justify;	justify-content: space-between; margin-bottom: 20px}
.treatBox li {padding: 24px 3%; width: 100%;	text-align: left; background: #eee; margin-right: 10px; border-radius: 20px;}
.treatBox li :last-child{margin-right: 0;}
.treatBox li p {	color: #222;}
.treatBox li .tit {	    padding: 0;font-size: 1.15em;	margin-bottom: 10px;	font-weight: 700;	display: flex;	align-items: center;	justify-content: left;	color: #e5ae58;}
.treatBox li .tit i{margin-right: 6px;}
.treatBox li .tit svg {	font-size: 1.3em;	margin-right: 10px;}
.treatBox li .txt {	    padding: 0; margin:0; font-size: 1.4em;}
.treatBox li .tit img {	margin-bottom: 0;margin-right: 10px;}


.under_bar{color: #eca459;}
/*	.under_bar{
		position: relative;
	}
	.under_bar::before{
		content: '';
		display: inline-block;
		position: absolute;
		left: 0;
		bottom: 0px;
		width: 100%;
		height: 12px;
		background: #cbe210;
		opacity: 0.5;
		mix-blend-mode: darken;
	}*/


@media(max-width:1400px){
	#greet01 .inr{		flex-direction: column;	}
	#greet01 .text_wrap{		width: 100%;	}
	#greet01 .img_wrap{		width: 70%;		margin-left: 30%;	}

	#staff { font-size: 0.8em;flex-wrap: wrap}
	#staff > div.bgimg {height: 350px;width:100%!important}
	.mapBox li .tit {		font-size: .9em	}
	.mapBox li .txt {		font-size: 1em	}

}


@media(max-width:768px) {
	.treat h3.title.bg {
		background: url(../img/common/logo2.svg) no-repeat left bottom!important;
		background-size: 25px!important;}
	.greet h1{		font-size: 1.2em;	}
	.greet h6{		font-size: 1em;	}
	#greet01 .img_wrap .layout03{		font-size: 3em;	}
	#greet01 {    min-height: 700px;}
	#staff> div:not(.bgimg){ padding: 20px }

	.mapBox ul {		-webkit-box-orient: vertical;		-ms-flex-direction: column;		flex-direction: column;	}
	.mapBox ul li {		width: 100% !important	}
	.mapBox li:before {		background-size: 20px !important;		width: 20px;	}
	.treat {font-size: 0.8em}
	.treatBox ul { flex-wrap: wrap}
	.treatBox li {width: 100%}

}
@media (max-width:500px){
	#greet01 .img_wrap{		width: 100%;		margin: 0;	}
	#greet01 .img_wrap .layout03{		font-size: 2em;		left: 0px;	}
}
