/* 자동완성 백그라운드 색상 투명 */
/* 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-top: 90px;
}
header {
    font-size:13px;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 90px;
    /* background: #ffffff; */
    transition: top 0.2s ease-in-out;
    border-bottom:1px solid #8F794D;
    border-color: #efefef !important;
    min-height: 90px;
}


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 {
    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-color:#000;
    border:1px solid #000;
    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 button:hover{
    background-color: #f03838;
    border:1px solid #da1515;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

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

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

@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;
    }

}


@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; }
}


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

@media only screen and (min-width: 992px) and (max-width:1199px) {
/* .pc_only{display:block;} */
.mobile_only{display:none;}
.scroll-element_1 img, .scroll-element_3 img {width:90%;}
.scroll-element_2 {width:32%;}
.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_2 {width:48%;}
}

@media only screen and (max-width:599px) {
.mobile_only{display:block;}
.pc_only{display:none;}
.scroll-element_2 {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, .scroll-element_3 {display:inline-block; width:100%; border:2px solid #ccc; background:#fff; padding:20px 5px; margin:0; text-align:center;} 
.scroll-element_2 {display:inline-block; border:2px solid #ccc; background:#fff; padding:5px; margin:0;}
.scroll-element_1 img, .scroll-element_3 img {width:100%; }
.scroll-element_2 img {width:100%; }
.scroll-element_2 + .scroll-element_2 {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;  /*스크롤바 뒷 배경 색상*/
}


.select_control {
	border:2px solid #d1d1d1 !important;
	box-shadow: 0px;
    border-radius: 0.1rem !important;
    height:40px !important;
    line-height:38px;
    font-weight: 500;
    cursor:pointer;
	padding:2px 6px !important;
	font-size: 14px !important;

    padding: 10px;
    padding-right: 30px;
  
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right .7em top 50%;
    background-size: .65em auto;
}