@charset "utf-8";

.mem_check{background:#eee; color:#ff3333; border:1px solid #ff3333; display:inline-block; padding:5px 20px; border-radius:20px; font-size:0.9em;}

/*S-VPN } */
div.company_01{max-width:1400px;min-height:550px; margin: 0 auto; line-height:1.5em;background:url('/images/sub/img_cpnpany_02.png') no-repeat left bottom,url('/images/sub/img_cpnpany_01.png') no-repeat right bottom; font-size:1.1em }
div.company_01 > div { width:calc(100% - 500px)  }
div.company_01 > div > p:nth-child(1){font-size:1.3em; font-weight:600;margin-bottom:30px }
div.company_01 > div > p:nth-child(2){margin-bottom:60px }
div.company_01 > div > p > a{font-size:1.1em; display:inline-block; background:#ff3333; border-radius:30px; color:#fff; padding:15px 40px }
div.company_01 > div > p > a:hover{background:#000;  }
div.company_01 > div > p > a > span:after{display:inline-block; content:"";  background:url('/images/sub/arrow_btn_01.png') no-repeat center center; width:28px; height:14px; background-size:cover; margin-left:5px }

div.company_02{width:100%;line-height:1.5em;font-size:1em }
div.company_02 > div{width:100%; margin-bottom:50px }
div.company_02 > dl{width:100%; display:flex; flex-wrap:wrap }
div.company_02 > dl > dt{width:calc(100% - 750px); display:flex; align-items:flex-end}
div.company_02 > dl > dd{width:750px; }
div.company_02 > dl > dd > ul{width:100%; display:flex; flex-direction:column; gap:10px }
div.company_02 > dl > dd > ul > li{width:100%; border:1px solid #dd8383; border-radius:0 20px 0 20px; padding:30px}
div.company_02 > dl > dd > ul > li > p:nth-child(1){font-size:1.1em; font-weight:600; margin-bottom:20px; color:#ff3333}

div.company_03{max-width:1400px;margin: 0 auto; line-height:1.5em;}
div.company_03 ul{max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
div.company_03 ul li{width:100%; padding:30px; background:#fff; border:1px solid #ccc }
div.company_03 dl{width:100%;}
div.company_03 dl > dt{width:100%; font-size:1.1em; font-weight:600;padding:10px 0}

div.download{width:100%; max-width:1400px;margin: 0 auto; line-height:1.5em; }
div.download ul{width:100%; display:flex; flex-wrap:wrap; height:570px; font-size:1.2em }
div.download ul li{width:50%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px}
div.download ul li:nth-child(1){background:#f2f2f2;}
div.download ul li:nth-child(1) p{margin-bottom:30px}
div.download ul li:nth-child(1) p:nth-child(2){font-size:1.3em; font-weight:600;}
div.download a{font-size:1.1em; display:inline-block; background:#ff3333; border-radius:30px; color:#fff; padding:15px 40px }
div.download a:hover{background:#000;  }
div.download a  span:after{display:inline-block; content:"";  background:url('/images/sub/arrow_btn_01.png') no-repeat center center; width:28px; height:14px; background-size:cover; margin-left:5px }
div.download ul li.downbg{display:block; content:""; height:100%;  background:url('/images/sub/img_download_02.png') no-repeat center center; background-size:cover }
div.download ul li.downbg2{display:block; content:""; height:100%;  background:url('/images/sub/img_download_03.png') no-repeat center center; background-size:cover }

button.payment{font-size:1.1em; display:inline-block; background:#ff3333; border-radius:30px; color:#fff; padding:15px 40px; border:0 }

div.download2{width:100%; max-width:1400px;margin: 0 auto; line-height:1.5em; }
div.download2 ul{width:100%; display:flex; flex-wrap:wrap; height:570px; font-size:1.2em }
div.download2 ul li{width:50%; height:100%;display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px }
div.download2 ul li:nth-child(1){background:#f2f2f2;}
div.download2 ul li:nth-child(1) p{margin-bottom:30px}
div.download2 ul li:nth-child(1) p:nth-child(2){font-size:1.3em; font-weight:600;}
div.download2 a{font-size:1.1em; display:inline-block; background:#ff3333; border-radius:30px; color:#fff; padding:15px 40px }
div.download2 a:hover{background:#000;  }
div.download a  span:after{display:inline-block; content:"";  background:url('/images/sub/arrow_btn_01.png') no-repeat center center; width:28px; height:14px; background-size:cover; margin-left:5px }
div.download2 ul li.downbg2{display:block; content:""; height:100%;  background:url('/images/sub/img_download_03.png') no-repeat center center; background-size:cover }


div.pay{width:100%; max-width:1700px;margin: 0 auto;  }
div.pay ul{width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
div.pay ul > li{width:400px;  height:500px; background:#fff; border:1px solid #ccc; box-shadow: 3px 3px 10px rgba(102,102,102,0.6); border-radius:30px;display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px}
div.pay ul > li:hover{border:1px solid #ff3333; background:#f2f2f2}


div.pay_01{color:#ff3333; font-weight:600; font-size:1.5em; margin-bottom:30px; padding:70px 10px 10px 10px; border-bottom:1px solid #ff3333; position:relative  }
div.pay_01 > span:nth-child(2):after{position:absolute; display:block; width:70px; height:70px; content:"";  background:url('/images/sub/ico_pay.png') no-repeat center center; background-size:cover; right:-50px; top:0 }
p.pay_02{color:#000; font-weight:600; font-size:1.9em; margin-bottom:60px; letter-spacing:-2px  }
p.pay_02 >  span:nth-child(1){color:#ff3333;  font-size:0.8em;  }
p.pay_02 >  span:nth-child(2){display:inline-block; font-size:0.6em; font-weight:400; color:#333; margin-left:3 }
p.pay_03{color:#000;  font-size:1.3em; margin-bottom:30px }
p.pay_03 > span:nth-child(1){  text-decoration: line-through; text-decoration-color:#ff3333 }
p.pay_03 > span:nth-child(2):after{ display:inline-block; width:30px; height:30px; content:"→" ; text-align:center; }
p.pay_03 > span:nth-child(3){color:#ff3333;font-size:1.2em; font-weight:600 }

p.pay_04 > a {background:#ff3333; color:#fff; display:inline-block; padding:20px 30px; border-radius:50px; }
p.pay_04 > a:hover {background:#000;  }
p.pay_04 > a > span:after{display:inline-block; content:"";  background:url('/images/sub/arrow_btn_01.png') no-repeat center center; width:28px; height:14px; background-size:cover; margin-left:5px }


div.guide{width:100%;  }
p.guide_title{font-size:1.6em; font-weight:600; padding-bottom:40px  }
p.guide_title > span{font-size:1.5em; color:#ff3333; padding-right:10px  }


div.guide > div.guide_01 > dl{width:100%; display:flex; flex-wrap:wrap; margin-bottom:50px}
div.guide > div.guide_01 > dl > dt{width: 433px; }
div.guide > div.guide_01 > dl > dd{width:calc(100% - 433px); padding:50px }
div.guide > div.guide_01 > dl > dd > ul{width:100%  }
div.guide > div.guide_01 > dl > dd > ul > li{width:100%; padding:10px 20px; border:1px solid #ff3333; border-radius:30px; margin-bottom:10px;display:flex;  }
div.guide > div.guide_01 > dl > dd > ul > li > span{display:inline-block; width:30px; height:30px;display:flex;  justify-content:center; align-items:center; background:#ff3333; border-radius:50%; color:#fff; font-size:0.8em; margin-right:10px }

div.guide_02 > div{padding:50px;border:1px solid #ff3333; border-radius:30px; text-align:center}
div.guide_02 > dl > dd > ul > li > span:nth-child(1){display:inline-block; width:30px; height:30px;display:flex;  justify-content:center; align-items:center; background:#ff3333; border-radius:50%; color:#fff; font-size:0.8em; margin-right:10px; position:absolute; }
div.guide_02 > dl > dd > ul > li > span:nth-child(2){display:inline-block; width:calc(100% - 30px); padding-left:40px }
div.guide_03 > dl{width:100%; display:flex; flex-wrap:wrap; margin-bottom:50px}
div.guide_03 > dl > dt{width: 400px; }
div.guide_03 > dl > dd{width:calc(100% - 400px); padding:50px }
div.guide_03 > dl > dd > ul{width:100%  }
div.guide_03 > dl > dd > ul > li{width:100%; padding:10px 20px; border:1px solid #ff3333; border-radius:30px; margin-bottom:10px;display:flex;  }
div.guide_03 > dl > dd > ul > li > span:nth-child(1){display:inline-block; width:30px; height:30px;display:flex;  justify-content:center; align-items:center; background:#ff3333; border-radius:50%; color:#fff; font-size:0.8em; margin-right:10px; position:absolute; }
div.guide_03 > dl > dd > ul > li > span:nth-child(2){display:inline-block; width:calc(100% - 30px); padding-left:40px }


div.guide_04 > dl{width:100%; display:flex; flex-wrap:wrap; margin-bottom:50px}
div.guide_04 > dl > dt{width: 350px; }
div.guide_04 > dl > dd{width:calc(100% - 350px); padding:50px }
div.guide_04 > dl > dd > ul{width:100%  }
div.guide_04 > dl > dd > ul > li{width:100%; padding:10px 20px; border:1px solid #ff3333; border-radius:30px; margin-bottom:10px;display:flex;  }
div.guide_04 > dl > dd > ul > li > span:nth-child(1){display:inline-block; width:30px; height:30px;display:flex;  justify-content:center; align-items:center; background:#ff3333; border-radius:50%; color:#fff; font-size:0.8em; margin-right:10px; position:absolute; }
div.guide_04 > dl > dd > ul > li > span:nth-child(2){display:inline-block; width:calc(100% - 30px); padding-left:40px }


table.paytable {width:100%; font-size:18px; border-top:2px solid #000 }
table.paytable td{padding:20px; border-bottom:1px solid #e5e5e5; color:#1c5086; text-align:right}
table.paytable th{padding:20px; border-bottom:1px solid #e5e5e5; text-align:center; font-weight:normal}
table.paytable th.business_year{ font-weight:600; font-size:2.2em; color:#009999; border-right:1px solid #e5e5e5;}
table.paytable th.th_02{background:#f2f2f2; font-weight:600}
table.paytable td.td_02{background:#f2f2f2;}

table.paytable2 {width:100%; font-size:18px; border-top:2px solid #000 }
table.paytable2 td{padding:20px; border-bottom:1px solid #e5e5e5; color:#1c5086; text-align:center}
table.paytable2 th{padding:20px; border-bottom:1px solid #e5e5e5; text-align:center; font-weight:normal}
table.paytable2 th.business_year{ font-weight:600; font-size:2.2em; color:#009999; border-right:1px solid #e5e5e5;}
table.paytable2 th.th_02{background:#f2f2f2; font-weight:600}
table.paytable2 td.td_02{background:#f2f2f2;}
table.paytable2 input[type=text]{width:150pX; font-size:16px;  }


div.x_scroll{width:100%; overflow-x:auto}
div.my_id{width:100%;  }
div.my_id ul{width:100%;  border:1px solid #ff3333; border-radius:5px; padding:20px; display:flex; flex-wrap:wrap; font-size:0.9em}
div.my_id ul li{width:50%; padding:10px }
div.my_id ul li span:nth-child(2){display:inline-block; width:80px; font-weight:600 }
div.my_id ul li span:nth-child(1){display:inline-block; color:#ff3333; margin-right:5px; vertical-align:middle }
.sub_btn_01 {display:block; width:150px; margin-bottom:5px;border:1px solid #ff3333; font-size:0.9em; padding:5px 20px; }
.sub_btn_02 {display:block; width:150px;margin-bottom:5px;border:1px solid #ccc; font-size:0.9em; padding:5px 20px; }
a.sub_btn_03 {display:inline-block; background:#ff3333; color:#fff; text-align:center; font-size:1em; font-weight:600;  border-radius:30px; padding:15px 30px; }
a.sub_btn_03 span{display:inline-block; margin-left:5px; vertical-align:middle }

@media(max-width:1200px){
	
div.company_01 > div { width:100% }
div.company_02 > dl > dt{width:calc(100% - 700px); }
div.company_02 > dl > dd{width:700px; }
}
@media(max-width:1000px){
	

div.company_02 > dl > dt{width:calc(100% - 600px);}
div.company_02 > dl > dd{width:600px; }
div.company_02 > dl > dd > ul > li{padding:20px}
div.company_01{ background-size:500px,300px; }
div.guide > div.guide_01 > dl > dt{width: 300px; }
div.guide > div.guide_01 > dl > dd{width:calc(100% - 300px); padding:30px }

div.guide > div.guide_03 > dl > dt{width: 500px; }
div.guide > div.guide_03 > dl > dt img{width: 100%; }
div.guide > div.guide_03 > dl > dd{width:calc(100% - 500px); padding:20px }

}
@media(max-width:840px){
div.company_02 > dl > dt{width:100%; justify-content:center}
div.company_02 > dl > dd{width:100%;}
div.company_02 > dl > dd > ul > li{padding:20px}
div.company_02 > dl > dt img{display:inline-block; width:300px}
div.company_01{min-height:450px; text-align:center  }
div.company_01 > div > p:nth-child(1){margin-bottom:10px }
div.company_01 > div > p:nth-child(2){margin-bottom:30px }

div.download ul li{width:100%; height:auto }
div.download2 ul li{width:100%; }
div.download2 ul li.downbg2{display:none}
div.guide > div.guide_01 > dl > dt{width: 100%; }
div.guide > div.guide_01 > dl > dt img{width: 100%; }
div.guide > div.guide_01 > dl > dd{width:calc(100% - 0px); padding:10px }

div.guide > div.guide_03 > dl > dt{width: 100%; }
div.guide > div.guide_03 > dl > dt img{width: 100%; }
div.guide > div.guide_03 > dl > dd{width:calc(100% - 0px);padding:10px  }

div.guide > div.guide_04 > dl > dt{width: 100%; }
div.guide > div.guide_04 > dl > dt img{width: 100%; }
div.guide > div.guide_04 > dl > dd{width:calc(100% - 0px);padding:10px  }
div.guide_04 > dl > dd > ul > li{padding:10px 10px;border-radius:20px;   }

table.paytable {font-size:16px;}
table.paytable td{padding:10px}
table.paytable th{padding:10px;}
table.paytable {font-size:16px;}
table.paytable2 td{padding:10px}
table.paytable2 th{padding:10px;}
}
@media(max-width:640px){
div.company_01{ font-size:1em;background-size:300px,200px; }


div.company_01 > div > p:nth-child(1){font-size:1.1em; font-weight:600;margin-bottom:30px }
div.company_03 dl > dt{font-size:1em; font-weight:400;}
div.company_03 dl > dd{font-size:0.9em; font-weight:400;}
div.download ul{width:100%; display:flex; flex-wrap:wrap; height:570px; font-size:1em }
div.download ul li.downbg{height:300px;  background:url('/images/sub/img_download_02.png') no-repeat center center; background-size:cover; background-position:bottom }
div.download ul li.downbg2{height:300px;  background:url('/images/sub/img_download_02.png') no-repeat center center; background-size:cover; background-position:bottom }
div.pay ul > li{width:100%;  height:auto;  padding:20px}
div.pay_01{margin-bottom:20px; padding:50px 10px 10px 10px; border-bottom:1px solid #ff3333; position:relative  }
div.pay_01 > span:nth-child(2):after{width:50px; height:50px; content:""; right:-35px; top:0 }
p.pay_02{margin-bottom:30px; letter-spacing:-1px  }
p.pay_03{ margin-bottom:20px }
p.pay_03 > span:nth-child(2):after{ display:inline-block; width:20px; height:20px; content:"→" ; text-align:center; }

p.pay_04 > a {background:#ff3333; color:#fff; display:inline-block; padding:10px 20px; border-radius:50px; }
p.pay_04 > a > span:after{display:inline-block; content:"";  background:url('/images/sub/arrow_btn_01.png') no-repeat center center; width:20px; height:10px; background-size:cover; margin-left:5px }
table.paytable {font-size:14px;}
table.paytable td{padding:5px}
table.paytable th{padding:5px;}
table.paytable2 {font-size:14px;}
table.paytable2 td{padding:5px}
table.paytable2 th{padding:5px;}
div.my_id ul li{width:100%; }
}




/* == 사업영역 == */
/* logistics.css 로 이동 */

/* 개인정보 처리방침 - ** { */
.privacy .section { max-width: 1400px; padding:20px; height: auto; display:block; margin:0 auto; border: 1px solid #333; margin-bottom: 100px; }
.privacy .section pre { font-size:14px; line-height:1.3em; white-space: break-spaces;}
/* 개인정보 처리방침 - ** } */




#modal_bg{     background: rgba(0,0,0,0.6);    position: fixed;    width: 100%;    height: 100%;    display: none;    z-index: 999;    left: 0;    right: 0;    top: 0;   bottom: 0; }













/* 개인정보취급방침 */
div.privacy{font-size:0.9em; }
div.privacy h4{font-size:1.5em; line-height:1.5em; text-align:center !important; margin-top:50px}
div.privacy h5{font-size:1.2em; line-height:1.5em; margin:20px 0; letter-spacing:-2px; font-weight:normal}
div.privacy_box{border:1px solid #ccc; padding:20px; margin-bottom:50px; font-size:0.9em; }
p.mb{margin-bottom:50px;}
div.privacy_box > ul > li{position:relative;word-break:break-all; }
div.privacy_box > ul.circ > li > span{display:block; padding-left:30px; }
div.privacy_box > ul.circ > li > span:nth-child(1){width:20px; position:absolute; padding-left:0px; }

div.privacy_box > ul.dot > li{position:relative; padding-left:20px; }
div.privacy_box > ul.dot > li::before{content:""; display:block; width:4px; height:4px; background:#ff3333; position:absolute; top:12px; left:0; border-radius:50px;}

div.privacy_list{margin-bottom:50px; }
div.privacy_list ul{display:flex; flex-wrap:wrap; gap:10px }
div.privacy_list ul > li{width:calc(50% - 5px); border:1px solid #ccc; padding:10px 20px; font-size:0.9em }

@media (max-width:840px) {
div.privacy_list ul > li{width:calc(100% - 5px);}
div.privacy_box > ul.circ > li > span{display:block; padding-left:15px; }
div.privacy_box > ul.circ > li > span:nth-child(1){width:10px; position:absolute; padding-left:0px; }
}
@media (max-width:640px) {
div.privacy_list ul {gap:3px;}
div.privacy_box{padding:10px;  }
div.privacy_box > ul.circ > li > span{padding-left:15px; }
div.privacy_box > ul.circ > li > span:nth-child(1){width:10px;}
div.privacy_box > ul.dot > li{position:relative; padding-left:15px; }

}

 .check_terms {position:relative}
 .check_terms label::before {
 background: url('/images/common/ico_check_01.png') no-repeat center center; background-size:19px 19px; 
    background-repeat: no-repeat;
    width: 19px;
    height: 1.3em;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}
 .check_terms label {padding-left:20px}
 .check_terms input:checked+label::before {
     background:url('/images/common/ico_check_02.png') no-repeat center center; background-size:19px 19px; 
    background-repeat: no-repeat;
    width: 19px;
    height:1.3em;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}

.input_ul {width:100%; display:flex; }
.input_ul > li {padding-right:3px; }
.input_ul > li {width:50%; }
.input_ul > li input[type=text],.input_ul > li input[type=password]{width:100% !important; }

.input_ul_email{width:100%; display:flex; flex-wrap:wrap }
.input_ul_email > li {padding-right:3px; }
.input_ul_email > li input[type=text], .input_ul_email > li select{width:200px;  }
@media (max-width:640px) {

.input_ul_email > li input[type=text]{width:90px;  }
}
.input_ul_email > li select{width:70px;  }
}