@charset "utf-8";

/* RESET */
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html {font-size:62.5%; -webkit-text-size-adjust:none; }
body {font-size:1.5rem; font-size:15px; line-height:1.6; font-family:sans-serif; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p {margin:0; padding:0;  }
img {border:0 none; vertical-align:middle; }
h1, h2, h3, h4, h5, h6 {font-weight:normal; font-size:100%; }
ul, ol, li {list-style:none; }
a {cursor:pointer; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;  }
a:hover, a:active, a:focus {text-decoration:underline; }
.container:after,
.clearfix:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.white {background:#fff; }
.gray {background:#eee; }
.container {max-width:1200px; margin:0 auto; padding:0 20px; outline:solid 0px;}


/* LOADING */
.alpha0 {opacity:0; z-index:999999; }
.loader {position:fixed; z-index:1000000; top:50%; left:50%; width:50px; height:50px; border:solid 3px #eee; border-radius:50%; border-top-color:#dd2436; margin-top:-25px; margin-left:-25px; animation: spin .5s ease-in-out infinite; -webkit-animation: spin .5s ease-in-out infinite; }
@keyframes spin {
	to {-webkit-transform:rotate(360deg); transform:rotate(360deg); }
}
@-webkit-keyframes spin {
	to {-webkit-transform:rotate(360deg); transform:rotate(360deg); }
}
.overflow-hidden, .noscroll {overflow:hidden; }


/* CUSTOM */
body {font-size:16px; font-family:'KlavikaWebBasic', sans-serif; font-weight:300; color:#000; line-height:1.4; max-width:1920px; margin:0 auto; }
img {display:block; max-width:100%; height:auto; }
a {color:#000; text-decoration:none; }
a:hover, a:active, a:focus {text-decoration:none; }
h2 {font-size:30px; font-weight:400; font-style:italic; letter-spacing:10px; margin-bottom:20px; text-align:center; text-transform:uppercase; }
h3 {position:relative; color:#dd2436; font-size:26px; font-weight:700; font-style:italic; letter-spacing:5px; padding-top:50px; text-align:center; text-transform:uppercase; }
h3:before {position:absolute; bottom:0; left:50%; content:""; width:100px; height:1px; background:#dd2436; margin-left:-50px; }
h4 {font-size:22px; font-weight:500; margin-bottom:40px; }
h4 span {display:block; }
h5 {font-size:18px; margin-bottom:20px; }
h5 span {color:#dd2436; }
.scrolltop {display:none; position:fixed; bottom:30px; right:10px; z-index:100000; display:block; width:40px; height:40px; line-height:40px; background:#dd2436; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; border-radius:3px; color:#fff; text-align:center; }
.btn {display:block; height:40px; line-height:40px; background:#ddd; font-size:15px; font-weight:400; font-style:italic; padding:0 30px; text-align:center; }
.btn:hover {background:#dd2436; color:#fff; }
.btn i {margin-right:5px; }

@media only screen and (min-width:768px) {
	body {font-size:18px; line-height:1.3; }
	h2 {font-size:40px; margin-bottom:30px; }
	h3 {font-size:33px; padding-top:75px; }
	h4 {font-size:26px; margin-bottom:60px; }
	h4 span {display:inline-block; }
	h5 {font-size:22px; }
	.scrolltop {bottom:50px; right:50px; }
}

@media only screen and (min-width:1200px) {
	body {font-size:20px; line-height:1.3; }
	h2 {font-size:50px; margin-bottom:40px; }
	h3 {font-size:40px; padding-top:100px; }
	h4 {font-size:36px; margin-bottom:80px; }
	h5 {font-size:24px; }
}


/* HEADER */
.header {position:fixed; top:0; left:0; z-index:10000; width:100%; height:70px; line-height:70px; background-color:transparent; padding:0; transition:all 0.2s ease-in-out; text-align:center; }
.header.active {background:#dd2436; -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.25); box-shadow:0 1px 5px rgba(0, 0, 0, 0.25); }
.header:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.header > div {position:relative; }
.header h1 {float:left; width:140px; height:27px; margin:22px 0 0 20px; }
.header h1 a {display:block; }
.header ul {display:none; }
.header ul li {float:left; position:relative; margin-right:50px; }
.header ul li:last-child {margin-right:70px; }
.header ul li a {display:block; color:#fff; font-size:18px; text-transform:uppercase; }
.header ul li a:hover {color:#dd2436; }
.header .sub {display:none; position:absolute; left:-27px; padding:10px 20px;}
.header .sub a {display:block; line-height:30px; text-align:center; }
.header.active .sub {background:#dd2436; }
.header.active ul li a:hover {color:#000; }
.header .gnbopen {float:right; display:block; width:40px; height:40px; line-height:45px; margin:15px 14px 0 0; text-align:center; }
.header .gnbopen i {color:#fff; font-size:22px; }
.header .gnbopen.hide {display:none; }
.header .gnbclose {display:none; float:right; width:40px; height:40px; line-height:45px; margin:15px 14px 0 0; text-align:center; }
.header .gnbclose i {color:#fff; font-size:22px; }
.header .gnbclose.hide {display:none; }
.header .menu {display:none; position:absolute; top:70px; left:0; right:0; z-index:10001; background:rgba(0,0,0,.7); padding:20px; }
.header .menu p {line-height:1.5; text-align:left; }
.header .menu p a {color:#fff; text-transform:uppercase; font-size:16px; }
.header .menu p.md {display:none; }
.header .menu p.mb {display:block; }
.header .menu p.al a {padding-left:20px; }


@media only screen and (min-width:768px) {
	.header .menu p.md {display:block; }
	.header .menu p.mb {display:none; }
}
@media only screen and (min-width:1200px) {
	.header {position:fixed; top:0; left:0; z-index:10000; width:100%; height:70px; line-height:70px; background-color:transparent; padding:0; transition:all 0.2s ease-in-out; text-align:center; }
	.header.active {background:#dd2436; -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.25); box-shadow:0 1px 5px rgba(0, 0, 0, 0.25); }
	.header:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
	.header > div {position:relative; }
	.header h1 {float:left; width:188px; height:36px; margin-top:17px; margin-left:70px; }
	.header ul {display:block; float:right; }
	.header ul li {float:left; position:relative; margin-right:50px; }
	.header ul li:last-child {margin-right:70px; }
	.header ul li a {display:block; color:#fff; font-size:18px; font-weight:400; text-transform:uppercase; }
	.header ul li a:hover {color:#dd2436; }
	.header .sub {display:none; position:absolute; left:-27px; padding:10px 20px;}
	.header .sub a {display:block; line-height:30px; text-align:center; }
	.header.active .sub {background:#dd2436; }
	.header.active ul li a:hover {color:#000; }
	.header .gnbopen {display:none; }
	.header .menu {display:none; }

}


/* VISUAL */

.visual .pc {display:none; }
.visual .md {display:none; }
.visual .mb {height:380px; display:block; background:url(../images/landing.jpg) center center; background-size:cover;}

@media only screen and (min-width:768px) {
	.visual .pc {display:none; }
	.visual .md {height:500px; display:block; background:url(../images/landing.jpg) center center; background-size:cover;}
	.visual .mb {display:none; }
}
@media only screen and (min-width:1200px) {
	.visual .pc {display:block; background:url(../images/landing.jpg) center center; background-size:cover; }
	.visual .md {display:none; }
	.visual .mb {display:none; }
}


/* ABOUT */
.aboutpc {display:none; }
.aboutmd {display:none; }
.aboutmb {height:450px; position:relative; background:url(../images/bg_about.jpg); background-size:cover; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
.aboutmb h2 {color:#fff; }
.aboutmb .container {position:relative; top:50%; color:#fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

@media only screen and (min-width:768px) {
	.aboutpc {display:none; }
	.aboutmd {height:500px; display:block; position:relative; background:url(../images/bg_about.jpg); background-size:cover; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
	.aboutmd h2 {color:#fff; }
	.aboutmd .container {position:relative; top:50%; color:#fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
	.aboutmb {display:none; }

}
@media only screen and (min-width:1200px) {
	.aboutpc {display:block; position:relative; background:url(../images/bg_about.jpg); background-size:cover; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
	.aboutpc h2 {color:#fff; }
	.aboutpc .container {position:relative; top:50%; color:#fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
	.aboutmd {display:none; }
	.aboutmb {display:none; }
	.aboutpc p {font-size:26px; }
}


/* TECHNOLOGY */
.technology .text {margin-top:40px; }
.technology .graph {margin-top:40px; }
.technology .graph li {float:left; width:33.333333%; margin:0; }
.technology .compare {margin-top:40px; padding:40px 20px; }
.technology .compare div:nth-child(1) {padding:0 1.6%; }
.technology .compare div:nth-child(2) {color:#dd2436; font-size:30px; font-weight:400; font-style:italic; text-align:center; }
.technology .compare div:nth-child(3) {padding:3% 1.6% 0; }
.technology .compare div:nth-child(3) li {font-size:15px; }
.technology .compare div:nth-child(3) li strong {display:inline-block; width:15px; height:15px;  background:#000; border-radius:100%; color:#fff; font-size:12px; font-weight:300; margin-right:5px; text-align:center; }


@media only screen and (min-width:768px) {
	.technology .text {margin-top:70px; }
	.technology .graph {margin-top:40px; }
	.technology .graph li {float:left; width:28%; margin: 0 2.6666666%; }
	.technology .compare {margin-top:40px; padding:40px 0; }
	.technology .compare div:nth-child(1) {float:left; width:45%; padding:0 1.6%; }
	.technology .compare div:nth-child(2) {float:left; width:10%; color:#dd2436; font-size:50px; font-weight:400; font-style:italic; padding-top:100px; text-align:center; }
	.technology .compare div:nth-child(3) {float:right; width:45%; padding:0 1.6%; }
	.technology .compare div:nth-child(3) li {font-size:15px; }
	.technology .compare div:nth-child(3) li strong {display:inline-block; width:15px; height:15px;  background:#000; border-radius:100%; color:#fff; font-size:12px; font-weight:300; margin-right:5px; text-align:center; }
}
@media only screen and (min-width:1200px) {
	.technology .compare div:nth-child(3) li {font-size:17px; }
	.technology .compare div:nth-child(3) li span {display:block; margin-left:20px; }
}


/* PRODUCT */

/* 공통 */
.product .detail {outline:solid 0px}
.product .detail:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.product .detail div {margin-bottom:0; }
.product .detail p {position:relative; padding-top:15px; }

.product .graph {margin-top:40px; outline:solid 0px}
.product .graph:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.product .graph ul:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.product .graph li:nth-child(1) {float:left; width:45%; background:#fff; border:solid 1px #ddd; padding:20px; outline:solid 0px; }
.product .graph li:nth-child(2) {float:right; width:45%; background:#fff; border:solid 1px #ddd; padding:20px; outline:solid 0px; }

.product .appoint {margin-top:40px; outline:solid 0px}
.product .appoint:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.product .appoint div {background:#fafafa; border:solid 1px #ddd; margin-right:0%; margin-bottom:10px; padding:20px; }
.product .appoint div:last-child {margin-right:0; }
.product .appoint h5 {line-height:1; font-weight:500; margin-top:20px; }
.product .appoint ul {margin-left:20px; }
.product .appoint li {list-style-type:disc; font-size:18px; }

.product .download {margin-top:40px; outline:solid 0px}
.product .download:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.product .download a {float:none; }


/* 안나 */
.product .space2 {height:20px; }
.product .anna {padding:40px 20px 70px 20px; }
.product .anna .appoint div {height:190px; }


/* 브라보 */
.product .space {height:20px; }
.product .bravo {padding:70px 20px; }
.product .bravo .graph p {margin:40px 0; }
/*.product .bravo .appoint div img {max-width:100px; margin:0 auto 30px; }
.product .bravo .appoint div {padding-top:50px; }*/


/* 알파 */
.product .alpha {padding:100px 20px 70px 20px; }
.product .alpha .detail p {position:relative; float:none; width:100%; padding-top:15px; }
.product .alpha .graph {margin-top:40px; padding:20px; outline:solid 0px}
.product .alpha .appoint div:nth-child(1) {width:30%; margin:0 5% 0 15%; }
.product .alpha .appoint div:nth-child(2) {width:30%; margin:0 15% 0 5%; }


/* 로드맵 */
.product .roadmap .container{padding:70px 20px; }
.roadmap .container .img {background:#fff; border:solid 0px #ddd; margin-top:40px; padding:20px; }

@media only screen and (min-width:768px) {
	.product .bravo .appoint div img {max-width:200px; margin:0 auto 30px; }

}
@media only screen and (min-width:1200px) {

	/* 공통 */
	.product .detail {outline:solid 0px}
	.product .detail:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
	.product .detail div {float:left; width:35%; margin-bottom:0; }
	.product .detail p {position:relative; float:left; width:65%; padding-top:15px; }

	.product .graph {margin-top:40px; outline:solid 0px}
	.product .graph:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
	.product .graph ul:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
	.product .graph li:nth-child(1) {float:left; width:45%; background:#fff; border:solid 0px #ddd; padding:20px; outline:solid 0px; }
	.product .graph li:nth-child(2) {float:right; width:45%; background:#fff; border:solid 0px #ddd; padding:20px; outline:solid 0px; }

	.product .appoint {margin-top:40px; outline:solid 0px}
	.product .appoint:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
	.product .appoint div {float:left; width:30%; background:#fafafa; border:solid 1px #ddd; margin-right:5%; padding:20px; }
	.product .appoint div:last-child {margin-right:0; }
	.product .appoint h5 {line-height:1; font-weight:500; margin-top:20px; }
	.product .appoint ul {margin-left:20px; }
	.product .appoint li {list-style-type:disc; font-size:18px; }

	.product .download {margin-top:40px; outline:solid 0px}
	.product .download a {float:right; }


	/* 안나 */
	.product .anna {padding:70px 20px; }
	.product .anna .appoint div {height:190px; }


	/* 브라보 */
	.product .space {height:70px; }
	.product .bravo {padding:70px 20px; }
	.product .bravo .graph p {margin:40px 0; }
	/*.product .bravo .appoint div img {max-width:45%; margin:0 auto 30px; }
	.product .bravo .appoint div {height:440px; padding-top:50px; }*/
	.product .bravo .appoint div {height:240px; }

	/* 알파 */
	.product .alpha {padding:100px 20px 70px 20px; }
	.product .alpha .detail p {position:relative; float:none; width:100%; padding-top:15px; }
	.product .alpha .graph {margin-top:40px; padding:20px; outline:solid 0px}
	.product .alpha .appoint div:nth-child(1) {width:30%; margin:0 5% 0 15%; }
	.product .alpha .appoint div:nth-child(2) {width:30%; margin:0 15% 0 5%; }


	/* 로드맵 */
	.product .roadmap .container {padding:70px 20px; }
	.product .roadmap p {font-weight:400; }
	.roadmap .container .img {background:#fff; border:solid 0px #ddd; margin-top:40px; padding:20px; }
}






/* COPYRIGHT */


.contact .address {position:relative; bottom center no-repeat; background-color: #de2535;  text-align:center; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
/*rgb #FF0000*/
.contact {max-width:1920px; margin:0 auto;}
.contact h3 {margin-bottom:35px; }
.contact .convention {position:relative; /*height:150px;*/ background:url(../images/convention.jpg) bottom center no-repeat; background-size:cover; text-align:center; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
.contact .convention p {position:relative; top:50%; color:#fff; font-size:20px; font-weight:400; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.contact .convention p span {display:block; font-size:16px; font-style:italic; }

@media only screen and (min-width:768px) {
	.contact h3 {margin-bottom:50px; }
	.contact:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.contact .convention {float:right; width:50%; /*height:300px;*/ }
	.contact .convention p {font-size:30px; font-weight:300; }
	.contact .convention p span {font-size:18px; }
.contact .address {float:left; width:50%; /*height:300px;*/background-color: #de2535; }
}
@media only screen and (min-width:1200px) {
	.contact h3 {margin-bottom:70px; }
	.contact .convention {/*height:850px;*/ }
	.contact .convention p {font-size:40px; }
	.contact .convention p span {font-size:20px; }
	.contact .address {/*height:850px;*/background-color: #de2535; }
}







.technology .container {outline:solid 0px red }
.product .container {outline:solid 0px red }
.roadmap .container {outline:solid 0px red }

.division1 {max-width:1200px; height:1px; background:#ddd; margin:0 auto; margin-top:70px; }
.division2 {max-width:1200px; height:1px; background:#ddd; margin:0 auto; margin-top:40px; }