/* 자동완성 백그라운드 색상 투명 */
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #000;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #fff;
}



body {
    padding: 0px;
}


h1 {text-align:center;padding:10px; color:#000000;}
h2 { float:left; margin:15px 0 0 25px;color:#d54100; }
h4 {text-align:center;color: gray;}
.order {
    width:100%;
    border:2px solid #c6c6c6;
    border-radius: 25px;
    padding:13px;
    margin-bottom:0;
    margin-top:10px;
}

.order_result {clear:both; width:100%; margin:0; padding:0; border-collapse:collapse; border-bottom:1px solid #c9c9c9;}
.order_result tr {border-bottom: 1px solid #ddd}
.order_result td {padding:5px 0 4px 0; text-align:left;}
.order_result input {
    float:left;
    border: none;
    text-align: left;
    padding:6px 5px 3px 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    display:inline-block;
    font-size: 15px;
    font-weight: 500;
    color: #000000;
    outline: none;
}

.month_pay {
    float:left;
    width: 100%;
    background-color:#ff7f29;
    border-radius: 0 0 18px 15px;
    padding:16px 8px;
    margin:8px 0 0 0;
    text-align: center;
    color: #000;
    font-weight:500;
    font-size: 18px;
}

.order2 {
    width:100%;
    float:left;
    border:2px solid #f1974f;
    border-radius: 25px;
    padding:13px 13px 20px 13px;
    margin-bottom:0;
    margin-top:10px;
}

.title_info {
    float:left;
    width:15%;
    margin:7px 0 0 0;
    padding:10px 0 7px 0;
    display:inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    text-align: center;
    background:#eee;
    border-radius: 8px;
}

.ip_info {
    float:left;
    width:34%;
    margin:7px 0 0 0;
    padding:0 0 0 10px;
    display:inline-block;
    text-align: left;
}

.ip_info2 {
    float:left;
    width:85%;
    margin:7px 0 0 0;
    padding:0 0 0 10px;
    display:inline-block;
    text-align: left;
}

.ip_info2 button {
    float:left;
    border:1px solid #eca541;
    background:#fbc373;
    border-radius: 2px;
    box-shadow: none;
    text-align: left;
    padding:8px 5px 5px 15px;
    display:inline-block;
    font-size: 18px;
    font-weight: 500;
    letter-spacing:0.03em;
    height:40px;
    color: #000000;
}

.ip_info2 button:hover {
    background: #f89d1b;
    color: #fff;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.ip_info input, .ip_info2 input, .ip_info input.mail, .ip_info input.mail2, .ip_info select, .ip_info2 select {
    float:left;
    width:100%;
    border:1px solid #ccc;
    border-radius: 2px;
    text-align: left;
    padding:8px 5px 5px 15px;
    display:inline-block;
    font-size: 18px;
    font-weight: 500;
    letter-spacing:0.03em;
    height:40px;
    color: #000000;
}

.ip_info2 textarea {
    font-size: 18px;
    font-weight: 500;
    letter-spacing:0.03em;
}

.mail_a {
    float:left;
    font-weight: bold;
    font-size:18px;
    text-align:center;
    line-height:200%;
    padding:0 3px 0 0;
}

.happy_call {
    clear:both;
    width: 100%;
    text-align:center;
}

.happy_call button {
    width: 60%;
    background: linear-gradient(90deg, #5b1c06, #cf3600);
    border:1px solid #5b1c06;
    border-radius: 5px;
    padding:20px 8px 17px 8px;
    color:#ffffff;
    line-height:180%;
    margin: 50px auto;
    font-size:26px !important;
    font-weight:500;
}


.happy_call::after{
  content:"";
  background: linear-gradient(90deg, transparent 0%,
    rgba(255,255,255,.5) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: sweep 2.5s ease-in-out infinite;
}

@keyframes sweep{
  0%   { left:-50%; }
  60%  { left:110%; }
  100% { left:110%; }
}

@media (prefers-reduced-motion: reduce){
  .happy_call::after{ animation:none; }
}

.agreement{
    clear:both;
    width: 100%;
    padding:30px 0 0 0;
    text-align:center;
}


.inet {width:100%; max-width:1170px; overflow:hidden;  margin:0 auto; }
.inet_img {float:left; width:100%; margin:0px; }
.inet_img img {width:100%; margin:0px; }
.inet_tab {width:100%; max-width:1140px; padding:0; margin:0; text-align:right;}
.inet_tab img {width:100%;max-width:134px; }


.grid-container {
  display: grid;
  grid-template-columns: 50% 50%; /* 두 칸 */
  justify-content: center; /* 가운데 정렬 */
  gap: 0; /* 간격 없음 */
  padding: 0;
  margin: 0;
}
.grid-container img {
  display: block; /* img 아래 여백 제거 */
  padding: 0;
  margin: 0;
}
.gc_img1 {
  grid-column: 1 / span 2;
}

@media all and (min-width:801px){
    /***************** pc *****************/
    h1 {font-size:36px;}
    h2 {font-size:30px;}
    h4 {font-size:18px;}
    .order_result .title_pc {
        float:left;
        width: 30%;
        border-radius: 8px;
        margin:0 7px 0 0;
        padding:8px 0 5px 0;
        display:inline-block;
        background:#eee;
        font-size: 14px;
        font-weight: 500;
        color: #464646;
        text-align: center;
    }
    .order_result input {width: 65%; }
    .line_info {float:left;width:2%;margin:0;padding:0; }
    .ip_info2 input,.ip_info2 input.mail, .ip_info2 input.mail2 {margin-right:5px; width:30% !important;}
    .ip_info2 select {width:34% !important;}
    .ip_info2 .adress1, .ip_info2 button {text-align:center; padding-left:0 ;padding-right:0; width:20% !important;}
    .ip_info2 input.adress2 {margin-top:7px; width:49% !important;}

    .fileDragDesc {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 30px 0;
        text-align: center;
        vertical-align:middle;
        font-size: 20px;
    }

.container_iptv {
	margin:30px auto 50px auto; padding:0;
	}
.container_iptv img {width:100%;margin:0px;  }

.mobile_only{display:none;}

}


@media all and (max-width:800px){
    /*************** 테블릿,모바일 ******************/
    h1 {font-size:28px;}
    h2 {font-size:24px;}
    h4 {font-size:16px;}
    .order_result .title_pc {display:none}
    .order_result input {width: 97%;}
    .title_info {clear:both; width:30%;}
    .ip_info, .ip_info2 {width:70%;}
    .line_info {display:none}
    .ip_info2 input.mail {margin:7px 0; width:100% !important;}
    .ip_info2 input.mail2 {width:88% !important;}
    .ip_info2 select {width:100% !important;}
    .ip_info2 .adress1, .ip_info2 button {text-align:center; padding-left:0 ;padding-right:0; width:49% !important;}
    .ip_info2 input.adress2 {margin-top:7px;width:100% !important;}
    .mail_a {width:12%;}
    .happy_call button {width: 100%; margin: 50px 0 0 0;}

    .fileDragDesc {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px 5px;
        text-align: center;
        vertical-align:middle;
        font-size: 15px;
    }
	.inet_tab {clear:both;width:100%; padding-top:20px; margin-top:20px ; text-align:left;}
	.inet_tab img {width:24%;max-width:150px; }

.container_iptv {
	margin:0 auto 20px auto; padding:0; 
	}
.container_iptv img {width:100%; }

.pc_only{display:none;}
}


@media only screen and (min-width: 1200px) {
/* .pc_only{display:block;} */
.mobile_only{display:none;}
.scroll-element_3 {width:47%;}
.scroll-element_1 img {max-width:976px; }
}

@media only screen and (min-width: 992px) and (max-width:1199px) {
/* .pc_only{display:block;} */
.mobile_only{display:none;}
.scroll-element_1 img {width:90%;}
.scroll-element_3 {width:67%;}
.inet_tab {clear:both;width:100%; padding-top:20px; margin-top:20px ; text-align:left;}
}

@media only screen and (min-width: 600px) and (max-width:991px) {
.mobile_only{display:block;}
.pc_only{display:none;}
.scroll-element_3 {width:77%;}
}

@media only screen and (max-width:599px) {
.mobile_only{display:block;}
.pc_only{display:none;}
.scroll-element_3 {width:91%;}
h2 span {font-size: 18px;}
}


/* 기본 구조 공통 */
.wrap {max-width:100%; margin:20px auto 50px auto; padding:20px 15px; background:#f2f2f2;}
.scroll_wrap {overflow-x:auto; white-space:nowrap; font-size:0}
.scroll-element_1 {display:inline-block; width:100%; border:2px solid #ccc; background:#fff; padding:20px 5px; margin:0; text-align:center;} 
.scroll-element_3 {display:inline-block;  background:#fff; padding:5px; margin:0;}
.se_31 {border:3px solid #6693d0;}
.se_32 {border:3px solid #a77aca;}
.scroll-element_1 img {width:100%; }
.scroll-element_3 img {width:100%; }
.scroll-element_3 + .scroll-element_3 {margin-left:15px; margin-bottom:15px;}

.scrollbar {
    width: 100%;
    height: 100%;
    overflow-x: scroll; /*  */
}

/* 스크롤바의 폭 너비 */
.scrollbar::-webkit-scrollbar {
    width: 10px;
}

.scrollbar::-webkit-scrollbar-thumb {
    background:#f1974f; /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

.scrollbar::-webkit-scrollbar-track {
    background:#fff;  /*스크롤바 뒷 배경 색상*/
}