@charset "utf-8";

/* */
.sub_wrap {position:relative; overflow:hidden; width:100%; margin:0 auto;}
.sub_wrap h2 {position:relative;font-size:1.7rem; text-align:center; font-weight:800; padding:4rem 0 0;}
.sub_wrap h2:after {content:""; display:block; margin:.8rem auto; width:200px; height:2px; background:#FFD300}

.sub_container h3 {position:relative; overflow:hidden; font-size:1.8rem; font-weight:600; padding:1rem 0; text-align:center;}
.sub_container h3:after {content:""; position:absolute; width: 10rem; height:2px; background:#FFD300; bottom:0; left:50%; margin-left:-5rem;}

/* 중고폰 검수단계 */
.sub_container .usedphone_step {position:relative; overflow: hidden; width:1200px; margin:4rem auto;}
.sub_container .usedphone_step li {float:left; width: 25%; text-align: center;} 
.sub_container .usedphone_step li strong {display: block; font-size:1rem; margin-top:0.8rem;} 
.sub_container .usedphone_ck {background:url('../img/sub/usedphone_bg.png')no-repeat; padding:2rem 0;} 
.sub_container .usedphone_ck h3 {color:#fff; margin-bottom:3rem;}
.sub_container .usedphone_ck h3:after {background:#fff;}
.sub_container .usedphone_lv, .sub_container .usedphone_ckinfo {width:1200px; margin:2rem auto 0; position:relative; overflow:hidden;}
.sub_container .usedphone_lv > li {float:left; width:23%; margin:0 1%; background:#888; border-radius: 10px;}
.sub_container .usedphone_lv > li > div {width:90%; margin:5% 5% 0; padding:0.6rem; background:#fff; border-radius: 6px; box-sizing: border-box;}
.sub_container .usedphone_lv > li > div h5 {font-family: "Jua"; position:relative; overflow:hidden; text-align:center; font-size:4.5rem;}
.sub_container .usedphone_lv > li:nth-child(1) > div h5 {color:#FFB300;}
.sub_container .usedphone_lv > li:nth-child(2) > div h5 {color:#FF5700;}
.sub_container .usedphone_lv > li:nth-child(3) > div h5 {color:#0077B6;}
.sub_container .usedphone_lv > li > div h5:after {content:""; position:absolute; width:100px; height:1px; left:50%; bottom:0; margin-left:-50px; background:#ddd;}
.sub_container .usedphone_lv > li > div h5 small {display:block; color:#888; font-size:1.1rem; margin-top:0.6rem;}
.sub_container .usedphone_lv > li > p {text-align:center; color:#ddd; font-size:0.8rem; padding:0.3rem;}
.sub_container .usedphone_lv > li > div > ul {margin:1rem 0.6rem 0.6rem;}
.sub_container .usedphone_lv > li > div > ul > li {font-size:0.85rem; margin-bottom:0.5rem; color:#555; padding-left:1.4rem; background:url('../img/sub/usedphone_ck.png') 0 3px no-repeat;}
.sub_container .usedphone_ckinfo li {color:#ddd; font-size:0.85rem; padding:0.3rem 1rem; display:block;}
.sub_container .usedphone_ckinfo li:before {content:""; width:6px; height:6px; background:#888; display:inline-block; margin-right:0.5rem; vertical-align: middle;}

/* 선불폰 */
/* sub-free */
.free_phone {margin-bottom:2rem;}
.free_phone .free_gd {position:relative; overflow:hidden; margin:1rem auto; max-width:1200px;}
.free_phone .free_gd li {float:left; width:46%; margin:2%;}
.free_phone .free_gd li img {width:100%}
.free_phone .free_info {text-align:center; background:#ff5a01}

.africa01 .free_info {max-width:1200px; text-align:center; padding-top:5rem;margin:0 auto 5rem; }

.mvno_price {position:relative; overflow:hidden;}
.mvno_price ul {max-width:1200px; margin:0 auto; position:relative; overflow:hidden; background:url("./../img/sub/mvno-bg.png") no-repeat; background-size:contain;}
.mvno_price ul li {float:left; width:50%;}
.mvno_price ul li img {width:100%;}

@media screen and (max-width:1200px) {
.sub_wrap h2 {padding:2rem 0 0;}
.africa01 .free_info {padding:1rem;}
.free_phone .free_info img, .africa01 section img {width:100%;}
}
@media screen and (max-width:768px) {
.sub_wrap h2 {font-size:1.2rem;}
}
@media screen and (max-width:580px) {
.mvno_price ul {background:none;}
.mvno_price ul li {float:none; width:100%; background:#ffd716}
.mvno_price ul li:first-child {background:#0077b6}
}

/* 201804 요금테이블 */
.tbl_rate{max-width:1200px; width: 100%; margin:0 auto;}
.tbl_rate caption{visibility: hidden; height: 0px}
.tbl_rate th {font-size: 15px; font-weight: normal; background-color: #ebebeb; height: 66px; border-bottom: solid 1px #ccc; text-align: center; line-height: 110%}
.tbl_rate th .title {float: left; margin-left:0px}
.tbl_rate th .dspec, .tbl_rate td .dspec {font-size: 14px;}
.tbl_rate .prdname {padding-left: 30px; font-size: 18px; font-weight:600; text-align: left; letter-spacing: -1px}
.tbl_rate .prdname span{float: left}
.tbl_rate td {height: 80px; text-align: center; font-size: 17px; line-height:100%; border-bottom: solid 1px #ccc; }
.tbl_rate td:first-child{border-left: solid 1px #ccc}
.tbl_rate td:last-child{border-right: solid 1px #ccc}
.tbl_rate td .spec{ font-size: 14px}
.tbl_rate .btn {  -webkit-border-radius: 28;  -moz-border-radius: 28;  border-radius: 28px;  color: #336699;  font-size:16px; font-weight: bold;  padding: 4px 11px 5px 10px;  border: solid #336699 2px;  text-decoration: none; cursor: pointer; line-height: 100%}
.tbl_rate .btn:hover {	color: #FFFFFF;  background: #336699;  text-decoration: none;}
.tbl_rate .on {color: #FFFFFF;  background: #336699;  text-decoration: none;}
.tbl_rate .price{font-size: 23px; color: #336699; font-weight: bold; padding:0px 5px;}
.pdl30 {padding-left: 30px !important;}

/* 요금제리스트 상품태그 6종 */
.prodname_tag{padding-bottom: 3px; display: inline-block;}
.prodname_tag li{font-size: 12px;  border-radius:0!Important; background-color:#fff!Important; padding: 0px 5px 0px;  margin-left: 0;  margin-bottom: 4px;  margin-right: 5px!Important;  min-width: 20px;  white-space: nowrap; float: left; width:auto!Important; height:auto!Important; box-shadow:none!Important;}
.tag_event {color: #ff3300!Important;  border: solid 1px #ff3300!Important; line-height: 150%;  }
.tag_best {color: #936dff!Important; border: solid 1px #936dff!Important; line-height: 150%; }
.tag_recommend {color: #4fac17!Important; border: solid 1px #4fac17!Important; line-height: 150%; }
.tag_special {color: #ff5bc9!Important;  border: solid 1px #ff5bc9!Important; line-height: 150%; }
.tag_new {color: #3c90ff!Important;  border: solid 1px #3c90ff!Important; line-height: 150%;  }	
.tag_gift {color: #ff9200!Important;  border: solid 1px #ff9200!Important; line-height: 150%;  }
.lg_t, .kt_t, .skt_t{float: left; padding-right:0 4px; color:#fff; font-size:13px;}
.lg_t{background:#2e569a; height:22px; width:37px; line-height:22px; border-radius:3px; display:inline-block;}
.kt_t{background:#ff5200; height:22px; width:37px; line-height:22px; border-radius:3px; display:inline-block;}
.skt_t{background:#f90; height:22px; width:37px; line-height:22px; border-radius:3px; display:inline-block;}

@media (max-width:768px) {
	.tbl_rate td {height:60px; padding:0 10px; font-size:15px;}
	.tbl_rate th, .tbl_rate td {white-space: nowrap;}
	.tbl_rate .prdname {font-size:16px;}
	.tbl_rate {min-width:700px;}
	.free_price {padding: 0 20px;}
	/* Scrollable table styling */
	.scrollable.has-scroll {position:relative; overflow:hidden; margin-bottom:20px;}
	.scrollable.has-scroll:after {position:absolute;top:0;left:100%;width:50px;	height:100%; border-radius:10px 0 0 10px / 50% 0 0 50%;	box-shadow:-5px 0 10px rgba(0, 0, 0, 0.25); content:'';	}
	.scrollable.has-scroll > div {overflow-x:auto;}
	.scrollable > div::-webkit-scrollbar {height:12px;}
	.scrollable > div::-webkit-scrollbar-track {box-shadow:0 0 2px rgba(0,0,0,0.15) inset;background:#f0f0f0;}
	.scrollable > div::-webkit-scrollbar-thumb {border-radius:6px;background:#ccc;}
}

/* 체인지사 안내 */
.africa02 .chain_top {position:relative; overflow:hidden; max-width:1200px; text-align:center; margin:80px auto;}
.africa02 .chain_top h4 {font-size:2.1rem; font-weight:800; margin-bottom:2rem;}
.africa02 .chain_top h4 b {color:#0077B6;}
.africa02 .chain_step h4 {position:relative; overflow:hidden; font-size:1.8rem; font-weight:800; padding:1rem 0; text-align:center; color:#fff; }
.africa02 .chain_step h4:after {content:""; position:absolute; width: 10rem; height:2px; background:#fff; bottom:0; left:50%; margin-left:-5rem;}
.africa02 .chain_step {width:100%; background:url('../img/main/main_chain_bg.jpg') top center;padding:50px 0;}
.africa02 .chain_step ol {position:relative; overflow:hidden; max-width:1200px; margin:80px auto 20px;}
.africa02 .chain_step ol li {position:relative; float:left; width:30.333%; height: 300px; color:#fff; margin: 0 1.5%;}
.africa02 .chain_step ol li b {display:block; margin:0 auto 15px; text-align:center; width:160px; height:160px; border-radius:50%; border:2px solid #fff; font-size:1.3rem;}
.africa02 .chain_step ol li i {display: block; font-size: 2.6rem; margin: 1.7rem 0 0.4rem; color: #ffe100;}
.africa02 .chain_step ol li p {color:#fff; font-size:.7rem;}
.africa02 .chain_step ol li:nth-child(4),.africa02 .chain_step ol li:nth-child(5), .africa02 .chain_step ol li:nth-child(6) {float:right;}
.africa02 .chain_step ol li:after {content:""; width:20px; height:50px; position:absolute; right:-1rem; top:20%; background:url('../img/blt_chain_step.png');}
.africa02 .chain_step ol li:nth-child(3):after {bottom:.5rem; right:45%; top:auto; transform: rotate( 90deg );}
.africa02 .chain_step ol li:nth-child(4):after, .africa02 .chain_step ol li:nth-child(5):after {right:auto; left:-1rem; transform: rotate( 180deg );}
.africa02 .chain_step ol li.fin:after {display:none;}

.africa02 .chain_cont {position:relative; overflow:hidden; max-width:1200px; margin:1.5rem auto 4rem; line-height:1.7; }
.africa02 .chain_cont p {padding:1rem 0;}

.africa02 .chain_ck {position:relative; overflow:hidden; max-width:1200px; margin:2rem auto;}
.africa02 .chain_ck h5, .africa02 .chain_ad h5 {font-size:1.4rem; font-weight:800;}
.africa02 .chain_ck h5 b, .africa02 .chain_ad h5 b {color:#0077B6}
.africa02 .chain_ck ul {position:relative; overflow:hidden; margin-top:2.4rem;}
.africa02 .chain_ck ul li {float:left; width:50%; min-height:12rem;}
.africa02 .chain_ck ul li img {float:left; width:20%;}
.africa02 .chain_ck ul li div {float:left; width:76%; margin-right:4%; padding-left:1rem; box-sizing:border-box;}
.africa02 .chain_ck ul li h6 {font-size:1rem; font-weight:600; margin-bottom:.5rem;}
.africa02 .chain_ck ul li p {font-size:.75rem;}

.africa02 .chain_ad {text-align:center;}
.africa02 .chain_ad h5 {max-width:1200px; margin:0 auto; text-align:left; margin-bottom:2rem;}
.africa02 .chain_ad ul li {margin-bottom:2rem;}
.africa02 .chain_ad ul li p {font-size:.9rem; padding:.5rem;}

@media screen and (max-width:1200px) {
    .africa02 .chain_ad img {width:100%;}
}
@media screen and (max-width:980px) {
	.africa02 .chain_ck ul li p {font-size: .7rem;}
	.africa02 .chain_step {background-size:cover;}
}
@media screen and (max-width:780px) {
	.africa02 .chain_ck ul li {float: none; overflow: hidden; width: 100%; min-height: auto; margin-bottom: 1rem;}
	.africa02 .chain_top {margin:40px auto;}
	.africa02 .chain_top h4 {font-size: 1.5rem; letter-spacing: -1px; margin-bottom: 1rem;}
	.africa02 .chain_step {padding:20px 0;}
	.africa02 .chain_step ol {margin:40px auto 0;}
	.africa02 .chain_step ol li {width: 47%;}
	.africa02 .chain_step ol li:nth-child(3),.africa02 .chain_step ol li:nth-child(4){float:right;}
	.africa02 .chain_step ol li:nth-child(5), .africa02 .chain_step ol li:nth-child(6) {float:left;}
	.africa02 .chain_step ol li:nth-child(2):after, .africa02 .chain_step ol li:nth-child(4):after{bottom:0; left:48%; top:auto; transform: rotate( 90deg );}
	.africa02 .chain_step ol li:nth-child(3):after {right:auto; left:-1rem; top:20%; transform: rotate( 180deg );}
	.africa02 .chain_step ol li:nth-child(5):after {left:auto; right:-1rem; transform: rotate( 0deg );}
	.africa02 .chain_step ol li b {width:140px; height:140px; font-size: 1.2rem;}
	.africa02 .chain_step ol li b i {font-size: 2rem;}
	.africa02 .chain_cont p {font-size:.75rem; padding:.5rem 0;}
	.africa02 .chain_cont, .africa02 .chain_top, .africa02 .chain_ck, .africa02 .chain_ad {padding:0 .8rem;}
}
@media screen and (max-width:540px) {
	.africa02 .chain_step ol li p {font-size:.65rem;}
}

/* 창업추천지역 */
.africa_lo .chain_top {position:relative; overflow:hidden; max-width:1200px; text-align:center; margin:4rem auto 3rem;}
.africa_lo .chain_top h4 {font-size:2.1rem; font-weight:800; margin-bottom:1rem;}
.africa_lo .chain_top h4 b {color:#0077B6;}
.africa_lo .chain_lo {margin-bottom:2rem;}
.africa_lo .chain_lo svg {width:100%; max-height:1000px;}
.africa_lo .chain_lo svg .hit {cursor:pointer}

/* The Modal (background) */
.modal-button {background:transparent; border:none;}
.modal {
    display: none; 
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0; 
	padding-top: calc(100px + 15%);
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
	border-radius:10px;
    width: 50%;
	height:auto;
	overflow:auto;
	box-sizing:border-box;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
.modal-content::-webkit-scrollbar {width: 10px;}
.modal-content::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;}
.modal-content::-webkit-scrollbar-track {background-color: #fff; border-radius: 10px;}

.modal-header {text-align:center;}
.modal-header span {display:block; border-bottom:1px solid #dbdbdb; padding:10px; font-size:0.8rem; color:#888; margin-bottom:1rem;}
.modal-header h5 p {font-weight:800; color:#000; font-size:2.2rem; line-height:1.2;}
.modal-header h5 small {display:block;color:#2ca8a9; font-size:1.1rem; vertical-align:bottom;}
.modal-body {position:relative; margin-top:1rem; background:#2ca8a9; color:#fff; font-size:1rem; padding:2rem;}
.modal-body:before {content:""; position:absolute; left:50%; top:0; margin-left:-20px; width:0px; height:0px; border-top:15px solid #fff; border-bottom:none; border-right: 20px solid transparent; border-left: 20px solid  transparent;}
.modal-body ul {position:relative; overflow:hidden;}
.modal-body li {float:left; width:50%; padding:.5rem 0;}
.modal-body li:before {content:""; display:inline-block; width:4px; height:4px; margin:5px; background:#fff;}
.under_close {display:block; padding:.8rem; text-align:center; background:#078d8e; color:#044d4e; font-size:.9rem;}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@media screen and (max-width:1020px) {
	.africa_lo .chain_top {width:95%}
	.modal {padding-top: calc(100px + 20%);}
}
@media screen and (max-width:768px) {
	.modal-content {width:80%;}
}