@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
 @import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */
p, dt, dd, button, h1, h2, h3, h4, h5, th, td, div, input, button {font-family: 'Noto Sans KR', sans-serif; color:#FFF}

@media screen and (min-width:600px) {
h3 {font-family: 'Montserrat', sans-serif; color:#FFF; font-size:36px; margin-bottom:20px;}
#section0 .gnb {width:1020px; height:70px; top:20px; left:50%; margin-left:-510px;}
#section0 .gnb ul {float:right; margin-top:25px;}
#section0 .gnb li {float:left; margin-right:30px; font-family: 'Montserrat', sans-serif;}
#section0 .gnb h1 {margin:20px 30px; float:left;}

#section0 .mg h2 {position:absolute; top:50%; left:50%; margin-top:-110px; margin-left:-170px;}

#section1 .about_wrap {position:absolute; top:50%; left:50%; width:1020px; height:420px; margin-left:-510px; margin-top:-280px; text-align:center}
#section1 .descript {text-align:center; font-size:20px}
#section1 .size {position:relative; margin:50px auto 0 auto; width:470px;}
#section1 .size .size_img {}
#section1 .size .img_height {position:absolute; left:0px; top:0px;}
#section1 .size .img_width {position:absolute; left:60px; top:385px;}

#section2 {background:url(../images/feature_bg.jpg) no-repeat fixed center; background-size:cover;}
#section2 .contents_wrap {width:1020px; height:380px; position:absolute; top:50%; left:50%; margin-left:-510px; margin-top:-200px; text-align:center;}
#section2 .wrap {width:640px; float:right;}
#section2 .wrap h3 {margin-bottom:50px}
#section2 .wrap dl {width:160px; height:170px; margin-bottom:10px; float:left}
#section2 .wrap dt {margin-bottom:3px;}
#section2 .wrap dd {margin-bottom:15px; font-weight:bold}

#section3 h3 {position: absolute; top:17%; left:50%; width:400px; height:50px; text-align:center; margin-left:-200px; z-index:99}
#section3 div {height:100%; float:left; position:relative}
#section3 .battery {background:#3092b2; width:33.3333%;}
#section3 .famy {background:#36bc9b; width:33.3333%;}
#section3 .catchloc {background:#e8437b; width:33.3333%;}
#section3 dl {position:absolute; top:50%; left:50%; width:320px; height:320px; margin-left:-160px; margin-top:-160px; text-align:center}
#section3 .btn {margin-top:15px; font-size:16px; font-weight:bold}
#section3 .btn a {width:210px; height:38px; padding-top:12px; border:0; text-align:center; display:block; margin:10px auto 0 auto}
#section3 .btn a:link, #section3 .btn a:visited {color:#FFF;}
#section3 .btn a:hover {color:#FFF; text-decoration:underline;}
#section3 .btn .btn_famy {background:url(../images/btn_bg01.png) no-repeat; background-size:cover;}
#section3 .btn .btn_catchloc {background:url(../images/btn_bg02.png) no-repeat; background-size:cover;}
#section3 .btn span { display:block}

#section4 .spec_wrap {width:1020px; margin:70px auto 0 auto; text-align:center}
#section4 h3 {margin-bottom:30px;}
#section4 .spec_list {width:509px; height:210px; float:left; margin-left:-1px; margin-top:-1px; border:1px solid #558499;}
#section4 .spec_list .name {font-family: 'Montserrat', sans-serif; color:#FFF; font-size:24px; margin:5px 0}
#section4 .mt30 { margin-top:30px;}
#section4 .mt40 { margin-top:40px;}

#section5 h3 {width:1020px; position:absolute; left:50%; top:150px; margin-left:-510px; z-index:99; color:#444;}
#section5 .slide {position:relative}
#section5 #slide1 {background:url(../images/usecase_bg01.jpg) no-repeat center; background-size:cover;}
#section5 #slide1 .descript {margin-left:-510px; margin-top:-50px;}
#section5 #slide2 {background:url(../images/usecase_bg02.jpg) no-repeat center; background-size:cover;}
#section5 #slide2 .descript {margin-left:80px; margin-top:-50px;}
#section5 #slide3 {background:url(../images/usecase_bg03.jpg) no-repeat center; background-size:cover;}
#section5 #slide3 .descript {margin-left:-510px; margin-top:-50px;}
#section5 #slide4 {background:url(../images/usecase_bg04.jpg) no-repeat center; background-size:cover;}
#section5 #slide4 .descript {margin-left:-510px; margin-top:-50px;}
#section5 .slide .descript {position:absolute; width:360px; position:absolute; left:50%; top:50%; letter-spacing:-1px;}
#section5 h4 {font-size:36px; line-height:1.0em; color:#444;}
#section5 h4 span {font-size:30px; display:block;}
#section5 .slide p {color:#727272; font-size:24px; line-height:1.2em; margin-top:15px;}

#section6 h3 {width:1020px; margin:0 auto 30px auto;}
.enquire_form {width:600px; margin:0 auto; text-align:left;}
.enquire_form h3 {font-size:36px; margin-bottom:20px;}
.enquire_form h3 span {font-size:16px;}
.enquire_form table table {}
.enquire_form table td, th {font-size:16px; border-collapse:collapse; border:0px; padding:5px 0;}
.enquire_form table span { font-weight:bold}
.enquire_form table input {padding:10px 7px; border: none; width:440px;}
.enquire_form table textarea {padding:10px 7px; border: none; width:440px; height:100px;}

.enquire_form .catchloc_qa {margin:20px auto 0px auto; width:200px;}
.enquire_form .catchloc_qa a {color:#fff;}

.enquire_form .form_table {width:620px;}
.enquire_form .head {width:160px;}
.enquire_form .s_input {width:110px;}

.btn_contact {width:310px; height:70px; font-size:22px; font-weight:bold; padding-top:17px; border:0; text-align:center; display:block; margin:20px auto 0 auto; background:url(../images/btn_bg03.png) no-repeat; color:#FFF; background-size:310px 70px;}

.footer {width:100%;}
.footer .bar img {height:10px; margin-top:0px;}
.footer .bar {margin-top:0px; margin-bottom:40px;}
.footer_wrap {width:1020px; margin:0 auto; background:#FFF;}
.footer_wrap h2 {float:left; margin:0 60px;}
.footer_wrap ul {float:left; width:180px;}
.footer_wrap li {font-size:12px; margin-bottom:7px;}
.footer_wrap .copyright {text-align:center; padding-top:25px; font-size:14px; color:#999;}
.footer a:link {color:#555;text-decoration: none;}
.footer a:visited {color:#888;text-decoration: none;}
.footer a:active, .footer a:hover {color:#505050!important; text-decoration:underline;}

}
@media screen and (max-width:599px) {
h3 {font-family: 'Montserrat', sans-serif; color:#FFF; font-size:28px; margin-bottom:20px;}
#section0 .gnb {width:100%; height:80px; z-index:100; top:0px; left:0px; margin-left:0px;}
#section0 .gnb ul {float:none; margin:0 auto; width:360px;}
#section0 .gnb li {float:left; font-size:12px; margin:0 4px; font-family: 'Montserrat', sans-serif;}
#section0 .gnb h1 {margin:13px auto 7px auto; float:none; width:62px;}
#section0 .mg h2 img { width:250px; height:154px;}
#section0 .mg h2 {position:absolute; top:50%; left:50%; margin-top:-110px; margin-left:-125px;}

#section1 .about_wrap {position:absolute; top:50%; left:0px; width:100%; height:420px; margin-left:0px; margin-top:-200px; text-align:center}
#section1 h3 {margin-bottom:5px;}
#section1 .descript {text-align:center; font-size:14px; margin:0 20px;}
#section1 .size {position:relative; margin:20px auto 0 auto; width:340px;}
#section1 .size .size_img img {width:270px; height:270px;}
#section1 .size .size_img { float:right; margin-right:20px;}
#section1 .size .img_height {position:absolute; left:10px; top:0px;}
#section1 .size .img_height img {width:23px; height:270px;}
#section1 .size .img_width {position:absolute; left:50px; top:285px;}
#section1 .size .img_width img {width:270px; height:10px;}

#section2 {background:url(../images/feature_bg.jpg) no-repeat fixed left; background-size:cover;}
#section2 .contents_wrap {width:100%; height:380px; position:absolute; top:50%; left:0px; margin-left:0px; margin-top:-190px; text-align:center;}
#section2 .wrap {width:360px; float:none; margin:0 auto}
#section2 .wrap h3 {margin-bottom:30px}
#section2 .wrap dl {width:120px; height:120px; margin-bottom:7px; float:left}
#section2 .wrap dt {margin-bottom:3px;}
#section2 .wrap dt img { width:70px; height:70px;}
#section2 .wrap dd {margin-bottom:10px; font-size:14px; font-weight:bold; line-height:1.2em; text-shadow: 0px 1px 1px black;}

#section3 h3 {background:#3092b2; height:26%; text-align:center; vertical-align:bottom; z-index:99; margin-bottom:0px; position:relative}
#section3 h3 span { position:absolute; bottom:5px; left:50%; width:340px; margin-left:-180px;}
#section3 div {float:none; position:relative; clear:both}
#section3 .battery {background:#3092b2; height:19%;}
#section3 .famy {background:#36bc9b; height:28%;}
#section3 .catchloc {background:#e8437b; height:27%;}
#section3 dl {position: absolute; top:5px; left:50%; margin-left:-180px; text-align:left}
#section3 .battery dl {position: absolute; top:15px;}
#section3 dt { float:left; width:100px; height:100%; position:relative;}
#section3 dt img {width:100px; height:92px;}
#section3 dd { float:left; width:240px; font-size:13px; padding-left:10px; margin-top:10px;}
#section3 .btn {}
#section3 .btn span { display:inline}
#section3 .btn a {width:180px; height:30px; padding-top:11px; border:0; text-align:center; display:block; margin:5px auto 0 auto}
#section3 .btn a:link, #section3 .btn a:visited {color:#FFF;}
#section3 .btn a:hover {color:#FFF; text-decoration:underline;}
#section3 .btn .btn_famy {background:url(../images/btn_bg01.png) no-repeat; background-size:cover;}
#section3 .btn .btn_catchloc {background:url(../images/btn_bg02.png) no-repeat; background-size:cover;}

#section4 .spec_wrap {width:100%; margin:0 auto 0 auto; text-align:center}
#section4 h3 {margin-bottom:15px; margin-top:55px;}
#section4 .spec_list {width:340px; height:80px; float:none; margin:-1px auto 0 auto; border:1px solid #558499; position:relative; }
#section4 .spec_list .name {font-family: 'Montserrat', sans-serif; color:#FFF; font-size:20px; text-align:left; margin:5px 0; position:absolute; top:7px; left:60px;}
#section4 dt {width:60px; height:60px; position:absolute; top:5px; left:0px;}
#section4 dt img {width:35px; height:32px}
#section4 dd { position:absolute; top:36px; left:60px; width:280px; text-align:left; font-size:12px; line-height:1.3em;}
#section4 .mt30 { margin-top:20px;}
#section4 .mt40 { margin-top:20px;}

#section5 h3 {width:340px; position:absolute; left:20px; top:120px; margin-left:0px; z-index:99; color:#444;}
#section5 .slide {position:relative}
#section5 .slide .descript {position:absolute; width:250px; position:absolute; left: auto; top: auto; letter-spacing:-1px;}
#section5 h4 {font-size:30px; line-height:1.0em; width:250px;}
#section5 h4 span {font-size:24px; display:block;}
#section5 .slide p {font-size:18px; line-height:1.2em; margin-top:10px;}

#section5 #slide1 {background:url(../images/usecase_bg01.jpg) no-repeat -420px center; background-size:cover;}
#section5 #slide1 h4, #section5 #slide3 h4, #section5 #slide4 h4 {color:#444;}
#section5 #slide1 .descript {margin-left:0px; margin-top:0px; position:absolute; bottom:50px; left:130px; color:#727272; text-shadow: 1px 1px 0px white;}
#section5 #slide2 {background:url(../images/usecase_bg02.jpg) no-repeat -200px center; background-size:cover; color:#FFF;}
#section5 #slide2 .descript {margin-left:0px; margin-top:0px; position:absolute; bottom:40px; left:75px; color:#FFF; text-shadow: 0px 1px 1px black;}
#section5 #slide3 {background:url(../images/usecase_bg03.jpg) no-repeat center; background-size:cover;}
#section5 #slide3 .descript {margin-left:0px; margin-top:0px; position:absolute; bottom:70px; left:20px; text-shadow: 1px 1px 0px white;}
#section5 #slide3 .descript p, #section5 #slide4 .descript p, #section5 #slide1 .descript p {color:#666;}
#section5 #slide4 {background:url(../images/usecase_bg04.jpg) no-repeat center; background-size:cover;}
#section5 #slide4 .descript {margin-left:0px; margin-top:0px; position:absolute; bottom:50px; left:20px; text-shadow: 1px 1px 0px white;}

#section6 h3 {padding:85px 0 15px 0; margin-left:20px;}
.enquire_form { margin-left:20px; text-align:left;}
.enquire_form h3 {font-size:20px; margin-bottom:10px; position:absolute; left:20px;}
.enquire_form h3 span {font-size:11px;}
.enquire_form table table {}
.enquire_form table td, th {font-size:12px; border-collapse:collapse; border:0px; padding:5px 0; line-height:1.3em}
.enquire_form table span { font-weight:bold}
.enquire_form table input {padding:7px 5px; border: none; width:244px;}
.enquire_form table textarea {padding:7px 5px; border: none; width:244px; height:80px;}

.enquire_form .catchloc_qa {margin:20px auto 0px auto; width:200px;}
.enquire_form .catchloc_qa a {color:#fff;}

.enquire_form .form_table {width:340px;}
.enquire_form .head {width:80px;}
.enquire_form .s_input {width:70px;}

.btn_contact {width:240px; height:50px; font-size:20px; font-weight:bold; padding-top:15px; border:0; text-align:center; display:block; margin:5px auto 0 auto; background:url(../images/btn_bg03.png) no-repeat; color:#FFF; background-size:240px 50px;}

.footer {width:100%; padding-bottom:100px; position:absolute; top:50%; margin-top:-210px;}
.footer .bar img {height:10px; margin-top:-2px; width:100%;}
.footer .bar {margin-bottom:40px; line-height:1.5em;}
.footer_wrap {width:100%; margin:0 auto;}
.footer_wrap h2 {float:left; margin:0 0 40px 30px;}
.footer_wrap ul {float:left; width:320px; margin-left:30px; margin-bottom:10px;}
.footer_wrap li {font-size:12px; margin-bottom:7px;}
.footer_wrap .copyright {text-align:center; padding-top:25px; font-size:12px; color:#999;}

}

/* ������ */
.coupon_box {width:320px; padding:30px 20px; margin:20px auto; color:#FFF}
.coupon_box h1 {text-align: center}
.coupon_box .line {width:40px; border-top:1px solid #909090; margin:25px auto 20px auto;}
.coupon_box h2 {text-align:center; font-size:20px;}
.coupon_box fieldset {margin:30px 0}
.coupon_box fieldset input {padding:10px; color:#333; width:230px; height:30px; border:none; font-size:18px}
.coupon_box fieldset button {width:65px; height:50px; border:1px solid #fff; background:none; cursor:pointer}
.coupon_box h4 {font-size:18px;margin-bottom:10px;}
.coupon_box h5 {font-size:14px;margin-bottom:5px;}
.coupon_box ol {list-style: decimal; padding-left:18px}
.coupon_box li { margin-bottom:10px;}
.coupon {background:url(../images/coupon_bg.jpg) fixed center; background-size:cover}
.coupon_box dl { margin-top:15px;  }
.coupon_box dl dt {width:140px; float:left; font-size:16px;opacity: 0.6}
.coupon_box dl dd {font-size:16px; margin-bottom:7px;}
.coupon_box .gper_usemethod { }
.coupon_box .gper_usemethod li {border:1px solid #fff; border-radius:5px; float:left; text-align:center; font-size:14px; width:100px; padding:7px 0; margin-right:7px;position:relative}
.coupon_box .gper_usemethod .arrow {background: url(../images/couponmethod_arrow.png) no-repeat; background-size:6px 11px; width:6px; height:11px; position:absolute; top:13px; right:-6px}
.coupon_box .payment_history {border: 1px solid #909090; padding: 10px 10px 8px 10px; margin-top: 15px}
.coupon_box .payment_history dl { margin:0px; }
.coupon_box  .payment_history dt {width:140px; float:left; font-size:14px; }
.coupon_box  .payment_history dd {font-size:14px; margin-bottom:7px;}

/* ê²°ì œ 추가 시작 */
.coupon_box .infor_result {border-top:1px solid #909090; padding-top:20px;}
.coupon_box .infor_result h5 {font-size:30px; text-align:center}
.coupon_box .infor_result .discript {text-align:center}
.coupon_box .payment_confirm_w {position: absolute; bottom:-1px; left: 0px; margin-bottom: 0px; width: 100%; border: 1px solid #adadad; }
.coupon_box .payment_cancel {position: absolute; bottom:-1px; left: 0px; margin-bottom: 0px; width: 50%; border: 1px solid #adadad;   color: #b5b5b5}
.coupon_box .payment_confirm_s {position: absolute; bottom:-1px; right: 0px; margin-bottom: 0px; width: 50%; border: 1px solid #adadad; border-left: none;}

.coupon_box .payment_input {background: #fff; color: #333; padding: 5px 5px; width: 180px;}
.coupon_box table { margin-top: 15px;}
.coupon_box th {padding-right: 20px; font-size: 14px; padding-bottom: 15px; width: 140px }
.coupon_box td {font-size: 14px; padding-bottom: 15px; padding-top: 5px; font-weight: normal;}
.coupon_box td ul {margin-top: -10px; margin-left: 20px;}
.coupon_box td li {float:left; width: 150px;}
.option_choice {margin-bottom: 15px;}
.option_choice .on {border:1px solid #fff; color: #fff}
.option_choice button {width: 100%; height: 40px; padding: 5px 5px 5px 5px; border:none; color: #fff; cursor: pointer; background: auto; font-size: 16px;}
.option_choice .month01 {background: url(../images/btn_bg_1month.jpg) repeat-x;}
.option_choice .month03 {float: right; background: url(../images/btn_bg_3month.jpg) repeat-x;}
.option_choice button:hover {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}

.option_choice select {
    width: 100%;
    padding: 5px 5px 5px 10px;
    margin-bottom: 10px;
    font-size: 16px;
    height: 40px;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('../images/ico_arrow_down.png') no-repeat 97% 50% #ffffff;/* 화살표 아이콘 추가 */
    background-size: 15px;
}
.option_choice option {margin:5px 0}
.option_choice select::-ms-expand {
    display: none;
}

/* ê²°ì œ 추가 끝*/

.intro_box {width: 280px; padding: 20px; border: 1px solid #909090; margin-bottom: 10px; position: relative; background: url(../images/bg_introbox.png);}
.intro_box .descript {width: 210px;}
.intro_box .descript h2 {text-align: left; font-size: 24px; margin-bottom: 5px}
.intro_box .descript p {font-size: 14px; line-height: 1.5em}
.intro_box .page_go {position: absolute; right: 20px; bottom:20px; cursor: pointer}

#section0 {background:url(../images/main_bg.jpg) fixed center; background-size:cover;}
#section0 .gnb {background:url(../images/bg_gnb.png); position:fixed; z-index:100;}

#section0 .gnb li a:link, #section0 .gnb li a:visited {color:#FFF;}
#section0 .gnb li a:hover {color:#FFF; text-decoration:underline;}
#section0 .mg {background:url(../images/mg_bg.png); height:100%;}




/* footer */


.clear {clear:both}


.modal_dimmed_layer { position : fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(128, 128, 128, 0.5); display:none; }