ul, ul>li, dl, dl>dd{
  display:inline-block;
  font-size:0;
  line-height:0;
}

.motion {
	-webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
}



#wrap{
  padding-top:80px;
  /*min-width:1400px;*/
  box-sizing: border-box;
}
@media only screen and (max-width : 1024px){
  #wrap{
    padding-top:70px;
  }
}

.container{
  max-width:1200px;
  min-width:300px;
  width:100%;
  margin: 0 auto;
  box-sizing: border-box;
}
@media only screen and (max-width : 1440px){
  .container{
    max-width:auto;
    width:100%;

  }
}
@media only screen and (max-width : 1024px){
  .container{

    padding-left:10px;
    padding-right:10px;
  }
}


#header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  min-height:80px;
  background-color:#fff;
  border-bottom:1px solid #eee;
  box-sizing: border-box;
  z-index:3;
}

#header .container{
  position:relative;
  display:flex;
  margin: 0 auto;
  align-items: center;/*세로 중앙정렬*/
  justify-content: space-between;

}
#header .container a.logo{
}
#header .container a.logo>img, #header .container a.logoOn>img{
  width:107px;
}

#header .container .box{
  display:none;
}

#header .container a.logoOn{
  display:none;
}



#header.on{
  background-color:#31427a;
  border-bottom:none;
}
#header.on .container a.logoOn{
  display:inline-block;
}
#header.on .container a.logo{
  display:none;
}


.menuTrigger,
.menuTrigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.menuTrigger {
  position: relative;
  width: 30px;
  height: 24px;
}

.menuTrigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #31427a;
  border-radius: 4px;
}
.menuTrigger span:nth-of-type(1) {
  top: 0;
}
.menuTrigger span:nth-of-type(2) {
  top: 10px;
}
.menuTrigger span:nth-of-type(3) {
  bottom: 0;
}
#header .container .box a.telTrigger{
  display:flex;
  height:100%;
  /*width:30px;
  height:30px;
  margin-right:7px;
  padding-top:4px;
  text-align:center;
  border-radius:20px;
  background-color:#f15a22;*/
  margin-right:7px;
  justify-content: center;/*가로 중앙정렬*/
  align-items: center;/*세로 중앙정렬*/
}
#header .container .box a.telTrigger i{
  display:inline-block;
  width:30px;
  height:30px;
  padding-top:4px;
  text-align:center;
  border-radius:20px;
  background-color:#31427a;
  animation: 1.2s ease-out;
  animation-name: telTriggermove;
  animation-iteration-count: infinite;
}

@keyframes telTriggermove {
0% {
  /*margin-right:0px*/
  background-color:#f15a22;
}
50%{
  background-color:#f7941d;
}
100%{
  background-color:#f15a22;
}
}


#header .navi{
  display:flex;
  position:fixed;
  top:81px;
  left:60px;
  width:100px;
  align-items: top;/*세로 중앙정렬*/
  flex-flow:column;/*요소 세로정렬*/
}
#header .navi>a{
  display:flex;
  width:100%;
  height:100px;
  justify-content:center;/*가로 정렬*/
  align-items:center;/*세로 중앙정렬*/
  flex-flow:column;/*요소 세로정렬*/
}
#header .navi>a.element1{
  background-color:#fff;
}
#header .navi>a.element2{
  background-color:#da465b;
}
#header .navi>a.element3{
  background-color:#31427a;
}
#header .navi>a>strong, #header .navi>a>i{
  display:inline-block;
  width:100%;
  color:#fff;
  font-weight:400;
  text-align: center;
}
#header .navi>a>i{
  width:16px;
  height:16px;
  margin-top:2px;
  border-radius:16px;
  border:1px solid #fff;
  background: url(../../img/iconNavi2.png) center center no-repeat;
  opacity:0.3;
}
#header .navi>a:hover i{
  opacity:0.6;
}
#header .navi>a.element1>strong{
  color:#3c4f8c;
}
#header .navi>a.element1>i{
  border:1px solid #3c4f8c;
  background: url(../../img/iconNavi1.png) center center no-repeat;
}

@media only screen and (max-width : 1440px){
  #header .container{
    width:100%;
    max-width:100% !important;
    padding: 0 60px;
  }
}
@media only screen and (max-width : 1024px){
  #header{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    min-height:70px;
    height:70px;
    background-color:#fff;
    border-bottom:1px solid #e3e3e3;
    z-index:6;
  }
  #header .container{
    padding: 0 10px;
  }
  #header .container .box{
    display:inline-block;
  }
  #header .navi{
    display:none;
  }

}
@media only screen and (max-width : 460px){

}
@media only screen and (max-width : 640px){

}

#nav{
  display:flex;
  min-height:80px;
  justify-content:center;/*가로 정렬*/
  align-items: center;/*세로 중앙정렬*/
}
#nav>li{
  position:relative;
  display:flex;
  min-height:80px;
  justify-content: center;/*가로 중앙정렬*/
  align-items: center;/*세로 중앙정렬*/
}
#nav>li>a{
  display:flex;
  min-height:80px;
  width:140px;
  margin-left:10px;
  margin-right:10px;
  /*padding: 0 30px;*/
  font-size:1.1rem;
  line-height:1.1rem;
  color:#525252;
  justify-content: center;/*가로 중앙정렬*/
  align-items: center;/*세로 중앙정렬*/
}

#nav>li:hover>a, #nav>li.active>a{
  color:#fff;
  font-weight:500;
  color:#da465b;
  opacity:1;
}

#nav .line{
  position: absolute;
  display: inline-block;
  top:0px;
  height: 1px;
  width: 0%;
  background: #fff;
  left:50%;
  z-index:7;
}
#nav .motion {
	-webkit-transition: background-color  0.3s ease-out, color 0.3s ease-out;
	   -moz-transition: background-color  0.3s ease-out, color 0.3s ease-out;
	     -o-transition: background-color  0.3s ease-out, color 0.3s ease-out;
	        transition: background-color  0.3s ease-out, color 0.3s ease-out;

}


