/*
       ******************* internetPopup *******************
*/

.internetPopup .cl_csPopup {display: flex;}
.internetPopup .cl_csPopup .popupWin {position:relative; width: 770px;  background-color:#ffffff; box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;}
.internetPopup .cl_csPopup .popupWin .popupTitle { padding: 60px 0; }
.internetPopup .cl_csPopup .popupWin .popupContent { padding: 60px 0; }



/*
       ******************* internetJoin *******************
*/
/*그리드*/
/*.internetJoin .gridWrapper { overflow: hidden;}*/
/*.internetJoin .gridWrapper .title {font-size:26px; font-family:"NotoSansB"; margin-bottom:15px; margin-left:15px;}*/

/*.internetJoin .gridWrapper .grid { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-bottom: 50px; box-sizing: border-box;}*/
/*.internetJoin .gridWrapper .grid:nth-last-child(1) { margin-bottom: 70px; }*/
/*.internetJoin .gridWrapper .grid .gridCell {position:relative; width: calc(100%/3 - 10px); background-color:#fff; text-align: center; border: 1px solid #d8d8d8; padding: 20px 20px;  box-sizing:border-box; border-radius: 15px; margin: 5px 5px; cursor: pointer; }*/
/*.internetJoin .gridWrapper .grid .gridCell img {max-width:100%; max-height:65px;}*/
/*.internetJoin .gridWrapper .grid .gridCell.on { position: relative;  box-sizing: border-box; }*/
/*.internetJoin .gridWrapper .grid .gridCell.on::after { content: ''; display: block; position: absolute;border: 3px solid #5e71e4; width: 100%; height: 100%; top: 0; left: 0; border-radius: 15px; }*/

/*.internetJoin .gridWrapper .grid .gridCell .top { border-bottom: 2px solid #d8d8d8; padding-bottom: 15px; margin-bottom: 15px; }*/
/*.internetJoin .gridWrapper .grid .gridCell .top p { font-size: 20px; color: #000000; font-family: 'NotoSansM'; }*/
/*.internetJoin .gridWrapper .grid .gridCell .top p .bold { font-family: 'NotoSansB'; }*/

/*.internetJoin .gridWrapper .grid .gridCell .bottom { font-size: 24px; color: #000000; font-family: 'NotoSansR'; }*/
/*.internetJoin .gridWrapper .grid .gridCell .bottom .bold { color: #5e71e4; font-family: 'NotoSansB'; }*/
/*.internetJoin .gridWrapper .grid .gridCell .labelName {position:absolute; top:5px; left:5px; background-color:#5E71E4; color:#fff; font-size:14px; border-radius:10px; padding:5px 7px;}*/
/*.internetJoin .gridWrapper .grid .gridCell .viewDetailButton {position:absolute; top:5px; right:5px; background-color: #f5b328; color:#fff; font-size:14px; border-radius:10px; padding:5px 7px;}*/


.internetJoin .cl_buttonCenter .cl_button.basic { margin-bottom: 70px; }


/*gridSwiper*/
.internetJoin {padding-top:60px;}
.internetJoin .gridWrapper { overflow: hidden; padding-top:10px;}
.internetJoin .gridWrapper .title {font-size:26px; font-family:"NotoSansB"; margin-bottom:15px; margin-left:15px;}
.internetJoin .gridSwiper {position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-bottom: 50px; box-sizing: border-box; }
.internetJoin .gridSwiper .swiper-wrapper { display: flex; justify-content: flex-start; align-items: center; }
.internetJoin .gridSwiper .swiper-slide .gridCell {position:relative;  background-color:#fff; text-align: center; border: 1px solid #d8d8d8; padding: 20px 20px;  box-sizing:border-box; border-radius: 15px; margin: 5px 5px; cursor: pointer; }
.internetJoin .gridSwiper .swiper-slide .gridCell img {max-width:100%; max-height:40px;}
.internetJoin .gridSwiper .swiper-slide .gridCell.on { position: relative;  box-sizing: border-box; }
.internetJoin .gridSwiper .swiper-slide .gridCell.on::after { content: ''; display: block; position: absolute;border: 3px solid #5e71e4; width: 100%; height: 100%; top: 0; left: 0; border-radius: 15px; }
.internetJoin .gridSwiper .swiper-slide .gridCell .top { border-bottom: 2px solid #d8d8d8; padding-bottom: 15px; margin-bottom: 15px; }
.internetJoin .gridSwiper .swiper-slide .gridCell .top p { font-size: 18px; color: #000000; font-family: 'NotoSansM'; }
.internetJoin .gridSwiper .swiper-slide .gridCell .top p .bold { font-family: 'NotoSansB'; }
.internetJoin .gridSwiper .swiper-slide .gridCell .bottom { font-size: 24px; color: #000000; font-family: 'NotoSansR'; }
.internetJoin .gridSwiper .swiper-slide .gridCell .bottom .bold { color: #5e71e4; font-family: 'NotoSansB'; }
.internetJoin .gridSwiper .swiper-slide .gridCell .labelName {position:absolute; top:5px; left:5px; background-color:#5E71E4; color:#fff; font-size:14px; border-radius:10px; padding:5px 7px;}
.internetJoin .gridSwiper .swiper-slide .gridCell .viewDetailButton {position:absolute; top:5px; right:5px; background-color: #f5b328; color:#fff; font-size:14px; border-radius:10px; padding:5px 7px;}
.internetJoin .gridSwiper .swiper-button-next, .internetJoin .gridSwiper .swiper-button-prev {color: #c8c8c8; height: 35px;}
.internetJoin .gridSwiper .swiper-button-next::after, .internetJoin .gridSwiper .swiper-button-prev::after {font-size: 35px;}

.internetJoin .giftGuideButton {width:80%; margin:20px auto; background-color:#5E71E4; font-size:20px; color:#fff; text-align:center; padding:15px; cursor:pointer;}
.internetJoin .mustReadButtonWrapper {text-align:right; margin-bottom:15px;}
.internetJoin .mustReadButtonWrapper .mustReadButton {position:relative; display:inline-block; padding:7px 15px; background-color: #ef0606; color:#fff; font-size:16px; text-align:center;}

.telecomAgreementPopup {display:none;}
.telecomAgreementPopup .popupWin {position: relative;}
.telecomAgreementPopup .cl_csPopup .closeButton {position:absolute; right:15px; top:15px; font-size:20px; cursor:pointer;}
.telecomAgreementPopup .cl_pageTitle {margin-top:15px; margin-bottom:20px;}
.telecomAgreementPopup .popupContent {height:calc(100vh - 200px); overflow-y:scroll; padding:15px !important;}
.telecomAgreementPopup .telecomAgreementText {font-size:14px !important; text-align: left !important;}
.telecomAgreementPopup .telecomAgreementText .checkbox {font-weight:bold;}
.telecomAgreementPopup .telecomAgreementText .popupApplyButton {display:block; box-sizing:border-box; cursor:pointer; text-align:center; width:80%; margin:20px auto; padding:15px; font-size:20px; color:#fff; background-color:#5E71E4;}

/*selectProduct*/
.internetJoin .selectProductWrap { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 800px; padding: 0 50px; box-sizing: border-box;z-index: 11; margin-bottom: 120px;}
/*.internetJoin .selectProduct {  width: 100%; max-width: 800px; }*/
.internetJoin .selectProduct .title { display: flex; align-items: center; justify-content: flex-start; font-size: 24px; color: #000000; font-family: 'NotoSansB'; margin-bottom: 20px; }
.internetJoin .selectProduct .title img { padding-right: 5px; }
.internetJoin .selectProduct .selectBox {position: relative;  background-color: #fff; padding: 30px 50px; border:1px solid #e2e2e2; border-radius: 15px; box-sizing: border-box; }
.internetJoin .selectProduct .selectBox .foldButton {position:absolute; right:15px; top:15px;}
.internetJoin .selectProduct .selectBox .mainText{  font-size: 20px; color: #000000; font-family: 'NotoSansB'; padding-bottom: 20px; border-bottom: 1px solid #d8d8d8 }
.internetJoin .selectProduct .selectBox .discountContentText {display:none; margin-top:15px; border:2px solid #000; padding:10px;}
.internetJoin .selectProduct .selectBox .mainText .title {font-size:20px; padding:0; margin:0;}
.internetJoin .selectProduct .selectBox .mainText .discountContent {font-size:16px; padding:0;}
.internetJoin .selectProduct .selectBox .mainText .guideText {font-size:14px;}
.internetJoin .selectProduct .selectBox .bottom{ display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }
.internetJoin .selectProduct .selectBox .bottom .textWrap { font-size: 24px;color: #000000; font-family: 'NotoSansR'; }
.internetJoin .selectProduct .selectBox .bottom .textWrap .bold { font-family: 'NotoSansB'; color: #5e71e4; }
.internetJoin .selectProduct .minMaxButton {display:inline-block;}
.internetJoin .selectProduct .minMaxButton .max {display:inline-block; padding:3px 8px; font-size:18px; color:#333333; border:1px solid #e2e2e2;}
.internetJoin .selectProduct .minMaxButton .min {display:inline-block; padding:3px 8px; font-size:18px; color:#333333; border:1px solid #e2e2e2;}
.internetJoin .selectProduct .minMaxButton span.active {background-color:#0d6efd; color:#fff;}
.internetJoin .cl_button.mini { font-family: 'NotoSansM';  font-size: 30px;}

.internetJoin .closeBtn { position: absolute; top: 10px; right: 10px; cursor: pointer; }



@media(max-width: 768px) {
	
	.internetJoin .gridWrapper .title {font-size:16px;}
	.internetJoin .gridSwiper {margin-bottom:0;}
	.internetJoin .gridSwiper .swiper-slide .gridCell img {display: none;}
		
		/*
			   ******************* internetJoin *******************
		*/
	.internetJoin .gridWrapper .swiper-slide {
		justify-content: flex-start;
		margin-bottom: 10px;
	}
	
	/*.internetJoin .gridWrapper .swiper-slide:nth-last-child(1) {*/
	/*	margin-bottom: 20px;*/
	/*}*/
	
	.internetJoin .gridWrapper .swiper-slide .gridCell {
		/*width: calc(100% / 2 - 10px);*/
		padding: 10px 10px;
		margin: 0 5px;
		margin-bottom: 10px;
	}
	
	.internetJoin .gridWrapper .swiper-slide .gridCell .top {
		padding-bottom: 5px;
		margin-bottom: 5px;
	}
	
	.internetJoin .gridWrapper .swiper-slide .gridCell .top p {
		font-size: 14px;
	}
	
	.internetJoin .gridWrapper .swiper-slide .gridCell .bottom {
		font-size: 16px;
		color: #000000;
		font-family: 'NotoSansR';
	}
	
	.internetJoin .gridWrapper .swiper-slide .gridCell .labelName {
		font-size: 12px;
		padding: 3px 5px;
	}
	
	.internetJoin .gridWrapper .swiper-slide .gridCell .viewDetailButton {
		font-size: 12px;
		padding: 3px 5px;
	}
	
	.internetJoin .cl_buttonCenter .cl_button.basic {
		margin-bottom: 40px;
	}
	
	.internetJoin .giftGuideButton {font-size:15px; padding:10px; cursor:pointer;}
	.internetJoin .mustReadButtonWrapper .mustReadButton {font-size:14px;}
	
	.telecomAgreementPopup .popupWin {width:100% !important; height:95vh !important;}
	.telecomAgreementPopup .telecomAgreementText .popupApplyButton {margin:20px auto; padding:10px; font-size:18px;}
	
	/*selectProduct*/
	.internetJoin .selectProductWrap { padding: 0 15px; margin-bottom: 70px;}

	.internetJoin .selectProduct {
		/*margin-bottom: 70px;*/
	}
	
	.internetJoin .selectProduct .title {
		font-size: 18px;
		color: #000000;
		font-family: 'NotoSansB';
		margin-bottom: 10px;
	}
	
	.internetJoin .selectProduct .title img {
		padding-right: 5px;
	}
	
	.internetJoin .selectProduct .selectBox {
		padding: 20px 20px;
		border-radius: 15px;
		box-sizing: border-box;
	}
	
	.internetJoin .selectProduct .selectBox .mainText {
		font-size: 14px;
		padding-bottom: 10px;
		border-bottom: 1px solid #d8d8d8;
		margin-right: 30px;
	}
	
	.internetJoin .selectProduct .selectBox .discountContentText {margin-top:15px;}
	.internetJoin .selectProduct .selectBox .mainText .title {font-size:14px; padding:0; margin:0;}
	.internetJoin .selectProduct .selectBox .mainText .discountContent {font-size:14px; padding:10px 0;}
	.internetJoin .selectProduct .selectBox .mainText .guideText {font-size:12px;}
	
	.internetJoin .selectProduct .selectBox .bottom {
		margin-top: 20px;
	}
	
	.internetJoin .selectProduct .selectBox .bottom .textWrap {
		font-size: 14px;
	}
	
	.internetJoin .cl_button.mini {
		font-size: 16px;
	}
	
	
	.internetPopup .cl_csPopup .popupWin {
		position: relative;
		width: 320px;
	}
	
	.internetPopup .cl_csPopup .popupWin .popupTitle {
		padding: 30px 0;
	}
	
	.internetPopup .cl_csPopup .popupWin .popupContent {
		padding: 40px 0;
	}
	.internetJoin .gridSwiper .swiper-button-next, .internetJoin .gridSwiper .swiper-button-prev {height: 25px;}
	.internetJoin .gridSwiper .swiper-button-next::after, .internetJoin .gridSwiper .swiper-button-prev::after {font-size: 25px;}
	
	.internetJoin .selectProduct .minMaxButton .max {font-size:14px;}
	.internetJoin .selectProduct .minMaxButton .min {font-size:14px;}
}