body {font-family: 'Noto Sans KR', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
section,footer {padding-bottom: 34px;font-family: 'Noto Sans KR', sans-serif; font-weight: 300;}
html { font-size: 62.5%; }
body .slick-slider{ margin: 0; }
img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.bg { background-repeat: no-repeat !important; background-size: cover !important; background-position: center !important; }
a{ color: inherit; font-weight: inherit; cursor:pointer;}
a:hover { color: inherit; text-decoration: none; }
a:focus { outline: none; cursor: pointer; }
input:focus, div:focus {outline: none;}
[class*='col']{padding-right: 0; padding-left: 0;}
.container-custom {width: 1200px; margin: 0 auto;}
.pc-container {width: 1200px;}
.m-container {width: 100%;}

.text-left { text-align: left !important; /* main card slider에서 텍스트 좌측 정렬 때문에 추가 */}
.text-right { text-align: right; }
.text-center { text-align: center; }
body.disable_scroll { overflow: hidden;}

.txt-0 {font-size: 35px;}
.txt-1 {font-size: 30px;}
.txt-2 {font-size: 25px;}
.txt-3 {font-size: 20px;}
.txt-4 {font-size: 18px;}
.txt-5 {font-size: 16px;}
.txt-6 {font-size: 15px;}
.txt-7 {font-size: 14px;}
.txt-8 {font-size: 13px;}
.txt-9 {font-size: 12px;}
.txt-10 {font-size: 11px;}
.txt-11 {font-size: 19px;}
.txt-12 {font-size: 23px;}

@media (max-width: 768px){
	.txt-0 {font-size: 22px;}
	.txt-1 {font-size: 20px;}
	.txt-2 {font-size: 18px;}
	.txt-3 {font-size: 16px;}
	.txt-4 {font-size: 15px;}
	.txt-5 {font-size: 14px;}
	.txt-6 {font-size: 13px;}
	.txt-7 {font-size: 12px;}
	.txt-8 {font-size: 11px;}
	.txt-9 {font-size: 10px;}
    .txt-32 { font-size: 32px; }

	section {padding-bottom: 0;font-style: 'Noto Sans KR', sans-serif; font-weight: 300;}
}


.fw-100 {font-weight: 100;}
.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}
.fw-900 {font-weight: 900;}
.gap-3{ width: 100%; height: 3px; background-color: transparent; border: 0; }
.w-10{width: 10%;}
.w-100{width: 100%;}