#nav>li:hover .line, #nav>li.active .line{
  width:50% !important; left:25% !important;
}

#nav>li:not(.active)>a:before, #nav>li:not(.active)>a:after{
	content: "";
	left:0;
	bottom:-5px;
	width:100%;
	position:absolute;
	transition: all 0.5s ease;
}
.dept2{
  position:fixed;
  top:80px;
  left:0;
  width:100%;
  /*min-height:100px;*/
  background-color:#fff;
  border-bottom:1px solid #eee;
}
.dept2>.container{
  display:block !important;
  width:1400px;
  font-size:0;
  line-height:0;
  text-align: right;
}
.dept2>.container>ul{
  width:140px;
  height:216px;
  margin-left:10px;
  margin-right:10px;
  padding: 25px 0;

  vertical-align:top;
}
.dept2>.container>ul:last-child{
  /*border-right:1px solid #eee;*/
}
.dept2>.container>ul>li{
  width:100%;

  vertical-align:top;
}
.dept2>.container>ul>li>a{
  display:inline-block;
  width:100%;
  padding:9px 0;
  font-size:1rem;
  line-height:1rem;
  opacity:0.8;
  text-align: center;
}
.dept2>.container>ul>li>a:hover, .dept2>.container>ul>li:hover>a, .dept2>.container>ul>li.active>a{
  color:#3c4e8c;
  opacity:1;
}


#header.on #nav>li>a{
  color:#fff;
}
#header.on #nav>li:hover>a, #header.on #nav>li.active>a{
  color:#da465b;
}
#header.on .dept2{
  background-color:#da465b;
  border-bottom:none;
}
#header.on .dept2>.container>ul>li>a{
  color:#fff;
}


@media only screen and (max-width : 1024px){
  #nav, .dept2{
    display:none;
  }
}







/*모바일 메뉴*/
.mBg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: #000;
  opacity:0.5;
  z-index:100;
}
#mNav{
  position:fixed;
  top:0;
  right:0;
  width:320px;
  height:100%;
  padding-top:70px;
  box-sizing: border-box;
  background-color: #ffffff;
  z-index:100;
  overflow: hidden;
}
#mNav .logo{
  position:fixed;
  display: inline-block;
  top:20px;
  left:8px;
  z-index:5;
}
#mNav .logo img{
 width:160px;
}
#mNav .closeTrigger{
  position:fixed;
  display: inline-block;
  top:22px;
  right:10px;
  width:30px;
  height:30px;
  z-index:5;
}
.closeTrigger span{
  position: absolute;
  top: 50%;
  width: 100%;
  height: 3px;
  border-radius:2px;
  background-color: #31427a;
}
.closeTrigger span:nth-child(1){
  transform: rotate(135deg) translateX(0%);
}
.closeTrigger span:nth-child(2){
  transform: rotate(45deg) translateX(0%);
}
#mNav>ul{
  display: inline-block;
  width:100%;
  border-top:1px solid #eee;
  overflow:hidden;
}
#mNav>ul>li{
  display: inline-block;
  width:100%;
  min-height:48px;
  border-bottom:1px solid #eee;
}
#mNav>ul>li:last-child{
  border-bottom:1px solid #eee;
}
#mNav>ul>li .depth2{
  width:100%;
}
#mNav>ul>li .depth2>ul{
  display:inline-block;
  width:100%;
}
#mNav>ul>li .depth2>ul>li{
  display:inline-block;
  width:100%;
  height:40px;
  padding-left:0;
  background-color:#fff;

}
#mNav>ul>li .depth2>ul>li:first-child{
	background-color:#fff !important;
  border-top:1px solid #eee !important;
}
#mNav>ul>li .depth2>ul>li>a{
  display: inline-block;
  width:100%;
  height:100%;
  padding-left:30px;
  line-height:40px;

  font-size:1rem;
  box-sizing:border-box;
  opacity:0.7;
}
#mNav>ul>li:hover{
  color:#202a65;
}
#mNav>ul>li>a{
  display: inline-block;
  width:100%;
  height:48px;
  padding-left:20px;
  font-weight:400;
  line-height:48px;
  font-size:1.1rem;
  letter-spacing:-0.01rem;
  box-sizing: border-box;
}


.visual{
  position:relative;
  width:100%;
  height:910px;
  /*height:calc(100vh - 80px);*/
  overflow:hidden;
}
.visual .web{
  display:block;
}
.visual .mob{
  display:none;
  position:relative;
  width:100%;
  background-color:#eee;
}



