@charset "UTF-8";




@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'), url('../fonts/pretendard/Pretendard-Black.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Black.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard ExtraBold'), url('../fonts/pretendard/Pretendard-ExtraBold.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'), url('../fonts/pretendard/Pretendard-Bold.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'), url('../fonts/pretendard/Pretendard-SemiBold.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'), url('../fonts/pretendard/Pretendard-Medium.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'), url('../fonts/pretendard/Pretendard-Regular.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'), url('../fonts/pretendard/Pretendard-Light.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Light.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: local('Pretendard ExtraLight'), url('../fonts/pretendard/Pretendard-ExtraLight.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: local('Pretendard Thin'), url('../fonts/pretendard/Pretendard-Thin.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Thin.woff') format('woff');
}
/*폰트설정 : 끝*/


/*기타 설정 : 시작 */
html{-webkit-text-size-adjust:none; 
-ms-user-select:none; -khtml-user-select:none;
-webkit-user-select:none; user-select:none; 
-webkit-touch-callout:none; }
*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body,a,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,th,td,
form,fieldset,label,legend,input,textarea,button,menu{margin:0px;padding:0px; -webkit-text-size-adjust:none;}
body,input,textarea,select,table,button,code{color:#1f1f1f;
font-family: /*'NanumSquare'*/'Pretendard'; font-weight: 400; text-align: left; font-style:normal; } 
body{width:100%; position:relative;word-wrap:break-word;word-break:break-all; background: #f0f0f0;
min-width:280px; min-height: 100vh;}
nav,menu,ul,li,ol{list-style:none;}
div{display:block;}
table{border-collapse:collapse; border-spacing:0;}
img,fieldset{border:none;}
em,address{font-style:normal;}
select{cursor: pointer; background: none}
section,article,header,footer,nav,aside,hgroup{display:block;}
button{border:none; background:none; cursor:pointer !important; margin:0; padding:0}
button:focus{outline:none;}
a{margin:0px; padding:0px; text-decoration:none; cursor:pointer;}
a:hover, a:active{text-decoration:none !important;}
table{table-layout: fixed;}
.clearFix:after{content:""; display:block; clear:both;}
.ibFix{line-height:0px;}
.hiddenFix{position: absolute; overflow: hidden; top: 0; left: 0; width: 1px; height: 1px; line-height: 0;
text-indent:-10000px}
caption{position: absolute; overflow: hidden; top: 0; left: 0; width: 1px; height: 1px; line-height: 0;
text-indent:-10000px}
label{cursor:pointer;}
.floatLeft{float: left;} .floatLeft:after{content:""; display:block; clear:both;}
.floatRight{float: right; position: relative;} .floatRight:after{content:""; display:block; clear:both;}
.pageFix{overflow: hidden;}
.tCenter{text-align: center;}
.inside{display: inline-block;}
.inside:after{content: ""; display: block; clear: both;}
.row{display: block; width: 100%; position: relative;}
.row:after{content: ""; display: block; clear: both;}
.bold{font-weight: 700}

select {
   -webkit-appearance:none; /* for chrome */
   -moz-appearance:none; /*for firefox*/
   appearance:none;
}

select::-ms-expand{
   display:none;/*for IE10,11*/
}

:root {
  --main: #06141F;
  --red:#AA1B39;
  --red2: #FF5F5F;
  --redBg:#C71717;
}

.red{color:var(--red) !important;}
.red2{color:var(--red2) !important;}

.gotoTop{
    position: fixed;
    display: none;
    z-index: 100;
    width: 50px;
    height: 50px;
    background: url(../images/go_top75.png) center no-repeat;
    background-size: 50px 50px;
    bottom: 19px;
    right: 16px;
    filter : drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}

.noMargin{margin:0 !important;}

/*기타 설정 : 끝*/





/*레이아웃 : 시작*/
.allWrap{
    display: block;
    position: relative;
    width: 100%;
    max-width: 1000px;
    min-width: 280px;
    min-height: 100vh;
    margin:0 auto;
    /*border-left:1px solid #e0e0e0;
    border-right:1px solid #e0e0e0;*/
}


.centerWrap{
    display: block;
    width: 100%;
    margin:0 auto;
    position: relative;
    padding:0 20px;
}

.blackBg{background: var(--main);}
.blackBg .contents{background: var(--main);}

.blackBg .contents .centerWrap{
    padding:70px 20px 80px;
}

.blackBg .contents .centerWrap.type2{
    padding:70px 20px 140px;
}

