@charset "utf-8";








#header{position:fixed; padding:0 20px; top:0; left:0; height:50px; width:100%;  z-index:99; transition:0.3s;}
#header:after{}
#header>.in{position:relative; max-width:1600px; margin:0 auto; width:100%; height:100%;}
#header h1{}
#header h1 img{max-height:20px; vertical-align:middle; transition:0.3s;}
#header .toggle-btn{position:absolute; top:0; right:0; text-align:center; cursor:pointer; width:50px; height:50px; line-height:50px;}
#header .toggle-btn i{font-size:30px; line-height:50px;}
#header .toggle-btn i.bar{display:inline-block;}
#header .toggle-btn i.close{display:none;}
#header .toggle-btn a{position:relative; }
#header .toggle-btn span{position:absolute; display:block; top:5px; right:10px; width:20px; height:1px; background:#fff;}
#header .toggle-btn span:nth-child(1){top:18px;}
#header .toggle-btn span:nth-child(2){top:25px;}
#header .toggle-btn span:nth-child(3){top:32px;}
body.scrolled #header .toggle-btn span{background:#000;}
#header.open .toggle-btn i.bar{display:none;}
#header.open .toggle-btn i.close{display:inline-block;}
#header .gnb{display:none; position:absolute; top:50px; right:10px; width:auto; text-align:center; box-shadow:0 3px 3px rgba(0,0,0,0.3);}
#header.open .gnb{display:block;}
#header .gnb ul{}
#header .gnb ul li.d1{position:relative; width:100%; font-size:16px; background:#fff;}
#header .gnb ul li.d1 + li{border-top:1px solid #ddd;}
#header .gnb ul li.d1.last{display:none;}
#header .gnb ul li.d1>a{display:block; width:100%; height:100%; padding:5px 25px; cursor:pointer; transition:0.3s;}
#header .gnb ul li.d1.on>a{ font-weight:600; }
#header.white .gnb ul li a{color:#fff;}
#header.white .toggle-btn i{color:#fff;}
#header.white .toggle-btn span{background:#fff;}
#header.white h1 img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}


#header .gnb .depth02Area{display:none; position:absolute; top:60px; left:50%; margin-left:-75px; width:150px; padding:25px 15px;  border-radius:5px;  line-height:1.6;  text-align:center; z-index:15;}
#header .gnb .depth02Area ul{}
#header .gnb .depth02Area ul li{}
#header .gnb .depth02Area ul li + li{margin-top:5px; }
#header .gnb .depth02Area ul li a{position:relative; display:inline-block; font-size:16px; color:#fff; transition:0.05s;}
#header .gnb .depth02Area ul li:hover a{color:var(--c1); }
#header .gnb .depth02Area ul li a:after{  content: ''; position: absolute; bottom: 0px; right: 0; height: 1px; width: 0; background:var(--c1); transition:0.3s;}
#header .gnb .depth02Area ul li a:hover:after {width: 100%; left: 0; right: auto; transition: all 0.2s ease-in-out;}
/* #header .gnb:hover .depth02Area{display:block; animation:fadeIn 0.1s linear;} */



body.scrolled #header{background: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); box-shadow:5px 5px 25px rgba(0,0,0,0.05);}
body.scrolled #header h1 a.w{display:none;}
body.scrolled #header h1 a.b{display:inline-block;}
#header:hover h1 img,
body.scrolled #header h1 img{-webkit-filter:none; filter:none;}
#header:hover .gnb ul li.d1>a{}
/* body.scrolled #header .gnb ul li.d1>a{color:#111;} */
/* body.scrolled #header.white .toggle-btn i{color:#111;}
body.scrolled #header.white .toggle-btn span{background:#fff;} */