.visual .container{
  display:flex;
  position:absolute;
  bottom:90px;
  left:50%;
  -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0);
  justify-content: center;/*가로 정렬*/
  align-items: top;/*세로 정렬*/
}
.visual .container .notice{
	display:inline-block;
	width:625px;
	vertical-align:top;
}
.visual .container .notice>ul.tab{
  display:inline-block !important;
	width:100%;
	height:60px;
  margin-bottom:30px !important;
  text-align:left;
	border-top:1px solid rgba(255, 255, 255 ,0.5);
	border-bottom:1px solid rgba(255, 255, 255 ,0.5);

}
.visual .container .notice>ul.tab>li{
	position:relative;
	width:100px;
	height:100%;
  border:none;
}
.visual .container .notice>ul.tab>li>a{
	display:flex;
	position:absolute;
	top:-1px;
	left:0;
	width:100%;
	height:60px;
	font-size:1.3rem;
  color:rgba(255, 255, 255 ,0.7);
	text-align:center;
  justify-content: center;/*가로 정렬*/
  align-items: center;/*세로 정렬*/
}
.visual .container .notice>ul.tab>li:hover>a, .visual .container .notice>ul.tab>li.active>a{
	color:#fff;
	font-weight:400;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
}
.visual .container .notice>.list{
	display:inline-block;
	position:relative;
	width:100%;
	padding-left:285px;
	text-align:left;
}
.visual .container .notice>.list>span.img{
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
}
.visual .container .notice>.list>ul{
	width:100%;
	height:163px;
}
.visual .container .notice>.list>ul>li{
	position:relative;
	width:100%;
	height:25px;
	margin-top:5px;
	padding-left:10px;
	padding-right:70px;
	/*background:url(../../img/boardDot.jpg) center left no-repeat;*/
	box-sizing: border-box;
}
.visual .container .notice>.list>ul>li::before{
  content: '';
  position:absolute;
  top:11px;
  left:0;
  width:3px;
  height:3px;
  border-radius:3px;
  background-color:rgba(255, 255, 255, 0.7);
  vertical-align:top;
}
.visual .container .notice>.list>ul>li>a{
	display:inline-block;
	width:100%;
	height:100%;
  font-size:1.05rem;
  line-height:25px;
  color:rgba(255, 255, 255, 0.7);
  letter-spacing:-0.03rem;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.visual .container .notice>.list>ul>li:hover a, .visual .container .notice>.list>ul>li>a:hover{
  color:rgba(255, 255, 255, 1);
}
.visual .container .notice>.list>ul>li span.date{
	display:inline-block;
	position:absolute;
	top:0;
	right:0;
	font-size:0.8rem;
	line-height:25px;
	color:rgba(255, 255, 255, 0.5);
	font-weight:600;
}
.visual .container .link{
	display:flex;
	width:515px;
	height:253px;
	margin-left:55px;
	text-align:center;
  align-items: center;/*세로 중앙정렬*/
  justify-content: center;/*가로 중앙정렬*/
}
.visual .container .link>a{
	display:flex;
	width:48%;
	height:100%;
	font-size:1.5rem;
	line-height:1.8rem;
	color:#fff;
  border:2px solid #fff;
  border-radius:15px;
	box-sizing:border-box;
  justify-content: center;/*가로 정렬*/
  align-items: center;/*세로 정렬*/
  flex-flow:column;/*요소 세로정렬*/
	vertical-align:top;

}
.visual .container .link>a.element1{
	margin-right:3%;
}
.visual .container .link>a.element2{
}
.visual .container .link>a>span, .visual .container .link>a>strong, .visual .container .link>a>strong>b, .visual .container .link>a>i{
	display:inline-block;
	width:100%;
}
.visual .container .link>a>span{
  margin-bottom:5px;
}
.visual .container .link>a>span>font.active{
  display:none;
}
.visual .container .link>a>span>font.mo{
  display:none;
}
.visual .container .link>a>strong, .visual .container .link>a>strong>b{
	font-size:1.5rem;
	line-height:1.8rem;
	color:#fff;
}
.visual .container .link>a>strong{
	padding-top:5px;
	padding-bottom:5px;
	font-weight:400;
}
.visual .container .link>a>i{
  width:27px;
  height:27px;
  border:2px solid #fff;
  border-radius:27px;
  background: url(../../img/iconLink1.png) center center no-repeat;
}

.visual .container .link>a:hover, .visual .container .link>a.active{
  border:2px solid #fe677c;
}
.visual .container .link>a:hover>span>font.basic{
  display:none;
}
.visual .container .link>a:hover>span>font.active{
  display:inline-block;
}
.visual .container .link>a:hover>strong, .visual .container .link>a.active>strong, .visual .container .link>a:hover>strong>b, .visual .container .link>a.active>strong>b{
  color:#fe677c;
}
.visual .container .link>a:hover>i, .visual .container .link>a.active>i{
  border:2px solid #fe677c;
  background: url(../../img/iconLink2.png) center center no-repeat;
}


.naviM{
  display:none;
  justify-content: center;/*가로 정렬*/
  align-items: center;/*세로 정렬*/
}
.naviM>a{
  display:flex;
  width:33.3%;
  height:90px;
  font-size:1.15rem;
  line-height:1.15rem;
  justify-content: center;/*가로 정렬*/
  align-items: center;/*세로 정렬*/
  flex-flow:column;/*요소 세로정렬*/
}
}
.naviM>a.element1{
  color:#666;
  background-color:#fff;
}
.naviM>a.element2{
  color:#fff;
  background-color:#da465b;
}
.naviM>a.element3{
  color:#fff;
  background-color:#31427a;
}

.naviM>a>i{
  width:16px;
  height:16px;
  margin-top:5px;
  border-radius:16px;
  border:1px solid #fff;
  background: url(../../img/iconNavi2.png) center center no-repeat;
  opacity:0.8;
}
.naviM>a.element1>i{
  border:1px solid #3c4f8c;
  background: url(../../img/iconNavi1.png) center center no-repeat;
}

