@charset "UTF-8";

/* 중소기업 */
.ic_twinkle {
	display: inline-block;
    width: 43px;
    height: 44px;
    background: url(https://daouoffice.com/images/main_new/ic_twinkle.svg) no-repeat 0 0;
}
.ic_light {
	display:block; 
	margin:0 auto 24px; 
	width:44px; 
	height:60px; 
	background: url(images/ic_light.svg) no-repeat center;
}
.balloon {
    position: relative;
    display: inline-block;
    box-shadow: 0px 33px 33px rgba(0, 0, 0, 0.06), 0px 8px 18px rgba(0, 0, 0, 0.06), 0px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.balloon span {
    display: inline-block;
    padding: 30px 20px;
    width:300px;
    height:116px;
    font-size:18px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    border-radius: 12px;
}

.balloon:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 24px solid #fff;
    border-left: 24px solid transparent;
    bottom:-20px;
    left:80%;
    border-radius:6px 0;
}


.smb .bg_lighgray {background:#F8F9FA}
.smb .area_visual {height:1180px;}
.smb img.view_pc {margin:0 auto}
.smb .area_visual .visual {margin-top:100px;}
.smb .area_visual .btn_general {padding: 7px 52px 7px 34px}
.smb .area_visual .btn_ghost {padding: 5px 44px}
/*.smb .area_visual .bg {
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: -160px;
	background: #F4F9FB;
	z-index: -2;
}*/
.smb .area_head h2 {letter-spacing:-2px}
.smb .area_head .fw3 {font-weight:300}
.smb .area_head .mint {color:#02C7D0;}
.smb .list_func {margin-top: 120px}
.smb .area_cont .item_cont {margin-top:0}
.smb .area_why1 {padding:0}
.smb .area_why1 .area_head {padding:360px 0}
.smb .list_talk {}
.smb .list_talk .balloon {position:absolute;}
.smb .list_talk .balloon:first-child {top:142px; left:10%;}
.smb .list_talk .balloon:nth-child(2) {top:100px; right:20%;}
.smb .list_talk .balloon:nth-child(3) {top:405px; right:0}
.smb .list_talk .balloon:nth-child(4) {top:610px; left:50%;}
.smb .list_talk .balloon:nth-child(5) {top:472px; left:0}
.smb .list_talk .balloon span{
	background-repeat: no-repeat;
	background-position: 237px 54px;
}
.smb .list_talk .balloon:first-child span {background-image: url(images/img03.png);}
.smb .list_talk .balloon:nth-child(2) span {background-image: url(images/img04.png);}
.smb .list_talk .balloon:nth-child(3) span {background-image: url(images/img05.png);}
.smb .list_talk .balloon:nth-child(4) span {background-image: url(images/img06.png);}
.smb .list_talk .balloon:nth-child(5) span {background-image: url(images/img07.png);}
.smb .area_why2 {text-align:center}
.smb .area_why2 img {margin-top:80px;}

.last {
	position: relative;
	padding: 100px 0 130px;
	height: 540px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 40px;
	z-index: 2;
}
.last .area_head .label {
	margin-bottom: 10px;
	font-size:24px;
	text-align:center;
	letter-spacing: -2px;
}
.last .background_items {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
}
.last .background_items img {position: absolute;}

.last .background_items img:nth-of-type(1) {
  top: 66%; left: 7%; width: 35px;}
.last .background_items img:nth-of-type(2) {
  top: 17%; left: 73%; width: 77px;}
.last .background_items img:nth-of-type(3) {
  top: 42%; left: 7%; width: 68px;}
.last .background_items img:nth-of-type(4) {
  top: 14%; left: 23%; width: 55px;}
.last .background_items img:nth-of-type(5) {
  bottom: 15%; left: 86%; width: 86px;}
.last .background_items img:nth-of-type(6) {
  top: 21%; left: 84%; width: 63px;}
.last .background_items img:nth-of-type(7) {
  top: 59%; left: 80%; width: 66px;}
.last .background_items img:nth-of-type(8) {
  bottom: -1%; left: 17%; width: 100px;}
.last .background_items img:nth-of-type(9) {
  top: 73%; left: 26%; width: 60px;}

.smb .area_bn {margin: 40px 0 0}



/* 중견기업 */
.smb .area_point .item.hide {display:block;}
.smb .link img {width:auto;}
.smb em {font-weight:600;}
.smb.middlemarket .area_visual {height:1020px;}
.smb.middlemarket .area_visual .visual {margin-top:70px;}
.smb.middlemarket .area_visual .btn_general {padding: 7px 40px 7px 34px;}
.smb .area_cont.customer {padding:150px 0;}
.smb .area_cont.customer .wrap {display:flex; flex-wrap:nowrap; gap:40px; animation:marquee 30s linear infinite;}
.smb .area_cont.customer .wrap .box {display:inline-flex; flex-direction:column; border-radius:15px; width:340px; box-shadow:0 2px 10px #eaf2f5; overflow:hidden; flex:0 0 auto;}
.smb .area_cont.customer .wrap .box img {width:42px; height:42px; background-color:red; display:inline-block;}
.smb .area_cont.customer .wrap .box .inner {padding:54px 0 68px 44px; background: #fff; display:flex; justify-content:center; align-items:start; flex-direction:column; height:100%; max-width:unset; position:unset; margin:unset;}
.smb .area_cont.customer .wrap .box .inner p {color:#333; font-size:22px; font-weight:400; line-height:150%; margin-top:20px;}
.smb .area_cont.customer .wrap .ic_cust {width:42px; height:42px; display:inline-block; background:url(../2023/0302_smb/images/img_cust_icon.svg) no-repeat;}
.smb .area_cont.customer .wrap .ic_cust.ic01 {background-position:0 0;}
.smb .area_cont.customer .wrap .ic_cust.ic02 {background-position:-44px 0;}
.smb .area_cont.customer .wrap .ic_cust.ic03 {background-position:-88px 0;}
.smb .area_cont.customer .wrap .ic_cust.ic04 {background-position:-132px 0;}
.smb .area_cont.customer .wrap .ic_cust.ic05 {background-position:-176px 0;}
.smb .area_cont.customer .wrap .ic_cust.ic06 {background-position:-220px 0;}
.smb .area_cont.customer .wrap .ic_cust.ic07 {background-position:-264px 0;}
.smb .marquee_container {width:100%; overflow:hidden; position:relative; height:250px; margin:90px 0 0 0;}
.smb .marquee_container .marquee_inner {width:200%; display:flex; position:absolute; top:0; left:0; gap:3vh;}
.smb .marquee_container .marquee_inner:hover .wrap {animation-play-state:paused;}
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
.smb .area_cont.answer {padding:60px 0;}
.smb .area_cont.answer h2 .title {color:#fff; font-weight:200; line-height:160%;}
.smb .area_cont.answer h2 .title em {font-weight:500;}
.smb .area_point .box .item.first .item_thumb img {width:100%;}
.smb .area_point .box.center .item {width:50%; flex-direction:column; align-items:center;}
.smb .area_point .box.center .item_cont {margin-top:50px; text-align:center;}
.smb .area_point .box.center .item_thumb {display:flex; justify-content:center; margin-top:40px;}
.smb .area_point.first .box .item.first .item_cont,
.smb .area_point.fourth .box .item.first .item_cont {padding:70px 0 65px 110px;}
.smb .area_point.first .box .item.first .item_thumb,
.smb .area_point.fourth .box .item.first .item_thumb {display:flex; align-items:center;}
.smb .area_point.first .box .item.first {background-color:#E9F6FD; gap:26vh;}
.smb .area_point.first .box .item.second {background-color:#E7F9F9;}
.smb .area_point.first .box .item.third {background-color:#F4F6F9;}
.smb .area_point.first .box.center .item {flex-direction:column;}
.smb .area_point.first .box.center .item.third .item_thumb {display:flex; justify-content:flex-end;}
.smb .area_point.second .item.first {background-color:#F4F6F9; width:45%;}
.smb .area_point.second .item.second {background-color:#FFF8E3; width:55%;}
.smb .area_point.second .item.third {background-color:#E2F6F6; width:55%;}
.smb .area_point.second .item.fourth {background-color:#F0F8DA; width:45%;}
.smb .area_point.third .item.second {background-color:#FFF1EF;}
.smb .area_point.third .item.third {background-color:#F2F5FA; align-items:center; justify-content:flex-start;}
.smb .area_point.fourth {padding-bottom:130px;}
.smb .area_point.fourth .item.first {background-color:#E9F6FD; gap:14vh;}
.smb .area_point.fourth .item.second {background-color:#E2F6F6;}
.smb .area_point.fourth .item.third {background-color:#EBE8FB;}
.smb .area_wide {height:680px;}
.smb .area_wide .img_mo {display:none;}
.smb .area_wide .cont_box {max-width:1200px; margin:0 auto; display:flex; justify-content:space-between;}
.smb .area_wide .cont_head {padding:180px 0; display:inline-block;}
.smb .area_wide .cont_head h3 {font-size:38px; text-align:left; color:#fff; font-weight:300; line-height:150%;}
.smb .marquee_container2 {overflow:hidden; width:520px; height:680px;}
.smb .marquee_container2 .marquee_inner {display:flex; gap:40px;}
.smb .marquee_container2 .marquee_inner:hover .wrap {animation-play-state:paused;}
.smb .marquee_container2 .wrap {display:flex; flex-direction:column; flex-wrap:nowrap; gap:36px;}
.smb .marquee_container2 .wrap.first {animation:marquee1 40s linear infinite;}
.smb .marquee_container2 .wrap.second {animation:marquee2 40s linear infinite;}
.smb .marquee_container2 .wrap .box {position:relative; display:inline-flex; flex-direction:column; border-radius:20px; width:240px; overflow:hidden; flex:0 0 auto;}
.smb .marquee_container2 .wrap .box span {position:absolute; bottom:30px; left:30px; color:#fff; font-size:18px; font-weight:400; line-height:150%;}
.smb .marquee_container2 .wrap .box img {width:240px; height:280px;}
@keyframes marquee1 {
  0% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, -100%);
  }
}
@keyframes marquee2 {
  0% {
    transform: translate(0, -100%);
  }
  100% {
    transform: translate(0, 100%);
  }
}
.smb .area_cont.office {padding:150px 0;}
.smb .area_cont .box_list {display:grid; grid-template-columns:repeat(4, 1fr); width:100%; margin-top:80px; gap:2vw;}
.smb .area_cont .box_list li {background:#fff; box-shadow:0 10px 30px #f1f5f6; border-radius:25px; padding:50px 0 50px 48px;}
.smb .area_cont .box_list li:last-child {border:4px dotted #03CAD3; cursor:pointer; transition:.2s;}
.smb .area_cont .box_list li .title {display:flex; color:#999; font-weight:500; font-size:18px; margin-top:30px;}
.smb .area_cont .box_list li .sub {font-size:20px; font-weight:400; line-height:160%; color:#444;}
.smb .area_cont .box_list li .logo {width:154px; height:55px; background:url(images/img_logo.svg) -20px 0 no-repeat; display:block; margin-bottom:26px;}
.smb .area_cont .box_list li .logo.iconix {background-position:0 0;}
.smb .area_cont .box_list li .logo.bonif {background-position:-162px 0;}
.smb .area_cont .box_list li .logo.kiwoom {background-position:-331px 0;}
.smb .area_cont .box_list li:nth-child(2) {display:block;}
.smb .area_cont .box_list li .office {width:154px; height:55px; background-color:#F4F8FC; border-radius:8px; position:relative; margin-bottom:26px; transition:.4s ease-in;}
.smb .area_cont .box_list li .office .ic_office {width:32px; height:32px; background:url(images/img_logo.svg) -489px 3px no-repeat; display:inline-block; margin:12px 0 0 18px;}
.smb .area_cont .box_list li .office p {color:#1F5379; font-size:18px; font-weight:600; display:inline-block; position:absolute; top:14px; left:60px;}
.smb .area_cont .box_list li:last-child:hover .office {background-color:#03CAD3;}
.smb .area_cont .box_list li:last-child:hover .office .ic_office {background-position:-519px 3px;}
.smb .area_cont .box_list li:last-child:hover {box-shadow:0 10px 30px #e4edf0; transform:translateY(-10px);}
.smb .area_cont .box_list li:last-child:hover .office p {color:#fff;}

.area_faq {font-size:18px; font-weight:600;}
.area_faq .area_body {margin-top:80px;}
.area_faq .list_box {display:flex; flex-flow:wrap; margin-top:4px; justify-content:center;}
.area_faq .list_box .item {position:relative; width:calc(30% - 100px); margin: 10px; border-radius:16px; border:none; padding:0; background:#F4F7FA; text-align:center; display:flex; flex-direction:column; justify-content:space-between; box-shadow:none; transition:all .2s cubic-bezier(0.5,0.8,0.6,0.88); box-sizing:border-box;}
.area_faq .list_box .item a {padding:35px 0 30px 35px;}
.area_faq .list_box .item .txt {font-size:22px; font-weight:400;}
.area_faq .list_box .item .txt em {font-weight:700;}
.area_faq .list_box .item .box {text-align:left; margin-bottom:30px;}
.area_faq .list_box .item:hover {transform: translateY(-10px);}
.area_faq .link_detail {background-color:#fff; padding:6px 15px; font-size:14px; margin-top:18px;}
.area_faq .link_detail .bt_arrow {background:url(images/ic_arrow.svg) 35px 0;}
.area_faq .img {display:block; float:right; margin-right:24px; width:140px; height:150px;}
.area_faq .img.d01 {background:url(images/img_01.png) no-repeat;}
.area_faq .img.d02 {background:url(images/img_02.png) no-repeat;}
.area_faq .img.d03 {background:url(images/img_03.png) no-repeat;}
.area_faq .img.d04 {background:url(images/img_04.png) no-repeat;}
.area_faq .img.d05 {background:url(images/img_05.png) no-repeat;}

@media (max-width: 959px) {

	img.view_mo {margin:0 auto}

	.smb .area_visual .visual {margin-top:40px;}
	.smb .area_visual .bg {display:none}
	.smb .list_talk .balloon {
		border-radius:30px 30px 0 30px;
		box-shadow:0px 4px 12px rgba(0, 0, 0, 0.05);
	}
	.smb .list_talk .balloon span {
		width:inherit;
		height:inherit;
		padding:16px 20px;
		font-size:15px;
		color:#575C6A;
		border-radius:30px 30px 0 30px;
		background-image:none ;
	}
	.smb .list_talk .balloon .pc {display:none}
	.smb .list_talk .balloon:after {display:none}
	.smb .area_why1 {padding:110px 0}
	.smb .area_why1 .area_head {padding:0}
	.smb .list_func .item_cont .label {text-align:center}
	.smb .list_talk {position:relative; margin-top:40px; text-align: right}
	.smb .list_talk .balloon {position:relative;}
	.smb .list_talk .balloon:first-child {top:inherit; left:0; margin-right:60px}
	.smb .list_talk .balloon:nth-child(2) {top:inherit; right:0; margin-right:4px}
	.smb .list_talk .balloon:nth-child(3) {top:inherit; right:0; margin-right:80px}
	.smb .list_talk .balloon:nth-child(4) {top:inherit; left:0; margin-right:10px}
	.smb .list_talk .balloon:nth-child(5) {top:inherit; left:0; margin-right:60px}
	.smb .list_talk .balloon + .balloon {margin-top:20px;}
	.smb .list_talk .balloon:first-child span {background-image:none}

	.smb .list_func {margin-top:50px}
	.smb .ic_twinkle {background-position: -42px 19px}
	.background_items img {}
	.smb .area_why2 img {margin-top:40px}
	.last .background_items img:nth-of-type(4) {top:4%}
	.last .background_items img:nth-of-type(2),
	.last .background_items img:nth-of-type(3),
	.last .background_items img:nth-of-type(5), 
	.last .background_items img:nth-of-type(8) {display:none}
	.last .background_items img:nth-of-type(6) {top:8%; left:74%}
	.last .background_items img:nth-of-type(7) {top:72%; left:70%}
	.last .background_items img:nth-of-type(9) {top:77%; left:12%}

	/* 중견 기업 */
	.smb .area_point .item.hide {display:none;}
	.smb.middlemarket .area_visual {height:870px;}
	.smb .area_visual .btn_general {padding:7px 34px;}
	.smb .area_cont.customer .wrap {gap:3vh;}
	.smb .area_cont.customer .wrap .box {width:240px;}
	.smb .area_cont.customer .wrap .box .inner {padding:40px 0 40px 40px;}
	.smb .area_cont.customer .wrap .box .inner p {font-size:18px;}
	.smb .area_cont.customer {padding:80px 0 50px;}
	.smb .area_cont.answer {padding:50px 0 50px;}
	.smb .area_point {padding-bottom:0;}
	.smb .area_point .box .item {border-radius:25px; padding:50px 0 0;}
	.smb .area_point .box.center .item {width:100%;}
	.smb .area_point .box.center .item_cont {margin-top:0;}
	.smb .area_point.first .box .item.first .item_thumb img,
	.smb .area_point.second .box .item.first .item_thumb img,
	.smb .area_point.second .box .item.second .item_thumb img,
	.smb .area_point.fourth .box .item.first .item_thumb img {width:80%;}
	.smb .area_point.fourth {padding-bottom:80px;}
	.smb .area_point .box .item .title {text-align:center;}
	.smb .area_point.first .box .item.first,
	.smb .area_point.fourth .box .item.first {gap:5vh;}
	.smb .area_point.first .box .item.first .item_cont,
	.smb .area_point.fourth .box .item.first .item_cont {padding:0;}
	.smb .area_point.first .box .item.first .item_thumb,
	.smb .area_point.fourth .box .item.first .item_thumb,
	.smb .area_point.fourth .box .item.third .item_thumb,
	.smb .area_point.second .box .item.first .item_thumb,
	.smb .area_point.second .box.center .item.third .item_thumb,
	.smb .area_point.third .box.center .item.second .item_thumb {justify-content:center; margin-bottom:30px;}
	.smb .area_point .box.center .item_thumb {display:flex; justify-content:center;}
	.smb .area_point .cont_intro .box.center .item img {width:100%;}
	.smb .area_point.fourth .box .item.third img {width:80%; text-align:center;}
	.smb .area_point .cont_intro .box.center .link img {width:auto;}
	.smb .area_wide {padding:80px 0; height:710px;}
	.smb .area_wide .cont_box.shorts {position:relative;}
	.smb .area_wide .img_mo {display:block; width:100%; position:absolute; top:300px; left:0;}
	.smb .area_wide .cont_box {flex-direction:column; padding:0 6%;}
	.smb .area_wide .cont_head {padding:0;}
	.smb .area_wide .cont_head h3 {text-align:center; font-size:28px;}
	.smb .area_wide .btn_wrap {margin-bottom:60px; gap:15px; justify-content:center;}
	.smb .marquee_container {margin:60px 0 0 0;}
	.smb .marquee_container2 {display:none;}
	.smb .area_cont.office {padding:80px 0;}
	.smb .area_cont .box_list {display:flex; flex-direction:column; margin-top:40px; gap:5vw;}
	.smb .area_cont .box_list li {padding:35px 0 35px 40px; border-radius:20px;}
	.smb .area_cont .box_list li .title {font-size:16px; margin-top:20px;}
	.smb .area_cont .box_list li .sub {font-size:18px;}
	.smb .area_cont .box_list li .logo {width:100px; height:32px; background:url(../2023/0302_smb/images/img_logo.svg) no-repeat; display:block; margin-bottom:10px;}
	.smb .area_cont .box_list li .logo.iconix {background-position:0 -67px;}
	.smb .area_cont .box_list li .logo.bonif {background-position:-111px -67px;}
	.smb .area_cont .box_list li .logo.kiwoom {background-position:-221px -67px;}
	.smb .area_cont .box_list li .logo.office {background-position:-331px -67px;}
	.smb .area_cont .box_list li:nth-child(2) {display:none;}
	.smb .area_cont .box_list li .link {justify-content:left;}
	.smb.middlemarket .area_wide .btn_wrap a,
	.smb.middlemarket .area_visual .btn_wrap a {width:70%;}

	.area_faq .area_body {margin-top:40px;}
	.area_faq .list_box .item {width: 100%; margin:12px 0 0;}
	.area_faq.list_box .item img {width: 100%}

}