.whiteBg{background: var(--main);}
.whiteBg2{background: #fff;}
.whiteBg .contents{background: #f9f9f9;}

.whiteBg .contents .centerWrap{
    padding:70px 20px 80px;
}

.whiteBg .contents .centerWrap.type2{
    padding:70px 20px 140px;
}

.whiteBg .contents .centerWrap.type3{
    padding:70px 20px 0;
}

.whiteBg .contents .centerWrap.type4{
    padding:110px 20px 80px;
}

.whiteBgAll{background: #fff;}
.whiteBgAll .contents{background: #fff;}

.whiteBgAll .contents .centerWrap{
    padding:70px 20px 80px;
}


/*레이아웃 : 끝*/



/*헤더1 : 시작*/
.header1{
    position: fixed;
    width: 100%;
    max-width: 1000px;
    min-width: 280px;
    top:0;
    left:50%;
    transform: translateX(-50%);
    background: #13202A;
    border-bottom:1px solid #79848D;
    height: 70px;
    z-index: 100;
}

.header1 h1{
    position: absolute;
    font-size: 18px;
    height: 70px;
    line-height: 70px;
    top:0;
    left:50%;
    transform: translateX(-50%);
    color:#fff;
    font-weight: 700;
}

.header1 .buttonBack{
    display: block;
    width: 35px;
    height: 50px;
    background: url(../images/btn-prev-a1.png) center no-repeat;
    background-size: 7px 12px;
    margin:10px 0 0 -14px;
    float: left;
}

.header1:after{display: block; clear: both; content: "";}

.header1 .step{
    width:50px;
    height: 26px;
    border-radius: 13px;
    background: rgba(255,255,255,0.1);
    float: right;
    margin:20px 0 0 0;
    text-align: center;
}

.header1 .step .t1{
    float: left;
    height: 26px;
    line-height: 26px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color:#fff;
    display: block;
}

.header1 .step .t2{
    float: left;
    height: 26px;
    line-height: 26px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color:rgba(255,255,255,0.7);
    display: block;
}
/*헤더1 : 끝*/




/*헤더2 : 시작*/
.header2{
    position: fixed;
    width: 100%;
    max-width: 1000px;
    min-width: 280px;
    top:0;
    left:50%;
    transform: translateX(-50%);
    background: #fff;
    border-bottom:1px solid #DFE2E6;
    height: 70px;
    z-index: 100;
}

.header2 h1{
    position: absolute;
    font-size: 18px;
    height: 70px;
    line-height: 70px;
    top:0;
    left:50%;
    transform: translateX(-50%);
    color:#333;
    font-weight: 700;
}



.header2 .buttonBack{
    display: block;
    width: 29px;
    height: 50px;
    background: url(../images/btn-prev-a1-111.png) center no-repeat;
    background-size: 7px 12px;
    margin:10px 0 0 -11px;
    float: left;
}

.header2 .buttonHome{
    display: block;
    width: 30px;
    height: 50px;
    background: url(../images/home.png) center no-repeat;
    background-size: 24px 24px;
    margin:10px 0 0 10px;
    float: left;
}

.header2 .buttonSetting{
    display: block;
    width: 40px;
    height: 50px;
    background: url(../images/setting12.png) center no-repeat;
    background-size: 24px 24px;
    margin:10px -8px 0 0;
    float: right;
}

.header2 .buttonMenu{
    display: block;
    width: 40px;
    height: 50px;
    background: url(../images/nav-main2000.png) center no-repeat;
    background-size: 20px 14px;
    margin:10px -10px 0 0;
    float: right;
}


.header2:after{display: block; clear: both; content: "";}

.header2 .step{
    width:50px;
    height: 26px;
    border-radius: 13px;
    background: rgba(255,255,255,0.1);
    float: right;
    margin:20px 0 0 0;
    text-align: center;
}

.header2 .step .t1{
    float: left;
    height: 26px;
    line-height: 26px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color:#fff;
    display: block;
}

.header2 .step .t2{
    float: left;
    height: 26px;
    line-height: 26px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color:rgba(255,255,255,0.7);
    display: block;
}
/*헤더2 : 끝*/









/*푸터 : 시작*/
footer{
    display: block;
    width: 100%;
    border-top:1px solid #79848D;
    background: var(--main);
    padding:0 0 80px;
}

footer .topRow{
    display: block;
    width: 100%;
    padding:29px 0 23px;
    border-bottom:1px solid rgba(255, 255, 255, 0.2);
}

footer .topRow:after{content: ""; display: block; clear: both;}

footer .topRow img{
    float: left;
    display: block;
    width: 140px;
}

footer .csCenter{
    display: block;
    width: 100%;
    padding:23px 0 0;
	color: #fff;
}

footer .csCenter .title{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color:#fff;
    margin:0 0 18px;
}

footer .csCenter .csRow{
    display: block;
    width: 100%;
}

footer .csCenter .csRow + .csRow{margin:5px 0 0;}

footer .csCenter .csRow:after{content: ""; display: block; clear: both;}

footer .csCenter .csRow .col1{
    display: block;
    width: 134px;
    float: left;
    color:#fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
}

footer .csCenter .csRow .col2{
    display: block;
    width: calc(100% - 154px);
    float: right;
    color:#fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
}
/*푸터 : 끝*/



/*라디오버튼, 체크박스 : 시작*/

.bInput {
    position: relative;
    display: block;
    max-width: 100%;
    float: left;
    height: 30px;
}

.bInput + .bInput{margin:0 0 0 28px}

.bInput input + .txt {
    float: left;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-weight: 400;
    color:#fff;
    padding:0 0 0 35px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bInput input {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

.bInput input[type="radio"]{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    line-height: normal;
}

.bInput input[type="radio"]:focus+.txt{
    /*outline:2px solid #20787c; outline-offset: -2px;*/
}

/*.bInput input[type="radio"]:not(:checked) + .txt {
    background: url(../images/radio-w16-off.png) left no-repeat;
    background-size: 16px 16px;
}

.bInput input[type="radio"]:checked + .txt {
    background: url(../images/radio-w16-on.png) left no-repeat;
    background-size: 16px 16px;
}*/




.bInput input[type="checkbox"]:not(:checked) + .txt {
    background: url(../images/check-off-24a.png) left no-repeat;
    background-size: 24px 24px;
}

.bInput input[type="checkbox"]:checked + .txt {
    background: url(../images/check-on-24a.png) left no-repeat;
    background-size: 24px 24px;
}



.bInput2 {
    position: relative;
    display: block;
    max-width: 100%;
    float: left;
    height: 30px;
}

.bInput2 + .bInput2{margin:0 0 0 28px}

.bInput2 input + .txt {
    float: left;
    line-height: 30px;
    font-size: 16px;
    font-weight: 700;
    color:var(--main) !important;
    padding:0 0 0 32px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bInput2 input {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

/*.bInput2 input[type="radio"]{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    line-height: normal;
}

.bInput2 input[type="radio"]:focus+.txt{
    /*outline:2px solid #20787c; outline-offset: -2px;*/
}

.bInput2 input[type="radio"]:not(:checked) + .txt {
    background: url(../images/radio-w16-off.png) left no-repeat;
    background-size: 16px 16px;
}

.bInput2 input[type="radio"]:checked + .txt {
    background: url(../images/radio-w16-on.png) left no-repeat;
    background-size: 16px 16px;
}




.bInput2 input[type="checkbox"]:not(:checked) + .txt {
    background: url(../images/check-off-24b.png) left 3px no-repeat;
    background-size: 24px 24px;
}

.bInput2 input[type="checkbox"]:checked + .txt {
    background: url(../images/check-on-24a.png) left 3px no-repeat;
    background-size: 24px 24px;
}
/*라디오버튼, 체크박스 : 끝*/




/*버튼 : 시작*/
.buttonOk{
    display: block;
    width: 100%;
    height: 54px;
    line-height: 54px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color:var(--main) !important;
    background: #fff;
    margin:33px 0 0;
}

.buttonMain{
    display: block;
    width: 100%;
    height: 54px;
    line-height: 54px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background:var(--main);
    color: #fff !important;
}

.buttonMain.disabled{
    background: #E1E1E1;
}


.buttonCancel{
    display: block;
    width: 100%;
    height: 54px;
    line-height: 54px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background:#EAEAEA;
    color: var(--main) !important;
}

.buttonBlackLine{
    display: block;
    width: 100%;
    height: 54px;
    line-height: 52px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color:var(--main) !important;
    background: #fff;
    border:1px solid var(--main) !important;
}
/*버튼 : 끝*/



/*로그인 : 시작*/


.blackBg > .centerWrap{
    padding:90px 20px 0;
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.loginLogo{
    display: block;
    width: 150px;
    margin:0 auto;
}

.loginTxt1{
    display: block;
    width: 100%;
    text-align: center;
    font-size:18px;
    font-weight: 700;
    color:#fff;
    margin:20px 0 0;
    line-height: 24px;
}

.loginTxt2{
    display: block;
    width: 100%;
    text-align: center;
    font-size:18px;
    font-weight: 700;
    color:#fff;
    margin:7px 0 69px;
    line-height: 24px;
}

.radios{
    display: block;
    width: 100%;
    text-align: center;
}

.loginSetting{margin:21px 0 0;}

.buttonLogin{
    display: block;
    width: 100%;
    height: 54px;
    line-height: 54px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color:var(--main) !important;
    background: #fff;
    margin:33px 0 0;
}


.findPw{
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color:#fff !important;
    font-weight: 500;
    /*padding:0 10px;*/
    margin:28px auto 0;
    display: inline-block;
    border-bottom:1px solid #fff;
    /*text-decoration: underline;*/
}
/*로그인 : 끝*/





/*회원가입 : 시작*/
.topTxt{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 15px;
    line-height: 30px;
    padding:18px 0;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,0.2);
}

.formWrap{
    display: block;
    width: 100%;
}

.inputStore{
    width: calc(100% - 110px) !important;
    float: left;
}

.inputStore + .selectNormal2{
    width: 100px;
    float: right;
}

.dataWrap + .buttonOk{margin:44px 0 0;}

.joinLogo{
    display: block;
    width: 120px;
    margin:60px auto 0;
}

.join3Txt1{
    display: block;
    width: 100%;
    text-align: center;
    font-size:18px;
    font-weight: 700;
    color:#fff;
    margin:20px 0 0;
    line-height: 24px;
}

.join3Txt2{
    display: block;
    width: 100%;
    text-align: center;
    font-size:15px;
    font-weight: 500;
    color:#fff;
    margin:50px 0 32px;
    line-height: 24px;
}

.join3Txt3{
    display: block;
    width: 100%;
    text-align: center;
    font-size:17px;
    font-weight: 500;
    color:#fff;
    margin:28px 0 36px;
    line-height: 26px;
}

.imgJoin3{
    display: block;
    margin:0 auto;
    width: 150px;
}
/*회원가입 : 끝*/




/*비밀번호 찾기 : 시작*/
.timeLimit{
    display: block;
    float: right;
    font-size: 13px;
    line-height: 24px;
    color: #FFFF1A !important;
    font-weight: 700;
}
/*비밀번호 찾기 : 끝*/




/*모달 : 시작*/
.modalBasic{
    display: none;
    width:calc(100% - 40px);
    max-width:360px;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 20px 20px;
    position: fixed;
    z-index: 1000;
    background: #fff;
    border-radius: 5px;
}

.modalBasic.active{
    display: block;
}

/*.modalBasic .closeModal{
    position: absolute;
    width: 40px;
    height: 40px;
    background: url(../images/close24x24.svg) center no-repeat;
    background-size: 24px 24px;
    top:16px;
    right: 10px;
}*/


.modalContent{
    padding:38px 0 36px;
}

.modalTitle{
    color:#000;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
    margin:0 0 10px;
}

.modalTxt0{
    color:#000;
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    color:var(--main);
    text-align: center;
}

.modalTxt0 + .modalTxt1{margin:13px 0 0}

.modalTxt1{
    color:#000;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color:var(--main);
    text-align: center;
}

.dimm{
    display: none;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    position: fixed;
    z-index: 950;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.5);
}

.dimm.active{display: block;}

.buttonsInBottom{
    display: block;
    width: 100%;
    text-align: center;
}

.buttonsInBottom .buttonCancel{
    height: 44px;
    line-height: 44px;
}

.buttonsInBottom .buttonMain{
    height: 44px;
    line-height: 44px;
}

.modal .buttonMain{font-size: 15px;}
/*모달 : 끝*/





/*정보수정하기 : 시작*/
.topUserInfo{
    display: block;
    padding:26px 0;
    border-bottom:1px solid rgba(0,0,0,0.15);
}

.topUserInfo.noBorder{
    border-bottom: none;
}


.topUserInfo .tuTxt1{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 12px;
    line-height: 19px;
    font-weight: 400;
    color:#707070;
    text-align: left;
    margin:0 0 8px;
}

.topUserInfo .tuTxt2{
    display: block;
    float: left;
    text-align: left;
    font-size: 15px;
    line-height: 24px;
    font-weight: 700;
    color:var(--main);
    text-align: left;
}

.topUserInfo .tuTxt3{
    display: block;
    float: left;
    text-align: left;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color:var(--main);
    text-align: left;
    margin:0 0 0 5px;
}

.topUserInfo .tuTxt4{
    display: block;
    float: left;
    text-align: left;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color:var(--main);
    text-align: left;
    margin:0 0 0 5px;
}

.inputStyleWraps{
    display: block;
    width: 100%;
    margin:27px 0 0;
}

.inputStyleWrap{
    display: block;
    width: 100%;
    position: relative;
    height: 54px;
    line-height: 52px;
    border:1px solid #E9E9EB;
    border-radius: 5px;
    padding:0 14px;
    background: #fff !important;
    text-align: left;
    color:#fff;
    font-weight: 400;}
}

.inputStyleWrap:after{content: ""; display: block; clear: both;}

.inputStyleWrap + .inputStyleWrap{margin:12px 0 0}

.inputStyleWrap .dataInput{
    display: none;
    float: left;
    height:52px;
    color:var(--main) !important;
    line-height: 52px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    padding:0 20px 0 0;
    background: url(../images/write.png) right no-repeat;
    background-size: 20px 20px;
    float: left;
}

.inputStyleWrap .dataInput.active{display: block;}

.inputStyleWrap .vLine1{
    display: block;
    float: left;
    width: 1px;
    height: 22px;
    background: rgba(0,0,0,0.15);
    margin:15px 0 0;
}

.inputNoBorder{
    display: none;
    float: left;
    height: 52px;
    line-height: 52px;
    text-align: left;
    border: none !important;
    outline: none !important;
    color:#111 !important;
    width: calc(100% - 120px);
}

.inputNoBorder.active{display: block;}

.selectNoBorder{
    display: block;
    float: right;
    width:106px;
    text-align: right;
    font-size: 13px;
    height: 36px;
    line-height: 36px;
    margin:8px 0 ;
    border: none !important;
    outline: none !important;
    font-weight: 500;
    color: #707070;
    background: url(../images/tri2.png) right no-repeat;
    background-size: 9px 6px;
    padding:0 16px 0 0;
}

.selectNoBorder option{padding:10px !!important}

.message{
    display: block;
    width: 100%;
    border-radius: 5px;
    background: #F1FAFF;
    color:#00A4FF;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    padding:20px 8px 19px;
    margin:18px 0 45px;
}

.openInfo{
    display: block;
    width: 49px;
    height: 51px;
    background: url(../images/info21x21f.png) center no-repeat;
    background-size: 21px 21px;
    float: right;
    margin:0 -14px 0 0;
}

.gotoChangePwWrap{
    display: block;
    text-align: center;
    margin:34px 0 0;
}

.gotoChangePw{
    display: inline-block;
    height: 28px;
    line-height: 28px;
    border-bottom: 1px solid #333;
    color:#333;
    font-size: 13px;
    font-weight: 500;
}

.buttonCancel.buttonSet1a{
    float: left;
    width: calc(40% - 5px);
}

.buttonMain.buttonSet1a{
    float: right;
    width: calc(60% - 5px);
}

.buttonCancel.buttonSet1in2{
    float: left;
    width: calc(50% - 5px);
}

.buttonMain.buttonSet1in2{
    float: right;
    width: calc(50% - 5px);
}
/*정보수정하기 : 끝*/



/*시작화면 : 시작*/
.startWrap{
    display: block;
    width: 100%;
    padding:100px 0 60px;
    position: relative;
}

.startWrap .swiper-pagination{
    position: absolute;
    top:38px;
    left:50%;
    transform: translateX(-50%);
}

.startWrap .swiper-pagination .swiper-pagination-bullet{
    width: 28px !important;
    height: 4px !important;
    margin:0 4px !important;
    background: #E0E0E0 !important;
    opacity: 1 !important;
    border-radius: 0 !important;
}

.startWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #06141F !important;
}

.startWrap .startTxt{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color:var(--main);
    padding:0 20px 40px;
}

.startSwiper{
    display: block;
    width: 100%;
    margin:30px 0 0;
    overflow: hidden;
}

.startWrap .sLogo{
    display: block;
    width: 120px;
    margin:0 auto;
}

.startWrap .stImg1{
    display: block;
    width: 260px;
    margin:36px auto 0;
    border-radius: 60px;
}

.startWrap .stImg2{
    display: block;
    width: 260px;
    margin:36px auto 0;
    border-radius: 60px;

}

.startWrap .stImg3{
    display: block;
    width: 250px;
    margin:0 auto;
}

.startWrap .stImg4{
    display: block;
    width: 250px;
    margin:0 auto;
}
.startWrap .startButtons{
    display: block;
    width: 100%;
    padding:0 20px;
    max-width: 360px;
    margin:0 auto;
}

.startWrap .gotoLoginWrap{
    display: block;
    width: 100%;

    text-align: center;

    margin:20px auto 0;
}

.startWrap .gotoLoginWrap .gotoLogin{
    display: inline-block;
    height: 36px;
    line-height: 36px;
    font-size: 13px;
    font-weight: 500;
    color:#333;
    border-bottom:1px solid #333;

}

/*시작화면 : 끝*/


/*오토 컨설팅 : 시작*/
.autoMenus{
    display: block;
    width: 100%;
    margin:27px 0 75px;
}

.autoMenu{
    display: block;
    width: 100%;
    background: #fff;
    border:1px solid #E9E9EB;
    border-radius: 5px;
    padding:13px 10px 14px 0;
}

.autoMenu:after{content: ""; display: block; clear: both;}

.autoMenu .col1{
    float: left;
    width: 80px;
    height: 47px;
}

.autoMenu:nth-child(1) .col1{
    background: url(../images/automenu01.png) center 10px no-repeat;
    background-size: 33px 27px;
}

.autoMenu:nth-child(2) .col1{
    background: url(../images/automenu02.png) center 6px no-repeat;
    background-size: 28px 34px;
}

.autoMenu:nth-child(3) .col1{
    background: url(../images/automenu03.png) center 5px no-repeat;
    background-size: 28px 35px;
}

.autoMenu .col2{
    float: right;
    width: calc(100% - 80px);
}

.autoMenu .col2 .txt1{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    color:var(--main) !important;
}

.autoMenu .col2 .txt2{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    color:#707070 !important;
    margin: 7px 0 0;
}

.autoMenu + .autoMenu{margin:12px 0 0;}
/*오토 컨설팅 : 끝*/



/*시공요청하기 : 시작*/
.searchWrap{
    display: block;
    width: 100%;
    position: relative;
    margin:20px 0 0;
}

.whiteBoxAll .searchWrap{margin:0}

.searchWrap input{
    display: block;
    width: 100%;
    height: 54px;
    line-height: 52px;
    background: #Fff;
    border-radius: 5px;
    padding:0 16px;
    border:1px solid #E9E9EB !important;
    color:#111;
    text-align: left;
    font-size:14px;
    font-weight: 500;
}

.searchWrap input::placeholder{
    color:#999;
}

.searchWrap .buttonSearch{
    display: block;
    width: 46px;
    height: 52px;
    background: url(../images/search-18x18x333.png) center no-repeat;
    background-size: 18px 18px;
    position: absolute;
    top:0;
    right: 0;
    z-index: 10;
}

.searchTopBar{
    display: block;
    width: 100%;
    padding:22px 0 17px;
    /*border-bottom:1px solid #DFE2E6;*/
}

.searchTopBar:after{content: ""; display: block; clear: both;}

.searchTopBar .t1{
    display: block;
    float: left;
    height: 28px;
    line-height: 28px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color:var(--main) !important;
}

.searchTopBar .t2{
    display: block;
    float: left;
    height: 28px;
    line-height: 28px;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color:var(--main) !important;
    margin:0 0 0 8px;
}

.searchTopBar .t2 span{color:#AA1B39 !important;}

.searchTopBar .searchAll{
    display: block;
    float: left;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color:var(--main) !important;
}

.searchTopBar .searchAll span{
    display: block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    border-bottom:1px solid var(--main);
}

.searchTopBar .requestAll{
    float: left;
    width: 63px;
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    text-align: center;
    background: #C71717;
    color:#fff !important;
    font-size: 13px;
    font-weight: 500;
    margin:0 0 0 13px;
}

.no_car_search{
	display: flex;
	width: 100%;
	justify-content: center;
	height: 100px;
	flex-direction: column;
	align-items: center;
	margin-top:20px; 
	margin-bottom: 20px;
}

.no_car_search_empty{
	display: none;
	width: 100%;
	justify-content: center;
	height: 100px;
	flex-direction: column;
	align-items: center;
	margin-top:20px; 
	margin-bottom: 20px;
}

.no_car_search img{
	width: 50px;
}

.no_car_search_empty img{
	width: 50px;
}

.showInfo{
    height: 28px;
    line-height: 28px;
    text-align: left;
    font-size:12px;
    font-weight: 500;
    color:#707070 !important;
    background: url(../images/info21x21f.png) right 3px no-repeat;
    background-size: 21px 21px;
    padding:0 24px 0 0 ;
}

.whiteBoxAll{
    background: #fff;
    width: calc(100% + 40px);
    transform: translateX(-20px);
    border-top:1px solid #DFE2E6;
    padding:20px 20px 80px;
}

.whiteBoxAll2{
    background: #fff;
    width: calc(100% + 40px);
    transform: translateX(-20px);
    padding:20px 20px 80px;
}

.requestOne {
    display: block;
    width: 100%;
    padding:15px 0 16px;
    border-bottom: 1px solid #DFE2E6;
}

.requestOne .bInput2{
    max-width:calc(100% - 40px);
}

.requestOne .requestThis{
    float: right;
    height: 28px;
    line-height: 28px;
    text-align: center;
    width: 40px;
    border-radius: 5px;
    background: var(--main);
    font-size: 13px;
    font-weight: 500;
    color:#fff !important;
}

.detailInfo{
    display: block;
    padding: 0 0 0 32px;
    margin:8px 0 0;
}

.detailInfo .row .label{
    float: left;
    width: 67px;
    font-size: 13px;
    line-height: 24px;
    text-align: left;
    color:#707070;
    font-weight: 500;
}

.detailInfo .row .data{
    float: left;
    width: calc(100% - 67px);
    font-size: 13px;
    line-height: 24px;
    text-align: left;
    color:var(--main) !important;
    font-weight: 500;
}

.detailInfo .row .data.red{color:var(--red) !important;}

.buttonBlackLine.moreList{margin:30px 0 0;}
/*시공요청하기 : 끝*/


/*시공요청하기 - 단일요청 : 시작*/
.topMessage{
    display: block;
    width: 100%;
    padding:0 0 20px;
    border-bottom:1px solid #DFE2E6;
}

.topMessage.noBorder{border-bottom: none;}

.topMessage:after{content: ""; display: block; clear: both;}

.topMessage > .icon{
    float: left;
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background: var(--main);
}

.topMessage > .txt{
    display: block;
    float: left;
    width: calc(100% - 17px);
    text-align: left;
    line-height: 22px;
    font-size: 15px;
    color:var(--main);
    margin:0 0 0 11px;
}

.topMessage > .txt2{
    display: block;
    float: right;
    width: 100%;
    text-align: left;
    line-height: 24px;
    font-size: 12px;
    color:#707070;
    margin:6px 0 0;
    padding:0 0 0 17px;
}

.whiteBox1{
    background: #fff;
    width: calc(100% + 40px);
    transform: translateX(-20px);
    border-top:1px solid #DFE2E6;
    padding:20px 20px 20px;
}

.whiteBox2{
    background: #fff;
    width: calc(100% + 40px);
    transform: translateX(-20px);
    padding:20px 20px 20px;
    margin:14px 0 0;
}

.topRequestInfo{
    display: block;
    width: 100%;
    padding:17px 0 0;
}

.topRequestInfo .row1 > img{
    display: block;
    float: left;
    width: 46px;
    height: 11px;
    margin:6px 20px 0 0;
}
.topRequestInfo .row1 > .line1{
    display: block;
    float: left;
    width: 1px;
    height: 12px;
    background: #DFE2E6;
    margin:6px 8px;
}

.topRequestInfo .row1 > .txt1{
    display: block;
    float: left;
    font-weight: 16px;
    line-height: 24px;
    text-align: left;
    font-weight: 700;
}

.topRequestInfo .row1 > .txt2{
    display: block;
    float: left;
    font-weight: 16px;
    line-height: 24px;
    text-align: left;
    font-weight: 700;
}

.topRequestInfo .detailInfo{
    display: block;
    padding: 0;
    margin:8px 0 0;
}

.whiteBox2 .selectOne{
    margin:20px 0 0;
}

.whiteBox2 .selectOne button{
    width: calc(50% - 5px);
    float: left;
    background: var(--main);
    border-radius: 5px;
    text-align: center;
    height: 120px;
    padding:0 !important;
}

.whiteBox2 .selectOne button + button{float: right;}

.whiteBox2 .selectOne button .img1{
    width: 100%;
    height: 60px;
}

.whiteBox2 .selectOne button .img1.img1a{
    background: url(../images/star.png) center 13px no-repeat;
    background-size: 40px 40px;
}

.whiteBox2 .selectOne button .img1.img1b{
    background: url(../images/automenu02.png) center 17px no-repeat;
    background-size:28px 34px;
}

.whiteBox2 .selectOne button > .txt1{
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    color: #fff;
}

.buttonRequestrOne{margin: 40px 0 0;}

.searchedStudio{
    display: block;
    width: 100%;
    border:1px solid #C71717;
    border-radius: 5px;
    text-align: center;
    height: 66px;
    margin:20px 0 0;
}

.searchedStudio:after{content: ""; display: block; clear: both;}

.searchedStudio .t1{
    float: left;
    height: 64px;
    display: block;
    margin:0 10px 0 0;
}

.searchedStudio .t1.type1{
    background: url(../images/grade1.png) center no-repeat;
    width: 28px;
    background-size: 28px 38px;
}

.searchedStudio .t1.type2{
    background: url(../images/grade2.png) center no-repeat;
    width: 28px;
    background-size: 28px 38px;
}

.searchedStudio .t1.type3{
    background: url(../images/tbex_red_sub.png) center no-repeat;
    width: 40px;
    background-size: 40px 10px;
}

.searchedStudio .t2{
    display: block;
    height: 64px;
    line-height: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 15px;
    color:var(--main) !important;
}

/*시공요청하기 - 단일요청 : 끝*/


/*시공요청하기 - 복수요청 : 시작*/
.topRequestList{
    display: block;
    width: 100%;
    border-top:1px solid #DFE2E6;
}

.topRequestOne{
    display: block;
    width: 100%;
    padding:10px 0 12px;
    border-bottom:1px solid #DFE2E6;
}

.topRequestOne:after{content: ""; display: block; clear: both;}

.topRequestOne .txt1{
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color:var(--main) !important;
}

.topRequestOne .txt2{
    font-size: 13px;
    font-weight: 500;
    color:#111 !important;
    line-height: 24px;
    float: left;
    display: block;
}

.topRequestOne .txt3{
    font-size: 13px;
    font-weight: 500;
    color:#111 !important;
    line-height: 24px;
    float: left;
    display: block;
}

.topRequestOne .line1{
    float: left;
    width: 1px;
    height: 12px;
    background: #DFE2E6;
    margin:6px 9px 0;
    display: block;
}

.requestMore{
    display: block;
    width: 100%;
    text-align: center;
    padding:20px 0 0;
}

.buttonRequestMore{
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    height: 42px;
    color:#333;
    text-align: center;
    line-height: 24px;
    background: url(../images/btn-prev-a17.png) bottom no-repeat;
    background-size: 10px 6px;
}

.careShopList{
    display: block;
    width: 100%;
    border-top:1px solid #DFE2E6;
}

.careShop{
    display: block;
    width: 100%;
    padding:11px 0 20px;
    border-bottom:1px solid #DFE2E6;
}

.careShop:after{content: ""; display: block; clear: both;}

.careShop .icon{
    display: block;
    width: 28px;
    height: 38px;
    float: left;
    margin:0 10px 0 0;
}

.careShop .icon.icon1{
    background: url(../images/grade1.png) center no-repeat;
    background-size: 28px 38px;
}

.careShop .icon.icon2{
    background: url(../images/grade2.png) center no-repeat;
    background-size: 28px 38px;
}

.careShop .icon.icon3{
    background: url(../images/tbex_red_sub.png) center 16px no-repeat;
    background-size: 28px 7px;
}

.careShop .name{
    display: block;
    width: calc(100% - 79px);
    float: left;
    height: 38px;
    line-height: 38px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    color:var(--main) !important;
}



.careShop .selectThis{
    display: block;
    float: right;
    width: 40px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    color:#fff !important;
    font-size: 13px;
    font-weight: 500;
    margin:4px 0 0;
    background: var(--main);
}

.careShop .buttonFavorite{
    display: block;
    float: right;
    width: 40px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    color:#fff !important;
    font-size: 13px;
    font-weight: 500;
    margin:4px 0 0;
    background: url(../images/star-off.png) center no-repeat;
    background-size: 24px 22px;
}

.careShop .buttonFavorite.active{
    background: url(../images/star-on.png) center no-repeat;
    background-size: 24px 22px;
}

.careShop .row2{margin:8px 0 0}

.careShop .row2 .address{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 13px;
    color:#707070 !important;
    font-weight: 500;
    line-height: 24px;
}

.careShop .row2 .phone{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 13px;
    color:#707070 !important;
    font-weight: 500;
    line-height: 24px;
}

/*시공요청하기 - 복수요청 : 끝*/



/*시공점 선택 : 시작*/
.mapWrap{
    display: block;
    width: calc(100% + 40px);
    height: 300px;
    transform: translateX(-20px);
    position: relative;
}

.mapSample{
    display: block;
    width: 100%;
    height: 300px;
    background: url(../images/map.jpg) center no-repeat;
    background-size: cover;
}

.mapWrap .mapFix{
    position: absolute;
    width: 35px;
    height: 35px;
    border:1px solid #707070;
    background: #fff url(../images/mapfix2.png) center no-repeat;
    background-size: 21px 21px;
    z-index: 90;
    right: 2px;
    bottom: 5px;
}
.mapWrap .marker1{
    position: absolute;
    width: 39px;
    height: 49px;
    background: url(../images/marker1.png) center no-repeat;
    background-size: 39px 49px;
    transform: translate(-50%, -50%);
    z-index: 90;
}

.mapWrap .grade1{
    position: absolute;
    display: block;
    width: 28px;
    height: 28px;
    background: url(../images/grade1a.png) center no-repeat;
    background-size: 28px 28px;
    transform: translate(-50%, -50%);
    z-index: 50;
}

.mapWrap .grade2{
    position: absolute;
    display: block;
    width: 28px;
    height: 28px;
    background: url(../images/grade2a.png) center no-repeat;
    background-size: 28px 28px;
    transform: translate(-50%, -50%);
    z-index: 50;
}

.searchWrap + .button1{margin:12px 0 0;}

.searchCondition{}
.searchCondition .col{
    display: block;
    float: left;
    width: 50%;
    margin:6px 0 0;
}

.searchCondition .col:after{content: ""; display: block; clear: both;}

.searchCondition .col .bInput2{
    float: left;
}

.searchCondition .col .bInput2 .txt{
    font-size: 14px !important;
    font-weight: 500 !important;
}

.searchCondition{}

.searchTopBar.type2{
    padding:40px 0 20px;
    border-bottom:none;
}

.careShopListInSearch{margin:20px 0 0}

.careShopListInSearch .careShop .address{
    padding:0 45px 0 0;
}

.careShopListInSearch .careShop .phone{
    padding:0 45px 0 0;
}

.careShop .thisMap{
    position: absolute;
    display: block;
    width: 40px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    top:0;
    right: 0;
    background: var(--redBg);
}

.careShop .row3{margin:17px 0 0;}

.careShop .row3 .tag{
    float: left;
    font-size: 13px;
    color:#707070;
    line-height: 28px;
    margin:0 8px 0 0;
    text-align: left;
    display: block;
}

.detailOptions{
    display: block;
    width: 100%;
    padding:18px 0 0;
}

.detailOptions:after{content: ""; display: block; clear: both;}

.deatilOptionType1{
    display: block;
    float: left;
    margin:8px 8px 0 0;
    height: 32px;
    line-height: 32px;
    border-radius: 5px;
    text-align: left;
    color:#fff !important;
    font-size: 13px;
    font-weight: 500;
    padding:0 26px 0 9px;
    background: var(--main) url(../images/x10x10-fff.png) calc(100% - 9px) no-repeat;
    background-size: 10px 10px;
}

.deatilOptionType1 .bold{padding:0 0 0 2px;}

.deatilOptionType2{
    display: block;
    margin:8px 8px 0 0;
    height: 32px;
    line-height: 30px;
    border-radius: 5px;
    border:1px solid #C0C0C0;
    text-align: left;
    color:#111 !important;
    font-size: 13px;
    font-weight: 500;
    padding:0 23px 0 9px;
    background: #fff url(../images/tri2.png) calc(100% - 9px) no-repeat;
    background-size: 6px 4px;
}
/*시공점 선택 : 끝*/





/*시공점 상세 : 시작*/
.careShopDetail{
    padding:20px 0 0;
    border-bottom:none;
}

.addressDetail{margin:13px 0 15px;}

.addressDetail .icon{
    display: block;
    float: left;
    width: 12px;
    height: 15px;
    background: url(../images/pin_12_222.png) center no-repeat;
    background-size: 12px 15px;
    margin: 3px 7px 0 0;
}

.addressDetail .txt{
    display: block;
    float: right;
    width: calc(100% - 19px);
    text-align: left;
    font-size: 13px;
    line-height: 21px;
    text-align: left;
    color:#111 !important;
}
.copyAddress{
    display: inline-block;
    color:var(--redBg) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 21px;
    padding:0 0 0 15px;
    background: url(../images/copy-9x11.png) 2px no-repeat;
    background-size: 9px 11px;
}

.phoneDetail .icon{
    display: block;
    float: left;
    width: 12px;
    height: 12px;
    background: url(../images/phone_14_222b.png) center no-repeat;
    background-size: 12px 12px;
    margin: 5px 7px 0 0;
}

.phoneDetail .txt{
    display: block;
    float: right;
    width: calc(100% - 19px);
    text-align: left;
    font-size: 13px;
    line-height: 21px;
    text-align: left;
    color:#111 !important;
}

.workingTime{
    display: block;
    width: 100%;
    padding:0 0 0 19px;
}

.workingTime .t1{
    display: block;
    text-align: left;
    line-height: 17px;
    font-size: 13px;
    color:#111 !important;
}

.workingTime .t2{
    display: block;
    text-align: left;
    line-height: 17px;
    font-size: 13px;
    color:#111 !important;
    margin:5px 0 0;
}

.gotoNaverPlace{
    display: block;
    float: right;
    margin:22px 0 0;
    text-align: right;
    padding:0 12px 0 0;
    background: url(../images/btn-right-12-f.png) right no-repeat;
    background-size: 6px 10px;
}

.gotoNaverPlace:after{content: ""; display: block; clear: both;}

.gotoNaverPlace span{
    float: left;
    height: 24px;
    line-height: 24px;
    font-weight: 500;
    font-size: 13px;
    color:#6A6A6A !important;
    border-bottom:1px solid #6A6A6A;
}
/*시공점 상세 : 끝*/




/*세부옵션 선택 : 시작*/


.buttonStyleMenu{
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 10px;
    row-gap: 10px;
    border-bottom:1px solid #DFE2E6;
    padding:0 0 37px;
    margin: 0;
}

.dataLabel.filterLabel{
    padding: 27px 0 0;
}

.dataLabel.filterLabel .label{
    font-size: 13px;
    font-weight: 700;
    color:var(--main) !important;
}

.bInputButton {
    position: relative;
    display: block;
    height: 40px;
    width: calc((100% - 30px) / 4);
}

.bInputButton.button1in3{
    width: calc((100% - 20px) / 3 ) !important;
}

.bInputButton input + .txt {
    width: 100%;
    height: 40px;
    line-height: 38px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color:var(--main) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px;
    border:1px solid #E9E9EB;
    background: #fff;
}

.bInputButton input {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

.bInputButton input{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    line-height: normal;
}

.bInputButton input:checked + .txt {
    border:1px solid var(--main);
}

.bottomButtons{
    position: fixed;
    width: 100%;
    max-width: 1000px;
    min-width: 280px;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    background: #fff;
    z-index: 90;
    padding:0 20px;
}

.bottomButtons > .wrap{
    display: block;
    width: 100%;
    padding:17px 0;
    border-top:1px solid #DFE2E6;
}

.bottomButtons > .wrap:after{content: ""; display: block; clear: both;}

.buttonReload{
    display: block;
    float: left;
    width: 54px;
    height: 54px;
    border-radius: 5px;
    background: #fff url(../images/reload2.png) center no-repeat;
    background-size: 20px 20px;
    border:1px solid #E0E0E0;
}

.bottomButtons > .wrap .buttonMain{
    float: right;
    width: calc(100% - 68px);
}

.withBottomButtons{bottom: 100px;}
/*세부옵션 선택 : 끝*/




/*시공점 안내 : 시작*/
.tbexInfo{
    display: block;
    width: 100%;
    padding:58px 0 36px;
}

.tbexInfo > img{
    display: block;
    margin:0 auto 30px;
    width: 120px;
}

.tbexInfo > .tiTxt{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
    color:#111;
}

.tbexInfo > .tiTxt .bold{font-size: 13px;}

.shopMarks{
    display: block;
    width: 100%;
    text-align: center;
    padding:39px 0 0;
}

.shopMarks .shopMark{
    display: block;
    float: left;
    width: 66px;
}

.shopMarks .shopMark + .shopMark{margin:0 0 0 28px;}

.shopMarks .shopMark > .mark{
    display: block;
    width: 100%;
    height: 76px;
}

.shopMarks .shopMark1 > .mark{
    background: url(../images/grade1.png) top no-repeat;
    background-size: 56px 76px;
}

.shopMarks .shopMark2 > .mark{
    background: url(../images/grade2.png) top no-repeat;
    background-size: 56px 76px;
}

.shopMarks .shopMark3 > .mark{
    background: url(../images/grade3.png) center 17px no-repeat;
    background-size: 40px 40px;
}

.shopMarks .shopMark > .txt{
    display: block;
    width: 100%;
    margin:14px 0 0;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    font-weight: 500;
    color:#111;
}

.smTxt{
    display: block;
    width: 100%;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
    line-height: 22px;
    color:#111;
    padding:36px 0 30px;
}

/*시공점 안내 : 끝*/






/*시공점 관리하기 : 시작*/
.buttonAddShop{
    margin:2px 0 0;
}

.buttonAddShop span{
    display: inline-block;
    height: 54px;
    line-height: 54px;
    text-align: left;
    background: url(../images/star.png) left no-repeat;
    background-size: 24px 24px;
    padding: 0 0 0 27px;
}

.buttonDeleteThis{
    isplay: block;
    float: right;
    width: 40px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    margin: 5px 0 0;
    background: url(../images/c-input__close.png) center no-repeat;
    background-size: 16px 16px;
}

.careShopListInSearch .careShop .address.full{
    padding:0;
}

.careShopListInSearch .careShop .phone.full{
    padding:0;
}
/*시공점 관리하기 : 끝*/




/*요청 이력 관리하기 : 시작*/
.selectYear{
    display: block;
    float: left;
    height: 28px;
    line-height: 28px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: var(--main) !important;
    background: url(../images/tri2.png) right no-repeat;
    background-size: 7px 5px;
    padding:0 11px 0 0;
    border: none !important;
    outline: none !important;
}

.selectMonth{
    display: block;
    float: left;
    height: 28px;
    line-height: 28px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: var(--main) !important;
    background: url(../images/tri2.png) right no-repeat;
    background-size: 7px 5px;
    padding:0 11px 0 0;
    border: none !important;
    outline: none !important;
    margin:0 17px;
}

.rhTabs{
    display: block;
    width: 100%;
}

.rhTabs:after{content: ""; display: block; clear: both;}

.rhTab{
    display: block;
    float: left;
    height: 40px;
    line-height: 40px;
    text-align: left;
    color:var(--main) !important;
    font-size: 15px;
    font-weight: 500;
}

.rhTab + .rhTab{margin:0 0 0 13px;}

.rhTab.active{
    color:var(--red) !important;
    font-weight: 700;
    border-bottom: 3px solid  var(--red);
}

.searchTopBar.noBorder{border-bottom: none;}

.rhTabArea{display: none;}

.rhTabArea.active{display: block;}

.historyType {padding:16px 0 0;}

.historyType .mark{
    float: left;
    display: block;
    height: 20px;
    line-height: 18px;
    width: 40px;
    font-size: 12px;
    border:1px solid var(--red);
    color:var(--red) !important;
    text-align: center;
    margin:6px 7px 0 0;
}

.historyType .mark.mark1{
    border:1px solid var(--red);
    color:var(--red) !important;
}

.historyType .mark.mark2{
    border:1px solid #111;
    color:#484848 !important;
}

.historyType .requestTxt{
    display: block;
    float: left;
    height: 32px;
    line-height: 32px;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: var(--main) !important;
    width: calc(100% - 77px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historyType .gotoDetail{
    width: 40px;
    height: 32px;
    background: url(../images/btn-right-12-f.png) 24px no-repeat;
    background-size: 6px 10px;
    float: right;
    display: block;
    margin:0 -10px 0 0;
}

.historyType .detailInfo{padding:0}



/*요청 이력 관리하기 : 끝*/



/*요청 이력 내역보기 : 시작*/
.careShop.requestDetailType{
    border-bottom:none;
    padding:11px 0 7px;
}

.careShop.requestDetailType .name{width: calc(100% - 38px)}
/*요청 이력 내역보기 : 끝*/





/*사용자웹 - 고객센터 : 시작*/
.topTxt2{
    display: block;
    width: 100%;
    padding:37px 0 ;
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    color:var(--main);
    border-bottom:1px solid #DFE2E6;
}

.csMenus{
    display: block;
    width: 100%;
    margin:40px 0 0;
}

.csMenu{
    display: block;
    width: 100%;
    background: #fff;
    border:1px solid #E9E9EB;
    border-radius: 5px;
    padding: 20px 13px 18px 20px;
}

.csMenu:after{content: ""; display: block; clear: both;}

.csMenu + .csMenu{margin:10px 0 0;}

.csMenu .icon{
    float: left;
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 8px;
}

.csMenu1 > .icon{
    background: #FFF000 url(../images/online.png) center no-repeat;
    background-size: 36px 36px;
}

.csMenu2 > .icon{
    background: #FFF000 url(../images/warning.png) center no-repeat;
    background-size: 36px 36px;
}

.csMenu3 > .icon{
    background: #FFF000 url(../images/telephone.png) center no-repeat;
    background-size: 36px 36px;
}

.csMenu .col{
    display: block;
    float: right;
    width: calc(100% - 74px);
}

.csMenu .col .txt1{
    float: left;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    color:var(--main);
    line-height: 23px;
    display: block;
    width: calc(100% - 20px);
}

.csMenu .col .txt2{
    display: block;
    width: 100%;
    margin:5px 0 0;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    color:#707070;
    padding:0 15px 0 0;
}

.csMenu .col .arrow{
    display: block;
    float: right;
    width: 5px;
    height: 22px;
    background: url(../images/btn-right-12-f.png) right no-repeat;
    background-size: 5px 8px;
}
/*사용자웹 - 고객센터 : 끝*/





/*필수입력요청 : 시작*/
.starMark{
    display: inline-block;
    width: 8px;
    height: 12px;
    background: url(../images/star002.png) top no-repeat;
    background-size: 8px 8px;
}
/*필수입력요청 : 끝*/



/*faq : 시작*/
.faqList{
    display: block;
    width: 100%;
    margin:40px 0 0;
}

.faqOne{
    display: block;
    width: 100%;
    background: #fff;
    border:1px solid #E9E9EB;
    border-radius: 5px;
    padding:10px 13px 10px 16px;
}

.faqOne .qRow{}

.faqOne .qRow .qMark{
    float: left;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #FFF000;
    text-align: center;
    line-height: 32px;
    font-size: 17px;
    font-weight: 700;
    color:var(--main) !important;
    margin:0 11px 0 0;
}

.faqOne .qRow .qMark .hide{font-size: 0;}

.faqOne .qRow .qTxt{
    display: block;
    float: left;
    width: calc(100% - 63px);
    font-size: 14px;
    text-align: left;
    font-weight: 700;
    color:var(--main) !important;
    line-height: 24px;
    padding:4px 0 0;
}

.faqOne .qRow .arrow{
    display: block;
    float: right;
    width: 9px;
    height: 31px;
    background: url(../images/btn-prev-a17.png) center no-repeat;
    background-size: 9px 5px;
    transition: all 0.3s;
}

.faqOne.active .qRow .arrow{
    transform: rotate(180deg);
    transition: all 0.3s;
}

.faqOne .aRow{
    display: none;
    margin:11px 0 0;
}

.faqOne .aRow .aMark{
    float: left;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #FFC14E;
    text-align: center;
    line-height: 32px;
    font-size: 17px;
    font-weight: 700;
    color:var(--main) !important;
    margin:0 11px 0 0;
}

.faqOne .aRow .aMark .hide{font-size: 0;}

.faqOne .aRow .aTxt{
    display: block;
    float: left;
    width: calc(100% - 43px);
    font-size: 13x;
    text-align: left;
    font-weight: 500;
    color:#606060 !important;
    line-height: 24px;
    padding:4px 0 0;
}

.faqOne + .faqOne{margin: 8px 0 0; }
/*faq : 끝*/




/*신고센터 : 시작*/
.topTxt2 > .txtP{
    display: block;
    text-align: center;
}

.topTxt2 .gotoReportCase{
    display: block;
    margin:32px auto 14px;
    text-align: center;
    width: 134px;
    height: 44px;
    line-height: 42px;
    border-radius: 5px;
    color:#FF5F5F !important;
    border:1px solid #FF5F5F;
    font-size: 15px;
    font-weight: 500;
    background: #fff !important;
}

.rcType2{padding: 37px 0 23px;}

.dlTxt{
    display: block;
    width: 100%;
    margin:0 0 14px;
    text-align: left;
    font-size: 13px;
    line-height: 23px;
    color:#707070;
}

.lastNotice{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 13px;
    line-height: 24px;
    color:#111;
    font-weight: 500;
    margin:0 0 40px;
}

.message.marginT2{margin:0 0 35px}

.lastCheck{
    display: block;
    width: 100%;
    text-align: center;
    margin:0 0 42px;
}

.files{
    display: block;
    width: 100%;
    margin:13px 0 0;
}

.file{
    display: block;
    width: 100%;
    background: #fff;
    border:1px solid #E9E9EB;
    border-radius: 5px;
    padding:0 0px 0 14px;
}

.file + .file{margin:10px 0 0;}

.file > .name{
    height: 42px;
    line-height: 42px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color:var(--main) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    width: calc(100% - 45px);
    float: left;
    background: url(../images/atc-file-n1.png) left no-repeat;
    background-size: 7px 14px;
    padding:0 0 0 15px;
}

.file > .deleteThisFile{
    float: right;
    height: 42px;
    line-height: 42px;
    width: 44px;
    background: url(../images/c-input__close.png) center no-repeat;
    background-size: 20px 20px;
}

.file:after{content: ""; display: block; clear: both;}
/*신고센터 : 끝*/



/*신고 사례보기 : 시작*/
.reportCase{
    display: block;
    width: 100%;
    padding: 30px 0;
}

.reportCase > .title{
    display: block;
    width: 100%;    
    color:#111;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
}

.reportCase > .cTxt{
    display: block;
    width: 100%;    
    color:#707070;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    margin:18px 0 0;
}

.reportCase + .reportCase{
    border-top:1px solid #DFE2E6;
}

.topTxt2.rcType{
    border-bottom: none;
    padding:37px 0 23px;
}
/*신고 사례보기 : 끝*/


/*품질보증서 조회 : 시작*/
.dotRow{
    display: block;
    width: 100%;
}

.dotRow:after{content: ""; display: block; clear: both;}

.dotRow > .dot{
    display: block;
    float: left;
    background: #00A4FF;
    width: 3px;
    height: 3px;
    margin:7px 0 0 7px;
}
.dotRow > .txt{
    display: block;
    float: right;
    width: calc(100% - 20px);
    text-align: left;
    color:#00A4FF !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.dotRow + .dotRow{
    margin:18px 0 0;
}
/*품질보증서 조회 : 끝*/




/*시공권 인증 경고 : 시작*/
.warningImg{
    display: block;
    width: 56px;
    height: 56px;
    margin:0 auto 16px;
}
/*시공권 인증 경고 : 끝*/




/*파트너 로그인 : 시작*/
.partnerLogin .loginTxt1{
    font-size: 28px;
    margin:40px 0 0;
    line-height: 36px;
}

.partnerLogin .loginTxt2{
    font-size: 24px;
    line-height: 32px;
}
/*파트너 로그인 : 끝*/




/*시공권 등록 : 시작*/
.ticketMessage{
    display: block;
    width: 100%;
    text-align: center;
    padding:37px 0 ;
}

.ticketMessage .tmTxt1{
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color:var(--main) !important;
}

.ticketMessage .tmTxt1 > .t1{
    color:var(--red2) !important;
    font-weight: 700;
}

.ticketMessage .tmTxt2{
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color:var(--main) !important;
    margin:10px 0 0;
}

.ticketMessage .tmTxt3{
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color:var(--main) !important;
}

.ticketInfo{
    display: block;
    width: 100%;
    background: #fff;
    border:1px solid #E9E9EB;
    border-radius: 5px;
    padding:0 16px;
}

.ticketInfo + .ticketInfo{margin:20px 0 0;}

.tiLine{
    display: block;
    width: 100%;
    height: 1px;
    background: #DFE2E6;
}

.ticketInfo .label{
    height: 54px;
    line-height: 54px;
    text-align: left;
    float: left;
    font-size: 14px;
    font-weight: 500;
    color:var(--main);
}

.ticketInfo .data{
    height: 54px;
    line-height: 54px;
    text-align: right;
    float: right;
    font-size: 13px;
    font-weight: 500;
    color:#707070;
}

.message2{background: #FFF9F9}

.message2 .dotRow .dot{background: var(--red2);}

.message2 .dotRow .txt{color: var(--red2) !important;}

.buttonLogout{
    width: 47px;
    height: 46px;
    float: right;
    margin:6px -5px 0 0;
    padding:10px 0 0 10px;
}

.buttonLogout > div{
    background: #fff url(../images/btn-logout_20.png) center no-repeat;
    background-size: 11px 10px;
    width: 27px;
    height: 26px;
    border-radius: 5px;
    border:1px solid #E0E0E0;
    float: right;
}
/*시공권 등록 : 끝*/



/*특장차 구조변경 : 시작*/
.txtaPR{
    height: 136px !important;
    margin:0 0 118px !important;
}

.datepickWrap{
    display: block;
    position: relative;
    width: 100%;
    margin:0 0 200px !important;
    position: relative;
}

.datepickWrap .inputNormal2{
    width: 100%;
}

.datepickWrap img{
    position: absolute;
    width: 17px;
    height: 18px;
    top:18px;
    right: 17px;
}

/*특장차 구조변경 : 끝*/




/*헤더3 : 시작*/
.header3{
    position: fixed;
    width: 100%;
    max-width: 1000px;
    min-width: 280px;
    top:0;
    left:50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.1);
    border-bottom:1px solid rgba(255,255,255,0.3);
    height: 70px;
    z-index: 100;
    transition: all 0.3s;
    padding:15px 0 0;
}

.header3.active{
    background: #fff;
    border-bottom:1px solid #fff;
    transition: all 0.3s;
}

.header3:after{display: block; clear: both; content: "";}

.header3 .tbTitle{
    float: left;
}

.header3 .tbTitle > .txt1{
    display: block;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color:#fff !important;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0.16));
}
.header3 .tbTitle > .txt2{
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color:#fff !important;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0.16));
}


.header3 .buttonMenu{
    display: block;
    width: 40px;
    height: 50px;
    background: url(../images/nav-main2fff.png) center no-repeat;
    background-size: 20px 14px;
    margin:-5px -10px 0 0;
    float: right;
}

.header3.active .tbTitle > .txt1{
    color:var(--main) !important;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0));
}
.header3.active .tbTitle > .txt2{
    color:var(--main) !important;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0));
}

.header3.active .buttonMenu{
    background: url(../images/nav-main2000.png) center no-repeat;
    background-size: 20px 14px;
}
/*헤더3 : 끝*/





/*사용자 홈 : 시작*/
.userHome{}
.userHome .section1{
    position: relative;
    display: block;
    width: 100%;
    height: 649px;
    background: url(../images/mains1.jpg) center no-repeat;
    background-size: cover;
    padding:390px 20px 0;
    text-align: center;
}
.userHome .section1 .img1{
    display: block;
    width: 200px;
    height: 47px;
    margin:0 auto 17px;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0.16));
}

.userHome .section1 > .txt1{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    color:#fff;
    line-height: 24px;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0.16));
}