@media only screen and (max-width : 1024px){
  .visual{
    height:auto;
  }
  .visual .web{
    display:none;
  }
  .visual .mob{
    display:block;
  }
  .visual .container{
    display:block;
    position:relative;
    margin-top:30px;
    margin-bottom:80px;
    bottom:auto;
    left:auto;
    -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0);
  }
  .visual .container .notice{
    width:100%;
  }
  .visual .container .notice>ul.tab{
    border-top: 1px solid rgba(85, 85, 85 ,0.5);
    border-bottom: 1px solid rgba(85, 85, 85 ,0.5);
  }
  .visual .container .notice>ul.tab>li>a{
    color: rgba(85, 85, 85 ,0.7);
  }
  .visual .container .notice>ul.tab>li:hover>a, .visual .container .notice>ul.tab>li.active>a{
	color:#31427a;
	font-weight:600;
	border-top:1px solid #31427a;
	border-bottom:1px solid #31427a;
  }
  .visual .container .notice>.list>ul>li::before{
    background-color: rgba(85, 85, 85, 0.7);
  }
  .visual .container .notice>.list>ul>li>a{
    color: rgba(85, 85, 85 ,0.9);
  }
  .visual .container .notice>.list>ul>li:hover a, .visual .container .notice>.list>ul>li>a:hover{
    color:rgba(49, 66, 122, 1);
  }
  .visual .container .notice>.list>ul>li span.date{
    color: rgba(85, 85, 85, 0.5);
  }
  .visual .container .link{
    width:100%;
    height:auto;
    margin-top:20px;
    margin-left:0;
  }
  .visual .container .link>a{
    padding:20px 0;
    border: 1px solid #fe677c;
    background-color:#fff0f2;
  }
  .visual .container .link>a>span>font.basic{
    display:none;
  }
  .visual .container .link>a>span>font.active{
    display:inline-block;
  }
  .visual .container .link>a:hover, .visual .container .link>a.active{
    border:1px solid #fe677c;
  }
  .visual .container .link>a:hover>i, .visual .container .link>a.active>i{
    background: url(../../img/iconLink2.png) center center no-repeat;
    background-size:4px;
  }

  .visual .container .link>a>span>font.mo{
    display:none;
  }
  .visual .container .link>a>span>font.basic{
    display:none;
  }
  .visual .container .link>a>strong, .visual .container .link>a>strong>b{
    color:#fe677c;
  }
  .visual .container .link>a>i{
    border:2px solid #fe677c;
    background: url(../../img/iconLink2.png) center center no-repeat #fff;
  }
  .visual .container .link>a:hover>span>font.mo{
    display:none;
  }
  .visual .container .link>a:hover>span>font.active{
    display:block;
  }
  .naviM{
    display:flex;
  }
}
@media only screen and (max-width : 640px){

  .visual .container .notice>ul.tab{
    margin-bottom:10px !important;
  }
  .visual .container .notice>ul.tab>li{
    margin-top:0 !important;
  }
  .visual .container .notice>.list{
    padding-left:0;
  }
  .visual .container .notice>.list>span.img{
    display:none;
  }
  .visual .container .link>a>span>font img{
    width:36px;
  }
  .visual .container .link>a>i{
    width:20px;
    height:20px;
    background-size:4px;
  }

}
@media only screen and (max-width : 460px){

	.visual .container .link{
		height:100%;
	}

	.visual .container .link>a>strong, .visual .contBox .link>a>strong>b{
		font-size:1.3rem;
		line-height:1.5rem;
	}



}




.visual .web div.title{
  position:absolute;
  top:200px;
  left:50%;
  width:100%;
    -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0);
}
.visual .web div.title>b, .visual .web div.title>strong, .visual .web div.title>span, .visual .web div.title>p{
  display:inline-block;
  width:100%;
  color:#fff;
  text-align:center;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
}
.visual .web div.title>b{
  margin-bottom:10px;
  font-size:3.5rem;
  line-height:3.5rem;
  font-weight:400;
  letter-spacing:-0.18rem;
}
.visual .web div.title>strong{
  margin-bottom:30px;
  font-size:5rem;
  line-height:5rem;
  letter-spacing:-0.18rem;
  font-weight:400;

}
.visual .web div.title>strong>font{
  font-weight:600;
  color:#00fcff;
}
/*.visual .web div.title>strong{
  margin-bottom:30px;
  font-size:5rem;
  line-height:5rem;
  letter-spacing:-0.18rem;
}*/
.visual .web div.title>span{
  margin-bottom:15px;
}
.visual .web div.title>span>font{
  display:inline-block;
  width:100%;
  margin-bottom:5px;
  font-size:1.3rem;
  line-height:1.3rem;
}
.visual .web div.title>p>font{
  display:inline-block;
  width:100%;
  margin-bottom:3px;
  font-size:0.9rem;
  line-height:0.9rem;
  letter-spacing:-0.02rem;
}

.visual .mob div.title{
  position:absolute;
  top:40%;
  left:50%;
  width:100%;
    -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
.visual .mob div.title>b, .visual .mob div.title>strong, .visual .mob div.title>span, .visual .mob div.title>p{
  display:inline-block;
  width:100%;
  color:#fff;
  text-align:center;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
}
.visual .mob div.title>b{
  margin-bottom:10px;
  font-size:2.5rem;
  line-height:2.5rem;
  font-weight:400;
  letter-spacing:-0.15rem;
}
.visual .mob div.title>strong{
  font-size:4rem;
  line-height:4rem;
  letter-spacing:-0.15rem;
  word-break: keep-all;
}
.visual .mob div.title>strong>font{
  color:#00fcff;
}
.visual .mob div.title>span{
  margin-bottom:15px;
}
.visual .mob div.title>span>font{
  display:inline-block;
  width:100%;
  margin-bottom:5px;
  font-size:1.2rem;
  line-height:1.2rem;
}
.visual .mob div.title>p>font{
  display:inline-block;
  width:100%;
  margin-bottom:3px;
  font-size:0.9rem;
  line-height:0.9rem;
  letter-spacing:-0.02rem;
}
@media only screen and (max-width : 640px){
  .visual .mob div.title{
    width:96%;
    text-align: center;
  }
  .visual .mob div.title>b{
    margin-bottom:5px;
    font-size:1.5rem;
    line-height:1.5rem;
    letter-spacing:-0.1rem;
  }
  .visual .mob div.title>strong{

    font-size:2rem;
    line-height:2rem;
    letter-spacing:-0.1rem;
  }
  .visual .mob div.title>span{
    max-width:320px;
    margin-bottom:15px;
  }
  .visual .mob div.title>span>font{
    margin-bottom:0;
    font-size:0.9rem;
    line-height:1.1rem;
    word-break: keep-all;
  }

}



.visual .visual_imgArea{
	position:absolute;
	top:0;
	left:0;
	z-index:-2;
	visibility:hidden;
	opacity:1;
	width:100%;
	height:910px;
	text-align:center;
	-webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; -o-transition: all 2s; transition: all 2s;
}
.visual .visual_imgAreaActive{
	visibility:visible; opacity:1; top:0;
}
.visualM_imgArea{
  width:100%;

}
.visualM_imgArea>img{
  width:100%;
}
#visual_bg1{
	background: url(../../img/visual_bg1.jpg) top center no-repeat #110e19;
  background-size: cover;
}
#visual_bg2{
	background: url(../../img/visual_bg2.jpg) top center no-repeat;
	background-size: cover;
}
#visual_bg3{
	background: url(../../img/visual_bg3.jpg) top center no-repeat;
	background-size: cover;
}


