@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
html,body {margin:0; padding:0; font-weight:normal; list-style:none; line-height:1; color:#555; text-decoration:none; letter-spacing:-0.04em; box-sizing:border-box; font-size:62.5%;}

section,article,header,footer,nav,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,img,a,form,input,select,option,fieldset,textarea,button,label,figure,video {
	margin:0;
	padding:0;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	background-color:transparent;
	border:0;
	list-style:none;
	line-height:1;
	text-decoration:none;
	font-family:'Noto Sans KR','맑은 고딕',돋움,'Apple SD Gothic Neo',sans-serif;
	font-size:1.4rem;
	font-weight:500;
	color:#555;
	letter-spacing:-0.04em;
	box-sizing:border-box;
	word-break: keep-all;
}


html, body,#wrapper {
	width:100%;max-width:800px;
	min-width:320px !important;
	margin:0 auto;
}

table {width:100%; border-spacing:0; border-collapse:collapse;}

/* 폼초기화 */
select,button,input[type=text],input[type=submit],textarea	{
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	/* border-radius:0; */
}

select	{	box-sizing:border-box;}
/*크롬사라피*/
@media screen and (-webkit-min-device-pixel-ratio:0){
	select	{	padding-right:22px !important;	background:url(/images/bg_select.svg) no-repeat right center; background-size:contain;}
}
/*파이어폭스*/
@-moz-document url-prefix(){
	select	{	padding-right:22px !important;	background:url(/images/bg_select.svg) no-repeat right center; background-size:contain;}
}


:root {
 --main-color: #559c44;
}


.bold{font-weight: bold;}
.green{color: var(--main-color);}
.red{color: red;}
.center {width:94%; margin:0 auto; padding: 60px 0; }
.clear::after	{content:""; display:block; clear:both;}
#wrapper.on {position: fixed; left:0; top:0; width:100%; height:100%; overflow: hidden;}

.hidden {position:absolute; left:-100%; top:0%; overflow:hidden; width:0; height:0; font-size:0; text-indent:-9999%; line-height:0;}


