@charset "utf-8";

.wrap{position:relative;  max-width:1200px; margin:0 auto;  /*overflow:hidden*버튼등 영역밝 가려짐떄문에 못씀*/ } /*전체 최대 넓이 조절 */

@media screen and (max-width:1200px) {
.wrap{margin:0 2% !important; max-width:100% ; }
}
@media screen and (max-width:640px) {
.wrap{margin:0 4% !important; }
}

/* header */
#header_wrap { position: fixed;  z-index: 2000 !important; width:100%; }
#header { 
  width: 100%;  
  height: 70px; 
  position: relative; 
  -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
	background:rgba(0,0,0,.4);
}

#header.logout, #header.logout.small{background:none;}
#header.logout .gnb, #header.logout .lnb, #header.logout .mobile_lnb{display:none;}

#header_wrap.sub_h header{
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
#header_wrap.sub_h header.black .mobile_menu_area{
  background: rgba(0, 0, 0, 0.75);
  border-bottom: 1px solid #e9e9e9;
}
#header_wrap.sub_h header.black .mobile_menu_area > li{
  border-top: 1px solid rgba(233, 233, 233, 0.2);
}
#header_wrap.sub_h header.black .mobile_menu_area li h3{
  color: rgba(255, 255, 255, 0.9);
}
#header_wrap.sub_h header.black .mobile_menu_area li ul li{
  color: #fff;
}
.sub_h .lnb > ul > li > a{
  color: #fff;
}
.sub_h .small .lnb > ul > li > a{
  color: #fff;
}
.sub_h .lnb > ul > li > a.on span{
  border-bottom-color: #fff;
}



#header h1 {position: absolute; z-index: 10000; padding: 18px 0px 0px 0px; left: 50%; margin-left: -600px;}
#header h1 a img {margin:0;}
#header .gnb {position:relative; z-index:11; text-align:right; }
#header .gnb a {display:inline-block;}
#header .gnb:after {clear:both; display:block; content:"";}

/*lnb*/
.lnb { position: absolute; z-index: 11 !important; top: 0px; left:50%; margin:0 0 0 0; width:450px; overflow:hidden; text-align:center; }
.lnb > ul > li { text-align: center; letter-spacing: -0.5px; position:relative; transition: 0.15s;}
.lnb > ul > li > a { padding: 0px 10px; display: block; font-size: 0px;  letter-spacing:0px ;  position:relative;}
.lnb > ul > li > a span {display:inline-block; margin:0 0; line-height:70px; font-size: 17px; white-space: nowrap; font-weight: 500;}

.lnb.menu2 {width:300px; left:57%;}
.lnb.menu2 ul li.lnb_1{width:50%;}