.userHome .section1 > .txt1 > .t1{font-weight: 500}

.userHome .section1 > .mainTxt{
    display: inline-block;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color:#fff;
    line-height: 24px;
    padding:0 28px;
    border-left:6px solid #fff;
    border-right:6px solid #fff;
    margin:40px 0 0;
}


.userHome .section1 .gotoDown{
    display: block;
    width: 40px;
    height: 40px;
    background: url(../images/arrow-down2.png) center no-repeat;
    background-size: 16px 16px;
    position: absolute;
    left:calc(50% - 20px);
    bottom:6px;
    z-index: 50;
}

.userHome .section2{
    display: block;
    width: 100%;
}

.userHome .section2:after{content: ""; display: block; clear: both;}

.userHome .section2 .imgWrap{
    margin:38px 0 0;
    display: block;
    float: left;
    position: relative;
    background: url(../images/section2bg.jpg) right no-repeat;
    background-size: cover;
    height: 160px;
    width: calc(100% - 40px);
    max-width: 600px;
}

.userHome .section2 .txtBox{
    position: absolute;
    left:0;
    bottom:-59px;
    height: 74px;
    background: #191A1E;
    padding:15px 14px 0 20px;
    width: calc(100% - 100px);
    max-width: 400px;
}

.userHome .section2 .txtBox .txt1{
    display: block;
    height: 17px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color:rgba(255,255,255,0.8);
    line-height: 20px;
}

