@charset "utf-8";
/* @import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css'); */
@import url('http://meta-kage.kakaocdn.net/dn/osa/blog/assets/fonts/Kakao.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* @import url('//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); */
/* Thin – 100 */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* ExtraLight – 200 */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Light – 300 */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Regular – 400 */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium – 500 */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* SemiBold – 600 */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Bold – 700 */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ExtraBold – 800 */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Black – 900 */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@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: '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: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
          outline: none;
}
::selection {
    background:#FAE100;
    color: #fff;
    text-shadow: none;
}
::-moz-selection {
    background:#FAE100;
    color: #FFF;
    text-shadow: none;
}
::-webkit-selection {
    background:#FAE100;
    color: #FFF;
    text-shadow: none;
}
/* 초기화 */
*{margin:0; padding:0;border:0 }
html {
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
html, body {
  /* font-family: 'Pretendard','SpoqaHanSans Kr','NanumSquare', 'kakao', 'Noto Sans', 'Lato', sans-serif;
  font-size: 15px; */
  /* color: #222;
  height: 100%;
  display: block; */
}
body {

}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img, p {margin:0;padding:0;border:0; font-weight: 400;}

/* h1 {font-size: 1.625rem;}
h2 {font-size: 1.25rem;}
h3 {font-size: 1.0625rem;}
h4 {font-size: .9375rem;}
h5 {font-size: .8125rem;}
h6 {font-size: .625rem;} */

a {
	color: inherit;
    text-decoration: none;
}
a:hover {
	color: inherit;
	text-decoration: none;
}
a:link {
	color: inherit;
	text-decoration: none;
}
ul, ol, li {
    list-style: none;
    margin: 0;
}
b, strong {
    font-weight: bolder;
}
img {
	vertical-align: middle;
}
button:active, button:focus {
	outline: none;
}
*:focus {
    outline: none;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
em{font-style: normal;}

/* 공통 */
.fl {
	float: left;
}
.fr {
	float: right;
}
.tc {
	text-align: center;
}
.tl {
	text-align: left;
}
.tr {
	text-align: right;
}
.clearfix {
	clear: both;
}


strong {font-weight:600 !important;}

.h100 {height:100px;}
.h200 {height:200px;}
.h300 {height:300px;}
.h400 {height:400px;}
.h500 {height:500px;}
.h600 {height:600px;}
.h700 {height:700px;}
.h800 {height:800px;}
.h900 {height:900px;}

.sect-pd {padding:100px 0;}
.sect-pd-sm {padding:70px 0;}
.pt100 {padding-top:100px;}
.pt200 {padding-top:200px;}
.pt300 {padding-top:300px;}
.pt400 {padding-top:400px;}
.pt500 {padding-top:500px;}

.bg-yellow {background-color:#ffd000;}
.bg-orange {background-color:#ff9a00;}
.bg-blue {background-color:#007cff;}
.bg-gray {background-color:#638193;}

/* 레이아웃 */
.o2oWrap{width:100%; min-width: 1200px;}
.o2oWrap .m_contents{position: relative; width:100%; background: url(/images/main/bg_intro_01.png) repeat top center; background-size: 40%;}
.o2oWrap .s_contents{position: relative; width:100%;}
.o2o_wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-width: 1000px;
	color: #333;
}
.o2o_header {
	z-index: 100;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom:10px solid #eee;
    background: #fff;
}
.header {
	display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}
.header nav {
	flex: 1;
	margin: 0 2rem;
}
.header .logo {

}
.header .logo h1 {
	display: inline-block;
    line-height: 1.2;
	vertical-align: middle;
	font-family: 'Noto Sans KR';
	color: #000;
	font-size: 1.5rem;
	font-weight: 700;
}
.header .logo h1 p {
	font-size: .8rem;
	font-weight: 400;

}
.header .logo img {
	height: 46px;
	margin-right: 1rem;
	vertical-align: middle;
}

.head_logo strong {
    font-family: 'Pretendard';
    font-weight: 700;
	margin-right: 7px;
}

.btn.focus, .btn:focus {
    box-shadow: none;
}

.btn-top {
	font-weight: 600;
	background: #fede22;
    border-radius: 100px;
    padding: .5rem 2rem;
}
.btn-top:nth-of-type(2) {
	margin-left:8px;
    background: #e5e5e5;
}
.o2o_contents {
	flex: 1;
	margin: 0;
	padding: 0;
}
.o2o_footer {
    color:#111;
    font-weight: 400;
    background: #fff;
    border-top:100px solid #eee;
}
.inner {
    width: 1200px;
    margin: 0 auto !important;
    position: relative;
}
.header.inner .btn.btn-top {
    font-weight: 600;
    background: #fede22;
    border-radius: 100px;
    padding: .5rem 2rem;
    border-radius: 999px;
}
.header.inner .btn-top:nth-of-type(2) {
    margin-left: 8px;
    background: #e5e5e5;
}
/* section {
	position: relative;
	margin: 0;
	padding: 0;
}
section.dark {
	background-color: #323237;
	color: #fff;
}
section.dark .sect-title {
	color: #fff;
}
section.visual {
	height: 740px;
	background-color: #fede22;
}
section.intro {

} */
.intro-title {
	flex: 1;
	font-size: 4rem;
	font-weight: 900;
	color: #000;
	line-height: 1.25;
}
.intro-desc {
	flex: 1;
}
/* section.partner {

}
section.partner > div {
	padding: 5rem 10rem;
}
section.service {
	background-color: #ffd000;
}

section.service .step {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	align-items: center;
} */
.step-txt {
	position: relative;
	color: #fff;
	width: 360px;
	z-index: 20;
}
.step-txt:before {
	content: attr(step);
	position: absolute;
	display: inline-block;
	top: 50%;
	left: -12rem;
	transform: translateY(-50%);
	font-family: 'Roboto';
	font-size: 40rem;
	font-weight: 900;
	line-height: 1;
	opacity: .1;
	color: #000;
	z-index: -1;
}
.step-txt.right {
	float: right;
}
.step-txt.right:before {
	left: auto;
	right: -7rem;
}
.step-txt h1 {
	font-size: 3rem;
	font-weight: 300;
}
.step-txt h1 strong {
	display: block;
	font-weight: 900;
}
.step-txt p {
	font-size: 1.2rem;
	font-weight: 400;
	margin-top: 2rem;
	word-break: keep-all;
}
/* section.service .service-bg {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
    z-index: 10;
    transition:1s;
} */
.cell-phone {
	width: 452px;
	height: 710px;
	background-image: url('/img/iphone.png');
    background-size: 452px;
	background-repeat: no-repeat;
	margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(calc(-50% + 300px)) translateY(calc(-50% + 80px));
    z-index: 10;
}
.service-video {
	border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(calc(-50% + 240px)) translateY(calc(-50% + 28px));
    width: 244px;
    margin: auto;
	opacity: 0;
	-webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.service-video.show {
	opacity: 1;
	-webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.iphone {
	width: 452px;
	height: 710px;
	background-image: url('/img/iphone.png');
    background-size: 452px 710px;
	background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
}
.iphone-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 244px;
    height: 526px;
    background-size: 100%;
	background-repeat: no-repeat;
}
.iphone-inner.alim {
	background-image: url('/img/iphone-1.jpg');
}
.iphone-inner.friend {
	background-image: url('/img/iphone-2.jpg');
}
.iphone-inner.lms {
	background-image: url('/img/iphone-3.jpg');
}
.step-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(160%, -50%);
	-webkit-transition: all 1.4s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 1.4s cubic-bezier(0.6, 0.2, 0.1, 1);
	z-index: 1;
}
.step-img.reverse {
	transform: translate(-250%,-50%);
}
.step-img img {
	width: 150px;
}
.step-bg{ position:absolute; top:0; left:0; height:100%; width:100%; 	-webkit-transition: all 1.4s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 1.4s cubic-bezier(0.6, 0.2, 0.1, 1); opacity:0;}
.show+.step-bg{ opacity:1;}

/*.show > .step-img {
	opacity: 1;
	transform: translateX(50%);
	-webkit-transition: all 1.4s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 1.4s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition-delay: 1s
}
*/
.sect-img {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-125%,-50%);
}
.sect-img img {
	width: 400px;
}
.sect-img.reverse {
	transform: translate(25%,-50%);
}
.sect-txt {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0,-50%);
    margin-left: 0;
    max-width: 500px;
    word-break: keep-all;
}
.sect-txt h3 {
	font-size: 3rem;
    font-weight: 900;
    line-height: 1.35;
    color: #000;
}
.sect-txt p {
	margin-top: 25px;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.7;
    color: #666;
}
.sect-txt.reverse {
	left: 0;
}
.sect-title {
	display: block;
    margin-bottom: 100px;
    color: #000;
}
.sect-title h1 {
	font-family: 'Roboto';
	font-size: 100px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1px;
    background: -webkit-linear-gradient(15deg, #8983ba, #9e98cc 20%, #c29abe 38%, #e197b0 56%, #ff9a7d 74%, #ffb467 84%, #ffd000);
    background: linear-gradient(75deg, #8983ba, #9e98cc 20%, #c29abe 38%, #e197b0 56%, #ff9a7d 74%, #ffb467 84%, #ffd000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sect-title h3 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 25px;
}
.sect-title p {
    color: #333;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: -0.05em;
}
.desc-regist {
    font-size: 1.2rem;
    font-weight: 300;
    color: #fff;
    line-height: 1.8;
}
.regist-btn {
    font-family: 'SpoqaHanSans';
    position: absolute;
    right: 0;
    bottom: 100px;
    padding: 15px 50px;
    border-radius: 100px;
    font-weight: 400;
    font-size: 2rem;
    letter-spacing: -1px;
    color: #333;
    background-color: #fff;
    text-align: center;
}
.section-divider {
	width: 100%;
    height: 24px;
    background-color: #fafafa;
}
.card-item {
	width: 100%;
	height: 100%;
	background: #fff;
	padding: 2rem;
	border-radius: 1rem;
	box-shadow: 1px 1px 45px 11px rgba(0,0,0,.1);
	text-align: center;
}
.card-item img {
	width: 50px;
	margin: 2rem 0;
}
.card-item h4 {
	font-size: 1.35rem;
	font-weight: 900;
	color: #000;
	margin-bottom: 1rem;
}
.card-item p {
	color: #666;
	font-size: 1rem;
	font-weight: 400;
	word-break: keep-all;
}
.home_process {
	display: block;
	text-align: center;
}
.home_process ul li {
	position: relative;
	display: inline-block;
	font-family: 'Spoqa Han Sans';
	margin: 0 30px;
	vertical-align: top;
}
.home_process ul li:after {
	content: '\e315';
	font-family: 'Material Icons';
	font-size: 50px;
	vertical-align: middle;
	position: absolute;
	top: 50px;
	right: -60px;
	color: #dedede;
}
.home_process ul li:last-child:after {
	display: none;
}
.home_process ul li .step {
	color: #000;
	background: #f2f2f2;
	border-radius: 100%;
	width: 150px;
	height: 150px;
	margin-bottom: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.home_process ul li .step.on {
	background: #ffd000;
}
.home_process ul li .step span {
	font-size: 40px;
}
.home_process ul li .title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 15px;
}
.home_process ul li .desc {
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
}
.list-partner {
	margin: 0 -15px;
}
.list-partner li {
	float: left;
	width: 23%;
    margin: 1%;
}
.list-partner li img {
	width: 100%;
}
.list-guide li {
	overflow: hidden;
    position: relative;
    border: 1px solid rgba(34,34,34,.05);
    border-radius: 6px;
    margin-top: 10px;
    background-color: #fafafa;
}
.list-guide .link-guide {
	display: block;
    padding: 16px 34px;
    font-size: 16px;
    color: #326edc;
}
.list-guide li:hover {
	border-color: rgba(50, 110, 220, 0.5);
	background: rgba(50, 110, 220, 0.1);
}
.list-guide .link-guide i {
	color: #666;
}
/* section.service .step.step-1  {
	margin-top: -100vh;
}
section.service .step.step-1 .step-txt {
	color: #000;
}
section.service  .step.step-2 {
	background-color: #12b4ff;
}

section.service .step.step-3 {
	background-color: #12b4ff;
} */
.step-caption {
	position: relative;
    width: 100%;
    text-align: center;
}
.step-caption h2 {
    font-size: 3.5rem;
    font-weight: 300;
    color: #000;
}
.visual-txt {
	font-family: 'Noto Sans KR';
	position: absolute;
    top: 215px;
    left: 0;
    -webkit-font-smoothing: antialiased;
}
.visual-txt > h2 {
    line-height: 1.2;
    font-size: 4rem;
    font-weight: 300;
    color: #000;
}
.visual-txt > p {
	font-size: 1.2rem;
	font-weight: 400;
    line-height: 1.35;
    color: #111;
    margin-top: 2rem;
}
.visual-img {
	position: absolute;
	bottom: -100px;
	right: 120px;
    -moz-box-shadow: -30px 30px 30px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: -30px 30px 30px 0 rgba(0, 0, 0, 0.3);
    box-shadow: -30px 30px 30px 0 rgba(0, 0, 0, 0.3);
	width: 350px;
	height: 700px;
	border-radius: 2.5rem;
	background: #fff;
	padding: 1rem;
}
.frame {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 1.5rem;
}
:root {
  --card-padding: 24px;
  --card-height: 100%;
  --card-skeleton: linear-gradient(#F2F2F5 var(--card-height), transparent 0);
  --avatar-size: 32px;
  --avatar-position: var(--card-padding) var(--card-padding);
  --avatar-skeleton: radial-gradient(circle 16px at center, #E6E6E8 99%, transparent 0
  );
  --title-height: 32px;
  --title-width: 200px;
  --title-position: var(--card-padding) 180px;
  --title-skeleton: linear-gradient(#E6E6E8 var(--title-height), transparent 0);
  --desc-line-height: 16px;
  --desc-line-skeleton: linear-gradient(#E6E6E8 var(--desc-line-height), transparent 0);
  --desc-line-1-width:230px;
  --desc-line-1-position: var(--card-padding) 242px;
  --desc-line-2-width:180px;
  --desc-line-2-position: var(--card-padding) 265px;
  --footer-height: 40px;
  --footer-position: 0 calc(var(--card-height) - var(--footer-height));
  --footer-skeleton: linear-gradient(#F2F2F5 var(--footer-height), transparent 0);
  --blur-width: 200px;
  --blur-size: var(--blur-width) calc(var(--card-height) - var(--footer-height));
}
.frame:empty::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.1);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(211, 211, 211, 0)), color-stop(50%, rgba(211, 211, 211, 0.8)), to(rgba(211, 211, 211, 0))), var(--title-skeleton), var(--desc-line-skeleton), var(--desc-line-skeleton), var(--avatar-skeleton), var(--footer-skeleton), var(--card-skeleton);
  background-image: linear-gradient(90deg, rgba(211, 211, 211, 0) 0, rgba(211, 211, 211, 0.8) 50%, rgba(211, 211, 211, 0) 100%), var(--title-skeleton), var(--desc-line-skeleton), var(--desc-line-skeleton), var(--avatar-skeleton), var(--footer-skeleton), var(--card-skeleton);
  background-size: var(--blur-size), var(--title-width) var(--title-height), var(--desc-line-1-width) var(--desc-line-height), var(--desc-line-2-width) var(--desc-line-height), var(--avatar-size) var(--avatar-size), 100% var(--footer-height), 100% 100%;
  background-position: -150% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading 1.5s infinite;
          animation: loading 1.5s infinite;
}

@-webkit-keyframes loading {
  to {
    background-position: 350% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
  }
}

@keyframes loading {
  to {
    background-position: 350% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
  }
}

video {
	width: 100%;
}
.visual-title {
	font-family: 'Noto Sans KR';
	position: absolute;
    top: 215px;
    left: 0;
    font-weight: bold;
    font-size: 3rem;
    line-height: 1.2;
    color: #333;
    -webkit-font-smoothing: antialiased;
}
.visual-desc {
	font-family: 'Noto Sans KR';
	position: absolute;
    top: 320px;
    left: 0;
    font-weight: 400;
    font-size: 1.5rem;
    color: #111;
    -webkit-font-smoothing: antialiased;
}

.kakao-partner {
	font-family: 'kakao';
	font-size: 3rem;
	font-weight: 400;
	color: #000;
}
.dhn-partner {
	font-family: 'kakao';
	font-size: 1.5rem;
	font-weight: 300;
	color: #fff;
}
.dhn-partner > p {
	font-size: 2rem;
	font-weight: 400;
}
.btn-login {
	display: inline-block;
    padding: 1rem 3rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    background-color: #fff;
    border-radius: 100px;
    margin-top: 4rem;
}

.f_info {
	padding: 30px 0 50px 170px;
	background: url('/img/logo_top4.png')no-repeat top 40px left;
	background-size: 100px;
}
.address {
	font-size: 0.9rem;
	color: #666;
    line-height: 1.6;
}
.address ul:after {
	content: "";
	display: block;
	clear: both;
}
.address .company_info li {
    position: relative;
    float: left;
    padding: 0 12px 0 13px;
}
.company_info li:first-child {
    padding-left: 0;
}
.company_info li + li:before {
    position: absolute;
    top: 50%;
    left: 0;
    content: "";
    width: 1px;
    height: 12px;
    margin-top: -6px;
    background-color: rgba(255,255,255,.2);
}
.company_info li + li:before {
    position: absolute;
    top: 50%;
    left: 0;
    content: "";
    width: 1px;
    height: 12px;
    margin-top: -6px;
    background-color: rgba(255,255,255,.2);
}
.address .copy {
	display: block;
	margin-top: 15px;
	font-size: 0.8rem;
}
.address .branch_wrap{
	margin-top:10px;
}
.address .branch_wrap li{
	width:100%;
    margin:0px 0;
}

.footer-cs {
	position: absolute;
    bottom: 52px;
    left: 0;
    text-align: left;
}
.footer-cs .cs-title {
	font-size: 1rem;
}
.footer-cs .cs-call {
	font-size: 2rem;
	letter-spacing: -1px;
	line-height: 1;
  font-family: 'SpoqaHanSans';
  margin-top:5px;
}
.footer-cs .cs-time {
	font-size: 1rem;
  margin-top:5px;
}
.scroll-animation-obj {
  opacity: 0;
  -webkit-transition: all 1.4s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 1.4s cubic-bezier(0.6, 0.2, 0.1, 1);
}
.scroll-animation-hop {
  transform: translate(0,60px);
}
.scroll-animation-left {
  transform: translate(-120px,0);
}
.scroll-animation-right {
  transform: translate(120px,0);
}
.scroll-animation-up {
  transform: translate(0,-120px);
}
.scroll-animation-down {
  transform: translate(0,120px);
}

/*2021.02오투오 메인*/
.main_hero {
    position: relative;
    height: 420px;
    background: url('/images/main/intro_bg_01.jpg') top center;
    background-size: cover;
}
/* .main_hero:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  background: rgba(0,0,0,0.1);
} */

.main_hero .main_slogan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    width: 1200px;
    height: 100%;
    margin:0 auto;
    padding-left:30px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
}
.main_hero .main_slogan strong{
    font-family: 'GmarketSansMedium';
}
.main_hero .main_slogan > span:first-child {
    margin-left:5px;
	font-size: 1.2rem;
}
.main_hero .main_slogan > p {
    font-size: 3.6rem;
    line-height: 1.1;
}
.main_hero .main_slogan > span.main_tel {
    display:inline-block;
    position: relative;
    width:fit-content;
    padding:7px 40px 4px 70px;
	font-size: 1.9rem;
    font-weight: 600;
    border:3px solid #fff;
    border-radius: 999px;
}
.main_hero .main_slogan > span.main_tel::before{
    content: '\e0b0';
    position: absolute;
    top:0px;
    left:25px;
	font-size: 2.4rem;
    font-family: 'Material Icons';
}
.main_shortcut {
    position: relative;
    width:1200px;
    margin:0 auto;
}
.main_shortcut .main_short_icon{
    display: flex;
    justify-content: space-between;
    padding:40px 0;
}
.main_shortcut .main_short_icon a{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    font-weight: 600;
}
.main_shortcut .main_short_icon a img{
    width:60%;
    margin-bottom:5px
}
.main_shortcut .main_cont > div:hover h3 {
	color: #0096ff;
}
.main_shortcut .main_cont > div > a {
	padding: 35px;
	display: inline-block;
	width: 100%;
	height: 100%;
}
.main_shortcut .main_cont > div > a > h3 {
	margin-bottom: 15px;
    font-weight: bold;
    letter-spacing: -0.05em;
    font-size: 22px;
    color: #000;
}
.main_shortcut .main_cont > div > a > p {
    line-height: 24px;
    letter-spacing: -0.05em;
    font-size: 14px;
    font-weight: 300;
    color: #666;
    word-break: normal;
}
.main_shortcut .main_link {
	-webkit-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-moz-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -o-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000); /* easeOutQuint */
}
.main_shortcut .main_link.alimtalk {
	background: url(/images/m_msg_img01.png)no-repeat;
	background-position: right 25px bottom -55px;
	background-size: 120px auto;
}
.main_shortcut .main_link.friendtalk {
	background: url(/images/m_msg_img02.png)no-repeat;
	background-position: right 25px bottom -55px;
	background-size: 120px auto;
}
.main_shortcut .main_link.sms {
	background: url(/images/m_msg_img03.png)no-repeat;
	background-position: right 25px bottom -55px;
	background-size: 120px auto;
}

section h3 {
}
section h4 {
    font-size:22px;
    color: #999;
}

section .content_wrap {
	position: relative;
	width: 1200px;
	margin: 0 auto;
    padding:100px 0;
	text-align: center;
    border-bottom:1px solid #eee;
    background: none;
}
section.feature {
	background: #eee;
}
section.feature .content_wrap{
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    gap:20px;
    padding:40px 0;
    background: #eee;
}
.service_feature > a {
    display: flex;
    align-items: center;
    position: relative;
	width: calc(100% / 3 - 20px);
    padding: 5px 5px 5px 25px;
	height: 150px;
    line-height: 1.2;
    font-size: 0.85em;
    font-family: 'GmarketSansMedium';
    font-weight: 400;
    color:#999;
    text-align: left;
    background: #fff;
    border-radius: 15px;
	-webkit-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-moz-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -o-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}
.service_feature > a h4 {
    margin-bottom:10px;
    font-size: 1.6em;
    font-family: 'GmarketSansMedium';
    color:#111;
}
[class^="feature"]:before {
    content: "";
    display: inline-block;
    position: absolute;
    top:50%;
    right:6%;
    transform: translateY(-50%);
    width: 130px;
    height: 130px;
    background: url(/images/main/main_banner_icon_01.png)no-repeat;
    background-size: contain;
}
.feature2:before {background-image: url(/images/main/main_banner_icon_02.png);}
.feature3:before {background-image: url(/images/main/main_banner_icon_03.png)}
.feature4:before {background-image: url(/images/main/main_banner_icon_04.png);}
.feature5:before {background-image: url(/images/main/main_banner_icon_05.png);}
.feature6:before {background-image: url(/images/main/main_banner_icon_06.png);}
.service_feature a .feature_txt:before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 3px;
	border-radius: 5px;
	background: #fede1f;
	margin: 15px 0;
	text-align: center;
}
.service_feature a:hover {
	box-shadow: 5px 8.7px 20px 0 rgba(0, 0, 0, 0.1);
	-webkit-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-moz-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -o-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000); /* easeOutQuint */
}

section.event_wrap .content_wrap{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* gap:20px; */
    padding:80px 0;
}
section.event_wrap .content_wrap h3{
    font-size: 50px;
}
section.event_wrap .content_wrap > ul {
    display: flex;
    align-items: center;
    gap:60px;
    padding:50px 100px 80px;
    background:
        linear-gradient(
            to bottom,
            #fff 0%,
            #fff 20%,
            #dbeaff 100%
       );
       border-radius: 20px;
}
section.event_wrap .content_wrap > ul li {
    flex:1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
	/* width: calc(100% / 3 - 20px); */
    padding: 230px 5px 60px;
    line-height: 1.2;
    font-size: 18px;
    font-weight: 500;
    color:#777;
    border:1px solid #ddd;
    background: #fff;
    border-radius: 15px;
}
section.event_wrap .content_wrap > ul li h4 {
    margin:0 0 20px;
    line-height: 1.3;
    font-size:30px;
    color:#111;
    font-weight: 600;
    letter-spacing: -1px
}
section.event_wrap .content_wrap > ul li em {
    font-weight: 600;
    color:#0066bf;
}
section.event_wrap .content_wrap > ul li > img{
    position: absolute;
    top:40px;
    left:50%;
    transform: translateX(-50%);
    width:180px;
}
section.event_wrap .content_wrap > ul li > img[src$="_04.png"]{
    width:200px;
}
section.event_wrap .content_wrap > ul li > img[src$="_06.png"]{
    width:170px;
}
section.why_wrap .content_wrap > h3 {
    font-size:60px;
}
section.why_wrap .content_wrap{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap:20px;
    padding:80px 0 0;
    border:none;
}
section.why_wrap .content_wrap > ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:20px;
}
section.why_wrap .content_wrap > ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
	width: calc(100% / 3 - 20px);
    padding: 25px 25px;
    line-height: 1.2;
    font-weight: 400;
    color:#999;
    border:1px solid #eee;
    border-radius: 15px;
}
section.why_wrap .content_wrap > ul li h4 {
    margin-bottom:10px;
    font-size: 1.6em;
    color:#111;
}