.lnb ul li.lnb_1 { float: left; position: relative; text-align: center; box-sizing: border-box;}
.lnb ul li.lnb_1:last-child {border-right:1px solid transparent;}
/*.lnb > ul:hover > li{ border-left:1px solid #eee}
.lnb > ul:hover > li:last-child{border-right:1px solid #eee}*/
.lnb > ul > li { text-align: center; letter-spacing: -0.5px; position:relative;}
.lnb > ul > li > a { padding: 0px 10px; display: block;   letter-spacing:0px ;  position:relative; color:#fff;}
.lnb > ul > li.on > a {font-weight:; color:#fff;}
.lnb > ul > li:hover {background:#940822; font-weight:500;}
.lnb > ul > li:hover.on a {color:#fff;}
.lnb > ul > li > a:hover{color:#fff;}
.lnb > ul > li:hover > a{color:#fff;}
/*.lnb > ul:hover > li > a.on span {border-bottom:3px solid transparent;}*/

.lnb ul li.lnb_1 { float: left; position: relative; width:33.33%;}
.lnb ul li.lnb_1 ul {display: none;  position: relative; top:0px; height:420px; clear: both; overflow:hidden; padding-bottom: 18px;}
.lnb ul li.lnb_1 ul li a { font-size: 15px; display: block; padding: 3px 5px; color: #fff; line-height:1.5em; font-weight:300; }
.lnb ul li.lnb_1:hover ul li a {color:#fff;}
.lnb li.on ul li a:hover { color: #fff; font-weight:600; }   /*오버색상*/
.lnb li.lnb0 { width: 124px; text-align: center;}
.lnb li.lnb1 { width: 124px; text-align: center }
.lnb li.lnb2 { width: 124px; text-align: center }
.lnb li.lnb3 { width: 124px; text-align: center }
.lnb li.lnb4 { width: 124px; text-align: center }
.lnb li.lnb5 { width: 124px; text-align: center }

.bg_navi { background: rgba(0, 0, 0, .4); top: 70px; width: 100%; height: 0px; overflow: hidden; position: absolute; z-index: 10;}
.bg_navi li.bgn { left: 50%; top: 0px; width: 1000px; padding-top: 10px; margin-left: -500px; position: absolute; z-index: 10000; }
.bg_navi li.bgn p.lnb_tit { font-size: 14px; font-weight:600; margin-bottom:10px; display:none }
.bg_navi li.bgn p.lnb_img {  padding-top: 0px; width: 250px; font-size: 12px; letter-spacing: -1px; display:none }
.bg_navi li.bgn p.lnb_img img { margin-bottom: 10px; }
.bg_navi li.bgn p.text { float: left; letter-spacing: -1px; color: #666; line-height:normal }

.mobile_lnb {display: none;}


#header.small {height:50px; background:rgba(0,0,0,.4);}
#header.small h1 {padding:12px 0px 0px 0px;}
#header.small h1 a img {width:210px;}
#header.small .gnb .sitemap {    margin-top: 7px;}
#header.small .lnb > ul > li > a span {line-height:50px;}
#header.small .bg_navi { top: 50px;}

.group_link{
  position: absolute;
  right: 62px;
  top: 19px;
 /* background: url(../../images/web/common/link.png) no-repeat 63px center;*/
  border: 1px solid #fff;
  color: #fff;
  padding: 0 0.6rem 0 0.6rem;
  font-size: 0.9rem;
  line-height: 2.2;
}
.group_link:hover{
  text-decoration: underline;
}
.small .group_link{
  top: 9px;
}
.group_link_m{display: none;}

.lan_sel{
  position: absolute;
  right: 56px;
  top: 24px;
}
.lan_sel > a{
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  background: url(../../images/web/common/lan_down.png) no-repeat 60px 10px;
  padding: 0 20px 0 0;
}
.lan_sel > a.open{
  transition: 0.5s;
  background: url(../../images/web/common/lan_up.png) no-repeat 60px 10px;
}
.lan_sel ul{
  display: none;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  margin-top: 5px;
}
.lan_sel ul li a{
  display: block !important;
  padding: 5px 0;
  font-size: 12px;
  transition: 0.3s;
  letter-spacing: 0;
  background:#940822;
}
.lan_sel ul li:first-child{
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.lan_sel ul li:hover a{
  background:#b82126;
}
.top_fix .lan_sel{
  margin-top: 15px;
}
.lan_sel_m{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.small .lan_sel{
  top: 14px;
}
.mobile_menu_area .lan_sel_m a{
  display: inline-block;
  text-align: center;
  margin: 0 3px;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #bbb;
}


@media screen and (max-width:1200px){
  #header h1{
    left: 0;
    margin-left: 2%;
  }
}

@media screen and (max-width:1160px) {
.lnb{display:none;}

#header_wrap { height: 50px}
#header { width: 100%; margin: 0 auto; height: 50px; position:relative; z-index:2000000 !important;}
#header .main_header {height:50px; border-bottom:0px solid #e9e9e9;}
#header h1 { padding: 12px 0px 0px 0px;}
#header h1 a img {width:196px;}
#header.small h1 a img{width: 196px;}
#header.small h1{padding: 12px 0px 0px 0px;}

#header .gnb a.sitemap {display:none;}
#header .gnb a img {width:34px;}

.mobile_lnb { display: block; position: absolute; top: 0px; right:0; width:50%; text-align:right ;}
.mobile_lnb a.menu_btn{ padding:0 2% 0 0 ; display:inline-block; height:50px; }
.mobile_lnb a.menu_btn img{ margin:12px 5px; }

.mobile_menu_area{ display:block; position:fixed; width:100%; height:100%; top:0; left:0; overflow:hidden; z-index:100011999 !important;}
.mobile_menu_area .my_menu {position:relative; z-index:100021 !important; overflow:hidden; overflow-y:scroll; width:300px; height:100%; background:#343434; box-shadow:2px 0 8px rgba(0,0,0,.35); position:fixed; top:0; right:0; transition: 1s; margin-right:-300px;}
.mobile_menu_area .my_menu .bottom { text-align:left; font-size:13px; color:#b7b7b7; padding:15px 25px; margin:25px 0; border-top:1px solid #444; border-bottom:1px solid #444;}
.mobile_menu_area .my_menu .menu_close {}
.mobile_menu_area .my_menu .menu_close img {width:26px; padding:12px;}
.mobile_menu_area .my_menu .bottom p.top {font-size:16px; color:#fff; line-height:30px; font-weight:500;}
.mobile_menu_area .my_menu .bottom a.contact {color:#1ab66f; display:block;font-size:24px; line-height:1.3em;margin:8px 0 2px 0;}
.mobile_menu_area .my_menu .bottom p span {padding:0 6px;}
.mobile_menu_area .my_menu .bottom a.inquiry {background:#18a474; color:#fff; padding:5px 20px; font-size:14px; margin-top:10px; display:inline-block;}
.mobile_menu_area .dim {position:relative; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:2002 !important;}
.mobile_menu_area > li { clear:both; padding:15px 2%; border-top:1px solid #e9e9e9; overflow:hidden}
.mobile_menu_area li h3{ display:block; text-align:left; margin:0; padding:0; font-size:16px; padding:8px 25px; font-weight:500; color:#fff; letter-spacing:0px; }
.mobile_menu_area li ul{ text-align:left;}
.mobile_menu_area li ul li {margin-left:35px; padding:0}
.mobile_menu_area li ul li:first-child {display:block;}
.mobile_menu_area li ul li a{ font-size:14px; padding:3px 5px; display:block; color:#a5a5a5; white-space: nowrap;}
.mobile_menu_area li.menu_close{ text-align:left ; background:#fff; overflow:hidden; }
.mobile_menu_area li.menu_close a{ border-bottom:0;  }
.mobile_menu_area li.menu_close img{ margin:0 10px; float:right}
.mobile_menu_area li a.call {   width:auto;  padding: 10px 10px; font-size:16px;   text-align:left; font-weight:600 ; color:#fff}
.mobile_menu_area li a.call span{ color:#fff}

.lan_sel{top: 14px; right: 50px; display:none;}

.group_link{top: 9px; display: none !important;}
}

@media screen and (max-width:640px) {
  .mobile_lnb a.menu_btn{ padding:0 4% 0 0 ; }
  .mobile_menu_area > li {  padding:10px 3%; }
  .mobile_menu_area li ul{ margin-left:20px;   text-align:left;}
  .mobile_menu_area li h3{padding:7px 20px; font-size:15px; width:100%;}
  .mobile_menu_area li ul li{ width:50%; padding:0 0; margin:0}
  .group_link_m{
    display: block;
    position: absolute;
    bottom: 12%;
    left: 0%;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .group_link_m a{
    display: block;
    white-space: nowrap;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #eee;
    font-size: 1rem;
    line-height: 3;
    text-align: center;
  }
  .group_link_m a img{
    margin-left: 4px;
  }
}

@media screen and (max-width:425px){
  .mobile_menu_area .my_menu{width: 250px;}
  .group_link_m{
    bottom: 14%;
  }
}
@media screen and (max-width:375px){
  #header h1{
    padding: 12px 0px 0px 0px;
  }
  #header.small h1{
    padding: 12px 0px 0px 0px;
  }
  #header h1 a img{
    width: 190px;
  }
  #header.small h1 a img{
    width: 190px;
  }
}



/* Footer */
#footer {position: relative; clear:both; background:#333; padding:0 0 0 0;}
#footer .shortcut {position:relative; overflow: hidden; width:100%; background: #dfdfdf;}
#footer .shortcut:after {content:''; display:block; clear:both;}
#footer .shortcut .wrap{}
#footer .shortcut .menu{display: inline-block;}
#footer .shortcut .menu a {
  display:inline-block; line-height:48px; color: #666;     font-weight: 500;
  font-size: 15px;     white-space: nowrap;    padding: 0 25px;
}
#footer .shortcut .menu a:first-child{color:#940822;}
#footer .shortcut .menu span.dot{color:rgba(255, 255, 255, 0.2); margin:0 6px; }
#footer .shortcut .sns {width:40%; float:right; text-align:right; line-height:48px;}
#footer .shortcut .sns a {line-height:48px; vertical-align:middle; text-indent:-9999px; opacity:; color:transparent; display:inline-block;  margin:0 0 0 17px; background:url("../../images/web/common/footer_sprite.png") no-repeat;}
#footer .shortcut .sns a.blog {width:15px; height:20px; background-position:-77px center;}
#footer .shortcut .sns a.youtube {width: 20px; height: 20px; background-position: -180px center;}
#footer .shortcut .sns a.facebook {width: 10px; height: 20px; background-position: -118px center;}
#footer .shortcut .sns a.instagram {width: 19px; height: 20px; background-position: -35px center;}



#footer .info { padding:30px 0; font-size:15px;}
#footer .info .wrap {position:relative;}
#footer .info .wrap:after {content:''; display:block; clear:both;}

#footer .info .cs_center {width:33%; float:left; color:#ddd; letter-spacing:.5px;}
#footer .info .cs_center .cs_tit {font-weight:600; margin:0 0 16px 0; }
#footer .info .cs_center .cs_time {font-weight:100; font-size:13px;}
#footer .info .cs_center a.contact {display:block; margin:0 0 8px 0; font-size: 30px; font-weight:600; color:#1ab66f;}

#footer .info .address {width:35%; float:left;}
#footer .info .address p {line-height:1.55em; color: rgba(255, 255, 255, 0.6);}
#footer .info .address p span {padding:0 8px;}
#footer .info .address p span.com_point {font-weight:500; color:rgba(255, 255, 255, 0.8); padding: 0 12px 0 0;}
#footer .info .address p span.line {color:rgba(255, 255, 255, 0.15); font-weight:200;}

#footer .info .address p.copy {letter-spacing:1px; padding:8px 0 0 0; font-size:12px; color:rgba(255, 255, 255, 0.35);}
#footer .info .address p.copy span {padding:0; font-weight:600;}

#footer .btn_top {position:fixed; width:54px; height:54px; right:10px; bottom:10px; z-index:9999 !important;}

#footer .kakao_icon {position:fixed; width:50px; height:50px; right:17px; bottom:75px; z-index:9999 !important;}
#footer .inquiry_icon {position:fixed; width:50px; height:50px; right:17px; bottom:132px; z-index:9999 !important;}

/* 패밀리사이트 */
.family_site{
  float: left;
  position: relative;
}
.family_site button{
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  letter-spacing: -1px;
  width: 167px;
  padding: 12px 80px 12px 20px;
  background: url(../../images/web/common/fam_select_btn.jpg) no-repeat #555 90%;
  cursor: pointer;
}
.family_site button.active{
  background-image: url(../../images/web/common/fam_select_btn_up.jpg);
}
.family_site ul{
  display: none;
  position: absolute;
  bottom: 44px;
  left: 0;
  right: 0;
  background: #676767;
  color: #d2d2d2;
  z-index: 1;
}
.family_site li{
  padding: 10px 20px;
  transition: 0.3s;
}
.family_site li a{
  font-size: 14px;
  display: block;
}
.family_site li:hover{
  color: #e8e8e8;
  background: #5b5b5b;
}

#footer .right_area{
  float: right;
  /*width: 29%;*/
  position: relative;
}
/*.truth_inq{
  position: absolute;
  left: -15%;
  top: 0;
}*/
.truth_inq button{
  background: #235a51;
  color: #eee;
  padding: 0.6rem 1.2rem;
  font-size: 15px;
  border: none;
  outline: none;
  cursor: pointer;
  letter-spacing: -1px;
  font-weight: 500;
  border-radius: 30px;
}

@media screen and (max-width:1200px){
  .truth_inq{
    left: -55%;
  }
}
@media screen and (max-width:1080px) {
#footer .info .cs_center .cs_inner {margin:0 30px 0 0;}
}
@media screen and (max-width:900px) {
  #footer .shortcut {border-bottom: 0px;}
  #footer .shortcut .wrap {margin:0 0 !important; text-align:center;}
  #footer .shortcut .menu {width:96%; text-align:; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin:0 2%}
  #footer .shortcut .sns {width:96%; text-align:left; margin:30px 2% 20px 2%; line-height:20px;}
  #footer .shortcut .sns a {line-height:20px; margin:0 10px 0 0;}

  #footer .info .cs_center {width:100%;  float: none;  text-align: center;}
  #footer .info .cs_center .cs_inner {border-right:0px; margin:0 0 20px 0;}
  #footer .info .cs_center .cs_tit {margin:0 0 10px 0; }
  #footer .info .address {width:100%;float: none;text-align: center;}
  .family_site{
    width: 167px;
    margin: 15px auto 0;
  }
  #footer .right_area{
    float: none;
    margin: auto;
    width: 344px;
    text-align: center;
  }
  .truth_inq{
    position: static;
    /*margin-top: 20px;*/
  }
}
@media screen and (max-width:860px){
  #footer .shortcut .menu a{line-height: 40px; font-size: 13px; padding: 0 15px;}
  #footer .info{font-size: 13px;padding: 20px 0;}
  #footer .info .address p.copy{font-size: 10px;}
  #footer .info .cs_center .cs_inner{margin: 0 0 13px 0;}
  #footer .info .cs_center .cs_inner img{width: 175px;}
  .family_site button{font-size: 13px;}
  .family_site ul{bottom: 41px;}
  .truth_inq button{
    font-size: 13px;
  }
}
@media screen and (max-width:640px) {
#footer .shortcut .menu {width:92%; margin:0 4%}
#footer .shortcut .menu span.dot {margin:0 2px; }
#footer .shortcut .sns {width:92%; margin:30px 4% 20px 4%;}
#footer .info .cs_center a.contact {margin:0 0 6px 0; font-size: 24px;}
#footer .info .address p span {padding:0 6px;}
#footer .info .address p.name {padding:0 0 6px 0;}
#footer .info .address p.copy {letter-spacing:0px; padding:6px 0 0 0;}
}
@media screen and (max-width:540px){
  #footer .shortcut .menu a{padding: 0 10px;}
  #footer .info .cs_center .cs_inner img{width: 175px;}
}
@media screen and (max-width:460px){
  #footer .shortcut{display: none;}
}





/* 성적서 진위 확인 문의 팝업 레이어 */
.layer_wrap2 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
}
.layer_wrap2 .dimBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}
.layer_wrap2 .pop-layer {
  display: block;
  position: absolute;
  top: 40%;
  left: 50%;
  width: 400px;
  height: auto;
  z-index: 10;
  margin-left: -200px;
}
.truth_inq_layer{
  text-align: center;
  background: #fff;
  padding: 3.5rem 0 3rem;
  font-size: 18px;
  line-height: 1.6;
  position: relative;
}
.truth_inq_layer a{
  position: absolute;
  right: 5%;
  top: 10%;
}
.truth_inq_layer a img{
  width: 20px;
}

@media screen and (max-width:425px){
  .layer_wrap2 .pop-layer{
    width: 90%;
    margin-left: -45%;
  }
  .truth_inq_layer{
    font-size: 16px;
  }
}

/* 성적서 진위 확인 문의 팝업 레이어 */
.layer_wrap3 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
}
.layer_wrap3 .dimBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}
.layer_wrap3 .pop-layer {
  display: block;
  position: absolute;
  top: 40%;
  left: 50%;
  width: 400px;
  height: auto;
  z-index: 10;
  margin-left: -200px;
}
.truth_inq_layer{
  text-align: center;
  background: #fff;
  padding: 3.5rem 0 3rem;
  font-size: 18px;
  line-height: 1.6;
  position: relative;
}
.truth_inq_layer a{
  position: absolute;
  right: 5%;
  top: 10%;
}
.truth_inq_layer a img{
  width: 20px;
}

@media screen and (max-width:425px){
  .layer_wrap3 .pop-layer{
    width: 90%;
    margin-left: -45%;
  }
  .truth_inq_layer{
    font-size: 16px;
  }
}













/*Sub Visual */
.sub_visual {position:relative; overflow:hidden; height:270px; transition:all .1s linear; z-index:8;}
.sub_visual .visual_dot {position:absolute;left:0;top:0; z-index:4; width:100%;height:100%; background: url("../../images/web/common/visual_dot.png") repeat; }
.sub_visual .visual_img {display:block;position:absolute; z-index:3; width:2000px; height:340px; margin:0 0 0 -1000px; left:50%}
.sub_visual .visual_img img{
 animation:ani_slide1 4s ease-in-out;
  display:block;
  margin:0 auto; 
  z-index:8;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@keyframes ani_slide1{
  0%{margin-top:0px}
  50%{margin-top:-100px}
  100%{margin-top:0}
}

.sub_visual .wrap{ 
  position:absolute;
  left:0;
  top:0;
  width:100%; 
  height:100%; 
  z-index:100; 
  margin:0 !important;
  max-width: 100%;
}
.sub_visual .text{ 
  position: relative;
  left: 0;
  top: 50%;
  text-align: center;
  width: 1200px;
  margin: 0 auto;
}
.sub_visual h2 {    
  letter-spacing: 0px; 
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  font-size: 44px;
  width: 78.4%;
  float: right;
}
.sub_visual p {padding:0;  letter-spacing:4px; font-weight:600; font-size:12px; color:#fff; }
.sub_visual p span {border-top:1px solid rgba(0, 0, 0, 0.8); display:;}
.sub_visual p.line {width:1px; height:52px; background:#fff; margin:0 auto; margin-top:40px;}

@media all and (max-width:1200px) {
  @keyframes ani_slide1 {
    0% {
      margin-top: 0px
    }

    50% {
      margin-top: -50px
    }

    100% {
      margin-top: 0
    }
  }

  .sub_visual{
    height: 240px;
  }
  .sub_visual .visual_img img {
    transform: translateY(0%);
    top: auto;
    bottom: 0;
  }

  .sub_visual h2 {
    font-size: 36px;
  }

  .sub_visual p {
    margin: 0 0 0 0;
  }

  .sub_visual p.line {
    width: 1px;
    height: 32px;
    margin-top: 20px;
  }

  .sub_visual .visual_img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
  }

  .sub_visual .text{
    width: 96%;
    top: 52%;
    margin: 0 2%;
  }
}
@media all and (max-width:1080px) {
  .sub_visual h2 { font-size: 32px;}
}
@media all and (max-width:1050px){
  .sub_visual{height: auto;}
  .sub_visual h2{width: 100%;}
  .sub_visual .visual_img{height: auto;    position: static;}
  .sub_visual .visual_img img{position: static; animation: none;}
}
@media all and (max-width:640px) {
  .sub_visual .text{top: 54%;}
  .sub_visual h2 { font-size: 24px; letter-spacing:5px}
}



/*sub_nav*/
.left_menu{
  position: absolute;
  left: 50%;
  top: 133px;
  width: 100%;
  margin-left: -600px;
}

.sub_menu_title{
  color: #fff;
  /* background: #d7131a; */
  background: #940822;
  padding: 2rem 2.5rem;
}
.sub_menu_title h3{
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -1px;
}
.sub_menu_title p{
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
  margin-top: 8px;
}

.subdepth {
  position:relative; 
  z-index:80; 
  width: 18.4%;
  -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.subdepth .bgn {
  position: relative;
  z-index: 81;
  background: #f4f4f4;
  padding: 1rem 0;
}

.subdepth .bar{
  display: block;
  width: 5px;
  height: 25px;
  /* background: #ed1c24; */
  background: #940822;
  position: absolute;
  left: 0;
  top: 0;
}

.subdepth .bgn span {
  display: block; 
}
.subdepth .bgn span a {
  display: block;
  white-space: nowrap;
  font-size: 16px;
  color: #444;
  font-weight: 500;
  padding: 1rem 2.6rem;
}
.subdepth .bgn span a:hover {color: #940822;}
.subdepth .bgn span a.on {
  font-weight: 600;
  color:#940822;
  position: relative;
}
.subdepth .bgn span a.on::after{
  content: '';
  display: block;
  position: absolute;
  background: url(../../images/web/sub/menu_arr.png) no-repeat;
  width: 17px;
  height: 20px;
  right: -17px;
  top: 15px;
}

.mobile_sub_nav {display:none;}

@media all and (max-width:1200px) {
  .left_menu{
    margin: 0 !important;
    left: 0;
    top: 107px;
  }
  .sub_menu_title{
    padding: 2rem;
  }
  .sub_menu_title h3{
    font-size: 22px;
  }
  .subdepth{
    margin-left: 2%;
  }
  .subdepth .bgn{
    padding: 0.8rem 0;
  }
  .subdepth .bgn span a{
    padding: 0.8rem 1.6rem;
  }
}
@media all and (max-width:1050px){
  .left_menu{
    display: none;
  }
  .mobile_sub_nav{ display:block; z-index:200 !important; width:100%;}
  .mobile_sub_nav{ height:40px; text-align:left; text-indent:15px;}

  .mobile_sub_nav > ul > li{ float:left; height:40px; line-height:40px; display:inline-block; box-sizing:border-box;}
  .mobile_sub_nav > ul > li:first-child{ border-left:0px solid #dddddd;}
  .mobile_sub_nav ul > li.home{  background:url("../../images/web/sub/path_home_white.gif") #940822  no-repeat 50% 50%;  text-indent: -9999px; width:10%;  }
  .mobile_sub_nav ul > li.home a{ display:block; width:100; height:100%;}
  .mobile_sub_nav ul > li.nav_gnb{ width:30%; background: #dfdfdf; color: #222;}
  .mobile_sub_nav ul > li.snb_area{ width:60%; z-index:13 !important;background: #f4f4f4;}

  #snb_menu{ position:relative}
  #select_open { display:none; width:100%;  top:41px;position: absolute;  background:#f4f4f4;     border-top: 1px solid #ddd; border-left:1px solid #e9e9e9 ;border-bottom:1px solid #e9e9e9 ; border-right:0px solid #e9e9e9; margin-top:-1px; z-index:31; padding:10px 0 }
  #select_open .open li { clear: both; margin: 0; float:left; width:100%; }
  #select_open .open li a { display: block; height:30px;  line-height:32px; color:#555;}
  #select_open .open li a.on {font-weight:600;}
  #select_open .open li a:hover {background:#eee;}
  #snb_menu .select { width: 100%; }
  #snb_menu .select p { width: 100%;   border: 0;   height:40px; line-height:40px;cursor:pointer; background:url("../../images/web/sub/snb_click.png") no-repeat 95% 2px;  font-size:inherit;}

  .mobile_depth {display:block; border-bottom:1px solid #ddd; background:url("../../images/web/common/arrow_ddd.jpg") no-repeat center center; }
  .mobile_depth:after {clear:both; display:block; content:"";}
  .mobile_depth ul li {width:50%; float:left; font-size:14px;}
  .mobile_depth ul li .menu_item {line-height:40px; margin:0 20px; cursor:pointer; background:url("../../images/web/sub/snb_down.gif") no-repeat 97% center;}
  .mobile_depth ul li .sel_open {display:none; position:absolute; z-index:20; background:#fff; width:48%; margin:1px 0 0 1%; border-left:1px solid #e9e9e9; border-right:1px solid #e9e9e9;}
  .mobile_depth ul li .sel_open ul.open li {width:100%;}
  .mobile_depth ul li .sel_open ul.open li a {display:block; padding:0 20px; line-height:35px; border-bottom:1px dashed #e9e9e9;}
  .mobile_depth ul li .sel_open ul.open li:last-child a {border-bottom:1px solid #e9e9e9;}
}
@media all and (max-width:640px){
  .mobile_sub_nav {font-size:14px;}
  .mobile_depth { border-bottom:0px solid #ddd; background:none; }
  .mobile_depth ul li {width:100%; border-bottom:1px solid #ddd;}
  .mobile_depth ul li .sel_open {width:98%; margin:1px 0 0 1%; border-left:1px solid #ddd; border-right:1px solid #ddd;}
  .mobile_depth ul li .sel_open ul.open li {width:100%; border-bottom:0px; }
}







/* Sub Layout */
.sub_container {position:relative; z-index:1; min-height:800px;    float: right; width: 78.4%;    padding-bottom: 4rem;}
.sub_container.none_visual {padding:30px 0 70px 0;}
.sub_contents {z-index:10; position:relative;}

@media screen and (max-width:1440px){
  .sub_container{overflow: hidden;}
}
@media screen and (max-width:1050px){
  .sub_container{width: 100%;float: none;    padding-top: 2rem;}
}
@media screen and (max-width:640px){
.sub_container {padding:32px 0;}
.sub_container.none_visual {padding:30px 0;}
}

.sub_contents .sub_video {display:none; width:100%;}
.sub_contents .sub_video video {width:100%;}

@media screen and (max-width:640px){
.sub_contents .sub_video {display:block;}
}


/* title */
.tit_area {position:relative; z-index:19 !important ; padding:0 0 20px 0;}
.tit_area:after {clear:both; display:block; content:"";}
.tit_area h2 {position: relative; color: #222; width:70%; float:left; font-size:36px; font-weight:500;}

.path {position:relative; font-size:13px; color:#999; float:right; text-align:right; line-height:23px; width:30%; margin:25px 0 0 0;}
.path span.home{  background:url(../../images/web/sub/path_home.gif) no-repeat left center;  display:inline-block; width:15px; text-indent: -9999px !important; color:rgba(255,255,255,0);}
.path span.v_line{ background:url(../../images/web/sub/path_arr.gif) no-repeat 50% 50%; display:inline-block; width:15px; height:11px; opacity:0.5;}
.path span.last {color:#555;}

@media all and (max-width:1200px) {
.tit_area h2 {font-size:30px;}
.path {margin:18px 0 0 0;}
}
@media all and (max-width:1050px) {
  .tit_area{display: none;}
}
@media all and (max-width:640px) {
.tit_area {padding:0 0 20px 0;}
.tit_area h2 {font-size:24px; width:100%; text-align:center;}
.path {display:none;}
}

.sitemap{    margin-top: 16px;} 
.sitemap img{width:36px;}

/* Sitemap Layer */
#sitemap{ display:none; position:fixed; width:100%;  height:100%; overflow:hidden;  z-index:100000000; }
#sitemap .back {position:absolute; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:100000001; cursor:pointer;}

#sitemap .btn_close {position: absolute; top:20px; right:20px; z-index:100000003; }
#sitemap .btn_close img{ padding:10px}
#sitemap #sitemap_box{position:relative; display:table; vertical-align:; width:100%;  text-align:;  }
#sitemap #sitemap_box #sitemap_con {position:relative;width:1200px; height:920px;margin:0 auto; overflow:hidden; z-index:100000002;}

#sitemap #sitemap_box #sitemap_con .layer_area {width:100%; position:absolute; top:50%; transform:translate(0, -50%); color:#fff !important;}

ul.sitemap_list {margin:0 0 0 -40px;}
ul.sitemap_list a {display:block;}
ul.sitemap_list:after {clear:both; display:block; content:"";}
ul.sitemap_list li {float:left; width:25%;}
ul.sitemap_list li dl {margin:0 0 0 40px;}
ul.sitemap_list li dl dt a {border-bottom:1px solid rgba(255,255,255,.5); font-size:27px; font-weight:600; line-height:55px;}
ul.sitemap_list li dl dd {margin:20px 0 0 0;}
ul.sitemap_list li dl dd p {line-height:40px; font-size:20px; font-weight:300;}


@media all and (max-width:1300px) {
#sitemap #sitemap_box #sitemap_con {width:100%; }
#sitemap #sitemap_box #sitemap_con .layer_area {width:96%; margin:0 2%;}

ul.sitemap_list {padding:0 2%;}
ul.sitemap_list li dl dt a {font-size:20px; line-height:49px;}
ul.sitemap_list li dl dd {margin:12px 0 0 0;}
ul.sitemap_list li dl dd p {line-height:30px; font-size:17px;}
}
@media all and (max-width:640px) {
#sitemap #sitemap_box #sitemap_con .layer_area {width:92%; margin:0 4%;}
ul.sitemap_list {margin:0 0 0 -20px;}
ul.sitemap_list li dl {margin:0 0 20px 20px;}
ul.sitemap_list li dl dt a {font-size:20px; line-height:41px;}
ul.sitemap_list li dl dd {margin:10px 0 0 0;}
ul.sitemap_list li dl dd p {line-height:24px; font-size:15px;}
}
@media all and (max-width:480px) {
#sitemap #sitemap_box #sitemap_con .layer_area {transform:translate(0, -100%);}
ul.sitemap_list li {width:50%;}
ul.sitemap_list li dl dt a {font-size:16px; line-height:37px;}
ul.sitemap_list li dl dd {margin:10px 0 0 0;}
ul.sitemap_list li dl dd p {line-height:24px; font-size:14px;}
}

.select_area > a{border:2px solid #b82126;}
.select_area > a::after{content:'▼'; font-size:15px; color:#b82126; position:absolute; top:16px; right:16px;}
.select_area > a ol li span, .select_area > ul li a ol li span, .useinfo_wrap .list_style li strong, .useinfo_wrap .list_style li strong::after, .product_list dd small, .intro_box a:hover .go{color:#940822;}
.list_style li::before, .progs, .intro_box a:hover .arrow{background: #940822;}
.screen{background:#940822;}

/* 210204 */

.subdepth .bgn span a p.new{display:inline-block; position:absolute; padding:0; margin:1px 4px 0; background:#b82126; color:#fff; font-weight:400; width:19px; height:19px; line-height:19px; border-radius:50%; font-size:14px; font-family:'Roboto'; text-indent:4px;}
.sub_menu li a p.new{display:inline-block; position:absolute; padding:0; margin:7px 4px 0; background:#b82126; color:#fff; font-weight:400; width:18px; height:18px; border-radius:50%; font-size:10px; font-family:'Roboto'; line-height:18px; text-indent:5px;}

.scroll_wrap p.tit{color:#940822;}
.scroll_wrap p.tit::before{background: #b82126;}
.scroll_wrap p.tit::after{background: #b82126;}

.room_wrap article.board{border-top:4px solid #b82126;}

/* 210521 */
.lnb ul li.lnb_1.on ul ol{background:#b82126;}
.lnb ul li.lnb_1 ul ol{overflow:hidden; padding-top:4px; background:rgba(0, 0, 0, .8); box-shadow:inset 0 5px 3px rgb(0 0 0 / 2%);}
.lnb ul li.lnb_1 ul ol li{}
.lnb ul li.lnb_1 ul ol li a{font-size:13px;}

.subdepth .bgn span.sub a{background:#e8e8e8; padding:0.8rem 2.6rem 0.8rem 3.4rem; font-size:15px; position:relative;}
.subdepth .bgn span.sub a:before{content: ''; display: block; position: absolute; left: 2.6rem; top: 1.4rem; width: 3px; height: 3px; background: #bbb;}
.subdepth .bgn span.sub.first a{box-shadow:inset 0 5px 3px rgb(0 0 0 / 2%);}