.userHome .section2 .txtBox .txt2{
    display: block;
    height: 17px;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color:rgba(255,255,255,1);
    line-height: 23px;
    margin:3px 0 0;
}

.userHome .section2 .gotoDetail{
    height: 36px;
    line-height: 24px;
    text-align: left;
    float: right;
    font-size: 13px;
    font-weight: 500;
    color:var(--main) !important;
    border-bottom:1px solid #000;
    padding:0 120px 0 0;
    margin:76px 0 0;
}


.userHome .section3{
    display: block;
    width: 100%;
    padding:0 0 56px;
}

.userHome .section3:after{content: ""; display: block; clear: both;}

.userHome .section3 .imgWrap{
    margin:39px 0 0;
    display: block;
    float: right;
    position: relative;
    background: url(../images/section3bg.png) right no-repeat;
    background-size: cover;
    height: 160px;
    width: calc(100% - 40px);
    max-width: 600px;
}

.userHome .section3 .txtBox{
    position: absolute;
    right:0;
    bottom:-59px;
    height: 74px;
    background: #191A1E;
    padding:15px 14px 0 20px;
    width: calc(100% - 100px);
    max-width: 400px;
}

.userHome .section3 .txtBox .txt1{
    display: block;
    height: 17px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color:rgba(255,255,255,0.8);
    line-height: 20px;
}

