header {
position:fixed;
left:0;
top:0;
width:100%;
padding:0 3%!important;
z-index:100;
background-color:#fff;
transition:0.3s
}

header .head_in {
height:90px;
position:relative
}
header h1 {
position:absolute;
left:0;
top:50%;
margin-top:-28px;
z-index:5
}
header h1 a {
display:block;
width:178px;
height:57px;
background-image:url(../img/logo-co.png);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
transition:0.3s
}
header .gnb {
text-align:center;
position:relative;
padding-right:0;
transition:0.3s
}
header .gnb .depth1-list {
display:flex;
justify-content:center
}
header .gnb .depth1-list>li {
position:relative
}
header .gnb .depth1-list>li>a {
display:block;
line-height:90px;
padding:0 30px;
letter-spacing:.02em;
color:#171717;
transition:0.3s;
font-family:"Noto Sans KR";
font-weight:400
}
header .gnb .depth1-list>li a:nth-child(2) {
padding:0 20px!important
}
header .gnb .depth2-list {
position:absolute;
left:0;
top:100%;
width:100%;
display:none;
box-sizing:border-box
}
header .gnb .depth2-list ul {
background-color:#0793aa;
padding:20px 0;
max-width:150px;
margin:0 5px;
box-sizing:border-box
}
header .gnb .depth2-list ul li a {
display:block;
color:#fff;
font-size:.88rem;
line-height:2em;
font-weight:300
}
header .head_info {
display:flex;
align-items:center;
position:absolute;
right:0;
top:50%;
transform:translate(0,-50%);
z-index:4;
padding-left:2rem
}
header .head_info:before {
content:"";
width:1.188rem;
height:1.188rem;
position:absolute;
left:0;
top:0;
bottom:0;
margin:auto;
background:url(../img/tel.png) center no-repeat;
transform:translateY(0);
background-size:cover;
transition:0.3s
}
header .head_info p {
display:flex;
align-items:flex-end;
margin-right:0
}
header .head_info p span {
margin-right:10px;
font-size:.938rem;
color:#282828;
transition:0.3s
}
header .head_info p strong {
font-weight:900;
font-size:1.5rem;
color:#0793aa;
letter-spacing:0;
transition:0.3s
}
header .head_info .open {
font-size:.875rem;
padding:0 15px;
line-height:33px;
border-radius:30px;
color:#0793aa;
border:1px solid #0793aa;
transition:0.3s
}
header .gnb {
text-align:center;
position:relative;
padding-right:0;
transition:0.3s
}
header .gnb .depth1-list {
display:flex;
justify-content:center
}
header.head_info .open strong {
font-weight:600;
letter-spacing:0em
}
header .menu {
position:absolute;
right:0;
top:50%;
transform:translate(0,-50%);
display:flex;
align-items:center;
background:none;
border:none;
z-index:5
}
header .menu .line {
display:none;
width:23px
}
header .menu .line span {
display:block;
background-color:#0793aa;
height:2px;
width:100%;
position:relative;
transition:0.3s
}
header .menu .line span~span {
margin-top:5px
}
header .menu p {
font-family:"Marcellus";
font-size:1.063rem;
padding-left:10px;
position:relative;
color:#111;
transition:0.3s
}
header .menu .dot {
display:block;
width:3px;
height:3px;
transition:0.3s;
position:absolute;
left:0;
background-color:#111
}
header .menu .dot.top {
top:2px
}
header .menu .dot.bot {
bottom:3px
}
header .menu.close p {
color:#111!important
}
header .menu.close .dot {
width:3px;
height:14px;
background-color:#111
}
header .menu.close .dot.top {
transform:rotate(45deg);
top:1px
}
header .menu.close .dot.bot {
transform:rotate(-45deg);
bottom:2px
}
header .menu.close .line span:first-child {
transform:rotate(45deg);
top:7px
}
header .menu.close .line span:nth-child(2) {
opacity:0
}
header .menu.close .line span:last-child {
transform:rotate(-45deg);
top:-7px
}

