@charset "utf-8";
@import "./font.css";

/* basic css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,caption,
article, aside, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section {margin: 0; padding: 0; border: 0;}
article, aside, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section {display: block;}
html, body {height: 100%; -webkit-text-size-adjust: 100%;}
body {font-size: 16px;font-family: NotoKR-Regular, "맑은 고딕",  "돋음", dotum, sans-serif, Tahoma; color:#333; line-height:1.5; letter-spacing:-0.5px;}

:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html {/*overflow-y:scroll;*/font-size: 16px;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
/*h1, h2, h3, h4 {color:#0d0d0d;}*/
a {color: #333; text-decoration: none;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover {  text-decoration: none; }
a:active {  text-decoration: none; }
a:focus { text-decoration: none; }
select, input, textarea { font-size: 100%;vertical-align: middle ; font-family:"맑은 고딕",  "돋음", dotum, sans-serif, Tahoma;}
input {margin: 0;padding: 0;outline: none;}
ol, ul {list-style: none;}
label {vertical-align:middle;}
legend, caption {position:relative; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; text-indent:-9999px;}
img {vertical-align: middle;image-rendering: -webkit-optimize-contrast;}

/* 추가부분 Start */
em,address {font-style:normal;}
table {clear:both;border-collapse:collapse;border-spacing:0px;border:0;}
/*table caption {display:none;}*/
table th {font-weight: normal !important;}
/* 추가부분 End */

/*접근성향상*/
.ir {text-indent: -9999px; position: fixed; top: -9999px; font-size: 1px; width: 1px; height: 1px; opacity: 0}

/* Form요소 기본설정 */
button {cursor: pointer; border: 0}
button,input {overflow: visible}
button,select {text-transform: none}
button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}
input, textarea, select, button{font-size:1rem; font-family: 'NotoKR-Regular', "맑은 고딕",  "돋음", dotum, sans-serif, Tahoma; color:#333;}
input:disabled, select:disabled { background-color:#ddd; }
input, select{vertical-align: middle; color:#666;}
select {
    border:1px solid #ccc;
    -webkit-appearance:none; /* 크롬 화살표 없애기 */
    -moz-appearance:none; /* 파이어폭스 화살표 없애기 */
    appearance:none; /* 화살표 없애기 */
    background: #fff url('../../images/select-arrow-down.png') no-repeat center right 10px;
    height: 40px;
    padding: 0 40px 0 10px;
    box-sizing: border-box;
    font-size: 1rem;
    letter-spacing: -1px;
}
select:focus {outline: 1px solid;/* outline: none;*//*border-color: #44465c*/}
select::-ms-expand {display: none;            /* 화살표 없애기 for IE10, 11*/}

input[type=radio], input[type=checkbox] {border:0px;vertical-align: middle;box-sizing: border-box;padding: 0}
input[type=button] {padding:0 10px;}
input[type=text], input[type=password] {height:40px;padding:0 10px;border:1px solid #cccccc;vertical-align:middle;background-color:#fff; box-sizing:border-box;
    -webkit-appearance:none;
    -moz-appearance:none;
    -o-appearance:none;
    font-size: 1rem;
}
input[type="checkbox"] {position: relative; -webkit-appearance: none;-moz-appearance: none; appearance: none; background-color: #fff; cursor: pointer; outline: 0; width: 20px; height: 20px; vertical-align: middle;}
input[type="checkbox"]::before {content: ''; display: block; width: 100%; height: 100%; border: 1px solid #ccc; position: absolute; top: 0; left: 0;}
input[type="checkbox"]::after {content: ''; border: solid #333; border-width: 0 2px 2px 0; display: none; width: 30%; height: 50%; left: 40%; position: absolute; top: 15%; transform: rotate(45deg); }
input[type="checkbox"]:checked {background: #fff;}
input[type="checkbox"]:checked::after {display: block;}

[hidden] {display: none}
input::-ms-clear { display: none}

:disabled,
input:disabled,
[disabled],
input[disabled],
input[readonly] {background-color: #f3f3f3 !important; color: #6c6d73; border-color: #ccc !important}
input.disabled {background-color: #f3f3f3 !important; color: #6c6d73; border-color: #ccc !important}

button {vertical-align:middle; cursor:pointer;outline: none;}
button:focus {outline: 1px dotted #111 !important;}

textarea {border: 1px solid #ccc; padding: 10px; resize: none; vertical-align: middle; line-height: 22px; box-sizing: border-box;}
textarea::placeholder {font-size: 13px !important}
textarea:-ms-input-placeholder {font-size: 13px !important}
textarea::-ms-input-placeholder {font-size: 13px !important}

strong{font-weight:normal;/*font-family:NotoKR-Bold;*/}

input:focus,
select:focus,
textarea:focus {
    outline: 1px dotted #111;
}

::placeholder {color: #666;opacity: 1}
:-ms-input-placeholder {color: #6c6d73}
::-ms-input-placeholder { color: #6c6d73}

/* 공통약속분모*/
.hid, .hidden {position: absolute;width: 0;height: 0;visibility: hidden;font-size: 0;line-height: 0; top:-9999px}
.hide{display:none;}
.text-placeholder{ color: #777; }
hr { display:none; }
.hidden, legend  {width : 0; height : 0; line-height : 0; font-size : 0; float : left; position : absolute; visibility : hidden; overflow : hidden; }

/* Skip */
/*#skip  {position : absolute; width : 100%; margin : 0 auto; z-index : 999; }
#skip a  {display : block; height : 1px; margin-bottom : -1px; overflow : hidden; white-space : nowrap; width : 1px; }
#skip dt  {width : 1px; height : 1px; font-size : 0; visibility : hidden; float : left; position : absolute; text-indent : -9999px; }
#skip dd  {float : left; }*/
#skip {position: absolute; height: 0; z-index: 50; }
#skip a { display: block; left: -9000px; position: absolute; text-align: center; width: 400px;}
#skip a:focus,#skip a:active,#skip a:hover{background-color:#fff;color:black;left:50%;padding:5px 0;position:absolute;top:10px;z-index:1000000;border:1px dotted red}

/* float */
.fl{float:left}
.fr{float:right}
.clear{clear:both}
.clearBox:after {content:""; display: block; clear: both;}

.alignC{text-align: center !important;}
.alignL{text-align: left !important;}
.alignR{text-align: right !important;}

/*기타*/
table {width: 100%; margin: 0; border: 0; table-layout: fixed; border-collapse: collapse; empty-cells: show}
.table caption {position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0);}
/*table caption { overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0}*/


/* padding Style */
.pd20 {padding: 20px !important;}
.pd25 {padding: 25px !important;}
.pd30 {padding: 30px !important;}
.pd35 {padding: 35px !important;}
.pd40 {padding: 40px !important;}

.pdl5{padding-left:5px !important; }
.pdl7{padding-left:7px !important; }
.pdl10{padding-left:10px !important; }
.pdl12{padding-left:12px !important; }
.pdl15{padding-left:15px !important; }
.pdl20{padding-left:20px !important; }
.pdl24{padding-left:24px !important; }
.pdl30{padding-left:30px !important; }
.pdl100{padding-left:100px !important; }

.pdt3{padding-top:3px !important;}
.pdt5{padding-top:5px !important;}
.pdt7{padding-top:7px !important;}
.pdt10{padding-top:10px !important;}
.pdt14{padding-top:14px !important;}
.pdt20{padding-top:20px !important;}
.pdt50{padding-top:50px !important;}

.pdr3{padding-right:3px !important;}
.pdr5{padding-right:5px !important;}
.pdr10{padding-right:10px !important;}
.pdr15{padding-right:15px !important;}
.pdr25{padding-right:25px !important;}

.pdb3{padding-bottom:3px !important;}
.pdb5{padding-bottom:5px !important;}
.pdb9{padding-bottom:9px !important;}
.pdb50{padding-bottom:5% !important;}
.pdb10{padding-bottom:1% !important;}
.pdb20{padding-bottom:2% !important;}
.pdb30{padding-bottom:3% !important;}

/* margin Style */
.ml3{margin-left:3px !important; }
.ml5{margin-left:5px !important; }
.ml10{margin-left:10px !important; }
.ml15{margin-left:15px !important; }
.ml20{margin-left:20px !important; }
.ml50{margin-left:50px !important; }

.mr3{margin-right:3px !important; }
.mr5{margin-right:5px !important; }
.mr8{margin-right:8px !important; }
.mr10{margin-right:10px !important; }
.mr15{margin-right:15px !important; }
.mr17{margin-right:17px !important; }
.mr20{margin-right:20px !important; }
.mr30{margin-right:30px !important; }
.mr40{margin-right:40px !important; }

.mt3{margin-top:3px !important; }
.mt5{margin-top:5px !important; }
.mt10{margin-top:10px !important; }
.mt15{margin-top:15px !important; }
.mt16{margin-top:16px !important; }
.mt20{margin-top:20px !important; }
.mt25{margin-top:25px !important; }
.mt30{margin-top:30px !important; }
.mt40{margin-top:40px !important; }
.mt45{margin-top:45px !important; }
.mt50{margin-top:50px !important; }
.mt70{margin-top:70px !important; }
.mt90{margin-top:90px !important; }
.mt120{margin-top:120px !important; }
.mt150{margin-top:150px !important; }

.mb5{margin-bottom:5px !important; }
.mb7{margin-bottom:7px!important; }
.mb10{margin-bottom:10px !important; }
.mb15{margin-bottom:15px !important; }
.mb20{margin-bottom:20px !important; }
.mb35{margin-bottom:35px !important; }
.mb40{margin-bottom:40px !important; }
.mb50{margin-bottom:5% !important }
.mb65{margin-bottom:65px !important; }
.mb80{margin-bottom:80px !important; }

/*============== 폰트, 폰트칼라, 텍스트정렬, 보더칼라 관련 s ==============*/
.va-t {vertical-align: top !important}
.va-m {vertical-align: middle !important}
.va-b {vertical-align: bottom !important}
.va-sub {vertical-align: sub !important}
.va-txtb {vertical-align: text-bottom !important}

.font-size0 {font-size: 0 !important;}
.font-bold {font-family: 'NotoKR-Bold' !important;}
.font-mid {font-family: 'NotoKR-Medium' !important;}
.font-normal {font-family: 'NotoKR-Regular' !important;}
.enfont-bold {font-family: 'montBold' !important;}
.enfont-mid {font-family: 'montMedium' !important;}
.enfont-normal {font-family: 'montRegular' !important;}
.under-line {text-decoration: underline !important;}
.nowrap {white-space: nowrap}
.white-space-normal {white-space: normal !important;}

.font-size-12 {font-size: 12px !important}
.font-size-13 {font-size: 13px !important}
.font-size-14 {font-size: 14px !important}
.font-size-15 {font-size: 15px !important}
.font-size-16 {font-size: 16px !important}
.font-size-17 {font-size: 17px !important}
.font-size-18 {font-size: 18px !important}
.font-size-19 {font-size: 19px !important}
.font-size-20 {font-size: 20px !important}
.font-size-21 {font-size: 21px !important}

.ellipsis {overflow: hidden;display: inline-block;max-width: 100%;white-space: nowrap;text-overflow: ellipsis}
.ellipsis-line2 {display: inline-block;max-height: 40px;line-height: 1.5;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}
.ellipsis-line3 {
    display: inline-block;
    max-height: 65px;
    line-height: 1.5;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}
.ellipsis-line4 {
    display: inline-block;
    max-height: 80px;
    line-height: 1.5;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

/*===================폰트, 폰트칼라, 텍스트정렬, 보더칼라 관련 e=====================*/

/*==================넓이, 높이 시작======================*/
.w10pc {width: 10% !important}
.w20pc {width: 20% !important}
.w25pc {width: 25% !important}
.w30pc {width: 30% !important}
.w33pc {width: 33% !important}
.w34pc {width: 34% !important}
.w40pc {width: 40% !important}
.w44pc {width: 44% !important}
.w45pc {width: 45% !important}
.w50pc {width: 50% !important}
.w60pc {width: 60% !important}
.w70pc {width: 70% !important}
.w75pc {width: 75% !important}
.w80pc {width: 80% !important}
.w90pc {width: 90% !important}
.w100pc {width: 100% !important}

.w20px {width: 20px !important}
.w30px {width: 30px !important}
.w40px {width: 40px !important}
.w50px {width: 50px !important}
.w60px {width: 60px !important}
.w65px {width: 65px !important}
.w70px {width: 70px !important}
.w73px {width: 73px !important}
.w75px {width: 75px !important}
.w80px {width: 80px !important}
.w85px {width: 85px !important}
.w90px {width: 90px !important}
.w95px {width: 95px !important}
.w100px {width: 100px !important}
.w110px {width: 110px !important}
.w115px {width: 115px !important}
.w120px {width: 120px !important}
.w124px {width: 124px !important}
.w125px {width: 125px !important}
.w130px {width: 130px !important}
.w135px {width: 135px !important}
.w140px {width: 140px !important}
.w143px {width: 143px !important}
.w145px {width: 145px !important}
.w150px {width: 150px !important}
.w155px {width: 155px !important}
.w160px {width: 160px !important}
.w165px {width: 165px !important}
.w170px {width: 170px !important}
.w180px {width: 180px !important}
.w185px {width: 185px !important}
.w190px {width: 190px !important}
.w200px {width: 200px !important}
.w205px {width: 205px !important}
.w210px {width: 210px !important}
.w220px {width: 220px !important}
.w230px {width: 230px !important}
.w240px {width: 240px !important}
.w250px {width: 250px !important}
.w255px {width: 255px !important}
.w260px {width: 260px !important}
.w270px {width: 270px !important}
.w280px {width: 280px !important}
.w285px {width: 285px !important}
.w290px {width: 290px !important}
.w295px {width: 295px !important}
.w300px {width: 300px !important}
.w310px {width: 310px !important}
.w320px {width: 320px !important}
.w325px {width: 325px !important}
.w327px {width: 327px !important}
.w330px {width: 330px !important}
.w335px {width: 335px !important}
.w340px {width: 340px !important}
.w350px {width: 350px !important}
.w360px {width: 360px !important}
.w365px {width: 365px !important}
.w370px {width: 370px !important}
.w375px {width: 375px !important}
.w380px {width: 380px !important}
.w390px {width: 390px !important}
.w400px {width: 400px !important}
.w405px {width: 405px !important}
.w410px {width: 410px !important}
.w420px {width: 420px !important}
.w430px {width: 430px !important}
.w440px {width: 440px !important}
.w445px {width: 445px !important}
.w450px {width: 450px !important}
.w455px {width: 455px !important}
.w460px {width: 460px !important}
.w470px {width: 470px !important}
.w480px {width: 480px !important}
.w490px {width: 490px !important}
.w495px {width: 495px !important}
.w500px {width: 500px !important}
.w510px {width: 510px !important}
.w520px {width: 520px !important}
.w530px {width: 530px !important}
.w540px {width: 540px !important}
.w550px {width: 550px !important}
.w560px {width: 560px !important}
.w595px {width: 595px !important}
.w570px {width: 570px !important}
.w580px {width: 580px !important}
.w586px {width: 586px !important}
.w590px {width: 590px !important}
.w595px {width: 595px !important}
.w600px {width: 600px !important}
.w610px {width: 610px !important}
.w620px {width: 620px !important}
.w630px {width: 630px !important}
.w635px {width: 635px !important}
.w640px {width: 640px !important}
.w650px {width: 650px !important}
.w660px {width: 660px !important}
.w670px {width: 670px !important}
.w680px {width: 680px !important}
.w690px {width: 690px !important}
.w700px {width: 700px !important}
.w720px {width: 720px !important}
.w725px {width: 725px !important}
.w730px {width: 730px !important}
.w740px {width: 740px !important}
.w750px {width: 750px !important}
.w760px {width: 760px !important}
.w765px {width: 765px !important}
.w794px {width: 794px !important}
.w800px {width: 800px !important}
.w820px {width: 820px !important}
.w860px {width: 860px !important}
.w870px {width: 870px !important}
.w880px {width: 880px !important}
.w885px {width: 885px !important}
.w890px {width: 890px !important}
.w900px {width: 900px !important}
.w920px {width: 920px !important}
.w950px {width: 950px !important}

.h100pc {height: 100% !important}
.h20px {height: 20px !important}
.h25px {height: 25px !important}
.h32px {height: 32px !important}
.h36px {height: 36px !important}
.h40px {height: 40px !important}
.h50px {height: 50px !important}
.h60px {height: 60px !important}
.h80px {height: 80px !important}
.h100px {height: 100px !important}
.h101px {height: 101px !important}
.h110px {height: 110px !important}
.h111px {height: 111px !important}
.h120px {height: 120px !important}
.h140px {height: 140px !important}
.h150px {height: 150px !important}
.h151px {height: 151px !important}
.h160px {height: 160px !important}
.h170px {height: 170px !important}
.h180px {height: 180px !important}
.h200px {height: 200px !important}
.h210px {height: 210px !important}
.h211px {height: 211px !important}
.h215px {height: 215px !important}
.h220px {height: 220px !important}
.h222px {height: 222px !important}
.h240px {height: 240px !important}
.h250px {height: 250px !important}
.h270px {height: 270px !important}
.h295px {height: 295px !important}
.h300px {height: 300px !important}
.h320px {height: 320px !important}
.h330px {height: 330px !important}
.h360px {height: 360px !important}
.h380px {height: 380px !important}
.h425px {height: 425px !important}
.h450px {height: 450px !important}
.h500px {height: 500px !important}
.h-auto {height: auto !important}

@media(max-width:767px) {
    .m-w10pc {width: 10% !important}
    .m-w15pc {width: 15% !important}
    .m-w20pc {width: 20% !important}
    .m-w25pc {width: 25% !important}
    .m-w30pc {width: 30% !important}
    .m-w35pc {width: 35% !important}
    .m-w40pc {width: 40% !important}
    .m-w45pc {width: 45% !important}
    .m-w50pc {width: 50% !important}
    .m-w55pc {width: 55% !important}
    .m-w60pc {width: 60% !important}
    .m-w65pc {width: 65% !important}
    .m-w70pc {width: 70% !important}
    .m-w75pc {width: 75% !important}
    .m-w80pc {width: 80% !important}
    .m-w85pc {width: 85% !important}
    .m-w90pc {width: 90% !important}
    .m-w100pc {width: 100% !important}
    .m-pl00 {padding-left: 0 !important}
}

.pc-v {display: block !important}
.mobile-v {display: none !important}
.mobile-block {display: inline-block !important}

@media(max-width:767px) {
    .pc-v {display: none !important}
    .mobile-v {display: block !important}
    .mobile-block {display: block !important}
    .mobile-block + .mobile-block {margin-top: 5px} 
}
/*==================넓이, 높이 끝======================*/



/* Button  */
.btn-wrap {display:block; position:relative; width:100%; margin-top: 30px; text-align:center;}
.btn-wrap:after {content:''; display:block; clear:both;}

.btn {display: inline-block; transition: 0.4s;}
.btn-large {position:relative; min-width:115px; height:50px; line-height: 47px; margin:0; font-size:1.125rem; border:none; box-sizing:border-box; text-align:center}
.btn_wrap .btn-large + .btn-large {margin-left:20px;}
a.white, button.white{background-color:#fff; color:#0d0d0d; border:solid #4d4d4d 1px;}
a.white:hover, button.white:hover {background-color: #f1f1f1;}

.m-btn {display: none;} /*모바일에서만 보이는 버튼*/

@media screen and (max-width:768px) {
	.btn {width: 100%;}
    .m-btn {display: block;}
}