.userHome .section3 .txtBox .txt2{
    display: block;
    height: 17px;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color:rgba(255,255,255,1);
    line-height: 23px;
    margin:3px 0 0;
}

.userHome .section3 .gotoDetail{
    height: 36px;
    line-height: 24px;
    text-align: right;
    float: left;
    font-size: 13px;
    font-weight: 500;
    color:var(--main) !important;
    border-bottom:1px solid #000;
    padding:0 0 0 120px;
    margin:76px 0 0;
}

.userHome .section4{
    display: block;
    width: 100%;
    background: #F1F1F1;
    padding:48px 20px 50px; 
    text-align: center;  
}

.userHome .section4 > .txt1{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color:#707070;
}

.userHome .section4 > .txt2{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color:var(--main);
    margin:4px 0 0;
}

.userHome .section4 .brand{
    display: block;
    width: 100%;
    background: #fff;
    border:1px solid #D4D4D4;
    text-align: center;
    padding:38px 20px 28px;
    margin:32px 0 30px;
}

.userHome .section4 .brand .img1{
    width: 100%;
    max-width: 274px;
}


.userHome .section4 .gotoDetail{
    display: inline-block;
    text-align: center;
}

.userHome .section4 .gotoDetail span{
    display: block;
    width: 100px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color:var(--main) !important;
    height: 35px;
    line-height: 26px;
}

.userHome .section4 .gotoDetail .bottomLine{
    display: block;
    width: 40px;
    height: 1px;
    background: var(--main);
    margin:0 auto;
}
/*사용자 홈 : 끝*/




/*모바일 메뉴 : 시작*/
.mobileMenu{
    display: none;
    position: fixed;
    width: 100%;
    max-width: 1000px;
    min-width: 280px;
    height: 100%;
    top:0;
    left:50%;
    transform: translateX(-50%);
    background: var(--main);
    z-index: 1000;
    padding:20px 20px 0;
    box-sizing: border-box;
}