.orange-color {color: #e85719}
.point-txt-color { color: #df4b29;}
.white-txt-color { color :#fff;}
.black-txt-color { color: #313131;}
.real-black-txt-color { color: #000000 !important;}
.gray-txt-color {color: #777777; }
.red-txt-color { color: #ab0913; }
.txt-999-color { color: #999999 }
.gong-txt-color { color: #222222; }
.gam-txt-color { color: #77787b; }

.point-bg-color { background-color: #df4b29; }
.gray-bg-color{background-color: #f4f4f4;}
.black-bg-color {background-color: #000000; }
.semi-black-bg-color {background-color: #313131; }
.white-bg-color {background-color: #fff; }


.ls-0-5{letter-spacing: -0.5px;}
.ls-0-75{letter-spacing: -0.75px;}
.ls-1{ letter-spacing:  -1px;}
.ls-1-5{letter-spacing: -1.5px;}
.ls-2 {letter-spacing: -2px;}
.ls-2-5 {letter-spacing: -2.5px;}
.ls-3 {letter-spacing:  -3px;}
.ls-3-5 {letter-spacing: -3.5px;}
.ls-4 {letter-spacing: -4px;}
.ls-4-5 {letter-spacing: -4.5px;}

.lh-1-2{line-height: 1.2;}
.lh-1-3{line-height: 1.3;}
.lh-1{line-height: 1;}
.lh-1-4{line-height: 1.4;}
.lh-1-5{line-height: 1.5;}
.lh-1-6{line-height: 1.6;}
.lh-1-6-5{line-height: 1.65;}
.lh-1-7{line-height: 1.7;}
.lh-1-9{line-height: 1.9;}
.lh-2-45{line-height: 2.45;}
.mr-50{margin-right: 50px;}

hr { margin: 0; padding: 0; border: 0; border-bottom: 1px solid #ccc; width: 100%; height: 1px; }

ul,li { list-style: none; margin: 0; padding: 0;}

/* 엘립시스 */
[class*="ellipsis"] {
    position: relative;
	display: -webkit-box;
	width: 100%;
	overflow: hidden;
	box-sizing: content-box;

	text-overflow: ellipsis;
	word-wrap:break-word;
	line-height: 1.5em !important;

	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;

}
.ellipsis_1{ height: 1.5em !important; -webkit-line-clamp: 1;}
.ellipsis_2{ height: 3em !important; -webkit-line-clamp: 2;}
.ellipsis_3{ height: 4.5em !important; -webkit-line-clamp: 3;}

.ellipsis_1_cut { height: 1.5em !important; -webkit-line-clamp: inherit;}
.ellipsis_2_cut { height: 3em !important; -webkit-line-clamp: inherit;}
.ellipsis_3_cut { height: 4.5em !important; -webkit-line-clamp: inherit;}
.ellipsis_4_cut { height: 6em !important; -webkit-line-clamp: inherit;}

.ellipsis_1_cut_max { max-height: 1.5em !important; -webkit-line-clamp: inherit;}
.ellipsis_2_cut_max { max-height: 3em !important; -webkit-line-clamp: inherit;}
.ellipsis_3_cut_max { max-height: 4.5em !important; -webkit-line-clamp: inherit;}

/* 비율박스 */
.ratio-box{
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.ratio-box:before{
	content: "";
	display: block;
	padding-top: 100%;
}

.ratio-box > .ratio-content{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.middle-box{
	display: flex;
	width: 100%;
	height: 100%;

	justify-content: center;
	align-items: center;
	text-align: center;
}

.bottom-box{
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: flex-start;
	align-items: flex-end;
	text-align: center;
}

/* 비율박스 레이어 */
.ratio-box .layer{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;

	background-color: rgba(0,0,0,0.5);

	color: #FFFFFF;

	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease-in-out;
}

.ratio-box:hover .layer{
	opacity: 1;
}

.ratio-box .slide-layer{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 1;

	background-color: rgba(0,0,0,0.5);

	-webkit-transform: translateY(calc(100% - 109px));
	-ms-transform: translateY(calc(100% - 109px));
	transform: translateY(calc(100% - 109px));

	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease-in-out;
}

.ratio-box:hover .slide-layer{
	opacity: 1;

	-webkit-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
}

.ratio-box .layer.circle{
	border-radius: 100%;
}

/* 비율박스 비율 **/
/* 뒤의수 나누기 앞의 수 * 100 */
.ratio-box.ratio3_1:before{
	padding-top: 33.33%;
}
.ratio-box.ratio2_1:before{
	padding-top: 50%;
}
.ratio-box.ratio16_9:before{
	padding-top: 56.25%;
}
.ratio-box.ratio8_5:before{
	padding-top: 62.5%;
}
.ratio-box.ratio4_3:before{
	padding-top: 75%;
}
.ratio-box.ratio1_1:before{
	padding-top: 100%;
}
.ratio-box.ratio5_6:before{
	padding-top: 120%;
}
.ratio-box.ratio3_4:before{
	padding-top: 133.33%;
}
.ratio-box.ratio2_3:before{
	padding-top: 150%;
}
.ratio-box.ratio9_16:before{
	padding-top: 177.77%;
}
.ratio-box.ratio1_2:before{
	padding-top: 200%;
}

/*****#####===== Row 설정 =====#####*****/
.row-0{margin-left: 0px;margin-right: 0px;}
.row-0 > [class*='col']{padding-left: 0px;padding-right: 0px;}
.row-1{margin-left: -1px;margin-right: -1px;}
.row-1 > [class*='col']{padding-left: 1px;padding-right: 1px;}
.row-2{margin-left: -2px;margin-right: -2px;}
.row-2 > [class*='col']{padding-left: 2px;padding-right: 2px;}
.row-3{margin-left: -3px;margin-right: -3px;}
.row-3 > [class*='col']{padding-left: 3px;padding-right: 3px;}
.row-4{margin-left: -4px;margin-right: -4px;}
.row-4 > [class*='col']{padding-left: 4px;padding-right: 4px;}
.row-5{margin-left: -5px;margin-right: -5px;}
.row-5 > [class*='col']{padding-left: 5px;padding-right: 5px;}
.row-10{margin-left: -10px;margin-right: -10px;}
.row-10 > [class*='col']{padding-left: 10px;padding-right: 10px;}
.row-14{margin-left: -14px;margin-right: -14px;}
.row-14 > [class*='col']{padding-left: 14px;padding-right: 14px;}
.row-15{margin-left: -15px;margin-right: -15px;}
.row-15 > [class*='col']{padding-left: 15px;padding-right: 15px;}
.row-20{margin-left: -20px;margin-right: -20px;}
.row-20 > [class*='col']{padding-left: 20px;padding-right: 20px;}


.vertical-bar {	position:relative; margin-right: 5px; padding-right: 7px; display: flex; align-items: center;}
.vertical-bar:before{
	content: "";
	position:absolute;

	top: 55%;
	right: 0;
	width: 1px;
	height: 100%;

	background-color: #999;

	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

button {
	padding: 0;
	background-color: transparent;
	border: none;
	outline: none;
}
button:focus {
	outline: none;
}

article table { margin: 0 auto; }
article { margin-bottom: 30px !important; min-height: 750px; }
article,
    article p {
        font-weight: 400 !important;
        line-height: 2.25rem !important;
    /*
        letter-spacing: -0.05rem !important;
     */
        letter-spacing: 0.05rem !important;
        color: #000000 !important;
        word-break: normal !important;
        word-wrap: break-word !important;
        font-size: 1.5rem !important;
        text-rendering: optimizeLegibility !important;
        font-family: -apple-systrem, BlinkMacSystremFont, 'Malgun Gothic', '돋움', 'dotum', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !important;
        margin-bottom: 16px;
    }

    article figure.media iframe {
        max-width: 100%;
        width: 100%;
        display: block;
    }

    article i {
        font-style: italic !important;
    }

    article .header .title {
        letter-spacing: -0.08rem;
        margin-bottom: .5rem;
        font-size: 2rem;
        line-height: 1.25rem;
        font-family: -apple-systrem, BlinkMacSystremFont, 'Malgun Gothic', '돋움', 'dotum', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    }


    article .header .date-wrap {
        font-size: 13px !important;
    }

    article b,
    article strong {
        font-weight: bold !important;
    }

    article h1 {
        font-size: 3rem !important;
        font-weight: 700;
        margin-bottom: 16px;
    }

    article h2 {
        font-size: 2.8rem !important;
        font-weight: 700;
        margin-bottom: 16px;
    }

    article h3 {
        font-size: 2.4rem;
        font-weight: 700;
        margin-bottom: 16px;
    }

    article h4 {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 16px;
    }

    article h5 {
        font-size: 20rem;
        font-weight: 700;
        margin-bottom: 16px;
    }

    article h6 {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 16px;
    }

    article figure {
        margin: 16px 0;
    }

    article .image-style-side,
    article .image-style-align-left,
    article .image-style-align-center,
    article .image-style-align-right { max-width: 50% }

    article .image-style-side {float: right; margin-left: 1em; }
    article .image-style-align-left { float: left; margin-right: 1em; }
    article .image-style-align-center { margin-left: auto; margin-right: auto; }
    article .image-style-align-right { float: right; margin-left: 1em; }

    article figcaption {
        font-size: 1.4rem !important;
        text-align: center;
        color: #777777;
    }

    article div {
        /*
        margin: 10px 0 10px 0;
        by js 200218
         */
    }


@media (max-width: 768px) {
    article { margin-bottom: 0 !important; min-height: auto; }

    .vertical-bar {	position:relative; margin-right: 3px; padding-right: 5px;}
	.vertical-bar:before{
		content: "";
		position:absolute;

		top: 55%;
		right: 0;
		width: 1px;
		height: 80%;

		background-color: #999;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

    article,
    article p {
        font-size: 1.5rem !important;
        /*17px*/
        line-height: 1.6 !important;
        font-weight: 400;
        margin-bottom: 8px;
        letter-spacing: -0.8px !important;
    }
    article .header .title {
        letter-spacing: -0.08rem;
        margin-bottom: .5rem;
        font-size: 1.8rem !important;
        line-height: 1.25rem;
        font-family: -apple-systrem, BlinkMacSystremFont, 'Malgun Gothic', '돋움', 'dotum', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    }
    article .header .date-wrap {
        font-size: 1.2rem !important;
    }
    article h1 {
        font-size: 2rem !important;
        /*20px*/
        font-weight: 700;
        margin-bottom: 8px;
    }
    article h2 {
        font-size: 1.8rem !important;
        /*18px*/
        font-weight: 700;
        margin-bottom: 8px;
    }
    article h3 {
        font-size: 1.7rem !important;
        /*17px*/
        font-weight: 700;
        margin-bottom: 8px;
    }
    article h4 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 8px;
    }
    article h5 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 8px;
    }
    article h6 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 8px;
    }
    article figure {
        margin: 8px 0;
    }
    article figcaption {
        text-align: center;
    }
    article div {
        position: relative;
        margin: 5px 0 5px 0;
    }
}


.bardot .slick-dots {
	bottom: 20px;
}

.bardot .slick-dots button:before {
	content: none;
}

.bardot .slick-dots li {
	font-size: 0;
	line-height: 0;
	display: inline-block;
	width: 50px;
	height: 4px;
	margin: 0 2.5px;
	cursor: pointer;
	border: 0;
	outline: none;
	background: #fff;
}

.bardot .slick-dots li.slick-active button{
	background-color: #df4b29;
}

.bardot .slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	padding: 0;
	width: 0%;
	height: 100%;
	margin: 0;
	padding: 0;
	cursor: pointer;
	outline: none;
	background: #fff;

}

.bardot .slick-dots li.slick-active button{
	width: 100%;
	transition: all 2s ease-in-out;

}

.floating {
	position: absolute;
	top: 0;

	z-index: 101;
}

.floating.left {
	left: 50%;

	-webkit-transform: translateX(-780px);
	-ms-transform: translateX(-780px);
	transform: translateX(-780px);
}

.floating.right {
	right: 50%;

	-webkit-transform: translateX(780px);
	-ms-transform: translateX(780px);
	transform: translateX(780px);
}

.ad-box.borderddd {
    border:1px solid #ddd;
}

.ad-box.ad-in-content {
}
.ad-box.ad-in-content.ad-in-right {
    /*
    margin-left: 10px;
    by js 200218
     */
    margin: 0 0 0 10px !important;
    float: right;
    clear: both;
}

.ad-box.ad-box-center {
    text-align: center;
}

/*****#####===== padding-top 설정 =====#####*****/
.pt10 {
	padding-top: 10px !important;
}
.pt15 {
    padding-top: 15px !important;
}
.pt20 {
    padding-top: 20px !important;
}
.pt25 {
    padding-top: 25px !important;
}
.pt30 {
    padding-top: 30px !important;
}
.pt35 {
    padding-top: 35px !important;
}
.pt45 {
    padding-top: 45px !important;
}

/*****#####===== padding-bottom 설정 =====#####*****/
.pb0 {
    padding-bottom: 0px !important;
}
.pb10 {
	padding-bottom: 10px !important;
}
.pb15 {
    padding-bottom: 15px !important;
}
.pb20 {
    padding-bottom: 20px !important;
}
.pb25 {
    padding-bottom: 25px !important;
}
.pb30 {
    padding-bottom: 30px !important;
}
.pb35 {
    padding-bottom: 35px !important;
}

/*****#####===== padding-left 설정 =====#####*****/
.pl05 {
    padding-left: 5px !important;
}
.pl10 {
    padding-left: 10px !important;
}
.pl15 {
    padding-left: 15px !important;
}
.pl20 {
    padding-left: 20px !important;
}
.pl55 {
	padding-left: 55px !important;
}
.pl85 {
    padding-left: 85px !important;
}
.pl95 {
    padding-left: 95px !important;
}

/*****#####===== padding-right 설정 =====#####*****/
.pr05 {
    padding-right: 5px !important;
}
.pr10 {
    padding-right: 10px !important;
}
.pr15 {
    padding-right: 15px !important;
}
.pr20 {
    padding-right: 20px !important;
}


/*****#####===== margin-top 설정 =====#####*****/
.mt3 {
	margin-top: 3px !important;
}
.mt5 {
    margin-top: 5px !important;
}
.mt10 {
	margin-top: 10px !important;
}
.mt15 {
    margin-top: 15px !important;
}
.mt20 {
    margin-top: 20px !important;
}
.mt25 {
    margin-top: 25px !important;
}
.mt30 {
    margin-top: 30px !important;
}
.mt35 {
    margin-top: 35px !important;
}
.mt40 {
	margin-top: 40px !important;
}

/*****#####===== margin-bottom 설정 =====#####*****/
.mb5 {
	margin-bottom: 5px !important;
}
.mb10 {
    margin-bottom: 10px !important;
}
.mb15 {
    margin-bottom: 15px !important;
}
.mb20 {
    margin-bottom: 20px !important;
}
.mb25 {
    margin-bottom: 25px !important;
}
.mb30 {
    margin-bottom: 30px !important;
}
.mb35 {
    margin-bottom: 35px !important;
}
.mb40 {
	margin-bottom: 40px !important;
}
.mb80 {
	margin-bottom: 80px !important;
}

/*****#####===== margin-left 설정 =====#####*****/
.ml05 {
    margin-left: 5px !important;
}
.ml10 {
    margin-left: 10px !important;
}
.ml15 {
    margin-left: 15px !important;
}
.ml20 {
    margin-left: 20px !important;
}

/*****#####===== margin-right 설정 =====#####*****/
.mr05 {
    margin-right: 5px !important;
}
.mr10 {
    margin-right: 10px !important;
}
.mr15 {
    margin-right: 15px !important;
}
.mr20 {
    margin-right: 20px !important;
}

/*****#####===== position 설정 =====#####*****/

.position-relative {
    position: relative !important;
}
.position-absolute {
    position: absolute !important;
}

.section-image-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.section-image { position: absolute; width: 95px; height: 33px; bottom: 0; left: 10px; }