@charset "utf-8";







#header{position:fixed; background:#fff; top:0; left:0;  width:100%;  z-index:99; transition:0.3s;}
#header:after{}
#header>.in{position:relative; max-width:1400px; margin:0 auto; width:100%;   text-align:center;}
#header h1{height:50px;}
#header h1 img{max-height:35px; vertical-align:middle; transition:0.3s;}
#header .location{position:absolute; top:0; left:0; text-align:center; cursor:pointer; width:50px; height:50px; line-height:50px;}
#header .location i{font-size:25px; line-height:50px; color:var(--c1);}
#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:2px; border-radius:2px; background:var(--c1);}
#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;  }
#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 .search-box{height:40px;}
#header .search-box fieldset{position:relative; padding-right:40px; background:var(--c1); border:3px solid var(--c1); height:40px; box-sizing:border-box;}
#header .search-box fieldset input{width:100%; border:0; height:100%; padding-left:20px;}
#header .search-box fieldset button{position:absolute; top:-3px; right:-3px; width:40px; height:40px; line-height:40px; text-align:center;  color:#fff; font-size:20px;}

#header .util{
	display:flex;
	height:30px;
}
#header .util ul{ display:flex; justify-content:space-evenly; text-align:center;}
#header .util ul li{_width:calc(100% / 4); line-height:30px; display:flex;}
#header .util ul li.line{font-size:10px;}
#header .util ul li.line + .line{display:none;}
#header .util ul li + li:after{}
#header .util ul li a{display:block;  }
#header .util ul li a i{display:none;}
#header .util ul li a span{}
#header .util ul li.adm a{}

@media all and (max-width:899px){
	#header .util ul li .additionBtn{padding:3px 5px; background:#5d85c2; color:#fff; height:90%; display:flex; align-items:center;}
	#header .util ul li.serv,
	#header .util ul li.adm{display:flex; justify-content:space-between; align-items:center;}
	#header .util ul li.adm b{margin-right:15px; font-weight:normal;}
	#header .util ul li.adm a{padding:0 5px; background:#333; color:#fff; height:90%; display:flex; align-items:center;}
}

@media all and (min-width:900px){
	#header .util ul li.line{display:none;}
	#header .util ul li.adm b{display:none;}
}



#header .gnb .depth02Area{display:none; position:absolute; top:49px; left:10px; margin-left:0; width:150px; padding:15px; background:#fff;  border-radius:5px;  box-shadow:10px 10px 10px rgba(0,0,0,0.3); line-height:1.6;   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:block; font-size:16px; color:#333; transition:0.05s;}
#header .gnb .depth02Area ul li:hover a{color:; text-decoration:underline;}
#header .gnb .depth02Area ul li a:after{display:none;  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 li:hover .depth02Area{display:block; animation:fadeIn 0.1s linear;}

#header .call{display:inline-block; position:absolute; top:50%; right:60px; line-height:20px; font-size:13px; color:#fff;  padding:4px 15px 4px 12px; background:#333; border-radius:10px;  transform:translateY(-50%); }
#header .call i{margin-right:5px;}

.mypageBox{
	display: grid;
	grid-template-columns: 110px 110px; /* �� ���� ������ �� */
	gap: 10px; /* �� �׸� ������ ���� */
}

.mypageBox a{
	display:block;
	width:110px;
	height:23px;
	line-height:23px;
	text-align:center;
	font-size:12px;
}

.mypageBox .myTxt{
	display:block;
	width:110px;
	height:23px;
	line-height:23px;
	text-align:center;
	font-size:11px;
}

.mypageBox .myBtn{
	background:#393939;
	color:#fff;
	font-size:12px;
	text-align:center;
}

.mypageBox .memoBtn{
	border:1px solid #393939;
	background:#fff;
}


.mypageBox .memoBtn small{
	/* color:var(--c1); */
	font-size:inherit;
	margin:0 2px;

}

.mypageBox .additionBtn{
	background:#5c85c1;
	color:#fff;
}

@media all and (max-width:900px){
	.mypageBox{display:none;}

}
@media all and (min-width:900px){
	.util.log .mo-only{display:none !important;}
}