.mobileMenu.active{
    display: block;
}

.mobileMenu .row1{
    background: var(--main);
    padding: 0 0 20px;
}

.mobileMenuContent{
    display: block;
    height: calc(100% - 58px);
    overflow-y: auto;
}

.footerStyle{
    display: block;
    width: 100%;
    background: var(--main);
    padding:0 0 30px;
}

.footerStyle .topRow{
    display: block;
    width: 100%;
    padding:0 0 23px;
}

.footerStyle .topRow:after{content: ""; display: block; clear: both;}

.footerStyle .topRow img{
    float: left;
    display: block;
    width: 140px;
}

.footerStyle .csCenter{
    display: block;
    width: 100%;
    padding:23px 0 30px;
}

.footerStyle .csCenter .title{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color:#fff;
    margin:0 0 18px;
}

.footerStyle .csCenter .csRow{
    display: block;
    width: 100%;
}

.footerStyle .csCenter .csRow + .csRow{margin:5px 0 0;}

.footerStyle .csCenter .csRow:after{content: ""; display: block; clear: both;}

.footerStyle .csCenter .csRow .col1{
    display: block;
    width: 134px;
    float: left;
    color:#fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
}

.footerStyle .csCenter .csRow .col2{
    display: block;
    width: calc(100% - 154px);
    float: right;
    color:#fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
}

.mobileMenu .tbTitle{
    float: left;
}

.mobileMenu .tbTitle > .txt1{
    display: block;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color:#fff !important;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0.16));
}

.mobileMenu .tbTitle > .txt2{
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color:#fff !important;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0.16));
}

.mobileMenu .buttonCloseMenu{
    display: block;
    float: right;
    background: url(../images/close@4x.png) center no-repeat;
    background-size: 18px 18px;
    width: 40px;
    height: 36px;
    margin:0 -11px 0 0;

}

.mobileMenu nav{
    display: block;
    width: 100%;
    padding:70px 20px;
}

.mobileMenu nav a {
    display: block;
    width: 100%;
    height: 67px;
    line-height: 67px;
    border-bottom:1px solid rgba(255,255,255,0.3);
    text-align: left;
    font-size: 20px;
    font-weight: 500;
    color:#fff !important;
    background: url(../images/arrow-right3a.png) right no-repeat;
    background-size:8px 14px;
    padding:0 10px 0 0;
}

/*모바일 메뉴 : 끝*/




/*규정필름 소개 : 시작*/
.header2x{
    height: 110px;
}

.header2x > .centerWrap{
    height: 70px;
    border-bottom: 1px solid #f0f0f0;
}

