@charset "utf-8";


/* ************************ intro ************************ */
/* ***** usb ***** */
.usb {}
.usb-wrap {display:flex;}
.usb-txt {width:50%; padding-right:50px; position:relative;}
.usb-tit {font-size:60px; font-weight:700; color:#000; line-height:1.1;}
.usb-tit span {color:var(--c_blue);}
.usb-question {display:block; width:50px; height:50px; border:1px solid #999; border-radius:50%; position:absolute; right:50px; top:0; background:url(../images/intro/i-question.svg)center no-repeat;}
.usb-list {padding:30px 0 40px;}
.usb-list li {padding-left:10px; position:relative; }
.usb-list li:before {content:''; display:block; width:4px; height:4px; border-radius:50%; position:absolute; left:0; top:12px; background:#999;}
.usb-list li+li {margin-top:12px;}
.usb-btn {display:flex;}
.usb-btn a {width:calc((100% - 20px)/2); display:flex; justify-content:center; align-items:center; height:50px; color:#fff; background:var(--c_blue) url(../images/intro/i-down.svg)47px center no-repeat;}
.usb-btn a+a {margin-left:20px; background:var(--c_blue) url(../images/intro/i-cart.svg)87px center no-repeat;}

.usb-img {width:50%; background:url(../images/intro/usb-img.jpg)center /cover no-repeat;}

/* ***** feature ***** */
.feature {}
.feature-tit {margin-bottom:50px; color:#fff; padding:60px 80px; background:url(../images/intro/feature-img.jpg)center /cover no-repeat; background-color:#000; position:relative;}
.feature-tit:before {content:'';display:block;background:rgba(0,0,0,.5); position:absolute; left:0; top:0; width:100%; height:100%;}
.feature-tit>* {position:relative;}
.feature-tit h3 {font-size:36px; font-weight:700; padding-bottom:20px; line-height:1.2;}
.feature-tit p {}
.feature-list {display:flex; flex-wrap:wrap; margin-top:-40px;}
.feature-list li {width:calc((100% - 40px)/2); margin-top:40px;}
.feature-list li:nth-child(odd) {margin-right:40px; clear:both;}
.feature-list li h4 {color:var(--c_blue); font-size:21px; font-weight:700; padding-bottom:14px;}
.feature-list li p {}


/* ***** why ***** */
.why {}
.why-tit {background:url(../images/intro/why-tit-img.jpg)center /cover no-repeat;}
.why-tit h3 {display:flex; height:200px; background:rgba(0,0,0,.5); color:#fff; align-items:center; justify-content:center; font-size:36px; font-weight:700;}
.why-list {padding:50px 0;}
.why-list ul {display:flex; text-align:center;}
.why-list ul li {width:33.3333%; padding:0 40px;}
.why-list ul li span {display:inline-block; width:120px; height:120px; border-radius:50%; background:var(--c_blue) url(../images/intro/why-icon-01.svg) center /40% no-repeat;}
.why-list ul li:nth-child(2) span {background-image:url(../images/intro/why-icon-02.svg);}
.why-list ul li:nth-child(3) span {background-image:url(../images/intro/why-icon-03.svg);}
.why-list ul li h4 {padding:25px 0 15px; font-size:21px; color:var(--c_blue); font-weight:500;}
.why-list ul li p {}
.why-manage {padding:0 100px; background:url(../images/intro/why-manage-img.jpg)center /cover no-repeat; position:relative;}
.why-manage:before {content:'';display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.5);}
.why-manage>* {position:relative;}
.why-manage h4 {display:flex; height:200px; color:#fff; align-items:center; justify-content:center; font-size:36px; font-weight:700;}
.why-manage ul {padding:60px 70px 0; background:#fff;}
.why-manage ul li {position:relative; padding-left:25px;}
.why-manage ul li+li {margin-top:20px;}
.why-manage ul li:before {content:''; display:block; width:20px; height:20px; background:url(../images/intro/i-list.svg)center /100% no-repeat; position:absolute; left:0; top:4px;}




/* ************************ product ************************ */
.product {}
.product-tit {position:relative;}
.product-tit h3 {font-size:36px; color:var(--c_blue); font-weight:700;}
.product-tit img {position:absolute; right:0; top:-26px;}

.product-box {display:flex; margin-top:40px; border:1px solid #e5e5e5; padding:40px;}
.product-list {width:50%; margin-top:-5px;}
.product-list li {padding-left:15px; position:relative;margin-top:5px;}
.product-list li:before {content:''; display:block; position:absolute; left:0; top:13px; background:#999;}
.product-list>li {}
.product-list>li:before {width:4px; height:4px; border-radius:50%;}
.product-list-list {padding-left:10px;}
.product-list-list>li {}
.product-list-list>li:before {width:7px; height:1px;}
.product-table {width:50%; padding-left:50px;}

.product-btn {text-align:center; padding-top:30px;}
.product-btn a {display:block;line-height:60px;background:var(--c_blue); color:#fff;}
.product-btn a span {padding-left:30px; display:inline-block; background:url(../images/common/i-down.svg)0 center no-repeat; }

.window {}


.mac {}


.android {}


.ios {}


/* ************************ manual ************************ */

.manual-wrap {margin-top:-40px; position:relative;}
.manual-item {margin-top:40px;}
.manual-item-padding {padding:30px 40px; border:1px solid #e5e5e5; }
.manual-item img {margin-top:20px; max-width:100%;}
.manual-item h3 {margin-bottom:20px; font-size:24px; color:#000; line-height:1.2; }
/* .manual-item h3:before {content:''; display:block; width:5px; height:100%; background:var(--c_blue); position:absolute; left:0; top:0;} */
.manual-item p {}
.manual-item p+p {margin-top:10px;}
.manual-item p.dot {font-size:18px; position:relative; padding-left:20px; color:#666;}
.manual-item p.dot:before {content:''; display:block; width:5px; height:5px; background:#666; position:absolute; left:0; top:14px; border-radius:50%;}

.manual-imgList {display:flex; align-items:center; border:1px solid #e5e5e5; padding:30px; margin-top:10px;}
.manual-imgList li {width:calc((100% - 200px)/3); position:relative;}
.manual-imgList li+li {margin-left:100px;}
.manual-imgList li+li:before {content:''; display:block; width:40px; height:40px; background:#ffcc00 url(../images/manual/i-arrow.svg)center /40% no-repeat; position:absolute; left:-70px; top:50%; transform:translateY(-50%); border-radius:50%;}
.manual-imgList li img {width:100%;}
.manual-imgList li.file {width:25%;}
.manual-imgList li.drive {width:calc(50% - 100px);}
.manual-imgList li.file {width:calc(25% - 100px);}
.manual-imgList li.file img {width:120px;}

.manual-imgList2 {display:flex; align-items:center; border:1px solid #e5e5e5; padding:30px; margin-top:10px;}
.manual-imgList2 li {}
.manual-imgList2 li+li {margin-left:40px;}
.manual-imgList2 li img {max-width:100%;}

.manual-youtube {padding-top:60px;text-align:center;width:360px; margin:0 auto;}
.manual-youtube a {padding-right:30px; font-size:24px; line-height:1.4; color:#fff;  height:80px; display:flex; align-items:center; justify-content:center; background:#ed2124 url(../images/common/i-blank.svg)calc(100% - 80px) center /21px no-repeat; border-radius:10px;}

/* ************************ custormer ************************ */


/* ************************ payment ************************ */

.payment {}
.payment .payment-tit {text-align:center; width:800px; max-width:100%; margin:0 auto; padding-bottom:50px;}
.payment .payment-tit h3 {font-size:36px; font-weight:700; color:#000; position:relative; padding-bottom:30px; }
.payment .payment-tit h3:after {position:absolute; left:50%; bottom:0; background:var(--c_blue); display:block; content:''; width:50px; height:5px; transform:translateX(-50%);}

.payment .payment-btn {text-align:center; margin-top:50px;}
.payment .payment-btn a {display:inline-block; width:180px; height:60px; line-height:60px; font-size:15px; border-radius:5px;}
.payment .payment-btn a.buy {background:var(--c_blue); color:#fff;}
.payment .payment-btn a.cancel {background:#ddd; color:#000;}


.payment .buy {}
.payment .buy-img img {width:100%; object-fit:cover; object-position:center;}
.payment .buy-form {width:800px; max-width:100%; margin:0 auto; background:#fff; padding:50px; box-shadow:0 0 10px rgba(0,0,0,.2); border-radius:10px;}
.payment .buy-form input {width:100%;}
.payment .buy-form select {width:100%;}


.payment .buy-list {margin-top:20px;}
.payment .buy-list .buy-item {padding:10px 0;border-top:1px solid #999; position:relative;}
.payment .buy-list .buy-item .del {width:30px; height:30px; position:absolute; right:0; top:10px; background:url(../images/common/i-close.svg)center no-repeat;}
.payment .buy-list .buy-item-ea {padding-right:100px; position:relative; margin-top:10px;}
.payment .buy-list .buy-item-btn {display:flex; width:calc(34px*3); align-items:center; border:1px solid #e5e5e5;}
.payment .buy-list .buy-item-btn>* {width:34px; height:34px; line-height:34px; border:0; text-align:center;}
.payment .buy-list .buy-item-btn button {background-color:#f5f5f5;}
.payment .buy-list .buy-item-btn input {background-color:#fff;}
.payment .buy-list .buy-item-price {position:absolute; right:50px; top:10px; color:var(--c_blue); font-weight:500;}

.payment .buy-total {border-top:1px solid #999; padding-top:20px;}
.payment .buy-total>p {color:#000; font-size:21px; font-weight:700; border-bottom:1px solid #000;}
.payment .buy-total-info {}
.payment .buy-total-item {}
.payment .buy-total-item>div {padding:10px 0; position:relative;border-bottom:1px solid #e5e5e5;}
.payment .buy-total-item span {display:inline-block; }
.payment .buy-total-item span:first-child {}
.payment .buy-total-item span:last-child {position:absolute; right:0; color:var(--c_blue);}
.payment .buy-total-item span small {color:#666;}
.payment .buy-total-item-product {}
.payment .buy-total-item-quantity {}
.payment .buy-total-price {padding:10px 0; position:relative;}
.payment .buy-total-price .tit {color:#000; font-size:18px;}
.payment .buy-total-price .price {position:absolute; right:0; font-size:21px;color:var(--c_blue); font-weight:500;}
.payment .buy-total-price .price small {font-size:16px; color:#666;}

.payment .buy-total-btn {padding-top:10px;}
.payment .buy-total-btn a {display:block; height:50px; line-height:50px; background:var(--c_blue);color:#fff; text-align:center;}


.order-tit {width:600px; max-width:100%; margin:0 auto; padding-bottom:30px;}
.order-tit h3 {font-size:18px; color:#000; line-height:1.4; position:relative; padding-left:20px;}
.order-tit h3:before {content:''; display:block; width:4px; height:100%; background:var(--c_blue); position:absolute; left:0; top:0;}


/* ************************ 태블릿 이하(~1024) ************************ */
@media screen and (max-width: 1024px) {
	
	/* ************************ intro ************************ */
	
	/* ***** usb ***** */
	.usb {}
	.usb-wrap {display:block;}
	.usb-tit {font-size:50px;}
	.usb-txt {width:100%; padding-right:0; padding-bottom:40px;}
	.usb-list {padding:20px 0 30px;}
	.usb-list li+li {margin-top:10px;}
	.usb-btn a {background-position:20% 50%;}
	.usb-btn a+a {background-position:20% 50%;}
	.usb-img {width:100%;height:60vw;}
	.usb-question {right:0;}
	
	
	/* ***** feature ***** */
	.feature {}
	.feature-tit {padding:50px 70px;}
	.feature-tit h3 {font-size:30px;}
	
	
	
	
	/* ***** why ***** */
	.why {}
	.why-tit h3 {height:180px; font-size:30px;}
	.why-list {padding:40px 0;}
	.why-list ul li {}
	.why-list ul li span {width:100px; height:100px;}
	.why-list ul li h4 {padding:20px 0 10px; font-size:19px;}
	.why-list ul li p {line-height:1.6;}
	
	.why-manage {padding:0 80px;}
	.why-manage h4 {height:180px; font-size:30px;}
	.why-manage ul {padding: 50px 60px 0;}
	
	
	/* ************************ product ************************ */
	.product {}
	.product-tit h3 {font-size:30px;}
	.product-tit img {width:125px;}
	.product-box {margin-top:30px; padding:30px; display:block;}
	.product-list {width:100%;}
	.product-table {width:100%; padding:30px 0 0;}
	
	
	.window {}
	
	
	.mac {}
	
	
	.android {}
	
	
	.ios {}
	
	
	/* ************************ manual ************************ */

	.manual-wrap {margin-top:-30px;}
	.manual-item {margin-top:30px;}
	.manual-item-padding {padding:20px 30px;}
	.manual-item img {margin-top:14px;}
	.manual-item h3 {margin-bottom:14px; font-size:21px;}
	.manual-item p+p {margin-top:7px;}
	.manual-item p.dot {font-size:16px; padding-left:14px}
	.manual-item p.dot:before { width:4px; height:4px;}
	
	.manual-imgList {display:block; padding:25px; text-align:center;}
	.manual-imgList li {position:relative;width:80%; margin:0 auto;}
	.manual-imgList li+li { margin:100px auto 0;}
	.manual-imgList li+li:before {width:40px; height:40px; left:50%; top:-70px; transform:translateX(-50%) rotate(90deg);}
	.manual-imgList li img {width:100%;}
	.manual-imgList li.drive {width:80%;}
	.manual-imgList li.file {width:80%;}
	.manual-imgList li.file img {}
	
	.manual-imgList2 {display:block; padding:30px; margin-top:10px;}
	.manual-imgList2 li {width:100%;}
	.manual-imgList2 li+li {margin-left:0; margin-top:20px;}
	.manual-imgList2 li img {max-width:100%;}
	
	.manual-youtube {padding-top:40px;}
	.manual-youtube a {height:70px; font-size:21px;}

	/* ************************ custormer ************************ */
	
	
	/* ************************ payment ************************ */
	.payment {}
	.payment .buy-form {padding:40px;}
	.payment .payment-tit {padding-bottom:40px;}
	.payment .payment-tit h3 {font-size:27px; padding-bottom:25px;}
	.payment .payment-tit h3:after {width:40px; height:4px;}
	.payment .payment-btn a {width:160px; height:54px; line-height:54px;}
	
	
	
	
	
	
	
	
	
	

}
/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	body {font-size:15px; line-height:1.6;}
	
	/* ************************ intro ************************ */
	
	/* ***** usb ***** */
	.usb {}
	.usb-tit {font-size:36px;}
	.usb-txt {padding-bottom:30px;}
	.usb-list {padding:15px 0 25px;}
	.usb-list li+li {margin-top:7px;}
	.usb-btn {display:block;}
	.usb-btn a {background-position:40px 50%; font-size:15px; width:100%;}
	.usb-btn a+a {background-position:40px 50%; margin-left:0; margin-top:5px;}
	.usb-question {width:40px; height:40px; background-size:20px;}
	
	
	/* ***** feature ***** */
	.feature {}
	.feature-tit {padding:40px 60px;}
	.feature-tit h3 {font-size:27px;}
	.feature-list {display:block; margin-top:-10px;}
	.feature-list li {margin:20px 0 0; width:100%;}
	.feature-list li h4 {font-size:19px; padding-bottom:12px;}
	
	/* ***** why ***** */
	.why {}
	.why-tit h3 {height:120px; font-size:24px;}
	.why-list ul {display:block;}
	.why-list ul li {width:100%;}
	.why-list ul li span {width:90px; height:90px;}
	.why-list ul li+li {margin-top:20px;}
	.why-list ul li h4 {padding:12px 0 7px;}
	
	.why-manage {padding:0;}
	.why-manage h4 {height:120px; font-size:24px;}
	.why-manage ul {padding:30px 0 0 ;}
	.why-manage ul li+li {margin-top:16px;}
	
	/* ************************ product ************************ */
	.product {}
	.product-tit h3 {font-size:24px;}
	.product-tit img {width:100px; top:-23px;}
	.product-box {margin-top:20px; padding:20px;}
	.product-list {}
	.product-table {padding:20px 0 0;}
	
	
	.window {}
	
	
	.mac {}
	
	
	.android {}
	
	
	.ios {}
	
	
	/* ************************ manual ************************ */
	.manual-youtube {padding-top:30px; width:100%;}
	.manual-youtube a {height:60px; font-size:19px; padding-right:20px; background-size:19px; background-position:70% 50%;}
	
	
	/* ************************ custormer ************************ */
	
	
	/* ************************ payment ************************ */
	.payment .payment-tit {padding-bottom:30px;}
	.payment .payment-tit h3 {font-size:24px;}
	
	



}