@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Yeon+Sung&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700|Quicksand:700&display=swap&subset=korean')
  @font-face { font-family: 'GmarketSansLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal; }
@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');}
@font-face { font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face {
  font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 700;
  src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
    url('http://script.ebay.co.kr/fonts/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('http://script.ebay.co.kr/fonts/GmarketSansBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 500;
  src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
    url('http://script.ebay.co.kr/fonts/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('http://script.ebay.co.kr/fonts/GmarketSansMedium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 300;
  src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
    url('http://script.ebay.co.kr/fonts/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('http://script.ebay.co.kr/fonts/GmarketSansLight.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* common _ jyp */
body {
  font-family:'Noto Sans KR';
  color:#000;
  letter-spacing:0;
  -webkit-text-size-adjust: none;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,button,input {
  color:#333;
  margin:0;
  padding:0;
  font-size:15px;
  line-height:1.756em;
  font-weight:500;
}
table,td,th {
  color:#000;
}
table {
  border-collapse:collapse;
  border-spacing:0
}
ul,ol,li {
  list-style:none;
}
a,img {
  outline:0;
  text-decoration:none;
  border:0;
}
a:link,a:visited,a:active,a:hover {
  outline:0;
  text-decoration:none;
}
img.fit {
  width:100%;
}
img.max-fit {
  max-width:100%;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6, {
  margin-top:0;
}
.row {
  padding-right:0px !important;
  padding-left:0px !important
}
.row::after {
  clear:both;
}
.row::before,.row::after {
  display:table;
  content: " ";
}

[canvas=container],
[off-canvas] {
  padding: 10px 20px;
}

[class*=js-] {
  cursor: pointer;
}
button:focus {
  outline: none;
}
a {color:#333;}
a:focus, a:hover {color:#000;}

/* Footer */
.P-footer {
  position:relative;
  width: 100%;
  height:194px;
  background: #343632;
  padding: 0 5%;
}
.P-footer2 {
  clear:both;
  padding-bottom: 20px;
  width:100%;
}
.footer_in {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1380px;}
.footer-info {width:100%;}
.footer-info > div {width:100%; padding:0px 0px 0px 0px;}
.copy-item {
  display: block;
  width: 60%;
  text-align: left;
  font-size: 14px;
  color: #fff;
  font-weight: 300;
  float: left;
  word-break: keep-all;
}
.copy-item b {display:block; font-size:15px; font-weight: 500;}
.call_footer {float: right;text-align: right;width: 40%;}
.call_footer p{font-size: 14px;font-family:  'Noto Sans KR';margin-bottom: 15px;}
.call_footer a{font-size: 24px; font-weight: 300; letter-spacing:1px; line-height:2; font-family: 'GmarketSansMedium'; color: #fff;}
.call_footer a:hover {color:#fff !important;}
.call_footer b {display:block; font-size:15px; font-weight: 500;color:#fff;}
.call_footer .call2{margin-right: 0;padding-right: 0;border-right: 0;}
.footer-info:after {content:""; display:block; clear:both;}
/* Footer 끝*/
#totalANDzeroweb {text-align:left !important;}
#totalANDzeroweb div {width: 320px; margin:0 !important;  font-size:14px; font-weight:normal; color: #9e9e9e;}

/* all  */
#SUB_Scontent {margin:0 auto;}
#SUB_Scontent dl {background: #f9f9f9;}
.swiper-container {
  position: relative;
  width: 50%;
  overflow: hidden;
}
.P-nav-logo.m { display: none !important; }
.P-nav-logo.t { display: none !important; }
.pc { display: block; }
.m {display:none}
.menu {max-width:90% !important;}
.visible-lg {position:relative; display:block !important;}
#btnCi {display:block; position: absolute; left: 0; z-index:2;}
.P-header {
  width:100%;
  margin:0 auto;
  height:100px;
  z-index: 999;
  top: 0;
  left: 0;
  background-color:#fff;
  display: inline-block;
  transition-duration: 0.3s;
}
.P-header.shrink, .P-nav > ul.shrink {height:80px;}
.P-nav > ul > li.shrink {line-height:80px;}
.P-nav-logo img {transition-duration: 0.3s;}
.P-nav-logo.shrink img {margin-top: -20px;}
.P-header a {
  font-family:'Noto Sans KR', 'Sans-serif';
  font-size:18px;
  color:#000000;
  font-weight:normal;
}
.P-nav a:first-child {margin: 0 auto;}
.show_btn {
  display:block;
  height:40px;
  line-height:40px;	
  text-align: center;
  float:right;
  position:absolute;
  right:0;
  top: 34px;
}
.show_btn img {margin-right:5px;}
.P-nav > ul > li {width:20%; float:left; text-align: center;}
.P-nav-item {font-size:18px; font-weight:normal; color:#000;}
.P-nav-item:hover, .P-nav-item:focus {
  font-size: 18px;
  font-weight: normal;
  text-decoration: none;
}
.P-member {display: none;}
.P-nav-logo {
  height: 100px;
  position: relative;
  font-size: 30px;
  line-height: 100px;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  color: #000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.P-nav > ul {
  width: 100%;
  height: 100px;
}
.visible-lg ul li:hover > ul{
  display:block;
}
.P-nav > ul > li {position:relative; line-height:100px; transition-duration: 0.3s; z-index:2; float: right;}
.P-nav > ul > li > a {display: block; z-index:2;}
.P-nav-item:hover, .P-nav-item:focus {font-weight: 600; color:#056bb5 !important;}
.P-nav:after {content:""; display:block; clear:both;}
.sub_02_menu{
  display:none;
  position: absolute;
  width: 100%;
  top: 90px;
  left: 0;
  float: left;
  text-align: center;
  border-top:2px solid #ed1b23;
  transition:all 0.7s ease-in-out;	
  z-index:-1;
}
.P-nav > ul > li {position:relative; width:auto; padding:0 20px; line-height:100px; z-index:2;}
.P-nav > ul > li:first-child {padding-right:0;}
.visible-lg ul li:hover > ul {display:block; z-index:1;}

/* Overline From Center */
.hvr-overline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-overline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 30px;
  background: #056bb5;
  height: 2px;
  -webkit-transition-property:left, right;
  transition-property:left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {left: 0; right: 0%;}

/*로고 끝*/
.wrap {position: relative; width: 1280px; margin: auto;}
.wrap_in {height:auto;margin:0 auto;}
.boxx3 a, a:hover {color:#333;}
#menu_wrap { 
  position:absolute; 
  display: block;
  right: 0; 
  width:70%; 
  height:100%;
  z-index:2;
  -webkit-transform: translate3d(100vw,0,0);
  -moz-transform: translate3d(100vw,0,0);
  -ms-transform: translate3d(100vw,0,0);
  -o-transform: translate3d(100vw,0,0);
  transform: translate3d(100vw,0,0);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(.16, .68, .43, .99);
  -moz-transition: -moz-transform 0.5s cubic-bezier(.16, .68, .43, .99);
  -o-transition: -o-transform 0.5s cubic-bezier(.16, .68, .43, .99);
  transition: transform 0.5s cubic-bezier(.16, .68, .43, .99);
}
#menu_wrap.push { 
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(.16, .68, .43, .99);
  -moz-transition: -moz-transform 0.5s cubic-bezier(.16, .68, .43, .99);
  -o-transition: -o-transform 0.5s cubic-bezier(.16, .68, .43, .99);
  transition: transform 0.5s cubic-bezier(.16, .68, .43, .99);
}
button{background: transparent; border:none;}

.hidden-lg {display:none;}
.content {
  width:100%;
  position: relative;
}

.g {font-family: 'Gmarket Sans';}
.swiper-container {width: 100%; overflow-y:hidden;}

/* 메인슬라이드 */ 
.swiper-container.tablet, .swiper-container.mobile {display:none;}
.content {width:100%; height:562px; position: relative; margin-top: 100px;}
.main_bg {position: absolute; width:100%; height: 562px; overflow:hidden; float:left;}
.main_bg_in {background:url("/images/main/main.png") no-repeat top center / cover; background-attachment: fixed; height: 120%;}
.mb_txt_in {width: 90%; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); text-align:center; z-index:9;}
.mb_txt_in small {font-size:18px; font-weight:400; color:#fff; text-align:center;}
.mb_txt_in h1 {font-size:48px; font-weight:600; color:#fff; padding-bottom:32px; text-align:center;}
/* 메인슬라이드 */ 

/* 제품소개 */
#ga_product {width:100%; height:auto;}
.product_in {width:1280px; padding:96px 0 78px; margin:0 auto;}
.product_in.mobile {display:none;}
.product_in > div {width: 30%; float: left;}
.pro_right {margin-top:68px;}
.product_in > div:nth-child(2) {margin:0 5%;}
.product_in:after {content:""; display:block; clear:both;}
.product_in > div > a.ca_tit {display: block; margin-bottom:20px; font-size:30px; font-weight:bold; color:#000;}
.ca_tit h1 {font-size:30px; font-weight:bold; color:#000;}
.ca_sub_txt {font-size:18px; font-weight:400; line-height:1.4; color:#333; padding-bottom:48px; word-break: keep-all;}
.product_in > div > a {display:block; margin-bottom:34px;}
.product_in > div p span {display:inline-block; width:18px; height:12px; margin-left:10px; background:url("../images/main/rightarrow.svg") no-repeat center / 100%; transform:translateX(0px); transition: transform .35s; -o-transition: transform .35s; -moz-transition: transform .35s;-webkit-transition: transform .35s; vertical-align: middle;}
.product_in > div > a:hover span {transform:translateX(10px);}
.product_in > div p {font-size:18px; color:#282828;}
.product_in > div p img {margin-left:10px; transform:translateX(0px); transition: transform .35s; -o-transition: transform .35s; -moz-transition: transform .35s;-webkit-transition: transform .35s;}
.img_box {width:100%; height:auto; margin-bottom:12px; -webkit-border-radius: 0 0 30px 0; -moz-border-radius: 0 0 30px 0; border-radius:0 0 30px 0; overflow:hidden;}
.img_box img:hover {cursor:pointer; -webkit-transform:scale(1.1); /*  크롬 */ -moz-transform:scale(1.1); /* FireFox */ -o-transform:scale(1.1); /* Opera */
transform:scale(1.1); transition: transform .35s; -o-transition: transform .35s; -moz-transition: transform .35s;-webkit-transition: transform .35s;}
/* 제품소개 */

/* 약속 */
#ga_example {}
.ga_bg {width:83.7%; height:300px; background:url("../images/main/example.png") no-repeat center / cover; background-attachment:fixed;}
.example_in {width:1280px; margin:-300px auto 0; position:relative;}
.ex_img_box {width:640px; height:370px; background:url("../images/main/ex01.png") no-repeat center / cover ;border-radius:0 0 50px 0; overflow:hidden;}
.example_in .ca_tit h1 {color:#fff;}
.example_in .ca_sub_txt {display:block; color:#fff; padding:16px 0 23px;}
.goBtn {display:block; width:130px; height:34px; line-height:34px; border-radius:30px; background:#fff; color:#0b5fbc; text-align:center;}
.goBtn:hover {color:#0b5fbc !important;}
.ex_txt_box {position:absolute; top:86px; left:55%;}
/* 약속 */

/* 배너 */
#ga_partner {width:1280px; margin:120px auto 110px; height:100%;}
.partner_in {margin:0 auto; position:relative;}
/* 배너사이즈와 위치 */
#slider_1 {width: 100%; margin: 45px 0 0 0;}
#ga_partner .item {display: inline-block; text-align: center;}
#prev_btn_1 {position:absolute; top: 50%; transform: translateY(-50%); left:0; text-align: center;line-height: 52px; cursor: pointer; z-index:9;}
#next_btn_1 {position:absolute; top: 50%; transform: translateY(-50%); right:0; text-align: center;line-height: 52px; cursor: pointer; z-index:9;}
#prev_btn_1 span img, #next_btn_1 span img{width: 16px;}
/* 배너 */

/*푸터*/
.ft_bottom:after {content:""; display:block; clear:both;}
.ft_bottom {border-top: 1px solid #e3e3e3; padding-top: 108px;}
.ft_logo {margin:0 auto; text-align:center;}
.ft_bottom > a {display:block; width: fit-content; margin:0 auto; padding:22px 0; font-weight:600; color:#000; letter-spacing:0.2px; text-align:center;}
.ft_txt {font-size:14px; line-height:1.2; font-weight:300; text-align:center; padding-bottom: 12px;}
/*푸터*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .P-nav > ul {height:110px;}
  .P-nav > ul > li {line-height:110px;}
  .sub_02_menu {top: 90px;}
  .pc_logo {top:inherit; transform:translateX(-50%); padding-top:14px;}
}

/* [ 0 ~ 1280px 적용] */
@media all and (max-width:1280px){  
  .t{display:block;}
  .m{display:none;}
  .subMenu {display:none;}
  header {max-width: 100%; margin: 0 auto;}
  .msd_logo {
    width: 100%;
    z-index: 3;
    top: 34%;
    position: absolute;
  }
  .msd_logo_box {
    width: 280px;
    margin: auto;
  }
  .msd_logo_box img {width: 100%;  }
  .msd_logo {
    width: 100%;
    z-index: 3;
    top: 34%;
    position: absolute;
  }
  .P-member {display: none;  }
  .P-header {
    width: 100%;
    height:90px;
    display: inline-block;
    border-bottom: 1px solid #ccc;
    margin: 0 auto;
    padding: 0%;
    z-index: 10;
  }
  .P-header.shrink, .P-nav > ul.shrink {height: 90px;} 
  .P-nav-logo.shrink img {width: 220px; margin-top: 0px;}
  .P-nav-logo {height: 90px;}
  .wrap {
    position: relative;
    width: 100%;
    margin: auto;
  }
  .visible-lg {display: block; overflow: hidden;}
  #btnCi {display: block;}
  #btn-top-menu {width: 28px; float: right; padding-top:34px;}
  #btn-top-menu img {display: block;}
  /*로고 끝*/
  .wrap_in {
    height: 110px;
    margin: 0 auto;
    width: 100%;
  }
  .wrap:after {
    content:"";
    display:block;
    clear:both;
  }
  .visible-lg {display: none !important;}
  .hidden-lg {display: block !important;}
  .content {margin-top:90px;}
  .product_in, .example_in, .ga_bg, #ga_partner {width:90%;}
  .ex_img_box {width:50%;}
}

@media all and (max-width:876px) {
  .P-header, .wrap_in, .P-nav-logo {height: 80px;}
  .P-header.shrink, .P-nav > ul.shrink {height: 80px;} 
  .P-nav-logo {margin-top: 0px;}
  .P-nav-logo img {width:174px;}
  .P-nav-logo.shrink img {width: 184px; margin-top:0px;}
  #btn-top-menu {padding-top: 27px;}
  .content {margin-top:80px; height: 390px;}
  .main_bg {height:390px;}
  .mb_txt_in h1 {font-size:36px; padding-bottom: 24px;}
  .product_in {display:none;}
  .product_in.mobile {display:block;}
  .ca_sub_txt {padding:18px 0 48px;}
  .product_in > div {width:48%;}
  .product_in > div.pro_left {margin-right:4%;}
  .ga_bg {width:100%;}
  .owl-carousel .owl-item img {width:120px;}
  #prev_btn_1 {left:-1.5%;}
  #next_btn_1 {right:-1.5%;}
}

@media all and (max-width:640px) {
  .mb_txt_in h1 {font-size: 34px; padding-bottom: 26px;}
  .mb_txt_in small {font-size: 16px; word-break:keep-all;}
  .ca_tit h1 {font-size: 28px;}
  .ca_sub_txt, .product_in > div p {font-size: 16px;}
  .ex_img_box {width: 100%; height: 240px; margin-top: 210px;}
  .ex_txt_box {top: -168px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center;}
  .goBtn {margin:0 auto;}
  #prev_btn_1 span img, #next_btn_1 span img {width:12px;}
  #ga_partner {margin: 70px auto 60px;}
  .ft_txt, #totalANDzeroweb div {font-size: 13px; line-height:2; word-break:keep-all;}
  .footer-info > div {width: 100%;}
  .call_footer {float: none; text-align: left;}
  .call_footer b {display:initial; padding-right:12px;}
  .copy-item {font-sizE:13px;}
}

@media all and (max-width:480px){
 .mb_txt_in h1 {font-size: 32px; line-height:1.4; padding-bottom:8px;}
 .product_in {padding:70px 0;}
 .product_in > div > a {margin-bottom:40px;}
 .product_in > div {width: calc(50% - 11px);}
 .product_in > div.pro_left {margin-right: 22px;}
 .img_box img {height:200px;}
 .owl-carousel .owl-item img {width: 110px;}
}