.scrollMenu{
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

.scrollMenu .menu{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 13px;
    padding:0 20px;
    color:#111 !important;
}

.scrollMenu{
   -ms-overflow-style: none;
   scrollbar-width: none;
}

.scrollMenu::-webkit-scrollbar{
  display:none;
}

.swipeMenu{
    display: block;
    width: 100%;
    overflow-x: hidden;
}

.swipeMenu .menu.active{border-bottom:3px solid #111 !important;}


.swipeMenu .swiper-slide:nth-child(1){width: 60px;}
.swipeMenu .swiper-slide:nth-child(2){width: 70px;}
.swipeMenu .swiper-slide:nth-child(3){width: 70px;}
.swipeMenu .swiper-slide:nth-child(4){width: 70px;}
.swipeMenu .swiper-slide:nth-child(5){width: 80px;}
.swipeMenu .swiper-slide:nth-child(6){width: 70px;}
.swipeMenu .swiper-slide:nth-child(7){width: 90px;}
.swipeMenu .swiper-slide:nth-child(8){width: 80px;}
.swipeMenu .swiper-slide:nth-child(9){width: 90px;}

.swipeMenu .menu{
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center !important;
    font-size: 13px;
    /*padding:0 20px;*/
    color:#111 !important;
    position: relative;
}

.swipeMenu .swiper-slide + .swiper-slide .menu:before{
    position: absolute;
    width: 1px;
    height: 10px;
    background: #e0e0e0;
    left:-1px;
    top:15px;
    z-index: 10;
    content: "";
}


/*.filmTxt1{
    display: block;
    padding:30px 0 0;
    text-align: left;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color:#707070;
}

.filmTxt2{
    display: block;
    padding:4px 0 20px;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color:var(--main);
}*/

.filmTxt1{
    display: block;
    padding:70px 0 6px;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color:rgba(255, 255, 255, 0.7);
    filter: drop-shadow(0,0,15px, rgba(0,0,0,0.3));
}

.filmTxt2{
    display: block;
    padding:4px 0 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color:#fff;
    filter: drop-shadow(0,0,15px, rgba(0,0,0,0.3));
}

.filmImg1{
    display: block;
    width: calc(100% + 40px);
    transform: translateX(-20px);
    height: 200px;
    background: url(../images/film1.png) center no-repeat;
    background-size: cover;
}

.filmTxt3{
    display: block;
    width: 100%;
    text-align: center;
    padding:30px 0 ;
    font-size: 15px;
    line-height: 23px;
    color:var(--main);
}


.filmBasicInfo{
    display: block;
    width: 100%;
}


.filmBasicInfo .brandImg{
    display: block;
    height: 30px;
    float: left;
}

.filmBasicInfo .brandImg4a{
    display: block;
    height: 40px;
    float: left;
}

.filmBasicInfo .brandImg7a{
    display: block;
    height: 50px;
    float: left;
}


.filmContents{
    display: none !important;
    padding: 110px 0 80px;
}

.filmContents.active{
    display: block !important;
}

.filmContents1{
    display: none !important;
    padding: 110px 0 80px;
}

.filmContents1.active{
    display: block !important;
}

.filmContents2{
    display: none !important;
    padding: 110px 0 80px;
}

.filmContents2.active{
    display: block !important;
}

.filmBasicInfo > .centerWrap{padding:30px 20px 23px !important;}

.filmBasicInfo .row2{margin:10px 0 0 ;}

.filmBasicInfo .brandName1{
    float: left;
    display: block;
    font-size: 24px;
    font-weight: 700;
    text-align: left;
    color:#111;
    line-height: 30px;
}

.filmBasicInfo .brandName1.brandName1a{
    font-size: 20px;
    line-height: 28px;
}

.filmBasicInfo .brandName2{
    float: left;
    display: block;
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    color:#111;
    line-height: 30px;
    margin:0 0 0 5px;
}

.filmBasicInfo .row2{
    margin:10px 0 0;   
}

.filmBasicInfo .row3{
    margin:40px 0 0;   
}


.filmBasicInfo .row4{
}

.filmBasicInfo .flag{
    display: block;
    float: left;
    width: 40px;
    height: 27px;
    border:1px solid #e0e0e0;
    padding:4px 0 0 4px;
}

.filmBasicInfo .flag.australia span{
    display: block;
    width: 30px;
    height: 17px;
    background: url(../images/flag21.png);
    background-size: 30px 17px;
    font-size: 0;
}

.filmBasicInfo .flag.korea span{
    display: block;
    width: 30px;
    height: 17px;
    background: url(../images/flag114.png);
    background-size: 30px 17px;
    font-size: 0;
}

.filmBasicInfo .flag.usa span{
    display: block;
    width: 30px;
    height: 17px;
    background: url(../images/flag22.png);
    background-size: 30px 17px;
    font-size: 0;
}

.filmBasicInfo .flag.sweden span{
    display: block;
    width: 30px;
    height: 17px;
    background: url(../images/flag48.png);
    background-size: 30px 17px;
    font-size: 0;
}


.filmBasicInfo .brandText1{
    height: 27px;
    line-height: 27px;
    text-align: left;
    font-size: 20px;
    font-weight: 600;
    color:#111;
    margin:0 0 0 7px;
    float: left;
}

.filmBasicInfo .brandText2{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color:#111;
    margin:9px 0 0;
}

.filmBasicInfo .tagRow{
    margin:30px 0 0;
}

.filmBasicInfo .tagRow .tag{
    display: block;
    float: left;
    padding:0 13px;
    text-align: left;
    background: rgba(233,233,233,0.8);
    height: 33px;
    line-height: 33px;
    font-size: 12px;
    font-weight: 500;
    color:#111 !important;
    border-radius: 17px;
}

.filmBasicInfo .tagRow .tag + .tag{margin:0 0 0 9px;}













.aboutFilm{
    display: block;
    width: 100%;
    background: url(../images/filmbg.jpg) center no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 300px;
    padding: 60px 0 75px;
}

.aboutFilm .row{margin:55px 0 0}

.aboutFilm .sectionTitle{
    display: block;
    width: 100%;
    text-align: center;
    color:#111;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
}

.aboutFilm .block{
    display: block;
    width: 40px;
    height: 6px;
    background: #111;
    margin:16px auto 0;
}

.aboutFilm .textWrap{
    width: 70%;
    min-width: 208px;
    max-width: 350px;
}

.aboutFilm .textWrap.left{float: left;}

.aboutFilm .textWrap.right{float: right;}

.aboutFilm .textWrap > .txt1{
    display: block;
    width: 100%;
    height: 53px;
    line-height: 53px;
    background: rgba(255,255,255,0.3);
    font-size: 16px;
    font-weight: 700;
    color:#111;
    padding:0 20px;
}

.aboutFilm .textWrap.left > .txt1{
    text-align: right;
}

.aboutFilm .textWrap.right > .txt1{
    text-align: left;
}

.aboutFilm .textWrap > .txt2{
    display: block;
    width: 100%;
    line-height: 21px;
    font-size: 13px;
    font-weight: 500;
    color:#111;
    padding:13px 20px 0 0;
}

.aboutFilm .textWrap.left > .txt2{
    text-align: right;
    padding:13px 20px 0 0;
}

.aboutFilm .textWrap.right > .txt2{
    text-align: left;
    padding:13px 0 0 20px;
}

.filmSpec{
    display: block;
    width: 100%;
    background: url(../images/filmbg2.jpg) center no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 300px;
    padding: 60px 0 57px;
}

.filmSpec .sectionTitle{
    display: block;
    width: 100%;
    text-align: center;
    color:#fff;
    font-size: 17px;
    line-height: 24px;
    font-weight: 500;
}

.filmSpec .block{
    display: block;
    width: 40px;
    height: 6px;
    background: #fff;
    margin:16px auto 0;
}

.filmSpec .specs{
    display: block;
    margin:36px 0 0;
    text-align: center;
}

.filmSpec .specs .inside{
    width: 314px;
}

.filmSpec .specs .spec{
    display: block;
    float: left;
    width: 148px;
    height: 148px;
    background: rgba(0,0,0,0.3);
    border:2px solid rgba(255,255,255,0.2);
    text-align: center;
    border-radius: 74px;
    margin:0 0 18px 18px;
}

.filmSpec .specs .spec .txt1{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    color:rgba(255,255,255,0.8);
    margin:34px 0 0;
}

.filmSpec .specs .spec .txt2{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    color:#fff;
    margin:8px 0 0;
}

.filmSpec .specs .spec:nth-child(2n - 1){margin:0 0 18px}

.flimGraph{
    display: block;
    width: 100%;
}

.flimGraph .centerWrap{padding:70px 20px 0 !important}

.flimGraph .sectionTitle{
    display: block;
    width: 100%;
    text-align: center;
    color:#111;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
}

.filmImg2Wrap{
    width: 100%;
    margin:40px 0 0;
    border:1px solid #e0e0e0;
    padding:40px 0 ;
}

.flimGraph .block{
    display: block;
    width: 40px;
    height: 6px;
    background: #111;
    margin:16px auto 0;
}


.flimGraph .filmImg2{
    display: block;
    margin: 40px auto 0;
}

.flimGraph .detailWrap{
    display: block;
    width: 100%;
    margin:10px 0 0;
}

.flimGraph .detailWrap .dotTitle{
    display: block;
    width: 100%;
    margin:50px 0 0;
}

.flimGraph .detailWrap .dotTitle:after{content: ""; display: block; clear: both;}

.flimGraph .detailWrap .dotTitle .dot{
    float: left;
    display: block;
    width: 3px;
    height: 3px;
    background: #111;
    margin:8px 0 0;
}

.flimGraph .detailWrap .dotTitle .txt{
    float: right;
    display: block;
    width: calc(100% - 12px);
    text-align: left;
    font-size: 17px;
    text-align: left;
    font-weight: 600;
    height: 25px;
    color:#111;
}

.flimGraph .detailWrap .moreTxt{
    padding:0 0 0 12px;
    font-size: 14px;
    color:#111;
    text-align: left;
    font-weight: 500;
    line-height: 25px;
    margin:17px 0 0;
}
.flimGraph .detailWrap .moreTxt span{color:#C71717;}


.allFilms{
    display: block;
    width: 100%;
    background: #fff;
    padding:0 20px;
}

.filmsTop{
    display: block;
    width: 100%;
    height: 220px;
}

.filmsTop1{
    background: url(../images/section2bg.jpg) center no-repeat;
    background-size: cover;
    padding:50px 0 0;
}

.filmsTop2{
    background: url(../images/film1.png) center no-repeat;
    background-size: cover;
    padding:47px 0 0;
}

.filmsTop3{
    background: url(../images/s9.jpg) center no-repeat;
    background-size: cover;
    padding:47px 0 0;
}

.filmsTop .txt1{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color:rgba(255,255,255,0.8);
}

.filmsTop .txt2{
    display: block;
    width: calc(100% - 60px);
    max-width: 340px;
    min-width: 240px;
    margin: 14px auto 0;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color:rgba(255,255,255,1);
    height: 60px;
    line-height: 56px;
    border:2px solid #fff;
    border-radius: 10px;
}

.allFilms .fTxt1{
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    color:#111;
    text-align: center;
    padding:34px 0;
}

.f2Contents{
    display: block;
    width: 100%;
}

.f2Contents:after{content: ""; display: block; clear: both;}

.filmOne{
    display: block;
    width: 80%;
    max-width: 400px;
    margin:60px 0 0;
}

.filmOne.left{float: left;}
.filmOne.right{float: right;}

.filmOne .logo{
    display: block;
    width: 100%;
}



.filmOne.left .logo img{float: left;}
.filmOne.right .logo img{float: right;}

.filmOne .logo1{width: 80px}
.filmOne .logo2{width: 100px}
.filmOne .logo3{width: 90px}
.filmOne .logo4{width: 120px}
.filmOne .logo5{width: 120px}
.filmOne .logo6{width: 80px}
.filmOne .logo7{width: 80px}
.filmOne .logo8{width: 120px}
.filmOne .logo9{width: 120px}


.filmOne .logo:after{content: ""; display: block; clear: both;}

.filmOne  .brand{
    display: block;
    width: 100%;
    margin:10px 0 0;
    font-size: 24px;
    line-height: 30px;
    color:#111;
    font-weight: 700;
}

.filmOne.left  .brand{text-align: left;}
.filmOne.right  .brand{text-align: right;}

.filmOne .line{
    display: block;
    width: calc(100% + 20px);
    height: 2px;
    background: #111;
    margin:18px 0 25px;
}

.filmOne.left .line{margin:18px 0 25px -20px; float: left;}
.filmOne.right .line{margin:18px -20px 25px 0; float: right;}

.filmOne .dTxt{
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 20px;
    color:#666;
    font-weight: 500;
}

.filmOne.left .dTxt{text-align: left; float: left;}
.filmOne.right .dTxt{text-align: right; float: right;}

.filmContents.whiteBg{background: #fff;}

.fTxt1 + .message{margin:0 0 0 0;}

.filmRecommend{
    display: block;
    width: 100%;
    border-top:2px solid #111;
    margin:24px 0 0;
}

.frCard{
    display: block;
    width: 100%;
    border-bottom:1px solid #333;
}

.frCard .titleTxtRow{
    display: block;
    width: 100%;
    padding:14px 0;
}

.frCard .titleTxtRow:after{content: ""; display: block; clear: both;}

.frCard .titleTxtRow .titleTxt{
    display: block;
    width: calc(100% - 30px);
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color:#111 !important;
    text-align: left;
    float: left;
}

.frCard .titleTxtRow .arrow{
    display: block;
    width: 30px;
    height: 22px;
    float: right;
    background: url(../images/tri2.png) center no-repeat;
    background-size: 7px 4px;
    opacity: 0.4;
    transition: all 0.3;
}

.frCard.active .titleTxtRow .arrow{
    transform: rotate(180deg);
    opacity: 1;
    transition: all 0.3;
}

.frContentWrap{
    display: none;
    width: 100%;
}

.frContent{
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    padding:10px 13px 20px;
}

.frContent > div{font-size: 0}

.frContent .logo1{
    display: block;
    float: left;
    width: 56px;
    height: 30px;
    background: url(../images/logo_3m.png) center no-repeat;
    background-size: cover;
}

.frContent .logo2{
    display: block;
    float: left;
    width: 53px;
    height: 30px;
    background: url(../images/logo_solargard.png) center no-repeat;
    background-size: cover;
}

.frContent .logo3{
    display: block;
    float: left;
    width: 45px;
    height: 30px;
    background: url(../images/logo_llumar.png) center no-repeat;
    background-size: cover;
}

.frContent .logo4{
    display: block;
    float: left;
    width: 112px;
    height: 30px;
    background: url(../images/logo_rayno.jpg) center no-repeat;
    background-size: cover;
}

.frContent .logo5{
    display: block;
    float: left;
    width: 103px;
    height: 30px;
    background: url(../images/logo_ditec.png) center no-repeat;
    background-size: 103px 18px;
}

.frContent .logo6{
    display: block;
    float: left;
    width: 50px;
    height: 30px;
    background: url(../images/logo_sungard.png) center no-repeat;
    background-size: cover;
}

.frContent .logo7{
    display: block;
    float: left;
    width: 51px;
    height: 30px;
    background: url(../images/logo_skc.png) center no-repeat;
    background-size: cover;
}

.frContent .logo8{
    display: block;
    float: left;
    width: 102px;
    height: 30px;
    background: url(../images/jwf.jpg) center no-repeat;
    background-size: cover;
}

.frContent .logo9{
    display: block;
    float: left;
    width: 59px;
    height: 30px;
    background: url(../images/logo_tintacar.png) center no-repeat;
    background-size: cover;
}
/*규정필름 소개 : 끝*/



/*표준 선팅 서비스 : 시작*/
.serviceSection{
    display: block;
    width: 100%;
    padding:34px 20px 38px;
    position: relative;
}

.serviceSection1{
    padding:70px 0 0 ;    
}

.serviceSection6{
    padding:34px 20px 60px;    
}

.serviceSection > .centerWrap{padding: 0 !important}

.serviceSection .ssTxt{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color:#111;
    line-height: 22px;
    font-weight: 500;
}


.serviceSection .sectionTitle {
    display: block;
    width: 100%;
    text-align: center;
    color: #111;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    margin:60px 0 0;
}


.serviceSection .block {
    display: block;
    width: 40px;
    height: 6px;
    background: #111;
    margin: 16px auto 0;
}

.serviceSection .imgS{
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 65px;
    margin:0 auto;
}

.serviceSection .imgS.imgS1{
    background: url(../images/sa1.jpg) center no-repeat;
    background-size: 130px 130px;
}

.serviceSection .imgS.imgS2{
    background: url(../images/sa2.jpg) center no-repeat;
    background-size: 130px 130px;
}

.serviceSection .imgS.imgS3{
    background: url(../images/sa3.png) center no-repeat;
    background-size: 130px 130px;
}

.serviceSection .imgS.imgS4{
    background: url(../images/sa4.png) center no-repeat;
    background-size: 130px 130px;
}

.serviceSection .ssTxt2{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color:#111;
    line-height: 25px;
    margin:20px 0 0;
}

.serviceSection .ssTxt3{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color:#111;
    line-height: 22px;
    margin:17px 0 0;
}


.serviceSection3, .serviceSection5{
    background: #F0F0F0;
}

.serviceSection3:after, .serviceSection5:after{
    content: "";
    position: absolute;
    display: block;
    bottom:-46px;
    left:50%;
    transform: translateX(-50%);

    border-top:30px solid #f0f0f0;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:30px solid transparent;
}

.serviceSection4:after{
    content: "";
    position: absolute;
    display: block;
    bottom:-46px;
    left:50%;
    transform: translateX(-50%);

    border-top:30px solid #fff;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:30px solid transparent;
}
/*표준 선팅 서비스 : 끝*/












































































































































/*인풋 : 시작*/
.dataLabel{
    display: block;
    width: 100%;
    padding: 39px 0 0;
}

.dataLabel:after{content: ""; display: block; clear: both;}

.dataWrap{
    display: block;
    width: 100%;
}

.dataWrap:after{content: ""; display: block; clear: both;}

.dataLabel .label{
    display: block;
    float: left;
    font-size: 13px;
    line-height: 24px;
    margin:0 0 12px;
    color: #fff !important;
    font-weight: 400;
}

.dataLabel .label2{
    display: block;
    float: left;
    font-size: 14px;
    line-height: 24px;
    margin:0 0 12px;
    color: #111 !important;
    font-weight: 500;
}

.starMark2{
    display: block;
    width: 8px;
    height: 12px;
    background: url(../images/star002.png) left 5px no-repeat;
    background-size: 8px 8px;
    font-size: 0;
    float: left;
    margin:0 0 0 2px;
}

.dataLabel .label > .sp{color:#ABDAFF;}


.inputNormal{
    display: block;
    width: 100%;
    height: 54px;
    line-height: 52px;
    background: #Fff;
    border-radius: 5px;
    padding: 0 16px;
    border: 1px solid #E9E9EB !important;
    color: #111;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
}

.inputNormal::placeholder{color:rgba(6,20,31,0.4) !important;}


.inputNormal2{
    display: block;
    width: 100%;
    height: 54px;
    line-height: 52px;
    border:1px solid #fff;
    border-radius: 5px;
    padding:0 14px;
    background: #38434C !important;
    text-align: left;
    color:#fff;
    font-weight: 400;
}

.inputNormal2::placeholder{color:rgba(255,255,255,0.9)}

.inputNormal2 + .inputNormal2{margin:12px 0 0;}


.selectNormal{
    display: block;
    width: 100%;
    height: 54px;
    line-height: 52px;
    background: #Fff;
    border-radius: 5px;
    padding: 0 16px;
    border: 1px solid #E9E9EB !important;
    color: #111;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    padding:0 22px 0 14px;
    background: #fff url(../images/tri2.png) calc(100% - 14px) no-repeat;
    background-size: 8px 6px;
    cursor: pointer;
}

.selectNormal option{color:#111 !important}



.selectNormal2{
    display: block;
    width: 100%;
    height: 54px;
    line-height: 52px;
    border:1px solid #fff;
    border-radius: 5px;
    padding:0 14px;
    background: #38434C url(../images/tri-9x6-f.png) calc(100% - 14px) no-repeat;
    background-size: 9px 6px;
    text-align: left;
    color:#fff;
    font-weight: 400;
}

.selectNormal2 option{color:#fff !important}


.errorMessage{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color:#FFFF1A;
    line-height: 24px;
    background: url(../images/error-24x24-y.png) left 2px no-repeat;
    background-size: 20px 20px;
    padding:0 0 0 25px;
    margin:14px 0 0;
}

.textareaNormal{
    width: 100%;
    border:1px solid #E9E9EB;
    background: #fff;
    border-radius: 5px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color:#999;
    line-height: 22px;
    padding:18px 16px;
    margin:15px 0 0;
    height: 240px;
}

.textareaNormal::placeholder{
    color:#999;
}

.textareaNormal.noMargin{margin:0}





































.inputNormal + .inputNormal{margin:10px 0 0}
.selectNormal + .inputNormal{margin:10px 0 0}
.inputNormal + .selectNormal{margin:10px 0 0}



.txtLabel{
    display: block;
    width: 100%;
    text-align: left;
    color:#000;
    font-size:16px;
    font-weight: 600;
    margin:25px 0 11px;
}




/*인풋 : 끝*/







/*버튼 : 시작*/




.buttonDone{
    display: block;
    width: 100%;
    height: 45px;
    line-height: 43px;
    text-align: center;
    font-size:18px;
    font-weight: 600;
    color:#fff !important;
    border-radius: 10px;
    border:1px solid #002855;
    background: #002855;
}

/*버튼 : 끝*/

















/*인트로 : 시작*/
.typeIntro{
    display: block;
    width: 100%;
}


.typeIntro .centerWrap{
    display: block;
    width: calc(100% - 30px);
    max-width: 340px;
    margin:0 auto;
    padding:100px 0 0;
}

.typeIntro .swiper1{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.typeIntro .swiper1 .txt1{
    font-size:26px;
    line-height: 34px;
    font-weight: 700;
    color:#000;
    text-align: center;
}

.typeIntro .swiper1 .txt1 span{
    font-weight: 800;
    color:#002855;
}

.typeIntro .swiper1 .txt2{
    font-size:14px;
    line-height: 18px;
    font-weight: 400;
    color:#717273;
    text-align: center;
    margin:28px 0 0;
    height: 88px;
}

.typeIntro .swiper1 .img1{
    width: 260px;
    height: auto;
    display: inline-block;
}

.typeIntro .swiper1 .buttonDone{
    display: block;
    width: 250px;
    height: 60px;
    line-height: 58px;
    text-align: center;
    margin:98px auto 0;
}

.typeIntro .introTxt3{
    display: block;
    text-align: center;
    font-size:11px;
    line-height: 16px;
    color:#717273 !important;
    font-weight: 400;
    margin:83px 0 0;
}

.typeIntro .introTxt3 a{
    color:#717273 !important;
    text-decoration: underline !important;
}

.typeIntro .swiper-pagination{
    position: absolute;
    z-index: 50;
    left:50%;
    transform: translateX(-50%);
    bottom:107px;
}

.typeIntro .swiper-pagination-bullet{
    width:10px !important;
    height: 10px !important;
    background: #dbdbdb !important;
    margin:0 5px;
    opacity: 1 !important;
    border-radius: 5px !important;
}

.typeIntro .swiper-pagination-bullet-active{
    background: #002855 !important;
    width: 54px !important;
}
/*인트로 : 끝*/






/*모달류 공통 : 시작*/

.modalBottom{
    display: none;
    width: 100%;
    position: fixed;
    z-index: 2000;
    bottom:0;
    max-width: 1000px;
    min-width: 280px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 10px 10px 0 0;
}

.modalInside{
    display: none;
    width: 100%;
}

.modalInside.active{display: block;}

.modalInside2{
    display: none;
    width: 100%;
}

.modalInside2.active{display: block;}

.modalBottom.active{display: block;}

.modalBottom .modalTitle{
    display: block;
    width: 100%;
    padding:0 20px;
}

.modalBottom .modalTitle div{
    display: block;
    width: 100%;
    font-size:18px;
    font-weight: 700;
    height: 58px;
    line-height: 58px;
    color:#002855;
    text-align: left;
    border-bottom:1px solid #002855;
}

.modalBottom .modalContent{
    display: block;
    width: 100%;
    padding:30px 20px 52px;
    overflow-y: auto;
    max-height: calc(100vh - 136px);
}

.modalBottom.modalBottomH1 .modalContent{
    height: calc(100vh - 436px);
}

.modalBottom.modalBottomH2 .modalContent{
    height: calc(100vh - 366px);
}

.modalBottom.modalBottomH3 .modalContent{
    height: calc(100vh - 486px);
}

.modalBottom.modalBottomH4 .modalContent{
    height: calc(100vh - 546px);
}

.modalContentStep1c3aFix{height: calc(100vh - 494px) !important;}

.txtTop{
    display: block;
    width: 100%;
    font-size:22px;
    font-weight: 600;
    line-height: 28px;
    color:#000;
}

.modalForm{
    display: block;
    width: 100%;
}

.modalForm .txtLabel:first-child{
    margin:30px 0 11px;
}

.modalBottomButtons{
    display: block;
    width: 100%;
    padding:8px 20px 16px;
    background: #fff;
    /*border-top:1px solid #dedede;*/
}

.modalBottomButtons:after{
    display: block;
    content: "";
    clear: both;
}



.modalBottomButtons .buttonDone{
    float: right;
    width:calc((100% - 8px) * 0.75);
    height: 54px;
    line-height: 52px;
    font-weight:700;
}



.modalTitle2{
    display: block;
    width: 100%;
    padding:0 20px;
}

.modalTitle2:after{
    content: "";
    display: block;
    clear: both;
}

.modalTitle2 .title{
    float: left;
    height: 42px;
    line-height: 42px;
    text-align: left;
    font-size:13px;
    font-weight: 500;
    color:#002855;
}

.modalTitle2 .stepNumber{
    float: right;
    display: block;
    height: 42px;
    line-height: 42px;
    font-size:11px;
    text-align: right;
    color:#AAACAF;
    font-weight: 500;
}

.modalTitle2 .stepNumber span{color:#002855}


/*모달류 공통 : 끝*/
























/*202410 : start*/
.loginLogoNew{
    display: block;
    width: 200px;
    margin:0 auto;
}

.inputNormal2.type2{
    border-radius: 0 !important;
}

.loginLabelT1{
    display: block;
    width: 100%;
    padding:100px 0 24px;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color:#fff;
    line-height: 23px;
}

.buttonLoginT1{
    border-radius: 0 !important;
    margin:100px 0 0;
}

.loginCenterWrap{
    display: block;
    margin-top:30vh;
    transform: translateY(-50%);
}

.topUserInfo.topUserInfoNew{
    padding:20px 0;
}

.topUserInfo.topUserInfoNew .tuTxt1{
    margin:0;
}

.inputSearch.typeNew{
    border-radius: 0;
    border:1px solid #c0c0c0 !important;
}

.searchTopBar{
    display: block;
    width: 100%;
    padding:18px 0 12px;
    /*border-bottom:1px solid #DFE2E6;*/
}

.searchTopBar:after{content: ""; display: block; clear: both;}


.searchTopBar .date1{
    display: block;
    float: left;
    line-height: 30px;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color:#0f0f0f !important;
}

.searchTopBar .datePw{
    display: block;
    float: left;
    line-height: 30px;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color:#0f0f0f !important;
    padding:0 8px;
}

.buttonDatePick{
    display: block;
    float: left;
    background: url(../images/img_schedule.svg) center no-repeat;
    background-size: 18px 17px;
    height: 29px;
    width: 30px;
    margin:0 0 0 8px;
}

.newAmount1{
    display: block;
    float: left;
    line-height: 30px;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: #0f0f0f !important;
    margin:0 0 0 16px;
}

.newAmount1 span{
    color:var(--red) !important;
    font-weight: 600;
}

.rhTabsNew1{
    margin:6px 0 0;
}

.requestOneNew{
    padding: 30px 0;
}

.requestOneNew .detailInfo{
    padding :0;
    margin:20px 0 0;
}

.titleNew1a{
    width: 100%;
    line-height: 25px;
    font-size: 17px;
    font-weight: 700;
    color: var(--main) !important;
    max-width: 100%;
}

.titleNew1b{
    width: 100%;
    line-height: 22px;
    font-size: 14px;
    font-weight: 600;
    color: #444 !important;
    max-width: 100%;
}

.titleNew1b.status1{
    color: #777777 !important;
}

.titleNew1b.status2{
    color: var(--red) !important;
}

.requestOneNew .buttonMain{
    border-radius: 0 !important;
    margin:24px 0 0;
}

.kia1NewLogo{
    display: block;
    width: 160px;
    height: 22px;
    background: url(../images/kia1new.png) center no-repeat;
    background-size: 160px 22px;
    top:23px;
    font-size: 0;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
}

.buttonLogoutNew1{
    display: block;
    width: 40px;
    height: 40px;
    background: url(../images/img_logout.svg) center no-repeat;
    background-size: 18px 18px;
    float: right;
    margin:15px 0 0;
    transform: translateX(10px);
}

footer .topRow img.footerLogoNew1{
    width: 100px;
    opacity: 0.94;
}


.whiteBoxAllNewDetail{
    padding-bottom:24px;
}

.whiteBoxAllNewDetail .detailInfo{
    padding:0;
}

.line1NewDetail{
    display: block;
    width: 100%;
    height: 1px;
    background: #c0c0c0;
}

.historyNewSection{
    background: #fff;
}

.historyNewSection .centerWrap {
    padding: 50px 20px 80px !important;
}

.historyOne{
    display: block;
    padding:1px 0 0 30px;
    position: relative;
}

.historyOne .content{
    display: block;
    width: 100%;
    border-left:4px solid #999;
    padding:0 0 30px 36px;
    min-height: 90px;
}

.historyOne .content .historyTitle{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color:#222 !important;
    line-height: 24px;
}

.historyOne .content .historyDetail{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color:#222 !important;
    line-height: 22px;
    padding:0 10px 0 10px;
    position: relative;
}

.historyOne .content .historyDetail:before{
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: #222;
    border-radius: 50%;
    left:0;
    top:9px;
    position: absolute;
    z-index: 1;
}

.historyOne .numberWrap{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border:3px solid #999;
    text-align: center;
    line-height: 34px;
    font-size: 15px;
    font-weight: 700;
    color:#999 !important;
    border-radius: 20px;
    left:12px;
    top:-8px;
    background: #fff;
}

.historyOne.status2 .numberWrap{
    background: #222;
    border:3px solid #222;
    color:#fff !important;
}

.historyOne .status3{
    background: #222;
    border:3px solid #222;
    color:#fff !important;
}

.historyOne.status3 .numberWrap{
    background: #222;
    border:3px solid #222;
    color:#fff !important;
}

.historyOne.status3 .content{
    border-left:4px solid #222;
}


.historyOne.statusLast .content{
    border-left:none !important;
    min-height: 0 !important;
    padding: 0 0 0 36px !important;
}



.historyOne.status1 .historyTitle{opacity: 0.5}
.historyOne.status1 .historyDetail{opacity: 0.5}
/*202410 : end*/





























/*#######################################*/
@media screen and (max-width: 1000px) {


} /*반응형 1000px 끝*/



/*#######################################*/
@media screen and (max-width: 600px) {

    .userHome .section2 .gotoDetail{padding:0 45px 0 0;}

    .userHome .section3 .gotoDetail{padding:0 0 0 45px;}

    .userHome .section2 .imgWrap{margin:23px 0 0}

    .filmImg2Wrap{
        margin:0;
        border:none;
        padding:0;
    }


} /*반응형 600px 끝*/








/*#######################################*/
@media screen and (max-width: 488px) {

    .mobileMenu nav{padding:50px 8px;}

    .footerStyle .csCenter .csRow .col1{font-size: 12px}

    .footerStyle .csCenter .csRow .col2{font-size: 12px}

    .footerStyle .centerWrap{padding:0 8px}

} /*반응형 488px 끝*/








@media screen and (max-width: 420px) {

    .flimGraph .filmImg2{
        width: calc(100%) !important;
    }

} /*반응형 488px 끝*/


@media screen and (max-width: 400px) {



} /*반응형 400px 끝*/


@media screen and (max-width: 380px) {

    .footerStyle .csCenter .csRow .col1{width:100%}

    .footerStyle .csCenter .csRow .col2{width:100%}

    .footerStyle .csCenter .title{font-size: 17px;}
    .footerStyle .csCenter .csRow1 .col1{font-size: 15px}
    .footerStyle .csCenter .csRow1 .col2{font-size: 14px}
    .footerStyle .csCenter .csRow + .csRow{margin:15px 0 0;}


    .filmSpec .specs .inside{width: 240px;}

    .filmSpec .specs .spec {
        width: 114px;
        height: 114px;
        border-radius: 50%;
        margin: 0 0 12px 12px;
    }

    .filmSpec .specs .spec:nth-child(2n - 1) {
        margin: 0 0 12px 0;
    }

    .filmSpec .specs .spec .txt1{
        font-size: 11px;
        letter-spacing: -0.5px;
        margin: 26px 0 0;
    }

    .filmSpec .specs .spec .txt2{
        font-size: 24px;
        line-height: 32px;
        margin:3px 0 0;
    }

} /*반응형 380px 끝*/


@media screen and (max-width: 360px) {

    .hide360{display: none;}

    .bInputButton {width: calc((100% - 20px) / 3);}

    .userHome .section2 .txtBox{width: calc(100% - 50px);}

    .userHome .section3 .txtBox{width: calc(100% - 50px);}

} /*반응형 360px 끝*/






@media screen and (max-width: 340px) {

    .searchTopBar .datePw{
        padding:0 4px;
    }

    .buttonDatePick{
        margin:0 0 0 4px;
    }

    .searchTopBar .date1{
        font-size: 13px;
        letter-spacing: -0.5px;
    }

    .searchTopBar .date2{
        font-size: 13px;
        letter-spacing: -0.5px;
    }

    .newAmount1{
        margin:0 0 0 12px;
    }
} /*반응형 340px 끝*/









@media screen and (max-width: 320px) {

    .hide320{display: none;}


} /*반응형 320px 끝*/



@media screen and (max-width: 300px) {

    .startWrap .swiper-pagination{top:18px}

    .startWrap .startTxt{
        font-size: 16px;
        line-height: 22px;
        padding:0 20px 20px;
    }

    .startWrap{padding:60px 0 30px}

    .startWrap .stImg1{
        width: 240px;
        border-radius: 50px;
    }

    .startWrap .stImg2{
        width: 240px;
        border-radius: 50px;
    }

    .startWrap .stImg3{
        width: 240px;
    }

    .startWrap .stImg4{
        width: 240px;
    }

    .startWrap .swiper-pagination .swiper-pagination-bullet{
        width: 20px !important;
    }

    .startWrap .gotoLoginWrap{margin:6px 0 0}

} /*반응형 300px 끝*/