section.service {
	/* padding: 60px 0; */
}
section.service img{
	margin: 40px 0 0px;
}
section [class^="service-badge"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 35px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        #FF5FA2 0%,
        #FF9A6A 50%,
        #FFD44D 100%
    );
}
section .service-badge2 {
    background: linear-gradient(
        135deg,
        #33b1c3 0%,
        #64cdbd 50%,
        #8ad6b0  100%
    );
}
section .service-badge3 {
    background: linear-gradient(
        135deg,
        #578dfd 0%,
        #657efa 50%,
        #7b64f8 100%
    );
}

section.contact .content_wrap {
    border-bottom:none;
}
section.contact .content_wrap > h2 {
    font-size:4.4rem;
}
section.contact .content_wrap > h2 strong{
    font-size: 4.6rem;
}
section.contact .content_wrap > .apply_tel{
    position: relative;
    margin:40px 0 0; padding:7px 120px 10px;
    font-size:3.5rem; color:#fff; font-weight: 600; letter-spacing: 1px;
    background: linear-gradient(140deg,#be68d5,#281aac); border-radius:999px;
    display: inline-block; overflow: hidden;
}
section.contact .content_wrap > .apply_tel::before{
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
    /* z-index: 1; */
}

@-webkit-keyframes shiny-btn1 {+
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}



/* section.process {
	padding: 50px 0 100px;
	background: #fff;
}
section.design {
	position: relative;
	padding: 50px 0 50px;
	background: #fff url(/img/main_design_bg.jpg)no-repeat center center;
	background-size: cover;
	min-height: 400px;
	background-attachment: fixed;
}
section.design:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,.0,0.7);
} */


.alimtalk_hero {
	position: relative;
	height: 640px;
	background-color: #4599F1;
}

.alimtalk_hero:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
}

