@charset "utf-8";

/*---------- button 시작 ---------*/
.btn_area {display: block; vertical-align: top}
.btn_area .btn {display: inline-block; line-height: 56px; box-sizing: border-box;}
.btn_area .btn:last-child {margin-right: 0;}

.button {display: inline-block; color: #444; background: transparent; box-sizing: border-box; text-align: center; letter-spacing: -.4px; padding: 0 10px;}

.button.s {height: 40px; line-height: 38px;}
.button.m {height: 50px; line-height: 48px;}
.button.l {height: 60px; line-height: 58px;}
.button.xl {height: 95px; line-height: 93px;}

.button.full {width: 100%;}
.button.w60 {width: 60px;}
.button.w90 {width: 90px;}
.button.w120 {width: 120px;}
.button.w150 {width: 150px;}
.button.w170 {width: 170px;}

.button.basic {background: #fff; border: 1px solid #c3c4c3; color: #000;}
.button.accent {background: #fff; border: 1px solid #000; color: #000;}
.button.red {background: #dd042b; border: 1px solid #dd042b; color: #fff;}
.button.gray {background: #939393; color: #fff; border: 1px solid #939393;}
.button.gray1 {background: #cecece; color: #000; border: 1px solid #cecece;}
.button.org {background: #ff760b; color: #fff; border: 1px solid #ff760b;}
.button.off {color: #aaa; background: #d0d0d0; border: 1px solid #d0d0d0;}

.l5 {margin-left: 5px;}
.l10 {margin-left: 10px;}
.l20 {margin-left: 20px;}

/*---------- button 끝 ---------*/

/* icon */
.icon {display: inline-block; text-indent: -9999px; background-repeat: no-repeat; background-position: center center; background-size: cover}
.icon.r5 {margin-right: 5px;}
.icon.r10 {margin-right: 10px;}

.clearFix:after {display: block; content: ''; clear: both;}
.clear {clear: both;}


.ic_toR_w {width: 20px; height: 20px; background: url(../images/ic_toR_w.png) center center no-repeat;}
.ic_toR_g {width: 20px; height: 20px; background: url(../images/ic_toR_g.png) center center no-repeat;}
.ic_toR_b {width: 20px; height: 20px; background: url(../images/ic_toR_b.png) center center no-repeat;}

.taC{text-align: center !important;}
.taL {text-align: left !important;}
.taR {text-align: right !important;}

.f_roboto {font-family: 'Roboto', 'Noto Sans KR', sans-serif;}


/* Grid */

.right { float: right !important; }
.left { float: left; }

.row { position: relative; display: block;}
.row:after { content: ""; display: block; clear: both; }
.row7 {margin-left: -7px; margin-right: -7px;}
.row10 {margin-left: -10px; margin-right: -10px;}
.row15 {margin-left: -15px; margin-right: -15px;}
.row20 {margin-left: -20px; margin-right: -20px;}
.row30 {margin-left: -30px; margin-right: -30px;}

.col { float: left; width: 100%; display: block; box-sizing: border-box; position: relative; }
.col7 {padding: 0 7px;}
.col10 {padding: 0 10px;}
.col15 {padding: 0 15px;}
.col20 {padding: 0 20px;}
.col30 {padding: 0 30px;}

.col.half { width: 50%;}
.col.triple { width: 33.33%;}
.col.quad { width: 25%;}
.col.triple.x2 { width: 66.66%; }
.col.quad.x3 { width: 75%; }

.img_sec {height: 700px; background-position: center center;}

.disc_list>li {padding-left: 15px; position: relative;}
.disc_list>li:before {display: block; content: ''; width: 4px; height: 4px; background: #777; position: absolute; left: 0; top: 11px; border-radius: 3px;}


.parallax {
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
}

.counter {font-size: 1.1em;}


@media all and (max-width: 1280px) {
	.setWidth {max-width: 1040px}
}
@media all and (max-width: 1080px) {
	.setWidth {max-width: 980px}
}
@media all and (max-width: 1024px) {
	.row30 {margin-left: -20px; margin-right: -20px;}
	.col30 {padding: 0 20px;}
	.img_sec {height: 400px; background-size: cover}
}
@media all and (max-width: 980px) {
}
@media all and (max-width: 834px) {
}
@media all and (max-width: 768px) {
	.disc_list>li:before {top: 8px;}
	
	.col.half, .col.triple.x2, .col.quad.x3 { width: 100%;}
	.col.triple, .col.quad { width: 50%;}
}
@media all and (max-width: 640px) {
}
@media all and (max-width: 500px) {
}
@media all and (max-width: 420px) {
}

@media all and (max-width: 340px) {
}