@media all and (min-width:900px){
  #header{ }
  #header>.in{text-align:left; height:100px; transition:0.2s;}
  #header h1{padding-top:25px; margin-left:10px; height:100px; display:inline-block; position:relative; transition:0.2s; z-index:11;}
  #header h1 img{max-height:50px;}
  #header .call{display:none;}
  #header .location{display:none;}
  #header .toggle-btn{display:none;}
  #header .search-box{position:absolute; top:30px; width:300px; left:50%; transform:translateX(-50%); transition:0.2s;}
  #header .search-box fieldset{background:transparent; border-width:1px;}
  #header .search-box fieldset button{top:0; right:0; background:var(--c1); height:39px; line-height:39px;}

  #header .util{position:absolute; top:50%; right:10px; transform:translateY(-50%); height:auto;;}
  #header .util ul{  text-align:center;}
  #header .util ul li{width:auto; margin-left:20px; line-height:1.2;}
  #header .util ul li a{display:block; color:#666; transition:0.2s;}
  #header .util ul li a i{display:block; font-size:30px; height:40px; transition:0.2s;}
  #header .util ul li a span{display:block;;}
  #header .util ul li a:hover{color:var(--c1);}

  #header .gnb-area{ background:var(--c1); }
  #header .gnb{position:relative; top:0; right:0; display:block !important; max-width:1400px; margin:0 auto; box-shadow:none; display:table; text-align:left; width:100%; font-size:0; line-height:0;}
  #header .gnb:after{position:absolute; bottom:0; left:0; width:100%; height:1px; content:""; background:#000; opacity:0; transition:0.2s;}
  #header .gnb ul li.d1{font-size:17px;  margin:0 20px; width:auto; display:inline-block; vertical-align:middle; line-height:60px; background:transparent; transition:0.1s;}
  #header .gnb ul li.d1:nth-child(1){margin-left:0 !important;}
  #header .gnb ul li.d1 + li{border:0;}
  #header .gnb ul li.d1>a{padding:0 10px; 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:#960117 !important;}
  #header .gnb ul li.d1.lang{margin:0 2px; position:absolute; top:0; right:60px; display:flex; font-size:15px; opacity:0.7;}
  #header .gnb ul li.btn-toggle{}
  #header .gnb ul li.btn-toggle i{margin-right:15px; vertical-align:middle; font-size:20px;}
  body.aside-toggle #header .gnb ul li.btn-toggle i:before{content:"\e9af";}

  #header .gnb ul li.d1.sns-area{position:absolute; top:50%; right:10px; transform:translateY(-50%);}
  #header .gnb ul li.d1.sns-area>.in{}
  #header .gnb ul li.d1.sns-area a{}
  #header .gnb ul li.d1.sns-area i{}
  #header .gnb ul li.d1.sns-area a i{display:inline-block; font-size:20px; width:24px; height:24px; color:#fff; border-radius:5px; line-height:24px; margin-right:5px; text-align:center;}
  #header .gnb ul li.d1.sns-area a[class*="insta"] i{ color:#fff; background: #d6249f;  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}
  #header .gnb ul li.d1.sns-area a.blog,
  #header .gnb ul li.d1.sns-area a.blog i{position:relative; font-size:0; line-height:0; z-index: 11}
  #header .gnb ul li.d1.sns-area a.blog:after{position:absolute; top:50%; left:50%; width:15px; height:15px;  background:#fff;transform:translate(-50%, -50%); content:""; z-index:1;}
  #header .gnb ul li.d1.sns-area a.youtube i{background:#ff0000;}

  #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{}
  #header.cate-on .gnb:after{opacity:0.05; }
  #header.cate-on .gnb{_border-bottom:1px solid #fff; }
  #header .gnb li:hover .depth02Area{display:block; animation:fadeIn 0.4s linear; }

  .scrolled #header{}
  .scrolled #header>.in{height:70px;}
  .scrolled #header h1{height:70px; padding-top:10px;}
  .scrolled #header .search-box{top:15px;}
  .scrolled #header .util ul li a{font-size:12px;}
  .scrolled #header .util ul li a i{ font-size:20px; height:30px;}
  .scrolled #header .gnb ul li.d1{line-height:50px;}

}

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

  #header .gnb ul li.d1{ margin:0 20px; }
  #header .gnb ul li.d1.lang{right:80px;}
  #header .search-box{width:400px;}


}

@media all and (min-width:1200px){
  #header .gnb ul li.d1{ margin:0 40px; }

}


@media all and (max-width:899px){
	body:not(.main-page) #header .util{display:none;}
}