.fp-viewing-0 header .gnb .depth1-list>li>a,.fp-viewing-2 header .gnb .depth1-list>li>a {
color:#171717
}
.fp-viewing-6 header .gnb .depth1-list>li>a {
color:#fff
}
.fp-viewing-7 header .gnb .depth1-list>li>a {
color:#fff
}
.fp-viewing-0 header .menu p,.fp-viewing-2 header .menu p {
color:#111
}
.fp-viewing-7 header .menu p {
color:#fff
}
.fp-viewing-7 header .head_info:before {
background:url(../img/tel_w.png) center no-repeat;
background-size:cover
}
.fp-viewing-0 header .head_info p span,.fp-viewing-2 header .head_info p span {
color:#282828
}
.fp-viewing-0 header .head_info p strong,.fp-viewing-2 header .head_info p strong {
color:#0793aa
}
header .head_info p span,.fp-viewing-7 header .head_info p strong {
color:#fff
}
.fp-viewing-0 header .head_info .open,.fp-viewing-2 header .head_info .open {
color:#0793aa;
border:1px solid #0793aa
}
header .head_info .open {
color:#fff;
border:1px solid #fff
}
header .dot,.fp-viewing-2 header .dot {
background-color:#111
}
header .dot {
background-color:rgba(255,255,255,.5)
}

header .menu .line span,.fp-viewing-2 header .menu .line span {
background-color:#0793aa
}
header .menu .line span {
background-color:#fff
}