.mainMobVisual{
  width:100%;
  overflow:hidden;
}
.mainMobVisual>div{
	position:absolute;
}
@media only screen and (max-width : 640px){

}





/*메타서치 (정의)*/
.define{
  margin: 70px 0;
  background-color:#fff;

}
.define .container{
  position:relative;
  display:flex;
  justify-content: center;/*가로 정렬*/
  align-items: center;/*세로 정렬*/
  flex-flow:column;/*요소 세로정렬*/
}
.define a.more{
  top:-10px;
}
.define i, .define strong,  .define span{
  display:inline-block;
  width:100%;
  text-align: center;
  word-break: keep-all;
}
.define i{
  margin-bottom:10px;
}
.define strong{
  font-size:2.5rem;
  line-height:2.5rem;
  letter-spacing:-0.1rem;
  font-weight:300;
}
.define strong>font{
  font-weight:500;
}
.define span{
  margin-top:10px;
  font-size:1.05rem;
  line-height:1.45rem;
  opacity:0.8;
}
.define span>font{
  display:inline-block;
}
@media only screen and (max-width : 1024px){
  .define{
    margin-top:30px;
  }
  .define .container a.more{
    right:10px;
  }
}
@media only screen and (max-width : 640px){
  .define i img{
    width:24px;
  }
}

/*조사*/
.investigation{
  margin-bottom:100px;
  background:url(../../img/investigationBg1.jpg) top center  no-repeat;
  /*background-position:top center;
  background-repeat: no-repeat;
  background-size:100%;*/
  /*background-attachment: fixed;*/
  overflow:hidden;
}

.investigation .container{
  padding-top:150px;
  padding-bottom:150px;
  font-size:0;
  line-height:0;
}
.investigation .title{
  margin-bottom:60px;
}
.investigation .title a.more{
  top:-10px;
}
.investigation .title i, .investigation .title strong,  .investigation .title span{
  display:inline-block;
  width:100%;
  text-align: center;
  word-break: keep-all;
}
.investigation .title i{
  margin-bottom:10px;
}
.investigation .title strong{
  font-size:2.5rem;
  line-height:2.5rem;
  letter-spacing:-0.1rem;
  font-weight:300;
}
.investigation .title strong>font{
  font-weight:500;
}
.investigation .title span{
  margin-top:10px;
  font-size:1.05rem;
  line-height:1.45rem;
  opacity:0.8;
}
.investigation .title span>font{
  display:inline-block;
}




.investigation ul{
  width:100%;
}
.investigation ul li{
  width:24%;
  vertical-align:top;

  /*margin-left:1.33%;*/
  font-size:0;
  line-height:0;
}
.investigation ul li:first-child{
  margin-left:0;
}

.investigation ul li strong{
  display:inline-block;
  width:100%;
  margin-bottom:15px;
  font-size:1.25rem;
  line-height:1.25rem;
  font-weight:400;
  text-align: center;
}
.investigation ul li .img{
  position:relative;
  width:100%;
  height:230px;
  font-size:0;
  line-height:0;
}
.investigation ul li .img .txt{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  padding: 0 15px;
  text-align: center;
  -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
  box-sizing: border-box;
}


.investigation ul li .img i, .investigation ul li .img span{
  display:inline-block;
  word-break: keep-all;
}
.investigation ul li .img i{
  width:27px;
  height:27px;
  border:2px solid #fff;
  border-radius:27px;
  border-radius:27px;
  background: url(../../img/iconLink1.png) center center no-repeat;
}
.investigation ul li .img span{
  width:100%;
  margin-top:5px;
  font-size:1.1rem;
  line-height:1.4rem;
  color:#fff;
  font-weight:200;
}
.investigation ul li .img span>font{
  display:inline-block;
  width:100%;
}
.investigation ul li .img .bg{
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.7);
}
.investigation ul li .img .border{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:5px solid #fff;
  box-sizing: border-box;
  box-shadow: 3px 3px 5px 5px rgba(0,0,0,0.3) inset;
  opacity:0

}


.investigation .element1 .img{
  background: url(../../img/investigation1.jpg) top center no-repeat;
  background-size:cover;
}
.investigation .element2 .img{
  background: url(../../img/investigation2.jpg) top center no-repeat;
  background-size:cover;
}
.investigation .element3 .img{
  background: url(../../img/investigation3.jpg) top center no-repeat;
  background-size:cover;
}
.investigation .element4 .img{
  background: url(../../img/investigation4.jpg) top center no-repeat;
  background-size:cover;
}

.investigation ul li:hover .txt, .investigation ul li.active .txt, .investigation ul li:hover .bg, .investigation ul li.active .bg{
  animation: 0.5s ease-out;
  animation-name: investigationHover;
  animation-fill-mode: forwards; /*마지막 상태 유지*/
}
@keyframes investigationHover {
0% {
  opacity:1;
}
50%{
  opacity:0;
}
100%{
  opacity:0;
}
}
.investigation ul li:hover .border{
  animation: 0.5s ease-out;
  animation-name: investigationHover2;
  animation-fill-mode: forwards; /*마지막 상태 유지*/
}
@keyframes investigationHover2 {
0% {
  opacity:0;
}
50%{
  opacity:0;
}
100%{
  opacity:1;
}
}

