@charset "UTF-8";

body{position:relative; width:100%; min-width:320px; overflow-x:hidden;}
body.fixed{position:fixed;}

/*skip navigation*/
#skip_navigation{z-index:9999; position:absolute; left:0; top:0;}
#skip_navigation *{list-style:none; margin:0; padding:0;}
#skip_navigation a{display:block; width:1px; height:1px; overflow:hidden; color:#000; white-space:nowrap; text-align:center;}
#skip_navigation a:focus,
#skip_navigation a:active{width:100px; height:auto; background:#ffd;}

.mask{visibility:hidden; opacity:0; display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5);}
.mask.on{z-index:7; visibility:visible; opacity:1; transition:opacity 0.25s linear;}

.mask2{visibility:hidden; opacity:0; display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5);}
.mask2.on{z-index:98; visibility:visible; opacity:1; transition:opacity 0.25s linear;}

.inner{position:relative; width:1290px; margin:0 auto; box-sizing:border-box;}
.inner:after{content:""; display:block; clear:both;}

@media screen and (max-width:1350px){
  .inner{width:100%; padding-right:30px; padding-left:30px;}
}
@media screen and (max-width:1024px){
  .inner{padding-right:25px; padding-left:25px;}
}
@media screen and (max-width:768px){
  .inner{padding-right:20px; padding-left:20px;}
}
@media screen and (max-width:380px){
  .inner{padding-right:17px; padding-left:17px;}
}

/* top */
#top{z-index:5; position:relative; background:#ddd;}
.top_util{float:right; display:flex; align-items:center; height:38px;}
.top_util > div{position:relative; float:left;}
.top_util > .top_sch{padding-right:0;}

