/** popup **/


.pop-layer .pop-container {
    width: 100%; max-width: 800px; 
    position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%;
    background: #fff
}

.pop-layer .pop-container.samll{max-width: 450px}

.pop-layer p.ctxt {
  color: #666;
  line-height: 25px;
}


.pop-layer {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  height: auto;
  background: rgba(0,0,0,.5);
  z-index: 10;
    width: 100%; height: 100%;
}

.dim-layer {
  display: none;
  position: fixed;
  _position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.dim-layer .dimBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}

.dim-layer .pop-layer {
  display: block;
}

a.btn-layerClose:hover {
  background-color: #127ed8;
  color: #fff;
    transition-duration: .5s
}
.popcontent{position: relative; padding: 50px;}
.popcontent .poptitle{position: relative; }
.popcontent .poptitle h2{font-size: 18px; font-weight: bold; color: #333;}

.popcontent .poptitle .close{position: absolute; right: 0; top: 0}

.btn_are_pop{display: flex; align-items: center; justify-content: flex-end; margin-top: 25px}
.btn_are_pop .btn{color: #222; font-size: 14px; font-weight: 500; height: 40px; line-height: 40px; padding: 0 40px; border: 1px solid #dfdfdf; border-radius: 5px; text-align: center}
.btn_are_pop .btn.btn02{background: #127ed8; color: #fff; margin-right: 5px}

.point_pop{border-bottom: 1px solid #dfdfdf; border-top: 2px solid #dfdfdf; background: #f9f9f9; padding: 30px;margin-top: 25px}

.point_pop.samll{border-bottom: 1px solid #dfdfdf; border-top: 2px solid #dfdfdf; background: #f9f9f9; padding: 20px;margin-top: 25px}

.point_pop.samll ul.list_ul li{font-size: 16px;}

.point_pop h2{position: relative; padding-left: 30px; color: #222; font-size: 18px; font-weight: 400}
.point_pop h2 span{position: absolute; left: 0; top: 1px}

.point_pop h2 + p{margin-top: 20px;}
.point_pop p{font-size: 18px; line-height: 25px; font-weight: 400; color: #555}
.point_pop p + p{margin-top: 20px}

.point_pop h2 + ul{margin-top: 20px}

ul.list_ul{list-style: disc; padding-left: 20px}
ul.list_ul li{list-style: disc; font-size: 18px; color: #555; font-weight: 400}
ul.list_ul.samll li{list-style: disc; font-size: 16px; color: #555; font-weight: 400}

ul.list_ul + p{margin-top: 20px}
.point_pop p + ul{margin-top: 5px}

ul.number_list{list-style: none; }
ul.number_list li{font-size: 16px; color: #555; font-weight: 400; position: relative; padding-left: 30px}
ul.number_list li::after{content: ""; background: #61ACFF; width: 20px; height: 20px; position: absolute; left: 0; top: 4px; color: #fff; font-size: 12px; text-align: center; border-radius: 50px}

ul.number_list li + li{margin-top: 8px}

ul.number_list li:nth-child(1)::after{content: "1";}
ul.number_list li:nth-child(2)::after{content: "2";}
ul.number_list li:nth-child(3)::after{content: "3";}
ul.number_list li:nth-child(4)::after{content: "4";}
ul.number_list li:nth-child(5)::after{content: "5";}
ul.number_list li:nth-child(6)::after{content: "6";}
ul.number_list li:nth-child(7)::after{content: "7";}
ul.number_list li:nth-child(8)::after{content: "8";}
ul.number_list li:nth-child(9)::after{content: "9";}
ul.number_list li:nth-child(10)::after{content: "10";}


.adress_pop{display: flex; }
.adress_pop .point_pop{width: 50%; margin-right: 10px}
.adress_go{width: 50%; margin-left: 10px;}
.adress_go h2{font-size: 18px; font-weight: bold; margin-top: 20px}
.adress_go ul{margin-top: 18px; border-top: 2px solid #333; border-bottom: 1px solid #333}
.adress_go ul li{border-bottom: 1px solid #dfdfdf; padding: 10px}
.adress_go ul li:last-child{border-bottom: 0}
.adress_go input{border: 0; height: auto; line-height: normal}

.adress_go .pagenation + p{margin-top: 25px}

.adress_go p{font-size: 16px; color: #333; position: relative}
.adress_go p  span{position: absolute; right: 0;}
.adress_go p b{color:#127ed8 }
/** sub_common **/

.sub{max-width: 1200px; margin: 0 auto; padding: 170px 0}
.sub .sub_title{text-align: left; margin-bottom: 50px; position: relative}
.sub .sub_title h2{font-size: 30px; font-weight: 500; color: #333}
.sub .sub_title p{font-size: 18px; color: #222; font-weight: 400}
.sub .sub_title h2 + p{margin-top: 10px;}

.pop-sub{max-width: 1200px; margin: 0 auto; padding: 30px 0}
.pop-sub .sub_title{text-align: left; margin-bottom: 50px; position: relative}
.pop-sub .sub_title h2{font-size: 30px; font-weight: 500; color: #333}
.pop-sub .sub_title p{font-size: 18px; color: #222; font-weight: 400}
.pop-sub .sub_title h2 + p{margin-top: 10px;}

.sub .sub_title .btn{position: absolute; right: 0; top: 0; border: 1px solid #127ed8; border-radius: 5px; font-size: 16px; height: 50px; line-height: 50px; padding: 0 50px; text-align: center; color: #fff; font-weight: 400; background: #127ed8}

.btn_pry{display: flex; margin-top: 50px; align-items: center; justify-content: flex-end}
.btn_pry .btn{border: 1px solid #dfdfdf; border-radius: 5px; font-size: 16px; height: 50px; line-height: 50px; padding: 0 50px; text-align: center; color: #222; font-weight: 400}
.btn_pry .btn + .btn{margin-left: 15px;}
.btn_pry .btn.btn01{}
.btn_pry .btn.btn02{background: #127ed8; color: #fff; border-color: #127ed8}

.btn_pry .btn.btn01:hover{transition-duration: .5s; background: #127ed8; color: #fff}
.btn_pry .btn.btn02:hover{transition-duration: .5s; background: #00C1FF; color: #fff; border-color: #00C1FF}

.tlb{}
.tlb table{width: 100%; border-top: 2px solid #666}
.tlb table th, .tlb table td{padding: 15px; border-bottom: 1px solid #dfdfdf}
.tlb table th{text-align: left; font-size: 17px; font-weight: 400; background: #F9f9f9}
.tlb table th span.inportant{color: red; margin-left: 5px}
.tlb table td .tlb_flex{display: flex; }
.tlb table td .btn{height: 40px; line-height: 40px; padding: 0 20px; 
    font-size: 16px; color: #127ed8; border: 1px solid #127ed8; border-radius: 5px; display: inline-block}
.tlb table td .btn:hover{background:#127ed8; color: #fff; transition-duration: .5s }
.tlb table td input.merge{border:0; padding:0}
.tlb table td input + .btn{margin-left: 10px;}
.tlb table td p{font-size: 16px; font-weight: 400; color: #666;}
.tlb table td .tlb_flex + p{margin-top: 5px}

.tlb.index_tlb td{border-left: 1px solid #dfdfdf}
.tlb.index_tlb td:first-child{border-left: 0}

.tlb.index_tlb td a{color: #222; font-size: 15px; }

/** join **/

.flex2_join{display: flex; max-width: 1000px; margin: 0 auto}
.flex2_join a{width: calc(50% - 40px)}
.flex2_join a{margin: 0 20px; border: 4px solid #fff; border-radius: 25px; display: block}
.flex2_join a img{width: 100%; display: block}

.flex2_join a:hover{border-color: #00C1FF; transition-duration: .5s}
.flex2_join a:hover img{opacity: .6}

.agree_form{}
.agree_form h2{font-size: 22px; font-weight: bold; color: #333; margin-bottom: 25px}
.text_pre{height: 250px; overflow-y: auto; background: #f9f9f9; color: #555; font-size: 16px; font-weight: 400; line-height: 25px; padding: 15px; border: 1px solid #dfdfdf}

.cheack_form{margin-top: 20px; text-align: left; display: flex; align-items: center}
.cheack_form input[type="checkbox"]{display: inline-block; width: 20px; height: 20px; border: 1px solid #dfdfdf; border-radius: 5px}

.cheack_form label{font-size: 18px; font-weight: 400; color: #555; margin-left: 5px; line-height: 25px;}


.agree_form + .agree_form{margin-top: 50px}


.join_ok{text-align: center}
.join_ok p{font-size: 30px; font-weight: 500; color: #333; margin-top: 20px;}




/** sms **/

.mug{width: 247px; padding: 0 15px; display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}

.mug a{line-height: 50px; color: #666666; border: 1px solid #127ed8; height: 50px; display: block; width: 100%; text-align: center; border-radius: 5px}

.mug a + a{margin-top: 10px}

.sms_flex + .tlb{margin-top: 50px}

.sms_flex{display: flex;}
.sms{width: 479px; height: 882px; background: url(../images/sms/sms.png); background-repeat: no-repeat; background-position: center top; padding: 65px 35px 75px}

.sms h2{font-size: 25px; color: #333; font-weight: 500; position: relative}
.sms .sms_form{height: 570px; border: 1px solid #dfdfdf; background: #fff; margin-top: 20px; padding: 15px}
p.top_text{text-align: center; display: block; font-size: 16px; color: #222; border: 1px solid #dfdfdf; background: #BDEFFF; height: 40px; line-height: 40px; border-radius: 5px}
p.top_text2{margin-left: 8px; margin-top: 10px;}
a.sms080{display: block; text-align: center; background: #FF7A00; color: #fff; height: 40px; line-height: 40px; border-radius: 5px}

.sms .sms_form textarea{resize: none; border: 0; padding: 10px; height: 420px;}
.sms .sms_form .imgsmsbtn{padding: 10px; height: 200px; display: flex; align-items: center; justify-content: center}

.byte{position: absolute; right: 0; top: 3px; font-size: 18px; font-weight: 400; color: #00C1FF}
#test_cnt b{font-weight: 400; color: #222}


.sms_btn{display: flex; flex-wrap: wrap; /*margin-top: 15px*/}
.sms_btn a{width: calc(50% - 10px); margin:5px; font-size: 14px; color: #fff; background: #333; height: 30px; line-height: 25px; border-radius: 5px; text-align: center}
.sms_flex .tlb{width: calc(100% - 499px); margin-left: 20px}

.sms_btn_inupt{display: flex}
.sms_btn_inupt a{font-size: 14px; color:#666666; height: 30px; line-height: 30px; width: auto; padding: 0 20px; flex: 1; border: 1px solid #127ed8; background: #fff; text-align: center; margin: 0 5px; border-radius: 5px}

.sms_are{background: #f9f9f9; border: 1px solid #dfdfdf; padding: 15px; margin-top: 10px}
.number_info{margin-top: 15px;}
.number_info .box{padding: 5px; padding: 5px; border: 1px solid #dfdfdf; border-radius: 5px; background: #fff}
.number_info .box + .box{margin-top: 10px}
.number_info .box input[type="checkbox"]{width: 16px; height: 16px; display: inline-block; margin: 0; vertical-align: middle; margin-top: -2px}
.number_info .box span{display: inline-block; font-size: 14px; margin-left: 5px; line-height: 18px}

.number_info_bottom{margin-top: 15px;}
.number_info_bottom span{color: #127ed8; font-size: 14px; font-weight: bold}

.close_btn_sms{display: flex; justify-content: flex-end}
.close_btn_sms a{padding: 0 30px; background: #666666; color: #fff; height: 30px; line-height: 30px; border-radius: 5px; margin-right: 5px;}

.tlb_flex_sms{display: flex; align-items: center}
.tlb_flex_sms input[type="checkbox"]{width: 16px; height: 16px; display: inline-block; vertical-align: middle; }

.tlb_flex_sms span{display: inline-block; font-size: 16px; margin-left: 5px; line-height: 18px}
.tlb_flex_sms input[type="text"]{height: 40px; width: 100px}
.tlb_flex_sms input[type="time"]{height: 40px; width: 150px}
.tlb_flex_sms input + span{margin-left: 10px;}
.tlb_flex_sms span + input{margin-left: 10px}

.tlb_flex_sms input[type="text"].half{width: 200px}

.tlb_flex_sms input + input{margin-left: 10px}

.tlb_flex_sms + .tlb_flex_sms{margin-top: 10px}

.goods{margin-top: 50px}

ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
    display: flex
}
ul.tabs li{
	background: none;
	color: #222;
	display: inline-block;
	padding: 15px 35px;
	cursor: pointer;
    border-bottom: 1px solid #dfdfdf;
    font-size: 18px;
    font-weight: 500
}

ul.tabs li.current{
	color: #127ed8;
    border-color: #127ed8
}

.tab-content{
	display: none;

	padding:30px 0;
}

.tab-content.current{
	display: inherit;
}

.tab-content.pre_box{border: 1px solid #dfdfdf; padding: 30px; overflow-y: auto; max-height: 800px}
.tab-content.pre_box p{font-size: 16px; color: #555; word-break: break-all;}


.tab_sub{display: flex;}
.tab_sub a{display: inline-block; border-radius: 50px; height: 40px; line-height: 40px; font-size: 16px; color: #222; border: 1px solid #dfdfdf; padding: 0 30px}
.tab_sub a + a{margin-left: 10px}
.tab_sub a.atv{background: #127ed8; color: #fff}
.tab_sub a:hover{background: #127ed8; color: #fff; transition-duration: .5s}

.sample{margin-top: 30px;display: flex; flex-wrap: wrap}
.sample .sample_box{width: calc(25% - 10px); margin:5px; border: 1px solid #dfdfdf; padding: 15px; border-radius: 15px}
.sample .sample_box p{height: 150px; font-size: 14px; line-height: 22px; overflow-y: auto}
.sample .sample_box .sample_btn{display: flex; margin-top: 15px;}
.sample .sample_box .sample_btn .btn{height: 30px; border: 1px solid #dfdfdf; flex: 1; margin: 0 5px; text-align: center; line-height: 30px; border-radius: 10px; color: #222}

.sample .sample_box img{width: 100%}

.sample .sample_box .sample_btn .btn.btn01{background:#127ed8; color: #fff }

.pagenation{display: flex; align-items: center; justify-content: center; margin-top: 50px}
.pagenation a{width: 30px; height: 30px; text-align: center; line-height: 30px; color: #222; border: 1px solid #dfdfdf; margin: 0 2px; border-radius: 5px }
.pagenation a:hover, .pagenation a.atv{border-color: #127ed8; color: #127ed8; transition-duration: .5s}
.pagenation a.pre{margin-right: 15px}
.pagenation a.next{margin-left: 15px}

.pop_flex{margin-top: 25px; }
.pop_flex ul li{display: flex; justify-content: space-between}
.pop_flex ul li + li{margin-top: 10px}
.pop_flex ul li p{font-size: 18px;}
.pop_flex ul li p span{display: inline-block; margin-left: 5px; color: #555; font-size: 14px;}
.pop_flex ul li p.right b{color: #127ed8}

.pop_message{margin-top: 25px;}
.pop_message textarea{height: 500px;}

.tksms{width: calc(50% - 10px); margin:5px; font-size: 16px; color: #fff; background: #333; height: 50px; line-height: 50px; border-radius: 5px; text-align: center; position: relative}
.tksms .tkbox{position: absolute; padding: 15px 5px; flex-wrap: wrap; width: 205px; background: #fff; border: 1px solid #dfdfdf; border-radius: 10px; align-items: flex-start; justify-content: flex-start; display: none; left: 0; top: 50px}
.tksms .tkbox a{border: 0; width: 20px; height: 20px; line-height: 20px; display: inline-block; margin: 2px 2px; text-align: center; flex: none; padding: 0; color: #222; background: #fff}
.tksms:hover .tkbox{display: flex}

.popcontent .sample .sample_box{width: calc(33% - 10px); position: relative}

.popcontent .sample .sample_box input[type="checkbox"]{width: 18px; height: 18px; position: absolute; right: 15px; top: 15px; z-index: 2}

.popcontent .sample .sample_box p{height: 100px}

.popcontent .tabs{margin-top: 20px}
.tabs.wide{}
.tabs.wide li{flex: 1; text-align: center}
.popcontent .tabs li{padding: 10px 25px; font-size: 16px;}
.popcontent .tab-content{padding: 0}

.tab_btn_are{display: flex; align-items: center; justify-content: space-between; margin: 20px 0 0}

.tab_btn_are .btn{display: flex; align-items: center}
.tab_btn_are .btn a{color: #222; margin-right: 5px; padding: 0 20px; border-radius: 5px; border: 1px solid #dfdfdf; font-size: 14px; line-height: 40px; height: 40px}
.input_tab{display: flex; border: 1px solid #dfdfdf; border-radius: 5px; overflow: hidden; position: relative}
.input_tab2{display: flex; border-radius: 5px; overflow: hidden; position: relative}

.tab_btn_are .btn a.blue{background: #127ed8; color: #fff}

.tab_btn_are .btn span{display: block; }
.tab_btn_are .btn span + input{margin-left: 5px}
.tab_btn_are .btn input + span{margin-left: 5px}

.tab_btn_are .btn input + a{margin-left: 5px}

.input_tab input[type="text"]{height: 40px; line-height: 40px; border: 0}
.input_tab a{width: 40px; height: 40px; background: #127ed8; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0}

.tab_btn_are + .tlb{margin-top: 25px}

.popcontent .tlb th, .popcontent .tlb td{vertical-align: middle}
.popcontent .tlb input[type="checkbox"]{width: 18px; height: 18px; margin: 0; padding: 0}
.tlb.center{}
.tlb.center th, .tlb.center td{text-align: center}
.tlb.center th.check, .tlb.center td.check{width: 30px}

.tlb th.check, .tlb td.check{width: 30px}

.top25{margin-top: 25px}
.h200{height: 200px}

.bgy{background: #FFFDE9}

.tlb.xcel th{background: #F1F5FC}
.tlb.xcel td{border-left: 1px solid #dfdfdf}

.tlb.border th{border-left: 1px solid #dfdfdf}
.tlb.border td{border-left: 1px solid #dfdfdf}


.tlb.border th:first-child{border-left: 0px solid #dfdfdf}
.tlb.border td:first-child{border-left: 0px solid #dfdfdf}

.poptitle + .imgsms_file{margin-top: 25px}

.imgsms_file{display: flex}
.imgsms_file button{ background: #127ed8; color: #fff; border-radius: 5px; border: 1px solid #127ed8; padding: 0 20px; margin-left: 5px}

.flex_center{align-items: center; justify-content: center; width: 100%; display: flex; margin: 20px 0}

.btn_pry + .tlb{margin-top: 50px}


.pagenation + .point_pop{margin-top: 50px}

.pay{}
.pay table{width: 100%}
.pay table th{text-align: center; color: #fff; background: #333; padding:20px 15px; font-size: 18px}
.pay table td{border-bottom: 1px solid #dfdfdf; 
    padding: 15px; font-size: 18px; text-align: center; border-left: 1px solid #dfdfdf}
.pay table td:first-child{border-left: 0}
.pay table th span{color: #f9e000}
.pay table td span{color: #666}

.pay + .sub_title{margin-top: 50px}

.paybox{border-top: 1px solid #dfdfdf}
.paybox li{padding: 20px; border-bottom: 1px solid #dfdfdf}
.paybox li .tlb_flex_sms{padding: 0}
.paybox li .tlb_flex_sms span{margin-left: 0}
.paybox li .tlb_flex_sms input{margin-right: 10px}

.paybox li h2{font-size: 20px; font-weight: 400}


.mybox{border: 1px solid #dfdfdf; padding: 80px;}
.mybox h2{text-align: center; margin-bottom: 30px;}
.mybox ul{max-width: 600px; margin: 0 auto}
.mybox ul li{padding: 15px; border-bottom: 1px solid #dfdfdf; font-size: 16px;}
.flex_my{display: flex; align-items: center; }
.mybox ul li span{min-width: 150px}

.mybox ul li p{padding-left: 150px; margin-top: 5px; font-size: 14px; color: #555}

.lost{display: flex; margin-top: 15px; align-items: center; justify-content: flex-end; max-width: 600px; margin: 15px auto 0}
.lost span{font-size: 16px; color: #666; margin-right: 10px}
.lost a{height: 40px; border: 1px solid #dfdfdf; padding: 0 30px; line-height: 40px; color: #666; border-radius: 5px}

.pagenation + .sub_title{margin-top: 50px}

.guide{}
.guide_flex{display: flex; align-items: center}
.guide_flex .img_box{width: 50%}
.guide_flex .text_box{width: 50%}

.guide_flex + .guide_flex {margin-top: 50px}
.guide_flex .img_box + .text_box{padding-left: 70px}

.guide_flex .text_box h3{font-size: 25px; color: #555; margin-bottom: 15px}
.guide_flex .text_box p{font-size: 18px; color: #222; font-weight: 500}
.guide_flex .text_box p + ul{margin-top: 8px}
.guide_flex .text_box ul + p{margin-top: 15px}

.guide_flex .text_box p + p{margin-top: 15px}
.guide_flex .text_box ul li + li{margin-top: 5px}

/* 로딩 */
#loading {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
}

@keyframes spinner {
  from {transform: rotate(0deg); }
  to {transform: rotate(360deg);}
}

#loading .spinner {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: -32px;
  border-radius: 50%;
  border: 4px solid lightgrey;
  border-top-color: blue;
  animation: spinner .8s linear infinite;
}