@media all and (min-width:900px){
  #header{height:100px;  }
  #header h1{  display:inline-block; position:absolute;  top:50%; transform:translateY(-50%); left:0; z-index:11;}
  #header h1 img{max-height:50px;}
  #header .toggle-btn{display:none;}
  #header .gnb{display:block !important; top:50%; transform:translateY(-50%); right:0;  box-shadow:none; display:table; width:100%; font-size:0; line-height:0; text-align:right;}
  /* #header .gnb:after{position:absolute; bottom:0; left:0; width:100%; height:1px; content:""; background:#000; opacity:0; transition:0.2s;} */
  #header .gnb ul{position:relative; display:inline-block;}
  #header .gnb>ul:after{display:none; position:absolute; top:60px; left:-50px; width:calc(100% - 50px); height:230px; content:""; background:rgba(0,0,0,0.5); z-index:10;}
  #header .gnb ul li.d1{font-size:18px;  margin:0 10px; width:auto; display:inline-block; vertical-align:middle; line-height:40px; background:transparent; transition:0.2s; z-index:11;}
  #header .gnb ul li.d1 + li{border:0;}
  #header .gnb ul li.d1>a{padding:0 20px; color:#fff;}
  #header .gnb ul li.d1.last{display:inline-block;}
  #header .gnb ul li.d1.last>a{display:inline-block; line-height:30px; padding:0 20px; background:#323232; color:#fff; border-radius:5px; transition:0.3s;}
  #header .gnb ul li.d1.last>a:hover{opacity:0.7;}
  #header .gnb ul li.d1>a i{margin-left:5px;}
  /* #header .gnb ul li.d1:hover>a{color:var(--c1) !important;} */
  #header .gnb ul li.d1.lang{ margin:0 10px; font-size:15px; opacity:0.7; text-align:left;}
  #header .gnb ul li.d1.lang div{position:relative; }
  #header .gnb ul li.d1.lang div a{position:relative; display:block; width:80px; padding-left:15px; line-height:30px; color:#fff; box-sizing:border-box; border:1px solid rgba(0,0,0,0); transition:0s;}
  #header .gnb ul li.d1.lang div a:nth-child(2){ display:none; position:absolute; top:31px; left:0; color:#fff;}
  #header .gnb ul li.d1.lang div a i{position:absolute; top:50%; right:5px; transform:translateY(-50%); transition:0.3s;}
  #header .gnb ul li.d1.lang:hover div{}
  #header .gnb ul li.d1.lang:hover div a{border-color:#fff;}
  #header .gnb ul li.d1.lang:hover div a:nth-child(2){display:block;}
  #header .gnb ul li.d1.lang:hover div a i{transform:translateY(-50%) rotate(180deg);;}
  #header .gnb ul li.d1.lang div a:hover{background:rgba(0,0,0,0.3);}
  #header .gnb ul li.btn-toggle{ display:none; position:absolute; top:22px; right:0; margin:0 !important; line-height:0; }
  #header .gnb ul li.btn-toggle a{position:relative; display:inline-block; width:50px; padding:0 15px; height:40px; line-height:40px; cursor:pointer; }
  #header .gnb ul li.btn-toggle span{position:absolute; display:block; top:5px; right:15px; width:25px; height:1px; background:#000;}
  #header .gnb ul li.btn-toggle span:nth-child(1){top:15px;}
  #header .gnb ul li.btn-toggle span:nth-child(2){top:22px;}
  #header .gnb ul li.btn-toggle span:nth-child(3){top:29px;}



  body.scrolled #header .gnb ul li.d1>a{color:#000;}
  body.scrolled #header .gnb .depth02Area ul li a{_color:#000;}

  body.scrolled #header .gnb ul li.d1.lang div a{color:#111;}

  /* #header.white .gnb ul li.btn-toggle span{background:#fff;}
  body.scrolled #header.white .gnb ul li.btn-toggle span{background:#000;}
  #header:hover .gnb ul li.btn-toggle span{background:#000 !important; }
  #header:hover .gnb ul li.btn-toggle:hover span{background:var(--c1) !important; } */

  /* #header.cate-on{height:420px;} */
  #header.cate-on .gnb>ul:after{display:block; animation:fadeIn 0.4s linear; }
  #header.cate-on .gnb:after{opacity:0.05; }
  #header.cate-on .gnb{_border-bottom:1px solid #fff; }
  #header.cate-on .gnb li .depth02Area{display:block; animation:fadeIn 0.4s linear; }

  #header .gnb ul li.d1.on>a{background:rgba(255,255,255,0.9); border-radius:50px; color:var(--c1) !important; text-decoration:underline;}



}

