/* youtube Style */
.board_description #post_area .youtube_box {position: relative; width: 100%; padding-bottom: 56.25%;}
.board_description #post_area .youtube_box embed {position:absolute; width: 100%; height: 100%}

/* ------------------------------------------------------------------ */
/* Common Styles
main : f81515    1
point : a9c265   green 2
point : ded9bd
point : e0e0de
'Noto Sans KR', 'Noto Sans KR', sans-serif, 'Gothic A1', 'FontAwesome', "Font Awesome 5 Free"

@media screen and (max-width: 810px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
*/
/* ------------------------------------------------------------------ */


/*---------------------------------------------------------
  2. Typography
  Vertical rhythm with leading derived from 6
--------------------------------------------------------------------- */

h1 { font-size: 40px; line-height: 48px; }
h2 { font-size: 36px; line-height: 42px; }
h3 { font-size: 28px; line-height: 30px; }
h4 { font-size: 24px; line-height: 30px; }
h5 { font-size: 20px; line-height: 30px;}
h6 { font-size: 18px; line-height: 30px; }
.subheader { }
p { margin: 0; font-size: 17px; letter-spacing: -0.02em}
p img { margin: 0; }
p.lead { font: 26px/1.8 'Noto Sans KR', sans-serif; margin-bottom: 18px !important; color: #666; font-weight: 500; }
p.head { font: 22px/1.5 'Noto Sans KR', sans-serif; margin-bottom: 10px !important; color: #666; font-weight: 700; }

@media screen and (max-width: 810px) {
    h1 { font-size: 32px; line-height: 1.5; }
    h2 { font-size: 28px; line-height: 1.5; }
    h3 { font-size: 24px; line-height: 1.5; }
    h4 { font-size: 22px; line-height: 1.5; }
    h5 { font-size: 20px; line-height: 1.5; }
    h6 { font-size: 18px; line-height: 1.5; }
}

@media screen and (max-width: 640px) {
    p.lead {font-size: 20px;}
    p.head {font-size: 18px;}
    p { font-size: 16px;}
}

@media screen and (max-width: 480px) {
}
/* for 'em' and 'strong' tags, font-size and line-height should be same with
the body tag due to rendering problems in some browsers */

em {font-style: normal; }
strong, b { font-weight: bold;}
small { font-size: 11px; line-height: inherit; }

/* fontWeight common */
.fw100 {font-weight: 100 !important;}
.fw200 {font-weight: 200 !important;}
.fw300 {font-weight: 300 !important;}
.fw400 {font-weight: 400 !important;}
.fw500 {font-weight: 500 !important;}
.fw600 {font-weight: 600 !important;}
.fw700 {font-weight: 700 !important;}
.fw800 {font-weight: 800 !important;}
.fw900 {font-weight: 900 !important;}

/*---------------------------------------------------------
3. List
--------------------------------------------------------- */
ul, ol { margin-bottom: 0; margin-top: 0; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol, ol ol, ol ul { margin: 0x; }
ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 0; }
li { line-height: 18px; }
ul.large li { }
li p { }

/*---------------------------------------------------------
4. Images
--------------------------------------------------------- */
img { max-width: 100%; height: auto !important; vertical-align: top;}
img.pull-right { margin: 12px 0px 0px 18px; }
img.pull-left { margin: 12px 18px 0px 0px; }
i {font-style: normal;}
.cont-img {width: 100%;  margin:0 0 30px 0px;}
.cont-img img {width: 100% ; margin:0;}
.cont-ov-img {width: 100%;  margin:0 0 30px -30px;}
.cont-ov-img img {width: 100% ; margin:0;}


/*---------------------------------------------------------
5. page
--------------------------------------------------------- */
.page article {margin-bottom: 60px;}
.page article:last-child {margin-bottom: 0;}
.page h1 { line-height: 1.2; font-weight: 300; letter-spacing: -0.05em}
.page h1:after {background:#444; content:""; display:block; height:3px;width:70px;margin:20px 0 40px 0;}
.page h1 span {color: #f81515; font-weight: 700;}
.page h2 {font-weight: 400;}
.page h3 {font-weight: 200;}
.page h3 span {font-weight: 600;}
.page p {margin-bottom: 30px;}
.page p b {color: #333;}

.page .title-heading { font-size: 36px; line-height: 1.2; font-weight: 300; letter-spacing: -0.05em}
.page .title-heading span {font-weight: 700;}

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

}

@media screen and (max-width: 810px) {
  .page h1 { font-size: 32px; line-height: 42px;}
  .page h1:after {margin:10px 0 40px;}
  .title-heading { font-size: 32px; line-height: 42px;}
}
@media screen and (max-width: 480px) {
  .page h1 { font-size: 32px; line-height: 42px; text-align: center;}
  .page h1:after {margin:10px auto 40px;}
  .title-heading { font-size: 32px; line-height: 42px; text-align: center;}
  .page h1, .page p.lead { text-align: center; }
}


/* ------------------------------------------------------------------ */
/* About Styles
/* ------------------------------------------------------------------ */

.txt-point {font-size: 46px; color: #fff; font-weight: 400; line-height: 1.4;}
.txt-point span {font-size: 46px; font-weight: 700; color: #222;}
.txt-point .point-color {color: #f81515; font-weight: 900;}


@media screen and (max-width: 810px) {
    .txt-point {font-size: 24px;}
    .txt-point span {font-size: 24px;}
    span.l-font1 {font-size: 24px;}
    span.l-font2 {font-size: 24px;}

}
.cont_about .s02 {background: #d5dadc;}
.cont_about .txt-box {position: relative; width: 100%; }
.cont_about .txt-box blockquote {position: absolute; top: 50px; left: 50px;}

@media screen and (max-width: 810px) {
    .cont_about .txt-box {width: calc(100% + 40px); margin-left: -20px;}
    .cont_about .txt-box blockquote {width: 70%;}
}
@media screen and (max-width: 480px) {
    .cont_about .txt-box { height: 300px;  background: url("../images/img_greeting.jpg") no-repeat 80% 50% / cover;}
    .cont_about .txt-box img {display: none;}
    .cont_about .txt-box blockquote { top: 0; left: 10px; width: 55%;}
    .cont_about .txt-box blockquote p {color: #666;}
}
/* ------------------------------------------------------------------ */
/* About 2 Styles
/* ------------------------------------------------------------------ */
.about-wrap {margin-bottom: 60px;}
.about-wrap .fl { width:25%; margin-right: 6%; border-top:2px solid #111; padding-top: 20px;}
.about-wrap .fr { width:69%; border-top:1px solid #ddd; padding-top: 20px; padding-left: 30px;}
.about-wrap > .fr ul li{margin:10px 0; font-size:16px;font-weight: 300;}
.about-wrap > .fr ul li span{font-family: 'Roboto','Noto Sans KR',sans-serif;}
@media(max-width:767px){
	.about-wrap {padding-bottom: 40px;}
	.about-wrap > .fl,
	.about-wrap > .fr{
		width:100%;
		float:none;
		display:block;
	}
	.about-wrap > .fr {margin-top: 20px;padding-top: 20px; padding-left: 0;}
	.about-wrap > .fr ul li {margin: 8px 0;	font-size: 14px;}
}

@media(max-width:480px){
	.about-wrap {padding-bottom: 40px;}
	.about-wrap > .fl,
	.about-wrap > .fr{
		width:100%;
		float:none;
		display:block;
	}
	.about-wrap > .fr {	margin-top: 20px; padding-top: 20px; padding-left: 0;}
	.about-wrap > .fr ul li {margin: 8px 0;	font-size: 14px;}
}

.list-inline {
  .list-unstyled();
  margin-left: -5px;

  > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
  }
}

.about-wrap .history{position: relative; padding-top: 30px !important;}
.about-wrap .history::before{
    position: absolute;
    width: 1px;
    height: 100%;
    background: #ddd;
    top: 37px;
    left: 17.5%;
    content: '';
}
.about-wrap .history dl{
	width:100%;
}
.about-wrap .history dl dt,
.about-wrap .history dl dd{
	display:inline-block;
	vertical-align: top;
	font-family: 'Roboto','Noto Sans KR',sans-serif;
}
.about-wrap .history dl dt{
	width:15%;
	font-size:18px;
	position: relative;
	color:black;
}
.about-wrap .history dl dt::after{
	position: absolute;
	width:9px;
	height:9px;
	border:2px solid #c51b1f;
	top:8px;
	right:0;
	border-radius: 50%;
	content:'';
}
.about-wrap .history dl dd{width:84%; font-size:16px;}
.about-wrap .history dl dd p{display:inline-block;	vertical-align: top; font-family: 'Roboto','Noto Sans KR',sans-serif;}
.about-wrap .history dl dd p:first-child{width:13%;	padding-left: 30px;}
.about-wrap .history dl dd p:last-child{width:86%;}
@media(max-width:1200px){
	.about-wrap .history dl dt::after {right: 4px;background: white;}
	.about-wrap .history dl dd p:first-child {width: 15%;}
	.about-wrap .history dl dd p:last-child {width: 84%;}
}
@media(max-width:992px){
	.about-wrap .history dl dt::after {top: 6px;right: 15%;	}
	.about-wrap .history dl dd p:first-child {padding-left: 0;}
	.about-wrap .history dl dd p:first-child {width: 14%;}
}
@media(max-width:767px){
	.about-wrap .history::before {left: 16%;}
	.about-wrap .history dl dt {width: 20%;	font-size: 16px;}
	.about-wrap .history dl dd {width: 78%;	font-size: 14px;}
}

.about-wrap .award li {width:100%;}
.about-wrap .award li > span,
.about-wrap .award li > p{
	display:inline-block;
	vertical-align: top;
	line-height:1.8;
}
.about-wrap .award li > span{width:15%;}
.about-wrap .award li > p{width:84%;}

@media(max-width:1200px){
	.about-wrap .award li > span {width: 18%;}
	.about-wrap .award li > p {	width: 81%;	}
}
@media(max-width:992px){
	.about-wrap .award li > span {width: 24%;}
	.about-wrap .award li > p {width: 75%;}
}
@media(max-width:767px){
	.about-wrap .award li > span {width: 30%;}
	.about-wrap .award li > p {width: 65%;}
}

.map{margin-top: 0px;position: relative;}
.map .container{
	position: relative;
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.map .box{background: #fff;	border:1px solid #ddd;	padding:60px 40px;	max-width:530px;}
.map .box dl{width:100%;}
.map .box dl dt,
.map .box dl dd{
	display:inline-block;
	vertical-align: top;
	font-size:16px;
}
.map .box dl dt{width:26%;}
.map .box dl dt i{margin-right: 5px;}
.map .box dl dd{width:73%;}
.map .box dl dd span,
.map .box dl dd p{display:inline-block;	vertical-align: top;letter-spacing: -0.045em;}
.map .box dl dd span{width:3%;}
.map .box dl dd p{
	width: 96%;
	color:#666 !important;
	font-size:16px !important;
	padding:2px 0;
}
.map .cta{margin-top: 40px;}
.map .cta > a{
	display:inline-block;
	border:1px solid #ddd;
	color:#666;
	font-weight: 300;
	width:200px;
	height:50px;
	line-height: 50px;
	text-align: center;
	margin-right:10px;
}
.map .cta > a img{transform:translateY(-2px);margin-right:2px;}

@media(max-width:1660px){
	.map .box {padding: 40px;max-width: 650px;}
}
@media(max-width:1460px){
	.map .box {padding: 20px 40px;}
}
@media(max-width:1400px){
	.map .box {padding: 40px;border:none;max-width:100%;}
	.map .container{
		position: relative;
		top:0;
		left:0;
		transform:translate(0,0);
	}
	.map .box dl dt {width: 14%;}
}
@media(max-width:992px){
	.map .box {padding: 40px;border:none;max-width:100%;}
	.map .container{
		position: relative;
		top:0;
		left:0;
		transform:translate(0,0);
	}
}
@media(max-width:767px){
	.map {margin-top: 60px;}
	.map .box {padding: 40px 0;}
	.map .box dl dt {width: 25%;}
	.map .box dl dd {width: 71%; padding-left: 15px;}
	.map .cta > a {width: 158px;margin-right: 4px;}
}


/* ------------------------------------------------------------------ */
/* Location Styles
/* ------------------------------------------------------------------ */
/* 카카오 맵 */
.root_daum_roughmap {width: 100% !important; padding: 0 !important; border: none !important}
.root_daum_roughmap .wrap_map {}
.root_daum_roughmap .wrap_controllers {}

.mapinfo{
	display:flex; flex-wrap:wrap; align-items:center;
	box-sizing:border-box;
	position:relative;z-index:10;
    width: 100%;
	background:#fff;
	padding:50px 65px;
	margin: -65px auto 0 ;
    border: 1px solid #f5f5f5;
}
.mapinfo .tit .eng{font-family:"Barlow"; font-size:36px; color:#333; font-weight:800; letter-spacing:-1px;}
.mapinfo .tit .kor{font-size:24px; color:#333;}
.mapinfo .info {box-sizing:border-box; width:calc(100% - 295px); padding-left:40px;}
.mapinfo .info .addr{font-size:16px;color:#454545;}
.mapinfo .info .contact{margin-top:15px;}
.mapinfo .info .contact ul{display:flex;flex-wrap:wrap;}
.mapinfo .info .contact ul li{
	margin-right:20px;
	font-size:16px; color:#555; font-weight: 400; line-height: 1.7;
}
.mapinfo .info .contact ul li span{color:#da251c; font-weight:700;}

@media screen and (max-width: 810px) {
.mapinfo {width: 100%; margin: 10px 0 0 0; padding: 30px 20px; }
.mapinfo .tit .eng {font-size: 28px;}
.mapinfo .tit .kor {font-size: 24px;}
.mapinfo .info {display: block; box-sizing:border-box; width: calc(100% - 130px); padding-left:40px;}
}
@media screen and (max-width: 480px) {
    .mapinfo{ flex-direction: column; padding: 30px 20px; }
    .mapinfo .tit {margin-bottom: 10px;}
    .mapinfo .info {box-sizing:border-box; width: 100%; padding-left:0;}
}

/* ------------------------------------------------------------------ */
/* Team Styles
/* ------------------------------------------------------------------ */

#team-wrapper { }
#team-wrapper .member { margin-bottom: 20px; margin-top: 10px; }
#team-wrapper img { padding: 20px; margin-bottom: 12px; border-radius: 50%}
#team-wrapper .member-name {text-align: center;}
#team-wrapper h5 { }
#team-wrapper span { position: relative; top: -6px; font-size: 13px; line-height: 18px; color: #ccc; }
#team-wrapper .member-social { font-family: 'Font Awesome 5 Free','FontAwesome'; font-size: 20px; font-weight: normal; line-height: 18px; color: #ccc; margin: -12px 0 0 0; padding: 0; }
#team-wrapper .member-social li { display: inline-block; margin-right: 15px; }
#team-wrapper .member-social li a { color: #ccc; }
#team-wrapper .member-social li a:hover { color: #f2da00; }


/* ------------------------------------------------------------------ */
/* business 1 Styles
/* ------------------------------------------------------------------ */

/* business box */
#business-wrapper { }
#business-wrapper .member {width: 50%; }
#business-wrapper img { margin-bottom: 10px; }
#business-wrapper .box { margin-bottom: 20px; margin-top: 10px; }
#business-wrapper .box h3 {font-weight: 700; color: #aaa; }
#business-wrapper .box span { position: relative; top: 10px; font-size: 22px; line-height: 1.2; color: #666; }

#infos {}

.info-entry {position: relative;}

.info-entry .half-grey {
	width: 50%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 0;
    background: none;
	/* background: rgba(63, 80, 96, 0.15); */
}

.info-entry .info-entry-content {display: flex; position: relative;}
.info-entry .info-entry-content {padding-top: 0;padding-bottom: 0;}

.info-entry .media-wrap { width: 50%;}
.info-entry .text-part {display: flex; align-items: center; }

.info-entry .media-wrap img {max-width: 100%;}
.info-entry:nth-child(odd) .media-wrap { order:1; padding-left: 0; padding-right: 20px;}
.info-entry:nth-child(odd) .text-part {padding-left: 20px;padding-right: 70px;}

.info-entry:nth-child(even) .half-grey {left: 0;}
.info-entry:nth-child(even) .media-wrap {order:0; padding-right: 0; padding-left: 20px;}
.info-entry:nth-child(even) .text-part {padding-left: 70px;padding-right: 20px;}


.info-entry-content h5 {
	color: rgba(0, 24, 53, 0.4);
	margin-bottom: .6rem;
	margin-left: .2rem;
	font-size: 1.5rem;
}

.info-entry-content h1 { position: relative; }
.info-entry-content h1::after {
	content: "";
	display: block;
	width: 50px;
	height: 3px;
	background: rgba(0, 24, 53, 0.2);
}
.info-entry-content p {margin: 0;}
.info-entry:last-child .info-entry-content {
	padding-bottom: 13.2rem;
}

/* -------------------------------------------------------------------
 * responsive:
 * infos
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1024px) {
	.info-entry:nth-child(odd) .media-wrap {padding-right: 20px;}
	.info-entry:nth-child(odd) .text-part {	padding-left: 20px;	padding-right: 40px;}
	.info-entry:nth-child(even) .media-wrap {padding-left: 20px;}
	.info-entry:nth-child(even) .text-part {padding-left: 40px;	padding-right: 20px;}

}

@media only screen and (max-width:900px) {
	#infos {padding-top: 4.2rem;padding-bottom: 3rem;}

	.info-entry .half-grey {display: none;}

	.info-entry .info-entry-content {
        flex-direction: column;
		max-width: 640px;
        margin: 0 auto;
		padding-top: 9rem;
		padding-bottom: 7.8rem;
		border-bottom: 1px solid rgba(0, 24, 53, 0.1);
	}

    .info-entry-content h1::after {margin: 20px auto 40px;}

	.info-entry .info-entry-content .media-wrap,
	.info-entry .info-entry-content .text-part {
		order: 0; padding: 0 15px;
	}

	.info-entry .info-entry-content .media-wrap {
		position: static;
		width: 100%;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		margin-bottom: 4.2rem;
	}

	.info-entry .info-entry-content .text-part {
		width: 100% !important;
		float: none !important;
		clear: both !important;
		margin-left: 0;
		margin-right: 0;
		text-align: center;
	}
	.info-entry .info-entry-content .button {margin: 0 0 1.5rem 0;}
	.info-entry .info-entry-content h2::after {left: 50%; margin-left: -25px;}
	.info-entry:last-child .info-entry-content {border: none;}

}

@media only screen and (max-width:600px) {
	.info-entry .info-entry-content .media-wrap,
	.info-entry .info-entry-content .text-part {
		padding: 0 10px;
	}
	.info-entry .info-entry-content h2 { font-size: 3rem; line-height: 1.3;}

}

@media only screen and (max-width:480px) {
	.info-entry .info-entry-content {padding-top: 7.8rem; padding-bottom: 6rem;}
    .info-entry:first-child .info-entry-content {padding-top: 0;}
	.info-entry .info-entry-content .media-wrap,
	.info-entry .info-entry-content .text-part {
		padding: 0;
	}
	.info-entry .info-entry-content h2 { font-size: 2.8rem;	line-height: 1.3;}
}