.investigation.sub{
  margin-top:50px;
  margin-bottom:0;
  background:none;
}
.investigation.sub .container{
  padding:0;
}
.investigation.sub .border{
  display:none;
}
.investigation.sub .img{
  border:1px solid #e1e1e1;
}
@media only screen and (max-width : 1440px){
  .investigation ul li .img span{
    font-size:1rem;
    line-height:1.3rem;
  }
  .investigation ul li strong.long{
    letter-spacing:-0.12rem;
  }
}
@media only screen and (max-width : 1024px){
  .investigation{
    margin-bottom:70px;
  }
  .investigation .container{
    padding-top:70px;
    padding-bottom:80px;
  }
  .investigation ul li{
    width:280px;

  }
  .investigation.sub{
    /*display:none;*/
  }
}
@media only screen and (max-width : 640px){

}
@media only screen and (max-width : 1024px){
  .investigation .title{
    margin-bottom:40px;
  }
  .investigation .title  a.more{
    right:10px;
  }

}
@media only screen and (max-width : 640px){
  .investigation .define i img{
    width:24px;
  }
}




.trend{
  margin-bottom:100px;
}
.trend strong.title{
  display:inline-block;
  position:relative;
  width:100%;
  margin-bottom:40px;
  font-size:2.5rem;
  line-height:2.5rem;
  font-weight:400;
  text-align: center;
}
.trend strong.title a.more{
  top:8px
}
.trend ul>li{
  width:22.75%;
  margin-left:3%;
  vertical-align:top;
}
.trend ul>li:first-child{
  margin-left:0;
}
.trend ul>li .img{
  height:270px;
  padding:40px;
  text-align:center;
  background-color:#3c4f8c;
  border-radius:20px;
  vertical-align:top;
  box-sizing: border-box;
}
.trend ul>li:nth-child(3) .img, .trend ul>li:nth-child(4) .img{
  background-color:#da465b;
}
.trend ul>li .img>div{
  display:flex;
  position:relative;
  width:100%;
  height:100%;
  border:3px solid rgba(225, 225, 225, 0.6);
  justify-content:top;/*가로 정렬*/
  align-items:center;/*세로 중앙정렬*/
  flex-flow:column;/*요소 세로정렬*/
  box-sizing: border-box;
}
.trend ul>li .img b, .trend ul>li .img strong, .trend ul>li .img span{
  display:inline-block;
  width:100%;
  color:#fff;
  font-weight:400;
  text-align:center;

}
.trend ul>li .img b{
  position:absolute;
  top:10px;
  left:0;
  font-family: 'AppleSDGothicNeoB';
  font-size:0.8rem;
  line-height:0.8rem;
  letter-spacing:-0.01rem;
  font-weight:600;
  text-transform: uppercase;
  z-index:1;
}
.trend ul>li .img strong{
  position:absolute;
  top:50%;
  left:0;
  font-family: 'GmarketSansBold';
  font-size:1.5rem;
  line-height:1.9rem;
  -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%);
  z-index:1;
}
.trend ul>li .img span.bg{
  height:100%;
  opacity:0.6;
}
.trend ul>li.element1 .img span.bg{
    background-image: url(../../img/trend1.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size:cover;
}
.trend ul>li.element2 .img span.bg{
  background-image: url(../../img/trend2.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size:cover;
}
.trend ul>li.element3 .img span.bg{
  background-image: url(../../img/trend3.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size:cover;
}
.trend ul>li.element4 .img span.bg{
  background-image: url(../../img/trend4.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size:cover;
}
.trend ul>li .txt{
  margin-top:35px;
}
.trend ul>li .txt>strong, .trend ul>li .txt>p, .trend ul>li .txt>b{
  display:inline-block;
  width:100%;
  font-family: 'AppleSDGothicNeoM';
  text-align: left;
  word-break: keep-all;
}
.trend ul>li .txt>strong{
  margin-bottom:15px;
  font-size:1.25rem;
  line-height:1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trend ul>li .txt>p{
  margin-bottom:15px;
  font-size:1rem;
  line-height:1.3rem;
  letter-spacing:-0.01rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.trend ul>li .txt>b{
  font-size:0.9rem;
  line-height:0.9rem;
  font-weight:400;
}
.trend ul>li:hover .img>div, .trend ul>li.active .img>div{
  border:3px solid rgba(225, 225, 225, 0.3);
  -webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
}
.trend ul>li:hover .img span.bg, .trend ul>li.active .img span.bg{
  opacity:0.3;
}
@media only screen and (max-width : 1440px){
  .trend ul>li{
    width:24.25%;
    margin-left:1%;
  }
}
@media only screen and (max-width : 1024px){
  .trend{
    margin-bottom:80px;
  }
  .trend .container{
    text-align: center;
  }
  .trend ul{
    width:600px;
    margin: 0 auto;
  }
  .trend ul>li{
    width:47.5%;
    margin-left:5%;
  }
  .trend ul>li:nth-child(1), .trend ul>li:nth-child(2){
    margin-bottom:30px;
  }
  .trend ul>li:nth-child(2n-1){
    margin-left:0;
  }
  .trend ul>li .img{
    height:160px;
    padding:20px;
    border-radius:10px;
  }
  .trend ul>li .txt{
    margin-top:20px;
  }
  .trend ul>li .txt>strong, .trend ul>li .txt>p, .trend ul>li .txt>b{
    text-align: center;
  }
  .trend ul>li .img strong{
    font-size:1.3rem;
    line-height:1.3rem;
  }
}
@media only screen and (max-width : 640px){
  .trend ul{
    width:100%;
  }
}
@media only screen and (max-width : 460px){
  .trend ul{
    max-width:270px;
  }
  .trend ul>li{
    width:100%;
    margin-left:0;
    margin-bottom:20px;
  }
  .trend ul>li:nth-child(4){
    margin-bottom:0;
  }
}

#footer{

}
#footer .top{
  padding: 15px 0;
  background-color:#f2f2f2;
  border-top:1px solid #d9d9d9;
  border-bottom:1px solid #d9d9d9;

  box-sizing: border-box;
}
#footer .top>.container{
  display:flex;
  justify-content: space-between;
  align-items:center;/*세로 정렬*/

}
#footer .top ul{
  display:flex;
  width:100%;
  align-items: center;/*세로 중앙정렬*/
  justify-content: center;/*가로 중앙정렬*/
  text-align:center;
}
#footer .top ul>li{

}
#footer .top ul>li::before{
  content: '';
  display:inline-block;
  width:1px;
  height:10px;
  background-color:#d7d5d5;
}
#footer .top ul>li:first-child::before{
  display:none;
}
#footer .top ul>li>a{
  display:inline-block;
  padding: 0 20px;
  font-size:0.95rem;
  line-height:0.95rem;
  font-weight:600;
}
#footer .top dl{
  /*display:flex;*/
  display:none;
  align-items: center;/*세로 중앙정렬*/
  justify-content: center;/*가로 중앙정렬*/
}
#footer .top dl>dd{
  padding: 5px 0;
}