@media all and (min-width:1500px){
  /* #header .gnb{ padding-left:100px;} */
  /* #header .gnb ul li.d1{ margin:0 30px; } */
  /* #header .gnb ul li.d1.lang{right:80px;} */
  /* #header .gnb ul li.d1>a{padding:0 30px;} */
}




@media all and (min-width:1600px){

}




@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@-ms-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@-moz-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}








#aside{display:none; position:fixed; top:0; left:0; width:100%; height:100%; overflow-y:auto;   z-index:101;}
#aside>.img{display:none;}
#aside>.in{height:100%;}
#aside .close{position:absolute; top:0;  right:0; width:50px; height:50px; line-height:50px; text-align:center; font-size:30px;  cursor:pointer; transition:0.3s;}

#aside .snb{  box-sizing:border-box; padding:50px 20px;}
#aside .snb ul li.d1{ position:relative;  display:block;}
#aside .snb ul li.d1 + li{margin-top:20px;}
#aside .snb ul li.d1[uncate] .toggle{display:none;}
#aside .snb ul li.d1 .toggle{display:inline-block; display:none; cursor:pointer; position:absolute; top:12px; left:50%; margin-left:80px; width:30px; height:30px; line-height:30px; text-align:center; color:var(--c1); font-size:20px;  transition:0.3s;}
#aside .snb ul li.d1.on .toggle i{transform:rotate(180deg);}
#aside .snb ul li>a{display:inline-block; color:#111; padding:5px 0; font-size:25px; font-weight:500; transition:0.2s;}
#aside .snb ul li>a:hover,
#aside .snb ul li.on>a{font-weight:800; text-decoration:underline;}
#aside .snb ul li div{margin-top:10px; display:block;}
#aside .snb ul li div ul{display:flex; flex-wrap:wrap; }
#aside .snb ul li div ul li{margin:0 2px 2px 0;}
#aside .snb ul li div ul li a{display:inline-block; padding:5px 7px; background:#f4f4f4; border-radius:3px;}
#aside .snb ul li.btn-toggle{display:none !important;}
#aside .snb ul li .img-box{display:none !important;}

#aside .snb ul li.lang{display:none;}
#aside .snb ul li.lang .toggle{display:none;}
#aside .snb ul li.lang>a{font-size:20px; margin:0 10px;}

#aside .snb ul li.d1.on div{ }
#aside .snb ul li.d2{display:block; }
#aside .snb ul li.d2 a{font-size:15px;}

body.aside-toggle #aside{display:block;  animation:fadeIn 0.3s linear;  background:#fff; }

#aside .member{position:absolute; bottom:30px; left:20px;}
#aside .member li{margin-right:20px;}
#aside .member li a{ }
#aside .member ul li{ }
#aside .member ul li + li:after{left:-10px; height:10px; background:#222; opacity:0.2;}


@media all and (min-width:768px){

  #aside{ }
  /* #aside>.img{display:block; position:absolute; top:0; left:0; width:50%; height:100%; z-index:10; }
  #aside>.img img{width:100%; height:100%; object-fit:cover; object-position:center;} */
  /* #aside:after{position:absolute; top:0; left:0; width:50%; height:100%;  content:""; _background-image:url('/imgs/aside-bg.jpg'); background-position:center; background-size:cover;} */
  /* #aside>.in{max-width:1200px; margin:0 auto; height:100%; padding:80px 50px;}
  #aside .close{left:75%; bottom:5%;  font-size:50px; }
  #aside .close:hover{transform:rotate(180deg);}
  body.aside-toggle #aside{}
  #aside .snb{padding-left:50%;}
  #aside .snb ul li.d1{ }
  #aside .snb ul li.d1 .toggle{top:18px;}
  #aside .snb ul li>a{font-size:35px;}
  #aside .snb ul li div{}
  #aside .snb ul li.d2{ }
  #aside .snb ul li.d2>a{font-size:20px;} */
    /*
  #aside .snb{height:100%;}
  #aside .snb ul.depth01{height:100%;}
  #aside .snb ul li.d1,
  #aside .snb ul li.d1.reserve{width:100%; height:14%; display:table;}
  #aside .snb ul li.d1 + .d1{border-top:1px solid #555;}
  #aside .snb ul li.d1>a{display:table-cell; font-size:30px; width:20%;  height:100%;  vertical-align:middle;}
  #aside .snb .depth02Area{display:table-cell; width:80%; height:100%; padding:0; vertical-align:middle;}
  #aside .snb .depth02Area ul li{display:inline-block; margin-right:40px;}
  #aside .snb .depth02Area ul li a{font-size:20px;}*/
  #aside .snb ul li a:hover{text-decoration:underline;}


}














