@charset "utf-8";

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

@font-face {

  font-family: 'Noto Sans KR';

  font-style: normal;

  font-weight: 100;

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2)

      format('woff2'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff)

      format('woff'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf)

      format('opentype');

}

@font-face {

  font-family: 'Noto Sans KR';

  font-style: normal;

  font-weight: 300;

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2)

      format('woff2'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff)

      format('woff'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf)

      format('opentype');

}

@font-face {

  font-family: 'Noto Sans KR';

  font-style: normal;

  font-weight: 400;

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2)

      format('woff2'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff)

      format('woff'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf)

      format('opentype');

}

@font-face {

  font-family: 'Noto Sans KR';

  font-style: normal;

  font-weight: 500;

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2)

      format('woff2'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff)

      format('woff'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf)

      format('opentype');

}

@font-face {

  font-family: 'Noto Sans KR';

  font-style: normal;

  font-weight: 700;

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2)

      format('woff2'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff)

      format('woff'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf)

      format('opentype');

}

@font-face {

  font-family: 'Noto Sans KR';

  font-style: normal;

  font-weight: 900;

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2)

      format('woff2'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff)

      format('woff'),

    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf)

      format('opentype');

}



/* common */

html,

body {

  margin: 0;

  padding: 0;

  font-family: 'Noto Sans KR', sans-serif;

  outline: none;

  -webkit-text-size-adjust: none;

}

h1,

h2,

h3,

h4,

h5,

h6 {

  font-size: 1em;

}

h1,

h2,

h3,

h4,

h5,

h6,

div,

p,

dl,

dt,

dd,

ul,

ol,

li,

form,

fieldset,

blockquote,

address,

table,

thead,

tbody,

tfoot,

tr,

td,

caption {

  margin: 0;

  padding: 0;

  letter-spacing: -0.025em;

}

ol,

ul {

  list-style: none;

}

a {

  color: inherit;

  text-decoration: none;

}

table {

  border-collapse: collapse;

  border-spacing: 0;

}

fieldset {

  border: none;

}

legend,

caption {

  display: none;

}

input,

select,

button,

textarea {

  box-sizing: border-box;

  font-family: 'Noto Sans KR', sans-serif;

  font-size: 1rem;

  letter-spacing: -0.025em;

  background-color: transparent;

}

input {

  border-radius: 0;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}

input[type='text']::-ms-clear {

  display: none;

}

button {

  border: 0;

  cursor: pointer;

}

select {

  -webkit-border-radius: 0;

  -webkit-appearance: none;

  -moz-appearance: none;

  -webkit-appearance: none;

  appearance: none;

  cursor: pointer;

}

select::-ms-expand {

  display: none;

}



/* LAYOUT */

html.fix {

  position: fixed;

  left: 0;

  right: 0;

  overflow: hidden;

  margin: 0 auto;

}

#A_Wrap {

  width: 100%;

  height: 100%;

  min-width: 1550px;

}

#A_Container_Wrap {

  position: relative;

  box-sizing: border-box;

  width: 100%;

  padding: 0 0 0 260px;

}

#A_Container_Wrap:after {

  display: block;

  clear: both;

  *zoom: 1;

  content: '';

}

#A_Container_L {

  z-index: 9;

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  width: 260px;

  overflow-y: scroll;

  background: #282d39;

}

/* ::-webkit-scrollbar {width: 15px;}

/* Track */

/* ::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;border-radius: 10px;} */

/* Handle */

/* ::-webkit-scrollbar-thumb {background: #282d39;border-radius: 10px;} */

#A_Container_L {

  -ms-overflow-style: none; /* IE and Edge */

  scrollbar-width: none; /* Firefox */

}

#A_Container_L::-webkit-scrollbar {

  display: none; /* Chrome, Safari, Opera*/

}

#A_Container_C {

  float: left;

  box-sizing: border-box;

  width: 100%;

}

