@CHARSET "UTF-8";

/* 주조색 : #64676c */
/* 중간색 : #484a4f */
/* 진한색 : #242527 */

/* reset */
html{font-size:10px;}
body{/* background:#f7f9fd; */background:#fff;}
.overflow-hidden{height:100%; overflow:hidden; width:100%; position:fixed;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0}
fieldset,img{border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle; /* -webkit-appearance: none; */}
button {border:0 none; background-color:transparent; cursor:pointer; outline:none}
body,th,td,input,select,textarea,button {font-size:1.5rem; font-family:'Noto Sans KR', sans-serif; -webkit-text-size-adjust:none;} /* color값은 디자인가이드에 맞게사용 */
input[type='password']{font-family:HelveticaNeue,'Noto Sans KR', sans-serif;}
a {text-decoration:none}
a:active, a:hover {text-decoration:none;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
table{border-collapse:collapse; border-spacing:0}
legend, caption, hr, .skip, .hide, .hidden{display: none;}
img{vertical-align:middle;}
.clickContent{cursor:pointer;}
.blockImg{display:block;}
.fullImg{display:block; width:100%;}
.maxImg{display:block; width:100%; height:100%;}
.coreColor{color:#64676c;}
.orangeText{color:#eb6100;}
.grayText{color:#989da3;}
.warningText{padding:1.5rem 0.5rem; font-size:1.4rem; color:#555;}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* -webkit-transition: all 0.5s linear; transition: all 0.5s linear; */}


/* ------ write ------ */

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='date'],
textarea,
select
{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:transparent;
  box-shadow:none;
  border:1px solid #d1d1d1;
  line-height:2rem;
  padding:1rem;
  background:#fff;
  border-radius:0.2rem;
  max-width:100%;
}

input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='date']:focus,
textarea:focus,
select:focus {
  border:1px solid #64676c;
  outline:0;
  transition:all 0.2s ease;
}

input::-ms-input-placeholder { color:#aaa; } /* ie10~ */
input::-webkit-input-placeholder { color:#aaa; } /* webkit */
input::-moz-placeholder { color:#aaa; } /* Firefox */
input::placeholder { color:#aaa; }

textarea::-ms-input-placeholder { color:#aaa; }
textarea::-webkit-input-placeholder { color:#aaa; }
textarea::-moz-placeholder { color:#aaa; } 
textarea::placeholder { color:#aaa; }

.fileInput{overflow:hidden;}
.fileInput label {
    position:relative;
    cursor:pointer;
    display:block;
    float:right;
    vertical-align:middle;
    overflow:hidden;
    width:100px;
    height:30px;
    background:#777;
    color:#fff;
    text-align:center;
    line-height:30px;
}
.fileInput label input {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}
.fileInput input[type=text] {
    vertical-align:middle;
    display:block;
    width:calc(100% - 100px);
    height:30px;
    line-height:30px;
    float:left;
}


/* ------ cut-text ------ */
.cutText { display:block; overflow:hidden; width:100%; text-overflow:ellipsis; white-space:nowrap; }
.clampText{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; letter-spacing: -1px; }


/* ------ customSelect ------ */


.selectbox { position: relative; width: 200px; /* 너비설정 */ border: 1px solid #999; /* 테두리 설정 */ z-index: 1; } 
.selectbox:before { /* 화살표 대체 */ content: ""; position: absolute; top: 50%; right: 15px; width: 0; height: 0; margin-top: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #333; } 
.selectbox label { position: absolute; line-height: 2rem; top: 1px; /* 위치정렬 */ left: 5px; /* 위치정렬 */ padding: 1rem; /* select의 여백 크기 만큼 */ color: #999; z-index: -1; /* IE8에서 label이 위치한 곳이 클릭되지 않는 것 해결 */ } 
.selectbox select { width: 100%; height: auto; line-height: 2rem;  font-family: inherit; /* 폰트 상속 */ padding: 1rem; /* 여백과 높이 결정 */ border: 0; opacity: 0; /* 숨기기 */ filter:alpha(opacity=0); /* IE8 숨기기 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; }




/* ------ object-fit ------ */

.imgContainer-fit {/* width:500px; height:500px; */ width:100%; padding-bottom:100%; position:relative; display:block;}
.imgContainer-fit img {width:100%; height:100%; -o-object-fit:cover; object-fit:cover; position:absolute;}
.customObject-fit {position:relative; background-size:cover; background-position:center center;}
.customObject-fit img{opacity:0;}




/* ------ effectBtn ------ */

.effectBtn{position:relative; z-index:1; text-align:center; cursor:pointer; line-height:4rem; overflow:hidden;}
.effectBtn:before, .effectBtn span{-webkit-transition:-webkit-transform 0.3s;  transition:transform 0.3s; -webkit-transition-timing-function:cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function:cubic-bezier(0.75, 0, 0.125, 1);}
.effectBtn span{display:block;}
.effectBtn:before{color:#fff; background-color:#f84336; content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0);}
.effectBtn:hover::before{-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
.effectBtn:hover > span{-webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0);}



/* ------ basicBtn ------ */
.basicBtn{
	color:#ffffff; border:1px solid #242527; background-color:#64676c;
	display:block; width:100%; margin-top:1.5rem; cursor:pointer;
	font-size:1.6rem; text-align:center; font-weight:normal; line-height:4.5rem; text-decoration:none; /* text-shadow:0px 1px 0px #528ecc; */
	-moz-box-shadow:0px 3px 0px 0px #242527; -webkit-box-shadow:0px 3px 0px 0px #242527; box-shadow:0px 3px 0px 0px #242527;	
	-moz-border-radius:0.5rem; -webkit-border-radius:0.5rem; border-radius:0.5rem;
}
.basicBtn:hover{background-color:#484a4f;}
.basicBtn:active {
	position:relative;
	top:0.3rem;
	-moz-box-shadow:0px 0px 0px 0px #1564ad;
	-webkit-box-shadow:0px 0px 0px 0px #1564ad;
	box-shadow:0px 0px 0px 0px #1564ad;
}


/* ------ lineBtn ------ */

.lineBtn{
	color:#a0afc8; border:1px solid #abb9d1; background-color:#fff;
	display:block; width:100%; margin-top:2.5rem; cursor:pointer;
	font-size:1.6rem; text-align:center; font-weight:normal; line-height:4.5rem; text-decoration:none; /* text-shadow:0px 1px 0px #528ecc; */	
	-moz-box-shadow:0px 3px 0px 0px #a0afc8; -webkit-box-shadow:0px 3px 0px 0px #a0afc8; box-shadow:0px 3px 0px 0px #a0afc8;	
	-moz-border-radius:0.5rem; -webkit-border-radius:0.5rem; border-radius:0.5rem;
}
.lineBtn:hover{border:1px solid #708099; color:#708099; -moz-box-shadow:0px 3px 0px 0px #708099; -webkit-box-shadow:0px 3px 0px 0px #708099; box-shadow:0px 3px 0px 0px #708099;}
.lineBtn:active{position:relative; top:3px; -moz-box-shadow:0px 0px 0px 0px #1564ad; -webkit-box-shadow:0px 0px 0px 0px #1564ad; box-shadow:0px 0px 0px 0px #1564ad;}


/* ------ radiusBtn ------ */

.radiusBtn{-moz-border-radius:15rem; -webkit-border-radius:15rem; border-radius:15rem;}



/* ------ swith checkBox ------ */

.switch{width:4.2rem; height:2.4rem; border-radius:4rem; border:1px solid #e4e3eb; position:relative;}
.switch input{top:0; right:0; bottom:0; left:0; opacity:0; z-index:100; position:absolute; width:100%; height:100%; cursor:pointer;}
.switch label{position:relative; display:block; margin:0; padding:0; width:100%; height:100%; background-color:#a5a39d; border-radius:4rem; box-shadow:inset 0 2px 3px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5);}
.switch label i{display:block; height:100%; width:2.2rem; border-radius:inherit; background:silver; position:absolute; z-index:2; left:0; top:0; border:1px solid #e4e3eb; background: #fff;}
.switch input:checked ~ label{background-color:#64676c;}
.switch input:checked ~ label i{right:0; left:inherit;}

.checkBtn-line{overflow:hidden; line-height:2.4rem;}
.checkBtn-line .switch, .checkBtn-line p{display:inline-block; font-size:1.3rem; float:left; margin-right:0.7rem;}
.checkBtn-line button{font-size:1.2rem;}




/* ------ accordion ------ */

.accordion-panel{padding:0 0.5rem; background-color:white; max-height:0; overflow:hidden; transition:max-height 0.2s ease-out;}

.accordion{position:relative; padding-right:3rem; display:block;}
.accordion:after{content:'\002B'; color:#777; font-weight:bold; width: 2.4rem; font-size:2rem; text-align:center; position:absolute; right:0rem; top:50%; transform:translateY(-50%);}
.accordion.active:after {content:"\2212";}





/* ------ radio ------ */

.radio { margin: 0.5rem; }
.radio input[type="radio"] { position: absolute; opacity: 0; }
.radio input[type="radio"] + .radio-label:before {
  content: ''; background: #f4f4f4; border-radius: 100%; border: 1px solid #b4b4b4;
  display: inline-block; width: 2.1rem; height: 2.1rem;
  position: relative; top: 0.2rem; margin-right: 1rem;
  vertical-align: top; cursor: pointer; text-align: center; transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before { background-color: #485af5; box-shadow: inset 0 0 0 4px #f4f4f4; }
.radio input[type="radio"]:focus + .radio-label:before { outline: none; border-color: #485af5; }
.radio input[type="radio"]:disabled + .radio-label:before { box-shadow: inset 0 0 0 4px #f4f4f4; border-color: #b4b4b4; background: #b4b4b4; }
.radio input[type="radio"] + .radio-label:empty:before { margin-right: 0; }