/*========= input ===========*/
.unit {position: absolute; right:10px; top:50%; transform:translateY(-50%);}
.ip_comm	{display:block; width:100%; height:54px; padding:0 15px; border: 1px solid #ddd; background-color: #fff; box-sizing:border-box; outline:none; border-radius: 6px;}
.ip_comm.b0{border-radius: 6px 6px 0 0;}
.ip_comm::placeholder{font-size: 1.35rem; color: #ccc; }
.ip_comm:focus	{background-color: #f5f5f5;}
.ip_comm.tel	{float:left; width: 33.33%;}
/* .ip_comm.tel+.bar	{float:left; width:5%; text-align:center; line-height:48px; } */
.set_tel	{overflow:hidden;}
select.ip_comm	{padding-right:0;}
textarea.ip_comm	{height:150px; padding:15px; line-height:1.5;}
.btn_sm	{display:block; padding: 0 20px; width: 100%; height:54px; margin:0 auto; background-color: var(--main-color); font-weight: 600; color: #fff; border-radius: 6px; text-align: center;}

/*ip_chk*/
.ip_chk{position: absolute; left: -999%; top: 0; width: 0; height: 0; border: 0;}
.ip_chk + label{display: block; float: left; margin-left: 1%; margin-right: 0; width: 49%; height: 54px; font-size: 1.4rem; line-height:  54px; background-color: #f5f5f5; color: #888; font-weight: 500; text-align: center; border-radius: 6px; cursor: pointer; box-sizing: border-box;}
.ip_chk:checked + label{background-color: var(--main-color); color: #fff;}


/*ip_wrap*/
.ip_wrap{position: relative; margin-bottom: 20px;}
.ip_wrap label{display: block; margin-bottom: 10px;}
.ip_wrap .title{margin-bottom: 10px; color: #222;}
.ip_wrap .ip_comm{position: relative; line-height: 54px;}
.ip_wrap:after{clear: both; content: ''; display: block;}


/*sms_wrap btn css*/
.sms_wrap{display: flex; justify-content: space-between; align-items: center;}
.sms_wrap .btn_sms{margin-left: 4px; padding: 20px; width: 120px; height: 54px; color: #666; background: #f5f5f5; border-radius: 6px;}
.sms_wrap .btn_sms.sty1{background: var(--main-color); color: #fff;}
.sms_wrap .btn_sms.sty2{background: #444; color: #fff;}
.sms_wrap .my_btn{font-size: 30px; background-color: skyblue; color: white; border: none; border-radius: 20px;}

/*set agree*/
.set_agree{margin-bottom: 10px; display: flex; justify-content: flex-start; align-items: center;}
.set_agree label{margin: 0 4px; color: #888;}
.set_agree a{color: #888;}


.btn_nav {display:flex; align-items: center ;justify-content:center; width:22px; position: absolute; right: 12px; top: 60px; cursor: pointer;}
.on .btn_nav {z-index: 101;}
.btn_hbg {position: relative; display:flex; flex-direction: column; justify-content: space-between; width:100%; height:15px;}
.btn_hbg div,
.btn_hbg:before,
.btn_hbg:after {content:""; position:relative; display:block; width:100%; height:1px; background-color:#444; transition:all 0.3s}
.on .btn_hbg div {background-color:transparent;}
.on .btn_hbg:before,
.on .btn_hbg:after {position: relative; transform-origin: center;}
.on .btn_hbg:before {top:50%; transform:rotate(45deg);}
.on .btn_hbg:after {top:-50%; transform:rotate(-45deg);}


#wrapper {overflow: hidden; width:100%; min-width:1200px; }



/*========= header ===========*/
#header {position: relative; padding: 25px 0 0;}
#header .center {padding: 0; position: relative; }
#header h1	{}
#header h1 a{}
#header h1 a img{height: 70px;}

#header .search{position: relative; width: 100%; margin-left: 0; margin-top: 20px; padding: 0 10px; overflow: hidden; background: #f2f2f2; border-radius: 50px;}
#header .search input{width: 92%; padding-left: 12px; height: 52px; background: #f2f2f2;}
#header .search a .fa{color: #888;}

.register{position: absolute; top: 56px; right: 46px; }
.register a{}
.register a img{height: 22px;}

#nav {}
#nav .nav_list {text-align: center;}
#nav .nav_list>li {position: relative; display: inline-block; margin: 10px 8px; }
#nav .nav_list>li .dep1	{display:block; padding:10px 0; font-size:15px; font-weight:600; color:#222; transition: all 0.5 linear;}
#nav .nav_list>li:hover .dep1	{color: var(--main-color);}
#nav .nav_list>li .dep1::after	{content:""; position: absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:2px; background-color: var(--main-color); display: block; transition:all 0.5s;}
#nav .nav_list>li:hover .dep1::after	{width:100%;}

.on #sitemap{left: 0;}
#sitemap {position: absolute; height: 100vh; top: 0; left:-100%; width: 80%; background: var(--main-color); z-index: 99; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); transition: all 300ms linear;}
#sitemap .center {}
#sitemap .nav_list>li {}
#sitemap .nav_list>li:last-child {border-right: 0;}
#sitemap .nav_list>li .dep1 {display: block; margin-left: 10px; margin-bottom: 34px; font-size: 15px; font-weight: 500; color: #fff; transition: all 200ms linear;}
#sitemap .nav_list>li .dep1:hover{font-weight: 600;}
#sitemap .nav_list li .dep_wrap{display: flex; justify-content: flex-start; align-items: center;}
#sitemap .nav_list li .btn_a{display: flex; justify-content: center; align-items: center; width: 76px; height: 32px; background: #fff; border-radius: 6px; color: var(--main-color); font-weight: 600; font-size: 1.38rem;}
#sitemap .nav_list li .dep_wrap a:last-child{margin-left: 5px;}


/*========= main ===========*/

#visual{}
#visual .center{padding: 0; }
#visual .vis{position: relative; border-radius: 20px; height: 200px; overflow: hidden;}
#visual .vis .vis1{background: url(/images/vis01.jpg) 50% no-repeat; background-size: cover;}
#visual .vis .vis2{background: url(/images/vis02.jpg) 50% no-repeat; background-size: cover;}
#visual .vis .p1{position: absolute; left: 20px; bottom: 20px; font-family: 'Kaushan Script', 'cursive'; line-height: 1.3; z-index: 9; color: #ffffff; font-size: 32px;}

.vis .swiper-pagination{display: flex; justify-content: center; align-items: center; left: auto; right: 20px; bottom: 20px; width: 60px; height: 32px; background: rgba(255, 255, 255, 0.1); border-radius: 50px;}
.vis .swiper-pagination .swiper-pagination-current{margin: 0 2px; color: #fff; font-weight: bold;}
.vis .swiper-pagination .swiper-pagination-total{color: #888;}


/*main1*/
#main1 .center{padding: 20px 0 60px;}
#main1 .tit{margin: 25px 0; text-align: center;}
#main1 .tit h2{margin-bottom: 12px; font-size: 2.3rem; color: #222; font-weight: 600; line-height: 1.4em;}
#main1 .tit p{line-height: 1.3em;}
#main1 .service{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#main1 .service li{position: relative; margin: 1.5%; padding: 16px; width: 47%; height: 160px; border-radius: 10px; }
#main1 .service li:nth-child(1){background-color: #0078d4; background-image: url(/images/gp_client.jpg); background-repeat: no-repeat; background-size: 50%; background-position: right 16px;}
#main1 .service li:nth-child(2){background-color: #f2402e; background-image: url(/images/remote_all.jpg); background-repeat: no-repeat; background-size: 50%; background-position: right 16px;}
#main1 .service li:nth-child(3){ background-color: #3ddb84; background-image: url(/images/main1_02.png); background-repeat: no-repeat; background-size: 30%; background-position: right 16px;}
#main1 .service li:nth-child(4){background-color: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); background-image: url(/images/main1_03.png); background-repeat: no-repeat; background-size: 30%; background-position: right 16px;}
#main1 .service li a{display: block; height: inherit; }
#main1 .service li h3{position: absolute; bottom: 16px; left: 16px; font-size: 1.5rem; line-height: 1.5em; color: #fff;}
#main1 .service li:nth-child(4) h3{color: #222;}

#main1 .box{margin: 15px 0; display: flex; padding: 20px; background: #f2f2f2; border-radius: 10px; }
#main1 .box>span{margin-right: 8px;}
#main1 .box p{line-height: 1.3em;}
#main1 .box p>span{font-weight: 600;}


#main2{background: #f4f4f4;}
#main2 .board{}
#main2 .board .b_tit{padding-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
#main2 .board .b_tit h2{font-size: 2rem; color: #222; font-weight: 600;}
#main2 .board .b_tit a{color: var(--main-color); font-weight: bold;}

#main2 ul{border-bottom: 1px solid #ddd;}
#main2 ul li{margin-top: 0; padding: 12px 0; border-top: 1px solid #ddd;}
#main2 ul li a{display: flex; justify-content: space-between; align-items: flex-start; word-break: keep-all; font-weight: 500; line-height: 1.4em;}
#main2 ul li a span{padding-top: 2px; width: 70px; text-align: right; padding-left: 10px; color: #aaa; font-family: 'Lato', 'sans-serif';}

#main3{margin: 60px 0; }
#main3 .center{padding: 24px 20px;  display: flex; justify-content: space-between; align-items: center; background: var(--main-color); border-radius: 10px;}
#main3 .center h3{margin-bottom: 8px; font-size: 1.8rem; color: #fff; font-weight: 600;}
#main3 .center p{color: #fff; font-size: 1.3rem; font-weight: 300; line-height: 1.3;}

#main3 .center a{display: flex; justify-content: space-between; align-items: center; padding: 15px 12px; width: 84px; height: 24px; background: #fff; border-radius: 50px;}
#main3 .center a p{color: var(--main-color); font-weight: 500;}
#main3 .center a img{margin: 2px 0 0 4px; width: 22%;}


/*========= footer ===========*/
#footer {background: #333; padding-bottom: 60px;}
#footer .center .ft_top{margin-bottom: 20px; text-align: center;}
#footer .center .ft_top h5{font-size: 1.5rem; color: #aaa;}
#footer .center .ft_top h2{margin: 12px 0; font-size: 2.6rem; color: #ccc; font-weight: bold; }
#footer .center .ft_top p{color: var(--main-color);}
#footer .center .info{margin-top: 30px; text-align: center;}
#footer .center .info li{display: inline-block; margin-right: 16px; color: #ddd; line-height: 1.6em; font-weight: 300; }
#footer .copyright{text-align: center; margin-top: 20px; font-size: 13px; color: #888; }
#footer .copyright a{font-size: inherit; color: inherit; }



#quick{position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; background: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);}
#quick ul{margin: -2.5%; padding: 12px; display: flex; justify-content: space-between; align-items: center;}
#quick ul li{margin: 2.5%; width: 22%;}
#quick ul li a{display: flex; justify-content: center; align-items: center; flex-direction: column;}
#quick ul li a figure{width: 55%;}
#quick ul li a figure img{width: 100%;}
#quick ul li a p{margin-top: 6px; font-size: 1.3rem; color: #666;}

/*========= sub ===========*/

#sub_visual{position: relative; height: 120px; background: url(/images/sub_vis08.jpg) 50% no-repeat; border-radius: 12px; background-size: cover;}
#sub_visual.sub_visual08{background: url(/images/sub_vis08.jpg) 50% no-repeat; background-size: cover;}


#sub_menu{margin-top: 50px; position: absolute; left: 0; }
.page_title{margin: 50px auto 0; padding: 0; text-align: center;}
.page_title h3{font-size: 2.2rem; color: #222; font-weight: bold;}

.sub.center{padding: 40px 0; }

/*box*/
.box{padding: 20px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px; }



/*sub0201 */
.set_tit {font-size:1.8rem; font-weight: bold; color: var(--main-color); margin-bottom: 16px; }
.set_step ul {display:flex; justify-content: flex-start; align-items: flex-start; flex-wrap:wrap;; }
.set_step ul li {width:100%; margin-bottom:20px; }
.set_step ul li img {width:100%; border-radius:10px; border:2px solid #ddd;}
.set_step ul li .txt .num{font-size:1.3rem; color:#fff; background:var(--main-color) ; padding:8px 16px; border-radius:50px; font-family: 'Lato', sans-serif; display:inline-block; font-weight:700; margin-bottom:5px;  }
.set_step ul li .txt {margin-bottom:12px;   }
.set_step ul li .txt h3{font-size:1.45rem; color:#191919; line-height:1.4; word-break: keep-all;  }
.set_step ul li h5{font-size:15px; color:#888; font-weight:500; padding-top:5px;  }

.set_tit2 {color:#f3a200; }
.set_step2 ul li {width:280px; }
.set_step2 ul li .txt h3 {font-size:15px;  }
.set_step2 ul li .txt .num {background:#ffc248; }

.set_step_box{background:#f4f4f4; padding:30px; margin-bottom:80px; }
.set_step_box ul li  {margin-bottom:8px; }
.set_step_box ul li p {color:#333; padding-left:16px; position:relative; font-weight:500;  line-height:1.4;  }
.set_step_box ul li p:after{position:absolute; content:""; display:block; width:4px; height:4px; background:#333; left:0; top:10px; border-radius:10px; }
.set_step_box ul li p span {color:#777; padding-left:10px; }

/*sub0401 0401*/



/*sub0501 0501*/
.security_wrap{display: flex; justify-content: flex-start; align-items: center;}
.security_wrap.ip_wrap label{margin-left: 4px; margin-bottom: 2px;}
.sub0501 .box{margin-bottom: 20px; padding: 20px; background: #f5f5f5;}
.sub0501 .box h5{margin-bottom: 10px; font-size: 1.45rem; font-weight: 600; color: #222;}
.sub0501 .box ul{}
.sub0501 .box ul li{margin-bottom: 12px; line-height: 1.3em; font-size: 1.35rem;}

/*0601 sub0601 보안기기*/
.sub0601 .box p{margin-bottom: 14px; line-height: 1.2em;}
.sub0601 .box p:last-child{margin-bottom: 0;}


/*sub0701*/
.sub0701 section{margin-bottom: 40px;}
.sub0701 section:last-child{margin-bottom: 0;}
.sub0701 section h3{margin-bottom: 8px; line-height: 1.3em; font-size: 1.6rem; font-weight: bold; color: #222;}
.sub0701 section p{line-height: 1.3em;}
.sub0701 section ul li span{margin-right: 4px; display: inline-block; width: 24px; height: 24px; background: var(--main-color); color: #fff; font-size: 1.25rem; font-weight: 600; text-align: center; line-height: 24px; border-radius: 2px; }
.sub0701 section ul li .box_a{margin: 8px 0 20px;}


/*register 0801*/
.sub0801{}
.regis{}
.regis .game_info{padding: 20px; background: #f5f5f5; border-radius: 0 0 10px 10px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd;}
.regis .game_info li{margin-bottom: 20px;}
.regis .game_info li h5{margin-bottom: 8px; font-size: 1.45rem; font-weight: 600; color: #0078d4;}
.regis .game_info li:nth-child(2){margin-bottom: 0px;}
.regis .game_info li:nth-child(2) h5{color: #f2402e;}
.regis .game_info li dl{margin: 4px 0; display: flex; justify-content: flex-start; align-items: center;}
.regis .game_info li dl dt{padding: 10px; color: #444; font-weight: 500; background: #e3e3e3; border-radius: 4px; font-size: 1.3rem;}
.regis .game_info li dl dd{margin-left: 10px; font-size: 1.3rem;}


/*sub0901*/
.sub0901 .box p{line-height: 2em;}

/*sub1001 충전신청 1001*/
.ip_wrap .ab_p1{position: absolute; right: 12px; top: 65%; transform: translateY(-50%); color: red;}
.sub1001 .box{margin-top: 20px; }
.sub1001 .box h5{font-size: 1.5rem; color: #222; font-weight: 600;}
.sub1001 .box .p1{margin: 14px 0 8px; font-size: 2rem; color: var(--main-color); font-weight: bold; line-height: 1.2em;}
.sub1001 .box .p1 span{font-size: 1.4rem; color: #444; font-weight: normal;}


/*sub1002 충전신청 1002*/
.ip_wrap .ab_p1{position: absolute; right: 12px; top: 65%; transform: translateY(-50%); color: red;}
.sub1002 .box{margin-top: 20px; }
.sub1002 .box h5{font-size: 1.5rem; color: #222; font-weight: 600;}
.sub1002 .box .p1{margin: 14px 0 8px; font-size: 2rem; color: var(--main-color); font-weight: bold; line-height: 1.2em;}
.sub1002 .box .p1 span{font-size: 1.4rem; color: #444; font-weight: normal;}


.tbl {border-top: 2px solid var(--main-color);}
.tbl th,
.tbl td {padding:22px; border-right: 1px solid #ddd; border-bottom:1px solid #ddd; text-align: center;}
.tbl th {background-color: #f5f5f5; font-weight: 600;}
.tbl td span{font-size: 13px;}
.tbl td:first-child,
.tbl th:first-child{border-left: 1px solid #ddd;}

.tbl td dl dt,
.tbl td dl dd {display: inline-block;}
.tbl td dl dt {}
.tbl td dl dd {margin-right: 15px;}

.tbl_paper th,
.tbl_paper td {border:1px solid #ddd; text-align: center;}
.tbl_paper tbody th {background-color: #fff;}

.tbl_form th,
.tbl_form td {padding:10px;}



/* 모달팝업 */
#modal-content {display:none;width:600px;max-width:90%;height:500px;box-shadow:0 5px 15px rgba(0, 0, 0, 0.5);background-color: #fff;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 0;outline: 0 none}
#modal-content .modal-header {height:20px;border-bottom:1px solid #e5e5e5;padding:15px}
#modal-content .modal-header h4 {margin:0;font:bold 18px 'Malgun Gothic';color:#5d5d5d}
#modal-content .modal-body {padding:15px}
#modal-content .modal-body .b-iframe {width:570px;max-width:100%;height:430px}
#modal-content .b-close{float:right;font:bold 21px Arial;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
#modal-content .b-close:hover, #modal-content .b-close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}
p.modal-frame-content{width:550px;max-width:100%;height:400px;padding-right:5px;overflow-x:hidden;overflow-y:auto;font:normal 12px 'Malgun Gothic';color:#555;line-height:1.65em}
/*.popbtn {text-decoration:none;cursor:pointer;margin:0 5px}*/
.b-modal __b-popup1__ {max-width:100%}
#modal-content .modal-header,#modal-content .modal-body{box-sizing:content-box !important}

#modal-content2 {display:none; width:400px; height:560px; background:rgba(54,54,54,0.9); border-radius:4px; border:0px;}
#modal-content2 .modal-header {position:relative; height:28px;}
#modal-content2 .modal-body2 {padding:0;}
#modal-content2 .b-close{position:absolute;top:0;right:16px;font-size:40px;font-weight:900;font-family:Tahoma;color:#fff;opacity:.5;filter:alpha(opacity=50);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
#modal-content2 .b-close:hover, #modal-content .b-close:focus{cursor:pointer;opacity:1;filter:alpha(opacity=100)}
#modal-content2 .modal-body2 .b-iframe {width:400px;height:560px;}


.toggle_switch { display: inline-block; position: relative; width: 40px; height: 25px; } 
.toggle_switch input[type="checkbox"] { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; font-size: initial; clip: rect(0 0 0 0); } 
.toggle_switch .slider { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #ccc; border-radius: 20px; cursor: pointer; transition: 0.4s; } 
.toggle_switch input[type="checkbox"]:checked + .slider { background-color: #007bff; } 
.toggle_switch .slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; transition: 0.4s; } 
.toggle_switch input[type="checkbox"]:checked + .slider::before { transform:translateX(15px); }