#A_Container {

  box-sizing: border-box;

  width: 1280px;

  margin: 0 auto;

}

#A_Container:after {

  display: block;

  clear: both;

  *zoom: 1;

  content: '';

}



.inner {

  width: 1280px;

  margin: 0 0 0 110px;

}



/* header */

#A_Header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  box-sizing: border-box;

  width: 100%;

  padding: 0 0 0 260px;

  background-color: rgba(0, 0, 0, 0.3);

  transition: background-color 0.2s ease-in-out;

  z-index: 10;

}

#A_Header .logo {

  position: absolute;

  top: 0;

  left: 0;

  width: 260px;

  height: 80px;

  background-color: #282d39;

}

#A_Header .logo a {

  display: block;

  box-sizing: border-box;

  width: 100%;

  height: 80%;

  padding: 5px 0 0 18px;

}

#A_Header .logo a img {

  vertical-align: top;

}

#A_Header .gnb_wrap {

  width: 100%;

  height: 80px;

}

#A_Header .gnb_wrap .inner:after {

  display: block;

  clear: both;

  *zoom: 1;

  content: '';

}

#A_Header .gnb_wrap .gnb {

  float: left;

}

#A_Header .gnb_wrap .gnb > li {

  position: relative;

  float: left;

  margin: 0 0 0 69px;

}

#A_Header .gnb_wrap .gnb > li:first-child {

  margin: 0 0 0 0;

}

#A_Header .gnb_wrap .gnb > li > a {

  display: block;

  line-height: 80px;

  font-size: 16px;

  font-weight: 500;

  color: #fff;

}

#A_Header .gnb_wrap .gnb > li:last-child a img{display:inline-block; vertical-align: middle; width:45px;}

#A_Header .gnb_wrap .gnb .active a {

  color: #14dca1;

}

#A_Header .gnb_wrap .gnb .lnb {

  font-weight: 400;

  display: none;

  position: absolute;

  top: 81px;

  left: -30px;

  box-sizing: border-box;

  width: 220px;

  padding: 25px 30px;

  background-color: #fff;

  border-top: 2px solid #2b3f89;

}

#A_Header .gnb_wrap .gnb .lnb li {

  margin: 15px 0 0 0;

}

#A_Header .gnb_wrap .gnb .lnb li:first-child {

  margin: 0;

}

#A_Header .gnb_wrap .gnb .lnb li a {

  display: block;

  font-size: 15px;

  color: #666;

}

#A_Header .gnb_wrap .util {

  float: right;

  padding: 30px 0 0 0;

}

#A_Header .gnb_wrap .util li {

  float: left;

}

#A_Header .gnb_wrap .util li a {

  display: block;

  line-height: 20px;

  font-size: 14px;

  color: #fff;

}

#A_Header .gnb_wrap .util li:last-child {

  position: relative;

  padding: 0 0 0 31px;

  margin: 0 0 0 30px;

}

#A_Header .gnb_wrap .util li:last-child:before {

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 1px;

  height: 20px;

  background-color: #fff;

  content: '';

}



#A_Header.on {

  background-color: #fff;

}

#A_Header.on .gnb_wrap .gnb li a {

  color: #333;

}

#A_Header.on .gnb_wrap .gnb .active a {

  color: #14dca1;

}

#A_Header.on .gnb_wrap .util li a {

  color: #999;

}

#A_Header.on .gnb_wrap .util li:last-child:before {

  background-color: #999;

}



/*sub page top gnb css*/

#A_Header.sub_page {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  box-sizing: border-box;

  width: 100%;

  padding: 0 0 0 260px;

  background-color: #fff;

  z-index: 10;

}

#A_Header.sub_page .gnb_wrap .gnb > li > a {

  display: block;

  line-height: 80px;

  font-size: 16px;

  font-weight: 500;

  color: #333;

}

