@charset "utf-8";

/********************
** mainBanner
********************/
.mainBanner{background:url('/img/ceonet/mainBanner.jpg'); background-size:cover; background-position:center; overflow:hidden;}
.mainBannerBgImg{object-position: center; min-width: 1920px; bottom:0;}
.mainTxtBox{max-width:80%; }
.mainTxtBox3{margin-top:-3%}
.mainTxtBox2{margin-top:-9%}
.mainImg{max-width:1400px; min-width:1000px; bottom:0;}
.mainBtn{background: linear-gradient(to right, #C1FFFF 0%, #FFFFFF 50%, #C1FFFF 100%); bottom:54px; }



/********************
** benefit
********************/
.benefitBoxList{flex:1; border:1px solid #00DBDD;}
.tab-item {  transition: color 0.3s;  user-select: none;}
.tab-item:not(.active) { color: #D9DADE; }
.tab-indicator {  top: 50%;  left: 0;  height: 100%;  background: linear-gradient(45deg, rgba(5, 242, 242, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(5, 242, 242, 0.2) 100%);  border: 1px solid #05F2F2;  box-shadow: 0 0 8px #3EFCFF;  transition: all 0.5s cubic-bezier(0.5, 0, 0.1, 1);  transform: translateY(-50%);}
.benefitBox { display: none !important; }
.benefitBox.active-content {  display: flex !important;  animation: fadeIn 0.5s ease;}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}



/********************
** price
********************/
.price_brand_card {  border: 1px solid #26272B;  cursor: pointer;  transition: all 0.3s ease;  overflow: hidden;}
.price_brand_card.price_active, 
.price_internet_card.price_active {  background: linear-gradient(45deg, rgba(5, 242, 242, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(5, 242, 242, 0.2) 100%);   border: 2px solid #42F8DA;  box-shadow: 0 0 15px rgba(66, 248, 218, 0.2);}
.price_card_slider {  overflow-x: auto;  scroll-snap-type: x mandatory;  scroll-behavior: smooth;  -ms-overflow-style: none;  scrollbar-width: none;}
.price_card_slider::-webkit-scrollbar { display: none; }
.price_internet_card {  flex: 0 0 calc((100% - 48px) / 3);  scroll-snap-align: start;   border: 1px solid #37383E;  cursor: pointer;  transition: all 0.3s ease;}
/* [화살표 버튼 스타일] */
.price_arrow_btn {  top: 50%;  transform: translateY(-50%);  background-color: rgba(255, 255, 255, 0.15);  backdrop-filter: blur(5px);  cursor: pointer;  border: none;  transition: background 0.2s;}
.price_arrow_btn:hover { background-color: rgba(255, 255, 255, 0.3); }
/* 왼쪽/오른쪽 위치 지정 */
.btn_prev { left: -15px; }
.btn_next { right: -15px; }
.price_custom_radio {  cursor: pointer;}
.price_custom_radio input { display: none; }
.price_checkmark {  border: 2px solid #555;  transition: all 0.2s;}
.price_custom_radio input:checked + .price_checkmark {  background-color: #fff;  border-color: #fff;}
.price_checkmark::after {  content: '✔';  font-size: 12px;  color: #000;  display: none;}
.price_custom_radio input:checked + .price_checkmark::after { display: block; }
.price_custom_radio input:checked ~ span { color: #fff; font-weight: 600; }
/* --- 4. 요금표 테이블 --- */
.price_table {  border-collapse: collapse;  background-color: #37383E;  overflow: hidden;}
.price_table th {  border-right: 1px solid #CBD5E1;}
.price_table th:last-child { border-right: none; }
.price_table td {  border-bottom: 1px solid #37383E;  border-right: 1px solid #37383E;}
.price_table td:last-child { border-right: none; }
.price_table tr.price_active_row td {  background-color:#EDFFFE;  color: #000000;  border-right: 1px solid #D9DADE;}
/* --- 5. 총 금액 박스 --- */
.price_total_box {  background-color: rgba(255, 255, 255, 0.15);  border: 1px solid #05F2F2;  box-shadow: 0 0 20px rgba(66, 248, 218, 0.1);}


/********************
** faq
********************/
.faq{background:url('/img/ceonet/faqBg.jpg'); background-size:cover; background-position:center;}
.faqBox{display:grid; grid-template-columns: repeat(2 , 1fr);}


/********************
** qa
********************/
.online{background:url('/img/ceonet/formBg.jpg'); background-size:cover; overflow:hidden}
.online input[type="radio"]{left:-9999px}
.online input[type="radio"] + label{border:1px solid #D9DADE; background:#fefefe; cursor: pointer; transition: ease-in 0.3s;}
.online input[type="radio"]:checked + label{background:#00868D; border:1px solid #00868D; color:#fefefe}
.qaBox{border-radius:24px 24px 0 0; box-shadow:0 0 24px #3EFCFF}
.btnBox{display:grid; grid-template-columns:repeat(3, 1fr)}
.inputBox{ padding: 24px; border: 1px solid #D9DADE ;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}
.moreBtn{text-decoration: underline;}
.custom-checkbox{width: 20px; height: 20px; padding: 0; border: 1px solid #222; background-color: #fff; margin-right: 10px; transition: background-color 0.3s, border 0.3s; position: relative;}
.checkpolicy input[type="checkbox"] {display: none;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox{background-color: #00868D; border-color: #00868D;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox::after{content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 8px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}