@charset "utf-8";

* { padding: 0; margin: 0; box-sizing: border-box;}
ol,ul { list-style: none; }
a { text-decoration: none; }
img {vertical-align: middle;}
button {border: none; cursor: pointer;}
.cb:after { content:""; display:block; clear:both;}
* {-webkit-text-size-adjust:none;box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; font-weight: normal; letter-spacing: -0.6px; }


@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');



.wrap { position: relative; overflow: hidden; color: #232323; }
.inner { max-width: 1200px; margin: 0 auto; padding: 0 10px; }

.visual {overflow: hidden;  z-index: 2; max-height:654px; overflow:hidden;}
.visual .visual_bg { width: 100%; overflow: hidden; }
.visual .bg2 { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.visual .visual_bg img { max-width: 100%; height: auto; }

.visual .dot { position: absolute; left: 0; top: 0; width: 100%; height: 50vw; background: url(../images/dot.png)no-repeat center; background-size: 100% 100%; background-color: rgba(0,0,0,0.5); z-index: 1; }

header { overflow: hidden; position: relative; z-index: 10000;}
header nav { overflow: hidden; max-width: 1200px; margin: 20px auto; }
header nav h1 { float: left; margin-left: 50px; }
header nav h1 img:last-child { display: none; }
header nav ul { float: right; }
header nav ul li { float: left; }
header nav ul li a { display: inline-block; font-size: 19px; font-weight: bold; color: #fff; }
header nav ul li a.cer { margin-right: 45px; }
header nav ul li a.login { margin-right: 35px; }
.visual .slider_m { display: none; }
.visual .slider img.slick-current{animation: move 5s forwards; transition: all 2s; transform:scale(1.5);}
@keyframes move {
	100% {transform:scale(1); transition: all 8s; }
}
.visual .dot .maintx { width: 990px; margin: 150px auto; overflow: hidden; color: #fff; z-index: 1000; }
.visual .dot .maintx span { display: block; font-size: 38px; font-weight: 300; opacity: 0; animation: fade 1.5s forwards;  }
.visual .dot .maintx h2 { font-size: 46px; font-weight: 900; letter-spacing: -2px; opacity: 0; animation: fade1 1.5s .7s forwards; }
.visual .dot .maintx h2 br { display: none; }
.visual .dot .maintx p { margin-top: 30px; font-size: 20px; font-weight: 600; text-align: center; opacity: 0; animation: fade2 1.5s 1.2s forwards; } 
@keyframes fade {
	100% { opacity: 1; transition: all 1.5s; }
}
@keyframes fade1 {
	100% { opacity: 1; transition: all 1.5s; }
}
@keyframes fade2 {
	100% { opacity: 1; transition: all 1.5s; }
}


.sec1 { position: relative; height: 370px; background:url(../images/sec1_bg.jpg) center top no-repeat; background-size:cover; z-index: 10000;}
.sec1 .hp { position: absolute; left: -150px; top: 20px; }
.sec1 .hp.up { animation: up 1.2s forwards; } 
@keyframes up {
	100% { top: -60px; }
}
.sec1 .hp .hp_title { position: absolute; right: -2000px; top: 500px; width: auto; height: auto; opacity: 0; transition: all 1.4s; }
.sec1 .hp .hp_title.view { right: -608px; opacity: 1; transition: opacity 3s, right .8s; }

.sec1 .hp img:first-child { display: block; }
.sec1 .hp img:nth-of-type(2) { display: none; }

.sec1 ul { float: right; width: 815px; margin: 55px 270px 0 0; } 
.sec1 ul li { float: left; width:50%; color: #fff; text-align: center; }
.sec1 ul li:nth-of-type(1) { margin-bottom: 55px; }
.sec1 ul li:nth-of-type(2) { margin-bottom: 55px; }
.sec1 ul li span.hp_tit { font-size: 26px; font-weight: 300;}
.sec1 ul li p { font-size: 26px; font-weight: 600; }
.sec1 ul li p span { font-size: 40px; font-weight: bold; }


.sec2 { background: #fff; padding: 380px 0 505px 0; }
.sec2 .inner2 { display: none; }
.sec2 h2 { font-size: 44px; text-align: center; }
.sec2 h2 span.opt1 { color: #8951ff; }
.sec2 h2 span.under { display: inline-block; border-bottom: 3px solid #8951ff; padding-bottom: 5px; }
.sec2 ul { width: 100%; max-width: 1200px; margin: 200px auto 0; height: auto;}
.sec2 ul > li { position: relative; float: left; width: 33.33%; text-align: center; height: auto; vertical-align: middle; }
.sec2 ul > li > img { max-width: 100%; height: auto; }

.sec2 ul li .mouseover { display: none; position: absolute; width: 350px; height: auto; overflow: hidden; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.sec2 ul li .mouseover img { width: 100%; height: auto; }
.sec2 ul li .mouseover ol { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; border-radius: 13px; }
.sec2 ul li .mouseover ol img { position:absolute; left: 0; top: 0;width: 100%; }
.sec2 ul li .mouseover ol li { position: relative; float: left; width: 33.33%; height: 100%; cursor: pointer; }
.sec2 ul li .mouseover ol li a { display: block; width: 100%; height: 100%;}
.sec2 ul li .mouseover ol li.ico1 { background: url(../images/ico1.png)no-repeat center; }
.sec2 ul li .mouseover ol li.ico2 { background: url(../images/ico2.png)no-repeat center; }
.sec2 ul li .mouseover ol li.ico3 { background: url(../images/ico3.png)no-repeat center; }
.sec2 ul li .mouseover ol li.view { background-color: rgba(0,0,0,0.3); }
.sec2 ul li .mouseover img:nth-of-type(2) { display: none; }
.sec2 .btnbx { display: none;}



.sec3 { position: relative; height: 740px; background: url(../images/sec3_bg.jpg)no-repeat center; background-size: 100% 100%; }
.sec3 > .inner {overflow: hidden; padding-top: 80px;}
.bg_bx { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 4000; }
.sec3 .layer { display:none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 360px; height: 630px; background: #fff; z-index: 5000; color: #3232323; letter-spacing: -2.5px;  }
.sec3 .layer h2 { padding: 15px; font-size: 24px; font-weight: 400; border-bottom: 1px solid #c2c2c2; letter-spacing: -2.5px;}
.sec3 .layer h2 strong { font-weight: 600;}
.sec3 .layer h2 strong span { font-weight: 600;}
.sec3 .layer h2 span.close { display: inline-block; float: right; width: 15px; height: 15px; margin-top: 10px; background: url(../images/close.png)no-repeat center; background-size: 100% 100%; cursor: pointer; }
.sec3 .layer p { font-size: 15px; font-weight: 600; }
.sec3 .layer .layer_text { height: 100%; padding: 20px 25px; }
.sec3 .layer .layer_text .info h4 { font-size: 24px; font-weight: bold; margin: 25px 0 10px; letter-spacing: -2.5px; }
.sec3 .layer .layer_text .info ul li.top { clear: both; height: 35px; font-size: 15px; margin-bottom: 10px; }
.sec3 .layer .layer_text .info ul li label { float: left; width: 90px; line-height: 35px; font-size: 15px; font-weight: 600; }
.sec3 .layer .layer_text .info ul li p { float: right; width: 210px;font-size: 14px; font-weight: 600; }
.sec3 .layer .layer_text .info ul li p input { width: 100%; height: 35px; border: 1px solid #e3e3e3; }
.sec3 .layer .layer_text .info ul li p input#name {width: 125px; }
.sec3 .layer .layer_text .info ul li p input#no1 {width: 125px; }
.sec3 .layer .layer_text .info ul li p input#no2 {width: 30px; }
.sec3 .layer .layer_text .info ul li.chkbx label { display: block; float: none; margin-bottom: 3px; }
.sec3 .layer .layer_text .info ul li.chkbx .inputbx { position: relative; height: 80px; background: #f9f9f9; border-radius: 3px; padding: 10px 10px 0 10px;  border: 1px solid #d3d3d3; border-radius: 3px; }
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .chk_text { width: auto; float: left; margin-top: 16px; }
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .chk_text input[type="checkbox"] { display: none; }
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .chk_text input[type="checkbox"] + label { display: inline-block; width: 27px; height: 27px; border-radius: 2px; border: 2px solid #b2b2b2; background: #fff; vertical-align: middle;}
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .chk_text input[type="checkbox"]:checked + label { }
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .chk_text span { display: inline-block; font-size:14px; margin-left: 10px;  }

.sec3 .layer .layer_text .info ul li.chkbx .inputbx .chk_logo { width: auto; float:right; color: #555;}
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .chk_logo span.cap { display: block; margin: 0 auto; width: 32px; height: 32px; background: url(../images/logo_chk.png) no-repeat center; background-size: 100% 100%; }
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .chk_logo span.captit { display: inline-block; font-size:  10px; font-weight: 400px; line-height: 10px; margin-top: 5px; text-align: center; vertical-align: top; }
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .anchor { display: inline-block; position: absolute; right: 10px; bottom: 2px; text-align: right; }
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .anchor a {display: inline-block; font-size: 8px; color: #555; }
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .anchor a.anchor1 { display: inline-block;}
.sec3 .layer .layer_text .info ul li.chkbx .inputbx .anchor a.anchor1::after { content:'-';  font-size: 8px; margin-left: 3px;  }

.sec3 .layer .layer_text ul.notice { font-size: 13px;  margin: 15px 0; }
.sec3 .layer .layer_text ul.notice li { line-height: 22px; font-weight: 600; }

.sec3 .layer .layer_text a.start { display: inline-block; width: 300px; height: 75px; line-height: 75px; background: #7f2eff; color: #fff; font-size: 22px; font-weight: 600; text-align: center; border-radius: 7px; }
 

.sec3 ul.slide_tab {  margin-right: 60px; width: auto; overflow: hidden;}
.sec3 ul.slide_tab li.on {width: auto !important; float: none; margin-bottom: 20px; z-index: 1;}
.sec3 ul.slide_tab li.on:focus { outline: none;}
.sec3 ul.slide_tab li.on a { display: block; width: 80px; height: 80px; line-height: 80px; font-size: 20px; text-align: center; color: #fff;  }
.sec3 ul.slide_tab li.on a.current { background-color:#fff; border-radius: 100%; color: #6256e0; }
.sec3 ul.slide_tab li.on .slick_txt { display: none; position: absolute; left: 138px; top: 0; width: 690px; height: 560px; padding: 50px 0 0 55px; border-left: 1px dashed #fff; }
.sec3 ul.slide_tab li.on .slick_txt1 { display: block; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text { width: auto; height: 360px; color: #fff; }
.sec3 ul.slide_tab li.on .slick_txt button.go { width: 340px; height: 75px; background: none; border: 1px solid #fff; border-radius: 5px; font-size: 32px; font-weight:bold; color: #fff; }

.sec3 ul.slide_tab li.on .slick_txt .inner_text h3 { font-size: 48px; font-weight: bold;}
.sec3 ul.slide_tab li.on .slick_txt .inner_text p {font-size: 26px; font-weight: 600; margin: 25px 0 35px; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text ul { overflow: hidden; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text ul li { display: inline-block; font-weight: 600; margin: 25px 0 35px; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text ul { overflow: hidden; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text ul li { display: inline-block; padding: 0 10px; margin: 0 10px 10px 0; line-height: 26px; font-size: 16px; font-weight: 400; background: #6256e0; border-radius: 15px;  }
/* tab 클릭시  */
/* .sec3 ul.slide_tab li.slick-current a {background-color:#fff; border-radius: 100%; color: #f77c35;} */
.sec3 ul.slide_tab li.on a:focus { outline: none; }



.sec3 .mock_up { position: absolute; width: 640px; height: 688px; right: 300px; bottom:0; }
.sec3 .mock_up .mockbx { width: 100%; height: auto; }
.sec3 .mock_up .mockbx img { max-width: 100%; height: auto;}
.sec3 .mock_up .mockbx img:nth-of-type(2) { display: none; }
/* background: url(../images/mockup.png)no-repeat center; background-size: 100% 100%; */
.sec3 .slick-items { display: none; position: absolute; left: 316px; top: 15px; width: 262px; height: 560px;}
.sec3 .slick-items1 { display: block; }
.sec3 .mock_up button.pause { position: absolute;  left: 267px; top: 175px;width: 8px; height: 12px; background: url(../images/pause.png) no-repeat center; background-size: 100% 100%; }
.sec3 .mock_up button.pause.play { background: url(../images/play.png) no-repeat center; background-size: 100% 100%;   }

.sec4 { overflow: hidden; height: 490px; background: #e1eef6; color: #232323;}
.sec4 > .inner {padding: 60px 0 0 90px; }
.sec4 .left { position: relative; z-index: 10000; float: left; display: inline-block;}
.sec4 .left h3 { position: relative; top: 200px; opacity: 0; overflow: hidden; font-size: 42px; font-weight: 900; }
.sec4 .left p { position: relative; ; overflow: hidden; font-size: 24px; font-weight: 400; }
.sec4 .left p.pass1 { margin-top: 45px; top: 200px; opacity: 0; }
.sec4 .left p.pass2 { margin: 20px 0 50px 0; top: 200px; opacity: 0; }
.sec4 .left button.download { position: relative;  overflow: hidden; display: inline-block; width: 370px; height: 50px; padding-left: 20px; border: 1px solid #8951ff; font-size: 24px; font-weight: 400; color: #8951ff; background: none; text-align: left; top: 200px; opacity: 0; }
.sec4 .left button.download strong { font-weight: 900; }
.sec4 .left button.download span { display: inline-block; width: 26px; height: 21px; margin-left: 15px; background: url(../images/btn_go.png) no-repeat center; background-size: 100% 100%; vertical-align: middle; }

.sec4 .left button.download_m { display:none;}

.sec4 .right { position: relative; top: 200px; opacity: 0; overflow: hidden; float: right; width: auto; height: auto; }

.sec4 .right img { max-width: 100%; height: auto;}
.sec4 .right.up { top: 0; opacity: 1; transition: all 1.7s; }
.sec4 .left h3.up { top: 0; opacity: 1; transition: all 1.7s .5s; }
.sec4 .left p.pass1.up { top: 0; opacity: 1; transition: all 1.7s .8s; }
.sec4 .left p.pass2.up { top: 0; opacity: 1; transition: all 1.7s 1.1s; }
.sec4 .left button.up { top: 0; opacity: 1; transition: all 1.7s 1.3s; }


.sec5 { overflow: hidden; height: 150px; background: #f6f6f6; position: relative;  }

.bx-wrapper {

    box-sizing: border-box;
    max-width: 100% !important;


  }


  .bx-viewport {width: 100% !important;}


/* .sec5 > .inner {  margin-bottom: 37px; } */
.sec5 > .inner .supply { float: left; display: inline-block; height: 80px; line-height: 80px; font-size: 22px; font-weight: 22px; font-weight: bold; }
.sec5 > .inner .supply::after { position: relative; content: ''; display: inline-block; margin-left: 25px; top: 33px; width: 4px; height: 80px; background:#dcdcdc; }
.sec5 ul { width: 100%; overflow: hidden; }
.sec5 ul li { float: left;  width: auto;height: auto;vertical-align: middle; height: 119px; line-height: 119px; vertical-align: middle;  width:auto !important;margin: 0 20px; }
.sec5 ul li img { width: auto; height: auto; position: relative; top: 20px; display: inline-block;}
.supplybx_m { display: none; }


footer { overflow: hidden; padding: 20px 0; background: #5a5a5a; }
footer .inner {overflow: hidden; }
footer h1 { float: left; margin-right: 40px; }
footer h1 img:nth-of-type(2) { display: none;}
footer ul { overflow: hidden; width: 460px; margin-top: 5px; color: #b5b5b5; }
footer ul li { float: left; font-size: 14px; font-weight: 400;  }






@media all and ( max-width: 1919px ) { 

	
.visual .dot .maintx { width: 85%; margin: 6% auto; }
.sec1 { position:relative; width: 100%; height: 22vw; }
.sec1 .hp .hp_title { display: none; }
.sec1 .hp { width: 97%; height: auto; left: -165px; }
.sec1 .hp.up { top: 2%; } 
.sec1 .hp img { max-width: 100%; height: auto; }
.sec1 .hp img:first-child { display: none; }
.sec1 .hp img:nth-of-type(2) { display:block; }
.sec1 ul { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); width: 58%; margin: 0; }
.sec1 ul li p span { font-size: 33px;}

.sec2 { padding: 20% 0 35% 0;}

.sec4 .right { width: 48%; float: left; margin-left: 7%;}
.sec5 .inner { padding: 0 20px; }



}

@media all and (max-width:1900px){

	.sec3 .inner { padding-left: 5%; }
	.sec3 .mock_up { right: 3%;}
}

 



/*태블릿big*/
@media all and ( max-width: 1200px ) {

.visual .dot .maintx { margin: 5% auto; }
.visual .dot .maintx span { font-size: 32px; }
.visual .dot .maintx h2 { font-size: 40px;}
.visual .dot .maintx p { font-size: 15px; }

.sec1 ul li:nth-of-type(1) { margin-bottom: 15px; }
.sec1 ul li:nth-of-type(2) { margin-bottom: 15px; }
	
.sec1 ul li span.hp_tit{ font-size: 22px; }
.sec1 ul li p { font-size: 22px; }
.sec1 ul li p span { font-size: 29px;}


.sec2   { padding: 15% 0 30% 0;}
.sec2 > .inner { padding: 0 30px; }
.sec2 h2 { font-size: 40px; }
.sec2 ul{ margin: 120px auto 0;  width: 100%; text-align: center; }
.sec2 ul > li { width: 33.33%;  }
.sec2 ul > li.ct1 { float:left;}
.sec2 ul > li.ct2 { display: inline-block;}
.sec2 ul > li.ct3 { float: right; } 
.sec2 ul li .mouseover { width: 100%; }


.sec3  { height: 950px; background:url(../images/m_sec3_bg.jpg) center top no-repeat; background-size:cover;}
.sec3 .inner { width: 100%; padding: 0; padding-top: 60px; }
.sec3 ul.slide_tab { margin-right: 0; }
.sec3 ul.slide_tab li.on a { display: none;}
.sec3 ul.slide_tab li.on{ height:560px; }




.sec3 ul.slide_tab li.on .slick_txt { border-left: none; padding: 0; left: 50%; transform: translateX(-50%); text-align: center; height: auto; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text {  width: 100%; height: auto; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text button { width: 19.5px; height: 32px; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text button.slick-prev { background: url(../images/prev.png) no-repeat center; background-size: 100% 100%; }
.slick-prev { left: auto;}
.sec3 ul.slide_tab li.on .slick_txt .inner_text button.slick-next { background: url(../images/next.png) no-repeat center; background-size: 100% 100%;  }
.sec3 ul.slide_tab li.on .slick_txt .inner_text h3 { font-size: 40px; }
.sec3 ul.slide_tab li.on .slick_txt .innr_text h3 { font-size: 40px; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text p {font-size: 18px; margin: 20px 0 20px; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text ul li { font-size: 14px; background: none; margin: 0; }
.sec3 ul.slide_tab li.on .slick_txt button.go { display: none; }
.sec3 ul.slide_tab li.on .slick_txt .inner_text ul li::before { content: '#'; display: inline-block; margin-right: 1px; }

.sec3 .mock_up { width: 250px; height: 524px; bottom: 55px; right: auto; left: 50%; transform: translateX(-50%); }
.sec3 .mock_up .mockbx img:nth-of-type(1) { display: none; }
.sec3 .mock_up .mockbx img:nth-of-type(2) { display: block; }
/* mockup -> slick-theme.css */

.sec3 .mock_up button.pause { left: 50%; top: -21px; transform: translateX(-50%); margin-left: 65px; }

.sec4 { height: auto;}
.sec4 > .inner { padding: 80px 8% 70px; overflow: hidden; }
.sec4 .left { width: 46%; }
.sec4 .left h3 { margin-top: 30px;font-size: 32px; }
.sec4 .left p.pass2 br { display: none; }
.sec4 .left p.pass1 { margin-top: 35px; }
.sec4 .left p.pass2 { margin: 15px 0 25px 0; }
.sec4 .left p { font-size: 18px; color: #3d4041; font-weight: 900;}
.sec4 .left button.download { width: 225px; height: 50px; padding-left: 0; font-size: 14px; color: #fff; border-radius: 10px; background: #ff5f2e; padding: 0 15px; }
.sec4 .left button.download span { width: 13px; height: 10.5px; margin-left: 10px; background: url(../images/btn_go_m.png) no-repeat center;  background-size: 100% 100%; vertical-align: middle; }

.sec4 .right { margin-top: 60px; width: 46%; }

.sec5 { height: 135px; }
.sec5 ul li { line-height: 110px; }
.sec5 > .inner .supply::after { margin-left: 15px; }

}



@media all and ( max-width: 1024px ) { 


.visual .dot .maintx { margin: 3% auto; }
.visual .dot .maintx span { font-size: 28px; }
.visual .dot .maintx h2 { font-size: 36px; }
.visual .dot .maintx p { font-size: 14px; margin-top: 25px; }

.sec1 ul li span.hp_tit { font-size: 18px; }
.sec1 ul li p span { font-size: 25px;}
.sec1 ul li p { font-size: 18px;}

.sec2 > .inner { padding: 0 30px; }
.sec2 h2 { font-size : 36px; }
.sec2 ul > li { width: 32%;}
.sec2 ul > li.ct2 { display: inline-block; float: none;}

.sec2 ul li .mouseover { width: 100%; }







}




/*태블릿small*/
@media all and ( max-width: 960px ) { 


header nav { margin: 20px auto 0;}
header nav ul li a {font-size: 16px; }
.visual .dot .maintx span { font-size: 24px; }
.visual .dot .maintx h2 { font-size: 32px;}
.visual .dot .maintx  { width: 90%; }

.sec1 ul li span.hp_tit { font-size: 16px; }
.sec1 ul li p span { font-size: 21px;}
.sec1 ul li p { font-size: 16px; }

.sec1 .hp {left: -140px; top: 0; }
.sec1 .hp.up { animation: up 1.2s forwards; } 
@keyframes up {
	100% { top: -20px; }
	
}


.sec2 ul li .mouseover ol li { background-size: 85% !important; }



.sec5  { height: 145px; }
.sec5 ul li { height: 105px;}

 


}




/*모바일*/
@media all and ( max-width: 767px ) { 


	header nav { padding: 0 12px;}
	header nav h1 img:last-child { display: block; width: 100%; height: auto; }
	header nav ul li a.cer { font-size: 15px; margin-right: 25px; }
	header nav h1 { width: 93px; height: 44px; margin-left: 0;}
	header nav h1 img:first-child { display: none; }
	.visual .slider_p { display: none;} 
	.visual .slider_m { display: block; }
	header nav ul li a.login { margin-right: 0;}
.visual .dot .maintx p {  margin-top: 13%; }

	.visual .dot { height:800px;}
	.visual .dot .maintx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0 auto;}
	.visual .dot .maintx span { display: block; margin-top: 200px; font-size: 20px; text-align: center; }
	.visual .dot .maintx h2 { margin-top: 20px; font-size: 28px; font-weight: bold; text-align: center; }
	.visual .dot .maintx p { width: 100%; font-size: 13px; font-weight: 600; }
	.visual .dot .maintx h2 br { display: block; }
	
	.sec1 {height: auto; padding: 25px 0 125px; background:inherit; background-color:#8951ff;}
	.sec1 ul {position: static; width: 100%; float: none; text-align: center; right: 0; top: 0; transform: translateY(0); }
	.sec1 ul li { float: none; width: auto; margin-bottom: 25px; }
	
	.sec1 .hp {  width: 392px; height: 246.5px; background: url(../images/hp_m.png)no-repeat center; background-size: 100% 100%; left: -90px; top: auto; bottom: -170px; z-index: 5000; }
	.sec1 .hp.up { top: auto;  animation: up 1.1s forwards; } 
	@keyframes up {
		100% { bottom: -110px; top: auto; }
	}
	.sec1 .hp img:nth-of-type(2) { display: none; }
	.sec1 ul li span.hp_tit { font-size: 14px; }
	.sec1 ul li p span { font-size: 24px; }
	.sec1 ul li p { margin-top: 6px; font-size: 24px; }
	.sec1 .hp .hp_title { display: block; width:318px; height: 154px; background: url(../images/hp_tit_m.png)no-repeat center; background-size: 100% 100%; top: 0; right: 0; z-index: 1000;  }
	.sec1 .hp .hp_title.view { right: -38px; top: 145px; }
	.hpbx { width: 100%; height: 210px; }


	.sec2 { padding: 15% 0 0 0;}
	.sec2 .inner1 { display: none; }
	.sec2 .inner2 { display: block; }
	.sec2 h2 {font-size: 22px; padding: 0 35px;}
	.sec2 ul { margin: 100px auto;}
	.sec2 ul > li { float: none !important; width: 40%; margin: 60px auto; }
	.sec2 ul li .mouseover { width: 140%; }

	.sec3 .mock_up { bottom: 50px; }
	.sec3 { height: 850px;}
	.sec3 .inner { padding-top: 60px; }
	
	.sec3 ul.slide_tab li.on .slick_txt .inner_text h3 { font-size: 24px; }f
	.sec3 ul.slide_tab li.on .slick_txt .inner_text p { font-size: 13px; margin: 10px 0; }
	.sec3 ul.slide_tab li.on .slick_txt .inner_text ul { width: 250px; margin: 0 auto; }
	.sec3 ul.slide_tab li.on .slick_txt .inner_text ul.inner_ul1 {width: 170px; }
	.sec3 ul.slide_tab li.on .slick_txt .inner_text ul.inner_ul2 { width: 230px; }
	.sec3 ul.slide_tab li.on .slick_txt .inner_text ul.inner_ul3 { width: 240px }
	.sec3 ul.slide_tab li.on .slick_txt .inner_text ul.inner_ul4 { width: 230px }
	.sec3 ul.slide_tab li.on .slick_txt .inner_text ul.inner_ul5 { width: 200px}
	.sec3 ul.slide_tab li.on .slick_txt .inner_text ul.inner_ul6 { width: 165px}

	.sec3 ul.slide_tab li.on .slick_txt .inner_text ul br { display: none;}
	.sec3 ul.slide_tab li.on .slick_txt .inner_text ul li {  text-align: left; float: left; font-size: 10px; color: #441bab; line-height: 16px; padding:0 5px; }
	
	
	.sec4 .left { width: 100%; text-align: center;}
	.sec4 .right { display: none;}
	.sec4 .left h3 { font-size: 29px; margin-top: 0; }
	.sec4 .left button.download { display: none; width: 200px; height: 55px; padding: 0; text-align: center; font-size: 13px;}
	.sec4 .left button.download span { margin-left: 5px; }
	.sec4 .left button.download_m { display: block; width: 200px; height: 45px; padding: 0; margin-left: 5px; text-align: center; font-size: 13px; color: #fff; background: #8951ff;border-radius: 10px; margin: 0 auto;}
	.sec4 .left button.download_m span { display: inline-block; width: 13px; height: 10.5px; margin-left: 10px; background: url(../images/btn_go_m.png) no-repeat center; background-size: 100% 100%; vertical-align: middle; }

	
	
	.sec4 { height: 380px; background: url(../images/login_bg.png) #e1eef6 no-repeat center; background-size: 100% 100%; }
	.sec4 > .inner { padding: 60px 10% 50px }
	

	
	.sec5 { width: 100%; height: auto; overflow: hidden; background: #fff; }
	.sec5 > .inner {overflow: hidden; width: 100%; padding: 40px 12%; }
	.sec5 > .inner .supplybx { display: none; }
	.supplybx_m { width: 100%; display: block; margin: 40px 0 35px; }
	.supplybx_m h2 { font-size: 29px; font-weight: bold; text-align: center; }
	.supplybx_m hr { width: 58px; height: 3px; border: none; background: #e4e4e4; margin: 10px auto 25px; }
	.supplybx_m > ol { overflow: hidden; width: 100%; margin: 0 auto; padding: 0 12%;}
	.supplybx_m ol li { position: relative; float: left; height: auto; margin: 5px 3% 30px; text-align: center; }

	.supplybx_m ol li.logo1 { float: left; }
	.supplybx_m ol li.logo2 { float: right; width: 50px; right: 30px; }
	.supplybx_m ol li.logo3 { clear: both; } 
	.supplybx_m ol li.logo4 { float: right; width:105px; top: 15px; }
	.supplybx_m ol li.logo5 { float:left; width:105px; clear: both; }
	.supplybx_m ol li.logo6 { float:right; width: 105px; height: 70px; margin-bottom: 0; }
	.supplybx_m ol li.logo7 { width:105px; clear: both; top: 15px;  }
	.supplybx_m ol li.logo8 { float: right; width:105px; }
	.supplybx_m ol li.logo9 { float: left; clear: both;}
	.supplybx_m ol li.logo10 { float: right; width:105px;  top: 10px; }

	.supplybx_m ol li img { width: 100%; height: auto; }


	.bx-wrapper { display: none !important; max-width: 100% !important;}
	 
	footer { overflow: hidden; text-align: center;}
	footer h1 { float: none; width: 95px; height: 47px; margin: 0 auto; margin-bottom: 20px; }
	footer h1 img { width: 100%; height:auto; }
	footer h1 img:nth-of-type(1) { display: none; }
	footer h1 img:nth-of-type(2) { display: block; }
	footer ul { float: none; width: auto; display: inline-block; margin: 0 auto; }
	footer ul li { font-size: 13px;font-weight: 300;}
	
	footer ul li:nth-of-type(2)::after { display: none; }
	footer ul li span { color: #fff; font-weight: 600;}
	
	

	
	
	
	}
	

/*모바일*/
@media all and ( max-width: 320px ) { 
	.sec1 .hp .hp_title.view { right: -19px; top: 141px; }
	.sec2 ul > li { float: none !important; width: 65%; margin: 45px auto; }
	.sec3 ul.slide_tab li.on .slick_txt .inner_text ul { width: 55%; margin: 0 auto; }
	
	.sec4 .left p { font-size: 16px; }
	.sec4 .left p.pass1 { margin-top: 40px; }
	.sec4 .left p.pass2 { margin: 15px 0 30px 0;}
	
	.sec5 > .inner {overflow: hidden; width: 100%; padding: 40px 5%; }
	
	.sec3 ul.slide_tab li.on .slick_txt .inner_text h3 { font-size: 20px; }
	.sec3 ul.slide_tab li.on .slick_txt .inner_text p {font-size: 14px; margin: 15px 0 15px; }


	.sec3 .inner > button { top: 16% !important; }
	.sec3 .inner > button.slick-next { right: 3% !important; }
	.sec3 .inner > button.slick-prev { left:  3% !important; }

	
	.supplybx_m > ol { padding: 0 5%;}

	
	}

/*20190926*/
@media all and (max-width:1200px){
	.sec3 .inner > button { width: 19.5px; height: 32px; top:20%; -webkit-transform:translate(0,0); -ms-transform:translate(0,0); -moz-transform:translate(0,0); -o-transform:translate(0,0); transform:translate(0,0); z-index:99;}
	.sec3 .inner > button.slick-prev { background: url(../images/prev.png) no-repeat center; background-size: 100% 100%; left:10%;}
	.sec3 .inner > button.slick-next { background: url(../images/next.png) no-repeat center; background-size: 100% 100%;  right:10%;}
}

/*20191011 추가 css*/
.slick-prev:after, .slick-next:after{display:none;}

@media all and (max-width:1200px){

	.sec3 iframe{height:inherit;}
}