@charset "utf-8";
@import url("https://cdn.linearicons.com/free/1.0.0/icon-font.min.css");

/* LOGIN
**************************/


.container h2{margin-bottom:20px;}
.container h2{font-size:3.6rem;}

.bl_tip { width: 100%; clear: both;}
.bl_tip>li {position: relative; font-size: 13px; padding-left: 15px; margin-bottom: 5px;}
.bl_tip>li:before {
    font-family: 'FontAwesome';
    content: "\f06a" !important;
    position: absolute;
    left:0;
    top:0;
}
.requireTxt { font-size: 13px; margin-bottom: 15px; margin-bottom: 1.5rem; text-align: right; color: #333;}
.requireTxt * { vertical-align: middle;}
.requireTxt i { font-size: 10px; margin-top: -2px; color: #81c341;}
.errorMsg {color:red;}
.btn-login {font-family: 'Roboto'; padding: 40px 0; padding: 4rem 0; width: 100%; font-size: 15px; font-size: 1.5rem; letter-spacing:.1rem;}
.loginBox { border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; padding:60px 0; padding:6.0rem 0; background:#fff;}
    .loginBox h4 { text-align: center; margin-bottom: 70px;  margin-bottom: 7rem;}
    .loginBox h4 p { margin-bottom:5px; margin-bottom: .5rem; }
    .loginBox h4 strong { font-family:Noto Sans KR; font-weight: 400 !important; }
    .loginForm { overflow: hidden; max-width: 480px; margin: 0 auto;}
    .loginForm .formLeft {width:65%; float:left;}
    .loginForm .formRight {width:35%; float:left;}
    .loginForm dl { display: table; width: 100%; margin: 1.5rem 0;}
    .loginForm dl dt { display: table-cell; width: 25%; color: #222; word-wrap : break-word;}
    .loginForm dl dt label.green {color:#68a508;}
    .loginForm dl dd { display: table-cell; width: 75%; word-wrap : break-word; padding-right: 30px;}

    .loginLink { padding-top: 40px; padding-top: 4rem;}
    .loginLink li { display: inline-block; padding-right: 13px; padding-right: 1.3rem; margin-right: 10px; margin-right: 1rem; position: relative;}
    .loginLink li:first-child:before {content: ''; position: absolute; right: 0; top: 50%; height: 10px; width: 1px; background: #ddd; margin-top: -5px;}
    .loginLink li a {}

.type-txtline { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; height: auto !important; padding: .6rem .3rem !important; width: 100%;}
.type-txtline:focus {border-bottom: 1px solid #222 !important; }


/* Join
**************************/
.joinCon {}
    .joinGuide {border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; margin-bottom: 40px; margin-bottom: }
    .joinGuide ul { overflow: hidden;margin: 0;padding: 0;list-style: none;}
    .joinGuide ul li { float:left; width: 33.33%; text-align: center; position: relative; padding-top: 20px; padding-top: 2rem;}
    .joinGuide ul li:before {
        content: "\e876";
        font-family: 'Linearicons-Free';
        color:#bebebe;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -18px;
        margin-top: -1.8rem;
        font-size: 20px;
        font-size: 2rem;
    }
    .joinGuide ul li:first-child:before { display: none;}
    .joinGuide ul li.current {}
    .joinGuide ul li.current dl { position: relative; display: block; overflow:hidden;}
    .joinGuide ul li.current dl:after {
        content: '';
        width: 100%;
        height: 4px;
        background: #81c341;
        position: absolute;
        left: 0;
        bottom: 0;
        margin-left: 12px;
    }
    .joinGuide ul li:first-child dl:after {
        margin-left: 0 !important;
    }
    .joinGuide ul li dl dt { font-family: Roboto; font-size: 12px; margin-bottom: 5px; margin-bottom: .5rem; letter-spacing: 1px;}
    .joinGuide ul li dl dd {color: #333333; padding-bottom: 20px; position: relative; font-size: 18px; font-size: 1.8rem; font-weight: 400; letter-spacing: -1px;}
    .joinCon .joinTit {font-family: Noto Sans KR; font-size:20px; font-size:20px; color: #333; font-weight: 500; text-align:center;}
    .joinCon .buttonGroup button.btn-sm { padding: 15px 40px;}
    .cartGuide ul li { width: 33.3333%;}


/* 입력폼양식 - 1:1상담
**************************/
.inputGroup { border-top:1px solid #aaa; width: 100%;}
.inputBox { border-bottom: 1px solid #ddd; padding: 9px 0;}
.inputBox.lastline {border-bottom: 1px solid #aaa;}
.inputBox > dl { display: table; width: 100%;}
.inputBox > dl > dt { display: table-cell; width: 22.6%; padding:0 20px; color: #222; position: relative; font-weight: 400; word-wrap : break-word; min-width: 120px; font-size: 14px;}
.inputBox > dl > dt.upalign { vertical-align: top;}
.inputBox > dl > dt.require:after {
    content: "\f069";
    font: normal normal normal 10px/1 FontAwesome;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
    color: #a3d374;
    position: absolute;
    left: 5px;
    top: 8px;
}

.inputBox > dl > dd { display: table-cell; width: 77.4%; padding:0 20px 0 0; word-wrap : break-word; font-size: 14px;}
.inputBox > dl > dd.midaling {vertical-align: middle;}
.inputBoxMail span.mailico { padding-left: 20px; position: relative; display: inline-block;}
.inputBoxMail span.mailico:before {
        content:'@';
        font-family: 'Roboto';
        position: absolute;
        left: 3px;
        top: 4px;
    }

.inputGroup .inputBox input[type=text] {vertical-align: middle;}
.inputBox .btn-zip {padding: 4px 20px; color:#fff;}
.inputBox1 input[type=text] {width:350px;}
.inputBox1.wide input[type=text] {width:100%;}
.inputBox1 .type-select {width:200px;}
.inputBox1 .robot {width:100px!important;}
.inputBox3 span {display:inline-block; padding-left: 3px;}
.inputBox3 span:before {
    content: "-";
    padding-right:6px;
    display: inline-block;
}
.inputBox3 span.first:before { display: none;}
.inputBox3 span:first-child {background:none; padding-left:0;}
.inputBox3 input[type=text] {width:76px;}

.inputBoxMail input[type=text] { width: 133px;}
.inputBoxZip input[type=text] { width: 80px;}
.inputBoxZip span {display:inline-block; padding-right: 0;}
/*.inputBoxZip span.first:after {
    content: "-";
    padding-left:3px;
    display: inline-block;
}*/
.inputBoxZip p.fullwh { margin-top: 5px;}
.inputBoxZip p.fullwh input[type=text] { width: 100%;}
.inputBox1 textarea {width:100%; height: 100px;}
.inputBox .chklabel { margin-right: 10px;}


.inputAgreeWrap { margin-top: 40px;}
.inputAgreeWrap h4 { overflow: hidden;}
.inputAgreeWrap h4 label { font-size:13px; color: #777; font-weight: normal;}
.inputAgreeWrap .inputAgree {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size:14px;
    line-height: 1.6;
    padding: 25px;
    height: 180px;
    overflow-y:scroll;
}

.joinResult ul li{padding:10px;}


.joinCon .confirmSelect {}
    .joinCon.boxline { border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; padding: 40px 0; padding: 4rem 0; background:#fff;}
    .joinCon .confirmSelect ul {display: table; width: 100%; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-top: 35px;}
    .joinCon .confirmSelect ul li { display: table-cell; width:50%;}
    .joinCon .confirmSelect ul li:first-child { border-right: 1px solid #ddd;}
    .joinCon .confirmSelect ul li button:hover { background: #81c341;}
    .joinCon .confirmSelect ul li dl {}
    .joinCon .confirmSelect ul li dl dt { font-size: 16px;}
    .joinCon .confirmSelect ul li dl dt p.ico {text-align: center; margin-bottom: 45px; margin-bottom: 4.5rem; padding-top: 40px;}
    .joinCon .confirmSelect ul li dl dt p.ico i { display: inline-block;}
    .joinCon .confirmSelect ul li dl dt strong { font-weight: 500; color: #333;}
    .joinCon .confirmSelect ul li dl dt p.txt {text-align: center;}
    .joinCon .confirmSelect ul li dl dd {text-align: center; padding: 25px 0 80px;}
    .joinCon .confirmSelect ul li dl dt.mailtxt { text-align: center; padding-top: 40px; font-size: 14px;}
    .joinCon .confirmSelect ul li dl dt.mailtxt strong { font-size: 18px; color: #333; margin-bottom: 10px; display: block;}
    .joinCon .confirmSelect ul li dl dd.mailBtn {padding: 25px 0 40px;}
    .confirmTop { text-align: center; border-top: 1px solid #aaa; padding: 60px 0 30px; font-size: 16px; margin-top: 20px;}
    .confirmTop em { color: #333; font-style: normal; font-weight: 500;}
    .confirmTop span.boxLine { color: #333; display: inline-block; padding: 15px 30px; border: 1px solid #ddd; margin-top: 30px;}
    .confirmTop span.boxLine strong { color: #68a508; font-family:Roboto; font-weight: 400; display: inline-block; padding:0 5px;}
    .confirmTop dl { border-bottom: 1px solid #ddd;}
    .confirmTop dl dt p.tit { font-size: 18px; font-size: 1.8rem; padding: 15px 0; padding:1.5rem 0; color: #333;}
    .confirmTop dl dt p.tit strong { font-weight: 500;}
    .confirmTop dl dt p.txt { font-size: 14px; font-size: 1.4rem; }
    .confirmTop dl dd { margin: 20px 0 40px; margin:2rem 0 4rem;}
    .confirmTop.orderend dt, .confirmTop.orderend dd { color: #000; font-weight: 500;}
    .confirmTop.orderend dd span { color: #68a508;}

    .joinCon .passwordForm {width:300px; margin: 0 auto; padding: 80px 0;}
    .joinCon .passwordForm dl { display: table; width: 100%;}
    .joinCon .passwordForm dl dt { display: table-cell; width: 25%;  color: #222; word-wrap : break-word; font-weight: 400;}
    .joinCon .passwordForm dl dd {display: table-cell; width: 75%; word-wrap : break-word;}
    .joinCon .passwordForm p.button { margin-top: 30px; margin-top: 3rem; text-align: center;}
    .joinCon .passwordForm p.button button {padding: 8px 32px;}
    .warrantyForm { float:left; width: 50%;}
    .warrantyForm .serialImg { text-align: center; padding: 40px 0 0;}

.lineform { border-top:1px solid #aaa; border-bottom:1px solid #ddd; position: relative; overflow: hidden; padding:30px; padding-left: 0; margin-bottom: 30px; font-size: 14px;}
.lineform.bgbox { background: #f7f7f7;}
.lineform ul {margin-right: 80px; overflow: hidden;}
.lineform ul li { float:left; width: 30%;}
.lineform ul li:first-child {width:40%;}
.lineform ul li.first {width:40%;}
.lineform ul li dl { display: table; width: 100%}
.lineform ul li dt { display: table-cell; width: 35%; text-align: right; padding-right: 20px; color:#333;}
.lineform ul li dd { display: table-cell; width: 65%; text-align: left;}
.lineform button { position: absolute; right: 15px; top: 22px; font-size: 12px; padding: 8px 25px;}
.lineform .t_underGreen:after {
    content: '';
    position: absolute;
    width:100%;
    height: 1px;
    background: #68a508;
    left: 0;
    bottom: 0;
}
.lineform.colum3 ul { margin-right: 0;}

.lineformcol5 { border-top:1px solid #aaa; border-bottom:1px solid #ddd; position: relative; overflow: hidden; padding:30px 0 20px; padding-left: 0; margin-bottom: 30px; font-size: 14px;}
.lineformcol5.bgbox { background: #f7f7f7;}
.lineformcol5 ul {overflow: hidden; padding-left: 30px;}
.lineformcol5 ul li { float:left; width: 30%; margin-bottom: 10px;}
.lineformcol5 ul li.first {width:40%;}
.lineformcol5 ul li dl { display: table; width: 100%}
.lineformcol5 ul li dt { display: table-cell; width:100px; text-align: right; padding-right: 20px; color:#333;}
.lineformcol5 ul li dd { display: table-cell; text-align: left;}

.meritBox { border: 1px solid #aaa; overflow: hidden; position: relative; margin-bottom: 20px;}
.meritBox:before {
    content: '';
    width:1px;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    background: #ddd;
}
.meritBox ul {width:100%;}
.meritBox ul li { float: left; width: 50%; padding: 40px 20px;}
.meritBox ul li dl { display: table; width: 100%;}
.meritBox ul li dl dt { display: table-cell; width:35%; text-align: center; vertical-align: middle;}
.meritBox ul li dl dd { display: table-cell; width:65%;}
.meritBox ul li dl dd p.tit { color: #222; margin-bottom: 10px; font-size: 18px; font-weight: 500;}


.lineform2 { border-top:1px solid #aaa; border-bottom:1px solid #ddd; position: relative; overflow: hidden; padding:20px 30px; margin-bottom: 20px; padding-right: 0; font-size: 14px;}
.lineform2 ul {display: table; width: 100%;}
.lineform2 ul li { display: table-cell; vertical-align: middle;}
.lineform2 ul li.listcell-1 {width:20%;}
.lineform2 ul li.listcell-2 {width:45%;}
.lineform2 ul li.listcell-3 {width:35%;}
.lineform2 ul li dl { display: table; width: 100%}
.lineform2 ul li dt { display: table-cell; width: 35%; height: 40px; line-height: 40px; text-align: right; padding-right: 20px; color: #333;}
.lineform2 ul li dd { display: table-cell; width: 65%; height: 40px; line-height: 40px; text-align: left;}
.lineform2 ul li dd span { line-height: 30px;}
    .morearea { text-align: center;}
    .morearea span { display: block; color: #333;}
    .morearea button { display: inline-block; background: none; border: none; cursor: pointer;}
    .morearea button:before{
        content:"\e888";
        font-family:Linearicons-Free;
        color: #81c341;
        font-size: 36px;
    }
.lineform2.cartorder ul { border-top: 1px solid #ddd;}
.lineform2.cartorder ul:first-child {border-top:0;}
.lineform2.cartorder p.goods {}
.lineform2.cartorder p.price { color: #000; margin-top: 5px; font-size: 15px;}
.totalpricebox { border-top: 1px solid #aaa; background: #f7f7f7; border-bottom: 1px solid #ddd; padding: 20px 30px; padding-left: 50%; color: #000;}
.totalpricebox dl { display: table; width: 100%;}
.totalpricebox dl dt { display: table-cell; width: 60%; text-align: right;}
.totalpricebox dl dd { display: table-cell; width: 40%; text-align: right;}




@media screen and (max-width: 640px) {
    .joinGuide { border: 0;}
    .joinGuide ul li { float: none; width: 100%; text-align: left; display: none;}
    .joinGuide ul li.current { display: block;}
    .joinGuide ul li:before { display: none;}
    .joinGuide ul li dl dd { font-size: 24px;}
    .joinGuide ul li.current dl:after {
        margin-left: 0;
    }
}
@media screen and (max-width: 750px) {
    .loginBox { padding:4.0rem 0;}
    .loginBox h4 {font-size: 1.6rem; margin-bottom: 2.5rem;}
    .loginBox h4 span { display: block; margin-top: .5rem;}
    .loginBox h4 p { line-height: 2rem;}
    .loginBox h4 p:first-child {margin-bottom: 1.5rem;}
    .loginForm .formLeft {width:100%; float:none;}
    .loginForm .formRight {width:100%; float:none;}
    .btn-login {padding: 2.5rem 0;}


}
@media screen and (max-width: 780px){
    .container { padding: 30px 15px 30px 15px;}
    .inputBox > dl > dt {
        display: block;
        width: 100%;
        padding-left: 12px;
        position: relative;
        margin-bottom: 10px;
    }
    .inputBox > dl > dt:before {
        content: '';
        width: 3px;
        height: 3px;
        position: absolute;
        left: 2px;
        top: 8px;
        background: #333;
    }
    .inputBox > dl > dd {
        display: block;
        width: 100%;
        padding-left: 12px;
        overflow: hidden;
    }
    .inputBox > dl > dt.require:after {
    content: "\f069";
    font: normal normal normal 10px/1 FontAwesome;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
    color: #a3d374;
    position: static;
    margin-left: 5px;
}
}