#footer .bottom{
  display:flex;
  padding: 50px 0;
  align-items: center;/*세로 중앙정렬*/
  justify-content: center;/*가로 중앙정렬*/
  background-color:#fff;
}
#footer .bottom a.logo{
  display:inline-block;
  margin-right:15px;
}

#footer .bottom a.logo>img{
  width:107px;
}
#footer .bottom div{}
#footer .bottom strong{
  display:flex;
  align-items: center;/*세로 중앙정렬*/
  justify-content: left;/*가로 중앙정렬*/
}
#footer .bottom strong>b, #footer .bottom strong>span, #footer .bottom strong>a{
  display:inline-block;
  margin-right:5px;
  word-break: keep-all;
}
#footer .bottom strong>b>img{
  width:48px;
}
#footer .bottom strong>a{
  padding-top:3.5px;
  font-family: 'GmarketSansBold';
}
#footer .bottom i{
  display:block;
  font-size:0.7rem;
  line-height:0.7rem;
  letter-spacing:0rem;
  font-style: normal;
  text-transform:uppercase;
  opacity:0.7;
}
@media only screen and (max-width : 1024px){
  #footer .top{
    padding: 20px 0;
  }
  #footer .top>.container{
    display:block;
  }
  #footer .top ul{
    width:100%;
  }
  #footer .top ul>li>a{
    padding: 0 10px;
    font-weight:400;
  }
  #footer .top dl{
    margin-top:5px;
  }
  #footer .top dl>dd img{
    width:24px;
  }
  #footer .bottom{
    display:block;
    padding: 30px 0;
    text-align: center;
  }
  #footer .bottom a.logo{
    margin-bottom:5px;
    margin-right:0;
  }
  #footer .bottom strong{
    display:block;
    text-align: center;
  }
  #footer .bottom strong>b, #footer .bottom strong>span, #footer .bottom strong>a{
    width:100%;
    margin-right:0;
    margin-top:3px;
  }
  #footer .bottom strong>span{
    font-weight:400;
  }
  #footer .bottom strong>a{
    margin-top:0;
    padding-bottom:3px;
    font-family: 'GmarketSansMedium';
    letter-spacing:0rem;
  }
}
@media only screen and (max-width : 460px){
  #footer .top ul>li>a{
    padding: 0 7px;
    font-size:0.85rem;
    line-height:0.85rem;
  }
  .bottom strong>span{
    font-size:0.95rem;
    line-height:1rem;
  }
}

#container{
  margin-bottom:100px;
}

.subVisual{
  height:350px;
  background:url(../../img/subVisualBg.jpg) top center no-repeat #121724;
}
.subVisual .title{
  display:flex;
  height:100%;
  justify-content:center;/*가로 정렬*/
  align-items: center;;/*세로 중앙정렬*/
  flex-flow:column;/*요소 세로정렬*/
}
.subVisual .title b, .subVisual .title strong, .subVisual .title span{
  display:inline-block;
  text-align:center;
  color:#fff;
  font-weight:400;
  word-break: keep-all;
  text-shadow:3px 3px 5px rgba(0, 0, 0 ,0.5)
}
.subVisual .title b{
  margin-bottom:5px;
  font-size:2.5rem;
  line-height:2.5rem;
}
.subVisual .title strong{
  margin-bottom:15px;
  font-size:3.5rem;
  line-height:3.5rem;
  font-weight:400;
}
.subVisual .title strong>font{
  color:#00fcff;
  font-weight:600;
}
.subVisual .title span>font{
  display:inline-block;
  width:100%;
}
@media only screen and (max-width : 1024px){
  .subVisual{
    display:none;
  }
}



.subTitle{
  display:flex;
  width:100%;
  margin-top:60px;
  margin-bottom:60px;
  align-items: center;/*세로 중앙정렬*/
  justify-content: center;/*가로 중앙정렬*/
  flex-flow: column;
}
.subTitle strong, .subTitle i{
  display:inline-block;
}
.subTitle strong{
  font-size:2.5rem;
  line-height:2.5rem;
  font-weight:400;
  color:#484747;
}
.subTitle i{

  margin-top:20px;
  padding-top:8px;
  text-align: center;

  box-sizing: border-box;
}

/*서브메뉴*/
.navSub{

	width:100%;
	height:70px;
	font-size:0;
	line-height:0;
	text-align:center;
	border-bottom:1px solid #e5e5e5;
  background-color:#f3f5f8;

}
.navSub>li{
	position:relative;
	display:inline-block;
	padding:0 10px;
	margin: 0 10px;
}
.navSub>li>a{
	display:inline-block;
	width:100%;
	height:100%;
	font-size:1.2rem;
	line-height:70px;
	font-weight:400;
}
.navSub>li:hover>a, .navSub>li.active>a{
	color:#da465b;
	font-weight:500;

}
.navSub .line{
  position: absolute;
  display: inline-block;
  bottom:0px;
  height: 1px;
  width: 0%;
  background: #da465b;
  left: 56px;
  z-index:2 !important;
}
.navSub>li:hover .line, .navSub>li.active .line{
  width:100% !important; left:0 !important;
}
.navSub>li>a{
	position:relative;
	height:100%;
}
.navSub>li:not(.active)>a:before, .navSub>li:not(.active)>a:after{
	content: "";
	left:0;
	bottom:-5px;
	width:100%;
	position:absolute;
	transition: all 0.3s ease;
}

