@charset "utf-8";
/* Common */
body, html {}
input, textarea, select, button {font-family: 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 'dotum', 'Open Sans'; color: #444; letter-spacing: -.4px; word-break: keep-all}
body {font-family: 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 'dotum', 'Open Sans'; color: #444; letter-spacing: -.4px; word-break: keep-all}
.wrap {width: 100%; position: relative; margin: 0 auto; overflow-x: hidden}

.clear { clear: both; }
.clearFix:after, .setWidth:after { content: ""; display: block; clear: both;  }

.pcView {  }
.mobileView { display: none !important; }
.noWrap { white-space: nowrap; }


/* Layout */
#login #header, .noMv #header {position: relative; background: #fff; border-bottom: 1px solid #e1e1e1;}
#login #header .main_menu a, .noMv #header .main_menu a {color: #111;}
#login #header .logo_area a span, .noMv #header .logo_area a span {background-image: url(/layouts/utosoft/images/logo_gray.png);}


.setWidth {width: 1200px; margin: auto;}
 
/* Header */

#header {position: fixed; left:0; top: 0; right: 0; padding: 30px 0; transition: .6s; z-index: 30;}
#header .logo_area {float: left;}
#header .logo_area a{display: block;}
#header .logo_area a span {display: block; width: 134px; height: 20px; background-image: url(/layouts/utosoft/images/logo.png); text-indent: -9999px;}
#header .main_menu {float: right; margin-right: -30px;}
#header .main_menu li {float: left; padding: 0 30px;}
#header .main_menu a {display: block; color: #fff; line-height: 20px;}
#header .main_menu li.current a {font-weight: 700;}

#header.fix {background: #fff; border-bottom: 1px solid #e1e1e1;}
#header.fix .main_menu a {color: #111;}
#header.fix .logo_area a span {background-image: url(/layouts/utosoft/images/logo_gray.png);}



#content {box-sizing: border-box;}

/* Footer */
#footer {border-top: 1px solid #d5d5d5; position: relative; z-index: 20;}
#footer>div {padding: 25px 0;}
#footer .foot_info {margin-bottom: 5px;}
#footer .foot_info li, #footer p {font-size: 14px; color: #a0a0a0;}
#footer .foot_info li a {color: #a0a0a0;}
#footer .foot_info li {float: left; margin-right: 30px;}
#footer .foot_info li strong {display: inline-block; margin-right: 10px;}

/* FHD 초과시 처리 */
@media all and (min-width: 1940px) {	 
}

@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) {
	.setWidth {max-width: 100%; padding: 0 40px; box-sizing: border-box} 
	#footer>div {padding: 20px 40px;}
 
}
@media all and (max-width: 980px) {
	

}

@media all and (max-width: 768px) {
	
	body {font-size: 14px;}
}

@media all and (max-width: 500px) {
	
	.setWidth {padding: 0 20px;}
	#footer>div {padding: 20px;}
	
	#header {padding: 20px 0 10px;}
	#header .logo_area a {padding: 3px 0;}
	#header .logo_area a span {background-size: auto 15px; background-repeat: no-repeat; width: 102px; height: 15px;}
	#header .main_menu li {padding: 0;}
	#header .main_menu a {padding: 10px;}
	#header .main_menu {margin-top: -10px; margin-right: -10px;}
	
	#footer .foot_info li, #footer p {font-size: 10px;}
}

@media all and (max-width: 320px) {
	
}

@charset "utf-8";

.pv_area {height: 100vh; background-size: cover; background-position: center center; position: relative; overflow: hidden}
.pv_area .txt {position: absolute; width: 100%; top: 50%; transform: translateY(-50%); color: #fff; text-align: center;}
.pv_area h1 {font-size: 70px; font-weight: 700;}
.pv_area .txt p {font-size: 32px; margin-top: 10px; letter-spacing: -1px}
#main .pv_area {background-image: url(/contents/img/main_pv.jpg);}
#culture .pv_area {background-image: url(/contents/img/culture_pv_bg.jpg)}
#service .pv_area {background-image: url(/contents/img/service_pv_bg.jpg)}


.sec {min-height: 800px; box-sizing: border-box; overflow: hidden}
.sec .sec_title {margin-bottom: 60px;}
.sec .sec_title .unber_line {display: inline-block; color: #111; border-bottom: 2px solid #626262; font-weight: 500; margin-bottom: 10px; font-family: 'Roboto', 'Noto Sans KR', sans-serif;}
.sec .sec_title h1{font-size: 45px; font-weight: 300; word-break: keep-all; color: #111;}
.sec p {font-size: 22px; color: #666;}
.sec.wc, .sec.wc .sec_title h1, .sec.wc p {color: #fff }
.sec.wc .sec_title .unber_line{color: #fff; border-bottom-color: #fff;}
.sec.bgc {background-color: #fffcf7;}
#main .sec1 {padding: 234px 0;}
#main .sec1 .overview {display: table; width: 100%; margin-top: 80px; padding: 0 100px; box-sizing: border-box}
#main .sec1 .overview .item {display: table-cell; width: 33.33%; position: relative; border-left: 1px solid #d5d5d5; padding: 15px 0;}
#main .sec1 .overview .item:first-child{border-left: 0 none;}
#main .sec1 .overview .counter_area {font-size: 50px; color: #111; font-weight: 900; line-height: 1;}
/*
#main .sec1 .overview .counter_area .plus {display: block; width: 24px; height: 24px; position: absolute; right: 0; top: 50%; margin-top: -12px;}
#main .sec1 .overview .counter_area .plus:before, #main .sec1 .overview .counter_area .plus:after {display: block; content: '';}
*/
#main .sec1 .overview .item .title {font-size: 22px; margin-bottom: 15px; color: #444; margin-top: 0;}
#main .sec1 .overview .item p {font-size: 18px; color: #888; margin-top: 10px;}

#main .sec2 {background-image: url(/contents/img/img_intro_2.png); padding: 290px 0;}

#main .sec3 {padding: 120px 0;}
.history_area {position: relative;} 
.history_area:before {display: block; content: ''; width: 2px; top: 10px; bottom: -40px; background: #d1d1d1; left: 101px; position: absolute;}
.history_area li {margin-bottom: 65px;}
.history_area li:after {display: block; content: ''; clear: both;}
.history_area li:last-child {margin-bottom: 0;}
.history_area li .year, .history_area dt, .history_area dd {float: left;}
.history_area dl {float: right;}
.history_area .year, .history_area month {font-family: 'Roboto', 'Noto Sans KR', sans-serif;}

.history_area li .year {width: 135px; font-size: 28px; color: #111; position: relative;}
.history_area li .year:before {display: block; content: ''; width: 6px; height: 6px; background: #fff; border: 6px solid #111; position: absolute; right: 24px; top: 8px; border-radius: 50%;}
.history_area dl {width: 100%; padding-right: 135px; margin-right: -135px; box-sizing: border-box}
.history_area dt, .history_area dd {font-size: 20px;}
.history_area dt {width: 40px; color: #111; font-weight: 500;}
.history_area dd {width: 100%; padding-right: 40px; margin-right: -40px; box-sizing: border-box; color: #666;}

#main .sec4 {padding: 140px 0; background-image: url(/contents/img/img_intro_3.png); height: 900px;}
#main .sec4 .infoG_area {display: inline-block; margin-bottom: 80px; position: relative;}
#main .sec4 .infoG_area:before {display: block; content: '';position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #fff; opacity: .3; z-index: 1; border-radius: 320px;}
#main .sec4 .infoG_area .item {display: table; float: left; padding: 20px; position: relative; z-index: 2;}
#main .sec4 .infoG_area .item:before, #main .sec4 .infoG_area .item:after {display: block; content: ''; position: absolute; left: 50%;}
#main .sec4 .infoG_area .item:before {width: 14px; height: 14px; border-radius: 7px; background: #fff; bottom: 14px; margin-left: -7px;}
#main .sec4 .infoG_area .item:after {width: 2px; height: 60px; margin-left: -1px; top: 100%; margin-top: -22px; background: url(/contents/img/dot_line.png) 0 0 repeat-y;}
#main .sec4 .infoG_area .item .main {display: table-cell; width: 280px; height: 280px; vertical-align: middle; font-size: 26px; font-weight: 500; border: 2px solid #fff; box-sizing: border-box; border-radius: 50%; line-height: 1.3;}
#main .sec4 .infoG_area .item .sub {position: absolute; top: 100%; left: 50%; width: 300px; margin-left: -150px; margin-top: 60px; font-size: 22px; opacity: .7; font-weight: 300; line-height: 1.3;}

#main .sec5 {padding: 120px 0;}
.map_area {margin-bottom: 30px;}
.location_info {display: inline-block;}
.location_info li{float: left; margin-right: 30px; color: #666;}
.location_info li a {color: #666;}
.location_info li:last-child {margin-right: 0;}
.location_info li strong {display: inline-block; margin-right: 10px; color: #111;}

#service .sec {min-height: 0; position: relative;}
#service .sec3 {z-index: 10;}

#service .part {display: table; width: 100%; position: relative;}
#service .part_content {display: table-cell; width: 50%; vertical-align: middle;}
#service .part_content p {color: #555;}
#service .part .big {font-size: 34px; margin-bottom: 20px; position: relative; z-index: 1;}
#service .part .comesoon {font-size: 22px; padding-right: 25px; position: relative; color: #444; font-weight: 500;}
#service .part .comesoon:before {display: block; content: ''; width: 15px; height: 2px; position: absolute; right: 0; top: 50%; margin-top: -1px; background: #444;}

#service .part_title {font-size: 26px; margin-bottom: 60px;}
#service .part_title .unber_line {border-bottom: 2px solid #000; color: #111;}
#service .part1 {padding: 150px 0;}
#service .part1:before, #service .part1_1:before, #service .part2:before, #service .part3:before {display: block; content: ''; position: absolute; left: 50%; top: 50%; background-repeat: no-repeat; z-index: 0;}
#service .part1:before {width: 1143px; height: 908px; background-image: url(/contents/img/img_service_1_620.png); margin-left: -40px; margin-top: -340px;}

#service .part1_1 {padding: 150px 0;}
#service .part1_1:before {width: 822px; height: 512px; background-image: url(./files/faceOff/135/images/img_service_3_612.png); background-size: 822px 512px; margin-left: -68%; margin-top: -190px; z-index: -1;}

#service .bi_area {margin-bottom: 30px;}
#service .bi {display: block; width: 124px; height: 62px; background: url(/contents/img/bi_610.png) 0 0 no-repeat; text-indent: -9999px;}
#service .bi_tarot {display: block; width: 190px; height: 62px; background: url(./files/faceOff/135/images/bi-black.png) 0 0 no-repeat; background-size: 190px 62px; text-indent: -9999px;}
#service .btn_area {margin:  30px 0;}
#service .link {display: inline-block; color: #111; font-weight: 700; font-size: 20px; margin-right: 40px; position: relative; vertical-align: top; box-sizing:border-box}
#service .link.blk {color: #fff; background: #222; padding: 15px 20px; margin-top: -15px; overflow: hidden} 
#service .link.red {color: #fff; background: #c10708; padding: 13px 20px; height:60px; margin-top: -15px; overflow: hidden} 
#service .link.applink {padding: 16px 20px;}
#service .link:last-child {margin-right: 0;}
#service .link .icon {vertical-align: -3px;}
#service .link.blk:before {display: block; content: ''; position: absolute; width: 100%; top: 0; left: -100%; height: 100%; transition: ease-out .3s;
background: rgb(34,34,34); /* Old browsers */
background: -moz-linear-gradient(left, rgba(61,61,61,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(61,61,61,1) 0%, rgba(34,34,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(61,61,61,1) 0%, rgba(34,34,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#3d3d3d',GradientType=1 ); /* IE6-9 */
}
.hover #service .link.blk:hover:before {left: 0;}
#service .link.blk span {position: relative;}

#service dl {display: table;}
#service dl.first {border-bottom: 1px solid #cdcdcd; margin-top: 20px;}
#service dt, #service dd {display: table-cell; vertical-align: middle; padding: 20px 0;}
#service dt {width: 125px;}
#service dd {color: #777777;}
#service dd .star {padding-right: 12px; width: 34px; height: 34px; vertical-align: 0;}
#service dd strong{font-size: 44px; color: #000;}
#service dd small {display: inline-block; vertical-align: 10px; font-size: 18px; margin-left: 20px;}
#service dd .star_text {margin-left: 27px; vertical-align: initial;}

.slick-slide img {width: 100%;}
@-webkit-keyframes moveDown {
	0% {transform: translateY(0)}
	50% {transform: translateY(15px)}
	51% {transform: translateY(15px)}
	100% {transform: translateY(0)}
}
@-o-keyframes moveDown {
	0% {transform: translateY(0)}
	50% {transform: translateY(15px)}
	51% {transform: translateY(15px)}
	100% {transform: translateY(0)}
}
@-moz-keyframes moveDown {
	0% {transform: translateY(0)}
	50% {transform: translateY(15px)}
	51% {transform: translateY(15px)}
	100% {transform: translateY(0)}
}
@keyframes moveDown {
	0% {transform: translateY(0)}
	50% {transform: translateY(15px)}
	51% {transform: translateY(15px)}
	100% {transform: translateY(0)}
}

@-webkit-keyframes moveUp {
	0% {transform: translateY(0)}
	50% {transform: translateY(-10px)}
	51% {transform: translateY(-10px)}
	100% {transform: translateY(0)}
}
@-o-keyframes moveUp {
	0% {transform: translateY(0)}
	50% {transform: translateY(-10px)}
	51% {transform: translateY(-10px)}
	100% {transform: translateY(0)}
}
@-moz-keyframes moveUp {
	0% {transform: translateY(0)}
	50% {transform: translateY(-10px)}
	51% {transform: translateY(-10px)}
	100% {transform: translateY(0)}
}
@keyframes moveUp {
	0% {transform: translateY(0)}
	50% {transform: translateY(-10px)}
	51% {transform: translateY(-10px)}
	100% {transform: translateY(0)}
}

#service .part2 {height: 580px;}
#service .part2:before {width: 271px; height: 727px; background-image: url(./files/faceOff/135/images/img_service_2_611.png); margin-left: 150px; margin-top: -200px;}
#service .part2 .person5 {width: 233px; height: 409px; background-image: url(./files/faceOff/135/images/img_service_2_boy.png); margin-top: 30px; position: absolute; left: 50%; top: 50%;  animation: ease-in-out moveUp 3s infinite}

#service .part3 {height:620px}
#service .part3:before {width: 823px; height: 513px; background-image: url(./files/faceOff/135/images/img_service_3_1.png); margin-left: -820px; margin-top: -80px;}
#service .part3 .person6 {width: 375px; height: 350px; background-image: url(./files/faceOff/135/images/img_service_3_girl.png); margin-left: -450px; margin-top: -190px; position: absolute; left: 50%; top: 50%;  animation: ease-in-out moveUp 3s infinite}
#service .part3 .person7 {width: 272px; height: 432px; background-image: url(./files/faceOff/135/images/img_service_3_boy.png); margin-left: -750px; margin-top: 0px; position: absolute; left: 50%; top: 50%;  animation: ease-in-out moveDown 3.2s infinite}


#culture .sec1 {padding: 90px 0;}
#culture .sec1 dd strong {font-size: 20px; color: #111; font-weight: 500;}
#culture .sec1 dd p{font-size: 20px; font-weight: 300;}
.culture_area {margin-top: 40px;}
.culture_area dl {display: table; width: 100%; border-bottom: 1px solid #e6e6e6;}
.culture_area dl:last-child {border: 0 none;}
.culture_area dt, .culture_area dd {display: table-cell; vertical-align: middle; height: 150px;}
.culture_area dt {width: 430px; box-sizing: border-box; padding-left: 110px; font-size: 36px; font-weight: 500; color: #111;}
.culture_area dt small {display: inline-block; font-size: 14px; vertical-align: 9px; margin-left: 5px;}
.culture_area dd {color: #666;}
.culture_area dd .icon {vertical-align: -5px;}
#culture .sec2 {padding: 120px 0; background: #f0f0f0;}
#culture .sec2 .item {background: #fff; height: ; padding: 40px 20px 20px; min-height: 400px; box-sizing: border-box}
#culture .sec2 .item .title {font-size: 34px; font-weight: 900; line-height: 80px; color: #000; margin-bottom: 50px; height: 90px; position: relative;}
#culture .sec2 .item3 .title br{display: block !important; }
#culture .sec2 .item .title:before {display: block; content: ''; width: 16px; height: 3px; background: #333; position: absolute; bottom: -25px; left: 0;}
#culture .sec2 .item3 .title {line-height: 1.3;}
#culture .sec2 .item p{font-size: 18px; line-height: 1.7;}
#culture .sec3 {padding: 80px 0;}
.benefit_area  {margin-top: 50px;}
.benefit_area .item {display: table; width: 100%;border-bottom: 1px solid #d2d2d2; height: 260px; padding-top: 40px; box-sizing: border-box}
.benefit_area .col:nth-child(n+7) .item {border: 0 none;}
.benefit_area .item dt, .benefit_area .item dd {display: table-cell; vertical-align: top;}
.benefit_area .item dt {font-size: 65px; color: #111; width: 65px; font-weight: 300; line-height: 1;}
.benefit_area .item dd {padding-top: 10px; box-sizing:border-box }
.benefit_area .item dd>span, .benefit_area .item dd>strong {display: block;}
.benefit_area .item dd>span {color: #666; margin-bottom: 20px;}
.benefit_area .item dd>strong {color: #111;}

.benefit_area .item.lunch {background: url(/contents/img/ic_lunch_610.png) right 120px no-repeat;}
.benefit_area .item.join {background: url(/contents/img/ic_join.png) right 120px no-repeat;}
.benefit_area .item.holiday {background: url(/contents/img/ic_holiday_610.png) right 120px no-repeat;}
.benefit_area .item.drink {background: url(/contents/img/ic_drink.png) right 120px no-repeat;}
.benefit_area .item.family {background: url(/contents/img/ic_family_610.png) right 120px no-repeat;}
.benefit_area .item.medical {background: url(/contents/img/ic_medical.png) right 120px no-repeat;}
.benefit_area .item.book {background: url(/contents/img/ic_book.png) right 120px no-repeat;}
.benefit_area .item.education {background: url(/contents/img/ic_education.png) right 120px no-repeat;}
.benefit_area .item.tool {background: url(/contents/img/ic_tool_610.png) right 120px no-repeat;}

#culture .sec4 {padding: 120px 0; min-height: 0}
#culture .sec4 .btn_area {text-align: center;}
#culture .sec4 .button {position: relative; box-shadow: 5px 5px 18px rgba(0,0,0,.24); width: 280px; color: #fff; font-size: 22px; line-height: 70px; height: 70px;  overflow: hidden; background: #222;}
#culture .sec4 .button:before {display: block; content: ''; position: absolute; width: 100%; left: -100%; height: 100%; transition: ease-out .3s;
background: rgb(34,34,34); /* Old browsers */
background: -moz-linear-gradient(left, rgba(61,61,61,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(61,61,61,1) 0%, rgba(34,34,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(61,61,61,1) 0%, rgba(34,34,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#3d3d3d',GradientType=1 ); /* IE6-9 */
}
.hover #culture .sec4 .button:hover:before {left: 0;}
#culture .sec4 .button span {position: relative;}

#culture .sec4 .button .icon {vertical-align: -2px; position: relative;}
.hover #culture .sec4 .button:hover .icon {animation: arrow .6s forwards;}
@-webkit-keyframes arrow {
	0% {left: 0px;}
	1% {left: 0px;}
	34% {left: 10px;}
	67% {left: 5px;}
	100% {left: 10px;}
}
@-o-keyframes arrow {
	0% {left: 0px;}
	1% {left: 0px;}
	34% {left: 10px;}
	67% {left: 5px;}
	100% {left: 10px;}
}
@-moz-keyframes arrow {
	0% {left: 0px;}
	1% {left: 0px;}
	34% {left: 10px;}
	67% {left: 5px;}
	100% {left: 10px;}
}
@keyframes arrow {
	0% {left: 0px;}
	1% {left: 0px;}
	34% {left: 10px;}
	67% {left: 5px;}
	100% {left: 10px;}
}
    
@media all and (max-width: 1450px) {
        #service .part3 .person7 {margin-left: -50%; margin-top: 30px;}

@media all and (max-width: 1280px) {
	
	#culture .sec2 .item p br{display: none;}
}
@media all and (max-width: 1080px) {
	#service .part_content.txt {width: 60%; position: relative; z-index: 1;}
	#service .part_content.nbsp {width: 40%;}
	#service .part1:before, #service .part1_1:before, #service .part2:before, #service .part3:before, #service .part2 .person5, #service .part3 .person6, #service .part3 .person7 {background-size: contain; background-repeat: no-repeat;}
	#service .part1:before {height: 700px; margin-top: -120px;}
        #service .part1_1:before {height: 500px; margin-top: 60px;}
	#service .part2 {}
	#service .part2:before {height: 670px; margin-top: -190px;}
	#service .part3 {height: 590px;}
	#service .part3:before {height: 460px; margin-top: -100px; margin-left: -650px;}
	#service .part3 .person6 {margin-left: -350px; margin-top: -280px;}
	#culture .sec2 .item .title {font-size: 30px;}
	#culture .sec2 .item {min-height: 420px}
}
@media all and (max-width: 1024px) {
	.sec {min-height: 500px; background-size: cover; background-position: center center;}
	#main .sec1 {padding: 120px 0;}
	#main .sec2 {padding: 160px 0;}
	#main .sec3, #main .sec5 {padding: 80px 0 ;}
	#main .sec4 {padding: 90px 0;}
	
	.pv_area {background-size: 250% auto}
	#main .pv_area {background-image: url(/contents/img/main_pv_m.jpg); background-size: 100% auto}
	.pv_area h1 {font-size: 60px;}
	.benefit_area .item dt {font-size: 50px;}
	.sec .sec_title h1 {font-size: 40px;}
	#service .part .big {font-size: 30px;}
	.history_area li .year, #main .sec4 .infoG_area .item .main {font-size: 22px;}
	.sec p, #main .sec4 .infoG_area .item .sub {font-size: 18px;}
	
	#main .sec1 .overview{padding: 0;}
	#main .sec1 .overview dt {padding-left: 40px;}
	#main .sec1 .overview dd {font-size: 50px;}
	
	.history_area {padding-left: 20px;}
	.history_area li {margin-bottom: 50px;}	.history_area dt, .history_area dd {font-size: 17px;}
	.history_area:before {left: 111px;}
	.history_area li .year:before {top: 5px; right: 34px;}
	#main .sec4 {height: auto; background-size: auto 100%}
	#main .sec4 .infoG_area {width: 100%;}
	#main .sec4 .infoG_area .item {width: 33.33%; box-sizing: border-box}
	#main .sec4 .infoG_area .item .main {width: 100%; height: 0; padding-bottom: 98.5%;}
	#main .sec4 .infoG_area .item .main span {display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)}
	#main .sec4 .infoG_area .item .sub {margin-top: 40px;}
	.culture_area dt {width: 380px; padding-left: 80px;}
	.benefit_area .item dt {width: 55px;}
	.benefit_area .item dd {padding-top: 0; : ;}
	
	#culture .sec2 .col {width: 50%; margin-bottom: 14px;}
	#culture .sec2 .item {min-height: 350px}
        #service .part1_1:before {margin-left: -72%; margin-top: 50px;}
}
@media all and (max-width: 1024px) and (max-height: 768px) {
	#main .pv_area {background-image: url(/contents/img/main_pv.jpg); background-size: cover}
	.pv_area {background-size: cover}
	
}
@media all and (max-width: 980px) {
	#service .part2:before {height: 620px; }
}
@media all and (max-width: 834px) {
	#main .sec1>div>p br{display: none;}
	#main .sec1 .overview .counter_area {font-size: 45px;}
	#main .sec1 .overview .item p, .history_area dt, .history_area dd {font-size: 16px;}
	.history_area:before {}
	#main .sec1 .overview .item .title {font-size: 20px;}
	
	#service .part_title {font-size: 22px; margin-bottom: 40px;}
	#service .part_content.txt {width: 80%; position: relative; z-index: 1;}
        #service .part_content.txt.tarot_txt {width: 73%;}
	#service .part_content.nbsp {width: 20%;}
	#service dt {width: 100px;}
	#service dd strong {font-size: 35px;}
	#service dd small {font-size: 14px; vertical-align: 7px;}
	#service .part2 .part_content.txt {width: 80%;}
	#service .part2 .part_content.txt br{display: none;}
        #service .part3 .part_content.txt {width: 70%;}
	
	#service .part1:before {height: 520px; margin-top: 20px;}
	#service .part2 {height: 500px;}
	#service .part2:before {height: 510px; margin-left: 0;}
	#service .part2 .person5 {height: 350px; margin-left: 140px; margin-top: 0;}
	#service .part3 {height: 550px;}
	#service .part3:before {height: 380px; margin-top: -60px; margin-left: -540px;}
	#service .part3 .person6 {height: 300px; margin-top: -230px;}
	#service .part3 .person7 {height: 390px;margin-left: -420px; margin-top: 30px;}
	
	.benefit_area .item dd>span br {display: none;}
}
@media all amd (min-width: 768px) and (max-width: 955px) {
        #service .btn_area .link.blk:first-child {margin-bottom: 30px;}
}
@media all and (min-width: 768px) and (max-width: 908px) {
        #service .link.blk:first-child {margin-bottom: 30px;}
}
@media all and (min-width: 768px) and (max-width: 834px) {
         #service .part2 .person5 {margin-left: 10px;}
}
@media all and (max-width: 812px) and (max-height: 450px) {
	#main .pv_area {background-image: url(/contents/img/main_pv.jpg); background-size: cover}
	.pv_area {background-size: cover}
}
@media all and (max-width: 768px) {
	.sec {min-height: 0}
	.sec .sec_title {margin-bottom: 40px;}
	
	#main .pv_area {background-image: url(/contents/img/main_pv_m.jpg); background-size: 100% auto}
	.pv_area h1 {font-size: 50px;}
	.pv_area .txt p {font-size: 25px;}
	.benefit_area .item dt {font-size: 42px;}
	.sec .sec_title h1, #main .sec1 .overview dd {font-size: 35px;}
	.culture_area dt {font-size: 30px;}
	#culture .sec2 .item .title {font-size: 25px;}
	.history_area li .year, #main .sec4 .infoG_area .item .main, #culture .sec4 .button, #main .sec1 .overview dt strong, #service .link {font-size: 20px;}
	#culture .sec1 dd strong, #culture .sec1 dd p{font-size: 18px;}
	.sec p, #main .sec4 .infoG_area .item .sub, .history_area dt, .history_area dd {font-size: 16px;}
	.culture_area dt small {font-size: 13px;}
	
	#main .sec1 .overview {display: block;}
	#main .sec1 .overview dt {padding-left: 30px;}
	#main .sec1 .overview .item {display: table; max-width: 450px; width: 100%; border-left: 0 none; border-top: 1px solid #dcdcdc; text-align: left; margin: auto;}
	#main .sec1 .overview .item:first-child {border: 0 none;}
	#main .sec1 .overview .counter_area, #main .sec1 .overview .item p {display: table-cell; vertical-align: middle;}
	#main .sec1 .overview .counter_area {width: 150px; font-size: 40px;}
	#main .sec1 .overview .item .title {width: 160px;}
	#main .sec1 .overview .item p {padding-top: 0;}
	
	#main .sec2 {padding: 140px 0;}
	
	.history_area {padding-left: 0; margin-top: 50px;}
	.history_area:before {left: 91px;}
	.history_area li .year:before {top: 4px;}
	
	.map_area iframe {height: 400px !important;}
	
	.culture_area dt, .culture_area dd {height: 120px;}
	.culture_area dt {width: 270px; padding-left: 20px;}
	
	.benefit_area .col:nth-child(n+7) .item {border-bottom: 1px solid #d2d2d2;}
	.benefit_area .col:last-child .item{border: 0 none;}
	
	#culture .sec4 {padding: 80px 0;}
	#culture .sec4 .button {line-height: 60px; height: 60px; box-shadow: none}
	
	
	#service .part_content.txt {width: auto !important; text-align: center;}
	#service .part_content.nbsp  {width: 1px;}
	
	#service .part2 .part_content{padding-left: 0;}
	#service .part2 .part_content.txt br{display: block;} 
	
	#service .bi {margin: auto;}
        #service .bi_tarot {margin: auto;}
	#service .part_content p {padding: 0 30px; font-size: 18px;}
	
	#service dl {margin: auto; width: 420px;}
	#service dt, #service dd {text-align: left;}
	
	#service .part1, #service .part1_1 {padding: 80px 0 500px;}
	#service .part1:before {margin-left: -310px; margin-top: 50px;}
        #service .part1_1:before {margin-top: 50px; margin-left: -59%;}
	#service .part2 {height: auto; padding: 100px 0 450px;}
	#service .part2:before { margin-top: 0px;}
	#service .part2 .person5 {margin-left: -140px; margin-top: 130px;}
	#service .part3 {height: auto; padding: 120px 0 500px;}
	#service .part3:before {height: 330px; margin-left: -270px; margin-top: 60px;}
	#service .part3 .person6 {margin-left: -50px; margin-top: -50px;}
	#service .part3 .person7 {margin-left: -240px; margin-top: 100px;}
	
	.benefit_area .item dd>span br {display: block;}
}
@media all and (max-width: 640px) {
	.sec p br {display: none;}
	
	
	.culture_area dt, .culture_area dd {display: block; height: auto;}
	.culture_area dt {padding: 20px 0 0}
	.culture_area dd {padding: 20px 0 30px;}
	
	.img_sec {height: 300px;}
	
	#main .sec1 .overview .item:before {height: 67px;}
	#main .sec1 .overview dl dt, #main .sec1 .overview dl dd {display: block; width: 100%; text-align: center;}
	#main .sec1 .overview dl dt {padding-left: 0;}
	#main .sec1 .overview dt strong, #main .sec1 .overview dt span {display: inline-block;}
	#main .sec1 .overview dt span {padding-left: 5px;}
	
	
	.history_area li .year, .history_area dl {}
	.history_area:before {left: 55px; bottom: -20px;}
	.history_area li .year:before {right: 15px; top: 2px;}
	.history_area li .year {margin-bottom: 10px; width: 80px;}
	.history_area dl  {padding-right: 80px; margin-right: -80px;}
	#main .sec4 .infoG_area {margin-bottom: 0;}
	#main .sec4 .infoG_area:before {width: 140px; border-radius: 70px;}
	#main .sec4 .infoG_area .item {padding: 10px; width: 100%; }
	#main .sec4 .infoG_area .item:before {left: 121px; margin-left: 0; bottom: 50%; margin-bottom: -7px;}
	#main .sec4 .infoG_area .item:after {height: 30px; left: 140px; top: 50%; margin-top: -15px; transform: rotate(90deg)}
	#main .sec4 .infoG_area .item .main {width: 120px; height: 120px; padding-bottom: 0; position: relative;}
	
	#main .sec4 .infoG_area .item .main span {width: 100%; font-size: 15px;}
	#main .sec4 .infoG_area .item .sub {display: table-cell; position: relative; vertical-align: middle; left: 0; top: 0; margin-left: 0; text-align: left; padding-left: 40px; width: auto;}
	
	.location_info {text-align: left;}
	#culture .sec2 {padding: 80px 0;}
	#culture .sec2 .col {width: 100%; }
	#culture .sec2 .item {min-height: 0; padding: 10px 20px 40px;}
	#culture .sec2 .item3 {padding-top: 30px;}
	#culture .sec2 .item .title {height: auto; margin-bottom: 30px;}
	#culture .sec2 .item .title:before {bottom: -5px;}
	#culture .sec2 .item3 .title {margin-bottom: 50px;}
	#culture .sec2 .item3 .title:before {bottom: -25px;}
	
}
@media all and (max-width: 571px) {
         #service .link.blk, #service .link.red {margin: 0 0 20px;}
}
@media all and (max-width: 500px) {
	.benefit_area .item {height: 220px;}
	.benefit_area .item {background-size: 70px 70px !important; background-position: right 95% !important;}
	.benefit_area .item dt {width: 35px; font-size: 32px;}
	.benefit_area .item dd>span {font-size: 13px;}
	
	.sec .sec_title h1, #main .sec1 .overview dd {font-size: 31px;}
	
	.culture_area dt small {vertical-align: 7px;}
	
	
	.pv_area h1 {font-size: 30px; line-height: 1.3;}
	.pv_area .txt p {font-size: 17px;} 
	
	#main .sec1 .overview .counter_area,#main .sec1 .overview .item p {display: block; text-align: center; width: 100%;}
	#main .sec1 .overview .counter_area {padding-top: 10px;}
	#main .sec1 .overview .item .title {width: 100%; margin-bottom: 0; padding: 15px 0 10px;}
	#main .sec1 .overview .item p {padding-bottom: 20px;}
	#main .sec1 .overview .item p br {display: block;}
	
	.map_area {margin-left: -20px; margin-right: -20px;}
	#service .part_content p {padding: 0; font-size: 16px;}
	
	#culture .sec4 .button { width: 230px;}
	.benefit_area .item dd>span br {display: none;}
	
	.pv_area {background-size: 330% auto}
	
	#service dt {font-size: 16px;}
	
	.culture_area dt {font-size: 25px;}
	#culture .sec1 dd strong, #culture .sec1 dd p, #culture .sec2 .item p {font-size: 14px;}
}
@media all and (max-width: 420px) {
	
	.benefit_area .item dt, .benefit_area .item dd {display: block;}
	
	#main .sec1 .overview .item {display: block; width: 100%;}
	#main .sec1 .overview .item:before {width: 100%; height: 1px; top: 0;}
	
	.history_area li .year, #main .sec4 .infoG_area .item .main, #culture .sec4 .button, #main .sec1 .overview dt strong{font-size: 17px;}
	.sec p, #main .sec4 .infoG_area .item .sub, .history_area dt, .history_area dd {font-size: 14px;}
	.sec .sec_title h1, #main .sec1 .overview dd {font-size: 25px;}
	
	
	#service .part .big {font-size: 21px;}
	#service .part .big br {display: none;}
	#service dl {width: 100%;}
	#service dl.first {margin-top: 10px;}
	#service dt, #service dd {display: block; width: 100%; text-align: center;}
	#service dt {padding-bottom: 0;}
	#service dd {padding-top: 0;}
	#service dd strong {font-size: 30px;}
	#service dd small {font-size: 14px; display: block; margin-left: 0;}
	#service .link {margin-right: 0;}
	#service .link.blk, #service .link.red {margin: 0 0 20px; }
	
	#service .part1, #service .part1_1 {padding-bottom: 350px;}
	#service .part1:before {margin-left: -230px; height: 400px; margin-top: 170px;}
        #service .part1_1:before {margin: 240px 0 0 -250px; height: 300px;}
	#service .part2:before {height: 430px; margin-left: 0; margin-top: 20px;}
	#service .part2 {padding-bottom: 350px;}
	#service .part2 .person5 {margin-left: -120px; height: 290px;}
	#service .part3:before {height: 280px; margin-left: -220px; margin-top: 30px;}
	#service .part3 .person6 {height: 200px;}
	#service .part3 .person7 {margin-left: -160px; margin-top: 130px; height: 290px;}
}

@media all and (max-width: 340px) {
	.sec .sec_title h1, #main .sec1 .overview dd {font-size: 21px;}
	#service .part2 .part_content.txt br {display: none;}
}
.main_visual_area {position: relative;}
.main_visual_area .slide {height: 740px; background-position: center center;}
.main_visual_area .slide .setWidth {height: 100%; position: relative;}
.mv_txt {position: absolute; top: 50%; left: 0; padding-left: 50px; transform: translateY(-180px); color: #fff;}
.mv_txt:before {display: block; content: ''; width: 370px; height: 370px; position: absolute; left: 0; top: 50%; margin-top: -185px; background: rgba(210,0,21,.8); z-index: -1;}
.mv_txt .main {font-size: 50px; margin-left: -1px; line-height: 1.2;}
.mv_txt .sub {font-size: 16px; margin-top: 20px;}
.mv_txt a {display: inline-block; font-size: 13px; margin-top: 35px; padding-right: 25px; position: relative; color: #fff;}
.mv_txt a:before {display: block; content: ''; width: 15px; height: 1px; position: absolute; top: 8px; right: 0; background: #fff;}

.main_visual_area .slick-dots {position: absolute; left: 50%; transform: translateX(-50%); bottom: 50px;}
.main_visual_area .slick-dots li {float: left; opacity: .7; padding: 0 15px;}
.main_visual_area .slick-dots li button {display: block;width: 80px; line-height: 20px; border: 1px solid #fff; color: #fff; background: transparent; border-radius: 11px; font-size: 12px;}
.main_visual_area .slick-dots li.slick-active {opacity: 1;}
.main_visual_area .slick-dots li.slick-active button {width: 10px; height: 10px; font-size: 0; text-indent: -9999px; background: #fff; margin-top: 5px;}

.main_visual_area .goStop_area {position: absolute; bottom: 51px; left: 50%; margin-left: 140px;}
.main_visual_area .goStop_area .goStop{display: block; width: 20px; height: 20px; background: url(/contents/img/goStop.png) 0 0 no-repeat; text-indent: -9999px;}
.main_visual_area .goStop_area .goStop.on{background-position: 0 -20px;}

.works_area {padding: 100px 0 130px;}
.works_area .setWidth {position: relative;}
.work_slide .slide {padding: 0 10px;}

.text_work_slide {position: absolute; background: rgba(255,255,255,.9); padding: 50px 0; height: 370px; top: -300px; left: 50%; margin-left: -380px; width: 310px; box-sizing: border-box; box-shadow: 0 3px 7px rgba(0,0,0,.3)}
.text_work_slide .slide {padding: 0 50px;}
.text_work_slide .title {display: inline-block; font-size: 24px; color: #d20015; letter-spacing: -.5px; text-align: left; border-bottom: 2px solid #d20015; line-height: 1; margin-bottom: 20px;}
.text_work_slide  .summary {font-size: 16px; color: #444; word-break: keep-all; letter-spacing: -.3px; line-height: 1.5;}
.text_work_slide .date {display: inline-block; margin-top: 10px; color: #666; font-size: 13px;padding-right: 25px; position: relative}
.text_work_slide .date:before {display: block; content: ''; width: 15px; height: 1px; position: absolute; top: 8px; right: 0; background: #aaa;}
.text_work_slide .slick-arrow {position: absolute; width: 43px; height: 43px; text-indent: -9999px; bottom: 45px;}
.text_work_slide .slick-prev {background: url(/contents/img/ic_arrow_toL.png) 0 0 no-repeat; left: 50px;}
.text_work_slide .slick-next {background: url(/contents/img/ic_arrow_toR.png) 0 0 no-repeat; left: 103px;}

.sns_area {padding: 40px 0;}
.sns_area .item {position: relative;}
.sns_area .item:before {display: block; content: ''; width: 1px; height: 34px; background: #d5d5d5; position: absolute; right: 0; top: 50%; margin-top: -17px;}
.sns_area .col:last-child .item:before {display: none;}
.sns_area .item a{display: table; cursor: pointer; margin: auto;}
.sns_area .item span {display: table-cell; vertical-align: middle; font-weight: 700; color: #111; font-size: 20px; padding: 10px;}
.sns_area .icon{width: 60px; height: 60px;}
.sns_area .icon.ic_blog {background: url(/contents/img/ic_blog.png) 0 0 no-repeat;}
.sns_area .icon.ic_facebook {background: url(/contents/img/ic_facebook.png) 0 0 no-repeat;}
.sns_area .icon.ic_instagram {background: url(/contents/img/ic_instagram.png) 0 0 no-repeat;}

.works_area .xe-widget-wrapper {overflow: visible !important}

@media screen and (max-width: 1500px) {
}
@media screen and (max-width: 1080px) {
	.main_visual_area .slide {background-size: cover; height: 540px;}
	.mv_txt {transform: translateY(-140px); left: 40px;}
	.mv_txt .main {font-size: 40px;}
	.mv_txt:before {width: 300px; height: 300px; margin-top: -150px;}
	.main_visual_area .slick-dots {bottom: 40px;}
	.main_visual_area .goStop_area {bottom: 42px;}
	
	.text_work_slide {padding: 40px 0; width: 280px; height: 350px; top: -310px;}
	.text_work_slide .slide {padding: 0 40px;}
	.text_work_slide .slick-prev {left: 40px;}
	.text_work_slide .slick-next {left: 93px;}
	
	
}
@media screen and (max-width: 768px) {
	body {font-size: 14px;}
	.main_visual_area .slide {background-size: cover; height: 450px;}
	.mv_txt {transform: translateY(-100px); left: 40px; padding-left: 30px;}
	.mv_txt .main {font-size: 30px;}
	.mv_txt:before {width: 220px; height: 220px; margin-top: -110px;}
	.mv_txt .sub {font-size: 14px; margin-top: 10px;}
	.mv_txt a {margin-top: 20px;}
	.main_visual_area .slick-dots {bottom: 40px;}
	.main_visual_area .goStop_area {bottom: 42px;}
	
	.works_area {padding: 80px 0 100px;}
	.text_work_slide {margin-left: 0; left: 40px; height: 330px; top: -290px;}
	.text_work_slide .title {font-size: 22px;}
	.text_work_slide .summary {font-size: 16px;}
	
	.sns_area .col {width: 33.33%;}
	.sns_area .item span {font-size: 14px;}
	
}
@media screen and (max-width: 500px) {
	.sns_area .item span, .sns_area .item:before {display: none;}
	.sns_area .item .icon{display: block;}
}
@media screen and (max-width: 500px) {
	
	.mv_txt {left: 20px; padding-left: 20px;}
	.mv_txt .main {font-size: 27px;}
	.mv_txt .sub {font-size: 13px;}
	.main_visual_area .slick-dots li {padding: 0 5px;}
	.main_visual_area .goStop_area {margin-left: 110px;}
	.main_visual_area .slick-dots {width: 200px; margin-left: -100px; transform: translate(0); l}
}

@media screen and (max-width: 420px) {
	
	.mv_txt {left: 20px; padding-left: 20px;}
	.mv_txt .main {font-size: 27px;}
	.mv_txt .sub {font-size: 13px;}
	.main_visual_area .slick-dots li {padding: 0 5px;}
	.main_visual_area .goStop_area {margin-left: 110px;}
	.main_visual_area .slick-dots {width: 200px; margin-left: -100px; transform: translate(0);}
	.text_work_slide {left: 20px; height: 300px; top: -240px; width: 230px;}
	.text_work_slide .slide {padding: 0 30px;}
	.text_work_slide .title {font-size: 18px;}
	.text_work_slide .summary {font-size: 14px;}
	.text_work_slide .slick-arrow {bottom: 25px;}
	.text_work_slide .slick-prev {left: 30px;}
	.text_work_slide .slick-next {left: 83px;}
}
@media screen and (max-width: 340px) {
	.mv_txt .main {font-size: 25px;}
	.mv_txt .sub {font-size: 13px;}
}