@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* common content */
#content{ min-height:300px; padding: 82rem 0 90rem; }
.sub_title{ margin-bottom: 1em; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 0.83333333em; border-bottom: 1px solid #ddd; font-size:var(--fs30); }
.sub_title h2{ font-size: inherit; }
.sub_title .about_h2 {display: flex; gap: 10rem; align-items: center; font-size:var(--fs35);}
.sub_title h2 .small {font-size: var(--fs25); font-weight: 600;}

/* breadcrumb */
.breadcrumb{ position: relative; top: -5rem; display: flex; align-items: center; justify-content: end; font-size: 13rem; font-weight: 300; color: #555; }
.breadcrumb__home{ position: relative; width: 12rem; height: 12rem; background: url('/images/content/breadcrumb_home.png') no-repeat 50% / contain; }
.breadcrumb__p:empty{ display: none; }
.breadcrumb__p::before{ content: ''; position: relative; top: 1rem; margin: 0 13rem 0 14rem; display: inline-block; width: 6rem; height: 11rem; background: url('/images/content/breadcrumb_arr.png') no-repeat 50% / contain; }


#sub_container {padding: 40rem 0 0;}
.sub_title {display: flex; justify-content: space-between; padding-bottom: 20rem; border-bottom: 1px solid #eee;}
.sub_title h2 {font-size: 30rem; color: #111; font-weight: 800;}
.sub_title .sub_util {display: flex; align-items: center;}
.sub_title .sub_util li {position: relative; font-size: 14rem; color: #666;}
.sub_title .sub_util li::before {content: ''; display: inline-block; width: 10rem; height: 10rem; margin: 0 10rem; background:url(/images/common/next_arrow.svg) no-repeat center / contain; opacity: .4;}
.sub_title .sub_util li.home img {height: 14rem; margin-top: 1rem; opacity: .6;}
.sub_title .sub_util li.home::before {display: none;}

h3 {padding: 12rem 7rem;}

#sub_container #content {padding: 0rem 0 40rem;}

.area_btn {margin-top: 30rem; text-align: center;}
.area_btn .button {min-width: 175rem; height: 60rem; margin: 0 2rem; line-height: 58rem; font-weight: 500;}
.area_btn .button.black {background:#222;}
.area_btn .button.color {background:#e5007b; border-color: #e5007b;}


/* common table */
.common_table{ border-top: 2px solid #222; text-align: center; }
.common_table :is(th, td){ padding: 14rem 1em 12rem; border: 1rem solid #e5e5e5; }
.common_table col:is(:nth-of-type(1), :nth-of-type(2)){ width: 18.33333333%; }
.common_table :is(th, td):first-child{ border-left: 0; }
.common_table :is(th, td):last-child{ border-right: 0; }
.common_table :is(thead, tfoot){ background: #f6f7f9; font-size: 17rem; font-weight: 500; }


/* 인터넷 공통 */
.area_internet .sub_title {justify-content: space-between; padding-bottom: 60rem; align-items: center;}
.area_internet .sub_title img {height: 80rem;}
.area_internet .area_product > p {margin-bottom: 20rem; text-align: right; }
.area_internet .area_product > p span {position: relative; padding-left: 20rem; font-weight: 500;}
.area_internet .area_product > p span::before {position:absolute; left: 0; top: 2rem; content:''; width: 14rem; height: 14rem; background:url(/images/content/icon_check_pink.svg) no-repeat center;}
.area_internet .prd_list {display: flex; margin-bottom: 60rem;}
.area_internet .prd_list h3 {flex-basis: 20%; padding: 15rem 0 0; font-size: 27rem; font-weight: 800; color: #000; position: relative; margin-bottom: 20rem;}
.area_internet .prd_list h3::before {content: ''; display: block; width: 25rem; height: 4rem; background: var(--primary); position: absolute; top: 0;}
.area_internet .prd_list ul {flex-basis: 80%; display: grid; gap: 40rem 20rem; grid-template-columns: repeat(3, 1fr);}
.area_internet .prd_list ul li {position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; min-height: 173rem; padding: 20rem; color: #111; box-sizing: border-box; border: 1rem solid #ddd; cursor: pointer; transition:all .3s; border-radius: 20rem;}
.area_internet .prd_list ul li > * {flex-basis: 100%; transition: .3s;}
.area_internet .prd_list ul li::after {position:absolute; right: 25rem; bottom: 30rem; content: ''; width: 25rem; height: 21rem; background: url(/images/content/icon_check.svg) no-repeat center;}
.area_internet .prd_list ul li i {display: inline-block; margin-bottom: 15rem; font-weight: 700; font-size: 20rem; padding-bottom: 10rem; border-bottom: 1px solid #ededed;}
.area_internet .prd_list ul li em.mark01 {background: url(/images/content/mark01.png) no-repeat center/cover; position: absolute;right: 20rem;top: -25rem; width: 77rem; display: block;aspect-ratio: 77/86; font-size: 0;}
.area_internet .prd_list ul li em.mark02 {background: url(/images/content/mark02.png) no-repeat center/cover; position: absolute;right: 20rem;top: -25rem; width: 77rem; display: block;aspect-ratio: 77/86; font-size: 0;}
.area_internet .prd_list ul li em.mark03 {background: url(/images/content/mark03.png) no-repeat center/cover; position: absolute;right: 20rem;top: -25rem; width: 77rem; display: block;aspect-ratio: 77/86; font-size: 0;}
/* .area_internet .prd_list ul li:nth-child(2) em {background: url(/images/content/mark02.png) no-repeat center/cover;}
.area_internet .prd_list ul li:nth-child(3) em {background: url(/images/content/mark03.png) no-repeat center/cover;} */

/* .area_internet .prd_list ul li em {position:absolute; right: 20rem; top: 15rem; display: inline-block; padding: 6rem 8rem; font-size: 14rem; font-weight: 600; color: #fff; background-color: #dc8615;}
.area_internet .prd_list ul li:nth-child(2) em {background-color: var(--primary);}
.area_internet .prd_list ul li:nth-child(3) em {background-color: #e5000a;} */
.area_internet .prd_list ul li p {position: relative; display: inline-block; flex-basis: auto;}
.area_internet .prd_list ul li p > span {display: inline-block; position: relative; font-size: 27rem; font-weight: 800;}
.area_internet .prd_list ul li p::before {opacity: 0; visibility: hidden; position: absolute; left:0; bottom: 0; content:''; width: 100%; height: 12rem; background-color: #ffe8b3; transition: .3s;}
.area_internet .prd_list ul li p strong {font-size: 18rem;}
.area_internet .prd_list ul li p strong > span {font-size: 16rem;}
.area_internet .prd_list ul li > span {display: block; min-height: 25rem; margin-top: 7rem; line-height: 1.4; font-weight: 300;}
.area_internet .prd_list ul li > span.mobile {display: none;}
.area_internet .prd_list ul li .price {display: block; margin-top: 15rem; font-weight: 600; color: #888; transition: .3s;}
/* .area_internet .prd_list.unite h3 {padding: 52rem 0 0;} */
.area_internet .prd_list.unite h3 span {display: block; margin-top: 10rem; font-size: 18rem; font-weight: 500;}
.area_internet .prd_list.unite ul li {padding: 30rem 20rem 35rem;}
.area_internet .prd_list.unite ul li p > span {font-size: 24rem;}
.area_internet .prd_list.unite ul li > span {margin-top: 10rem;}

.area_internet .prd_list ul li.on {background-color: #fefafc;}
.area_internet .prd_list ul li.on::before {position:absolute; left:0rem; top:0rem; content:''; width:100%; height:100%; border:2rem solid #e5007b; border-radius: 20rem; }
.area_internet .prd_list ul li.on::after {background-image: url(/images/content/icon_check_pink.svg);}
.area_internet .prd_list ul li.on p::before {opacity: 1; visibility: visible;}
.area_internet .prd_list ul li.on .price {color:#e5007b;}

.area_internet .prd_list ul li.disabled {background: #f0f0f0;cursor:auto;color: #aaa;pointer-events: none;cursor: default;}
.area_internet .prd_list ul li.disabled:hover {background: #f0f0f0 !important;}
.area_internet .prd_list ul li.disabled:hover i,
.area_internet .prd_list ul li.disabled:hover p,
.area_internet .prd_list ul li.disabled:hover .price {color:#aaa !important;}
.area_internet .prd_list ul li.disabled::before {display: none;}
.area_internet .prd_list ul li.disabled::after {background-image: url(/images/content/icon_check.svg) !important;}
.area_internet .prd_list ul li.disabled p::before {opacity: 0; visibility: hidden;}

.area_internet .prd_checkbox {display: flex;  margin-top: 15rem;}
.area_internet .prd_checkbox input[type="checkbox"] {display: none;}
.area_internet .prd_checkbox label {position: relative; margin-right: 25rem; padding-left: 25rem; font-weight: 500; color: #111;}
.area_internet .prd_checkbox label::before {position:absolute; left:0; top: 1rem; content:''; width: 17rem; height: 17rem; border-radius: 100%; background:#f0f0f0; border: 1rem solid #ddd;}
.area_internet .prd_checkbox label span {position: relative;display:inline-block;margin-left: 10rem;font-size: 14rem;}
.area_internet .prd_checkbox label span::after {position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height: 1rem; background-color: #111;}
.area_internet .prd_checkbox input[type="checkbox"]:checked + label::before {background: #e5007b url(/images/content/icon_check_white.svg) no-repeat center; background-size: 9rem; border:none;}
.area_internet .prd_checkbox ul {margin-left: auto; text-align: right; font-size: 15rem; font-weight: 300; line-height: 1.6; color: #666;}
.area_internet.area_lg .prd_checkbox #check_wifi + label{pointer-events:none; cursor:default;}

.area_internet .area_total {text-align: right; padding: 20rem 30rem; background: #fafafa; border-radius: 20rem; border: 1px solid #ededed;}
.area_internet .area_total h4 {font-size: 24rem; font-weight: 800; color: #111;}
.area_internet .area_total p {font-size: 16rem; font-weight: 300; color: #666;}
 .area_btn {margin-top:60rem;}

.area_internet .prd_list{display:none; flex-direction: column;}
.area_internet .prd_list.on{display:flex;}
.area_internet .prd_list.internet{display:flex !important;}

/* kt */
/*.area_internet.area_kt .sub_title img {height: 50rem;}*/
.area_internet.area_kt .area_product > p span::before {position:absolute; left: 0; top: 2rem; content:''; width: 14rem; height: 14rem; background:url(/images/content/icon_check_kt.svg) no-repeat center;}

.area_internet.area_kt .prd_list ul li.on::before {border-color: #f14d54;}
.area_internet.area_kt .prd_list ul li.on::after {background-image: url(/images/content/icon_check_kt.svg);}
.area_internet.area_kt .prd_list ul li.on .price {color:#f14d54;}
.area_internet.area_kt .area_btn .button.color {background:#f14d54; border-color:#f14d54;} 
.area_internet.area_kt .prd_checkbox input[type="checkbox"]:checked + label::before {background-color: #f14d54;}

/* lg */
/*.area_internet.area_sk .sub_title img {height: 70rem;}*/
.area_internet.area_sk .area_product > p span::before {position:absolute; left: 0; top: 2rem; content:''; width: 14rem; height: 14rem; background:url(/images/content/icon_check_sk.svg) no-repeat center;}

.area_internet.area_sk .prd_list ul li.on {background-color:#fdf9f6;}
.area_internet.area_sk .prd_list ul li.on::before {border-color: #ff7f24;}
.area_internet.area_sk .prd_list ul li.on .price {color:#ff7f24;}
.area_internet.area_sk .prd_list ul li.on::after {background-image: url(/images/content/icon_check_sk.svg);}
.area_internet.area_sk .area_btn .button.color {background:#ff7f24; border-color:#ff7f24;} 
.area_internet.area_sk .prd_checkbox input[type="checkbox"]:checked + label::before {background-color: #ff7f24;}

/* kt skylife */


/* lg hellovision */
/* .area_internet.lg_hv .prd_list ul li:nth-child(3) em {background-color: var(--primary);}
.area_internet.lg_hv .prd_list ul li:nth-child(4) em {background-color: #e5000a;} */

/* .area_internet .prd_list ul li:nth-child(3) em {background: url(/images/content/mark02.png) no-repeat center/cover;}
.area_internet .prd_list ul li:nth-child(4) em {background: url(/images/content/mark03.png) no-repeat center/cover;} */




@media (hover: hover) {
  .area_internet .area_ad a:hover {border-color: #111;}
  .area_internet .prd_list ul li:hover {background-color: #ffeff7;}
  .area_internet .prd_list ul li:hover::after {background-image: url(/images/content/icon_check_pink.svg);}
  .area_internet .prd_list ul li:hover i,
  .area_internet .prd_list ul li:hover p,
  .area_internet .prd_list ul li:hover .price {color:#e5007b;}

  .area_internet.area_kt .prd_list ul li:hover {background-color:#ffe3df;}
  .area_internet.area_kt .prd_list ul li:hover::before {border-color: #f14d54;}
  .area_internet.area_kt .prd_list ul li:hover::after {background-image: url(/images/content/icon_check_kt.svg);}
  .area_internet.area_kt .prd_list ul li:hover i,
  .area_internet.area_kt .prd_list ul li:hover p,
  .area_internet.area_kt .prd_list ul li:hover .price {color:#f14d54;}

  .area_internet.area_sk .prd_list ul li:hover {background-color:#ffebdb;}
  .area_internet.area_sk .prd_list ul li:hover::after {background-image: url(/images/content/icon_check_sk.svg);}
  .area_internet.area_sk .prd_list ul li:hover::before {border-color: #ff7f24;}
  .area_internet.area_sk .prd_list ul li:hover i,
  .area_internet.area_sk .prd_list ul li:hover p,
  .area_internet.area_sk .prd_list ul li:hover .price {color:#ff7f24;}
}



@media all and (max-width:1024px){
	.area_internet .area_ad a img.mobile
	.area_internet .area_product > p {margin-bottom: 0;}
	.area_internet .prd_list {flex-wrap: wrap; margin-bottom: 40rem;}
	.area_internet .prd_list h3 {flex-basis: 100%; }
	.area_internet .prd_list.unite {margin-bottom: 30rem;}
	.area_internet .prd_list.unite h3 {}
	.area_internet .prd_list ul {flex-basis: 100%;}
	.area_internet .prd_checkbox {padding-left: 0;}	
	.area_internet .area_board {grid-template-columns: 1fr; gap: 0;}
	.area_internet .area_board::before {display: none;}
	.area_internet .area_board .inquiry_board {padding-top: 50rem; margin-top: 50rem; border-top: 1rem solid #ddd;}	
	
}

@media all and (max-width:768px){
	.area_internet .area_ad a img {display: none;}
	.area_internet .area_ad a img.mobile {display: block;}
	
	.join_area .bbsView td[data-member-form="id"] .button {right: 0; top: 20px;}
	.bbsView .button {font-size: 0.8em;}
	
	.area_btn {margin-top: 20rem;}
    .area_btn .button {min-width: 100rem; height: 50rem; line-height: 48rem;}
	#sub_container {padding:50rem 0 0;}
	#sub_container #content {padding: 20rem 0 0;}
	.sub_title {flex-wrap: wrap; gap: 20rem 0; padding-bottom: 15rem;}
	.sub_title h2 {flex-basis: 100%; font-size: 20rem; text-align: center;}
	.sub_title .sub_util li {font-size: 12rem;}
	.sub_title .sub_util li::before {width: 6rem; height: 8rem; margin: 0 8rem; background-size: 4rem;}
	.sub_title .sub_util li.home img {height: 11rem; margin-top: 2rem;}
	.area_internet .area_total{margin: 30rem 0 0; width: 100%;}
	.area_internet .area_total h4 {font-size: 21rem;}
	.area_internet .area_total > div:first-child {padding: 30rem 0;}
	.area_internet .sub_title {padding-bottom: 20rem;}
	.area_internet .sub_title img {height: 40rem;}
	.area_internet .area_product > p {text-align: left; margin-bottom: 20rem;}
	.area_internet .prd_list {margin-bottom: 30rem;}
	.area_internet .prd_list h3 {font-size: 21rem; padding-bottom: 12rem !important;}
	.area_internet .prd_list.unite h3 span {font-size: 14rem; margin-top: 5rem;}
	.area_internet .prd_list ul {gap: 20rem 5rem;}
	.area_internet .prd_list ul li {min-height: auto; padding: 12rem 10rem; align-content: space-between;}
	.area_internet .prd_list ul li::after {right: 10rem; bottom: 12rem; width: 10rem; height: 10rem;}
	.area_internet .prd_list ul li em {top: 0; right: 0; padding: 4rem 5rem; font-size: 9rem;}
	.area_internet .prd_list ul li p > span {font-size: 16rem; letter-spacing: -.5rem;}
	.area_internet .prd_list ul li p strong {font-size: 14rem;}
	.area_internet .prd_list ul li p strong > span {font-size: 14rem; display: block;}
	.area_internet .prd_list ul li i {margin-bottom: 7rem; font-size: 15rem; height: 60rem; display: flex; align-items: center;}
	.area_internet .prd_list ul li > span {display: none;}
	.area_internet .prd_list ul li .price {margin-top: 10rem; font-weight: 500; font-size: 12rem;}
	.area_internet .prd_list.unite {margin-bottom: 20rem;}
	.area_internet .prd_list.unite ul li {padding: 12rem 10rem;}
	.area_internet .prd_list.unite ul li > span.mobile {display: block; font-size: 12rem;}
	.area_internet .prd_list.unite ul li > span b {display: none;}
	.area_internet .prd_list.unite ul li p > span {font-size: 13rem;}
	.area_internet .prd_checkbox {flex-wrap: wrap;}
	.area_internet .prd_checkbox form {display: flex; align-items: flex-start; flex-basis: 100%;}
	.area_internet .prd_checkbox label {width: 100%; margin: 5rem 0; padding-left: 22rem;}
	.area_internet .prd_checkbox label span {font-size: 13rem; margin-left: 0;}
	.area_internet .prd_checkbox label::before {top: 1rem; width: 15rem; height: 15rem;}
	.area_internet .prd_checkbox input[type="checkbox"]:checked + label::before {background-size: 7rem;}
	.area_internet .prd_checkbox ul {flex-basis: 100%; margin-top: 10rem; text-align: left; font-size: 12rem;}
	.area_internet .area_ad {margin-top: 50rem;}
	.area_internet .area_total > div:first-child {padding:  0;}
	.area_internet .area_total h4 {font-size: 20rem;}
	
	.area_internet .area_total p {font-size: 14rem;}
	.area_internet .prd_list ul li em  {width: 35rem !important; font-size: 0 !important; top: -1rem !important; right: -1rem !important;}

	  /* lg */
	.area_internet.area_sk .sub_title img {height: 80rem;}

	  /* kt */
	.area_internet.area_kt .sub_title img {height: 40rem;}
	.area_internet.area_kt .prd_list.tv ul li i {margin-bottom: 15rem;}
	.area_internet.area_kt .prd_list.tv ul li .price {margin-top: 15rem;}
	.area_internet.area_kt .prd_list.unite ul li {padding:12rem 10rem;}

}

@media all and (max-width:640px) {

	.name_area {justify-content: flex-start !important;}
	
	label.mark {width: 15px !important; height: 15px !important; line-height: 15px !important;}
	label.mark.naver:before {font-size: 10px !important;}
	label.mark.kakao:before {font-size: 10px !important;}
}

@media all and (max-width:480px){
}

@media all and (max-width:360px){
	.area_internet .prd_list ul li em {padding: 5rem 7rem;}
	
}

@media all and (max-width:280px){

	.designRadio input[type="radio"] + label {line-height: 1.5em;}
	
}


/* banner */
.area_banner {margin-top: 100rem;}
.area_banner ul {display: flex; justify-content: space-between;}
.area_banner ul li {width: calc((100% - 60rem)/3); }
.area_banner ul li a {display: block; height: 100%; aspect-ratio: 420/420; border-radius: 20rem;}
.area_banner .banner01 a {background: url(/images/content/banner01.jpg) no-repeat center/cover; }
.area_banner .banner02 a {background: url(/images/content/banner02.jpg) no-repeat center/cover; }
.area_banner .banner03 a {background: url(/images/content/banner03.jpg) no-repeat center/cover; }


@media all and (max-width:767px){
	.area_banner {margin-top: 60rem;}
	.area_banner ul {flex-direction: column; gap: 40rem;}
	.area_banner ul li {width: 100%;}
}


.about figure {margin-top: 60rem; background: url(/images/content/about_bg.jpg) no-repeat center/cover; aspect-ratio: 1300/300;}
.about figure img {width: 100%;}
.about figcaption {border: 1px solid #dedede; box-sizing: border-box; padding: 60rem 50rem; margin-top: 80rem; background: url(/images/content/about_bg2.png) no-repeat; background-position:160% 120%; transition: .8s;}
.about figcaption ul li {border-top: 1px dashed #ccc; padding: 30rem; font-family: 'GmarketSansMedium'; display: flex; align-items: center; font-size: 18rem;}
.about figcaption ul li:first-child {border-top: 1px solid #000;}
.about .blue {color: var(--primary);}
.about .tel {font-weight: 600;}
.about .red {color: #e5000a;}



@media all and (max-width:767px){
	.about figure {height: 400rem; width: 100%; background-position: 60% 50%;}
	.about figcaption ul li {flex-direction: column; padding: 30rem 15rem; text-align: center; gap: 30rem;}
	.about figcaption ul li img {width: 25%;}
	.about figcaption {padding: 40rem 30rem; background-position: 160% 100%; background-size: 85%;}
}

/* form */
div:has(>.div1){ display: grid; gap: 28rem 100rem; }
#wrap .div1{ display: none; margin: 0; }
#wrap .div1.isShow{ display: grid; align-items: center; gap: 15rem 1ch; }
.div1 label{ font-weight: 600; font-size: 16rem; color: #333; text-indent: 1px; }
@media(min-width:768px){
	div:has(>.div1),
	#wrap .div1.isShow{ grid-template-columns: auto 1fr; }
}
@media(max-width:767px){
	.div1 label{ font-size: 15rem; }
}