.navSub>li>a:hover:before, .navSub>li>a:hover:after{
	width:100%;
	bottom:0;
	/*border-bottom: solid 5px #050060;*/
}
.navSub.planning, .navSub.house, .navSub.paper, .navSub.premium, .navSub.complex, .navSub.generation, .navSub.pr, .navSub.reservation{
	display:none
}
@media only screen and (max-width : 1024px){
	.navSub{
		position:relative;
		top:auto;
		height:51px;
		padding:0 5px;
		border-bottom:1px solid #f1f1f1;
		background-color:#fbfbfb;
		white-space: nowrap;
    overflow-x: auto;
		overflow-y:hidden;
		box-sizing:border-box;

	}
	.navSub>li{
		padding: 0 0 0 5px;
		margin: 0 8px;
		background:url(../../img/iconBar.jpg) left center no-repeat;
		box-sizing:border-box;
	}
	.navSub>li>a{
		font-size:1rem;
		line-height:50px;
		letter-spacing:-0.05rem;
	}
	.navSub .line{
		display:none;
	}
}







.content{
  width:1200px;
  margin: 0 auto;
  min-height:300px;
  font-size:0;
  line-height:0;
}
@media only screen and (max-width : 1440px){
  .content{
    max-width:1200px;
    width:100%;
    padding-left:10px;
    padding-right:10px;
    box-sizing: border-box;
  }
}

.tab2{
  width:100%;
  background: url(../../img/tab_bg.jpg) left bottom repeat-x;
}
.tab2>li{
  width:49%;
  margin: 0 0.5%;
  border:1px solid #e3e3e3;
  background-color:#f4f4f4;
}
.tab2>li>a{
  display:inline-block;
  width:100%;
  padding:15px 0;
  font-size:1.3rem;
  line-height:1.3rem;
  color:#777;
  text-align: center;
}
.tab2>li>a>b{
  font-weight:500;
}
.tab2>li:hover, .tab2>li.active{
  border-bottom:1px solid #fff;
  background-color:#fff;
}
.tab2>li:hover>a, .tab2>li.active>a{
  font-weight:500;
  color:#212a87;
}



a.more{
  display:inline-block;
  position:absolute;
  top:0;
  right:0;
  width:20px;
  height:20px;
}
a.more>span{
  display:inline-block;
  position:absolute;
  background-color:#666;
}
a.more.w>span{
  background-color:#fff;
}
a.more>span.hori{
  top:50%;
  left:0;
  width:100%;
  height:0.5px;
  -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%);
}

a.more>span.vert{
  top:0;
  left:50%;
  width:0.5px;
  height:100%;
  -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0);
}



ul.tab{
  display:flex;
  max-width:1200px;
  width:100%;
  margin: 0 auto;
  margin-bottom:60px;
  justify-content: center;/*가로 정렬*/
  align-items:top;/*세로 정렬*/
}
ul.tab>li{
  position:relative;
  width:24.25%;
  height:60px;
  margin-left:1%;
  padding:15px 0;
  text-align: center;

  border:1px solid #cebaa1;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
}
ul.tab>li:first-child{
  margin-left:0;
}
ul.tab>li:hover, ul.tab>li.active{
  border:3px solid #9e7643;
}
ul.tab>li font{
  position:absolute;
  top:50%;
  left:50%;
  display:inline-block;
  font-size:1.35rem;
  line-height:1.35rem;
  color:#97692b;
  word-break: keep-all;
  -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
  -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
}
ul.tab>li:hover>font, ul.tab>li.active>font{
  font-weight:500;
}
@media only screen and (max-width : 640px){
  ul.tab{
    flex-flow: column;
  }
  ul.tab>li{
    width:100%;
    height:50px;
    margin-left:0;
    margin-top:1%;
  }
    ul.tab>li:first-child{
      margin-top:0;
    }
}


/* the slides */
.slick-slide {
	margin: 0 10px;
}

/* the parent */
.slick-list {
	margin: 0 -10px;
}

@media only screen and (max-width : 640px){
	.slick-slide {
		margin: 0;
	}
	.slick-list {
		margin: 0;
	}
}




/*sns*/
.sns{
  position:fixed;
  bottom:80px;
  right:20px;
  width:120px;
  height:120px;
  z-index:3;
}
.sns a.base{
  display:inline-block;
  position:absolute;
  bottom:0;
  right:0;
  width:32px;
  z-index:2;

}
.sns div.element{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.sns div.element>a{
  display:inline-block;
  position:absolute;
  width:32px;
  height:32px;
  border-radius:34px;
  transform: scale(0);
}
.sns div.element>a{
  box-shadow: 2px 2px 2px rgba(0,0,0,0.4)
}
.sns div.element>a.show{
	animation: snsdiv 1s forwards;
}
.sns div.element>a.hide{
	animation: snsdivhide 1s forwards;
}
.sns div.element>a.element1{
  bottom:45px;
  right:0;
  background-color:#fae300;
}
.sns div.element>a.element2{
  bottom:18px;
  right:40px;
  background-color:#3b5998;
}
.sns div.element>a.element3{
  bottom:-25px;
  right:40px;
  background-color:#7a39c5;
}
.sns div.element>a.element4{
  bottom:-45px;
  right:0;
  background-color:#dd2925;
}

@keyframes snsdiv{
	from{transform:scale(0) rotate(180deg)}
	to{transform:scale(1) rotate(0deg)}
}
@keyframes snsdivhide{
	from{transform:scale(1) rotate(0deg)}
	to{transform:scale(0) rotate(180deg)}
}