.top_lnk{float:left; display:flex; align-items:center; justify-content:center; padding:0 22px 0 0;}
.top_lnk a{position:relative; display:block; font-size:16px; color:#666; font-weight:500;}
.top_lnk a + a{padding:0 0 0 12px; margin:0 0 0 12px;}
.top_lnk a + a:before{content:""; display:block; position:absolute; top:50%; left:0; height:11px; width:1px; background:#666; transform:translateY(-50%);}

/* top - 검색 */
.top_sch{z-index:1; position:relative; float:right;}
.top_sch fieldset{display:block; box-sizing:border-box; transition:0.3s ease-in-out;}
.top_sch input[type="text"]{width:243px; height:38px; padding:0 40px 0 19px; font-size:16px; color:#666; font-weight:500; border:none; background:#bbb; box-sizing:border-box;}
.top_sch .btn_sch{position:absolute; right:8px; top:50%; height:38px; width:44px; font-size:0; transform:translateY(-50%); background:url(../img/common/btn_search.png) no-repeat 50% 50%;}
@media screen and (max-width:1200px){
	.top_sch {font-size:15px;}
	.top_sch .btn_sch{right:3px;}
	.top_lnk a{font-size:15px;}
}
@media screen and (max-width:768px){
	.top_sch input[type="text"]{width:170px; padding:0 30px 0 10px; font-size:14px;}
	.top_sch .btn_sch{right:0; width:30px;}

	.top_lnk{padding:0 15px 0 0;}
	.top_lnk a{font-size:14px;}
	.top_lnk a + a{margin:0 0 0 8px; padding:0 0 0 8px;}
}

#header{z-index:4; float:left; width:100%; height:105px;}

@media all and (max-width:1200px) {
	#header{height:70px;}
	#header .inner{width:100%; padding:0;}
}
@media all and (max-width:768px) {
	#header{height:60px;}
}

/* logo */
.logo{z-index:97; position:absolute; top:29px; left:50%; margin:0 0 0 -645px;}

@media screen and (max-width:1350px){
  .logo{left:30px; margin:0;}
}
@media screen and (max-width:1200px){
  .logo{top:21px; left:20px;}
  .logo img{height:28px;}
}
@media screen and (max-width:768px){
	.logo{left:15px; top:18px;}
	.logo img{height:24px;}
}


/* gnb - 상단 메뉴 */
#m_gnb{display:none;}
.on .mask{z-index:3; visibility:visible; opacity:1; top:149px; height:calc(100% - 149px);}
#gnb{z-index:95; overflow:hidden; position:absolute; left:0; top:38px; width:100%; box-sizing:border-box;}
#gnb:before,
#gnb:after{z-index:-1; content:""; display:none; position:absolute; top:106px; left:0; width:100%; height:calc(100% - 106px); background:#fff;}
#gnb:before{top:105px; height:1px; background:#e1e1e1;}
#gnb .bar{opacity:0; z-index:98; display:block; position:absolute; top:101px; left:0; width:255px; height:4px; background:#486ccd; transition:0.3s;}

#gnb.on .bar{opacity:1;}
#gnb.on:before,
#gnb.on:after{display:block;}

#gnb a[target="_blank"]:after{content:""; display:inline-block; vertical-align:middle; width:14px; height:14px; margin:-4px 0 0 6px; background:url(../img/common/ico_new.png) no-repeat 100% 0;}
#gnb .depth1{display:flex; justify-content:space-between; padding:0 0 0 38%; box-sizing:border-box;}
#gnb .depth1 > li{position:relative; flex:max-content; text-align:center;}
#gnb .depth1 > li > a{z-index:97; position:relative; display:block; line-height:105px; height:105px; font-size:22px; text-decoration:none;}

#gnb .depth2{opacity:0; visibility:hidden; position:relative; width:100%; min-height:350px; padding:25px 5px 20px 5px; box-sizing:border-box; text-align:center; font-size:18px; word-break:keep-all;}
#gnb.on .depth2{opacity:1; visibility:visible; border-right:1px solid #e1e1e1;}
#gnb .depth2 a{position:relative; display:block; line-height:120%; padding:14px 0 15px; text-decoration:none;}
#gnb .depth2 a:hover,
#gnb .depth2 a:focus,
#gnb .depth2 ul > .on > a{color:#486ccd; font-weight:500;}
#gnb.on li:first-child .depth2{border-left:1px solid #e1e1e1;}

#gnb .depth3{display:none;}

@media screen and (max-width:1350px){
  #gnb .inner{width:100%; padding-right:30px;}
}
@media screen and (max-width:1200px){
  #gnb{display:none;}
}

/* footer */
#footer{float:left; width:100%; padding:26px 0 60px 0; color:#fff; background:#32323c;}

/* footer 왼쪽 링크 */
#footer .link{float:left; width:100%;}
#footer .link li{position:relative; float:left;}
#footer .link li:last-child{float:right;}
#footer .link a{display:block; height:49px; line-height:49px; margin:0 0 0 26px; font-weight:500; color:#fff;}
#footer .link li:first-child a{margin:0;}

#footer .info{float:left; width:100%; padding:37px 0 0 0; border-top:1px solid #fff;}
#footer .addr{float:left; width:36.43%;}
#footer address{display:inline-block; vertical-align:top;}
#footer .copyright{padding:12px 0 0 0; font-weight:300; line-height:120%;}
#footer .call{float:left; position:relative; font-weight:500; box-sizing:border-box;}
#footer .call a{display:block; padding:5px 0 0 0; line-height:100%; font-size:32px;}

/* footer 오른쪽 패밀리사이트 */
#footer .site{position:relative; float:right; width:253px;}
#footer .btn_site,
#footer .site a{display:block; width:100%; box-sizing:border-box; transition:0.3s; text-align:left; color:#fff;}
#footer .btn_site{position:relative; height:54px; line-height:52px; padding:0 0 0 22px; border:1px solid #fff; font-weight:500; text-transform:uppercase; box-sizing:border-box;}
#footer .btn_site:before{content:""; display:block; position:absolute; top:50%; right:25px; width:8px; height:8px; margin:-3px 0 0 0; border-top:1px solid #fff; border-left:1px solid #fff; transition:0.3s; transform:rotate(45deg);}
#footer .btn_site.on:before{margin:-8px 0 0 0; transform:rotate(225deg);}
#footer .site ul{display:none; z-index:99; position:absolute; bottom:53px; left:0; overflow-y:auto; width:100%; padding:0 2px; border:1px solid #fff; max-height:318px; background:#32323c; box-sizing:border-box;}
#footer .site ul li a{padding:12px 0 12px 20px; border:1px dashed #3f3f3f; text-decoration:none; box-sizing:border-box;}
#footer .site ul li a:hover,
#footer .site ul li a:focus{color:#fff; font-weight:500; font-size:1.05em; background:rgba(0, 0, 0, 0.5);}
#footer .site ul li:first-child a{border-top:none;}

@media screen and (max-width:1200px){
	#footer .addr,
	#footer .call{width:calc(100% - 260px);}
	#footer .call{padding:15px 0 0 0;}
	#footer .copyright{padding:5px 0 0 0; font-size:14px;}
}
@media screen and (max-width:768px){
	#footer{padding:15px 0 55px 0; font-size:15px;}
	#footer .info{padding:25px 0 0 0;}
	#footer .site{float:left; width:220px; margin:0 0 20px;}
	#footer .addr,
	#footer .call{width:100%;}
	#footer .btn_site{height:49px; line-height:47px;}
	#footer .site ul{bottom:48px;}
}

#container{overflow:hidden; width:100%;}

/* 서브레이아웃 */
#sub_content{clear:both; position:relative; width:100%; max-width:1290px; margin:0 auto; padding:0 0 150px; line-height:170%; box-sizing:border-box;}
#sub_content:after{content:""; display:block; clear:both; width:100%;}
#content{width:100%;}
#contents_Find {clear:both; position:relative; width:100%; max-width:750px; margin:0 auto; padding:0 0 150px; line-height:170%; box-sizing:border-box;}
#contents_Find:after{content:""; display:block; clear:both; width:100%;}
@media screen and (max-width:1350px){
  #sub_content,
  #contents_Find{max-width:100%; padding:0 30px 120px;}
}
@media screen and (max-width:1200px){
  #sub_content,#contents_Find{padding:0 25px 120px;}
}
@media screen and (max-width:768px){
  #sub_content,#contents_Find{padding:0 20px 100px;}
}
@media screen and (max-width:568px){
  #sub_content,#contents_Find{padding:0 17px 100px;}
}

/* snb */
#snb{float:left; width:100%; margin:0 0 50px;}
#snb h3{display:flex; align-items:center; justify-content:center; height:147px; padding:13px 0 0 0; font-size:48px; color:#000; text-align:center; box-sizing:border-box;}
#snb ul{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:19px;}
#snb li{width:203px;}
#snb a{position:relative; display:block; width:100%; line-height:54px; height:56px; font-weight:500; font-size:18px; color:#666; border:1px solid #ccc; text-decoration:none; box-sizing:border-box; background:#f5f5f5; text-align:center; box-shadow:1px 1px 7px rgba(0,0,0,0.22);}
#snb .on a{color:#fff; background:#486ccd; border-color:#486ccd;}
#snb a[target="_blank"]:after{content:""; display:inline-block; vertical-align:middle; width:14px; height:14px; margin:-4px 0 0 6px; background:url(../img/common/ico_new.png) no-repeat 100% 0;}
@media screen and (max-width:1200px){
	#snb h3{height:100px; padding:10px 0 0 0; font-size:30px;}
	#snb ul{gap:15px;}
	#snb li{width:calc(100% / 5 - 23px);}
	#snb a{height:48px; line-height:46px; font-size:17px;}
}
@media screen and (max-width:768px){
	#snb h3{height:80px; padding:7px 0 0 0; font-size:25px;}
	#snb ul{gap:12px;}
	#snb li{width:calc(100% / 3 - 22px);}
	#snb a{height:42px; line-height:40px; font-size:16px;}
}
@media screen and (max-width:568px){
	#snb h3{height:70px; font-size:23px;}
}
@media screen and (max-width:380px){
	#snb li{width:calc(100% / 3 - 18px);}
	#snb ul{gap:10px;}
	#snb a{font-size:15px;}
}
@media screen and (max-width:360px){
	#snb li{width:calc(100% / 2 - 18px);}
}

.location {z-index:3; position:relative; display:block; float:left; width:100%; background:#f5f5f5; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.location:after {content:''; display:block; clear:both;}
.location * {display:block;}
.location .home {float:left; position:relative; width:62px; height:52px; font-size:0; border-right:1px solid #ccc; border-left:1px solid #ccc; background:url(../img/common/ico_home.png) no-repeat 50% 50%;}

.ul_loc {float:left;}
.ul_loc > li {float:left; position:relative;}
.ul_loc > li > a {position:relative; width:260px; height:100%; line-height:52px; padding:0 40px 0 20px; color:#777; border-right:1px solid #ccc; box-sizing:border-box;}
.ul_loc > li > a:after{content:''; position:absolute; top:50%; right:13px; width:13px; height:7px; transform:translateY(-50%); transition:transform 0.25s ease-in-out; background:url(../img/common/ico_arrow_g.png) no-repeat;}
.ul_loc > li > a.on{color:#000;}
.ul_loc > li > a.on:after {transform:translateY(-50%) rotate(-180deg);}
.ul_loc ul {display:none; z-index:3; position:absolute; top:52px; left:-1px; width:calc(100% + 1px); border:1px solid #e6e6e6; background:#fff; box-sizing:border-box; box-shadow:0 0 5px rgba(0,0,0,0.1);}
.ul_loc ul li {width:100%;}
.ul_loc ul a {display:block; line-height:53px; padding:0 0 0 20px;}
.ul_loc ul li + li a {border-top:1px solid #e6e6e6;}
.ul_loc ul a.on,
.ul_loc ul a:hover,
.ul_loc ul a:focus,
.ul_loc ul a:active {background:#f7f7f7;}

@media all and (max-width:1024px) {
	.location {height:49px; font-size:15px; font-weight:400;}
	.location .home {width:49px; height:51px;}
	.ul_loc > li > a {width:200px; line-height:49px; font-size:14px;}
	.ul_loc ul {top:49px;}
	.ul_loc ul a {line-height:45px; padding:0 0 0 20px;}
}
@media all and (max-width:768px) {
	.location {height:45px; font-size:14px;}
	.location .home {width:45px; height:47px;}
	.ul_loc > li > a {width:auto; line-height:45px; font-size:13px;}
	.ul_loc > li > a:after {right:8px; width:10px; background-size:contain;}
    .ul_loc ul {top:45px;}
	.ul_loc ul a {line-height:37px;}
}
@media all and (max-width:568px) {
	.location {height:39px; font-size:13px;}
	.location .home {width:39px; height:41px; background-size:13px;}

	.ul_loc > li > a {line-height:39px; padding:0 30px 0 15px;}
    .ul_loc ul {top:39px;}
	.ul_loc ul a {padding:0 0 0 15px; line-height:34px;}
}
@media all and (max-width:380px) {
	.location {height:36px;}
	.location .home {width:36px; height:38px;}
	.ul_loc > li > a {line-height:36px;}
	.ul_loc > li:nth-child(2){display:none;}
	.ul_loc > li:nth-child(2):last-child{display:block;}
	.ul_loc ul {top:36px;}
	.ul_loc ul a {line-height:32px; padding:0 0 0 12px;}
}

/* 모바일메뉴 - 버튼 */
.btn_gnb{display:none; z-index:6; position:absolute; top:62px; /* #top 주석처리 top:67px;*/  right:20px; width:30px; height:30px;}
.btn_gnb .bar{display:block; width:80%; height:3px; margin:0 auto 6px; background:#000;}
.btn_gnb .bar2{position:relative;}
.sub .btn_gnb .bar{background-color:#000;}

.m_top{overflow:hidden; width:100%; background:#1d51a3;}
.m_top .top_sns{float:left; display:flex; align-items:center; margin:0 0 0 20px; height:45px;}
.m_login{padding:17px 16px; box-sizing:border-box;}
.m_login .login{position:static; width:100%; height:88px !important; margin:0; border:none; background:#f6f6f6;}
.m_login .user{display:inline-block; margin:0; padding:20px 0 0 55px; background:url(../img/common/ico_login_on.png) no-repeat 0 20px;}

.btn_gnb_close{float:right; position:relative; right:3px; width:45px; height:45px; font-size:0; background:#1d51a3;}
.btn_gnb_close:before,
.btn_gnb_close:after{content:""; display:block; position:absolute; top:21px; right:12px; width:25px; height:3px; background:#fff;}
.btn_gnb_close:before{transform:rotate(45deg);}
.btn_gnb_close:after{transform:rotate(-45deg);}
@media screen and (max-width:1200px){
  .btn_gnb{display:block;}
}
@media screen and (max-width:768px){
  .btn_gnb{top:55px; right:15px;}
}

@media screen and (max-width:1200px){
  body{min-height:100%;}
  img{max-width:100%;}

  .fixed{overflow:hidden;}

  /* 모바일 메뉴 */
  #m_gnb{display:block; position:fixed; top:0; right:-100%; width:50%; height:100%; overflow-y:auto; z-index:99; background:#fff; transition:right 0.25s ease-in-out;}
  #m_gnb.on{right:0;}
  #m_gnb > ul{width:100%; box-sizing:border-box; border-top:1px solid #dedede;}
  #m_gnb > ul a{display:block; text-decoration:none; cursor:pointer; font-weight:500;}
  #m_gnb > ul > li{border-bottom:1px solid #dedede;}
  #m_gnb > ul > li > a{position:relative; height:55px; padding:0 0 0 24px; line-height:55px; color:#333; font-size:18px;}

  #m_gnb > ul > li > a:not([target="_blank"]):after{content:""; display:inline-block; position:absolute; right:24px; top:50%; width:9px; height:9px; margin:-10px 0 0 10px; border-right:3px solid #313131; border-bottom:3px solid #313131; border-radius:1px; transform:rotate(45deg); transition:transform 0.25s ease-in-out;}
  #m_gnb > ul > li > a.on:not([target="_blank"]):after{margin-top:-2px; transform:rotate(-135deg);}
  #m_gnb > ul > li > .on{color:#1d51a3;}
  #m_gnb > ul > li div{display:none; width:100%; background:#f6f6f6;}
  #m_gnb ul ul li{border-top:1px solid #fff;}
  #m_gnb ul ul li:first-child{border-top-color:#e5e5e5;}
  #m_gnb ul ul li.has > a:after{content:""; display:inline-block; position:absolute; right:24px; top:50%; width:9px; height:9px; margin:-9px 0 0 10px; border-right:3px solid #313131; border-bottom:3px solid #313131; border-radius:1px; transform:rotate(45deg); transition:transform 0.25s ease-in-out;}
  #m_gnb ul ul li.on > a:after{margin-top:-3px; transform:rotate(-135deg);}
  #m_gnb ul ul li > a{position:relative; padding:9px 0 9px 26px; color:#555;}
  #m_gnb ul ul li > a[target="_blank"]:after{content:""; display:inline-block; vertical-align:middle; width:14px; height:14px; margin:-4px 0 0 6px; background:url(../img/common/ico_new.png) no-repeat 100% 0;}

  #m_gnb ul ul li.on > a{color:#101010;}
  #m_gnb ul ul ul{display:none; padding:7px 0 7px 28px; background:#e2e2e2;}
  #m_gnb ul ul ul li{border:none;}
  #m_gnb ul ul ul li a{position:relative; padding:3px 0 2px 10px; font-size:15px;}
  #m_gnb ul ul ul li a:before{content:""; display:block; position:absolute; top:12px; left:2px; width:3px; height:3px; background:#979797;}
  #m_gnb ul ul ul li a:hover{color:#004899; font-weight:500;}
  #m_gnb ul ul ul li a:hover:before{background:#004899;}
}
@media screen and (max-width:568px){
  #m_gnb{width:260px;}
}
/* popup layer */
.pop_layer{z-index:99; opacity:0; visibility:hidden; position:fixed; top:250px; left:50%; width:484px; min-width:286px; padding:0 0 100px; margin:0 0 0 -243px; background:#fff; box-sizing:border-box; box-shadow:0 0 5px rgba(0,0,0,0.15); border:5px solid #f1f1f1; word-break:keep-all;}
.pop_layer.on{opacity:1; visibility:visible;}
.pop_layer .txt{overflow-y:auto; overflow-x:hidden; max-height:740px; line-height:130%; padding:20px 41px 0 35px; font-weight:500; box-sizing:border-box;}
.pop_layer .fz26{padding:34px 0 47px 11px; line-height:100%; font-size:26px;}
.pop_layer .box_pink{padding:40px 10px 45px 15px; font-size:19px; background:#fff7f7;}
.pop_layer .box_pink span{display:inline-block; padding:0 0 0 10px; color:#0052cc;}
.pop_layer .box_pink li + li{padding-top:15px;}
.pop_layer .fz14.red{padding:20px 0 40px 28px; line-height:130%; font-size:14px; color:#fe2f2f;}
.pop_layer .fz14.red p + p{padding-top:10px;}
.pop_layer .btn_wrap{position:absolute; bottom:53px; left:0; width:100%; padding:0;}
.pop_layer .btn_wrap .btn{width:198px;}
.pop_layer .btn_wrap .btn + .btn{margin:0 0 0 5px;}
.pop_layer .btn{height:42px; line-height:40px; width:auto; margin:0; padding:0 15px; font-size:22px;}
.pop_layer .btn.gray{border-color:#ccc; color:#fff; background:#ccc;}
.pop_layer .btn.gray:hover{color:#aaa; background:#fff;}

@media screen and (max-height:1200px) {
    .pop_layer{top:50%; width:calc(100% - 40px); max-width:484px; font-size:15px; margin:0; transform:translate(-50%, -50%);}
    .pop_layer .txt{max-height:80vh;}
}
@media screen and (max-width:770px){
    .pop_layer .btn_wrap .btn{width:43%; font-size:17px;}
}
@media screen and (max-width:568px){
    .pop_layer{width:calc(100% - 34px);}
    .pop_layer .txt{padding:15px 7% 20px 7%;}
    .pop_layer .fz26{padding:20px 0 25px 5px; font-size:19px;}
    .pop_layer .box_pink{padding:30px 10px 30px 8%; font-size:17px;}
    .pop_layer .box_pink span{padding:0;}
    .pop_layer .fz14.red{padding:20px 0 30px 5px;}
}