header:hover h1 a {
background-image:url(../img/logo-co.png)
}
header:hover .gnb .depth1-list>li>a {
color:#171717
}
header .gnb .depth1-list>li>a:hover {
color:#0793aa
}
header:hover .menu p {
color:#111
}
header:hover .dot {
background-color:#111
}
header:hover .head_info p span {
color:#282828
}
header:hover .head_info p strong {
color:#0793aa
}
header:hover .head_info .open {
color:#0793aa;
border:1px solid #0793aa
}
header:hover .menu .line span {
background-color:#0793aa
}
header .nav_on {
background-color:transparent
}
header .nav_on h1 a {
background-image:url(../img/logo-co.png)
}
header .nav_on:hover .menu p {
color:#111
}
header .nav_on .gnb,header.nav_on .head_info {
opacity:0;
z-index:-1
}
header .nav_on .menu .line span {
background-color:#111
}
.ham_wrap {
position:fixed;
width:100%;
left:0;
right:0;
margin:auto!important;
z-index:99;
top:100%
}
.ham {
z-index:99;
position:absolute;
left:65px;
bottom:62px;
width:87px;
height:87px;
border-radius:23%;
background-color:#0793aa;
cursor:pointer;
opacity:1;
transition:0.3s
}
.ham span {
display:block;
background:#070707;
margin:auto;
width:25px;
height:2px;
border-radius:0;
transition:0.25s
}
.ham .bar1 {
margin-top:34px;
margin-bottom:6px
}
.ham .bar2 {
width:14px;
transform:translateX(5px)
}
.ham .bar3 {
margin-top:6px
}
.ham_bg {
width:137px;
height:136px;
background:url(../img/ham_bg_b.png) center no-repeat;
background-size:cover;
transition:0.3s;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) rotate(0);
animation:ham_bg 6s 0s linear infinite;
max-width:revert
}
.fp-viewing-0 .ham_bg,.fp-viewing-1 .ham_bg,.fp-viewing-2 .ham_bg,.fp-viewing-7 .ham_bg {
background:url(../img/ham_bg.png) center no-repeat;
background-size:cover
}
.fp-viewing-8 .ham {
opacity:0
}
@keyframes ham_bg {
from {
 transform:translate(-50%,-50%) rotate(-180deg)
}
}
.ham span {
background-color:#fff
}
.ham.active {
transition:0s
}
.ham.active span {
background-color:#363535;
}
.ham.active .bar1 {
transform:rotate(45deg);
margin-top:42px
}
.ham.active .bar2 {
opacity:0
}
.ham.active .bar3 {
transform:rotate(-45deg);
margin-top:-10px
} 
.sec_menu {
position:fixed;
right:50px;
top:50%;
z-index:50;
transform:translate(0,-50%);
transition:0.3s
}
.sec_menu li {
width:35px;
height:35px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer
}
.sec_menu li~li {
margin-top:25px
}
.sec_menu li span {
position:absolute;
left:0;
top:0;
display:block;
border-radius:50%;
width:100%;
height:100%;
transform:scale(0);
transition:0.3s
}
.sec_menu li em {
width:5px;
height:5px;
border-radius:50%;
transition:0.3s
}
.sec_menu li span,.fp-viewing-1 .sec_menu li span,.fp-viewing-2 .sec_menu li span, .sec_menu li span,.fp-viewing-4 .sec_menu li span,.fp-viewing-5 .sec_menu li span,.fp-viewing-6 .sec_menu li span {
background-color:rgba(26,26,26,.1)
}
.sec_menu li span {
background-color:rgba(255,255,255,.1)
}
.sec_menu li em,.fp-viewing-1 .sec_menu li em,.fp-viewing-2 .sec_menu li em, .sec_menu li em,.fp-viewing-4 .sec_menu li em,.fp-viewing-5 .sec_menu li em,.fp-viewing-6 .sec_menu li em {
background-color:#1a1a1a
}
.sec_menu li em {
background-color:#fff
}
.sec_menu .menu1 span {
transform:scale(1)
}
.sec_menu .menu0b span {
transform:scale(1)
}
.sec_menu .menu2 span {
transform:scale(1)
}
.sec_menu .menu3 span {
transform:scale(1)
}
.sec_menu .menu4 span {
transform:scale(1)
}
.sec_menu .menu5 span {
transform:scale(1)
}
.sec_menu .menu6 span {
transform:scale(1)
}
.sec_menu .menu7 span {
transform:scale(1)
}
nav {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:-1;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:0.6s
}
nav ul {
text-align:center;
position:relative;
z-index:5
}
nav ul li {
opacity:0;
transform:translate(0,60%);
transition:0.8s
}
nav ul li~li {
margin-top:50px
}
nav ul li>a {
font-family:"Marcellus";
display:block;
color:transparent;
font-size:2.125rem;
line-height:1.2em;
background:linear-gradient(180deg,#fff 0%,#fff 50%,#111 50%,#111 100%);
-webkit-background-clip:text;
background-size:100% 200%;
background-repeat:no-repeat;
transition:0.8s
}
nav.on ul li:nth-child(1) {
transition-delay:0.3s
}
nav.on ul li:nth-child(2) {
transition-delay:0.4s
}
nav.on ul li:nth-child(3) {
transition-delay:0.5s
}
nav.on ul li:nth-child(4) {
transition-delay:0.6s
}
nav.on ul li:nth-child(5) {
transition-delay:0.7s
}
nav.on ul li:nth-child(6) {
transition-delay:0.8s
}
nav.on ul li:nth-child(7) {
transition-delay:0.9s
}
nav.on ul li:nth-child(8) {
transition-delay:1s
}
nav ul li:hover>a {
background-position:0% 100%
}
nav ul li .dep2 {
margin-top:-1.125rem;
opacity:0;
position:relative;
z-index:-1;
transition:0.5s
}
nav ul li:hover .dep2 {
margin:1.675rem;
opacity:1;
z-index:1
}
nav ul li .dep2 p {
display:flex;
justify-content:center
}
nav ul li .dep2 p a {
font-weight:500;
color:transparent;
background:linear-gradient(180deg,#fff 0%,#fff 50%,#111 50%,#111 100%);
-webkit-background-clip:text;
background-size:100% 200%;
background-repeat:no-repeat;
font-size:1.125rem;
transition:0.3s
}
nav ul li .dep2 p a~a {
margin-left:30px
}
nav ul li .dep2 p a:hover {
background-position:0% 100%
}
.nav_bg {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(202,239,245,.95);
opacity:0;
transition:0.6s;
z-index : -5;
}
nav.on {
z-index:90;
opacity:1
}
nav.on ul li {
transform:none;
opacity:1
}
.nav_bg.on {
z-index:80;
opacity:1
}
.sns-list {
position:fixed;
bottom:50px;
right:60px;
z-index:10;
display:flex
}
.sns-list li~li {
margin-left:15px
}
.sns-list li a {
display:block;
width:46px;
height:46px;
background-repeat:no-repeat;
background-size:cover;
transition:0.3s
}
.sns-list li.main_open a {
background-color:#0793aa;
color:#fff;
text-align:center;
border-radius:22px;
font-weight:600;
line-height:normal;
padding:12px 20px;
height:auto;
width:200px
}
.sns-list li.insta a {
background-image:url(../img/sns-icon1b.png)
}
.sns-list li.youtube a {
background-image:url(../img/sns-icon2b.png)
}
.sns-list li.kakao a {
background-image:url(../img/sns-icon3b.png)
}
.sns-list li.insta a:hover {
background-image:url(../img/sns-icon1.png)!important
}
.sns-list li.youtube a:hover {
background-image:url(../img/sns-icon2.png)!important
}
.sns-list li.kakao a:hover {
background-image:url(../img/sns-icon3.png)!important
}

@media all and (max-width:1400px) {
html {
 font-size:14px
}
header {
 padding:0 3%
}
header h1 {
 margin-top:-20px
}
header h1 a {
 width:125px;
 height:40px
}
header .menu.close .dot {
 width:2px;
 height:12px
}
header .head_info p {
 margin-right:10px
}
header .head_info .open {
 padding:0 10px
}
header .gnb .depth1-list>li>a {
 padding:0 15px;
 font-size:.9rem
}
header .gnb .depth2-list ul {
 width:100%
}
.sec_menu {
 right:15px
}
.sec_menu ul .menu1::before,.fp-viewing-2 .sec_menu ul .menu2::before, .sec_menu ul .menu3::before {
 width:25px
}
.ham {
 top:revert;
 width:74px;
 height:74px;
 transform:translateY(0)
}
.ham span {
 display:block;
 background:#fff;
 margin:auto;
 width:24px;
 height:2px;
 border-radius:0;
 transition:0.25s
}
.ham .bar1 {
 margin-top:28px;
 margin-bottom:6px
}
.ham .bar2 {
 width:13px;
 transform:translateX(4.5px)
}
.ham .bar3 {
 margin-top:6px
}
.ham_bg {
 position:absolute;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%) scale(.85) rotate(0);
 animation:ham_bg 6s 0s linear infinite;
 z-index:-1
}
@keyframes ham_bg {
 from {
     transform:translate(-50%,-50%) scale(.85) rotate(-180deg)
 }
}
.ham.active .bar1 {
 transform:rotate(45deg);
 margin-top:36px
}
.ham.active .bar2 {
 opacity:0
}
.ham.active .bar3 {
 transform:rotate(-45deg);
 margin-top:-10px
}
.ham:hover .bar1 {
 transform:rotate(90deg);
 margin-top:36px
}
.ham:hover .bar2 {
 opacity:0
}
.ham:hover .bar3 {
 transform:rotate(0);
 margin-top:-10px
}
.ham.active:hover .bar1 {
 transform:rotate(45deg);
 margin-top:36px
}
.ham.active:hover .bar2 {
 opacity:0
}
.ham.active:hover .bar3 {
 transform:rotate(-45deg);
 margin-top:-10px
}
nav ul li>a {
 font-size:2rem
}
nav ul li~li {
 margin-top:40px
}
}
@media all and (max-width:1024px) {
header .head_in {
 height:50px
}
header h1 {
 margin-top:-16px
}
header h1 a {
 width:100px;
 height:32px
}
header .menu.close .dot {
 height:10px
}
header .head_info {
 right:0
}
header .head_info p {
 margin-right:0;
 align-items:center
}
header .head_info p span {
 margin-right:0;
 font-size:.8rem
}
header .head_info p strong {
 font-size:1rem
}
header .head_info .open {
 padding:0;
 line-height:15px;
 font-size:.8rem;
 width:80px;
 margin:0 auto;
 text-align:center
}
header .gnb {
 display:none
}
header .menu .dot,header .menu p {
 display:none
}
header .menu .line {
 display:block
}
nav ul li~li {
 margin-top:35px
}
nav ul li a {
 font-size:2.5rem
}
.sec_menu {
 display:none
}
.sns-list {
 bottom:25px;
 right:40px
}
.sns-list li.main_open {
 line-height:40px;
 border-radius:22px
}
.sns-list li.main_open a {
 display:block;
 width:150px;
 vertical-align:middle;
 padding-top:-10px;
 font-size: 1rem;
}
.sns-list li~li {
 margin-left:10px
}
.sns-list li a {
 width:40px;
 height:40px
}
.ham_wrap {
 top:revert;
 bottom:5%
}
.ham {
 left:4%;
 bottom:10%;
 top:revert;
 width:60px;
 height:60px;
 transform:translateY(0)
}
.ham span {
 margin:auto;
 width:21px
}
.ham .bar1 {
 margin-top:22px;
 margin-bottom:6px
}
.ham .bar2 {
 width:15px;
 transform:translateX(3px)
}
.ham .bar3 {
 margin-top:6px
}
.ham_bg {
 transform:translate(-50%,-50%) scale(.7) rotate(0)
}
@keyframes ham_bg {
 from {
     transform:translate(-50%,-50%) scale(.7) rotate(-180deg)
 }
}
.ham.active .bar1 {
 transform:rotate(45deg);
 margin-top:29px
}
.ham.active .bar2 {
 opacity:0
}
.ham.active .bar3 {
 transform:rotate(-45deg);
 margin-top:-10px
}
.ham:hover .bar1 {
 transform:rotate(0deg);
 margin-top:22px
}
.ham:hover .bar2 {
 opacity:1
}
.ham:hover .bar3 {
 transform:rotate(0);
 margin-top:6px
}
.ham.active:hover .bar1 {
 transform:rotate(45deg);
 margin-top:29px
}
.ham.active:hover .bar2 {
 opacity:0
}
.ham.active:hover .bar3 {
 transform:rotate(-45deg);
 margin-top:-10px
}
nav ul li {
 opacity:0;
 transform:translate(0,60%);
 transition:0.8s
}
nav ul li~li {
 margin-top:30px
}
nav ul li>a {
 font-size:2.125rem;
 line-height:1.2em
}
nav ul li .dep2 {
 margin-top:-1.125rem;
 opacity:0;
 z-index:-1;
 transition:0.3s
}
nav ul li:hover .dep2 {
 margin:1.675rem;
 opacity:1
}
nav ul li .dep2 p a {
 font-size:1.125rem
}
nav ul li .dep2 p a~a {
 margin-left:30px
}
nav ul li .dep2 p a:hover {
 background-position:0% 100%
}
}
@media all and (max-width:640px) {
header {
 padding:0 5%
}
header .head_info {
 right:38px
}
.ham_wrap {
 left:revert;
 right:2%;
 top:0;
 bottom:revert;
 z-index:120
}
.ham {
 left:revert;
 right:0;
 bottom:revert;
 top:0;
 width:50px;
 height:50px;
 transform:translateY(0);
 background:none
}
.ham span {
 margin:auto;
 width:20px;
 background-color:#111
}
.ham .bar1 {
 margin-top:18px;
 margin-bottom:4px
}
.ham .bar2 {
 width:13px;
 transform:translateX(4px)
}
.ham .bar3 {
 margin-top:4px
}
.ham_bg {
 transform:translate(-50%,-50%) scale(.7) rotate(0);
 display:none
}
.ham.active .bar1 {
 transform:rotate(45deg);
 margin-top:25px
}
.ham.active .bar2 {
 opacity:0
}
.ham.active .bar3 {
 transform:rotate(-45deg);
 margin-top:-8px
}
.ham:hover .bar1 {
 transform:rotate(0deg);
 margin-top:18px
}
.ham:hover .bar2 {
 opacity:1
}
.ham:hover .bar3 {
 transform:rotate(0);
 margin-top:4px
}
.ham.active:hover .bar1 {
 transform:rotate(45deg);
 margin-top:25px
}
.ham.active:hover .bar2 {
 opacity:0
}
.ham.active:hover .bar3 {
 transform:rotate(-45deg);
 margin-top:-8px
}
nav ul {
 width:100%
}
nav ul li {
 opacity:0;
 transform:translate(0,60%);
 transition:0.8s
}
nav ul li~li {
 margin-top:30px
}
nav ul li>a {
 font-size:1.2rem;
 line-height:1.2em
}
nav ul li .dep2 {
 margin-top:-1.125rem;
 opacity:0;
 z-index:-1;
 transition:0.3s
}
nav ul li:hover .dep2 {
 margin:1.675rem;
 opacity:1
}
nav ul li .dep2 p a {
 font-size:1.125rem
}
nav ul li .dep2 p a~a {
 margin-left:23px
}
nav ul li .dep2 p a:hover {
 background-position:0% 100%
}
header .gnb .depth1-list>li>a {
 color:#fff
}
header .menu p {
 color:#fff
}
header .head_info:before {
 background:url(../img/tel_w.png) center no-repeat;
 background-size:cover
}
header .head_info p strong {
 color:#0793aa;
}
header .dot {
 background-color:rgba(255,255,255,.5)
}
header .menu .line span {
 background-color:#fff;
}
.ham span,.fp-viewing-7 .ham span {
 background-color:#111;
}
.sns-list {
 bottom:20px;
 left:0;
 right:0;
 margin:auto;
 justify-content:center
}
}
/* 안에 배경 */
.bb{
width : 100vw;
height : 100vh;
background-color: #eee;
}