@import url(https://use.fontawesome.com/releases/v5.15.2/css/all.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@charset "utf-8";

/* Reset CSS  */
html { height: 100%; overflow-y:scroll; scroll-behavior: smooth;}
body { font-size: 13px; color:#333; overflow-x: hidden;  scroll-behavior: smooth;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none;  font-family:"pretendard", sans-serif; font-weight: 300;}
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#000;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; height:auto; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 1.6;}
td strong {font-weight: 100;	font-size: 5px;vertical-align: bottom;}
a:hover{text-decoration:none;}
ul:after{content:""; display:block; clear:both;}

/*bbs*/
#container_title{display:none;}
#bo_list_total{display:none;}
#bo_v_table{display:none;}
#bo_vc_w{border-bottom:0;}
#bo_vc{background:none;}

/************* css ******************/
body::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-thumb {background:#666; ;border-radius: 10px;}
body::-webkit-scrollbar-track {background: #f5f5f5;}


.container { max-width: 1400px; width:100%; margin: 0 auto; position: relative; box-sizing: border-box; padding:0 30px;}
.container:after {content: ""; display: block; clear: both;}
.wide{position: relative;}
.wide::before , .wide::after{content: ""; width: 200%; height: 100%; position: absolute; top:0; left:-50%; z-index: -1;}
p{word-break: keep-all;}


/*header*/
#header{position: absolute; top:0; left:0; width: 100%; height: 122px; display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid rgba(255,255,255,0.1); z-index: 9;}
#h_logo{position: absolute; top:24px; left:35px;}

#h_gnb{margin-top:20px;}
#h_gnb > li{float: left; position: relative;}
#h_gnb > li > a{font-size:20px; color: #fff; font-weight: 400; text-transform: uppercase; padding:0 42px 20px; display: block;}
#h_gnb > li > a::before{content:""; position: absolute; bottom:10px; left:50%; transform: translateX(-50%); width: 0; height: 3px; background: #0b8e3c; transition: .5s;}
#h_gnb > li:hover > a::before{width: 50px;}
#h_gnb > li:hover .lnb{display: block;}
#h_gnb .lnb{display: none; width: 100%; background:rgba(255,255,255,0.97); position: absolute; top:100%; left:0; padding: 10px 0; border-radius: 15px; text-align: center;}
#h_gnb .lnb li a{color:#000; font-size:18px; display: block; padding:7px 10px;}
#h_gnb .lnb li a:hover{color: #0b8e3c;}

#h_sns{margin:0 20px;}
#h_sns li{float: left;margin-right:12px;}
#h_sns li a{font-size: 25px; color:#fff; transition: .5s;}
#h_sns li a:hover{opacity: 0.6;}

#h_lang li{float: left; margin-right: 15px;}
#h_lang li a{font-size:20px; color:#fff;}
#h_lang li a.on , #h_lang li a:hover{border-bottom:2px solid #fff;}

#nav_btn{background: #0b8e3c; height: 100%;padding:0 38px; display: flex; align-items: center; cursor: pointer; margin-left:40px;}
#nav_btn .line span{display: block; width:40px; height: 2px; background: #fff;}
#nav_btn .line span:first-child{margin-bottom:12px;}
#nav_btn p{font-size: 20px; color: #fff; margin-left:10px;}

#sitemap{position: fixed; width: 100%; max-width: 600px; top:0; right:-100%; height: 100vh; z-index: 98; background:rgba(255,255,255,0.97); box-shadow: -5px -1px 10px #1919192b;}
#sitemap .nav_btn{background: #0b8e3c; height: 112px; width:190px; padding:0 38px; display: flex; align-items: center; cursor: pointer; position: absolute; right:0; top:0;}
#sitemap .nav_btn .line span{display: block; width:40px; height: 2px; background: #fff;}
#sitemap .nav_btn .line span:first-child{margin-bottom:12px;}
#sitemap .nav_btn p{font-size: 20px; color: #fff; margin-left:10px;}
#sitemap .content{height: 100%; overflow-y: auto; padding: 50px 50px 0;}
#sitemap .lang{margin-bottom:40px;}
#sitemap .lang li{display: inline-block;}
#sitemap .lang li a{font-size:20px; display:block; padding: 6px 20px; border:1px solid #ccc; border-radius: 50px;}
#sitemap .lang li a.on, #sitemap .lang li a:hover{background: #000; color: #fff;}
#sitemap .gnb{margin-bottom:50px;}
#sitemap .gnb > li{margin-bottom:10px;}
#sitemap .gnb > li > a{font-size: 25px; font-weight: 500; border-bottom:1px solid #ddd; display: block; padding: 10px 0;}
#sitemap .lnb{padding-top:10px;}
#sitemap .lnb li a{font-size: 18px; display: block; padding: 5px 0; transition: .5s;}
#sitemap .lnb li a::before{content: "-"; margin-right:5px;}
#sitemap .lnb li a:hover{padding-left:10px; color: #0b8e3c;}
#sitemap .sns{text-align: right;}
#sitemap .sns li{display: inline-block; font-size:30px; padding-left: 5px;}
#sitemap .sns li i{color: #ccc;}
#sitemap .sns li i:hover{color: #000;}

/*main*/
#m_slider{height: 100vh; background: #333; position: relative;}
#m_slider .bg{position: absolute; bottom:0; left:0; width: 100%; z-index: 97;}
#m_slider .swiper-wrapper{width:100%;}
#m_slider .swiper-wrapper .slide01{background: url(../img/m_slider_bg01.png) no-repeat center center / cover;}
#m_slider .swiper-wrapper .slide02{background: url(../img/m_slider_bg02.png) no-repeat center center / cover;}
#m_slider .swiper-wrapper .slide03{background: url(../img/m_slider_bg03.png) no-repeat center center / cover;}
#m_slider .swiper-wrapper .swiper-slide{height:100vh; float:left; display: flex; align-items: center; color: #fff;}
#m_slider .swiper-wrapper .view{font-size:22px; font-family: 'GmarketSansMedium'; display: block; padding:40px; border:2px solid #fff; color:#fff; border-radius: 80px; position: absolute; top:50%; right:15vw; transform: translateY(-50%); opacity: 0;}
#m_slider .swiper-wrapper .view::before{content:""; display: block; width: 208px; height: 1px; background: rgba(255,255,255,0.4);position: absolute; left:-208px; top:50%;}
#m_slider .swiper-wrapper .view span{margin-left:20px; display: inline-block;}
#m_slider .swiper-wrapper .view:hover{background: #fff; color:#000; right: 16vw;}
#m_slider .swiper-slide-active .view{opacity: 1; transition: all 2.0s;}
#m_slider .swiper-wrapper .text{opacity: 0;}
#m_slider .swiper-slide-active .text{opacity: 1; transition: all 3.0s;}
#m_slider .swiper-wrapper .text .logo{position: absolute; top:-165px; left:-188px;}
#m_slider .swiper-wrapper .text .big{font-family: 'GmarketSansMedium'; font-size:65px; line-height: 77px;  letter-spacing: -2px; margin-bottom:35px;}
#m_slider .swiper-wrapper .text .big b{font-family: 'GmarketSansBold';}
#m_slider .swiper-wrapper .text p{font-size:22px;}
#m_slider .arrow{position: absolute; width: 100%; bottom:25vh;}
#m_slider .arrow .swiper-pagination{position: relative; text-align: left; font-size: 15px; display: inline-block; margin: 0 5px 0 10px;;}
#m_slider .arrow .swiper-pagination-bullet{width: 10px; height: 10px; border-radius: 30px; border:1px solid #fff; background: none; margin-right:10px; opacity: 1;}
#m_slider .arrow .swiper-pagination-bullet-active{width: 27px;}
#m_slider .arrow .swiper-button-prev, #m_slider .arrow .swiper-button-next{background: none; color:#fff; font-size:15px; font-family: 'GmarketSansLight'; position: relative; display: inline-block; width:50px; left:0;}

.m_tit{font-size: 50px; font-family: 'GmarketSansMedium'; letter-spacing: -2px; position: relative;}
.m_tit::before{content:""; width: 50px; height: 4px; background: #11803f; position: absolute; top:0; left:0;}

#m_sol{padding: 125px 30px;}
#m_sol .list{margin-top:45px; display: flex; flex-wrap: wrap;}
#m_sol .list li{width: 50%; margin-bottom:35px;}
#m_sol .list li:nth-child(odd){padding-right:13px;}
#m_sol .list li:nth-child(even){padding-left:13px;}
#m_sol .list li a{position: relative; display: inline-block; margin-bottom:20px; background: #000;}
#m_sol .list li a img{transition: .5s;}
#m_sol .list li a .view{position: absolute; right:25px; bottom:25px; color:#fff; border-bottom: 1px solid #fff; font-size: 16px; transition: .5s;}
#m_sol .list li a:hover .view{right:35px;}
#m_sol .list li a:hover img{opacity: 0.6;}
#m_sol .list li .tit{font-size: 25px; font-weight: 500; letter-spacing: -1px; padding:0 10px; margin-bottom:10px;}
#m_sol .list li .txt{font-size: 18px; line-height: 22px; color: #5a5a5a; padding:0 10px;}

#m_video{display: flex; flex-wrap: wrap; background: url(../img/m_video_bg.png) no-repeat center right; margin-bottom:85px;}
#m_video .video{width: 60%;}
#m_video .content{width: 40%; padding-left:65px; margin-top:110px;}
#m_video .content .m_tit::before{top:-15px;}
#m_video .content .txt{font-size: 18px; color: #625f5f; margin:28px 0 55px;}
#m_video .content .view{font-size: 16px; border-bottom:1px solid #000; transition: .5s;}
#m_video .content .view:hover{margin-left:10px; color: #ccc; border-color: #ccc;}

/*sub 공통*/
#s_top{color:#fff; text-align: center; padding-top: 312px; background: #333;}
#s_top.bg01{background: url(../img/s_top01_bg.png) no-repeat center center / cover;}
#s_top.bg02{background: url(../img/s_top02_bg.png) no-repeat center center / cover;}
#s_top.bg03{background: url(../img/s_top03_bg.png) no-repeat center center / cover;}
#s_top .tit{font-size: 60px; font-family: 'GmarketSansBold'; letter-spacing: -2px; text-transform: uppercase;}
#s_top .path{padding-bottom:180px;}
#s_top .path li{display: inline-block; font-size: 15px;}
#s_top .path li::before{content: "/"; padding:0 10px;}
#s_top .path li:first-child::before{content: none;}

#snb li{display: inline-block;}
#snb li a{color: #fff; font-size: 22px; font-weight: 500;  padding:22px 62px; display: block; border-radius: 30px 30px 0 0 ;}
#snb li a.active{background: #fff; color:#000;}

#sub{padding: 190px 30px;}
.p_tit{font-size: 45px; font-family: 'GmarketSansMedium'; position: relative; text-align: center; margin-bottom:180px; text-transform: uppercase;}
.p_tit::before{content: ""; display: block; width: 1px; height:80px; background: #ddd; position: absolute; bottom:-110px; left:50%;}
.p_tit span{color: #0b8e3c;}
.p_tit02{text-transform:none;}


/*company*/
#company .info{height: 498px;}
#company .info::before{background: url(../img/com_info_bg.png) no-repeat center center;}
#company .info .icon{display: flex; justify-content: center; padding-top:120px;}
#company .info .icon li{text-align: center; color:#fff; width:100%; max-width: 400px; padding:0 30px; position: relative;}
#company .info .icon li::before{content: ""; width:1px; height: 145px; background: #ddd; position: absolute; right: 0; top:50%; transform: translateY(-50%);}
#company .info .icon li:last-child::before{content: none;}
#company .info .icon li h2{font-size:30px; margin:25px 0 15px; font-weight: 500;}
#company .info .icon li p{font-size:20px;}

#mission{background: #fff; border-radius: 50px 50px 0 0; position: relative; z-index: 1; margin-top:-118px; padding:150px 0 0; width:130%; margin-left:-15%;}
#mission .container{display: flex; flex-wrap: wrap;}
#mission .tit{width: 30%; font-size: 50px; font-family: 'GmarketSansMedium';position: relative; padding:15px 85px 0;}
#mission .tit .logo{position: absolute; left:0; top:-83px;}
#mission .text{width: 70%; font-size: 22px; line-height: 35px;}

#map{margin-top:220px;}
#map .wrap{width: 200%; margin-left:-50%; text-align: center;}
#map .wrap iframe{width: 100vw;}
#map .content{display: flex; position: relative; z-index: 1; padding:50px; background: #fff; margin-top:-76px;}
#map .address{padding:18px 40px 0; border-left:1px solid #e8e8e8; margin-left:50px;}
#map .address li{display: flex; margin-bottom:25px;}
#map .address li i{font-size: 20px; color: #183153; width:25px; text-align: center;}
#map .address li h2{font-size: 18px; font-weight: 500; width: 75px; margin:0 30px;}
#map .address li p{font-size:16px; color: #636363;}

/*history*/
#history .icon{text-align: center; font-size:50px; color: #ddd; margin-bottom:50px;}
#history .list li{display: flex; margin-bottom:100px;}
#history .list li .year{font-size:50px; font-family: 'GmarketSansMedium'; letter-spacing: -2px; margin-bottom:20px;border-top: 2px solid #000; padding-top: 10px;}
#history .list li .text{margin-left:100px; font-size:20px; line-height: 35px; padding-left:70px; position: relative;}
#history .list li .text .month{font-size:22px; width: 70px; position: absolute; left:0; color: #67a880;}
#history .list li .text a{color: #999; font-size:16px;}
#history .list li .text a:hover{color: #000;}

/*solution01*/
#solution01 section{padding:130px 0;}
#solution01 p{font-size:20px; line-height: 30px;}

#solution01 .info{display: flex; flex-wrap: wrap;align-items: center; padding-top: 50px;}
#solution01 .info .text{width: 50%;}
#solution01 .info .text i{font-size:60px; color: #ccc; display: block; margin-bottom:10px;}
#solution01 .info .text h2{font-size:40px; line-height: 55px; font-weight: 400;}
#solution01 .info .text h2 span{color: #797979;}
#solution01 .info .img{width: 50%; text-align: right;}

#solution01 .screen{display: flex; flex-wrap: wrap; align-items: center;}
#solution01 .screen::before{background: #f9f9f9;}
#solution01 .screen .img{width: 50%;}
#solution01 .screen .text{width: 50%; padding-left: 60px;}
#solution01 .screen .text h2{font-size:40px; line-height: 55px; font-weight: 500; margin-bottom:20px;}

#solution01 .example p{font-size:20px; margin-top:50px; text-align: center;}
#solution01 .video{margin-bottom:100px;}
#solution01 .video::before{background: url(../img/solution01_video_bg.png) no-repeat center center;}
#solution01 .video .text{font-size:22px; line-height: 35px; color: #fff; text-align: center;}
#solution01 .video .icon{display: flex; justify-content: center;}
#solution01 .video .icon li{width: 150px; height: 150px; background: #fff; border-radius: 50%; margin:0 30px 50px; display: flex; align-items: center; justify-content: center;}


/*solution02*/
#solution02 .app{display: flex; flex-wrap: wrap;}
#app_slider{width: 40%; text-align: center;}
#app_slider .swiper-container{position: relative; width: 276px;}
#app_slider .swiper-wrapper{width:100%;}
#app_slider .swiper-wrapper .swiper-slide{height:476px; float:left;}
#app_slider .swiper-pagination-bullet{width: 10px; height: 10px; border-radius: 30px; background: #fff; margin-right:5px; opacity: 1;}
#app_slider .swiper-pagination-bullet-active{background: #f00;}
#solution02 .content{width: 60%; font-size: 18px; line-height: 30px;}
#solution02 .content .big{display: block; margin-bottom:30px; font-size:25px; line-height: 35px; font-weight: 400; letter-spacing: -1px;}
#solution02 .content .text{border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding: 15px 0 15px 60px; position: relative; margin-bottom:30px;}
#solution02 .content .text b{position: absolute; left:0;}
#solution02 .content .install{margin-top:50px; border: 1px solid #ddd;}

/*solution03*/
#solution03 .scan::before{background: url(../img/solution03_scan_bg.png) no-repeat center center;}
#solution03 .scan{padding: 100px 0; margin-bottom:100px; text-align: center;}
#solution03 .scan .text{color: #fff; font-size:22px; line-height: 38px; margin-top: 50px;}
#solution03 .scan .text b{font-size:35px; display: block; margin-bottom:30px;}

#solution03 .service{text-align: center;}
#solution03 .service .tit{font-size:40px; letter-spacing: -1px;margin:50px 0 30px;}
#solution03 .service .list{margin: 0 auto ; max-width: 1100px;}
#solution03 .service .list li{font-size:20px; line-height: 30px; margin-bottom:15px; border:2px solid #ddd; border-radius: 30px; padding: 20px 20px 20px 50px; position: relative; text-align: left;}
#solution03 .service .list li i{position: absolute;left:20px; top:25px;}
#solution03 .service .text{margin-top:50px; font-size: 20px; color: #ccc; }

/*solution04*/
#solution04 .service{text-align: center;  font-size: 20px; line-height: 35px;}
#solution04 .service .tit{font-size:40px; letter-spacing: -1px;margin-bottom:50px;}
#solution04 .service .text{border:1px solid #ddd; padding: 40px 20px; margin-bottom:50px;}
#solution04 .service .text02{margin-top:70px;}




/*qa*/
#qa .info{padding:100px 0 150px; display: flex; justify-content: center;}
#qa .info::before{background:url(../img/qa_bg.png) no-repeat center center;}
#qa .info .icon i{font-size: 55px; color:#fff;}
#qa .info .text{color: #fff; font-size: 25px; line-height: 40px; font-weight: 500; padding-left:50px;}
#qa .form{background: #fff; margin-top:-80px; padding: 80px 50px; border-radius: 50px 50px 0;}
#qa table{width: 100%; border-top:2px solid #000;}
#qa table tr{border-bottom:1px solid #ddd;}
#qa table tr th{}
#qa table tr th, #qa table tr td{font-size:18px; padding:10px;}
#qa table tr td input, #qa table tr td textarea{width:100%; padding: 10px; min-height: 40px; border:1px solid #ddd;}
#qa table tr td .text{border:1px solid #ddd; padding: 10px; height: 150px; overflow-y: auto; font-size: 14px; line-height: 18px;}
#qa table tr td .check{width: 14px; height: 14px; display: inline-block;}
#qa .form .btn{text-align: right; margin-top:30px;}
#qa .form .btn input{font-size:20px; font-weight: 500; padding: 15px 50px; background: #333; color:#fff;}
#qa .form .btn .cancel{background: #b90000;}


/*footer*/
#footer{background: #000; padding: 65px 0 50px; font-size:16px;}
#footer .logo{position: absolute; top:0; left:30px;}
#footer .sns{text-align: right;}
#footer .sns li{font-size:25px; display: inline-block;margin-left:10px;}
#footer .sns li i{color:#fff;}
#footer address{line-height: 30px; color: #6f6f6f; text-align: right; margin:105px 0 35px;}
#footer .copy{border-top:1px solid #2d2d2d; padding-top:40px; color:#fff;}