/*


#aside{position:fixed; top:0; left:101%; width:100%; height:100%; overflow-y:auto; background:rgba(0,0,0,0.9); opacity:0; transition:left 0.3s; z-index:900;}
body.aside-toggle #aside{left:0; opacity:1;}
#aside>.in{padding:70px 30px 30px 30px;}
#aside .close{position:absolute; top:0; right:20px; width:50px; height:50px; line-height:50px; text-align:center; font-size:30px; color:#fff; cursor:pointer;}
#aside .snb{}
#aside .snb ul{}
#aside .snb ul li.d1{width:50%;}
#aside .snb ul li.d1[class*="btn"],
#aside .snb ul li.d1.last{display:none;}
#aside .snb ul li.d1.reserve{width:100%;}
#aside .snb ul li.d1>a{display:inline-block; color:#fff; padding:5px 0; font-size:16px;}
#aside .snb ul li.d1.on>a{}
#aside .snb .depth02Area{width:100%; padding:5px 0 50px 10px;}
#aside .snb .depth02Area ul{}
#aside .snb .depth02Area ul li{display:block;}
#aside .snb .depth02Area ul li a{display:inline-block; color:#ccc;}
#aside .snb .depth02Area ul li:hover a{}


@media all and (min-width:768px){

  #aside{opacity:0; transition:opacity 0.3s; }
  #aside>.in{max-width:1200px; margin:0 auto; height:100%; padding:80px 50px;}
  #aside .close{top:50px; right:50px; font-size:50px;}
  body.aside-toggle #aside{}
  #aside .snb{height:100%;}
  #aside .snb ul.depth01{height:100%;}
  #aside .snb ul li.d1,
  #aside .snb ul li.d1.reserve{width:100%; height:14%; display:table;}
  #aside .snb ul li.d1 + .d1{border-top:1px solid #555;}
  #aside .snb ul li.d1>a{display:table-cell; font-size:30px; width:20%;  height:100%;  vertical-align:middle;}
  #aside .snb .depth02Area{display:table-cell; width:80%; height:100%; padding:0; vertical-align:middle;}
  #aside .snb .depth02Area ul li{display:inline-block; margin-right:40px;}
  #aside .snb .depth02Area ul li a{font-size:20px;}
  #aside .snb ul li a:hover{text-decoration:underline;}

}


 */













.search-box{display:none; position:fixed; top:0; left:0; width:100%; height:100%;   z-index:1111;}
.search-box .bg{position:fixed; top:0; left:0; width:100%; height:100%;  background:rgba(0,0,0,0.5); z-index:10;}
.search-box>.in{}
.search-box .close{position:absolute; top:10px; right:10px; z-index:11; cursor:pointer;}
.search-box .close i{font-size:20px;}
.search-box fieldset{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:90%; max-width:600px; box-sizing:border-box; padding:50px; border-radius:10px; height:auto; background:#fff; z-index:11;}
.search-box form{position:relative; display:flex; width:100%;}
.search-box form input[type="text"]{height:50px; border:0; background:#f4f4f4; padding:5px 20px; width:100%; border-radius:30px;}
.search-box button{font-size:15px; position:absolute; right:0; top:0; line-height:50px; text-align:center; width:50px; height:50px; color:var(--c1);}


@media all and (min-width:768px){

  .search-box fieldset{padding:100px 50px;}

}




































/**/