@charset "utf-8";
/* anime */
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .btnArrow
{-o-transition:all .16s cubic-bezier(.7,0,.3,1);transition:all .16s cubic-bezier(.7,0,.3,1);-webkit-transform:all .16s cubic-bezier(.7,0,.3,1);-ms-transform:all .16s cubic-bezier(.7,0,.3,1);transform:all .16s cubic-bezier(.7,0,.3,1);-webkit-transition:all .16s cubic-bezier(.7,0,.3,1);}

.mainContainer {}

/* mkvWrap */
.mainContainer .mkvWrap { background:url(../img/main/kv_left_bg.png)no-repeat left center, url(../img/main/kv_right_bg.png)no-repeat #e8f1fa right center; position:relative; overflow:hidden;}
.mainContainer .mkvWrap::after {content:''; display:block; position:absolute; bottom:0; left:0px; width:0; height:0; border-bottom:200px #fff solid; border-right:0 transparent solid; border-left:3000px transparent solid;}
.mainContainer .mkvWrap .mkvBox {padding-bottom:150px;}

/* noticeWrap */
.mainContainer .mkvWrap .mkvBox .noticeWrap {padding-top:60px; padding-bottom:44px;}

/* main key visual */
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider {width:550px; height:340px; border-radius:20px; overflow:hidden; position:relative;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .mkv li {height:340px; display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center; background-position:center top !important; background-size:cover !important;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .mkv li a {display:block; width:100%; height:100%;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .mkv li a .desc,
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .mkv li .desc {visibility:hidden;}

/* slider tuning */
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls {position:absolute; bottom:0; right:6px; z-index:4;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls .bx-controls-direction {position:absolute; bottom:0; right:0;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls .bx-controls-direction a {display: block; width:38px; height:38px; font-size:0; background:url(../img/main/ico_mkvControl.png)rgba(0,0,0,0.8) no-repeat; position:absolute; bottom:0;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls .bx-controls-direction .bx-prev {right:80px;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls .bx-controls-direction .bx-next {background-position:right top; right: 0;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls .bx-controls-auto {position:absolute; bottom:14px; right:14px;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls .bx-controls-auto .bx-controls-auto-item { }
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls .bx-controls-auto .bx-controls-auto-item a {display:block; width:38px; height:38px; font-size:0; background:url(../img/main/ico_mkvControl.png)rgba(0,0,0,0.4) no-repeat;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-start {background-position:0px -38px; border-radius:0 20px 20px 0;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-stop {background-position:-38px -38px; border-radius:0 20px 20px 0;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .bx-controls .bx-pager {position:absolute; right:52px; bottom:14px; height:38px; line-height:38px; width:70px; background:rgba(0,0,0,0.4); text-align:center; color:#fff; border-radius:20px 0 0 20px;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .list {position:absolute; right:14px; bottom:14px; z-index:4; width:40px; height:38px; line-height:38px; background:url(../img/main/icon_list.png)rgba(0,0,0,0.4) no-repeat center; font-size:0; border-radius:0 20px 20px 0;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .btnArrow {width:40px; height:56px; position:absolute; z-index:3; bottom:41%; font-size:0;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .btnArrow.before {left:10px; background:url(../img/main/btnSliderArrow_left.png) no-repeat;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .btnArrow.before:hover {opacity:0.8;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .btnArrow.after {right:10px; background:url(../img/main/btnSliderArrow_right.png) no-repeat;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .btnArrow.after:hover {opacity:0.8;}


/* --------------------------------------------------------
RESPONSE
----------------------------------------------------------*/


@media (max-width:1180px) {	
 
		
    .mainContainer .mkvWrap::after {border-bottom:60px #fff solid; /*border-left:1300px transparent solid;*/}
    .mainContainer .mkvWrap .mkvBox {padding:0 10px 100px; box-sizing:border-box;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap {flex-direction:column; }
    .mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider {width:100%; height:auto; margin-bottom:30px;}
	.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .mkv li { height:auto;}
	.mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .mkv li img { width:100%; max-width:100%;}
	
    .mainContainer .mkvWrap::after {border-bottom:60px #fff solid; border-left:1200px transparent solid;}
	
    .mainContainer .mkvWrap .mkvBox .noticeWrap {padding-top:20px; padding-bottom:30px;} 
	

}

@media (max-width:992px) {
	
    .mainContainer .mkvWrap::after {border-bottom:60px #fff solid; border-left:1000px transparent solid;}


}

@media (max-width:767px) {
	
    .mainContainer .mkvWrap::after {border-bottom:60px #fff solid; border-left:800px transparent solid;}
    .mainContainer .mkvWrap {background:#e8f1fa;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap {padding-bottom:10px;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .mkvSlider .btnArrow {width:30px; height:42px; background-size:contain !important;}

}


/* latestBox */
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox {width:700px; height:340px; display:flex; justify-content:space-between; position:relative;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox h2 {display:inline-block; font-size:30px; line-height:30px; font-weight:600; color:#00529b;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox h2 em {font-style:normal; color:#009475;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap {display:flex; width:calc(100% - 380px);}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs {}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs h3 {}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs h3 a {display:block; font-weight:500; padding:5px 14px; font-size:20px; color:#525252; position:relative;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs h3 a::after {content:''; width:4px; height:4px; border-radius:50%; position:absolute; top:13px; left:0; background:#525252;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs:first-child h3 a::after {display:none;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs .more {font-size:0; width:30px; height:30px; background:url(../img/main/icon_more.png)no-repeat; display:none; position:absolute; top:0; right:0;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul {display:none; position:absolute; left:0; right: 0; top:60px; animation:Showtabs 0.3s;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li {border-radius:20px; width:224px; border-collapse: separate; box-shadow:4px 4px 10px 2px rgba(0,0,0,0.12);}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li a {display:block; width:100%; height:280px; background:#fff; border-radius:20px; padding:30px 20px 20px; box-sizing:border-box; box-shadow:inset 0px 0px 0px 1px rgba(0,0,0,0.1);}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li a:focus,
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li a:hover {box-shadow:inset 0px 0px 0px 3px #00529b;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li a strong {display:block; color:#00529b; font-size:22px; font-weight:400; margin-bottom:20px;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li a p {display:block; font-size:18px; color:#222; line-height:24px; height:145px; max-height:145px; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:6; word-break:keep-all;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li a em {display:block; font-size:18px; color:#555; font-style:normal;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs.active {}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs.active h3 a {color:#00529b;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs.active .more {display:block;}
.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs.active ul {display:flex; justify-content:space-between;}

@keyframes Showtabs {
	0% {opacity:0; transform:translate3d(0, 50px, 0);}
	100% {opacity:1; transform:translate3d(0, 0, 0);}
}




/* --------------------------------------------------------
RESPONSE
----------------------------------------------------------*/
@media (max-width:1280px) {
	
   
	.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox {width:calc(100% - 570px); margin-left:20px;}
	.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap {width:calc(100% - 330px);}
	.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li {width:calc(33.3% - 10px);}
	


}

@media (max-width:1180px) {
		
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox {width:100%; margin-left:0px;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap {width:auto; margin-right:40px;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li {width:calc(33.3% - 10px);}
	



}

@media (max-width:767px) {
	
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox { height:470px;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox h2 {font-size:24px; margin:0px auto; text-align:center;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap {position:absolute; top:50px; left:0; width:100%;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs h3 a {font-size:18px;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul {top:50px;}
	.mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs.active ul { display:block;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li {width:calc(100% - 0px); margin:0px 0px 10px 0px;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li:nth-child(3) {display:none;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li a {padding:20px;border-radius:10px; height:auto;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li a strong {font-size:16px; margin-bottom:10px;}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li a p {height:70px; max-height:70px; -webkit-line-clamp:3;	}
    .mainContainer .mkvWrap .mkvBox .noticeWrap .latestBox .tabsWrap .tabs ul li a em {font-size:16px;}
	
}



/* speedSearch */
.mainContainer .mkvWrap .mkvBox .speedSearch {border-radius:20px; overflow:hidden; box-shadow:0 0px 10px rgba(0,0,0,0.12);}
.mainContainer .mkvWrap .mkvBox .speedSearch .title {display:flex; flex-direction:column; justify-content:center; align-items:flex-start; background:#009b7c; color:#fff; padding:0 20px; width:190px; height:146px; box-sizing:border-box;}
.mainContainer .mkvWrap .mkvBox .speedSearch .title h2 {display:block; font-size:25px; margin-bottom:0px;}
.mainContainer .mkvWrap .mkvBox .speedSearch .title p {display:none; font-size:0px;}
.mainContainer .mkvWrap .mkvBox .speedSearch form {background:#fff; width:calc(100% - 190px);}
.mainContainer .mkvWrap .mkvBox .speedSearch form fieldset {display:flex; align-items:center; height:146px;}
.mainContainer .mkvWrap .mkvBox .speedSearch form fieldset label {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);}
.mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .searchForm {width:calc(100% - 100px);}
.mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .searchForm select {font-size:18px; background:url(../img/common/selectBoxArrow.png)#f5f5f5 no-repeat right 10px center; border:0; height:58px; margin-left:20px; padding:0 20px; box-sizing:border-box; width:400px;}
.mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .searchForm input {height:58px; border:0; border-bottom:1px solid #9c9c9c; box-sizing:border-box; font-size:18px; margin-left:20px;}
.mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .btnSearch {width:60px; height:60px; background:#009475; border-radius:50%; font-size:0;}
.mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .btnSearch:hover {background:#01745b;}
.mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .btnSearch::before {content:''; display:block; width:60px; height:60px; background:url(../img/main/icon_search.png)no-repeat center;}



/* --------------------------------------------------------
RESPONSE
----------------------------------------------------------*/

@media (max-width:1180px) {	
    
    .mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .searchForm select {width:300px;}


}


@media (max-width:992px) {	
    
    .mainContainer .mkvWrap .mkvBox .speedSearch {flex-direction:column;}
    .mainContainer .mkvWrap .mkvBox .speedSearch .title {width:100%; align-items:center; height:auto; padding:16px;}
    .mainContainer .mkvWrap .mkvBox .speedSearch .title h2 {font-size:22px; margin-bottom:6px;}
    .mainContainer .mkvWrap .mkvBox .speedSearch form {width:100%;}
    .mainContainer .mkvWrap .mkvBox .speedSearch form fieldset {flex-direction:column; height:auto;}
    .mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .searchForm {display:block; width:calc(100% - 10px); margin-top:10px; font-size:0;}
    .mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .searchForm select  {margin:5px 10px; width:calc(50% - 20px); display: inline-block;}
    .mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .searchForm input {margin:5px 10px; width:calc(100% - 20px); display: inline-block;}
    .mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .btnSearch {display:flex; align-items:center; justify-content:center; border-radius:20px; margin:20px 0; width:calc(100% - 20px); height:38px;}
    .mainContainer .mkvWrap .mkvBox .speedSearch form fieldset .btnSearch::before {width:38px; height:38px;}


}


/* courseWrap */
.mainContainer .courseWrap {}
.mainContainer .courseWrap .courseBox {padding-bottom:70px; overflow:hidden;}
.mainContainer .courseWrap .courseBox .title {text-align:center; margin-bottom:40px; position:relative;}
.mainContainer .courseWrap .courseBox .title h2 {display:inline-block; font-size:38px; line-height:40px; color:#222; font-weight:500;}
.mainContainer .courseWrap .courseBox .title .more {font-size:0; display:block; width:30px; height:30px; background:url(../img/main/icon_more.png)no-repeat; position:absolute; top:4px; right:0;}
.mainContainer .courseWrap .courseBox ul {font-size:0; margin:0 -10px;}
.mainContainer .courseWrap .courseBox ul li {display:inline-block; width:calc(33.3% - 20px); margin:10px; box-shadow:4px 4px 4px 0px rgba(0,0,0,0.1); border-radius:20px; margin-bottom:20px; vertical-align:top;}
.mainContainer .courseWrap .courseBox ul li a {display:block; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1); padding:30px 16px; border-radius:20px;}
.mainContainer .courseWrap .courseBox ul li a .status {display:block; text-align:center; width:114px; height:26px; line-height:24px; background:#00529b; color:#fff; font-size:18px; font-weight:500; border-radius:20px; margin-bottom:20px;}
.mainContainer .courseWrap .courseBox ul li a .status.off {background:#c9c9c9;}
.mainContainer .courseWrap .courseBox ul li a p {display:block; color:#282828; font-size:18px; font-weight:400; margin-bottom:8px;}
.mainContainer .courseWrap .courseBox ul li a p span { display:block; margin-top:5px;}
.mainContainer .courseWrap .courseBox ul li a strong {display:block; height:80px; font-size:23px; line-height:26px; font-weight:500; word-break:keep-all; max-height:80px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; margin-bottom:10px; }
.mainContainer .courseWrap .courseBox ul li a em {display:block; font-style:normal; font-size:18px; font-weight:400; color:#00529b;}
.mainContainer .courseWrap .courseBox ul li a dl {font-style:normal; font-size:18px; font-weight:400; color:#00529b; display:flex;}
.mainContainer .courseWrap .courseBox ul li a dl dt {margin-right:4px;}
.mainContainer .courseWrap .courseBox ul li a dl dd {}
.mainContainer .courseWrap .courseBox ul li a:hover {background:#00529b;}
.mainContainer .courseWrap .courseBox ul li a:hover .status {background:#fff; color:#00529b;}
.mainContainer .courseWrap .courseBox ul li a:hover p,
.mainContainer .courseWrap .courseBox ul li a:hover strong,
.mainContainer .courseWrap .courseBox ul li a:hover dl {color:#fff;}


/* --------------------------------------------------------
RESPONSE
----------------------------------------------------------*/

@media (max-width:1280px) {	

    .mainContainer .courseWrap {padding:0 10px; box-sizing:border-box;}

}

@media (max-width:1080px) {	

    .mainContainer .courseWrap .courseBox ul li a strong { -webkit-line-clamp:3;}

}



@media (max-width:992px) {

    .mainContainer .courseWrap .courseBox .title {display:flex; justify-content:space-between; padding-top:10px; margin-bottom:10px;}
    .mainContainer .courseWrap .courseBox .title h2 {font-size:28px;}
    .mainContainer .courseWrap .courseBox ul li {width:calc(50% - 20px); margin-bottom:10px;}	
	.mainContainer .courseWrap .courseBox ul li a {padding:22px;} 
	.mainContainer .courseWrap .courseBox ul li a strong {font-size:21px; line-height:24px;} 
     
	.mainContainer .courseWrap .courseBox .title .more {top:14px;}
}


@media (max-width:767px) {
	    
	.mainContainer .courseWrap .courseBox { padding-bottom:40px;}	
    .mainContainer .courseWrap .courseBox .title h2 {font-size:24px;}
	.mainContainer .courseWrap .courseBox ul {margin:0px;}
    .mainContainer .courseWrap .courseBox ul li {width:calc(100% - 0px); margin:0px; margin-bottom:15px;}
	 
    .mainContainer .courseWrap .courseBox ul li a .status {font-size:16px; width:90px; height:30px; line-height:30px;}
    .mainContainer .courseWrap .courseBox ul li a strong {font-size:19px; height:50px; max-height:50px; -webkit-line-clamp:2; }
    .mainContainer .courseWrap .courseBox ul li a dl {font-size:16px;}


}

/* serviceWrap */
.mainContainer .serviceWrap {background:#f1f2f7;}
.mainContainer .serviceWrap .serviceBox {padding-top:60px;}
.mainContainer .serviceWrap .serviceBox .service {}
.mainContainer .serviceWrap .serviceBox .service .cafe {width:429px;}
.mainContainer .serviceWrap .serviceBox .service .cafe .titleBox {margin-bottom:18px;}
.mainContainer .serviceWrap .serviceBox .service .cafe .titleBox .title {}
.mainContainer .serviceWrap .serviceBox .service .cafe .titleBox .title h2 {display:block; font-size:30px; line-height:30px; margin-bottom:10px; color:#00529b; font-weight:500;}
.mainContainer .serviceWrap .serviceBox .service .cafe .titleBox .title p { word-break:keep-all;}
.mainContainer .serviceWrap .serviceBox .service .cafe .titleBox .more {display:flex; align-items:center; justify-content:center; min-width:53px; height:53px; text-align:center; background:#00529b; border-radius:50%; text-indent:-999999px; position:relative;}
.mainContainer .serviceWrap .serviceBox .service .cafe .titleBox .more:before {content:''; display:block; position:absolute; top:4px; left:4px; width:45px; height:45px; background:url(../img/main/ico_mapmore.png) no-repeat;}
.mainContainer .serviceWrap .serviceBox .service .cafe .map {width:428px; height:337px; background:#00529b; border-radius:20px; display:flex; justify-content:center; align-items:center;}

.mainContainer .serviceWrap .serviceBox .service .serviceLink {width:calc(100% - 460px); background:#f3d966; border-radius:20px; box-shadow:4px 4px 4px 0px rgba(0,0,0,0.1); padding:10px; box-sizing:border-box;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink .title {margin-top:30px; margin-left:20px; position:relative;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink .title h2 {font-size:25px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink .title h2 strong {font-size:30px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink .title .decorate {width:130px; height:109px; background:url(../img/main/img_decorate.png)no-repeat; position:absolute; top:-67px; right:46px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul {font-size:0; margin:10px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li {display:inline-block; vertical-align:top; margin:10px; width:calc(25% - 20px);}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a {display:block; height:140px; background:#faf0c2; border-radius:14px; text-align:center; font-size:17px; box-sizing:border-box; padding-top:16px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a::before {content:''; display:block; width:120px; height:80px; background:url(../img/main/icon_serviceLink.png)no-repeat; margin: 0 auto 8px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a.link_01::before {background-position:0 0;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a.link_02::before {background-position:0 -80px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a.link_03::before {background-position:0 -160px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a.link_04::before {background-position:0 -240px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a.link_05::before {background-position:0 -320px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a.link_06::before {background-position:0 -400px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a.link_07::before {background-position:0 -480px;}
.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a.link_08::before {background-position:0 -560px;}

.mainContainer .serviceWrap .serviceBox .bannerBox {padding:50px 0;}
.mainContainer .serviceWrap .serviceBox .bannerBox a {display:block; border:1px solid #dedede; padding:10px 12px; background:#fff;}

/* --------------------------------------------------------
RESPONSE
----------------------------------------------------------*/
@media (max-width:1280px) {	

    .mainContainer .serviceWrap .serviceBox .service {padding:0 10px; box-sizing:border-box;}
    .mainContainer .serviceWrap .serviceBox .bannerBox {display:block; padding:50px 10px; box-sizing:border-box;}
    .mainContainer .serviceWrap .serviceBox .bannerBox a {display:inline-block; height:70px; line-height:90px; margin-bottom:10px; vertical-align:top; text-align:center;}
    .mainContainer .serviceWrap .serviceBox .bannerBox a img {max-width:100%; max-height:100%; display:inline-block;}
    .mainContainer .serviceWrap .serviceBox .bannerBox a:nth-child(1) {width:calc(50% - 30px);}
    .mainContainer .serviceWrap .serviceBox .bannerBox a:nth-child(2) {width:calc(50% - 30px);}
    .mainContainer .serviceWrap .serviceBox .bannerBox a:nth-child(3) {width:calc(33.3% - 29px);}
    .mainContainer .serviceWrap .serviceBox .bannerBox a:nth-child(4) {width:calc(33.3% - 29px);}
    .mainContainer .serviceWrap .serviceBox .bannerBox a:nth-child(5) {width:calc(33.3% - 29px);}


}

@media (max-width:1180px) {	
	
    .mainContainer .serviceWrap .serviceBox {padding-top:30px;}
    .mainContainer .serviceWrap .serviceBox .service {flex-direction:column;}
    .mainContainer .serviceWrap .serviceBox .service .cafe {width:100%; margin-bottom:40px;}
    .mainContainer .serviceWrap .serviceBox .service .cafe .map {width:100%; padding:10px; box-sizing:border-box;}
    .mainContainer .serviceWrap .serviceBox .service .cafe .map img {max-width:100%; max-height:100%;}
    .mainContainer .serviceWrap .serviceBox .service .serviceLink {width:100%;}
    .mainContainer .serviceWrap .serviceBox .service .cafe .titleBox .title h2 {font-size:22px; line-height:24px;}
    .mainContainer .serviceWrap .serviceBox .service .cafe .titleBox .title p {font-size:15px;}
	
	.mainContainer .serviceWrap .serviceBox .service .serviceLink .title h2 {font-size:23px;}
	.mainContainer .serviceWrap .serviceBox .service .serviceLink .title h2 strong {font-size:26px;}
	
}



@media (max-width:767px) {
	
	.mainContainer .serviceWrap .serviceBox .service .cafe .map { height:auto; padding:20px;}
    .mainContainer .serviceWrap .serviceBox .service .cafe .map img { width:100%; max-height:inherit;}
    .mainContainer .serviceWrap .serviceBox .service .serviceLink {padding:4px;}
    .mainContainer .serviceWrap .serviceBox .service .serviceLink .title {margin-left:10px;}
    .mainContainer .serviceWrap .serviceBox .service .serviceLink .title h2 {font-size:20px;}
    .mainContainer .serviceWrap .serviceBox .service .serviceLink .title h2 strong {font-size:20px;}
    .mainContainer .serviceWrap .serviceBox .service .serviceLink .title .decorate {right:0;}
    .mainContainer .serviceWrap .serviceBox .service .serviceLink ul {margin:10px 0 0;}
    .mainContainer .serviceWrap .serviceBox .service .serviceLink ul li {width: calc(50% - 20px);}
	.mainContainer .serviceWrap .serviceBox .service .serviceLink ul li a {font-size:15px;}

}


@media (max-width:480px) {

    .mainContainer .serviceWrap .serviceBox .bannerBox { padding:30px 10px;}
    .mainContainer .serviceWrap .serviceBox .bannerBox a:nth-child(1),
    .mainContainer .serviceWrap .serviceBox .bannerBox a:nth-child(2),
    .mainContainer .serviceWrap .serviceBox .bannerBox a:nth-child(3),
    .mainContainer .serviceWrap .serviceBox .bannerBox a:nth-child(4),
    .mainContainer .serviceWrap .serviceBox .bannerBox a:nth-child(5) {width:calc(100% - 25px);}
 
}