@CHARSET "UTF-8";

/* basic-color : #f5486f; */
/* dark-color : #dc3a5e; */
/* input-color : #f2f3f5; */

/* reset */
html { font-size:10px; }
/* @media (max-width: 500px){ html { font-size:9.5px; } }
@media (max-width: 400px){ html { font-size:8.5px; } }
@media (max-width: 350px){ html { font-size:8px; } }
@media (max-width: 320px){ html { font-size:7px; } } */
* { line-height: 150%; font-weight: 300; } html, body { height: 100%; } body{ background:#fff; font-size: 1.5rem;}
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 { -webkit-text-size-adjust:none; } /* color값은 디자인가이드에 맞게사용 */
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; -ms-interpolation-mode: bicubic; }
.clickContent{ cursor:pointer; }
.blockImg{ display:block; }
.fullImg{ display:block; width:100%; }
.widthFull { width: 100%; }
.maxImg{ display:block; width:100%; height:100%; }
.warningText{padding:0.5rem 0.5rem; color:#555;}
.coreColor{ color:#64676c; }
.orangeText{ color:#eb6100; }
.grayText{ color:#989da3; }
.alignLeft { text-align: left; } .alignRight { text-align: right; } .alignCenter { text-align: center; }

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


html, .no-js { opacity: 0; }
.-ms- { opacity: 1; }


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

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'], textarea {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:#f2f3f5; box-shadow:none; outline:0;
  padding:1rem; border-radius:0.2rme; max-width:100%; border: 1px solid #fff;
}

input.bottomLine:focus, textarea.bottomLine:focus, select.bottomLine:focus { border-bottom:1px solid #64676c; outline:0; transition:all 0.2s ease; }
input.allLine:focus, textarea.allLine:focus, select.allLine:focus { border:1px solid #64676c; outline:0; transition:all 0.2s ease; }

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

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


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

.customSelect { font-size: 1.3rem; position: relative; width: 200px; border: 1px solid #bbb; z-index: 1; border-radius: 0.2rem; } 
.customSelect:before { content: ""; position: absolute; top: 50%; right: 15px; width: 0; height: 0; margin-top: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #979fa6; } 
.customSelect label { position: absolute; top: 0px; left: 0px; padding: 1rem; color: #555; z-index: -1; font-weight: 400; margin: 0; } 
.customSelect select { width: 100%; height: auto; font-family: inherit; padding: 1rem; border: 0; opacity: 0; filter:alpha(opacity=0); 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; top:0; left: 0; }
.customObject-fit { position:relative; background-size:cover; background-position:center center; }
.customObject-fit img { opacity:0; }

.imgContainer-fit.fit-contain img { width:100%; height:100%; -o-object-fit:contain; object-fit:contain; position:absolute; top:0; left: 0; }
.customObject-fit.fit-contain { position:relative; background-size:contain; background-position:center center; }


/* ------ float ------ */

.floatWarp:after { content: ''; display:block; clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }



/* ------ lineBlockWarp ------ */

.lineblockWarp { font-size: 0; }
.lineblockWarp ul.center { text-align: center; }
.lineblockWarp ul.right { text-align: right; }
.lineblockWarp ul.left { text-align: left; }
.lineblockWarp ul li { display: inline-block; font-size: 1.4rem; }


/* ------ gridWarp ------ */

.gridWarp > ul { font-size: 0; margin-left: -2rem; }
.gridWarp > ul > li { font-size: 1.4rem; display: inline-block; padding-left: 2rem; width: 50%; vertical-align: middle; }
.gridWarp > ul > li > .inner { display: block; }

.gridWarp.grid_2 > ul > li:nth-child( n + 3) { padding-top: 2rem; }
.gridWarp.grid_3 > ul > li { width: 33.333%; }
.gridWarp.grid_3 > ul > li:nth-child( n + 4) { padding-top: 2rem; }
.gridWarp.grid_4 > ul > li { width: 25%; }
.gridWarp.grid_4 > ul > li:nth-child( n + 5) { padding-top: 2rem; }
.gridWarp.grid_5 > ul > li { width: 20%; }
.gridWarp.grid_5 > ul > li:nth-child( n + 6) { padding-top: 2rem; }
.gridWarp.grid_6 > ul > li { width: 16.666%; }
.gridWarp.grid_6 > ul > li:nth-child( n + 7) { padding-top: 2rem; }
.gridWarp.grid_7 > ul > li { width: 14.2857142857%; }
.gridWarp.grid_7 > ul > li:nth-child( n + 8) { padding-top: 2rem; }


/* ------ cut-text ------ */

.cutText { display:block; overflow:hidden; width:100%; text-overflow:ellipsis; white-space:nowrap; }


/* ------ clamp ------ */

.lineClamp { position: relative; height: calc(3em); font-size: 1.5rem; line-height: 150%; word-break: break-all; overflow: hidden; }
.lineClamp::before, .lineClamp::after { position: absolute; background: #fff; }
.lineClamp::before {
  content: '...'; top: 0; right: 0; width: 2.5em; text-align: right; font-weight: 300;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}
.lineClamp::after { content: ''; width: 100%; height: 100%; }

@supports (-webkit-line-clamp: 1) {
 	.lineClamp { display: -webkit-box; -webkit-box-orient: vertical; } 
 	.lineClamp:before { display: none !important; }
}
.clamp_2 {  -webkit-line-clamp: 2; line-clamp: 2; height: calc(1.5em * 2); }
.clamp_2:before { top: calc(1.5em * 1); }
.clamp_3 {  -webkit-line-clamp: 3; line-clamp: 3; height: calc(1.5em * 3); }
.clamp_3:before { top: calc(1.5em * 2); }
.clamp_4 {  -webkit-line-clamp: 4; line-clamp: 4; height: calc(1.5em * 4); }
.clamp_4:before { top: calc(1.5em * 3); }
.clamp_5 {  -webkit-line-clamp: 5; line-clamp: 5; height: calc(1.5em * 5); }
.clamp_5:before { top: calc(1.5em * 4); }
.clamp_6 {  -webkit-line-clamp: 6; line-clamp: 6; height: calc(1.5em * 6); }
.clamp_6:before { top: calc(1.5em * 5); }


/* ------ burgerBtn ------ */

/* #burgerBtn{position:fixed; top:22px; left:30px; z-index:200;} */
#burgerBtn .inner { position:relative; z-index:200; cursor:pointer; }
#burgerBtn .inner .bt { position:relative; width:22px; height:16px; margin:auto; }
#burgerBtn .inner .bt:before { content:"";  display:block;  position:absolute;  height:2px; width:2px; background:#000; left:-5px; top:50%; transform:translateX(0px); opacity:0; transition: .5s; }

#burgerBtn .inner span { display: block; position: absolute; width: 100%; height: 2px; background: #000; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s; }
#burgerBtn .inner span:nth-child(1) { top: 0px; }
#burgerBtn .inner span:nth-child(2), #burgerBtn .inner span:nth-child(3) { top:7px; }
#burgerBtn .inner span:nth-child(4) { top:14px; }
#burgerBtn .inner span:before { content: ""; display: block; position: absolute; height: 2px; width: 2px; background: #000; left: -5px; top: 0px; transition: .25s ease-in-out; }

#burgerBtn .inner.open .bt:before { opacity: 1; transform: translateX(5px); }
#burgerBtn .inner.open span:nth-child(1), #burgerBtn .inner.open span:nth-child(4) { top: 8px; width: 0; left: 13px; opacity: 0; }
#burgerBtn .inner.open span:before { opacity: 0;}
#burgerBtn .inner.open span:nth-child(2) { transform: rotate(45deg); }
#burgerBtn .inner.open span:nth-child(3) {  transform: rotate(-45deg); }


/* ------ 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"; }



/* ------ fileUpload ------ */

.file-upload .file-upload-content { display: none; }
.file-upload .file-upload-input { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; cursor: pointer; }

.file-upload .image-upload-wrap, .file-upload .file-upload-content { border: 1px dashed #827d86; position: relative; color: #8e9096; background-color: #f2f3f5; }
.file-upload .image-upload-wrap .drag-text { text-align: center; text-transform: uppercase; line-height: 10rem; }

.file-upload .image-dropping,
.file-upload .image-upload-wrap:hover { background-color: #e6e7ea; color: #f5486f; }

.file-upload .image-title-wrap { color: #222; }
.file-upload .file-upload-image { height: 10rem; margin: auto; padding: 1rem; }

.file-upload .remove-image { position: absolute; right: 0.5rem; top: 0.5rem; text-indent: -9999px; width: 30px; height: 30px; cursor: pointer; }
.file-upload .remove-image:before, .file-upload .remove-image:after { content: ''; display:block; width: 20px; height: 2px; background-color: #827d86;; position: absolute; top: 50%; left: 50%; }
.file-upload .remove-image:before { transform: translate(-50%, -50%) rotate(45deg); }
.file-upload .remove-image:after { transform: translate(-50%, -50%) rotate(-45deg); }
.file-upload .remove-image:hover::before, .file-upload .remove-image:hover::after { transition: all .2s ease; background-color: #dc3a5e; }


/* ------ basicBtn ------ */

a, button{ outline: 0; outline: none; }
a:focus, button:focus{ outline: 0; outline: none; }

.basicBtn {
	color: #fff; border: 1px solid #19337d; background-color: #365dcf;
	display: block; width: 100%; cursor: pointer; padding: 0px 20px;
	text-align: center; font-weight: normal; line-height: 4.6rem; text-decoration: none;
	border-radius: 0.3rem;
}
.basicBtn:hover { background-color:#2847a2; color:#fff; text-decoration: none; }


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

.lineBtn, .btn.lineBtn {
	color:#333; border:1px solid #bbbfc6;
	display:block; width:100%; cursor:pointer; padding: 0px 20px;
	text-align:center; font-weight:normal; line-height: 4.6rem; text-decoration:none;
	border-radius:0.3rem;
}
.lineBtn:hover, .btn.lineBtn:hover { background-color: #ebeff5; color: #333; text-decoration: none; }


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

.effectBtn { position:relative; z-index:1; text-align:center; cursor:pointer; line-height:4rem; overflow:hidden; }
.effectBtn:before, .effectBtn span { transition:transform 0.3s; 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%; transform:translate3d(-100%, 0, 0); }
.effectBtn:hover::before { transform:translate3d(0, 0, 0); }
.effectBtn:hover > span { transform:translate3d(0, 100%, 0); }


/* ------ slopeBtn ------ */

.slopeBtn {
	color:#ffffff; border:1px solid #19337d; background-color:#365dcf;
	display:block; width:100%; cursor:pointer;
	text-align:center; font-weight:normal; line-height:4rem; text-decoration:none; /* text-shadow:0px 1px 0px #528ecc; */
	box-shadow:0px 3px 0px 0px #19337d; border-radius:0.3rem;
}
.slopeBtn:hover { background-color:#2847a2; }
.slopeBtn:active { position:relative; top:0.3rem; box-shadow:0px 0px 0px 0px #1564ad; }


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

.radiusBtn { border-radius:15rem; }



/* ------ file ------ */

.customFile { padding: 0px; position: relative; cursor: pointer; }
.customFile label { cursor: pointer; display: block; z-index:9999; }
.customFile .fileTitle { 
	display: block; max-width: calc(100% - 1.4rem); padding: 2px; border-radius: 20%; transform: translateY(-50%);
	position: absolute; left: 0.7rem; top: 0; font-size: 1.3rem; background-color: #fff; color: #474ee1;
}
.customFile .fileTitle span { font-weight: 400; } 
.customFile input[type="file"] { display: none; }


/* ------ Checkbox ------ */

.customCheckbox { padding: 5px 40px 5px 25px; position: relative; cursor: pointer; }
.customCheckbox label { cursor: pointer; display: block; }
.customCheckbox i { 
	display: block; width: 16px; padding: 2px; border-radius: 20%;
	position: absolute; left: 0; top: 8px;
    margin-right: 6px;  background: #365dcf;
}
.customCheckbox i:before { content: ''; display: block; width: 12px; padding-bottom: 100%; background-color: #fff; border-radius: 10%; }
.customCheckbox input[type="checkbox"] { display: none; }
.customCheckbox input[type="checkbox"]:checked ~ label i:before { background-image: url("../img/common/icon/check.png"); background-size: 100% 100%; background-color: inherit; }


/* ------ Radio ------ */

.customRadio { padding: 5px 40px 5px 0px; position: relative; cursor: pointer; }
.customRadio label { display: block; cursor: pointer; }
.customRadio i { 
    cursor: pointer; width: 16px; height: 16px; line-height: 16px; 
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    padding: 2px; border-radius: 8px; background-color: #9e5fff;
}
.customRadio i:before { content: ''; display: block; width: 12px; padding-bottom: calc(100% - 2px); background-color: #fff; border-radius: 50%; border: 1px solid #fff; }
.customRadio input[type="radio"] { display: none; }
.customRadio input[type="radio"]:checked + label i:before { background-size: 100% 100%; background-color: inherit;  }


/* ------ 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:-1px; top:0; border:1px solid #e4e3eb; background: #fff; }
.switch input:checked ~ label { background-color:#64676c; }
.switch input:checked ~ label i { right:-1px; 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; }