@charset "UTF-8";
.sitemap .lang{display:none}

.mobile-title{display:none}
.mobile-title a{display:none}

@media (max-width: 1500px) {
	.lang {
    right: 70px;
}
}
@media (max-width: 1440px) {
	.gnb .logo {
	    left: 20px;
	}
}
@media (max-width: 1400px) {
	body{width:100%;min-width:100%}
	
	.gnb{width:100%;min-width:100%}
	.gnb .top{width:100%}
	
	.gnb .logo{left:20px;}
	.lang{right:70px}
	
	.gnb .menu{width:calc(100% - 400px)}
	.gnb .menu .menus li{padding:0px 20px}
	.gnb .menu .menus .depth2 .submenus{width:100%}
	.gnb .menu .menus .depth2{padding:0px 20px}
	.gnb .menu .menus .depth2 .submenus .title{width:250px;margin-right:30px}
	.gnb .menu .menus .depth2 .submenus .submenu li a{line-height:1.2}
	
	#sitemap .sitemap{width:100%}
	#sitemap .sitemap .depth2 .submenus .submenu li{line-height:1.2;height:auto;margin-bottom:20px}
	#sitemap .sitemap .logo{left:20px}
	#sitemap .sitemap .close{right:20px}
	#sitemap .sitemap ul.menu-n{margin-top:0px;margin-right:20px}
	
	.visual .ment{width:100%}	
	
	.sub .location{width:100%;}	
	.sub .contents {width: 100%; margin: auto;padding: 80px 20px;}
	
	
	.quick{width:0px;overflow: visible;height:100%}
	.quick .selector{width:60px;width: 60px;position: absolute;left: -60px;top: 0px;}
	.quick .selector a{width:60px;height: 60px;background-size: 20px !important;}
	.quick .selector a.product{height:285px}
	.quick .selector a.product p{height:60px}
	.quick .selector a.product p{line-height:60px;left:30px}
	.quick .selector .product > p:before{font-size:16px}
	.quick .selector .q:before{display:none}
	.quick .selector .chat:before{display:none}
	
	.quick .products {height: 100%; width: 100%; background-color: #393f77; z-index: 300; top: 0; right: -100%; transition: .2s;}
	
	.quick.active{width:800px}
	.quick.active .products {right: 0;left: auto;}  
	.quick.active .products{width:100%}
   .scrolled .quick .selector a.gotop{height:60px;width:60px}
	.footer .copyright{width:100%}
	.footer .gotop{width:60px;height:60px;top:-60px}
	.footer {padding:0px 30px}
	
	#section07 .newsletter{width:100%}
	#section07 .newsletter .ment{width:auto;padding:0px 30px;padding-right:60px;}
	
	#section05 .list{max-width:100%;width:100%}
	#section05 .list li .article{height:470px}
	
	#section06 .notice .single .more-btn{right:10px}
	#section06 .notice{padding-right:15px;}
	#section07 .newsletter .guide .text{margin-left:85px;}
	#section07 .newsletter .form .inputs > a{margin-top:10px;display:inline-block}

	#section08 .video{width:100%}
	#section08 .video .videoIframe{width: calc(100% - 450px);}	
}
@media (max-width: 1280px) {
	#section07 .newsletter .ment{float:none}
	#section07 .newsletter .form{width:100%;padding:0px 30px;margin-top:10px;padding-right:75px}
	#section07 .newsletter .form .inputs:after{content:'';display:block;clear:both}
	#section07 .newsletter .form .inputs > input:nth-child(1){width:28%;margin-right:2%;float:left}
	#section07 .newsletter .form .inputs > input:nth-child(2){width:36%;margin-right:2%;float:left}
	#section07 .newsletter .form .inputs > input[type=button]{width:32%;margin-right:0px;float:left}
	
	
}
@media (max-width: 1080px) {

	.gnb .menu{height:100px}
	.gnb .menu .menus li > a.depth1{height:100px;line-height:100px;font-size:20px}
	.gnb .top{height:100px}
	.gnb.hover:before{top:100px}
	.gnb .menu .menus .depth2{top:101px;}
	
	.sub .visual{height:380px}
	.sub .visual .ment h1{font-size: 43px;}
	.visual .ment{padding-top:105px}
	
	.sub .location > ul > li{height:60px;line-height:60px}
	.sub .location > ul > li.nav .depth a.holder{height:59px}
	
	.sub #section07 .newsletter .ment{padding-right:0px}
	.sub #section07 .newsletter .ment h2, .sub #section07 .newsletter .ment p{display:inline-block}
	
	#section07{padding:20px 0px;padding-bottom:30px}
	#section07 .newsletter .ment{width:100%;padding-bottom:10px}
	#section07 .newsletter .form{float:none;}
	
	.footer .copyright{padding:30px 0px;display:block}
	.footer .copyright .logo{margin-bottom:20px}
	.footer .copyright .legal .copy{margin-top:20px}
	
	.footer .copyright .family{width:100%}
	.footer .copyright .family .sns{position:absolute;bottom:30px}
	.footer .copyright .family .sns a.facebook{margin-left:0px}
	
	
	
	
}

@media (max-width: 900px) {
	.gnb .lang{display:none}
	.sitemap .lang{display:block}
   .sitemap .lang .lang-layer .xi-angle-down{margin-left:5px}
   .sitemap .lang .lang-layer > a{color:#000}
   .sitemap .lang .lang-layer > a::before {background: url(../images/icon-global-b@2x.png) no-repeat left center; display: inline-block; background-size: auto 20px; margin-right: 8px;}
   .sitemap .lang{top:0px;    transform: translateY(0px);right:50px}
   .sitemap .lang .lang-layer > a{height:56px;line-height:56px;}
   #sitemap .sitemap ul.menu-n{margin-right:0px}
   
	.quick.active{width:500px}
	.quick.active .products{width:500px}
	.quick .products ul li{width:50%}
	.quick .products ul li:nth-child(3n+1){clear: unset;}
	.quick .products ul li:nth-child(2n+1){clear:both;}
	
	#section07{padding-bottom:62px}
	#section07 .newsletter .form .inputs > a{position:absolute;bottom:18px;}
	
	.gnb .menus{display:none}
	
	.sub .visual .ment h1{font-size: 34px;}
	.visual h2{font-size:15px;padding:0px 65px}
	
	.sub .location > ul{display:block}
	.sub .location > ul:after{content:'';display:block;clear:both}
	.sub .location > ul > li.nav > ul{display:block}
	.sub .location > ul > li{display:block;float:left}
	.sub .location > ul > li.nav{border-right:0px;display:block;width:calc(100% - 50px)}
	.sub .location > ul > li{height:50px;line-height:50px;font-size: 16px;}
	.sub .location > ul > li.nav .depth a.holder{padding:0 50px 0 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size:13px;}
	.sub .location > ul > li.nav .depth .select li{padding-right:10px}
	.sub .location > ul > li.nav .depth .select li a{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display: block;width: 100%;font-size:13px;}
	.sub .location > ul > li.home{width:50px}
	.sub .location > ul > li.nav .depth{min-width:auto}
	.sub .location > ul > li.nav .depth a.holder{height:49px}
	.sub .location > ul > li.nav .depth.depth1{width:30%;float:left}
	.sub .location > ul > li.nav .depth.depth2{width:calc(70% - 58px);float:left}
	.sub .location > ul{padding-left:50px}
	
	#sitemap{height:100%}
	#sitemap .sitemap{width: 100%;padding:0px;padding-top:56px;}
	#sitemap .sitemap .logo{display:none;}
	#sitemap .sitemap .home{background-image:url(/images/icon_home.png);background-size: 25px;display: block;background-repeat: no-repeat;background-position: center center;height:40px;width:40px;top: 8px;position: absolute;left: 20px;}
	#sitemap .sitemap ul.menu-n{margin-top:0px;border-top:1px solid #ddd}
	#sitemap .sitemap ul.menu-n > li{width:100%;margin-left:0px;padding:30px;padding-bottom:0px}
	#sitemap .sitemap .close{top:8px;right:30px;right: 20px;background-size: 20px;}
	#sitemap .sitemap .depth2 .submenus .title{padding-bottom:0px}
	#sitemap .sitemap .depth2 .submenus .title h1{position:relative;font-size:30px;font-weight:normal;font-family: "NanumSquare"; pointer-events: initial;}
	#sitemap .sitemap .depth2 .submenus .title h1:after {content: "\e913";font-family: xeicon;position: absolute;right: 0;color: #ddd;}
	#sitemap .sitemap .hover .depth2 .submenus .title h1{border-bottom:1px solid #fff}
	#sitemap .sitemap .hover .depth2 .submenus .title h1:after{content: "\e91a";   color: #222;}
	#sitemap .sitemap .depth2 .submenus .submenu{height: 0;overflow: hidden;transition: .3s;}
	#sitemap .sitemap .depth2 .submenus .submenu li{padding-left:15px;height:auto;padding:10px 15px}
	#sitemap .sitemap .depth2 .submenus .submenu li a{font-size:18px;display:block;line-height:1.2}
	#sitemap .sitemap .hover .depth2 .submenus .submenu{height:auto}
	#sitemap .sitemap .depth2 .submenus .submenu li a::after{bottom:-5px}
	#sitemap .sitemap .depth2 .submenus .submenu li{margin-bottom:0px}
	
	.footer .copyright .family .sns a{width:35px;}
	
	#section07 .newsletter .form .inputs > a{left:30px}
	
}

@media (max-width: 610px) {
	.sub .visual{height:320px}
	.sub .visual .ment h1{padding:0px 20px;font-size:30px}
	.visual .ment{padding-top:70px}
	
	.gnb .top{width:100%;height:56px}
	
   .gnb .logo {width: 50%;background-size: auto 25px;}
   .gnb .menu {height: 56px; justify-content: flex-start;}
   .gnb .menu .menus {position: fixed; width: 100%; background-color: #fff; top: 56px; color: #222; display: block; text-align: left; padding: 0 30px;  height: 0; overflow: hidden; opacity: 0; transition: .2s;}
   .gnb.hover .menu .menus { height:calc(100% - 56px); overflow-y: auto; border-top: 1px solid #ddd; opacity: 1;}
   .gnb .menu .menus li {display: block; padding: 0 ; border-bottom: 1px solid #ddd;}
   .gnb .menu .menus li > a.depth1 {font-size:20px; height: 80px; line-height: 80px;  display: block; position: relative;}
   .gnb .menu .menus .depth2 {position: static; width: 100%;}
   .gnb .menu .menus .hover .depth2 .submenus {padding:0 0 30px 0; height: initial; }
   .gnb .menu .menus .depth2 .submenus .submenu {padding: 0 50px 0 0;}
   .gnb .menu .menus .depth2 .submenus .submenu + .submenu{padding:0px}
   .gnb .menu .menus .depth2 .submenus .title {display: none;}
   .gnb .menu .menus li > a.depth1:after {content:"\e913" ; font-family: xeicon; position: absolute; right: 0; color: #ddd;}
   .gnb.hover:after {display: none;}
   .gnb.hover .menu .menus li.hover > a.depth1, .gnb .menu .menus li.active > a {border-bottom: 0;}
   .gnb.hover .menu .menus li.hover .submenus {height: initial;}
   .gnb.hover .menu .menus li.hover > a.depth1:after {content: "\e91a"; color: #222;}
   .gnb .menu .menus .depth2 .submenus .submenu li {border-bottom: 0;line-height:1.5;height: auto;margin-bottom: 20px;}
   .gnb .menu li.lang {display: none; font-size: 17px;}
   .gnb .menu li.lang a {justify-content: flex-start;}
   .mobile-title{display:block}
   
   
   .scrolled .gnb{height:56px;}
   .gnb.hover .menu li.lang,.scrolled .gnb .menu li.lang {display: block;}
   .gnb .mobile-menu {width: 56px; height: 56px; background: url(../images/icon-menu.svg) no-repeat center; background-size: auto 30%; position: absolute; top: 0; right: 10px; z-index: 200; pointer-events: all;}
   .scrolled .gnb .mobile-menu, .gnb.hover .mobile-menu  {background: url(../images/icon_menu-b.png) no-repeat center;background-size:18px;}
   .gnb.on .mobile-menu{background: url(../images/icon_menu-b.png) no-repeat center;background-size:18px;}
	
	.sub .location > ul > li.nav .depth.depth2{width:70%}
	
	.top_popup_open .quick{top:auto !important}
	.quick .products ul{padding:0px}
	.quick.active .products{width:100%}

	.quick {top: auto; bottom: 0; right: 0; }
	.quick .selector {width: 60px;bottom: 0px;top: auto;}
	.quick .selector a.menu { background-image: none; text-align: center; line-height: 40px; height: 40px;}
	.quick .selector a.menu:before { content: "\e946"; font-family:xeicon; font-size: 1.2rem; color: #fff; transform-origin: center; display: block; transition: .3s;}
	.quick .selector a.product {height: 60px; overflow:hiddne;position:relative; font-size: 0; background: url(../images/icon-products.svg) no-repeat center; background-size: auto 25%;}
	.quick .selector a, .quick .selector a.product {width: 60px; height: 0; font-size: 0;}
	.quick.expand .selector a {height: 60px; transition: .2s;}
	.quick.expand .selector a.menu {height: 40px;}
	.quick.expand .selector a.menu:before { transform: rotate(180deg);}
	.quick.expand .selector a.product{border-top:1px solid #ddd}
	.quick.active{width:100%}
	  
	.quick .products ul li .infos h2 {font-size: 15px;line-height:1.3;padding:10px 0px}
	.quick .products ul li a .infos h2{padding-right: 25px;word-break: break-all;background-size: 15px;background-position-y: 12px;}
	.quick .products .mobile-title {position: relative; font-size: 24px;}
	.quick .selector a.q, .quick .selector a.chat {background-position: center; background-size: auto 40%; padding-top: 0;}
	
	.quick .selector a.product p{display:none}
	.quick .selector a.menu{pointer-events: none;display:none}
	.quick .selector a.mo-menu{width:60px;height:40px;display:block;line-height:40px;text-align:center}
	.quick .selector a.mo-menu:before{content: "\e946";font-family: xeicon;font-size: 1.2rem;color: #fff;transform-origin: center;display: block;transition: .3s;}
	.quick.expand .selector a.mo-menu:before { transform: rotate(180deg);}
	.quick .products .mobile-title > a::after {content: "\e9af"; font-family: xeicon; color: #fff; position: absolute; top: 33px; right: 30px;  }
	
	.scrolled .quick .selector a.gotop{height:40px;width:60px}
	
	.footer .copyright .family .familysite{width:100%}
	.footer .copyright .family .familysite .holder{width:100%}
	.footer .copyright .family .familysite .holder > a{width:100%}
	.footer .copyright .family .familysite .sites{width:calc(100% + 2px)}
	.footer .copyright .family .sns{position:relative;bottom:auto;text-align:left}
	.footer .copyright .family .sns a{width:52px;}
	
	#section07 .newsletter .form{padding-right:0px}
	#section07 .newsletter .form .inputs > a{margin-top:0px}
}

/*반응형*/
@media (max-width: 501px) {
   html {
   --Width:100%;
   --visual-h:70vh;
   --Top-h:56px;
   }
   body {font-size: 14px;}
   
   /* .quick .products {height: 100%; width: 100%; position: fixed; background-color: #393f77; z-index: 300; top: 0; right: -100%; transition: .2s;}
   .quick.active .products {right: 0;}
   .quick .products ul {padding: 0 0 20px 0;}
   .quick .products ul li {width: 50%; display: inline-block; margin-left: -4px; vertical-align: top; float: none; padding-top: 0;}
   .quick .products ul li:nth-child(3n+1){clear: none;}
   .quick .products ul li:nth-child(2n+1){clear: both} */

   .gnb{min-width:100%}
   .gnb .menu li.lang > a:hover{color:#000}
   .gnb .menu li.lang .langs{background:#f6f6f6}
   .gnb .menu li.lang .langs a{padding-left:13px;}
   .gnb.hover:before{display:none}
	
   .visual-slider{min-width:100%}
   .section#section01 .swiper-container{width:100%}
	
   #section02 .video{width:100%}
   #section05 .board{width:100%}
   #section04 .ment{width:100%}
   #section06 .notice{width:100%}
   #section07 .newsletter{width:100%}
   #section04 .ment .more{bottom:auto;border:0px}
   
   .footer .copyright{width:100%}
	
   .visual {height: 100vh;}
   .visual h1 {width: 100%; font-size: 50px;}
   .visual h2 {width: 70%; font-size: 15px;}
   .visual .ment .num {font-size: 23px;}
   .main .swiper-pagination {margin-left: 0 ; left:30px !important; width: 70%;  bottom: 50px;}
   .swiper-pagination {}
   .swiper-pagination .swiper-pagination-bullet-active .bar {background: #7789db; width: 110px;}
 
  
   .section {padding: 30px 0;}
   .section h2 {margin-top: 25px; margin-bottom: 35px;}
   .section .more {font-size: 15px; bottom: 0;}

   #section07 {padding-bottom: 70px;}
   #section07 .newsletter {flex-direction: column; padding: 0 30px;}
   #section07 .newsletter .ment {padding:0px;padding-bottom:10px;width: 100%;}
   #section07 .newsletter .ment h2 {margin-bottom:5px}
   #section07 .newsletter .ment p{font-size:18px}
   #section07 .newsletter .form {margin-top: 25px;padding-left:0px}
   #section07 .newsletter .form .inputs {flex-wrap: wrap;}
   #section07 .newsletter .form .inputs > input[type=text] {margin-right: 0; width: 100%;}
   #section07 .newsletter .form .inputs > input[type=button] {margin-bottom:20px;width: 100%; border: none;margin-right:0px}
   #section07 .newsletter .form .inputs > * {margin-right: 0; margin-bottom: 10px;}
   #section07 .newsletter .guide .icon {display: none;}
   #section07 .newsletter .guide .text {margin-left: 0;}
   #section07 .newsletter .guide .text h3 {line-height: initial;}
   #section07 .newsletter .guide .text p{font-size: 15px; margin-top: 15px;}

   .footer .gotop {width: 60px; height: 60px; top: -60px;}
   .footer .copyright {display: block;margin: 0;}
   .footer .copyright .logo {margin-bottom: 20px;}
   .footer .copyright .family .familysite .holder {width: 100%;}
   .footer .copyright .legal .copy {line-height: 1.6; margin-top: 20px;font-size:15px;font-weight:300}
   .footer .copyright .legal .copy p span{font-size:15px;font-weight:300}
   .footer .copyright .legal .link {font-size: 0;}
   .footer .copyright .legal .link a {margin-right: 0; width: 50%; display: inline-block; vertical-align: top; line-height: 2; font-size: 14px;}
   .footer .copyright .family .familysite .sites {width: 100%;  box-sizing: content-box;}
   .footer .copyright .family .sns a {width: 100%;max-width: 15%;height: 48px;}

   .sub .visual {height: 275px;}
   .sub .visual .ment h1 {font-size:22px;}
   .sub .visual .ment h1::after{display:none}
   .sub .visual .ment h1::before{content: ""; height: 2px; width: 30px; background-color: #fff; display: block; margin:25px auto; }
   .sub .visual.on .ment h1::before{background-color: #666;}
   
   .sub .visual .ment h2 {display: none;}
   .sub .location {margin-top: -55px; background-color: transparent;}
   .sub .location{width:100%}
   .sub .location > ul{display:block}
   .sub .location > ul > li{float:left}
   .sub .location > ul:after{content:'';display:block;clear:both}
   .sub .location > ul > li.nav{float:left;display:block;width:calc(100% - 53px);border-right:0px;margin-top:-1px}
   .sub .location > ul > li.nav:focus{outline:none}
   .sub .location > ul > li.nav > ul{display:block;}
   .sub .location > ul > li.nav > ul > li{float:left}
   .sub .location > ul > li.nav .depth.depth1{width:auto;max-width:35%;padding-right:5px}
   .sub .location > ul > li.nav .depth.depth2{width:auto;max-width:65%;padding-right:5px}
   .sub .location > ul > li.nav .depth a:focus{outline:none}
   .sub .location > ul > li.nav .depth span{display:block;position:relative;padding-right:20px}
   .sub .location > ul > li.nav .depth span:after {font-size: 15px;color: #ddd;right: 0px;transition: .3s;}
   
   .sub .location > ul > li.nav .depth{position:static}
   .sub .location > ul > li.nav .depth .select{display:none}
   .sub .location > ul > li.nav .depth.on .select{display:block;left:0px;width:100%;position:absolute;padding:0px 20px;padding-bottom:20px;border-bottom:1px solid #ddd}
   .sub .location > ul > li.nav .depth .select li{border:0px;width:50%;float:left;height:40px;line-height:40px}
   .sub .location > ul > li.nav .depth .select li:first-child{border:0px}
   
   .sub .location > ul > li {height: 55px; line-height: 55px; font-size: 14px; color: #fff; }
   .sub .location > ul > li.home {width: 55px; flex-shrink: 0; background-color: transparent;}
   .sub .location > ul > li.nav .depth{min-width:auto}
   .sub .location > ul > li.nav .depth1 a.holder{color:#c7c7c7}
   
   .sub .location > ul > li.nav .depth::after{right:0px}
   .sub .location > ul > li.nav .depth.depth1::after{right:10px;color:#c7c7c7}
   .sub .location > ul > li.nav .depth a.holder{text-overflow: ellipsis;overflow: hidden;display: block;white-space: nowrap;}
   .sub .location > ul > li.nav .depth a.holder {padding:0; border: none; line-height: 53px;background:none;height:54px;}
   .sub .location > ul > li.nav .depth a.holder::before{content: ""; height: 14px; width: 1px; background-color: #fff; opacity: .3; display: inline-block; vertical-align: middle; margin-right: 15px;}
   .sub .location > ul > li.nav .depth a.holder:focus{outline:none;-webkit-touch-callout: none;x-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;}
   
   .sub .location {border-top: 1px solid rgba(255,255,255,0.2);}
   .sub .location > ul > li.nav .depth a.holder::after {position: static; display: inline-block; margin-left: 10px; vertical-align: middle;}
   .sub .location > ul > li.nav .depth .select li {padding: 0 15px;}
   .sub .location > ul > li.nav .depth .select li a{text-overflow: ellipsis;overflow: hidden;display: block;white-space: nowrap;}

	.sub .location.active{background:#fff}
	.sub .location.active > ul > li.home{color:#000}
	.sub .location.active > ul > li.nav .depth a.holder{color:#888}
	.sub .location.active > ul > li.nav .depth.on a.holder{color:#000}
	.sub .location.active > ul > li.nav .depth span:after{color:#000}

   .visual.on + .location > ul > li.home{background-color: transparent;border: 1px solid rgba(0,0,0,0.1);border-right: 0px;}
   .visual.on + .location > ul > li.home {color: #605e5f; }
   .visual.on + .location > ul > li {color:inherit; }
   .visual.on + .location > ul > li.nav .depth a.holder::before{background-color:#e2e2e2}

   .sub #section01 {padding: 40px;}
   
   .sub #section07 .newsletter .ment h2{display:none}
   .footer .copyright .legal .copy span.tel{display:block;margin-top:5px;margin-left:0px}
   .footer .copyright .legal .copy span.fax{display:block;margin-top:5px;margin-left:0px;margin-bottom:5px;}
   .footer .copyright .family .sns a{background-size: contain;}
   
   #section07{padding-bottom:110px}
   #section07 .newsletter .form .inputs > a{bottom:50px;display:inline-block;white-space: nowrap;}
   
   
   .gnb .lang{display:none}
   .sitemap .lang .lang-layer .xi-angle-down{margin-left:5px}
   .sitemap .lang .lang-layer > a{color:#000}
   .sitemap .lang .lang-layer > a::before {background: url(../images/icon-global-b@2x.png) no-repeat left center; display: inline-block; background-size: auto 20px; margin-right: 8px;}
   .sitemap .lang{top:0px;    transform: translateY(0px);right:50px}
   .sitemap .lang .lang-layer > a{height:56px;line-height:56px;}
   
   
   .footer .copyright .legal .link a{display:block;width:100%}
	   
}