/* Noto */ @import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); /* default */ body{font-family:'Noto Sans KR', sans-serif; color:#171717; font-size:15px; font-weight:400; padding:0px; margin:0px; line-height:24px;} html{overflow-y:scroll;position: relative;min-height: 100%; } html, body{width:100%;} div, p, ul, li,ol, table, th, td, textarea, input, span, form, h1, h2, h3, h4, h5, h6, dt, dl, dd, em, sup {padding:0px; margin:0px; vertical-align:top; font-weight:400;} ul, ol, dl, dd, dt, li {list-style-type:none;} form, fieldset{margin:0; padding:0; border:0;} table, tbody, tfoot, thead, tr, th, td{border-collapse:collapse; border-spacing:0;} /*border:none; separate*/ /* 6 */* html table, tbody, tfoot, thead, tr, th, td {border-collapse:collapse;} /* 7 */* + html table, tbody, tfoot, thead, tr, th, td {border-collapse:collapse;} legend{display:none; position:absolute; visibility:hidden} caption{visibility:hidden; width:0px; height:0px; overflow:hidden; font-size:0px; margin:0px; padding:0px; line-height:0px;} img {border:0; vertical-align:middle; outline:none} optgroup {font-style:normal; font-size:0px; height:0px; line-height:0px} input {vertical-align:middle;} select {vertical-align:middle;} textarea {font-size:14px; font-weight:400;} label {} img, fieldset {border:0 none transparent;/*'transparent' for Opera7*/} i, em {font-style:normal;} span{letter-spacing:normal} /* html5 ie9 else */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; padding:0; margin:0 } input[type="radio"]{border:none transparent} input[type="text"]{border:1px solid #ddd} input[type="password"]{border:1px solid #ddd} /* a링크 */ a {text-decoration:none; cursor:pointer;color:#000} a:link, a:visited {text-decoration:none;} a:hover, a:focus, a:active {text-decoration:none; color:#0066b3} html, body { height:100%; letter-spacing:-0.1px; } #warp{ width:100%; min-height:100%; letter-spacing:-1.2px;} .mo_br{display:inline;} .mo_br2{display:inline;} .mo_br3{display:none;} .web_br{display:none;} .inner{width:960px;margin:0 auto; } h1{font-size:40px; font-weight:500; line-height:50px;color:#fff;} h2{font-size:30px; font-weight:500; line-height:40px;} h3{font-size:26px; font-weight:500; line-height:40px; display: block; } h3:after{content:url("../images/img-02.png"); display:block; height:1px; padding:20px 0; } section{padding:80px 0;} .visual{color:#fff;background:url(../images/header_bg.jpg) no-repeat top; height:358px; overflow:hidden; padding:60px 0; box-sizing: border-box;} .visual strong{color:#009aff} .visual:after{content: ''; display: block; clear: both;} .visual .txt{float:right; width:45%;} .visual .img_box{float:left; width:45%; padding-left:5%;} .visual .txt dt{padding-bottom:20px;} .visual .txt dd{font-size:18px; padding-top:10px; } .visual dt img{width:149px; height:27px;} .content h2{text-align:center;} .content h2 strong{color:#009aff} .content h2:after{content:url("../images/img-02.png"); display:block; height:1px; padding:20px 0; } .content p{text-align:center; font-size:18px; color:#494949; line-height:28px;} .content:after{content: ''; display: block; clear: both;} .platform:after{content: ''; display: block; clear: both;} .platform{float:left; width:49%; margin-right:1%; padding-top:50px;} .platform dt{background-color:#081a29; color:#fff; font-size:20px; border-radius:10px 10px 0 0; text-align:center; padding:20px 0;} .platform dd{background-color:#f3f3f3; border-radius:0 0 10px 10px; padding-top:30px;} .platform ul:after{content: ''; display: block; clear: both;} .platform ul li{float:left; text-align:center; width:33.3%; height:180px; padding-top:100px; box-sizing: border-box; font-size:16px; font-weight: 500; line-height:20px; letter-spacing:0;} .platform img{display:block; text-align:center; margin-left: auto; margin-right: auto;} .platform span{display: block; font-size:13px;} .platform p{font-size:18px; color:#000; padding-top:15px;} .platform .auto-txt li{width:50%;} .colla li:first-child{background:url(../images/img-03.png) no-repeat center 10px;} .colla li:nth-child(2){background:url(../images/img-04.png) no-repeat center 10px;} .colla li:last-child{background:url(../images/img-05.png) no-repeat center 10px;} .auto-txt li:first-child{background:url(../images/img-06.png) no-repeat center 10px;} .auto-txt li:last-child{background:url(../images/img-07.png) no-repeat center 10px;} .info:after{content: ''; display: block; clear: both;} .info{background-color:#f1f1f1; width:1260px; margin:0 auto;} .info li{float:left; width:50%; font-size:16px; line-height:26px; padding-bottom:30px;} .info .txt{float:right; width:50%; height:310px; } .info .img_box{float:left; width:50%; } .info .img_box_mo{float:left; width:50%; display:none;} .info .img_box_web{float:left; width:50%;} .info li>div{padding:0 0 0 40px;} .info li:nth-child(9) h3{padding-top:40px;} .info h3{padding-top:60px;} .info li:nth-child(10){padding-bottom:0;} .info li:nth-child(11){padding-bottom:0;} .kpoint h2{text-align:center; padding-bottom:30px;} .kpoint h2 span{color:#009aff; font-weight:500;} .kpoint strong{font-size:18px; display:block; padding-bottom:10px;} .kpoint:after{content: ''; display: block; clear: both;} .kpoint li{float:left; width:25%; text-align:center; padding-top:80px; font-size:16px; line-height:26px;} .kpoint li:first-child{background:url(../images/img-13.png) no-repeat center top; height:61px;} .kpoint li:nth-child(2){background:url(../images/img-14.png) no-repeat center top; height:61px;} .kpoint li:nth-child(3){background:url(../images/img-15.png) no-repeat center top; height:61px;} .kpoint li:last-child{background:url(../images/img-16.png) no-repeat center top; height:61px;} .kpoint li{padding-bottom:20px;} .blog-area{width:1260px; margin:0 auto; background-color:#000008; } .blog-area:after{content: ''; display: block; clear: both;} .blog{float:left; width:50%;} .vedio{float:left; width:50%;} .blog ul{ padding:90px 0 0 100px;} .blog li{display:inline-block; height:auto; margin-right:5px;} .blog li:last-child{margin-right:0;} .blog li img{width:145px; height:auto;} .blog li:last-child{margin-right:0;} .blog>div{text-align: center; padding:30px 0 0 40px } .blog>div a{background-color:#009aff; color:#fff; font-size:16px; display:inline-block; padding:15px 30px; border-radius:50px;} .embed-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (max-width: 1200px) { .inner{width:auto; margin:0 3%;} .info{width:auto; } .blog ul{margin-left: auto; margin-right: auto; padding:80px 0 0 0;} .blog li{display:inline-block; width:32%; height:auto; margin-right:1.7%; } .blog li:last-child{margin-right:0;} .blog li img{width:100%; height:auto;} .blog-area{width:100%;} .blog{background-color:#000008; float:none; width:100%;} .blog>div{text-align:center; padding:30px 0 30px 0px } .blog>div a{background-color:#009aff; color:#fff; font-size:18px; display:inline-block; padding:15px 40px; border-radius:50px;} .vedio{float:none; width:100%; margin:0 auto; overflow: hidden; box-sizing: border-box; border-radius:10px; padding-bottom:80px;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .blog-inner{width:auto; margin:0 5%;} .embed-container{border-radius:10px;} } @media only screen and (max-width: 960px) { .visual .txt{float:left; width:50%;} .visual .img_box{float:left; width:50%; padding-left:0;} .info img{width:100%;} .info h3{padding-top:30px;} .info li{padding:10px 10px 20px 10px; box-sizing: border-box;} .info li>div{padding:0 0 0 0;} .info .txt{float:left; height:300px; } .info .img_box{float:right; } .info .img_box_mo{float:right; display:inline;} .info .img_box_web{float:right; display:none;} .mo_br{display:none;} .blog li{display:inline-block; width:32%; height:auto; margin-right:1.5%; } } @media only screen and (max-width: 930px) { .info .txt{float:left; height:280px; } } @media only screen and (max-width: 880px) { section{padding:50px 0;} h2{font-size:28px;} h3{font-size:24px;} .info .txt{float:none; width:100%; height:auto; } .info .img_box{float:none; width:100%; } .info .img_box_mo{float:none; width:100%; display:inline;} .info .img_box_web{float:none; width:100%; display:none;} .info li{float:none; width:100%; padding:0 0 10px 0;} .info li:first-child h3{padding-top:0;} .info img{width:70%;} .info h3{padding-top:30px;} h3:after{content:url("../images/img-02.png"); display:block; height:1px; padding:10px 0; } .blog ul{width:100%;} } @media only screen and (max-width: 640px) { .web_br{display:inline;} .mo_br2{display:none;} .visual{height:340px;} .visual .txt{float:none; width:100%; letter-spacing:0px;} .visual .img_box{float:none; display:none;} .content p{font-size:16px;} .info h3{letter-spacing:0.2px;} .info li{font-size:15px; line-height:24px; letter-spacing:-0.05px;} .platform{float:none; width:100%; padding-top:30px;} .kpoint li{width:50%; font-size:15px; line-height:24px; letter-spacing:-0.05px;} .kpoint li:first-child{padding-bottom:60px;} .kpoint li:nth-child(2){padding-bottom:60px;} .blog li{margin-right:1%;} .blog>div a{font-size:15px; letter-spacing:-0.05px} .blog>div{padding:20px 0;} .blog ul{padding:50px 0 0 0;} .vedio{padding-bottom:50px;} } @media only screen and (max-width: 375px) { h2{font-size:24px; line-height:35px; font-weight: 600;} .web_br{display:none;} .visual{padding:60px 0 50px 0; height:330px;} .content h2:after{padding:10px 0;} .content p{font-size:16px; letter-spacing:-0.05px;} .platform ul li{height:170px;} ul.auto-txt li{height:180px;} .info h3{font-weight: 600;} .kpoint h2{font-weight: 600;} .kpoint h2 span{font-weight: 600;} .mo_br3{display:inline;} .blog>div a{padding:13px 50px; font-size:17px;} }