@-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:120px; left:0; width:100%; height:calc(100vh - 120px); overflow-y:auto; z-index:99;}
#aside>.img{display:none;}
#aside>.in{height:100%;}
#aside .close{display:none; position:absolute; bottom:20px; left:50%; margin-left:-25px; width:50px; height:50px; line-height:50px; text-align:center; font-size:30px;  cursor:pointer; transition:0.3s;}

#aside .snb-top{background:#f4f4f4;  display:flex; justify-content:center; align-items:center;}
#aside .snb-top ul{padding:20px; box-sizing:border-box; text-align:center;}
#aside .snb-top ul li{display:block;}
#aside .snb-top ul li a{}
#aside .snb-top ul li.nick{margin-bottom:10px;}
#aside .snb-top ul li.nick a{font-weight:bold; font-size:17px;}

#aside .snb{_position:absolute; top:50%; left:0; width:100%; _transform:translateY(-50%);}
#aside .snb ul li.d1{ position:relative; text-align:center; display:block;}
#aside .snb ul li.d1[uncate] .toggle{display:none;}
#aside .snb ul li.d1 .toggle{display:inline-block; cursor:pointer; position:absolute; top:12px; left:50%; margin-left:80px; width:30px; height:30px; line-height:30px; text-align:center; 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:#333; 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; }
#aside .snb ul li div{display:none;}
#aside .snb ul li.btn-toggle{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:20px;}

#aside .snb ul li.d1.sns-area{display:none;}

body.aside-toggle #aside{display:block;  background:#fff; animation:fadeIn 0.3s linear; _backdrop-filter:blur(15px); _-webkit-backdrop-filter:blur(15px); _background:rgba(255,255,255,0.8); }

@media all and (max-width:899px){
	#aside .snb{padding:20px 0; _height:calc(100% - 140px); _display:flex; _justify-content:center; _align-items:center;}
	#aside .snb ul li.d2{ }
	#aside .snb ul li.d2 a{font-size:16px; }

	/* #aside.h90{top:90px; height:calc(100% - 90px);} */

}


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

  body.scrolled #aside{top:120px;}
  body.aside-toggle #aside{}

  #aside{top:160px; height:auto; background:#fff; box-shadow:10px 10px 20px rgba(0,0,0,0.1); transition:0.2s;}
  #aside>.in{max-width:1400px; margin:0 auto; height:450px; padding:80px 50px;}
  #aside .close{left:75%; bottom:5%;  font-size:50px; display:none;}
  #aside .close:hover{transform:rotate(180deg);}
	#aside .snb-top{display:none;}
  #aside .snb{position:static; transform:none;}
  #aside .snb ul{width:50%; position:relative;}
  #aside .snb ul li.d1{text-align:left; width:50%;}
  #aside .snb ul li.d1 .toggle{top:18px; display:none;}
  #aside .snb ul li.d1.community{position:absolute; top:0; right:0;}
  #aside .snb ul li>a{font-size:25px;}
  #aside .snb ul li div{display:block;}
  #aside .snb ul li.d2{ }
  #aside .snb ul li.d2>a{font-size:16px;}
  #aside .snb ul.depth02{display:block; width:100%;}
  #aside .snb ul.depth02 li{width:100%;}
    /*
  #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{display:none; position:fixed; top:0; left:0; width:100%; height:100%; overflow-y:auto;   z-index:101;}
#aside>.in{height:100%;}
#aside .close{position:absolute; bottom:50px; left:50%; margin-left:-25px; width:50px; height:50px; line-height:50px; text-align:center; font-size:30px; color:var(--c1); cursor:pointer; transition:0.3s;}

#aside .snb{position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%);}
#aside .snb ul li.d1{text-align:center; display:block;}
#aside .snb ul li>a{display:inline-block; color:var(--c1); padding:5px 0; font-size:40px; 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{display:none;}
#aside .snb ul li.btn-toggle{display:none !important;}

body.aside-toggle #aside{display:block;  animation:fadeIn 0.3s linear; backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); background:rgba(255,255,255,0.8); }



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

  #aside{ }
  #aside>.in{max-width:1200px; margin:0 auto; height:100%; padding:80px 50px;}
  #aside .close{bottom:15%;  font-size:50px; }
  #aside .close:hover{transform:rotate(180deg);}
  body.aside-toggle #aside{}
  #aside .snb ul li.d1{display:inline-block; width:20%;}
  #aside .snb ul li>a{font-size:35px;}
  #aside .snb ul li div{display:block;}
  #aside .snb ul li.d2{display:block; }
  #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;}

}


 */

































/**/