@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.doc-tit {position:relative; padding-left:30px; font-size:20px; line-height:1.3em; font-weight:500; color:#242424; margin-bottom:18px;}
.doc-tit:after {content:""; position:absolute; top:3px; left:0; width:20px; height:20px; background:url('../images/sub/dot1.png') 0 0 no-repeat; background-size:100% 100%;}
.doc-tit span {font-size:16px; font-weight:400; color:#454545;}

.doc-cnt {margin-bottom:60px;}
.doc-cnt:last-child {margin-bottom:0;}
.doc-cnt .indent {padding-left:24px;}

.need-wrap .title {background:#f4fbff; padding-top:100px; margin-bottom:100px;}
.need-wrap .title .inner {display:flex; align-items:center; padding:21px 0;}
.need-wrap .title .img {flex:1 1 500px; max-width:500px; line-height:0; text-align:right; margin-right:60px; order:2;}
.need-wrap .title .txt {flex:1 auto; width:1%; padding-bottom:35px;}
.need-wrap .title .txt h3 {font-size:34px; line-height:1.3em; color:#0056a9; margin-bottom:22px;}
.need-wrap .title .txt p {font-size:16px; line-height:32px; color:#454545;}
.need-wrap .list .tit {text-align:center; margin-bottom:90px;}
.need-wrap .list .tit h3 {font-size:35px; line-height:1.3em; color:#0056a9; margin-bottom:20px;}
.need-wrap .list .tit p {font-size:18px; line-height:32px; color:#333; font-weight:500;}
.need-wrap .list .group {margin-bottom:100px;}
.need-wrap .list .group:last-child {margin-bottom:0;}
.need-wrap .list .inner {display:flex; align-items:center; height:100%; margin:0 -67px;}
.need-wrap .list .inner > div {width:50%; padding:0 67px;}
.need-wrap .list .img {line-height:0;}
.need-wrap .list .txt h4 {font-size:34px; line-height:1.3em; color:#333; margin-bottom:22px;}
.need-wrap .list .txt p {font-size:16px; line-height:25px; color:#454545;}

.need-wrap .list .group:nth-child(odd) {background:#f4fbff;}
.need-wrap .list .group:nth-child(odd) .inner {min-height:600px;}
.need-wrap .list .group:nth-child(odd) .inner .img {order:2; text-align:right;}
.need-wrap .list .group:nth-child(odd) .inner .txt {order:1;}

.function-wrap .title {margin:100px 0 65px; text-align:center;}
.function-wrap .title h3 {font-size:35px; line-height:1.3em; color:#0056a9; margin-bottom:22px;}
.function-wrap .title p {font-size:16px; line-height:25px; color:#454545;}
.function-wrap .function-tab {margin-bottom:50px; text-align:center;}
.function-wrap .function-tab ul {display:inline-flex; width:auto;}
.function-wrap .function-tab ul li {width:auto;}
.function-wrap .function-tab ul li a {display:block;}
.function-wrap .function-tab ul li .icon {margin:0 56px 7px; width:71px; height:71px; border-radius:100%; background:#454545; line-height:0;}
.function-wrap .function-tab ul li .tt {font-size:18px; line-height:1.5em; font-weight:500; color:#555;}
.function-wrap .function-tab ul li.active .icon {background:#0056a9;}
.function-wrap .function-tab ul li.active .tt {color:#0056a9;}
.function-wrap .list ul {display:flex; flex-wrap:wrap; margin:0 -30px;}
.function-wrap .list ul li {width:calc(25% - 60px); margin:0 30px 50px; padding:0 20px 15px; border:1px solid #ddd; border-radius:8px; background:linear-gradient(#dbeaf8, #fff);}
.function-wrap .list ul li .img {display:flex; justify-content:center; align-items:center; width:100%; height:242px; text-align:center; line-height:0;}
.function-wrap .list ul li .sort {margin-bottom:20px; font-size:14px; line-height:22px; color:#fff;}
.function-wrap .list ul li .sort span {display:inline-block; padding:0 15px; border-radius:11px; background:#484848;}
.function-wrap .list ul li .tit {margin-bottom:10px; font-size:18px; line-height:25px; font-weight:500; color:#0056a9;}
.function-wrap .list ul li p {font-size:16px; line-height:25px; color:#555;}

.advantage .title {text-align:center; margin:100px 0;}
.advantage .title h3 {font-size:35px; line-height:1.3em; color:#0056a9;}
.advantage .group {margin-bottom:80px; padding:50px 0;}
.advantage .group:last-child {margin-bottom:0;}
.advantage .inner {display:flex; align-items:center; height:100%; margin:0 auto; max-width:1460px; padding-left:30px; padding-right:30px;}
.advantage .inner > div {width:50%;}
.advantage .img {line-height:0; text-align:center;}
.advantage .txt {padding-left:65px;}
.advantage .txt h4 {font-size:34px; line-height:1.3em; color:#333; margin-bottom:25px;}
.advantage .txt p {font-size:16px; line-height:25px; color:#454545; margin-bottom:25px;}
.advantage .txt p:last-child {margin-bottom:0;}
.advantage .group:nth-child(odd) {background:#f4fbff;}
.advantage .group:nth-child(odd) .inner .img {order:2; text-align:right;}
.advantage .group:nth-child(odd) .inner .txt {order:1; padding-left:0; padding-right:50px;}

.use-wrap .use-tab {margin:100px auto 70px; max-width:1400px; width:100%; text-align:center;}
.use-wrap .use-tab ul {display:inline-flex; width:auto; margin:0 -47px;}
.use-wrap .use-tab ul li {width:auto;}
.use-wrap .use-tab ul li a {display:block;}
.use-wrap .use-tab ul li .icon {margin:0 47px 7px; width:71px; height:71px; border-radius:100%; background:#454545; line-height:0;}
.use-wrap .use-tab ul li .tt {font-size:18px; line-height:1.5em; font-weight:500; color:#555;}
.use-wrap .use-tab ul li.active .icon {background:#0056a9;}
.use-wrap .use-tab ul li.active .tt {color:#0056a9;}

.use-wrap .title {padding:70px 0; background:#f4fbff;}
.use-wrap .title .inner {margin:0 auto; max-width:1400px; width:100%; display:flex; align-items:center;}
.use-wrap .title .inner > div {width:50%;}
.use-wrap .title .inner .img {order:2; text-align:center; line-height:0;}
.use-wrap .title .inner .txt {order:1; padding-left:100px;}
.use-wrap .title .inner .txt h3 {margin-bottom:22px; font-size:38px; line-height:1.3em; color:#0056a9;}
.use-wrap .title .inner .txt ul li {font-size:16px; line-height:20px; margin-bottom:20px; color:#454545;}
.use-wrap .title .inner .txt ul li:last-child {margin-bottom:0;}
.use-wrap .title .inner .txt .btn {position:relative; margin-top:60px;}
.use-wrap .title .inner .txt .btn ul {position:relative; height:120px; display:inline-flex; margin:0 -50px;}
.use-wrap .title .inner .txt .btn ul:before {content:""; position:absolute; top:0; left:50%; width:1px; height:100%; background:#ddd;}
.use-wrap .title .inner .txt .btn ul:after {content:"또는"; position:absolute; top:50%; left:50%; width:60px; height:34px; margin-top:-17px; margin-left:-30px; background:#f4fbff; text-align:center; font-size:16px; line-height:34px; color:#454545;}
.use-wrap .title .inner .txt .btn ul li {padding:0 50px; padding-top:34px; text-align:center;}
.use-wrap .title .inner .txt .btn ul li.bt-google .logo {line-height:0;}
.use-wrap .title .inner .txt .btn ul li.bt-google .bt {display:block; width:135px; height:40px; margin-top:7px; font-size:14px; line-height:40px; font-weight:500; color:#454545;}
.use-wrap .title .inner .txt .btn ul li.bt-google .bt span {position:relative; padding-left:24px;}
.use-wrap .title .inner .txt .btn ul li.bt-google .bt span:after {content:""; position:absolute; top:50%; left:0; width:13px; height:17px; margin-top:-8px; background:url('../images/sub/icon_down.png') 0 0 no-repeat; background-size:100% 100%;}
.use-wrap .title .inner .txt .btn ul li.bt-purchase a {display:block; width:135px; height:40px; border-radius:5px; background:#0056a9; font-size:16px; line-height:40px; color:#fff; font-weight:700;}

.use-wrap .group {padding:100px 0;}
.use-wrap .group:last-child {padding:100px 0 0;}
.use-wrap .group.bg {background:#f4fbff;}
.use-wrap .group.bg2 {background:#f4fbff;}
.use-wrap .group .sub-tit {text-align:center; margin-bottom:90px; font-size:35px; line-height:1.3em; font-weight:700; color:#333;}
.use-wrap .group .sub-tit.tit2 {margin-bottom:50px;}
.use-wrap .group .txt-tab-wrap {margin:0 auto; max-width:1400px; width:100%; display:flex; align-items:center;}
.use-wrap .group .txt-tab-wrap .img-box {flex:1 1 669px; max-width:669px; height:100%; line-height:0; padding:50px 0; display:flex; align-items:center;}
.use-wrap .group .txt-tab-wrap .img-box .img {display:none;}
.use-wrap .group .txt-tab-wrap .img-box.box2 {justify-content:center;}
.use-wrap .group .txt-tab-wrap .txt-box {flex:1 auto; width:1%;}
.use-wrap .group .txt-tab-wrap .txt-box ul li {margin-bottom:28px; padding:5px 0 5px 18px; border-left:1px solid #9b9b9b;}
.use-wrap .group .txt-tab-wrap .txt-box ul li:last-child {margin-bottom:0;}
.use-wrap .group .txt-tab-wrap .txt-box ul li a {display:block;}
.use-wrap .group .txt-tab-wrap .txt-box ul li .tit {font-size:22px; line-height:1.3em; color:#9b9b9b;}
.use-wrap .group .txt-tab-wrap .txt-box ul li .tit strong {font-weight:500;}
.use-wrap .group .txt-tab-wrap .txt-box ul li .cnt {display:none; font-size:18px; line-height:25px; color:#555; margin-top:10px;}
.use-wrap .group .txt-tab-wrap .txt-box ul li.active {border-left-color:#0056a9}
.use-wrap .group .txt-tab-wrap .txt-box ul li.active .tit {font-weight:700; color:#0056a9;}

.use-wrap .group.bg .txt-tab-wrap .img-box {order:2; justify-content:flex-end;}
.use-wrap .group.bg .txt-tab-wrap .txt-box {order:1;}

.use-wrap .tutorial {text-align:center;}
.use-wrap .tutorial .tit {margin-bottom:70px;}
.use-wrap .tutorial .tit .tt {font-size:35px; line-height:1.3em; font-weight:700; color:#333; margin-bottom:15px;}
.use-wrap .tutorial .tit p {font-size:18px; line-height:1.4em; color:#555;}
.use-wrap .tutorial .list ul {display:flex; position:relative; padding:20px 0;}
.use-wrap .tutorial .list ul:after {content:""; position:absolute; top:0; left:50%; width:1px; height:100%; background:#ddd;}
.use-wrap .tutorial .list ul li {width:50%;}
.use-wrap .tutorial .list ul li .tt {font-size:22px; line-height:1.3em; font-weight:700; color:#333; margin-bottom:18px;}
.use-wrap .tutorial .list ul li .txt {height:140px;}
.use-wrap .tutorial .list ul li .txt p {font-size:18px; line-height:23px; color:#555; margin-bottom:18px;}
.use-wrap .tutorial .list ul li .txt p:last-child {margin-bottom:0;}
.use-wrap .tutorial .list ul li .bt-down a {display:block; margin:0 auto; width:135px; line-height:40px;}
.use-wrap .tutorial .list ul li .bt-down.bt2 a {background:#0056a9; border-radius:5px; font-size:16px; line-height:40px; color:#fff; font-weight:700;}

.use-wrap .group .txt-wrap {margin:0 auto; max-width:1400px; width:100%; display:flex; align-items:center;}
.use-wrap .group .txt-wrap .img {flex:1 1 672px; max-width:672px; line-height:0; display:flex;}
.use-wrap .group .txt-wrap .img2 {margin-right:-117px;}
.use-wrap .group .txt-wrap .img3 {justify-content:center;}
.use-wrap .group .txt-wrap .list {flex:1 auto; width:1%; padding-left:57px;}
.use-wrap .group .txt-wrap .list .list-tit {font-size:26px; line-height:1.3em; font-weight:700; color:#333; margin-bottom:32px;}
.use-wrap .group .txt-wrap .list ul li {margin-bottom:22px;}
.use-wrap .group .txt-wrap .list ul li:last-child {margin-bottom:0;}
.use-wrap .group .txt-wrap .list ul li .tit {font-size:22px; line-height:1.3em; font-weight:700; color:#0056a9;}
.use-wrap .group .txt-wrap .list ul li .cnt {font-size:18px; line-height:25px; color:#555; margin-top:10px;}
.use-wrap .group .txt-wrap .list ul li .cnt p {margin-bottom:20px;}
.use-wrap .group .txt-wrap .list ul li .cnt p:last-child {margin-bottom:0;}
.use-wrap .group .txt-wrap .list ul li .cnt .txt-box {display:flex; align-items:center; max-width:530px; min-height:75px; padding:12px 30px; border-radius:15px; background:#f1f1f1; font-size:18px; line-height:23px; color:#333;}
.use-wrap .group .txt-wrap .list .bt-buy {margin-top:40px;}
.use-wrap .group .txt-wrap .list .bt-buy a {display:block; text-align:center; width:135px; height:40px; border-radius:5px; background:#0056a9; font-size:16px; line-height:40px; font-weight:700; color:#fff;}
.use-wrap .group.bg .txt-wrap .img {order:2; justify-content:flex-end;}
.use-wrap .group.bg .txt-wrap .list {order:1; padding-left:0;}
.use-wrap .group.bg3 .txt-wrap .img {order:2; justify-content:flex-end;}
.use-wrap .group.bg3 .txt-wrap .list {order:1; padding-left:0;}

.use-wrap .connect-way {text-align:center;}
.use-wrap .connect-way .tit {margin-bottom:85px; font-size:35px; line-height:1.3em; font-weight:700; color:#333;}
.use-wrap .connect-way .tit span {display:block; font-size:18px; line-height:23px; font-weight:400; margin-top:8px;}
.use-wrap .connect-way .list ul {position:relative; display:flex; justify-content:space-between; z-index:1;}
.use-wrap .connect-way .list ul:after {content:""; position:absolute; top:76px; left:50%; width:80%; margin-left:-40%; height:1px; background:#0056a9; z-index:-1;}
.use-wrap .connect-way .list ul li {position:relative; z-index:2;}
.use-wrap .connect-way .list ul li .num {display:flex; align-items:center; justify-content:center; margin:0 auto 26px; width:150px; height:150px; border-radius:100%; background:#0056a9; border:32px solid #fff; font-family: 'Roboto'; font-size:40px; line-height:1em; font-weight:700; color:#fff;}
.use-wrap .connect-way .list ul li .tt {font-size:22px; line-height:1.3em; font-weight:700; color:#0056a9; margin-bottom:15px;}
.use-wrap .connect-way .list ul li p {font-size:18px; line-height:28px; color:#333;}
.use-wrap .bt-examine {text-align:center;}
.use-wrap .bt-examine a {display:block; margin:0 auto; width:135px; height:40px; border-radius:5px; background:#0056a9; font-size:16px; line-height:40px; font-weight:700; color:#fff;}

.use-wrap .group.bg .connect-way .list ul li .num {border-color:#f4fbff;}