@charset "utf-8";

/* ==========================================================================
                                 defalut
========================================================================== */
h2 {font-size: 18px;margin-top: 10px;color: #44217a;}
.btn{display: inline-block;background: #7D7D7D;color: #fff;width: 100%;padding:10px 0;text-align: center;}
.btn.confirm_btn{margin-top:-2px;padding:10px 2px;cursor: pointer}
.btn.active{background:#225982 }
a.disabled {pointer-events: none;cursor: default;}
.term_box{text-align: left;line-height: 1.3em;font-size: 12px;font-weight: 300}
.red{color:#ff0f31}

/* ==========================================================================
                                 header
========================================================================== */
.btn-icon{position: absolute;display: inline-block;width: 30px;height: 30px;cursor: pointer;background-image: url(../img/btn.png) ;background-repeat: no-repeat;}
.close{right: 10px;top: 5px;background-position: 0px -90px ;}
.tit_logo{width:200px;margin:15px 0 0 0;}


/* ==========================================================================
                                 CONTRACT
========================================================================== */

/* CONTRACT default*/

.contract {width: 100%;padding: 0;border-top: 1px solid #d6d6d6;}

.contract li {border-bottom: 1px solid #d6d6d6;position: relative;background: #F8FCFF;}
.contract li.border-0{border:0;}
.contract li .box {padding: 10px 25px 20px;}
.contract li .txt-bg {position: relative; background: rgb(235, 235, 235); border-bottom: rgb(235, 235, 235); color: #808080; list-style: disc; margin-left: 20px; margin-bottom: 5px;}

.contract .tit_more .box {display: none;}
.contract .tit_more .box.active {display: block;}
.contract .tit {display: block;text-align: left;font-weight: 600;line-height: 3;font-size: 15px;text-indent: 15px;user-select: none;cursor: pointer}
.contract a.tit_open {cursor: default}
.contract a.tit_more {cursor: pointer;}

.contract a .arrow {right: 10px;top: 10px;background-position: 0 0 ;}
.contract a .arrow.active {background-image: url(../img/btn.png) ;background-position: -60px 0;}

.input_row{margin:10px 0 20px;}
.input_tit{font-size: 13px;color: #707070;font-weight: 400;margin:10px 0;padding-left: 10px;}
.input_grp {width: 100%;height: 50px;padding:10px 10px;border: 1px solid #ccc;background: #fff;-webkit-box-sizing: border-box;box-sizing: border-box;margin:5px 0;}
.input_grp span.txt{line-height: 30px;font-size:11px;}
.input_grp_right_line { border-right: 1px solid #ccc; }


.noti {padding: 0 25px 30px;}
.noti li {list-style: disc;border: 0;text-align: left;line-height: 1.5em;font-weight: 400}
.noti_txt{font-size:13px;}


/* CONTRACT > product */

.product {font-size: 15px;font-weight: 600}

.price{margin:30px 0 0;font-weight: 500}
.price_tit{font-size:14px;line-height: 25px;}
.price_txt, .price_plan{font-size:13px;}
.price_won{font-size:20px;color:#EC224B}

/* Product card */
.product_card {
	width: 100%;
	height: 150px;
	display: flex;
	background: #f9f9f9;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
}
.product_image img {
	width: auto;
	height: auto;
	display: block;
}
.product_image {
	width: 40%;
}
.product_details {
	width: 60%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.product_name {
	font-size: 16px;
	font-weight: bold;
}
.product_option {
	font-size: 14px;
}


/* CONTRACT > address */
.address p{display: inline-block;width: 100%;margin-bottom: 10px;}
.address p span{font-size:15px;}



/* CONTRACT > telecom */

.tel_grp {display: table;width: 100%;height: 50px;padding:25px0;}
.item_direct {display: table-cell;width: 25%;padding: 0px 4px;border: 1px solid #ccc;border-left: 0;background: #fff;text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: middle;}
.tel_link.active{font-weight: bold;font-size:13px;color:#fff;background:#225982}
.tel_link.active select{color:#fff;background:#225982
}
.item_direct.phone_resale select{min-width:90px!important;}
.tel_grp .item_direct .tel_direct {width: 100%;cursor: pointer;height: 50px;line-height: 50px;}
.tel_grp .item_direct:first-child {border-left: 1px solid #ccc}


/* CONTRACT > pay infomation */
.pay_wrap_btn{display: none;}



/* Progress */
.progress-btn,.btn-30 {position: relative;height: 30px;font-size: 15px;font-weight: normal;transition: all 0.4s ease;}
.progress-btn:not(.active) {cursor: pointer;}
.btn-30 .btn_txt,.progress-btn .btn_txt {color:#fff;position: absolute;left: 0;top: 0;right: 0;bottom: 0;line-height: 50px;text-align: center;z-index: 5;opacity: 1;}
.progress-btn .progress {width: 0%;z-index: 4;opacity: 0;transition: all 0.3s ease;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.progress-btn.active .progress {opacity: 1;background: url("../img/loading.gif");}


/* terms */
.terms_box{border:1px solid #ccc;margin:10px;padding:5px;background: #fff;}
.term_lnk{text-decoration: underline;color:#5182A7;font-weight:500;cursor: pointer}
.term_btn{position: absolute;right: 0;top:0;background-position: 0 0}
.term_btn .btn-icon{position:static}

.identification_term, .credit_term{display: none;}
.term_list {position: relative;width: 100%;padding:0 10px;-webkit-box-sizing: border-box;box-sizing: border-box;margin:0;}

.term_list .term_tit {font-size: 14px;line-height: 28px;cursor: pointer;color: #333;-webkit-box-sizing: border-box;box-sizing: border-box;}
.terms_box .term_noti{font-size: 14px;padding:10px;font-weight: bold}

/* terms */
.table{border:1px solid #ccc;}
.term_box .table{border:1px solid #ccc;width:100%}
.term_box .table th{text-align: center;}
.table td,.table th{border:1px solid #ccc;padding:4px 0;box-sizing: border-box;word-break: break-word;}
.term_txt{text-align: left;}





/* ==========================================================================
                                 pay info
========================================================================== */
.pay_info{background: #FAFAFA}
.warp_pi{background: #FAFAFA}
.warp_pi .inner{padding: 20px;box-sizing: border-box;}
.warp_pi .footer.inner{padding: 20px 4px;box-sizing: border-box;}
.warp_pi .con {margin: 0 auto 20px;border: none;background: #fff;box-shadow: none;position: relative;transition: 0s;}
.warp_pi .inner_pi{padding:20px 0}
.pay_list .product{margin:40px 0 20px;}
.pay_list{width:100%;padding:0;border:0;}
.pay_list li{background:#fff;border:0;}
.pay_list .price{margin:0;}
.pay_list .price span{line-height: 30px;font-size:15px;}
.pay_list .price .price_tit{font-weight: 400;font-size:14px;}
.pay_list .price .price_txt{font-weight: bold}

.pay_info .pay_info_tit{font-weight: 400;font-size:14px;line-height: 25px}
.pay_info .pay_info_txt{font-weight: bold;line-height: 25px}

.pay_list .input_row{margin:30px 0 0}

.pay_list_tit{display: none;}
.pay_list_tit h2{font-size:18px;color:#333;font-weight: bold}

.pay_list_info{display: inline-block;width:100%;font-size:15px;text-align: center}

.pay_list table{width:100%;}
.pay_list table caption{display: none}
.pay_list th,.pay_list td{padding:20px 5px;text-align: center;vertical-align: middle;border-bottom:1px solid #ddd;}
.pay_list th{font-size:15px;}
.pay_list td{font-size: 14px;}
.pay_list tr:last-child td{border-bottom:none;}


.pay_list td .btn_s_gray{background: #7D7D7D;color:#fff;padding:10px 5px;font-size: 13px}


/* ==========================================================================
                                 Footer
========================================================================== */


.footer .logo img{width:80px;}
.footer p{line-height: 1.5em;padding:5px 0 0;}


/* modal popup*/
.modal_wrap {display: none;position: fixed;z-index: 10;padding-top: 100px;left: 0;top: 0;width: 100%; height: 100%; overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
.modal {position: relative;background-color: #fefefe;margin: auto;padding: 20px;border: 1px solid #888;width: 80%;max-width: 600px; z-index: 99;}
.modal_wrap.alert .modal{position: absolute; left: 50%; transform: translate(-50%, 0);width: 80%;max-width: 300px; z-index: 999;}
.modal_tit{padding:20px 0;text-align: center;border-bottom: 1px solid #ccc;}
.modal_con{width:100%;margin:20px 0;text-align: center;}
.modal_scroll{height: 100%; max-height: 400px;overflow-y: auto;;line-height: 1.5em;font-size:13px;}
.modal_scroll iframe{width:100%;height: 100%;}
.modal_btn a{display: inline-block;width:100%;background: #225982;padding:10px 0;margin-top:20px;text-align: center;color: #fff;cursor: pointer;}



/* ==========================================================================
                                 LOADING
========================================================================== */
.loading_wrap{position:fixed;width:100%;height: 100%;top:0;left:0;background-color: rgba(0,0,10,0.5);z-index: 9999;display:none;}
.loading_wrap span{text-align: center;position: absolute;top:50%;left:50%;margin:-20px 0 0 -20px;width:40px}
.loading_wrap span img{width:100%;}



/* ==========================================================================
                                 B2C
========================================================================== */
.product_img{width:100%;display: inline-block;text-align: center;margin:8px 0 16px;}
.product_img img {height: 160px;width:auto;}
.product_list .price{margin: 20px 0 0;}
.product_list .price_tit{display: inline-block;padding: 16px 0 0}
.product_list .price_won{display: inline-block;padding: 16px 0 0}
.product_list .ctrType_tit{display: inline-block;padding: 16px 0 0;font-weight: none}
.product_list .radio_20{width:20px;height:20px; vertical-align: -4px;}

.product_list .btn{background: #225982;margin-top:20px;}
.contract .product_list .box{display: block;border-bottom:1px solid #ccc;padding: 16px 25px 4px;}
.contract .product_list .box:last-child{border-bottom: none}

.cate button{background:#F4F4FB;padding:4px 8px;margin: 4px 8px 4px 0;font-size:13px;border:none;cursor:pointer}
.cate button.active{background:#225982;color:#fff;font-weight: bold;}

.qr {text-align: center;}
.qr img {width: 100%;max-width: 250px;}
.qr_tit{line-height: 40px;font-weight: bold;}
.dqr {text-align: center;}

@media all and (min-width:600px) {
	.inner {max-width: 100%}

}


@media all and (min-width:768px) {
	h2 { font-size: 20px;}
	.header.inner{padding:20px 80px;}
	.inner {max-width: 600px;padding: 20px 0;}

	.con {
		padding: 30px 80px;
		border: 1px solid #D6D6D6;
		background: #fff;
		-moz-box-shadow: 2px 3px 4px #D5DFE6;
		/* FF3.5+ */
		-webkit-box-shadow: 2px 2px 4px #D5DFE6;
		/* Saf3.0+, Chrome */
		-ms-box-shadow: 2px 3px 4px #D5DFE6;
		/* Saf3.0+, Chrome */
		box-shadow: 2px 3px 4px #D5DFE6;
		/* Opera 10.5, IE 9.0 */
		filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#D5DFE6');
		/* IE6,IE7 */
		-ms-filter: "progid:DmageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#D5DFE6')";
		/* IE8 */
	}

    .wrap_b2c .inner {width:100%;max-width: 1000px;box-sizing: border-box}
    .wrap_b2c .con {padding: 30px 40px;}
	.contract a .arrow{top:15px;}
	.contract {border: 0;}
	.contract li {background: #fff;}
	.contract li:last-child {border: 0;}
	.contract .tit {font-size: 18px}
	.noti li {font-size: 14px;}

	.warp_pi .con {padding: 30px 40px;border: 1px solid #F5F5F5;}
	.warp_pi .inner_pi{padding:20px}
	.pay_list_tit{display: none;}
	.pay_list th,.pay_list td{padding:10px;}
	.pay_list th{padding:20px 5px;}
	.pay_list td{border-bottom: none}
	.pay_list td .btn_s_gray{background: #7D7D7D;color:#fff;padding:9px 20px 10px;font-size: 14px}
}


/* ==========================================================================
                                 B2B
========================================================================== */
.list-btn_group{padding:16px 0;box-sizing: border-box}
.wrap_b2c .input_btn.btn{background: #225982;border:1px solid #225982}
.list-head {background-color: #F4F4FB;padding:16px 0;font-weight: bold;text-align: center}

.list-item{box-sizing: border-box;}
.list-item > div{text-align: center;padding: 16px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}

.list-item .list-subject{width: 100%;padding:0 0 0 20px;box-sizing: border-box;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}


.wrap_b2c .input_grp{
    height: 30px;
    padding:0;

}
.wrap_b2c .input_btn {
    width: 100%;
    height: 30px;
    padding: 7px 0;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 5px 0;
    text-align: center;
}


.list-item-chk{order:1}
.list-item-seq{order:3}
.list-item-mid{order:4}
.list-item-name{order:5}
.list-item-subject{order:6}
.list-item-day{order:7}

.list-item .list-item-img{order:2;padding:4px 4px 4px 0;}
.list-item-img img{width:100%;}


.paginate {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 40px 0 12px 0;
}
.paginate .page_btn a {
    display: inline-block;
    color: #777;
    font-size: 12px;
    margin: 0 4px;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    line-height: 28px;
}
.paginate .page_btn .active {
    background: #44217a;
    color: #fff;
    border-radius: 4px;
}
.paginate .page_btn .prev {
    background: url(../img/btn.png) no-repeat;
    background-position: -90px -90px;
}
.paginate .page_btn .before {
    background: url(../img/btn.png) no-repeat;
    background-position: -30px 0;
}
.paginate .page_btn .after {
    background: url(../img/btn.png) no-repeat;
    background-position: 0px 0;
}
.paginate .page_btn .next {
    background: url(../img/btn.png) no-repeat;
    background-position: -60px -90px;
}




@media all and (max-width:768px) {
    .list-btn_group{padding:16px;}
    .wrap_b2c .input_grp{height: 40px;padding:4px 0}
    .wrap_b2c .input_btn{height: 40px;padding:12px 0}
    .list-body{}
    .list-item{border-top:1px solid #ccc;padding:12px;box-sizing: border-box;}
    .list-item:last-child{border-bottom:1px solid #ccc;}
    .list-item > div{text-align: left; padding: 4px 0;color:#666;display: block;}
    .list-item .list-item-chk{order:1;}
    .list-item-seq{order:2}
    .list-item .list-item-img{order:4;}
    .list-item-mid{order:6}
    .list-item-name{order:7}
    .list-item-subject{order:5;font-weight: bold;font-size: 16px;}
    .list-item-subject .list-subject{padding:8px 0 ;color:#000;white-space: normal;}
    .list-item-day{order:3;text-align: right!important;}
    .cate button{background:#fff;padding:4px 8px;margin-right: 4px;border: 1px solid #ccc;}
    .cate button.active{background:#225982;color:#fff;font-weight: bold;}
}


/* ==========================================================================
                                 TOP-processbar
========================================================================== */

/*  .completed - 완료된 Step
    .active - 진행중인 Step */

.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

@media all and (max-width:768px) {
    .stepper-wrapper {
        padding-top: 20px;
    }
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  
    @media (max-width: 768px) {
      font-size: 12px;
    }
}
  
.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ddd;
    width: 100%;
    top: 15px;
    left: -50%;
}
  
.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ddd;
    width: 100%;
    top: 15px;
    left: 50%;
}
  
.stepper-item .step-counter {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ddd;
    border: 2px solid #ddd;
    margin-bottom: 6px;
}

.stepper-item .step-name {
    font-weight: bold;
}

.stepper-item.active .step-counter {
    font-weight: bold;
    background-color: #fff;
    border: 2px solid #EC224B;
    color: #EC224B;
}
  
.stepper-item.completed .step-counter {
    background-color: #EC224B;
    border: 2px solid #EC224B;
    color: #fff;
}
  
.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #EC224B;
    width: 100%;
    top: 15px;
    left: 50%;
    z-index: 1;
}
  
.stepper-item:first-child::before {
    content: none;
}

.stepper-item:last-child::after {
    content: none;
}

.top-process {
    display: none;
}

.top-process.active {
    display: block;
    font-size: 15px;
}

.top-step-text {
   border-bottom: 1px solid #d6d6d6;
}

.contract .top-step.fix{
    position: fixed;
    top: 0; 
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 600px;
    padding: 5px 0 0 0;
    height: 120px;
    z-index: 6;
}

@media all and (min-width:768px) {
    .contract .top-step.fix {
        padding: 20px 80px 0 80px;
        height: 100px;
        z-index: 6;
    }
}

.contract .top-step.fix .top-step-text{
    padding-bottom: 0;
}

/* tooltip */

.step-counter span {
    padding: .5em 1em;
    margin: .5em;
    display: inline-block;
}

[tooltip] {
    position: relative; /* opinion 1 */
}

[tooltip]::before, [tooltip]::after {
    text-transform: none; /* opinion 2 */
    font-size: .9em; /* opinion 3 */
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
}

[tooltip]::before {
    content: '';
    border: 5px solid transparent; /* opinion 4 */
    z-index: 7; /* absurdity 1 */
}

[tooltip]::after {
    content: attr(tooltip); /* magic! */
    text-align: center;
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1.5ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #444;
    border-radius: 7px;
    color: #fff;
    z-index: 7; 
}

[tooltip]:hover::before, [tooltip]:hover::after {
    display: block;
}

@media all and (max-width:768px) {
    .step-counter .pc {
        display: none;
    } 
    .step-counter .mobile {
        display: block;
    } 
}

@media all and (min-width:769px) {
    .step-counter .pc {
        display: block;
    } 
    .step-counter .mobile {
        display: none;
    } 
}

[tooltip='']::before, [tooltip='']::after {
    display: none !important;
}

[tooltip][flow^="down"]::before {
    top: 120%;
    border-top-width: 0;
    border-bottom-color: #444;
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 10px);
}

[tooltip][flow^="down"]::before, 
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}

.mobile-01[tooltip][flow^="down"]::before {
    top: 120%;
    border-top-width: 0;
    border-bottom-color: #444;
}

.mobile-01[tooltip][flow^="down"]::after {
    top: calc(100% + 10px);
    left: 100%;
}

.mobile-02[tooltip][flow^="down"]::before {
    top: 120%;
    border-top-width: 0;
    border-bottom-color: #444;
}

.mobile-02[tooltip][flow^="down"]::after {
    top: calc(100% + 10px);
    left: 0%;
}

@keyframes tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}
  
@keyframes tooltips-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%);
    }
}
 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
}
  
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
}