@font-face { font-family: 'Pretendard'; font-weight: 500; font-style: normal; src:
    url('../font/Pretendard-Medium.woff2') format('woff2'),
    url('../font/Pretendard-Medium.woff') format('woff'),
    url('../font/Pretendard-Medium.otf') format('opentype'); } 
@font-face { font-family: 'Pretendard'; font-weight: 700; font-style: normal; src: 
    url('../font/Pretendard-Bold.woff2') format('woff2'), 
    url('../font/Pretendard-Bold.woff') format('woff'), 
    url('../font/Pretendard-Bold.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 900; font-style: normal; src:
    url('../font/Pretendard-ExtraBold.woff2') format('woff2'),
    url('../font/Pretendard-ExtraBold.woff') format('woff'),
    url('../font/Pretendard-ExtraBold.otf') format('opentype'); } 
    
body { background-color: #fff; margin: 0; font-family: 'Pretendard'; font-weight: 500;color: #1e1e1e; letter-spacing: -0.08rem; word-break: keep-all; } 
main{ width: 100%; overflow: hidden;}

/* 공통클래스 */
.h-container{ width: 100%; max-width: 1196px; height: 100%; margin: auto; font-size: 18px; color: #1e1e1e; position: relative; } 
.h-container__inner{height: 100%; margin: 0 auto; padding: 0 20px;}
.h-container__padding{ padding: 140px 0 138px 0; }

 /* GNB */
 .h-navbar{display: inline-block; height: 60px; width: 100%; position: fixed; top: 0; bottom: unset; background-color: #fff;z-index: 1; border-bottom: 1px solid #eee;}
 .h-navbar.h-main-nav{background-color: transparent; border: none; transition: 0.2s;} 
 .h-navbar.h-main-nav.fixed{background-color: #fff; border-bottom: 1px solid #eee; transition: 0.2s;}
 .h-navbar .h-container{max-width: 1196px;display: flex; justify-content: space-between;}
 .h-navbar .h-container .navi-lft{display: flex; align-items: center; height: 100%; margin-top: 3px;}
 .h-navbar .h-container .navi-lft a{display: flex; cursor: pointer;} /* 20230913_2 수정 */
 .h-navbar .h-container .navi-lft a span{height: auto; width: auto; min-width: 24px;}
 .h-navbar .h-container .navi-lft a span img{width: auto; height: 24px;}
 .h-navbar .h-container .navi-rgt{display: flex; align-items: center;}
 .h-navbar .h-container .navi-rgt  span a{display: flex; background-color: #1e1e1e; border-radius: 30px; }
 .h-navbar .h-container .navi-rgt a{ padding: 12px 15px; color: #fff; font-size: 14px;}


 /* 메인 */
.homepage-main .h-container__padding{padding: 140px 0 0 0; }
.h-main-sect{max-width: 1196px; margin: 0 auto; text-align: center; position: relative; padding: 192px 25px 50px;}  /* 공통클래스 */
.h-main-sect1{ padding: 0 0 100px;}
.h-main-sect1::after{ content: ""; position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); display: inline-block; width: 7420px; height: 7420px; border-radius: 50%; z-index: -5; background: linear-gradient(180deg, rgba(215,255,243,1) 70%, rgba(220,245,255,1) 100%); }
.h-main-sect1 .h-main-tit{text-align: center;}

.h-main-tit h1{margin-bottom: 36px;}
.h-main-tit h1 a{ display: inline-block;}
.h-main-tit h1 a .btlogo{ font-size: 28px;display: block;text-align: left;color: #f34848;font-weight: 700;margin-bottom: 5px;} /* 20231114 추가 */
.h-main-tit h1 a img{ width: auto; height: 70px; display: inline-block;}
.h-main-tit h2{font-size: 42px; font-weight: 800; margin-bottom: 20px; line-height: 120%;}
.h-main-sect2 h2, .h-main-sect3 h2{font-size: 42px; font-weight: 700; margin-bottom: 60px; position: relative;}
.h-main-tit .subtit p{font-size: 20px; font-weight: 500; color: #5B5B5B; line-height: 140%;}

/* 배경 애니메이션 */
.h-main-act .bg-ui-imgs ul{display: flex; position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%);}
.h-main-act .bg-ui-imgs ul li{margin-top: 0;} /* 20230913_2 추가 */
.h-main-act .bg-ui-imgs ul li img{width: 324px;}
.h-main-act .bg-ui-imgs ul li:nth-of-type(1) img, .h-main-act .bg-ui-imgs ul li:nth-of-type(5) img{margin-top: -65px;} /* 20230913_2 추가 */
.h-main-act .bg-ui-imgs ul li:nth-of-type(2) img, .h-main-act .bg-ui-imgs ul li:nth-of-type(4) img{margin-top: 60px;} /* 20230913_2 추가 */
.h-main-act .bg-ui-imgs ul li:nth-of-type(3){margin-top: 0; margin-right: 500px;}
.h-main-act .bg-ui-imgs ul li:nth-of-type(6){margin-top: 0;}
.h-main-act .videowrap video{ width: calc(100% + 10px); border-radius: 28px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} /* 20230822 수정 */
.h-main-act .videowrap{display: inline-block; margin: 70px 0 53px; width: 385px; height: 828px; box-shadow: 0px 2px 11px 1px rgba(117,117,117,0.75); border-radius: 28px; background: url(../img/main_vid_ui_new.png) center; background-size: cover; border: 11px solid #1e1e1e; overflow: hidden; position: relative;} /* 20231127 수정 */


/* 방송 편성표 */
.h-main-sect2 .live_stick{ display: inline-block; width: 118px; height: 41px; position: absolute; top: -44px; left: 50%; transform: translate(-50%, -50%);}
.h-main-sect2 .live_stick img{width: 100%;}
.h-main-sect2 .live_stick.off_stick{ z-index: -1;}
.h-main-sect2 .live-sch ul{display: flex; width: 100%; justify-content: space-evenly;}
/* 방송 편성표 - 라이브 방송 중 */
.h-main-sect2 .live-sch ul li{position: relative; display: flex; flex-direction: column; justify-content: center; text-align: left; height: 379px; width: 260px; border-radius: 30px; box-shadow: 0px 2px 9px 4px rgba(117,117,117,0.1); padding: 20px 24px; margin-left: 20px;/* z-index: -2; */} /* 20231016 수정 */
.h-main-sect2 .live-sch ul li:first-of-type{margin-left: 0;}
.h-main-sect2 .live-sch ul li .live_cont_wrap{display: inline-block; margin: 20px 0 20px;}
.h-main-sect2 .live-sch ul li strong{display: block; font-size: 28px; font-weight: 700; margin-bottom: 28px;}
.h-main-sect2 .live-sch ul li .sch_time{font-size: 14px; font-weight: 500; margin-bottom: 7px; color: #777;}
.h-main-sect2 .live-sch ul li .sch_time_cont{font-size: 20px; display: inline-block; margin-bottom: 18px; position: relative;}
.h-main-sect2 .live-sch ul li .live_btn{display: inline-block;  text-align: center; cursor: pointer;}
.h-main-sect2 .live-sch ul li .live_btn a{display: inline-block; width: 100%; padding: 15px; border-radius: 40px; background: #28BBF4; color: #fff;}
.h-main-sect2 .live-sch ul li .live_btn.btn_disabled{pointer-events: none;}
/* 방송 편성표 - 라이브 방송 진행예정 */
.h-main-sect2 .live-sch ul li.live_todo{height: 379px; width: 260px; padding: 0 0;}
.h-main-sect2 .live-sch ul li.live_todo .live_todo_img{background-image: url(../img/live_todo_pc.png); background-position: top center; width: 100%; background-repeat: no-repeat; background-size: cover; height: 100%; border-radius: 30px;}
.h-main-sect2 .live-sch ul li.live_todo .todo_info{z-index: 5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-weight: 700; text-align: center; cursor: default;}
.h-main-sect2 .live-sch ul li.live_todo .todo_info p{font-size: 24px; font-weight: 500;}
.h-main-sect2 .live-sch ul li.live_todo .live_btn a{display: inline-block; width: 100%; padding: 15px; border-radius: 40px; background: #444; color: #fff;}
/* 구매절차 보러가기 */
.h-main-sect2 .h-main-btn{display: block; text-align: center; padding-top: 72px; margin-right: 10px;}
.h-main-sect2 .h-main-btn a{color: #1e1e1e; font-size: 20px; font-weight: 500; display: inline-block; position: relative; padding: 28px 30px; border-radius: 56px; background: #eee; min-width: 300px;}


/* 서비스 소개 */
.h-main-sect3 .service_intro{text-align: center; color: #9b9b9b; font-size: 24px; font-weight: 500; margin-bottom: 18px;}
.h-main-sect3-mob{display: none;}
.h-main-sect3 .videowrap{ border-radius: 30px; width: 100%; height: 387px; position: relative; display: flex; justify-content: center;}
.h-main-sect3 .sercice-anim img, .h-main-sect3 .video_tab{display: none;}
.h-main-sect3-pc .seller{ left: 50%; bottom: -30px; transform: translateX(-50%);}
.h-main-sect3 .service-cont{margin-top: 40px;} /* 20230821 수정 */
.h-main-sect3 .service-cont ul{width: 100%; text-align:left; display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; }
.h-main-sect3 .service-cont ul li{margin-right: 20px;}
.h-main-sect3 .service-cont ul li:last-of-type{margin-right: 0;}
.h-main-sect3 .service-cont ul li strong{font-size: 28px; font-weight: 700; margin-bottom: 12px; display: inline-block;}
.h-main-sect3 .service-cont ul li strong span{color: #28BBF4;}
.h-main-sect3 .service-cont ul li p{font-size: 18px; font-weight: 500; line-height: 150%;}


/* 하단 소개 이미지 */
.h-main-sect4{ padding-top: 192px;}
.h-main-sect4 .bottom-img{width: 100vw; height: 318px; background-image: url(../img/bottom_img_pc.png); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center;}
.h-main-sect4 .bottom-img h2{font-size: 36px; color: #fff; text-shadow: #777 0px 2px 7px; line-height: 150%; text-align: center;}
.h-main-sect4 .bottom-img h2 strong{font-weight: 700;}


 /* 약관 페이지 */
.h-term-wrap{ padding-top: 40px; position: relative;}
.h-term-wrap .slct-box select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; font-size: 18px; cursor: pointer; border: 1px solid #dadada; color: #333; padding:20px 45px 20px 15px; border-radius: 10px; background: url(../img/down-arrow-g.svg) no-repeat top 50% right 15px; background-size: 15px; }
.h-term-wrap .slct-box select::-ms-expand { display: none; }
.h-term-wrap .term-body { color: #1e1e1e; padding-top: 40px; line-height: 1.6; }
.h-term-wrap .term-body h3 { display: block; font-size: 30px; font-weight: 700;padding-bottom: 10px; }
.h-term-wrap .term-body h4 { display: block; font-size: 22px; font-weight: 700; padding-top: 30px; padding-bottom: 10px; }
.h-term-wrap .term-body em { display: block; font-size: 18px; font-weight: 700; padding-top: 15px; padding-bottom: 5px; }
.h-term-wrap .term-body p {line-height: 1.6; padding: 3px 0;}
.h-term-wrap .term-body .subterm{ color: #777; padding: 10px 0; }
.h-term-wrap .term-body .subterm p.sub {padding-left: 12px;padding-top: 3px;padding-bottom: 3px; }
.h-term-wrap .term-body .subterm p.sub:first-of-type { padding-top: 10px;}
.h-term-wrap .term-body .subterm p.sub:last-of-type { padding-bottom: 10px;}
.h-term-wrap .term-body .term-table { overflow-x: auto; width: 100%;} /* 20230821 추가 */
.h-term-wrap .term-body .term-table table {text-align: center;word-break: keep-all;margin: 30px 0; width: 100%;overflow-x: scroll;}
.h-term-wrap .term-body .term-table table thead {border-top: 1px solid #dadada;border-bottom: 1px solid #dadada;}
.h-term-wrap .term-body .term-table table th {padding: 10px;border: 1px solid #dadada; vertical-align: middle;color: #777;}
.h-term-wrap .term-body .term-table table th:first-of-type {border-left: 1px solid #dadada;}
.h-term-wrap .term-body .term-table table td {padding: 10px;border: 1px solid #dadada;vertical-align: middle;}
.h-term-wrap .term-body .term-table table td:first-of-type {border-left: 1px solid #dadada;}
.h-term-wrap .term-body .subterm p.sub_bottom{padding-left: 20px;}
.h-term-wrap .term-body .subterm p.sub_b_bottom{color: #999;}
.h-term-wrap .term-body .for_table{clear: both;}
.h-term-wrap .term-body .for_table p{float: left;}
.h-term-wrap .term-body .for_table i{float: right;color: #777;}
.h-term-wrap .term-body .term-table.term-table-02{margin-top: 20px;}
.h-term-wrap .term-body .term-table.term-table-02 table{margin-top: 10px;}
.h-term-wrap .term-body .term-table table td.text_left{text-align: left;}

/* privacy - 개인정보처리방침 예외 소스 */
.h-term-wrap .privacy-body h3{ padding-bottom: 40px; }
.term-table.scrolltb {width: 100%;}
/* 시행일자 및 다운로드 버튼 */
.h-term-wrap .down-btn-hstr { position: absolute; right: 20px; top: 146px; display: flex; align-items: center; font-size: 15px; }
.h-term-wrap .down-btn-hstr .hstr { margin-right: 7px; border: 1px solid #dadada; border-radius: 10px; line-height: 48px; padding: 0 16px; }
.h-term-wrap .down-btn-hstr .hstr span { color: #999; margin-right: 15px; }
.h-term-wrap .down-btn-hstr .hstr select { cursor: pointer; font-size: 15px; background-color: #fff; border: none; padding-right: 10px; }
.h-term-wrap .down-btn-hstr button { display: flex; align-items: center; border: 1px solid #dadada; border-radius: 10px; color: #777; line-height: 48px; padding: 0 17px; transition: .2s; }
.h-term-wrap .down-btn-hstr button:hover { border: 1px solid #28BBF4; color: #28BBF4; transition: .2s; }
.h-term-wrap .down-btn-hstr button:hover .down_img { background-image: url("../img/down-icn-act.svg"); }
.h-term-wrap .down-btn-hstr button .down_img { height: 15px; width: 15px; margin-left: 6px; opacity: .7; background-image: url("../img/down-icn-com.svg"); background-size: cover; }


/* 고객문의 페이지 */
/* 고객문의 타이틀 */
.homepage-sect .h-container .h-container__inner h1.typography{font-size: 32px; font-weight: 700;}
/* 고겍문의 from */
.h-inquiry-form-wrap{margin-top: 40px;}
.h-inquiry-form-wrap .form-iptwrap { width: 100%; border-top: 2px solid #333; font-size: 17px; }
.form-iptwrap .ipt-line { display: flex; border-bottom: 1px solid #dadada; flex-direction: row; align-items: center;}
.form-iptwrap .ipt-line .tit { display: flex; width: 250px; }
.form-iptwrap .ipt-line .tit p { line-height: 20px; }
.form-iptwrap .ipt-line .tit span { display: inline-block; font-size: 19px; padding-left: 3px; line-height: 18px; font-weight: 600; color: #28BBF4; }
.form-iptwrap .ipt-line > .data { width: calc(100% - 250px); padding: 12px 0 12px; }
/* 입력폼 INPUT,SELECT,BUTTON 공통 CSS */
.form-iptwrap .dt-line{ display: flex; flex-direction: row; align-items: center;}
.form-iptwrap .dt-line input {width: 300px; padding:15px; font-size: 17px; line-height: 20px; border: 1px solid #dadada; border-radius: 8px; transition: .05s; }
.form-iptwrap .dt-line select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #dadada; border-radius: 8px; font-size: 17px; line-height: 20px; padding:15px 60px 15px 15px; transition: .05s; background: #fff url(../images/down-arrow-g.svg) no-repeat top 50% right 15px; background-size: 15px; }
.form-iptwrap .dt-line input::placeholder, .form-iptwrap .ipt-line .data .dt-line select::placeholder, .form-iptwrap .ipt-line .data .dt-line textarea::placeholder{ color:#aaa; font-family: 'Pretendard'; font-weight: 500; font-style: normal; }
.form-iptwrap .dt-line button { border: 1px solid #dadada; border-radius: 8px;color: #111;}
/* 입력폼 INPUT,SELECT,BUTTON 공통 CSS 호버 & 포커스 효과 */
.form-iptwrap .dt-line input:hover, .form-iptwrap .ipt-line .data .dt-line input:focus, .form-iptwrap .dt-line select:hover, .form-iptwrap .ipt-line .data .dt-line select:focus, .form-iptwrap .dt-line.tarea textarea:hover, .form-iptwrap .dt-line.tarea textarea:focus { border-color: #777; }
/* dt-line 유형 > 서브안내가 있는 경우 */
.form-iptwrap .dt-line.subinfo { flex-direction: column; align-items: flex-start; font-size: 15px; color: #555; line-height: 1.5; padding-top: 12px;}
.form-iptwrap .dt-line.subinfo button {display: flex; border: 0;font-size: 15px;line-height: 15px; color: #777;}
.form-iptwrap .dt-line.subinfo button img {width: 15px;}
.form-iptwrap .dt-line.subinfo p {position: relative;padding-left: 12px;}
.form-iptwrap .dt-line.subinfo p::before {content: ''; position: absolute; width: 4px;height: 4px;left: 0;top: 9px; border-radius: 50%; background-color: #b5b5b5;}
/* 입력폼 체크박스 사각형 테두리 CSS */
.form-iptwrap .dt-line .ckrdli.ck label::before {border-radius: 8px; transition: 0.2s;}
.form-iptwrap .dt-line .ckrdli.ck label:hover::before {border: 2px solid #dadada; background: #fff url(../img/check-bf.svg) no-repeat; transition: 0.2s;}
.form-iptwrap .dt-line .ckrdli.ck input[type="checkbox"]:checked+label::before { border: 0; background: #fff url(../img/check-af.svg) no-repeat; transition: 0.2s;}
/* 입력폼 약관내용 */
.form-iptwrap .dt-line.term { display: flex; flex-direction: column; align-items: flex-start; }
.form-iptwrap .dt-line.term .term-box { width: 100%; background-color: #f2f2f2; height: 160px; padding: 25px 30px 50px 30px; font-size: 15px; line-height: 1.6; overflow-y: auto; border-radius: 10px; }
.form-iptwrap .dt-line.term .term-box p { font-size: 15px; }
.form-iptwrap .dt-line.term .term-box strong { margin-bottom: 5px; display: block; font-weight: 700;}
.form-iptwrap .dt-line.term .term-box p.subtxt { margin-bottom: 5px; font-weight: 500;}
/* 입력폼 라디오버튼 공통 CSS */
.form-iptwrap .dt-line .ckrdli { position: relative; display: flex; align-items: center; height:52px; }
.form-iptwrap .dt-line .ckrdli input[type="checkbox"], .form-iptwrap .dt-line .ckrdli input[type="radio"] { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px; }
.form-iptwrap .dt-line .ckrdli label {position: relative; color: #000; line-height: 24px; padding-left: 35px; padding-right: 25px; cursor: pointer;display: flex;align-items: center;}
.form-iptwrap .dt-line .ckrdli label:last-child { padding-right: 0; }
.form-iptwrap .dt-line .ckrdli label::before { content: ''; position: absolute; width: 24px; height: 24px; left: 0; top: 50%; transform: translateY(-50%); background-color: #fff; border: 2px solid #dadada; border-radius: 50%; box-sizing: border-box;}
/* inquiry_wrap - 문의하기 버튼 */
.inquiry_wrap .open-pribtn { text-align: center; padding-top: 30px; } /* 20230821 수정 */
.inquiry_wrap .open-pribtn a { display: inline-block; padding: 0 120px; font-size: 18px; color: #999; line-height: 70px; background-color: #e0e0e0; border-radius: 10px; }
.inquiry_wrap .open-pribtn a.btn_abled { background-color: #28BBF4; color: #fff;} /* 20230821 수정 */
.inquiry_wrap .open-pribtn.btn2 a:nth-of-type(1) {margin-right: 10px;padding: 0 60px;}
/* 입력유형 > 본문 내용 textarea */
.form-iptwrap .dt-line.tarea textarea {width: 100%;padding: 15px; font-size: 17px; resize: none;height: 160px;border: 1px solid #dadada; border-radius: 8px; transition: .05s;}


/* footer */
.ft { background-color: #333; color: #fff; padding: 20px 0 125px 0;} /* 20230821 수정 */
/* footer - company information */
.ft .ft-left { position: relative; float: left; width: 70%; font-size: 14px; color: #999; padding-top: 36px; }
.ft .ft-left::before { content: ''; position: absolute; width: 140px; height: 21px; top: 0; background: url(../img/kgmobilians_BI.svg) no-repeat; } 
.ft .fnb { width: 100%; margin-bottom: 40px; border-bottom: 1px solid #555; color: #999;}
.ft .fnb ul{ margin-bottom: 10px;}
.ft .fnb ul li:after{ content: ""; position: absolute; top: 50%; right:-15px; transform: translateY(-50%); width: 2px; height: 15px; display: block; background-color: #474747;}
.ft .fnb ul li:last-child{margin-right: 0;}
.ft .fnb ul li:last-child:after{content: none;}
.ft .fnb ul li { position : relative; float: left; font-size: 16px; line-height: 1.9; margin-right: 30px; padding: 4px 0; transition: 0.2s;}
.ft .fnb ul li:hover{ color : #fff; transition: 0.2s;}
.ft .ft-left .intro{ line-height: 1.5;}
.ft-left .addr { position: relative; padding: 30px 30px 40px 0; line-height: 1.8; word-break: keep-all; }
.ft-left .addr ul { display: flex; flex-direction: row; flex-wrap: wrap; } 
.ft-left .addr ul li { padding-right: 15px; }
.ft-left .addr ul li span { margin-left: 10px; }
.ft-left .copyright { letter-spacing: 0; } 


/* 20231016 추가 */
/* 팝업 생성 */
.pad {padding: 0 30px;}
.pop-up-wrap{display: block; position: absolute; z-index:10; top:0; bottom:0; left:0; right:0;}
.pop-up-wrap .deamed{background:rgba(0, 0, 0, 0.70); opacity: 50%; display: block;position:fixed; top:0; left:0; right: 0; bottom:0;}
.pop-up-wrap .pop-up{display: inline-block; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); width: 568px; background:#fff; border-radius: 30px;}
.pop-up-wrap.none{display:none;}
.pop-up .title{padding: 30px 0; font-size:24px; font-weight:700;}
.pop-up .contents_wrap{background: #F8F8F8;}
.pop-up .contents_wrap .contents{padding: 28px 0;}
.pop-up .contents_wrap .contents:not(:last-child){border-bottom: 1px solid #A3A3A3; }
.pop-up .contents h4{font-size: 21px; font-weight: 700;}
.pop-up .contents ul.live-list{margin-top: 18px;}
.pop-up .contents ul.live-list li{line-height: 150%;}
.pop-up .contents ul.live-list li em{display:inline-block; color: #a2a2a2; width:25%; vertical-align: top;}
.pop-up .contents ul.live-list li span{display: inline-block; width: 75%;}
.pop-up .pop-up-bottom{padding:30px 0; text-align:right;}
.pop-up .pop-up-bottom .closed_btn{font-size: 18px;font-weight: 700;cursor: pointer;}


/* 20231114 추가 */
/* beta 추가 안내 */
.sercice-anim.betaInfo { background: #f5f4f6; padding: 47px; border-radius: 30px; font-size: 24px; line-height: 36px;}
.sercice-anim.betaInfo p strong{ color: #28bbf4; font-weight: 700;}
.sercice-anim.betaInfo p:last-of-type { font-size: 18px; margin-top: 20px; line-height: 20px;}