@charset "utf-8";

/* common */
::selection{background: rgba(14, 46, 104, 0.56);color:#fff;}
body{font-size:16px; word-break:keep-all; }
body.active{position:fixed; width:100%; height:100%; overflow:hidden;}
.inr{position:relative; width:1580px;  margin:0 auto;}
.inr.v2{width:1500px;}
.inr:after{content:''; display:block; clear:both;}
.inr.sub{position:relative; width:1400px; margin:0 auto;}
#wrap{min-width:1280px; overflow:hidden;}
/* header */
:root{
	--header_height: 115px;
	--submenu_height: 430px;
}
.txt_color01{color:#219dd8;}
.header{ height: var(--header_height); }
#header{z-index:99; position:absolute; width:100%; color:#fff; letter-spacing: 0; }
#header .inr{ display: flex; justify-content: space-between; align-items: center; }
#header h1{position:absolute; top:20px; left:50px; z-index:101;}
#header h1 > a{display:flex; align-items: center;}
#header h1 > a img{height:78px;}
#header h1 > a.color{display:none;}
/* #header h1.active > a.wt{display:none;}
#header h1.active > a.color{display:block;} */
#header nav{ display: flex; align-items: center; position: relative; flex: 1; height: 100%; pointer-events: none; }
#header .gnb{ display: flex; justify-content: center; align-items: center; position:relative; width: 100%; height: 100%; padding-left: 48px; box-sizing: border-box; }
#header .gnb > li{display:inline-block; position: relative; width:190px; height: 100%; pointer-events: auto; }
#header .gnb > li > a{ display:flex; justify-content: center; align-items: center; width: 100%; height:100%; font-size:20px; font-weight:500; color:#fff;}
#header .gnb .sub_menu{ visibility: hidden; position:absolute; top: 100%; width: 100%; height: var(--submenu_height); padding:20px 0; box-sizing: border-box; border-left: 1px solid var(--titanium_white); text-align:center; opacity: 0; }
#header li:last-of-type .sub_menu{ border-right: 1px solid var(--titanium_white); }
#header .gnb .sub_menu a{ display: block; padding: 6px 10px; }
.btn_all_menu{z-index:100;  position:absolute; top:50px; right:50px; z-index:999; width:35px; height:10px; font-size:0px; transition:all 0.3s ease 0s; cursor:pointer;}
.btn_all_menu > span{display:block; position:absolute; left:0; width:100%; height:2px; background:#fff; transition:all 0.3s ease;}
.btn_all_menu > span:nth-of-type(1){top:0;}
.btn_all_menu > span:nth-of-type(2){bottom:0; left:unset; transition:background 0.3s ease 0s; width:100%;}
.btn_all_menu.active > span{background:#fff;}
.btn_all_menu.active > span:nth-of-type(1){top:5px; transform:rotate(-45deg);}
.btn_all_menu.active > span:nth-of-type(2){bottom:unset; top:5px; transform:rotate(45deg);}
.btn_all_menu.active > span:nth-of-type(1),
.btn_all_menu.active > span:nth-of-type(2){transition-delay:0s, 0.3s;}
body.show .btn_all_menu > span{background:#222;}
body.show .btn_all_menu.active > span,
.btn_all_menu.active > span{background:#fff;}

@media(prefers-reduced-motion:no-preference){
	#header::before,
	#header::after{ transition: .3s; }
	#header .gnb > li{ transition: .3s; }
	#header .gnb > li > a{ transition: .3s; }
	#header .gnb .sub_menu{ transition: background .3s, opacity .3s .2s; }
	#header .gnb .sub_menu::before{ transition: .3s; }
}

@media(hover:hover){
	#header:hover{ border-bottom-color: var(--titanium_white); color: var(--black); }
	#header::before, #header::after{ content: ''; position: absolute; inset: 0; height: var(--header_height); pointer-events: none; }
	#header::after{ border-bottom: 1px solid #0000; }
	#header:hover::before{ height: calc( var(--header_height) + var(--submenu_height)); background: #fff; border-bottom: 1px solid #ddd;}
	#header:hover::after{ border-bottom-color: var(--titanium_white); z-index: 1; }
	#header:hover h1 > a.color{display:block;}
	#header:hover h1 > a.wt{display:none;}
	#header:hover .gnb > li > a{color:#222;}
	#header .gnb > li > a:hover{color:#004980;}
	#header:Hover .sub_menu{ visibility: visible; opacity: 1; }
	#header .gnb .sub_menu::before{ content: ''; position: absolute; inset: 0 50%; width: 0; height: 3px; background: var(--primary); }
	#header .gnb .sub_menu:hover{ background: #f9f9f9; }
	#header .gnb .sub_menu:hover::before{ inset: 0; width: 100%; }
	#header .gnb .sub_menu a:hover{ color: var(--primary); }

}

#header.fixed{position:fixed; top:0; background:#fff; border-bottom:1px solid #eee;}
#header.fixed .gnb > li > a{color:#222;}
#header.fixed h1 > a.wt{display:none;}
#header.fixed h1 > a.color{display:block;}
.btn_all_menu.fixed{position:fixed;}
.btn_all_menu.fixed > span{background:#222;}
.btn_all_menu.fixed.active > span{background:#fff;}
#container{position:relative; }
#content{position:relative; width:100%; background:#fff;}
#area_menu{visibility:hidden; opacity:0; position:fixed; top:0; right:0; bottom:0; width:0; height:100%; background:#000; text-align:left; z-index:1000; -webkit-transform: translateX(100%); transform: translateX(100%); transition:all 1s ease; overflow: hidden;}
#area_menu.active{visibility:visible; opacity:1; -webkit-transform: translateX(0); transform: translateX(0); width:100%; transition:all 1s ease;}
#area_menu .inr{display:flex; height:100%;}
#area_menu h1.active > a.wt {display: block !important;}
.m_gnb_menu{width:100%;}
.m_gnb_menu > li{display:flex; align-items: center;  width:100%; padding:30px 0; border-bottom:1px solid rgba(255,255,255,0.15); transition:all 0.3s ease;}
.m_gnb_menu > li > a{width:220px; font-size:30px; font-weight:bold; color:#fff; opacity:0.4; transition:all 0.3s ease;}
.m_gnb_menu > li:hover > a{opacity:1;}
.m_gnb_menu > li .sub_menu{display:flex; flex-wrap: wrap; width:calc(100% - 220px); width:-webkit-calc(100% - 220px);}
.m_gnb_menu > li .sub_menu > li{margin-right:30px; transition:all 0.3s ease;}
.m_gnb_menu > li:nth-child(2) .sub_menu > li:nth-child(n+4) {padding-top: 5px;}
.m_gnb_menu > li:nth-child(2) .sub_menu > li:nth-child(2) a br {display: none;}
.m_gnb_menu > li .sub_menu > li > a{font-size:21px; padding:0 10px; box-sizing:border-box; font-weight:bold; color:#fff; transition:all 0.3s ease;}
.m_gnb_menu > li .sub_menu > li > a:hover{color:#0d6fb8;}
.m_gnb_menu > li:hover > .sub_menu > li{opacity:1;}

.m_gnb_menu > li:last-child .sub_menu{ border-right: 0 !important;}

#area_quick{position:fixed; top:50%; right:0; width:70px; background:#ea0012; transform:translateY(-50%); z-index:999; border-radius:5px 0 0 0; box-shadow:0px 3px 9px 1px rgb(0 0 0 / 6%); transform: .3s;}
#area_quick .box_inquiry:hover{background:#1a75b5; transform: .3s;}
#area_quick .box_inquiry{position:relative; width:100%; height:235px; border-radius:5px 0 0 5px; background:#ea0012;}
#area_quick .box_inquiry > a{position:absolute; top:0; right:0; width:100%; height:100%; display:table; text-align:center; color:#fff; transition:all 0.3s; border-bottom-left-radius:15px; border-top-left-radius:15px}
#area_quick .box_inquiry > a span{display:table-cell; vertical-align:middle; font-size:18px; letter-spacing:1px; color:#fff; line-height:1.1}
#area_quick .box_inquiry > a span em{display:inline-block; font-weight:600; letter-spacing:-2px; writing-mode:tb-rl}
#area_quick .box_inquiry > a span i{display:block; margin-top:17px; font-size:15px}
#area_quick .btn_top_box{display:none; width:100%; height:65px; background:#fff; border-radius:0 0 0 3px; position: absolute; box-shadow:0px 3px 9px 1px rgb(0 0 0 / 6%);}
#area_quick .btn_top_box > a{display:block; width:100%; height:100%; text-align:center;}
#area_quick .btn_top_box > a > span{position:relative; display:block; padding:27px 0 0; font-size:16px; font-weight:bold; color:#676767;}
#area_quick .btn_top_box > a > span:before{content:''; position:absolute; top:17px; left:50%; width:14px; height:8px; background:url(../images/common/icon_arr.png)no-repeat center; background-size:contain; transform:translateX(-50%);}

/*footer*/
#footer{position:relative; z-index:4; padding:190px 0 130px; background:#111 url(../images/common/bg_ft.jpg)no-repeat center; background-size:cover;}
#footer[data-show="active"]{padding:100px 0 130px;}
#footer[data-show="active"] .list_cs{display:none;}
#footer .list_cs{position:absolute; top:-110px; left:50%; display:flex; justify-content: center; transform:translateX(-50%); transition:all 0.3s ease;}
#footer .list_cs > li{position:relative; margin:0 25px 0 0; width:695px; height:175px; background:#fff; border-radius:5px; box-shadow: 0px 1px 51px 0px rgba(187, 187, 187, 0.25); box-sizing:border-box; transition:all 0.3s ease;}
#footer .list_cs > li .box{display:flex; align-items: center; justify-content: space-between; padding:0 80px; width:100%; height:100%; box-sizing:border-box;}
#footer .list_cs > li:last-child{margin:0;}
#footer .list_cs > li .area_title{display:flex; align-items: center; text-align:left;}
#footer .list_cs > li .area_title .icon{display:block; width:60px; height:60px; border-radius:10px; box-sizing:border-box;}
#footer .list_cs > li:nth-child(1) .area_title .icon{background:#1a75b5 url(../images/common/icon_cs.png)no-repeat center; background-size:32px auto;}
#footer .list_cs > li:nth-child(2) .area_title .icon{background:#ff9e16 url(../images/common/icon_gallery.png)no-repeat center; background-size:30px auto;}
#footer .list_cs > li .area_title .txt{margin-left:20px;}
#footer .list_cs > li .area_title .txt span{font-size:15px; font-weight:bold; color:#6d6d6d; line-height:1em;}
#footer .list_cs > li .area_title .txt h3{margin:5px 0 0; font-size:30px; font-weight:bold; color:#222; line-height:1em; word-break:keep-all;}
#footer .list_cs > li .area_number{font-size:40px; font-weight:bold; color:#1a75b5;}
#footer .list_cs > li:nth-child(2):before{content:''; position:absolute; top:50%; right:80px; width:30px; height:16px; background:url(../images/common/icon_bn_arr.png)no-repeat center; background-size:contain;}
#footer .list_cs > li > a{display:block; width:100%; height:100%;}
#footer .list_cs > li:hover{top:-20px;}
.ft_logo{position:absolute; right:0; bottom:0; opacity:0.5;}
.ft_logo img{height:45px;}

.ft_utill > li{position:relative; display:inline-block; margin:0 30px 0 0;}
.ft_utill > li:before{content:''; position:absolute; top:12px; right:-20px; width:4px; height:4px; background:#cfcfcf; border-radius:50px;}
.ft_utill > li:last-child{margin:0;}
.ft_utill > li:last-child:before{display:none;}
.ft_utill > li > a{display:inline-block; font-size:18px; font-weight:400; color:rgba(255,255,255,1);}
#footer[data-show="active"] .link_kakaomap{background:#ffd400;}
#footer .map{position:absolute; top:-100px; right:0;}
#footer address b{padding:0 5px 0 0; font-size:16px; font-weight:400; color:#ababab;}
#footer address span{padding:0 20px 0 0; }
#footer address span, #footer address a{display:inline-block; font-size:16px; font-weight:500; color:#ccc; line-height:1.5em;}
#footer address{margin:55px 0 0;}
#footer .btn_top_box{position:absolute; bottom:110px; right:50px; text-align:center;}
#footer .btn_top{display:block; width:100%; height:100%;}
#footer .btn_top a{display:block; width:100%; height:100%;}
#footer .btn_top img{position:relative; top:10px; height:18px;}
.area_copy{display:flex; justify-content: space-between; align-items: center; margin:25px 0 0;}
.area_copy p{font-size:12px; font-weight:400; color:#898989; line-height:1.3em;}


/* sub visual */
.area_subVisual{position:relative; overflow:hidden; display:block; width:100%; height:500px; /*overflow:hidden!important;*/ background-size:cover;}
.img_subVisual{width:100%; height:100%; background-size:cover !important; animation: imagescale 3s ease-in-out alternate; -webkit-animation: imagescale 3s ease-in-out alternate; -moz-animation: imagescale 3s ease-in-out alternate; -o-webkit-animation: imagescale 3s ease-in-out alternate; transform:scale(1.0);}
.area_subVisual > .txt{position:absolute; top:42%; width:100%; text-align:center;  transform:translateY(-50%);}
.area_subVisual > .txt .inr{margin:0 auto;}
.area_subVisual > .txt > h3{display:block; font-size:60px; font-weight:700; color:#fff; line-height:1.4em; text-transform:uppercase;}
.area_subVisual > .txt > p{display:inline-block; font-size:18px; font-weight:400; color:#fff; text-transform:uppercase; word-break:keep-all;}
.area_subVisual .img_subVisual{background-image:url(../images/content/sub_visual01.jpg);}
.area_subVisual.sub01 .img_subVisual{background-image:url(../images/content/sub_visual01.jpg);}
.area_subVisual.sub02 .img_subVisual{background-image:url(../images/content/sub_visual02.jpg);}
.area_subVisual.sub03 .img_subVisual{background-image:url(../images/content/sub_visual03.jpg);}
.area_subVisual.sub04 .img_subVisual{background-image:url(../images/content/sub_visual04.jpg);}
.area_subVisual.sub05 .img_subVisual{background-image:url(../images/content/sub_visual05.jpg);}
.area_subVisual.sub06 .img_subVisual{background-image:url(../images/content/sub_visual06.jpg);}
.area_subVisual.sub07 .img_subVisual{background-image:url(../images/content/sub_visual07.jpg);}

/* sub lnb */
.area_lnb{position: absolute; top: -70px; left: 0; width: 100%; background: rgba(0,0,0,.4); height: 70px;}
.area_lnb *[data-lnb]{display:inline-block; position:relative; min-width:250px; height:100%; line-height:70px; box-sizing:border-box; padding:0 30px; font-size:17px; font-weight:500; color:#fff; border-right:1px solid rgba(255,255,255,0.3);}
/*.area_lnb *[data-lnb]:before{content:'';position:absolute; top:50%; left:0; width:1px; height:100%; background:rgba(255,255,255,0.3); transform:translateY(-50%);}*/
.area_lnb .inr {max-width: 1600px; margin: 0 auto;}
.area_lnb a[data-lnb="home"]{border-right:none; width:70px; min-width:inherit; margin:0; padding:0px; background:#e98d14 url('../images/common/lnb_home.png') no-repeat center; background-size:20px 19px; text-indent:100%; overflow:hidden; white-space:nowrap;}
.area_lnb a[data-lnb="home"]:before,
.area_lnb a[data-lnb="home"]:after{display:none;}
.area_lnb *[data-lnb]:after{content:''; position:absolute; top:50%; right:25px; margin-top:-3px; width:13px; height:7px; background:url('../images/common/lnb_arrow.png')no-repeat center; background-size:cover; transition:opacity 0.45s, transform 0.45s ease; opacity:1;}
.area_lnb *[data-lnb].active:after{transform:rotate(180deg);}
.area_lnb .inr > *[data-lnb],
.area_lnb .inr > nav,
.area_lnb .inr > .deth01{float:left;}
.area_lnb .lnb,
.area_lnb .deth01{position:relative;}
.area_lnb .lnb ul,
.area_lnb .deth01 ul{display:none;position:absolute;top:70px; left:0px; z-index:89; width:100%; box-sizing:border-box; background:#333;}
.area_lnb .lnb ul > li > a,
.area_lnb .deth01 ul > li > a{display:block; padding: 15px 20px; display: block; border-bottom: 1px solid #787773; white-space: nowrap; color:#fff; font-weight:400; font-size:15px; word-break:keep-all; transition:all 0.3s ease 0s;}
.area_lnb .lnb ul > li:last-child > a,
.area_lnb .deth01 ul > li:last-child  > a{border-bottom:none;}
.area_lnb .lnb ul > li > a.on,
.area_lnb .deth01 ul > li > a.on{background:#219dd8;}
.area_lnb .lnb ul > li > a br{display:none;}
.area_lnb nav.lnb > a {padding: 0 60px 0 30px;}

.snb ul{display:flex; border:1px solid #ddd; box-sizing:border-box; border-radius:50px; height:80px; padding:10px;}
.snb ul > li{background:#fff; text-align:center; border-radius:50px; transition:all 0.3s ease;}
.snb ul.col02 > li{width:calc(100% / 2); width:-webkit-calc(100% / 2);}
.snb ul.col04 > li{width:calc(100% / 4); width:-webkit-calc(100% / 4);}
.snb ul.col03 > li{width:calc(100% / 3); width:-webkit-calc(100% / 3);}
.snb ul.col05 > li{width:calc(100% / 5); width:-webkit-calc(100% / 5);}
.snb ul > li > a{display:flex; justify-content: center; align-items: center; width:100%; height:100%; font-size:20px; font-weight:500; color:#444; transition:all 0.3s ease;}
.snb ul > li.active,
.snb ul > li:hover{background:#0d6fb8;}
.snb ul > li.active > a,
.snb ul > li:hover > a{color:#fff;}


.area_tab{max-width:1400px; margin:0 auto 50px;}
.area_tab ul{text-align:center;}
.area_tab ul > li{display:inline-block; min-width:145px; height:50px; padding:5px;}
.area_tab ul > li > a{display:block; height:100%; padding:0 7px; background:#fff; border:1px solid #e5e5e5; box-sizing:border-box; color:#666; font-size:16px; text-align:center; transition:all 0.5s ease;}
.area_tab ul > li > a.on{position:relative; z-index:3; background:#00ac4e; border:1px solid #00ac4e; color:#fff; box-shadow:0px 4px 13px rgb(210, 255, 231);}
.area_tab ul > li > a span{display:inline-block; vertical-align:middle; font-size:16px;}
.area_tab ul > li > a:after{content:''; display:inline-block; height:100%; vertical-align:middle;}

@media(max-width:1650px){
	.inr{width:90%;}
}
@media(max-width:1600px){
	.inr.v2{width:90%;}
	#footer .list_cs > li{width:650px;}
}
@media(max-width:1500px){
	.inr.sub{width:90%;}
	#footer .list_cs > li{width:600px;}
	#footer .list_cs > li .area_number{font-size:33px;}
	#header .gnb > li{width:140px;}
}