html {overflow-y:scroll;height:100%;min-width:340px;  scroll-behavior: smooth;}
body {margin:0;padding:0;font-size:0.75em; height:100%; letter-spacing : .3px; font-family: 'Pretendard'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;  position: relative; width: 100%;  min-width:340px; margin:0 auto; } 
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family: 'Pretendard'; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle; font-family: 'Pretendard'; }
input, button {margin:0;padding:0;font-size:1em;font-family: 'Pretendard';}
button {cursor:pointer}
input[type=text], input[type=password], input[type=submit], input[type=image], button {font-size:1em; -webkit-appearance:none}
textarea, select {font-size:1em;font-family: 'Pretendard';}
textarea {border-radius:0;-webkit-appearance:none;font-family: 'Pretendard';}
select {margin:0;background:none;font-family: 'Pretendard';}
p {margin:0;padding:0;word-break:break-all; font-family: 'Pretendard'; }
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none; font-weight:400; font-family: 'Pretendard'; !important; }
ul,li,dl,dt,dd {padding:0;margin:0; font-family: 'Pretendard'; }
ul {list-style:none}
*,:after,:before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
body{
 -ms-overflow-style: none;
 }
 

input:focus {outline: none;}





header {position: fixed; left: 0; top: 0; width: 100%; min-width: 340px; background: rgba(255,255,255,.15); height: 80px; z-index: 101;}
header.on {background:#fff;}
header nav {max-width: 1720px; margin: 0 auto; padding:0 20px;}
header nav:after {content: ''; clear: both; display: table;}
header .logo {float: left; margin-top:14px; width: 205px; overflow: hidden; cursor: pointer;}
header .logo img {}

header .menu {float: left; margin-left: 100px;}
header .menu ul:after {content: ''; clear: both; display: table;}
header .menu ul li {display: inline-block;margin-right: 70px; position: relative; margin-top:30px;}
header .menu ul li a { font-size: 16px; display: inline-block; font-weight:500; color: #fff; letter-spacing: .7px; transition: .3s;  }
header .menu ul li:hover a{color: rgba(255,255,255,.6);}
header .menu ul li a.on {}
header .menu ul li .ul2 {position: absolute; z-index: 1;top: 85px; width: 160px; border-radius: 20px; box-shadow: 0 0 6px rgba(0,0,0,.1); background: #fff; padding: 8px; left: 50%; transform: translate(-50%,0); display: none;}
header .menu ul li .ul2 li {margin: 0; width: 100%; padding: 0;}
header .menu ul li .ul2 li:first-child {margin-bottom: 5px;}
header .menu ul li .ul2 li a {display: inline-block; margin: 0; padding: 13px 0; text-align: center; width: 100%; font-size: 1.2em; color: #555; transition: .3s; border-radius: 18px;}
header .menu ul li .ul2 li a:hover {color: #2b3990; background: #f8f8f8}
header .menu ul li .ul2 li a.on {color: #2b3990; background: #f8f6ff ;border: none;}
header .menu ul li:hover .ul2 {display: block;}
header .menu ul li:last-child {margin-right:0;}

header .search_box {float: left; margin-left:37px; margin-top: 26px; position: relative;}

header .side {float: right; margin-top:30px;}
header .side button {border: none; background:none; color:#fff; font-size:16px; }
header .side button.mypage {font-weight:500; margin-right:75px;}
header .side button img {margin-right:10px; margin-top:-2px;}
header .side button:last-child {height:auto;width:initial; padding:0;}

/*header .side ul li:nth-child(2) a {display: inline-block; padding: 13px 25px 13px 25px; background: #2b3990; color: #fff; border-radius: 13px; font-size: 1.25em;}*/

/*header .side ul li:last-child a {display: inline-block; padding: 13px 25px 13px 25px; background: #2b3990; color: #fff; border-radius: 13px; font-size: 1.25em;}
header .side ul li.li_num a:after {content: '6'; position: absolute; top: -14px; right: -5px; width: 19px; height: 19px; border-radius: 50%;  background: #2b3990; color: #fff; text-align: center; padding-top: 3px; font-size: 11px;}*/

header .side .profile_menu {position: absolute; left: 50%; top: -50px; background: #fff; transform: translate(-50%,0); box-shadow: 0 0 6px rgba(0,0,0,.1); border-radius: 20px;  width: 160px; padding: 8px; overflow: hidden;  opacity: 0; transition: .5s; height: 0px;}
header .side .profile_menu a {display: inline-block; width: 100%; padding: 13px 0; text-align: center; font-size: 1.2em; color: #555; border-radius: 20px; transition: .5s; margin:1px 0;}
header .side .profile_menu a:hover {color: #2b3990; background: #f8f6ff }
header .side .profile_menu.on {top: 55px; opacity: 1; height: 106px; transition: .5s;}

header .side .write_menu {position: absolute; left: 50%; top: -50px; background: #fff; transform: translate(-50%,0); box-shadow: 0 0 6px rgba(0,0,0,.1); border-radius: 20px;  width: 160px; padding: 8px; overflow: hidden;  opacity: 0; transition: .5s; height: 0px;}
header .side .write_menu a {display: inline-block; width: 100%; padding: 13px 0; text-align: center; font-size: 1.2em; color: #555; border-radius: 20px; transition: .5s; margin:1px 0;}
header .side .write_menu a:hover {color: #2b3990; background: #f8f6ff }
header .side .write_menu a.on {color: #2b3990; background: #f8f6ff }
header .side .write_menu.col1.on {height: 62px; top: 55px; opacity: 1; transition: .5s;}
header .side .write_menu.col2.on {height: 107px; top: 55px; opacity: 1; transition: .5s;}

/*
header .side ul li:nth-child(2) a {
  display: inline-block; padding: 14px 0px 11px 0px;
  font-size: 1.2em;
  text-align: center;
  border-radius: 11px;
  width: 95px;
  box-shadow: 0.2rem 0.2rem 0.6rem #c8c9e7, -0.15rem -0.15rem 0.5rem #ffffff;
  color: #9baacf;
}
header .side ul li:nth-child(2) a:hover {
  color: #2b3990;
}
header .side ul li:nth-child(2) a:active {
  box-shadow: inset 0.2rem 0.2rem 0.5rem #c8c9e7, inset -0.2rem -0.2rem 0.5rem #ffffff;
}
header .side ul li:nth-child(2) a span {display: inline-block; background: #2b3990; color: #fff; padding:2px 4px 3px 4px; position: relative; top: -1px; border-radius: 5px; font-size: .8em; margin-left: 1px;}
*/
/*채팅방을 위한 css*/


header .side ul li:last-child .li_write {
  display: inline-block; padding: 12px 0px 14px 0px;
  font-size: 1.2em;
  text-align: center;
  width: 120px;
  border-radius: 50px;
  background: linear-gradient(to bottom right, #5f36ff, #cb58fb);
  letter-spacing: .7px;
  color: #fff;
  transition: .3s
  margin-top:1px;
  /*text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa,
    0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;*/
  box-shadow:0 0 15px #d3c8ff, 0 0 7px #d3c8ff, 0 0 20px #d3c8ff, 0 0 42px #7b6cfb, 0 0 82px #7b6cfb, 0 0 92px #7b6cfb, 0 0 102px #7b6cfb, 0 0 151px #7b6cfb;
}
/* box-shadow: inset 0.2rem 0.2rem 1rem #8a93ff, inset -0.2rem -0.2rem 1rem #4d00dd, 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #ffffff; */
header .side ul li:last-child .li_write:hover {
  color: #ffffff;
}
header .side ul li:last-child .li_write:active {
  box-shadow: inset 0.2rem 0.2rem 1rem #5b0eeb, inset -0.2rem -0.2rem 1rem #8abdff;
}



header.on {background:#fff; transition: .3s !important; border-bottom:1px solid #f0f0f0;}
header.on .logo img {display: none;}
header.on .mo_nav .logo {margin-top:11px;}
header.on .logo {background:url('../img/main/logo_04.png')no-repeat center; height:51px; background-size:100%;}
header.on .menu ul li a {color:#333;}
header.on .menu ul li:hover a {color:#2b3990;}
header.on .menu ul li a.on {color:#2b3990; border-bottom:3px solid #2b3990;}
header.on .side ul li.mypage img {filter: none;}
header.on .side ul li .profile:after {border:1px solid #2b3990;}
header.on .side ul li:last-child .li_write {box-shadow: none;}
header.on .side ul li.mypage:after {background:#eee;}

header .menu ul li:hover ul li a {color:#333;}
header .menu ul li:hover ul li a:hover {color:#2b3990;}
header.on  .menu ul li:hover ul li a {color:#333;}
header.on  .menu ul li:hover ul li a:hover {color:#2b3990;}
header.on .side button {color:#333;}
header.on .side button img {filter:invert(1); opacity: .6;}
header .mo_nav {display: none;}




@media screen and (max-width:1400px) {
  header .menu {margin-left:40px;}
  header .side button.mypage {margin-right:50px;}
}

@media screen and (max-width:1200px) {
  header {padding:0 20px;}

  header nav {display: none;}
  header .mo_nav {display: block;}

  header {height: 75px;}

  header .mo_nav .logo {width:175px; margin-top:15px;}
  header .mo_nav .logo img {width:175px;}
  header.on .mo_nav .logo {margin-top:6px;}
  header .mo_nav .menu_open {position: absolute; right:20px; top:27px; background:none; border:none;}
  header .mo_nav .menu_open img {filter:brightness(100);}
  header.on .mo_nav .menu_open img {filter: none;}

  header .mo_nav .mypage {position: absolute; right:67px; top:24px; }
  header .mo_nav .mypage img {width:27px; filter:brightness(100);}
  header.on .mo_nav .mypage img {filter: none;}

  header .mo_nav .side {margin-right:42px; margin-top:20px;}
  header .mo_nav .side button {background:none; border:none;float:left; margin-left:8px;}

  header .mo_nav .side button:nth-child(1) svg {width:33px; height:33px; margin-top:1px;}
  header .mo_nav .side button:nth-child(2) svg {width:34px; height:34px;}
  header .mo_nav .side button:nth-child(3) svg {width:34px; height:34px; }

  header .mo_nav .side .search_open {position: fixed; left:20px; top:85px; width:calc(100% - 40px); height:50px; border-radius:10px; box-shadow: 0.1rem 0.1rem 0.6rem #e6eaf7, -0.2rem -0.2rem 0.5rem #ffffff; color:#9baacf; background:#fff; padding:0 20px; top:-100px; transition: .3s;}
  header .mo_nav .side .search_open input[type="text"] {width:100%; height:49px; border:none; color:#9baacf; font-size:1.2em; padding-right:40px;}
  header .mo_nav .side .search_open input[type="text"]:focus {outline: none; }
  header .mo_nav .side .search_open input[type="text"]::placeholder {color:#bec8e4}
  header .mo_nav .side .search_open .search_go {position: absolute; right:20px; top:6px; color:#b1aad2; border:none; background:none;}
  header .mo_nav .side .search_open .search_go svg {width:25px;}
  header .mo_nav .side .search_open .mo_search_close {position: absolute; left:50%; top:58px; border:none; background:none; transform: translate(-50%,0);}
  header .mo_nav .side .search_open .mo_search_close img {width:30px;}
  header .mo_nav .side .search_open.on {top:85px;}

  header .mo_nav .menu_view {}
  header .mo_nav .menu_view .bg {position: fixed; width:100%; height:100%; background:rgba(0,0,0,.4); left:0; top:0;display: none;}
  header .mo_nav .menu_view .view {position: fixed; transition: .3s; right:-300px; top:0; height:100%; width:300px; background:#fff;}

  header .mo_nav .menu_view .view .menu_open {position: absolute; left :0px; top:10px; width:31px; height:31px; border-radius:50%; background:#2B3990; transition: .3s}
  header .mo_nav .menu_view .view .menu_open svg {width:17px; height:17px; margin-top:2px; margin-right:1px;}
  header .mo_nav .menu_view.on .view .menu_open {left :-42px;}
  header .mo_nav .menu_view.on .bg {display: block}
  header .mo_nav .menu_view.on .view {right:0;}
  header .mo_nav .menu_view .view .profile {width:100%; padding:30px 20px 30px 20px; background:#2B3990;}
  header .mo_nav .menu_view .view .profile:after {content:''; clear: both; display: table;}
  header .mo_nav .menu_view .view .profile .img {float:left; width:50px; height:50px; border-radius:50%; background:url('../img/profile.svg')no-repeat center; background-size:cover;}
  header .mo_nav .menu_view .view .profile .txt {float:left; position: relative; width:100%; padding-left:10px; margin-left:0;}
  header .mo_nav .menu_view .view .profile .txt button {width:100%; color:#fff; font-size:18px;  text-align:left; background:none; border:none; font-weight:400;}
  header .mo_nav .menu_view .view .profile .txt button:after {content:''; clear: both; display: table;}
  header .mo_nav .menu_view .view .profile .txt button svg {float:right; width:8px; margin-top:3px;} 
  header .mo_nav .menu_view .view .profile .txt2 {padding-left:20px; padding-top:15px;}
  header .mo_nav .menu_view .view .profile .txt2 a {display: inline-block; margin-right:13px; font-size:1.25em; color:#fff;}

  header .mo_nav .menu_view .view .list1 {padding:25px 20px 0px 25px;}
  header .mo_nav .menu_view .view .list1>li {display: inline-block; width:100%; }
  header .mo_nav .menu_view .view .list1>li:first-child {font-size:13px; color:#777; margin:0 0 7px 0;}
  header .mo_nav .menu_view .view .list1>li>a {display: inline-block; width:100%; padding:10px 0 10px 0; font-size:16px; color:#222; font-weight:500;}

  header .mo_nav .menu_view .view .list2 {margin-top:30px; border-top:1px solid #eee;}
  header .mo_nav .menu_view .view .list2 li {display: inline-block; width:100%;}
  header .mo_nav .menu_view .view .list2 li a {display: inline-block; width:100%; padding:15px 20px 14px 25px; font-size:14px; color:#333;background:#fbfbfb; border-bottom:1px solid #eee; position: relative;}
  header .mo_nav .menu_view .view .list2 li a img {width:16px; margin-right:8px; position: relative; top:-1px; filter: brightness(0); opacity: .7}
    header .mo_nav .menu_view .view .list2 li a svg {position: absolute; right:27px ;top:17px; opacity: .3}

    header.on .mo_nav .mypage img {filter:invert(1); opacity: .7}
 }

@media screen and (max-width:767px) {
  header {height:65px; }
  header .mo_nav .logo {width:150px; margin-top:13px;}
  header .mo_nav .logo img {width:150px; }

  header .mo_nav .menu_open {top:22px;}
  header .mo_nav .menu_open svg {width:30px;}

  header .mo_nav .mypage {top:20px; right:58px;}
  header .mo_nav .mypage img {width:25px;}
}

@media screen and (max-height:700px) {
  header .mo_nav .menu_view .view .profile {padding:28px 20px 30px 20px}
  header .mo_nav .menu_view .view .list2 {margin-top:20px;}
  header .mo_nav .menu_view .view .list1>li>a {padding-top:20px;}
  header .mo_nav .menu_view .view {overflow-y: scroll;}
}






.wid {max-width:1200px; margin:0 auto; width:100%;}









footer {width:100%; background:#212227;}
footer .wid {max-width:1720px; padding:0 20px; margin:0 auto;}
footer .link {width:100%; border-bottom:1px solid #505050;}
footer .link:after {content:''; clear:both; display:table;}
footer .link a {float:left; font-size:14px; color:#cecece; margin-right:60px; padding:21px 0;}

footer .info {padding:55px 0 85px 0;}
footer .info:after {content: ''; clear: both; display: table;}
footer .info .box1 {float:left; width:24%;}
footer .info .box1 span {font-size:14px; color:#cecece;}
footer .info .box1 h2 {font-size:39px; color:#cecece; font-weight:600;margin-top:20px;}
footer .info .box1 h2 img {margin-right:5px; margin-top:-2px;}
footer .info .box1 p {font-size:16px; color:#cecece; margin-top:20px; font-weight:300; line-height:1.3em;}

footer .info .box2 {float:left; width:30%;}
footer .info .box2 span {font-size:14px; color:#cecece;}
footer .info .box2 h3 {font-size:24px; color:#cecece; margin-right:10px; margin-top:-1px; margin-top:20px;}
footer .info .box2 h3 img {margin-right:10px;}

footer .info .box3 {float:left; width:46%;}
footer .info .box3 span {font-size:14px; display:inline-block; margin-right:0px; margin-bottom:6px; color:#cecece; font-weight:300; line-height:1.4em;} 
footer .info .box3 span b {display:inline-block; margin-right:10px;}
footer .info .box3 span:after {content:''; height:13px; width:1px ; display:inline-block; position: relative; top:2px; background:#cecece; margin:0 6px 0 11px; }
footer .info .box3 span.none:after {content:none;}
footer .info .box3 span.copy {margin-top:60px; font-size:12px; color:#7a7a7a; width:100%;}
footer .info .box3 span.copy:after {content:none;}



@media screen and (max-width:1300px) {
  footer .info .box1 h2 {font-size:30px; font-weight:700;}
  footer .info .box1 h2 img {width:26px;}
  footer .info .box1 p {font-size:14px;}

  footer .info .box2 h3 {font-size:20px; }
  footer .info .box2 h3 img {width:26px;}

}

@media screen and (max-width:1023px) {
  footer .info {padding:55px 0 55px 0;}
  footer .info .box1, footer .info .box2 {width:50%;}
  footer .info .box3 {width:100%; margin-top:50px;}
}

@media screen and (max-width:676px) {
  footer .info {padding:35px 0 55px 0;}
  footer .info .box1 {width:100%;}
  footer .info .box1 p {margin-top:15px;}
  footer .info .box2 {width:100%; margin-top:50px;}
  footer .link a {margin-right:35px; font-size:13px;}
  footer .link a:last-child {margin-right:0;}

  footer .info .box1 span {font-size:13px;}
  footer .info .box1 h2 {font-size:27px; margin-top:15px;}
  footer .info .box1 h2 img {width:23px;}
  
  footer .info .box2 span {font-size:13px;}
  footer .info .box2 h3 {margin-top:15px; font-size:18px;}

  footer .info .box3 span {font-size:12px; margin-right:10px;}
  footer .info .box3 span b {margin:0;}
  footer .info .box3 span:after {content:none; }
  footer .info .box3 span.copy {margin-top:30px;}
}