#A_Header.sub_page .gnb_wrap .util li a {

  display: block;

  line-height: 20px;

  font-size: 14px;

  color: #999;

}

#A_Header.sub_page .gnb_wrap .util li:last-child:before {

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 1px;

  height: 20px;

  background-color: #999;

  content: '';

}

#A_Header.sub_page .gnb_wrap .gnb .active a {

  color: #14dca1;

}



/* 퀵메뉴 */

#quick_menu {

  position: fixed;

  top: 380px;

  right: 0;

  overflow: hidden;

  width: 90px;

}

#quick_menu ul {

  border: 1px solid #ddd;

  border-radius: 10px 0 0 0;

  background-color: #fff;

}

#quick_menu ul li {

  width: 100%;

  height: 88px;

}

#quick_menu ul li + li {

  border-top: 1px solid #ddd;

}

#quick_menu ul li a {

  display: block;

  box-sizing: border-box;

  width: 100%;

  height: 100%;

  padding: 16px 0 0;

}

#quick_menu ul li i {

  display: block;

  margin: 0 auto;

  width: 20px;

  height: 21px;

  background-image: url(../images/common/quick_icons.png);

  background-repeat: no-repeat;

}

#quick_menu ul li:nth-child(1) i {

  background-position: 0 0;

}

#quick_menu ul li:nth-child(2) i {

  background-position: -30px 0;

}

#quick_menu ul li p {

  margin: 10px 0 0 0;

  line-height: 16px;

  font-size: 12px;

  color: #666;

  text-align: center;

}

#quick_menu > a {

  display: block;

  width: 100%;

  height: 40px;

  line-height: 40px;

  font-size: 14px;

  font-weight: 500;

  color: #fff;

  text-align: center;

  background-color: #333;

  border-radius: 0 0 0 10px;

}



#btn_channel {

  position: fixed;

  right: 15px;

  bottom: 30px;

  width: 62px;

  height: 62px;

  background: url(../images/common/ic_channel.png) no-repeat 0 0;

  text-indent: -9999px;

}



/* 서브 네비게이션 바 */

.snb_wrap {

  box-sizing: border-box;

  width: 100%;

  padding: 120px 30px 0;

}

.snb_wrap .snb:first-child {

  border: 0;

}

.snb_wrap .snb li {

  margin: 16px 0 0 0;

}

.snb_wrap .snb li:first-child {

  margin: 0;

  text-align: center;

  color:#14dca1;

  font-weight: 600;

  font-size: 18px;

}

.snb_wrap .snb li a {

  position: relative;

  display: block;

  font-size: 18px;

  font-weight: 300;

  color: #fff;

  text-align: center;

  transition: all 0.2s ease-in-out;

}

.snb_wrap .snb li a:before {

  visibility: hidden;

  opacity: 0;

  position: absolute;

  top: 50%;

  left: 0;

  width: 10px;

  height: 1px;

  background-color: #14dca1;

  transition: all 0.2s ease-in-out;

  content: '';

}

.snb_wrap .snb li a:after {

  visibility: hidden;

  opacity: 0;

  position: absolute;

  top: 50%;

  right: 0;

  width: 10px;

  height: 1px;

  background-color: #14dca1;

  transition: all 0.2s ease-in-out;

  content: '';

}

.snb_wrap .snb li a:hover {

  color: #14dca1;

}

.snb_wrap .snb li a:hover:before {

  visibility: visible;

  opacity: 1;

}

.snb_wrap .snb li a:hover:after {

  visibility: visible;

  opacity: 1;

}



/* footer */

#A_Footer {

  box-sizing: border-box;

  width: 100%;

  padding: 0 0 40px;

  background-color: #333;

}

#A_Footer .ft_links {

  padding: 10px 0;

  border-bottom: 1px solid rgba(221, 221, 221, 0.2);

}

#A_Footer .ft_links:after {

  display: block;

  clear: both;

  *zoom: 1;

  content: '';

}

