@charset "utf-8";


.blind,legend,caption span{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;white-space:nowrap;*text-indent:-999em}
.input_txt, textarea{*margin:-1px 0}

.lang_en{font-family:'Montserrat',sans-serif;letter-spacing:-1px;}
.lang_ko{font-family:NanumSquareR,'Noto Sans',NanumBarunGothic,nbg,"굴림",Gulim,"Apple SD Gothic Neo",Sans-serif !important;letter-spacing:-1px;}
.dimmed{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;width:100%;height:100%;background:#000;opacity:.7;filter:alpha(opacity=70);-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'}

a.mmenu:link, a.mmenu:active, a.mmenu:visited {color:#F4F4F4; text-decoration:none;}
a.mmenu:hover { color:#EE3A3B; text-decoration:none; }

.wrap{ width:100%; height:100%; margin: 0 auto; font:11px NanumGothic; color: #333333;	line-height: 20px; letter-spacing:0px; }
#header { margin: 0 auto; text-align:left; vertical-align:top; background:#F4F4F4; overflow:hidden; }
.header-msg-wrap { height: 30px; text-align: center; background:#000000; color: #ffffff; padding-top: 10px;}

.header-mobile{position: absolute; top: 0; right: 0;display: block !important; }
.header-mobile .button{position: absolute; width: 40px;height: 40px;top: 20px;right: 40px;transform: translateY(-50%);cursor: pointer; z-index:9;}
.header-mobile .button span{position: absolute;width: 26px;height: 2px;background-color: #fff;top: 50%;left: 50%;transform: translate(-50%,-50%);transition: all 0.7s 0.2s; }
.header-mobile:hover .button span{background-color: var(--primary);transition: all 0.7s 0s; }
.header-mobile .button span:nth-child(1){transform: translate(-50%,-50%) translateY(-8px);}
.header-mobile .button span:nth-child(3){transform: translate(-50%,-50%) translateY(8px);}
.header-mobile .menuSide{position: fixed;top: 0px;right: 0px;width: 340px;height: 100%;z-index: 999;background-color: white;transform: translateX(120%);transition: transform 1s;}
.header-mobile.view .menuSide{transform: translateX(0%);}
.header-mobile .menuSide .close{position: absolute;top: 0px;left: -50px;width: 40px;height: 40px;cursor: pointer;}
.header-mobile .menuSide .close span{width: 30px;height: 2px;background-color: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.header-mobile .menuSide .close span:nth-child(1){transform: translate(-50%,-50%) rotate(45deg);}
.header-mobile .menuSide .close span:nth-child(2){transform: translate(-50%,-50%) rotate(-45deg);}
.header-mobile .menuSide .logo{width: 100%;height: 80px;background-image: url(/image/common/logo.png);background-size: 200px auto;background-repeat: no-repeat;background-position: center;}
.header-mobile .menuSide .menu { display: flex; flex-direction: column; }
.header-mobile .menuSide .menu > li{  width: 100%; cursor: pointer; }
.header-mobile .menuSide .menu > li > div{ width: 100%; line-height: 50px; text-align: left; padding: 0px 20px; border-bottom: 1px solid #cecece;font-size: 1.5rem; font-weight: 700;}
.header-mobile .menuSide .menu > li > ol{ background-color: #f5f5f5; max-height: 0px; overflow: hidden;transition: max-height .5s; }       
.header-mobile .menuSide .menu > li.view > ol{max-height: 500px;}
.header-mobile .menuSide .menu > li > ol li{width: 100%;}
.header-mobile .menuSide .menu > li > ol li a{line-height: 40px;width: 100%;text-align: left;padding: 0px 20px;font-size: 14px;}
.header-mobile .menuBG{position: fixed;z-index: 998;top: 0px;left: 0px;width: 100%;height: 100%;background-color: #000c;transform: translateX(100%);opacity: 0;transition: opacity 1s 0s, transform 0s 1s;}
.header-mobile.view .menuBG{opacity: 1;transform: translateX(0%);transition: opacity 1s 0s, transform 0s 0s;}

.header-logo-wrap { margin:0 auto; width: 100%; vertical-align: top; }
.header-logo-wrap .logo-wrap { margin:0 auto; width: calc(100% - 60px); padding:10px 30px 0px 30px; background: var(--primary); display: flex; justify-content: space-between; align-items: start; 
	height: 500px;
	background: url('../image/topbg.jpg') no-repeat center bottom/cover;
}
.header-logo-wrap::before {
	content:'';
	background: linear-gradient(to top, #D2F0FF, transparent); /* #D2F0FF */
	position: absolute;
	width: 100%; height: 510px;
	top:40;
}
.header-logo-wrap .logo-wrap div { z-index: 1; }
.header-logo-wrap .header-title { position:absolute; width: 100%; margin: 0 auto; text-align: center; top: 200px; }
.header-logo-wrap .header-title span { font-family: 'GmarketSans', 'SBAggro'; font-size: 4.0rem; font-weight: 700; line-height: 5.0rem; }
.header-logo-wrap .header-title span.tit1 { display: block; position:relative; margin-right: 200px; text-shadow: 2px 2px 3px #008040;  opacity: 0; animation: reveal_left 1.2s forwards;  } /* cubic-bezier(0.77, 0, 0.175, 1)  */
.header-logo-wrap .header-title span.tit2 { display: block; margin-left: 200px; text-shadow: 2px 2px 3px #008040; opacity: 0; animation: reveal_right 2.2s forwards; }
@keyframes reveal_left {
  0% {
    opacity: 0; transform: translateY(-100%);
  }
  100% {
    opacity: 1; transform: translateY(0);
  }
}
@keyframes reveal_right {
  0% {
    opacity: 0; transform: translateY(100%);
  }
  100% {
    opacity: 1; transform: translateY(0);
  }
}

/* #container { margin: 0 auto; width: 100%; text-align:left; background:#FFFFFF; color:#666666; overflow:hidden; } */
#container {
	width: 100%;
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 30px;
}
#container .arealeft { width:calc(100% - 70px); padding:10px 20px 0 50px; margin-top: 20px; }
#container .areacontents { min-height:450px; margin-top: 20px; padding-right:50px; }
#footer { 
	width:100%; margin:0 auto; background:#383838;  text-align:left; padding: 30px 0; margin-top: 50px; 
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 30px;
}
#footer .logo { text-align: center; }
#footer .logo span { font-size: 2.0rem; font-weight: 700; color: #888; }
#footer .const { color: #E8E8E8; line-height: 1.7rem; }
#footer .const a, #footer .const span { color:#E8E8E8; }

/* 메인메뉴 */
.menuline { background:#383838; }
.menu { margin: 0 auto; width:100%; color:#F4F4F4; display: flex; justify-content: center; align-items: center; padding: 12px;  }
.menu .tit { padding-right:20px; }
.menu .tit span { font-size: 1.4rem; color: var(--primary); }
.menu .menutxt {  padding-right:20px; }
.menu .menutxt a { font-size: 1.2rem; color: #ffffff; }
.menu .menutxt a:hover { color: var(--primary); }


/* snb */
.l_title { background: #004080; padding:25px 5px 20px 25px; font-family:'GmarketSans'; color:#FFFFFF; font-size: 1.5rem; font-weight: 700; border-radius: 25px 0px 25px 25px; box-shadow: 2px 2px 3px #008040; } /* #0D2557 */
.l_menu { margin-top:5px; margin-bottom:20px; z-index:10;}
/*
.l_menu p { line-height:45px; padding:0 15px 0 10px; border:1px solid #e1e4e6; background-color:#f8f8fa;}
.l_menu p a { color:#222222; }
.l_menu p a:hover { color: var(--primary); }
*/
.l_menu .l_menu_section { padding: 10px 15px 0 10px; margin-bottom: 30px; }
.l_menu .l_menu_section .lm_txt { padding: 5px 5px 5px 10px; }
.l_menu .l_menu_section .lm_txt a { font-size: 1.15rem; color:#222222; font-weight: 600; }
.l_menu .l_menu_section .lm_txt a:hover { color: var(--primary); }
.l_menu .l_menu_section .lm_txt a.current { font-size: 1.20rem; color: var(--primary); font-weight: 600; }



.bold { font-weight:bold; }

/* .titleBox { border-top:1px solid #E1E4E6; border-right:1px solid #B2B2B2; border-bottom:1px solid #B2B2B2; border-left:1px solid #E1E4E6; padding:7px; margin-bottom:10px; } */
.titleBox { width: 100%; margin-bottom: 50px;  padding: 30px 0px; border-bottom: 1px solid #EBEBEB; }
.titleBox span { font-size:12px; color:#808080; letter-spacing:-1px; }
.titleBox span.tit { font-size: 3.0rem; font-weight: 700; color:#0D2557; letter-spacing:-2px; }

/* 비지니스 */
.bizTit { width: 100%; margin-bottom: 30px; }
.bizTit span { font-size: 1.5rem; font-weight: 700; }

/* 사이트맵 */

.sitemap-wrap {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;	
}
.sitemap-wrap .sitemap-item { margin-bottom: 50px; }
.sitemap-wrap .sitemap-item .sitemap-tit { margin-bottom:30px;  }
.sitemap-wrap .sitemap-item .sitemap-tit span { font-size: 30px; font-weight: 600; color: #000; margin-left: 30px; margin-bottom: 50px; }
.sitemap-wrap .sitemap-item .sitemap-tit::before{ content: ''; position: absolute; background-color: #fff; display: block; width: 17px; height: 17px; border: var(--primary) 1px solid; border-radius: 50%; display: block;}
.sitemap-wrap .sitemap-item .sitemap-tit::after{ content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background-color:var(--primary); position: absolute; margin-top: -14px; margin-left: 6px;}
.sitemap-wrap .sitemap-item .sitemap-menu { padding: 7px; margin-bottom: 5px; margin-left: 30px; }
.sitemap-wrap .sitemap-item .sitemap-menu a { font-size: 1.3rem; }

/*
.sitemap-wrap{}
.sitemap-wrap .sitemap-item{ display:grid; grid-template-columns:1fr 1fr;}
.sitemap-wrap .sitemap-item + .sitemap-item{ margin-top: 180px;}
.sitemap-wrap .sitemap-item img{transform: translateX(-100px); opacity:0; transition:all 1.2s;}
.sitemap-wrap .sitemap-item.view img{transform: translateX(0px); opacity:1;}

.sitemap-wrap .sitemap-item .text{position: relative;text-align: left;}
.sitemap-wrap .sitemap-item .text dl{ padding: 90px 0 0 155px; vertical-align: top;}
.sitemap-wrap .sitemap-item .text dl::before{ content: ''; width: 1px; position: absolute; top: 0; bottom: -400px; left: 108px; background-color: #dbdbdb;}
.sitemap-wrap .sitemap-item .text dl dt{ font-size: 40px; font-weight: 600; color: #000; font-family: 'Montserrat', 'Noto Sans KR'; margin-bottom: 50px;}
.sitemap-wrap .sitemap-item .text dl dt::before{ content: ''; position: absolute; top:94px; left:99px; background-color: #fff; display: block; width: 17px; height: 17px; border: #ff2929 1px solid; border-radius: 50%; display: block;}
.sitemap-wrap .sitemap-item .text dl dt::after{ content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background-color:#ff2929; position: absolute; top: 100px; left: 105px;}
.sitemap-wrap .sitemap-item .text dl dd{font-size: 18px; margin-bottom: 30px;}
.sitemap-wrap .sitemap-item .text dl dd p{font-size: 18px; margin-bottom: 5px;}
.sitemap-wrap .sitemap-item .text dl dd p a { font-size: 18px; }
.sitemap-wrap .sitemap-item .text dl dd strong{font-size: 18px; color: #000; font-family: 'Montserrat', 'Noto Sans KR';}
.sitemap-wrap .sitemap-item:last-child dl::before{ bottom: 0; }
.sitemap-wrap .sitemap-item:last-child dl::after{ content: ''; position: absolute; bottom: 0; left: 105px; width: 7px; height: 7px; background-color: #dbdbdb; display: block; border-radius: 50%;}
*/

.title-guide-wrap { width: 100%; margin: 0 auto 30px auto; }
.title-guide-wrap .tit { position: relative; margin-top:0px; margin-left:10px; z-index: 3; }
.title-guide-wrap .tit span { font-size: 3.0rem; font-size: 600; color: var(--primary); letter-spacing: -3px; line-height: 3.0rem;  }
.title-guide-wrap .guideBox { position: relative;  width: calc(100% - 62px); margin-top: -6px; border:1px solid #D7D7D7; border-radius: 10px 10px 10px 10px; background: #fff; text-align:left; padding:30px; z-index: 4; }
.title-guide-wrap .guideBox span { font-size: 1.5rem; line-height: 2.0rem; }

.greetings-txt { font-size: 1.4rem; line-height: 2.0rem; margin-top: 30px; }
.greetings-txt span { font-size: 1.7rem; }


.point-txt { width: 100%; line-height: 3.0rem; }
.point-txt span { font-size: 1.7rem; }
.point-txt span.pTxt { display: block; width: 100%; font-size: 3.0rem; letter-spacing: -2px; line-height: 3.5rem; margin: 20px auto 30px auto; text-align: center; }
.point-txt span.pColor { font-size: 3.0rem; color: var(--primary); letter-spacing: -2px; line-height: 3.5rem; margin: 20px 0 30px 0; }

/*
.pointBox { float:left;  width:180px; margin-top:5px; z-index:10;}
.pointBox p {height:115px; line-height:20px; padding:8px; border:1px solid #e1e4e6; background-color:#f8f8fa;}
*/

.ap-graph { width:100%; margin:100px auto; display: flex; justify-content: center; align-items: center; gap: 70px;  }
.ap-graph .circle { width: 400px; height: 400px; border:1px solid #004080; border-radius: 50%; text-align: center; align-content: center; background: #F2F7FD; box-shadow:5px 7px 15px #AACBF2; }
.ap-graph .circle:nth-child(1):after { content: '+'; position: absolute; font-weight: 700; margin-left: 110px; }
.ap-graph .circle:nth-child(3):before { content: '='; position: absolute; font-weight: 700; margin-left: -145px; }
.ap-graph .leftGraph, .ap-graph .centerGraph, .ap-graph .rightGraph { font-size: 2.5rem; line-height: 2.7rem; }
.ap-graph .rightGraph { color: var(--primary); }


.active-point-wrap { 
	width:100%; margin:0 auto; text-align:left; padding: 20px 0; margin-top: 20px; 
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
}
.active-point-wrap .itemBox {
	padding: 30px;
	border:1px solid #DB6A05; box-shadow:0px 3px 2px #DB6A05; border-radius: 30px;
}
.active-point-wrap .itemBox .tit { line-height: 3.0rem; margin-top: 10px; border-top: 1px solid #D7D7D7; }
.active-point-wrap .itemBox .tit span.num { font-size: 1.3rem; font-size: 700; color:#DB6A05; }
.active-point-wrap .itemBox .tit span.txt { font-size: 1.2rem; font-size: 700; letter-spacing: -2px; }
.active-point-wrap .itemBox .const { font-size: 1.4rem; line-height: 2.0rem;  }


/* .portfolio-gallery { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 60px; } */
.portfolio-gallery { 
	width:100%; margin:0 auto; 
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 60px;
}
.portfolio-gallery li { width: 100%; cursor: pointer;  }
.portfolio-gallery .portfolio-img { width: 100%; border-radius: 20px; box-shadow:5px 5px 20px #888888;  overflow: hidden; }
.portfolio-gallery .portfolio-img img { width: 100%; height: auto;  transition-duration: 0.3s; object-fit: cover; }
.portfolio-gallery .portfolio-img img:hover { transform: scale(1.2, 1.2); transition-duration: 0.5s;}

.portfolio-gallery .portfolio-subject { font-size: 1.4rem; font-weight: 700; line-height: 1.7rem; text-align: center; margin-top: 30px; }

/* 찾아오시는 길 */
.map-wrap{ background: #fff;  }
.map-wrap .mapSize { width: 100%; margin: 0 auto; border-radius: 50px; }
.map-wrap-info{ position:relative; margin: 0 auto; margin-top:-50px; width:90%; z-index:90;}
.map-wrap-info .info-box{ display:grid; grid-template-columns: 1fr 1fr; background: var(--primary); border-radius: 30px; padding:30px 40px 50px 40px; color: #fff;text-align: left; }
.map-wrap-info .info-box .title{ font-size: 1.7rem; font-weight: 600; color: #fff; margin: 30px 0 20px 0; text-transform: uppercase; }
.map-wrap-info .info-box .con{ font-size: 1.2rem; color: #fff; line-height: 30px; margin-top: 10px;}
.map-wrap-info .info-box .con a { font-size: 1.2rem; color: #fff; line-height: 30px; }
.map-wrap-info .info-box i { font-size: 1.3rem; color: #fff; margin-right: 5px; }