.alimtalk_hero .main_slogan {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%,-50%);
    display: inline-block;
    width: 500px;
    font-weight: 200;
    font-size: 60px;
    line-height: 80px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    z-index: 2;
}
.alimtalk_hero .main_slogan > p {
	font-size: 18px;
	font-weight: bold;
}
.alimtalk_hero .main_slogan strong {
	color: inherit;
}
section.friendtalk_hero {

}
section.sms_hero {

}

.main_desgin_text {
	position: absolute;
	top: 50px;
	left: 10px;
	text-align: left;
	color: #fff;
	z-index: 1;
}
.main_desgin_text > h3 {
	font-size: 36px;
}
.main_desgin_text > p {
	font-size: 18px;
	font-weight: 300;
	margin-bottom: 30px;
}
.main_desgin_text > button {

}
section.result {
	padding: 50px 0 50px;
	background: #fff;
}
section.marketing {
	padding: 50px 0 50px;
	background: #f8f8f8;
	background-size: contain;
	min-height: 400px;
}
section.customer {
	padding: 50px 0 50px;
	background: #fff;
}
section.api{margin-bottom:100px; background: url("/images/main/intro_bg_02.jpg") center;}
section.api .content_wrap{padding:50px 0 60px; border:none;}
section.api .content_wrap * {color:#ffffff}
section.api .content_wrap h4 {opacity: 0.5;}
section.api .content_wrap > ul {display: flex; justify-content: space-evenly;  width:1000px; margin: 50px auto 10px;}
section.api .content_wrap > ul li {display: flex; flex-direction: column; align-items: center; width:240px; font-size:22px;}
section.api .content_wrap > ul li img{width:120px; margin-bottom:5px;}
section.api .content_wrap > ul li p{font-size: 18px; color:#ffffff88; word-break: keep-all;}
.btn_md {
	padding: 10px 25px;
	border: 1px solid #dedede;
	color: #000;
	background: rgba(255,255,255,0.8);
	border-radius: 30px;
	font-size: 16px;
}
.btn_md:hover {
	background: rgba(255,255,255,1);
}
.btn_md.dark {
	border: 1px solid #dedede;
	color: #fff;
}
.main_title {
	text-align: center;
    font-size: 3rem;
    color: #000;
    margin: 30px 0 10px;
}

.process_wrap {
	display: flex;
}
.process_wrap .process_item {
	text-align: center;
	flex: 1;
}
.icon_step {
	display: inline-block;
	border: 2px solid #37a0e4;
	padding: 5px 10px 3px;
	font-size: 11px;
	font-weight: bold;
	color: #000;
	border-radius: 30px;
}
.process_icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	border-radius: 100px;
	background: #fff;
	margin: 15px auto;
    -webkit-box-shadow: 0px 1px 10px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 1px 10px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 1px 10px 1px rgba(0,0,0,0.1);
}
.process_icon > i {
	font-size: 44px;
}
.process_right {
	display: flex;
	align-items: center;
	width: 30px;
	height: auto;
}

.process_wrap .process_item .item_title {
	font-size: 18px;
	color: #000;
	margin-bottom: 10px;
}
.process_wrap .process_item .item_desc {

}
.page_title {
	padding: 50px 0px;
    text-align: center;
}
.page_title > h2 {
    font-size: 38px;
    font-weight: 700;
    color: #0f0f0f;
}
.page_title > p {
    margin-top: 15px;
    font-size: 18px;
}
.nopost {
	padding: 200px 0;
}
.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -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);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
/*main*/
.mbox_api{width:100%;}
.mbox_api .text_st1{font-size:20px; text-decoration: underline; padding-bottom:5px;}
.mbox_api .text_st2{font-size:15px; margin-bottom:30px; line-height:200%;}
.marketing_text{width:100%;}
.marketing_text .text_st1{font-size:20px; text-decoration: underline;}
.marketing_text .text_st2{font-size:15px; margin-top:10px;}
.mbox_result{width:100%; display: inline-block}
.mbox_result ul{width:90%; margin:0 5%;}
.mbox_result ul li{float:left; width:33%; padding-top:;}
.mbox_result ul li .tit{font-size:18px;}
.mbox_result ul li .num{font-size:4em; font-weight:bold; color:#4599F1;}
.customer_logo{width:100%; text-align: center; display: inline-block;}
.customer_logo ul li{float:left; width:23%; margin:1%;}
.customer_logo ul li img{width:100%;}
.service_feature li .text_st1{font-size: 16px; font-weight: 900; line-height: 120%; color:#404040;}
.service_feature li .text_st2{font-size: 12px; opacity: 0.6; line-height: 120%; margin-top:10px; word-break: keep-all;}

/*ul.service_feature > li > a > .feature_txt:before {
width: 70px !important; margin:0 6px 0 0 !important;
}*/

.dhn_design {width:100%; height:400px; padding: 50px 0; background:#f4b836 url('/images/o2o_mbg5.png'); background-size: cover; background-attachment: fixed; background-position: center center; background-repeat: no-repeat;}
.dhn_design .text_st1{color:#fff; font-size:34px; margin-top:50px;}
.dhn_design .text_st2{color:#fff; font-size:15px; margin-top:20px; }
.dhn_design .btn_st1{margin-top:60px;}
.dhn_design .btn_st1 a{padding:15px 30px; border:solid 2px #fff; color:#fff;border-radius: 30px;font-size: 18px; font-weight: 700;}
.dhn_design .btn_st1 a:hover{background-color: #fff; color:#f4b836;}
.main_call{font-size:60px; color:#fff; margin-top:20px; font-weight:bold;font-family: 'SpoqaHanSans';}

/* section.marketing {background: url("/images/o2o_mbg2.jpg") no-repeat top center; height:560px; }
.marketing_tbox{position: absolute; top:0; left:60px; text-align: left;}
.marketing_tbox .text_st1{font-size:30px; color:#fff;}
.marketing_tbox .text_st2{font-size: 13px; color:#fff; opacity: 0.7;}
.marketing_tlist {margin:132px 0 0 590px; text-align: left;}
.marketing_tlist li{background: url("/images/bullet02.png") no-repeat 0 7px; padding:0 0 0 18px; font-size: 15px; margin-bottom:10px; color:#404040;}
.marketing_tlist li:first-child{background: none; padding:0 !important; font-size: 18px;} */

.api_tbox1{}
.api_tbox1 .text_st1{font-size: 34px;}
.api_tbox1 .text_st2{font-size: 13px; opacity: 0.5;}

.m_link_kmong{border:solid 1px #fff; padding:5px 20px; color:#fff; margin-top:20px; display: inline-block;}
.m_link_kmong:hover{background-color: #fff; color:#404040;}

.m_down_api{border:solid 1px #000; padding:5px 20px; color:#000; margin-top:10px; display: inline-block;}
.m_down_api:hover{background-color: #000; color:#fff;}



/*sub*/
.alimtalk_box1{position: relative; height: 640px; background:#4599F1 url("/images/alimtalk_bg1.jpg") no-repeat top center; text-align: center;}
.alimtalk_box1 .alimtalk_slogan{color:#fff; font-size:50px; padding-top:100px; line-height:120%; font-weight: 100;}
.alimtalk_box1 .send_btn a{margin-top:20px; border:solid 1px #fff; padding:15px 0; width:200px; color:#fff; font-size: 20px; display:inline-block;}
.alimtalk_box1 .send_btn a:hover{border:solid 1px #4599F1; color:#4599F1; background-color: #fff;}
.alimtalk_box2{position: relative; padding:100px 0; height:700px; background:url("/images/alimtalk_bg2.jpg") no-repeat center 350px; text-align: center;}
.alimtalk_box3{position: relative; padding:100px 0 ; height:600px;  background-color: #f4b836;}
.alimtalk_box3 ul li{float:left; border-radius:5px; width:18%; padding:80px 0 20px 0; margin:1%; background-color: #fff; text-align: center; border:solid 1px #fff; box-sizing: border-box; font-size:16px;}
.alimtalk_box3 ul li:nth-child(1){background:#fff url("/images/alimtalk_icon1.png") no-repeat center 25px;}
.alimtalk_box3 ul li:nth-child(2){background:#fff url("/images/alimtalk_icon2.png") no-repeat center 25px;}
.alimtalk_box3 ul li:nth-child(3){background:#fff url("/images/alimtalk_icon3.png") no-repeat center 25px;}
.alimtalk_box3 ul li:nth-child(4){background:#fff url("/images/alimtalk_icon4.png") no-repeat center 25px;}
.alimtalk_box3 ul li:nth-child(5){background:#fff url("/images/alimtalk_icon5.png") no-repeat center 25px;}
.alimtalk_box3 ul li:nth-child(6){background:#fff url("/images/alimtalk_icon6.png") no-repeat center 25px;}
.alimtalk_box3 ul li:nth-child(7){background:#fff url("/images/alimtalk_icon7.png") no-repeat center 25px;}
.alimtalk_box3 ul li:nth-child(8){background:#fff url("/images/alimtalk_icon8.png") no-repeat center 25px;}
.alimtalk_box3 ul li:nth-child(9){background:#fff url("/images/alimtalk_icon9.png") no-repeat center 25px;}
.alimtalk_box3 ul li:nth-child(10){background:#fff url("/images/alimtalk_icon10.png") no-repeat center 25px;}
.alimtalk_box4{position: relative; padding:100px 0; height:800px; background:#f1f1f1 url("/images/alimtalk_bg3.png") no-repeat center 200px; }
.alimtalk_box4 .list_st1{position: absolute; top:160px; left:0; width:409px;}
.alimtalk_box4 .list_st1 li{clear:left; padding:26px 0; width:409px; font-size:18px; margin-bottom:20px; display: inline-block; text-align: center;}
.alimtalk_box4 .list_st2{position: absolute; top:160px; right:0; width:409px;}
.alimtalk_box4 .list_st2 li{clear:left; padding:26px 0; width:409px; font-size:18px; margin-bottom:20px; display: inline-block; text-align: center;}
.alimtalk_box5{position: relative; padding:100px 0; height:565px; background:url("/images/alimtalk_bg4.jpg") no-repeat top center;}
.alimtalk_box5 ul {margin:70px 0 0 14px;}
.alimtalk_box5 ul li{float:left; width:215px; height:215px; padding-top:70px; box-sizing: border-box; margin:0 25px 0 0; color:#fff; font-size: 20px; text-align: center;}
.alimtalk_box5 ul li:nth-child(5){margin-right:0 !important;}
.alimtalk_box6{position: relative; padding:100px 0; height:350px; background-color: #fff;}
/* background:url("/images/alimtalk_bg5.png") no-repeat top center;*/
.alimtalk_box6 ul{margin-left:261px;}
.alimtalk_box6 ul li{float:left; width:216px; margin-right:10px;}
.alimtalk_box6 ul li a{width:216px; display: inline-block; text-align: center; padding:20px 0; background-color:#f46736; color:#fff; font-size:18px;}
.alimtalk_box6 ul li a:hover{background-color:#f4b836; color:#fff;}

.friendtalk_box1{position: relative; height: 640px; background:#4599F1 url("/images/friendtalk_bg1.jpg") no-repeat top center; text-align: center;}
.friendtalk_box1 .alimtalk_slogan{color:#fff; font-size:50px; padding-top:100px; line-height:120%; font-weight: 100;}
.friendtalk_box1 .send_btn a{margin-top:20px; border:solid 1px #fff; padding:15px 0; width:200px; color:#fff; font-size: 20px; display:inline-block;}
.friendtalk_box1 .send_btn a:hover{border:solid 1px #4599F1; color:#4599F1; background-color: #fff;}

.text_st1_cen{text-align: center; line-height:200%; font-size: 17px;}
.text_st1_cen_w{text-align: center; line-height:200%; font-size: 17px; color:#fff; opacity: 0.5;}
.w1200_wrap{width:1200px; margin:0 auto; position: relative;}
.main_title_w{color:#fff; text-align: center; font-size: 32px; margin-bottom: 50px;}
.main_title_w2{color:#fff; text-align: center; font-size: 32px; margin-bottom: 10px;}
.main_title2{color:#000; text-align: center; font-size: 32px; margin-bottom: 10px;}

.sms_box1{position: relative; background:#242527 url("/images/sms_bg1.jpg") no-repeat top center; height:440px; text-align: center;}
.sms_box1 .alimtalk_slogan{color:#fff; font-size:50px; padding-top:100px; line-height:120%; font-weight: 100;}
.sms_box1 .send_btn a{margin-top:20px; border:solid 1px #fff; padding:15px 0; width:200px; color:#fff; font-size: 20px; display:inline-block;}
.sms_box1 .send_btn a:hover{border:solid 1px #4599F1; color:#4599F1; background-color: #4599F1; color:#fff;}
.sms_box2{position: relative; padding:100px 0; height:600px; text-align: center;}
.sms_box2 ul{margin:;}
.sms_box2 ul li{float:left; width:350px; height:300px; margin:0 25px; border:solid 1px #4599F1; padding:50px; box-sizing: border-box;}
.sms_box2 ul li .text_t{font-size:30px; line-height: 100%;color:#4599F1;}
.sms_box2 ul li .text_t span{font-size: 18px; opacity: 0.7;}
.sms_box2 ul li .text_b{font-size: 15px; margin-top:20px; word-break: keep-all;}

.cs_title{width:100%; text-align: center; font-size:55px; margin-bottom:40px;}

.cs_section{width:100%;}
.faq_search{width:500px; margin:0 auto; background: #fff;position: relative;display: flex;box-shadow: 0 2px 10px rgba(0,0,0,0.15);}
/*.faq_search button{width:50px; height:54px; float:left; background-color:#f4b836; border:solid 1px #f4b836;}*/
.faq_search_box{width:100%; padding:30px 0 50px 0; display: inline-block; border-bottom:solid 1px #ddd;}
.faq_search .text_area {flex: 1;}
.faq_search .text_area .faq_input {width: 100%; height: 100%; border: 0 none; font-size: 18px; line-height: 54px; outline: 0 none;}

input.faq_input::placeholder, textarea.faq_input::placeholder {
	font-size: 18px;
	font-weight: 100;
}
.panel-heading{border-bottom:solid 1px #ddd; text-align:left; padding:15px 0; font-size:15px;}
.panel-collapse{border-bottom:solid 1px #ddd; text-align:left; padding:15px 0;}

/*o2o_guide*/
.o2o_guide{width:100%;}
.o2o_guide .guide_tit1{font-size:16px; margin-top:20px; color:#000;}
.o2o_guide .guide_tit2{font-size:16px; margin-left:20px;}
.o2o_guide .guide_text1{font-size:13px; margin-left:40px;}
.o2o_guide .guide_text2{font-size:13px; margin-left:60px;}

/*board*/
.board .form-group{border-bottom:solid 1px #ddd; padding-bottom:15px; margin:15px 0 0 0;}
.form-horizontal .control-label{text-align: left; border-right:solid 1px #ddd;padding-bottom:10px;}
.col-sm-10{vertical-align: top;}
.checkbox-inline input{vertical-align: top; position: relative !important; margin:-7px 0 0 -20px !important;}
.form-control{padding:5px;}
.inner_tit p{padding-top:15px;}
.btn-default{border:solid 1px #ddd; box-sizing: border-box; padding:7px 15px; background-color: #fff !important; background-image:none;}
.btn-danger{padding:5px 10px;}
.pull-left{border:none;}
.pull-left input{position: relative !important; margin:0 0 0 -20px !important;}
.checkbox label{margin:-25px 20px 0 0 !important;}
.pull-right{position: relative;}
.admin-manage-post{position: absolute; top:60px; right:0;}

/*signup*/
.signup{width:100%; margin:0  !important;}
.signup_title{width:100%; font-size:15px; color:#000; margin-bottom:10px; background-color:#f4b836; padding:15px 0; text-align:center;}
.signup_box{width:100%;}
.signup_list1{width:100%; display: inline-block; padding-bottom:5px;}
.signup_list1 textarea{width:100%; padding:20px; border:solid 1px #ddd;font-size:12px; line-height: 150%;}
.signup_list2{width:100%; display: inline-block;border-bottom:dotted 1px #ddd; padding:3px 0 10px 0; margin:0 !important;}
.signup_btn{text-align: center; padding:20px 0 0 0; vertical-align:middle; position: relative; margin:0 !important;}
.signup_btn button{padding:10px 20px;}
.alert-warning{color:#f00;}
.mg_b20{margin-bottom:20px;}
.signup_wrap {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	width: 800px;
	background: #fff;
	border: 1px solid #dfe0e6;
	overflow: hidden;
	margin: 100px auto;
}
.signup_wrap .contents {
	flex: 1;
	padding: 100px;
	align-items: stretch;
}
.signup_wrap .col-lg-3{width:20%; float:left; padding-top:8px;}
.signup_wrap .col-lg-8{width:80%; float:left;}
.signup_wrap .col-lg-8 input{width:100%;}
.help-block{margin-top: 10px; opacity: 0.5;}
.signup_wrap .col-lg-8 input[type="checkbox"]{width:auto;}
.signup_wrap .col-lg-8 input[type="file"]{padding:5px;}
.signup_wrap .btn-cancel{padding:15px 20px; display: inline-block; box-sizing: border-box; background-color:#f1f1f1; border:solid 1px #ddd; font-size: 14px;}
.signup_wrap .btn-success{padding:14px 20px 19px 20px; margin-top:10px; box-sizing: border-box;  display: inline-block; background-color:#fff; border:solid 1px #ddd; cursor: pointer; font-size: 14px;}


.nav_top {
	height: 96px;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
}
.nav_top .nav_logo {
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 140px;
}
.nav_top .nav_logo img {
	width: 100px;
	vertical-align: middle;
}
.nav_top .nav_menu {
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	flex: 1 1 auto;
	height: 100%;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.nav_top .nav_menu > ul {
	height: 100%;
	margin: 0;
}
.nav_top .nav_menu > ul > li {
	position: relative;
	float: left;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 170px;
	height: 100%;
    font-size: 18px;
    font-weight: 700;
    -webkit-transition: .15s;
    -ms-transition: .15s;
    transition: .15s;
    cursor: pointer;
}
.nav_top .nav_menu > ul > li > a {
	color: #000;
}
.nav_top .nav_menu > ul > li:hover {
	color: orange;
}
.nav_top .nav_menu > ul > li:hover :after {
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: -1px;
	left: 0;
	background: orange;
}
header > .nav_top > .nav_member {
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
header > .nav_top > .nav_member ul li {
	float: left;
	display: inline-block;
	margin-left: 15px;
	padding-left: 15px;
	font-size: 15px;
}
header > .nav_top > .nav_member > ul > li:not(:first-of-type) {

}
.btn_login_top {
	display: inline-block;
	font-size: 14px;
	padding: 5px 20px 5px;
	color: #fff;
	background: #181818;
	border-radius: 5px;
	margin-top: -5px;
}
.top_submenu_wrap {
	width: 100%;
	display: none;
	background: #fff;
	padding: 0;
	position: absolute;
	top: 97px;
	left: 0;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
	z-index: 99;
}
.top_submenu {
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
}
.submenu_banner {
	width: 140px;
}
.submenu_menu {
	width: 170px;
	font-size: 15px;
	padding: 0 5px;
	color: #333;
}
.top_submenu > div {
	position: relative;
	border-right: 1px solid #dedede;
}
.top_submenu > div:hover :after {
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	top: -1px;
	left: 0;
	background: orange;
}
.submenu_menu ul {
	padding: 15px 0;
}
.submenu_menu ul li {
	padding:7px 15px;
	font-size: 14px;
}
.submenu_menu ul li:hover {
	color: orange;
}
.o2oContainer {
	flex: 1 1 auto;
}


.footer .f_menu_wrap {
	background: #242527;
}
.footer .f_menu {
	position: relative;
	padding: 20px 0;
}
.footer .f_menu_link {
	margin: 0;
}
.footer .f_menu_link > ul:after {
	content: "";
	display: block;
	clear: both;
}
.footer .f_menu_link > li {
    padding-right: 30px;
    margin-right: 30px;
	position: relative;
    display: inline-block;
    font-size: 13px;
    line-height: 13px;
    color: #ddd;
}
.footer .f_menu_link > li:after  {
    content: "";
    position: absolute;
    top: 3px;
    right: 0;
    width: 1px;
    height: 12px;
    background: #3a3b3d;
}
.footer .f_info {
	position: relative;
	padding: 30px 0 50px 200px;
	background: url('/img/logo_top4.png')no-repeat top 40px left;
	background-size: 100px;
}

.qlink_btn {
	position: absolute;
	top: 12px;
	right: 0;
	display: block;
	width: 140px;
	height: 36px;
	line-height: 36px;
	padding: 0px 30px 0px 15px;
	border: 1px solid #444;
	text-align: left;
	cursor: pointer;
	background-color: inherit;
}
.qlink_btn:after {
	content: " ";
    display: block;
    position: absolute;
    top: 50%;
    right: 17px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #999 transparent transparent;
}
.qlink_link {
	display: none;
	position: absolute;
	right: 0;
	bottom: 47px;
	width: 140px;
	border: 1px solid #1e1f21;
	background: #242527;
	color: #fff;
	text-align: left;
	box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}
.qlink_link > li {
	display: block;
	padding: 10px;
}
.qlink_link > li:hover {
	color: #f6d147;
	cursor: pointer;
}

.service_title h1 {
	padding: 70px 0 70px 0;
    text-align: center;
    font: 300 55px/55px 'Nanum Square';
    color: #333;
    letter-spacing: -1px;
}

/* 인트로일때 추가 */
footer {
    padding:50px 0;
    border-top: 100px solid #eee;
}
.wrap_footer {
    width: 1200px;
    margin: 0 auto;
}

.cer_logo{display: flex; flex-wrap: wrap; align-items: center; gap:20px; position: initial;  width: 100%; padding:15px 0 22px;}
.cer_logo img{max-height:45px;}



/* footer .address {
	line-height: 2;
}
footer .address ul:after {
	content: "";
	display: block;
	clear: both;
}
footer .address ul li {
	position: relative;
    float: left;
    padding: 0 12px 0 13px;
}
footer .address li:first-child {
    padding-left: 0;
}
footer .address li + li:before {
    position: absolute;
    top: 50%;
    left: 0;
    content: "";
    width: 1px;
    height: 12px;
    margin-top: -6px;
    background-color: rgba(255,255,255,.2);
}
footer .address .copy {
	display: block;
	margin-top: 15px;
}




footer .center {
    position: absolute;
    top: 30px;
    right: 0;
    color: #fff;
    text-align: right;
    z-index: 1;
}
footer .center p {
	margin-bottom: 10px;
    font-size: 24px;
}
footer .center strong {
	font-size: 36px;
}
footer .center small {
	margin-top: 8px;
    line-height: 1;
} */