#A_Footer .ft_links > ul {

  float: left;

}

#A_Footer .ft_links > ul > li {

  float: left;

}

#A_Footer .ft_links > ul > li:first-child {

  margin: 0;

}

#A_Footer .ft_links > ul > li > a {

  display: block;

}

#A_Footer .ft_links .ft_lnb li {

  margin: 0 0 0 50px;

}

#A_Footer .ft_links .ft_lnb li a {

  line-height: 40px;

  color: #999;

}

#A_Footer .ft_links .ft_lnb .privacy a {

  font-weight: 500;

  color: #2c4bc1;

}

#A_Footer .ft_links .sns_links {

  float: right;

}

#A_Footer .ft_links .sns_links li {

  overflow: hidden;

  margin: 0 0 0 10px;

  border-radius: 50%;

}

#A_Footer .ft_links .sns_links li a {

  width: 40px;

  height: 40px;

  text-indent: -9999px;

  background-repeat: no-repeat;

  background-image: url(../images/common/sns_icons.png);

  background-color: #444;

}

#A_Footer .ft_links .sns_links li a:hover {

  background-image: url(../images/common/sns_icons_on.png);

}

#A_Footer .ft_links .sns_links li:nth-child(1) a {

  background-position: 0 0;

}

#A_Footer .ft_links .sns_links li:nth-child(2) a {

  background-position: -50px 0;

}

#A_Footer .ft_links .sns_links li:nth-child(3) a {

  background-position: -100px 0;

}

#A_Footer .ft_links .sns_links li:nth-child(4) a {

  background-position: -150px 0;

}

#A_Footer .ft_links .sns_links li:nth-child(5) a {

  background-position: -200px 0;

}

#A_Footer .ft_info {

  padding: 20px 0 0;

}

#A_Footer .ft_info:after {

  display: block;

  clear: both;

  *zoom: 1;

  content: '';

}

#A_Footer .ft_info .info_txt {

  float: left;

  width: 400px;

  line-height: 24px;

  font-size: 14px;

  color: #666;

}

#A_Footer .ft_info .center {

  float: left;

}

#A_Footer .ft_info .center .title {

  float: left;

  width: 80px;

  line-height: 24px;

  font-size: 14px;

  color: #666;

}

#A_Footer .ft_info .center .txt {

  float: left;

}

#A_Footer .ft_info .center .txt strong {

  display: block;

  line-height: 24px;

  font-size: 24px;

  color: #666;

}

#A_Footer .ft_info .center .txt p span {

  display: block;

  line-height: 24px;

  font-size: 14px;

  color: #666;

}



.chk_box input {

  display: none;

}

.chk_box input + label {

  display: block;

  overflow: hidden;

  cursor: pointer;

}

.chk_box input + label span {

  display: block;

  position: relative;

  float: left;

  box-sizing: border-box;

  border: 1px solid rgba(255, 255, 255, 0.7);

}

.chk_box input + label span:before {

  visibility: hidden;

  opacity: 0;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: 0;

  right: 0;

  margin: 0 auto;

  transition: all 0.1s ease-in-out;

  content: '';

}

.chk_box input + label p {

  float: left;

  margin: 0 0 0 10px;

  line-height: 20px;

  color: rgba(255, 255, 255, 0.7);

}

.chk_box input:checked + label span:before {

  visibility: visible;

  opacity: 1;

}

.chk_box input[type='checkbox'] + label span {

  width: 20px;

  height: 20px;

}

.chk_box input[type='checkbox'] + label span:before {

  width: 10px;

  height: 10px;

}

.chk_box input:checked + label span:before {

  visibility: visible;

  opacity: 1;

}

.chk_box input + label span:before {

  visibility: hidden;

  opacity: 0;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: 0;

  right: 0;

  margin: 0 auto;

  background-color: #14dca1;

  transition: all 0.1s ease-in-out;

  content: '';

}