@charset "utf-8";
/* ===============================================
 * style css
 * author : onepixel (Park Soo Hyun & Jeon Youl)
=============================================== */

/* ===============================================
 * COMMON
=============================================== */
.visual-container {position:relative}
.visual-container:before {content:''; position:absolute; top:0; left:0; bottom:0; right:0; background-color:rgba(0,0,0,0.4); z-index:0}
.fixed-bg {background-size:cover}
.text-left {text-align:left !important}
.text-center {text-align:center !important}
.text-right {text-align:right !important}
.color-primary {color:#228be6 !important}
.bg-primary {background-color:#228be6 !important}
.common-heading {text-align:center; margin-bottom:80px}
.common-heading .heading-num {display:inline-block; font-size:17px; color:#999; margin-bottom:10px; letter-spacing:0.05em}
.common-heading .heading-num:before, .common-heading .heading-num:after {content:''; display:inline-block; width:40px; height:1px; background-color:#e5e5e5; vertical-align:middle}
.common-heading .heading-num:before {margin-right:15px}
.common-heading .heading-num:after {margin-left:15px}
.common-heading h2 {font-family:'Arita-buri-SemiBold','NotoSansKR',sans-serif; font-size:38px; color:#153579; line-height:1.3; margin-bottom:20px}
.common-heading h2 strong {color:#fff}
.common-heading p {font-size:18px; font-weight:200; color:#868e96; line-height:1.6; letter-spacing:-0.5px}
.common-heading.reverse .heading-num {color:#fff; opacity:0.75}
.common-heading.reverse h2 {color:#fff}
.common-heading.reverse p {color:#fff; opacity:0.65}
.line-bottom {border-bottom:1px solid #e9e9e9}
.line-top {border-top:1px solid #e9e9e9}

/* ===============================================
 * MAIN PAGE
=============================================== */
/* hero */
#main-hero .hero-item {position:relative; outline:none !important; z-index:5}
#main-hero .hero-item:before {content:''; position:absolute; top:0; left:0; bottom:0; right:0; background-color:rgba(0,0,0,0.0)}/*배경흐림 rgba(0,0,0,0.25)*/
#main-hero .hero-caption-wrap {position:absolute; top:50%; left:0; right:0; padding-left:350px; z-index:100; -webkit-transform:translateY(-50%); transform:translateY(-50%)}
#main-hero .hero-caption-wrap .hero-caption {position:relative; max-width:840px; margin:auto; padding:60px 80px}
#main-hero .hero-caption-wrap .hero-caption h2 {font-size:46px; font-weight:700; color:#fff; opacity:0; transform:translateY(-15px); transition:opacity 1.2s, transform 1.2s; transition-delay:0.7s}
#main-hero .hero-caption-wrap .hero-caption p {font-size:28px; font-weight:300; color:#fff; line-height:1.65; margin-top:25px; opacity:0; transform:translateY(-30px); transition:opacity 1.2s, transform 1.2s; transition-delay:1.2s}
#main-hero .hero-caption-wrap .hero-caption .line {position:absolute; display:block; background-color:#fff; opacity:0.25; -webkit-transition:all 0.4s ease; transition:all 0.4s ease}
#main-hero .hero-caption-wrap .hero-caption .line.left {bottom:0; left:0; width:6px; height:0; -webkit-transition-delay:2s; transition-delay:2s}
#main-hero .hero-caption-wrap .hero-caption .line.top {top:0; left:0; width:0; height:6px; -webkit-transition-delay:2.4s; transition-delay:2.4s}
#main-hero .hero-caption-wrap .hero-caption .line.right {top:0; right:0; width:6px; height:0; -webkit-transition-delay:2.8s; transition-delay:2.8s}
#main-hero .hero-caption-wrap .hero-caption .line.bottom {bottom:0; right:0; width:0; height:6px; -webkit-transition-delay:3.2s; transition-delay:3.2s}
#main-hero .slick-active .hero-caption-wrap .hero-caption h2 {opacity:1; transform:translateY(0)}
#main-hero .slick-active .hero-caption-wrap .hero-caption p {opacity:1; transform:translateY(0)}
#main-hero .slick-active .hero-caption-wrap .hero-caption .line.left {height:100%}
#main-hero .slick-active .hero-caption-wrap .hero-caption .line.top {width:100%}
#main-hero .slick-active .hero-caption-wrap .hero-caption .line.right {height:100%}
#main-hero .slick-active .hero-caption-wrap .hero-caption .line.bottom {width:100%}
#main-hero .reset-animation .hero-caption-wrap .hero-caption h2 {-webkit-transition:all 0s ease;transition:all 0s ease}
#main-hero .reset-animation .hero-caption-wrap .hero-caption p {-webkit-transition:all 0s ease;transition:all 0s ease}
#main-hero .reset-animation .hero-caption-wrap .hero-caption .line {-webkit-transition:all 0s ease;transition:all 0s ease}
#main-hero .reset-animation .hero-caption-wrap .hero-caption .line.left {height:0}
#main-hero .reset-animation .hero-caption-wrap .hero-caption .line.top {width:0}
#main-hero .reset-animation .hero-caption-wrap .hero-caption .line.right {height:0}
#main-hero .reset-animation .hero-caption-wrap .hero-caption .line.bottom {width:0}
#main-hero .slick-arrow {position:absolute; top:50%; width:120px; font-size:16px; font-weight:500; color:#fff; letter-spacing:0.1em; border:none; background-color:transparent; cursor:pointer; outline:none; z-index:10}
#main-hero .slick-arrow span {position:absolute; top:13px; display:inline-block; width:40px; height:2px; background-color:#fff; -webkit-transition:width 0.35s ease; transition:width 0.35s ease}
#main-hero .slick-arrow span:before {content:''; position:absolute; display:block; top:-5px; width:13px; height:2px; background-color:#fff}
#main-hero .slick-arrow.slick-prev {left:30px; padding-left:40px}
#main-hero .slick-arrow.slick-next {right:30px; padding-right:40px}
#main-hero .slick-arrow.slick-prev span {left:0}
#main-hero .slick-arrow.slick-prev span:before {left:-1px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg)}
#main-hero .slick-arrow.slick-next span {right:0}
#main-hero .slick-arrow.slick-next span:before {right:-1px; -webkit-transform:rotate(45deg); transform:rotate(45deg)}
#main-hero .slick-arrow:hover span {width:25px}
#main-hero .slick-dots {position:absolute; bottom:100px; left:0; right:0; font-size:0; text-align:center; z-index:10}
#main-hero .slick-dots li {display:inline-block; margin:0 4px}
#main-hero .slick-dots li button {position:relative; display:block; width:40px; height:4px; padding:0; text-indent:-9999em; border:none; background-color:rgba(255,255,255,0.25); cursor:pointer; overflow:hidden; outline:none; -webkit-transition:opacity 0.3s; transition:opacity 0.3s}
#main-hero .slick-dots li button:after {content:''; position:absolute; top:0; bottom:0; display:block; width:0; background-color:#fff}
#main-hero .slick-dots li.slick-active button:after {-webkit-animation:hero-active linear 7.65s; animation:hero-active ease-out 7.65s}

@-webkit-keyframes hero-active {
	from {width:0}
	to {width:100%}
}

@keyframes hero-active {
	from {width:0}
	to {width:100%}
}


/* main page common */
section.main-section {padding:120px 0}

/* main shortcut section */
#main-shortcut-section .shortcut-item a {position:relative; display:block; height:100%; background-color:#000; overflow:hidden; transition:box-shadow 0.35s ease}
#main-shortcut-section .shortcut-item a > .line {position:absolute; display:block; background-color:#153579; transition:all 0.1s; transition-timing-function:cubic-bezier(.25,.75,.5,1.25); z-index:5}
#main-shortcut-section .shortcut-item a > .line-top {top:0; left:0; width:0; height:7px}
#main-shortcut-section .shortcut-item a > .line-right {top:0; right:0; width:7px; height:0; transition-delay:0.1s}
#main-shortcut-section .shortcut-item a > .line-bottom {bottom:0; right:0; width:0; height:7px; transition-delay:0.2s}
#main-shortcut-section .shortcut-item a > .line-left {bottom:0; left:0; width:7px; height:0; transition-delay:0.3s}
/*
#main-shortcut-section .shortcut-item a:hover > .line-top, #main-shortcut-section .shortcut-item a:hover > .line-bottom {width:100%}
#main-shortcut-section .shortcut-item a:hover > .line-right, #main-shortcut-section .shortcut-item a:hover > .line-left {height:100%}
*/
#main-shortcut-section .shortcut-item a img {display:block; width:100%; -webkit-transition:opacity 0.5s, -webkit-transform 0.5s; transition:opacity 0.5s, -webkit-transform 0.5s; transition:opacity 0.5s, transform 0.5s; transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s}
#main-shortcut-section .shortcut-item a .text {position:absolute; bottom:0; left:0; right:0; padding:25px 30px; text-align:center; background-color:rgba(0,0,0,0.35); transition:background-color 0.35s ease}
#main-shortcut-section .shortcut-item a .text h4 {font-size:27px; font-weight:300; color:#fff}
#main-shortcut-section .shortcut-item a .text p {font-size:15px; font-weight:300; color:#fff; line-height:1.5; margin-top:15px; opacity:0.7}
/*
#main-shortcut-section .shortcut-item a:before {content:''; position:absolute; display:block; bottom:0; right:-70px; border-style:solid; border-width:70px; border-color:transparent transparent #fff; opacity:0; z-index:10; -webkit-transition:opacity 0.25s; transition:opacity 0.25s}
#main-shortcut-section .shortcut-item a:after {content:'\e913'; position:absolute; bottom:10px; right:10px; font-family:'xeicon'; font-size:20px; color:#000; opacity:0; z-index:15; -webkit-transition:opacity 0.25s, -webkit-transform 0.35s ease-in; transition:opacity 0.25s, -webkit-transform 0.35s ease-in; transition:opacity 0.25s, transform 0.35s ease-in; transition:opacity 0.25s, transform 0.35s ease-in, -webkit-transform 0.35s ease-in}
*/
#main-shortcut-section .shortcut-item a:hover {box-shadow:0 50px 70px -12px rgba(0,0,0,0.32)}
#main-shortcut-section .shortcut-item a:hover img {opacity:0.45; -webkit-transform:scale(1.02,1.02); transform:scale(1.02,1.02)}
#main-shortcut-section .shortcut-item a:hover .text {background-color:rgba(0,0,0,0.7)}
/* #main-shortcut-section .shortcut-item a:hover:before {opacity:1}
#main-shortcut-section .shortcut-item a:hover:after {opacity:1; -webkit-transform:rotate(180deg); transform:rotate(180deg)} */

/* main video section (2019-07-13 추가) */
#main-video-section {background-color:#f3f7fb}
#main-video-section video {width:100%}

/* main banner section */
#main-banner-section {padding:80px 0; background-color:#111; /*background-image:url(../images/main_wide_banner.jpg);*/ background-position:center center; background-size:cover; background-repeat:no-repeat}
#main-banner-section .heading-item h2 {font-size:34px; font-weight:700; color:#fff}
#main-banner-section .heading-item h3 {font-size:22px; font-weight:200; color:#fff; margin-top:10px}
#main-banner-section .info-item p {color:#fff; line-height:1.65; margin-bottom:15px}
#main-banner-section .info-item a {position:relative; display:inline-block; font-weight:500; color:#fff}
#main-banner-section .info-item a:after {content:''; position:absolute; bottom:-13px; left:0; right:20px; height:3px; background-color:rgba(255,255,255,0.5); opacity:0; -webkit-transition:bottom 0.5s, opacity 0.5s; transition:bottom 0.5s, opacity 0.5s}
#main-banner-section .info-item a:hover:after {bottom:-10px; opacity:1}

/* main parallax section */
#main-parallax-section {background-image:url(../images/main_parallax_rawdawn.png); background-position:center top; background-size:cover; background-repeat:no-repeat}
#main-parallax-section .line-grid-wrap {background-image:url(../images/main_parallax_line.png); background-position:center top 20px; background-repeat:no-repeat}
#main-parallax-section .icon-item {text-align:center}
#main-parallax-section .icon-item a {display:block; height:100%}
#main-parallax-section .icon-item a:hover {-webkit-animation:pop-icon 1.2s linear infinite;animation:pop-icon 1.2s linear infinite}
#main-parallax-section .icon-item span {display:block; margin-top:20px; font-size:17px; color:#fff}
#main-parallax-section .icon-item.item-1 {margin-top:110px}
#main-parallax-section .icon-item.item-2 {margin-top:45px}
#main-parallax-section .icon-item.item-3 {margin-top:120px}
#main-parallax-section .col-img figure {position:relative; overflow:hidden; box-shadow:30px 30px 50px -12px rgba(0,0,0,0.42); transition:transform 0.3s}
#main-parallax-section .col-img figure:before {content:''; position:absolute; display:block; top:0; left:0; bottom:0; right:0; background-color:#000; opacity:0.3; z-index:5; transition:opacity 0.3s}
#main-parallax-section .col-img figure img {display:block; width:100%; height:auto; transition:transform 0.3s}
#main-parallax-section .col-img figure figcaption {position:absolute; bottom:0; left:0; right:0; padding:24px 15px 36px; font-size:24px; color:#fff; text-align:center; letter-spacing:-0.5px; z-index:10}

/* main franchise section (2019-07-14 추가) */
#main-franchise-section .part-heading {text-align:center; margin-bottom:60px}
#main-franchise-section .part-heading h2 {position:relative; font-size:24px; font-weight:500; color:#212529}
#main-franchise-section .part-heading h2:before {content:''; position:absolute; top:50%; left:0; right:0; height:2px; margin-top:-1px; background-color:#adb5bd}
#main-franchise-section .part-heading h2 span {position:relative; display:inline-block; padding:0 20px; background-color:#fff; z-index:5}
#main-franchise-section .col-form {padding-top:45px}
#main-franchise-section .tbl-counsel {width:100%; border-collapse:collapse}
#main-franchise-section .tbl-counsel th, #main-franchise-section .tbl-counsel td {padding:6px 0}
#main-franchise-section .tbl-counsel .form-number {margin-right:5px}
#main-franchise-section .tbl-counsel select.form-control {width:196px; margin-right:5px}
#main-franchise-section .col-info .top-logo {margin-top:-30px; text-align:right}
#main-franchise-section .col-info .info-text {margin-top:30px; padding:30px 35px; border-radius:6px; background-color:#f7f7f7}
#main-franchise-section .col-info h3 {font-size:28px; font-weight:700; color:#153579; margin-bottom:20px}
#main-franchise-section .col-info h3:before {content:''; display:inline-block; width:14px; height:1px; margin-right:8px; background-color:#153579; vertical-align:9px; opacity:0.6}
#main-franchise-section .col-info h4 {font-size:19px; font-weight:500; color:#333}
#main-franchise-section .col-info p {font-size:15px; color:#777; line-height:1.6; margin-top:5px}
#main-franchise-section .col-info .agree-check-item {margin-top:20px; text-align:right}
#main-franchise-section .col-info .agree-check-item input[type=checkbox] {display:none}
#main-franchise-section .col-info .agree-check-item input[type=checkbox] + label {position:relative; margin:0; font-size:14px; cursor:pointer}
#main-franchise-section .col-info .agree-check-item input[type=checkbox] ~ span {font-size:14px; color:#228be6; margin-left:5px; cursor:pointer}
#main-franchise-section .col-info .agree-check-item input[type=checkbox] + label:before {content:''; display:inline-block; width:24px; height:24px; margin-right:8px; border:1px solid #ced4da; background-color:#fff; vertical-align:middle}
#main-franchise-section .col-info .agree-check-item input[type=checkbox]:checked + label:before {border-color:#212529; background-color:#212529}
#main-franchise-section .col-info .agree-check-item input[type=checkbox]:checked + label:after {content:''; position:absolute; top:50%; left:8px; display:block; width:6px; height:10px; margin-top:-6px; border-bottom:1px solid #fff; border-right:1px solid #fff; transform:rotate(40deg)}
#main-franchise-section .col-button {padding-top:60px}

.bt_left{font-size:15px;}

@-webkit-keyframes pop-icon {
	0% {-webkit-transform:translateY(0);transform:translateY(0)}
	50% {-webkit-transform:translateY(-15px);transform:translateY(-15px)}
	100% {-webkit-transform:translateY(0);transform:translateY(0)}
}

@keyframes pop-icon {
	0% {-webkit-transform:translateY(0);transform:translateY(0)}
	50% {-webkit-transform:translateY(-15px);transform:translateY(-15px)}
	100% {-webkit-transform:translateY(0);transform:translateY(0)}
}

/* main bottom section */
#main-bottom-section {background-color:#252525}
#main-bottom-section .info-item a {position:relative; display:block; height:100%; -webkit-box-shadow:20px 20px 40px 6px rgba(0,0,0,0.5); box-shadow:20px 20px 40px 6px rgba(0,0,0,0.5)}
#main-bottom-section .info-item figure {position:relative; overflow:hidden}
#main-bottom-section .info-item figure img {display:block; width:100%; -webkit-transition:-webkit-transform 1.2s; transition:-webkit-transform 1.2s; transition:transform 1.2s; transition:transform 1.2s, -webkit-transform 1.2s}
#main-bottom-section .info-item figure:after {content:''; position:absolute; left:0; bottom:0; right:0; height:55%; background:-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.6)), to(transparent)); background:linear-gradient(to top, rgba(0,0,0,0.6), transparent); -webkit-transition:height 0.3s, background 0.3s; transition:height 0.3s, background 0.3s}
#main-bottom-section .info-item .info-text {position:absolute; bottom:0; left:0; right:0; padding:40px 40px 50px; z-index:5}
#main-bottom-section .info-item .info-text h4 {position:relative; display:inline-block; font-size:20px; font-weight:700; color:#fff}
#main-bottom-section .info-item .info-text p {color:#fff; line-height:1.75; margin-top:20px; min-height:56px}
#main-bottom-section .info-item .info-text h4:after {content:''; position:absolute; bottom:-13px; left:0; right:0; height:2px; background-color:rgba(255,255,255,0.75); opacity:0; -webkit-transition:bottom 0.3s, opacity 0.3s; transition:bottom 0.3s, opacity 0.3s}
/*#main-bottom-section .info-item a:hover figure:after {height:60%; background:-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.7)), to(transparent)); background:linear-gradient(to top, rgba(0,0,0,0.7), transparent)}*/
#main-bottom-section .info-item a:hover figure img {-webkit-transform:scale(1.02, 1.02);transform:scale(1.02, 1.02)}
#main-bottom-section .info-item a:hover .info-text h4:after {bottom:-8px; opacity:1}

/* ===============================================
 * SUB PAGE
=============================================== */
/* hero */
#sub-hero {position:relative; overflow:hidden}
#sub-hero .hero-container {position:relative; height:600px; padding-left:15px; padding-right:15px; background:linear-gradient(to right, #335452, #38908b); background-size:cover; background-position:center center; background-repeat:no-repeat; -webkit-backface-visibility:hidden}
#sub-hero .hero-container.dimmed:before {content:''; position:absolute; top:0; left:0; bottom:0; right:0; background-color:#000; opacity:0.6; z-index:1}
#sub-hero .hero-container .hero-caption {position:relative; display:table; width:100%; height:100%; z-index:5}
#sub-hero .hero-container .hero-caption .hero-caption-inner {display:table-cell; padding-top:80px; text-align:center; vertical-align:middle}
#sub-hero .hero-container .hero-caption .hero-caption-inner h2 {font-size:60px; font-weight:300; color:#fff}
#sub-hero .hero-container .hero-caption .hero-caption-inner h3 {font-size:30px; font-weight:300; color:#fff; letter-spacing:0.25em; line-height:1.35; margin-top:20px; opacity:0.65}
#sub-hero .scroll-down {position:absolute; display:block; bottom:50px; left:50%; width:50px; height:50px; font-size:30px; font-weight:200; color:#fff; text-align:center; line-height:50px; margin-left:-25px; animation:subhero-arrow ease-in-out 1s infinite; z-index:5; cursor:pointer}
#sub-hero .scroll-down span:after {content:'\02193'}

@keyframes subhero-arrow {
	0% {opacity:0.5; transform:translateY(0)}
	50% {opacity:1; transform:translateY(15px)}
	100% {opacity:0.5; transform:translateY(0)}
}

/* subpage common */
#breadcrumb {border-bottom:1px solid #e9ecef}
#breadcrumb ul {font-size:0}
#breadcrumb ul li {display:inline-block; font-size:16px}
#breadcrumb ul li a {display:block; color:#868e96; margin-bottom:-1px; padding:15px 25px; border-bottom:3px solid transparent}
#breadcrumb ul li.active a {color:#000; border-color:#000}
#sub-container {position:relative; min-height:600px; overflow:hidden}
#sub-container:before, #sub-container:after {content:''; display:table}
#sub-container:after {clear:both}
.sub-section {position:relative; padding:100px 0}
.sub-section .main-heading {text-align:center; margin-bottom:80px}
.sub-section .main-heading h2 {font-size:56px; font-weight:700; color:#000}
.sub-section .main-heading h2 span {color:#228be6}
.sub-section .main-heading p {font-size:20px; font-weight:300; color:#777; margin-top:20px}

/* sub story section */
#sub-intro-section {background-image:url('../images/main_middle_sunrise_1.jpg'); background-size:cover; background-position:center center; background-repeat:no-repeat}
#sub-intro-section .intro-context {color:#fff}
#sub-intro-section .intro-context p {font-size:18px; font-weight:200; line-height:1.85; margin-bottom:40px}
#sub-intro-section .intro-context p strong {font-size:28px; font-weight:500; color:#228be6}
#sub-intro-section hr {display:block; margin:40px 0 !important; border-width:3px; border-color:rgba(255,255,255,0.5)}
#sub-intro-section .col-feature {position:relative; font-size:18px; font-weight:500; color:#fff; text-align:center}
#sub-intro-section .col-feature + .col-feature:before {content:''; position:absolute; display:block; top:50%; left:0; width:1px; height:26px; margin-top:-13px; background-color:#fff; opacity:0.2}
#sub-intro-section .col-feature img, #sub-intro-section .col-feature i {margin-right:15px}
#sub-intro-section .col-feature i {font-size:36px; vertical-align:-7px}
#sub-intro-section .col-feature strong {display:inline-block; color:#4dabf7}
#sub-story-section .row {padding:50px 0}
#sub-story-section .row .text-area {padding-left:50px}
#sub-story-section .row .text-area h3 {position:relative; font-size:28px; color:#343a40; letter-spacing:-0.05em; line-height:1.4; margin:0 0 10px; padding-bottom:50px}
#sub-story-section .row .text-area h3:after {content:''; position:absolute; bottom:20px; left:0; width:20px; height:3px; background-color:#228be6; transform:rotate(45deg)}
#sub-story-section .row .text-area p {font-size:17px; font-weight:300; color:#777; line-height:1.7; margin:0}
#sub-story-section .cross-row .text-area {padding-left:0; padding-right:50px; text-align:right}
#sub-story-section .cross-row .text-area h3:after {left:auto; right:0}

/*sub franchise section*/
#sub-franchise-section {}
#sub-franchise-section .interior-box {}
#sub-franchise-section .interior-box .box-heading {text-align:left; padding-bottom:30px; margin:0 auto}
#sub-franchise-section .interior-box .box-heading h3 {position:relative; display:inline-block; font-size:20px; font-weight:300; color:#333; padding-bottom:15px; padding-left:20px}
#sub-franchise-section .interior-box .box-heading h3:after {content:''; position:absolute; top:4px; left:0; display:block; width:6px; height:15px; background:#228be6; transform:skewX(-24deg)}
#sub-franchise-section .interior-box .box-heading h3 span {font-weight:500; color:#228be6}
#sub-franchise-section .interior-box .box-heading p {font-size:17px; font-weight:300; color:#777; line-height:1.7; word-break:keep-all}
#sub-franchise-section .interior-slide .slide-box {position:relative}
#sub-franchise-section .interior-slide .slide-box .slick-arrow {display:none !important}
#sub-franchise-section .interior-slide .slide-box .slick-arrow i {transition:all 0.3s ease; color:#000; opacity:0.5}
#sub-franchise-section .interior-slide .slide-box .slick-arrow:hover i {color:#000; opacity:1}
#sub-franchise-section .interior-slide .slide-box .slick-prev:hover i {transform:translateX(10px)}
#sub-franchise-section .interior-slide .slide-box .slick-next:hover i {transform:translateX(-10px)}
#sub-franchise-section .interior-slide .slide-box .slick-arrow.slick-prev {left:20px}
#sub-franchise-section .interior-slide .slide-box .slick-arrow.slick-next {right:20px}
#sub-franchise-section .interior-slide .slide-box .slide {outline:none !important}
#sub-franchise-section .interior-slide .slide-box .slide img {display:block; width:80%}
#sub-franchise-section .txt-box {border:0; padding:20px 30px; margin:0}
#sub-franchise-section .txt-box p {font-size:14px; font-weight:500; color:#333; line-height:1.7}
#sub-franchise-section .interior-slide .slide-nav {margin-top:50px}
#sub-franchise-section .interior-slide .slide-nav .slick-list .slide {position:relative; padding:0 10px; outline:none !important}
#sub-franchise-section .interior-slide .slide-nav .slick-list .slide.slick-current:after {content:''; display:block; position:absolute; top:0; left:10px; right:10px; bottom:0; border:7px solid rgba(34, 139, 230, 0.75)}
#sub-franchise-section .interior-slide .slide-nav .slick-arrow {position:absolute; top:50%; width:50px; height:60px; font-size:32px; color:#fff; margin-top:-30px; border:none; background-color:rgba(0,0,0,0.85); opacity:0.65; outline:none; transition:opacity 0.3s; z-index:10}
#sub-franchise-section .interior-slide .slide-nav .slick-arrow.slick-prev {left:0}
#sub-franchise-section .interior-slide .slide-nav .slick-arrow.slick-next {right:0}
#sub-franchise-section .interior-slide .slide-nav .slick-arrow:hover {opacity:0.85}

/* sub point section */
#sub-point-section .point-box .point-title {text-align:center; margin-bottom:60px}
#sub-point-section .point-box .point-title h3 {font-size:24px; font-weight:500; color:#228be6}
#sub-point-section .point-box .point-title h3:after {content:''; display:block; width:20px; height:3px; margin:30px auto 25px; background-color:#228be6; transform:rotate(-45deg)}
#sub-point-section .point-box .point-title p {font-size:17px; font-weight:300; color:#777; line-height:1.7; margin:0; padding:0; word-break:keep-all}
#sub-point-section .point-box .row {text-align:center}
#sub-point-section .point-box .point-area {min-height:370px; text-align:center; padding:10px 10px; border-top:5px solid transparent; background-color:#f9f9f9; overflow:hidden; transition:transform 0.3s ease}
#sub-point-section .point-box .point-area .point-icon img {border-radius:50%; margin:0 auto; border:5px solid transparent}
#sub-point-section .point-box .point-area01 .point-icon img {border-color:rgba(0,0,0,0.55)}
#sub-point-section .point-box .point-area02 .point-icon img {border-color:rgba(111,156,79,0.55)}
#sub-point-section .point-box .point-area03 .point-icon img {border-color:rgba(37,87,162,0.55)}
#sub-point-section .point-box .point-area04 .point-icon img {border-color:rgba(185,154,97,0.55)}
#sub-point-section .point-box .point-area .point-desc {margin-top:25px}
#sub-point-section .point-box .point-area .point-desc h4 {font-size:30px; font-weight:500}
#sub-point-section .point-box .point-area01 .point-desc h4 {color:#333}
#sub-point-section .point-box .point-area02 .point-desc h4 {color:#53733b}
#sub-point-section .point-box .point-area03 .point-desc h4 {color:#3d6280}
#sub-point-section .point-box .point-area04 .point-desc h4 {color:#b99a61}
#sub-point-section .point-box .point-area .point-desc h5 {display:inline-block; font-size:16px; font-weight:300; padding:10px 15px; margin:10px 0 15px}
#sub-point-section .point-box .point-area01 .point-desc h5 {background-color:#ddd}
#sub-point-section .point-box .point-area02 .point-desc h5 {background-color:#add491}
#sub-point-section .point-box .point-area03 .point-desc h5 {background-color:#c7dae8}
#sub-point-section .point-box .point-area04 .point-desc h5 {background-color:#f3e3c0}
#sub-point-section .point-box .point-area .point-desc p {font-size:14px}
#sub-point-section .point-box .point-area01 {border-color:#333}
#sub-point-section .point-box .point-area02 {border-color:#6f9c4f}
#sub-point-section .point-box .point-area03 {border-color:#3977ab}
#sub-point-section .point-box .point-area04 {border-color:#b99a61}

/* new section style (2019-08-04) */
.sub-simple-section01 .col-text h3 {position:relative; font-size:21px; font-weight:500; color:#337ab7; line-height:1.5; margin-bottom:20px; padding-bottom:15px}
.sub-simple-section01 .col-text h3:after {content:''; position: absolute; bottom:0; left:0; width:0; height:1px; background-color:#337ab7; transition:0.35s cubic-bezier(0.925, 0.145, 0.625, 0.995); transition-delay:0.8s}
.sub-simple-section01 .col-text.aos-animate h3:after {width:100%}
.sub-simple-section01 .col-text p {color:#777; line-height:1.6}
.sub-simple-section01 .col-text p + p {margin-top:15px}


.sub-simple-section01 .heading {font-size:28px; font-weight:normal; color:#2b2b2b; margin-bottom:30px; text-align:center;}
.sub-simple-section01 .heading strong {position:relative; font-weight:normal; color:#153579; z-index:5}
.sub-simple-section01 .heading strong:before {content:''; position:absolute; display:block;  left:0; bottom:4px; width:0; height:12px; background-color:#1390fd; opacity:0.2; z-index:-1; transition:0.35s cubic-bezier(0.925, 0.145, 0.625, 0.995); transition-delay:0.8s}
.sub-simple-section01 .heading.aos-animate strong:before {width:100%}
.sub-simple-section01 p {color:#777; line-height:1.7}
.sub-simple-section01 p + p {margin-top:15px}


/* .sub-simple-section02 추가한부분 시작*/
.sub-simple-section01 .col-img {margin-bottom:30px}
.sub-simple-section02 .heading {font-size:28px; font-weight:normal; color:#2b2b2b; margin-bottom:30px; text-align:center;}
.sub-simple-section02 .heading strong {position:relative; font-weight:normal; color:#153579; z-index:5}
.sub-simple-section02 .heading strong:before {content:''; position:absolute; display:block;  left:0; bottom:4px; width:0; height:12px; background-color:#1390fd; opacity:0.2; z-index:-1; transition:0.35s cubic-bezier(0.925, 0.145, 0.625, 0.995); transition-delay:0.8s}
.sub-simple-section02 .heading.aos-animate strong:before {width:100%}
.sub-simple-section02 p {color:#777; line-height:1.7}
.sub-simple-section02 p + p {margin-top:15px}
.sub-simple-section02 .col-img {margin-bottom:30px}
/* .sub-simple-section02 추가한부분 종료*/


.sub-simple-section03 {background-color:#f7f7f7}
.sub-simple-section03 .heading {font-size:28px; font-weight:normal; color:#2b2b2b; margin-bottom:30px}
.sub-simple-section03 .heading strong {position:relative; font-weight:normal; color:#153579; z-index:5}
.sub-simple-section03 .heading strong:before {content:''; position:absolute; display:block;  left:0; bottom:4px; width:0; height:12px; background-color:#1390fd; opacity:0.2; z-index:-1; transition:0.35s cubic-bezier(0.925, 0.145, 0.625, 0.995); transition-delay:0.8s}
.sub-simple-section03 .heading.aos-animate strong:before {width:100%}
.sub-simple-section03 p {color:#777; line-height:1.7}
.sub-simple-section03 p + p {margin-top:15px}

.sub-simple-section05 .col-img {margin-bottom:30px}

/* ===============================================
 * MEDIA QUERY
=============================================== */
/* PC 이상 */
@media (min-width:1200px) {

}

/* 태블릿 이상 */
@media (min-width:992px) {
	/* SUB PAGE */
	/* sub point section */
	#sub-point-section .point-box .point-area:hover {transform:translateY(-10px)}
}

/* 태블릿 이하 */
@media (max-width:991px) {
	/* MAIN PAGE */
	/* hero */
	#main-hero .hero-caption-wrap {padding-left:0}
	#main-hero .hero-caption-wrap .hero-caption {max-width:60%; padding:50px}
	#main-hero .hero-caption-wrap .hero-caption h2 {font-size:32px}
	#main-hero .hero-caption-wrap .hero-caption p {font-size:18px}
	#main-hero .slick-arrow.slick-prev {left:20px}
	#main-hero .slick-arrow.slick-next {right:20px}
	#main-hero .slick-dots {bottom:50px}

	/* main banner section */
	#main-banner-section .info-item {margin-top:30px}

	/* main parallax section */
	#main-parallax-section .line-grid-wrap {background-image:url(../images/main_parallax_line_sm.png); background-position:center top 25px}

	/* main franchise section */
	#main-franchise-section .col-form {padding-top:0}
	#main-franchise-section .col-form input[type=text], #main-franchise-section .col-form select {max-width:inherit !important}
	#main-franchise-section .col-info {margin-top:40px}
	#main-franchise-section .col-info .top-logo {margin-top:0}

	/* main bottom section */
	#main-bottom-section .info-item .info-text {padding:30px}
	#main-bottom-section .info-item .info-text p br {display:none}

	/* SUB PAGE */
	/* sub story section */
	#sub-story-section .row-table {display:block; width:auto}
	#sub-story-section .row-table > *[class^="col"] {display:block}
	#sub-story-section .row .text-area {padding:40px 0 0}
	#sub-story-section .cross-row .text-area {padding-right:0; text-align:left}
	#sub-story-section .cross-row .text-area h3:after {left:0; right:auto}

	/* sub point section */
	#sub-point-section .point-item {margin-bottom:50px}
	#sub-point-section .point-box .point-area {max-height:inherit; min-height:370px}
}

/* 모바일 이상 */
@media (min-width:768px) {
	.img-pc {display:block !important}
	.img-mobile {display:none !important}
	.fixed-bg {background-attachment:fixed}

	/* main parallax section */
	#main-parallax-section .col-img figure:hover {transform:translateY(-15px)}
	#main-parallax-section .col-img figure:hover:before {opacity:0.42}
	#main-parallax-section .col-img figure:hover img {transform:scale(1.05)}
}

/* 모바일 기기 */
@media (max-width:767px) {
	.img-pc {display:none !important}
	.img-mobile {display:block !important}
	.common-heading {margin-bottom:50px}
	.common-heading .heading-num {font-size:14px}
	.common-heading .heading-num:before, .common-heading .heading-num:after {vertical-align:4px}
	.common-heading h2 {font-size:30px}
	.common-heading h2:after {width:30px}
	.common-heading p {font-size:15px; line-height:1.6}

	/* MAIN PAGE */
	/* hero */
	#main-hero .hero-caption-wrap .hero-caption {max-width:90%; padding:35px}
	#main-hero .hero-caption-wrap .hero-caption h2 {font-size:24px}
	#main-hero .hero-caption-wrap .hero-caption p {font-size:14px}
	#main-hero .hero-caption-wrap .hero-caption .line.left {width:3px}
	#main-hero .hero-caption-wrap .hero-caption .line.top {height:3px}
	#main-hero .hero-caption-wrap .hero-caption .line.right {width:3px}
	#main-hero .hero-caption-wrap .hero-caption .line.bottom {height:3px}
	#main-hero .slick-arrow {display:none !important}

	/* main page common */
	section.main-section {padding:60px 0}

	/* main shortcut section */
	#main-shortcut-section .shortcut-item {margin-bottom:20px}
	#main-shortcut-section .shortcut-item a .text {padding:25px 20px}
	#main-shortcut-section .shortcut-item a .text h4 {font-size:16px}
	#main-shortcut-section .shortcut-item a .text p {font-size:12px}
	#main-shortcut-section .shortcut-item a .text p br {display:none}
	/* #main-shortcut-section .shortcut-item a:before {opacity:1} */
	/* #main-shortcut-section .shortcut-item a:after {opacity:1; -webkit-transform:rotate(180deg); transform:rotate(180deg)} */

	/* main banner section */
	#main-banner-section {padding:60px 0}
	#main-banner-section .heading-item h2 {font-size:26px}
	#main-banner-section .heading-item h3 {font-size:18px}
	#main-banner-section .info-item p {font-size:14px}
	#main-banner-section .info-item a {font-size:14px}
	#main-banner-section .info-item a:after {bottom:-5px; height:2px}
	#main-banner-section .info-item a:hover:after {bottom:-7px}

	/* main parallax section */
	#main-parallax-section .line-grid-wrap {background-image:url(../images/main_parallax_line_xs.png); background-position:center top}
	#main-parallax-section .icon-item img {max-width:85px}
	#main-parallax-section .icon-item span {font-size:13px}
	#main-parallax-section .icon-item.item-1 {margin-top:60px}
	#main-parallax-section .icon-item.item-2 {margin-top:0}
	#main-parallax-section .icon-item.item-3 {margin-top:70px}
	#main-parallax-section .col-img + .col-img {margin-top:30px}
	#main-parallax-section .col-img figure figcaption {font-size:17px}
	#main-parallax-section .col-img figure:before {opacity:0.42}

	/* main franchise section */
	#main-franchise-section .part-heading {margin-bottom:50px}
	#main-franchise-section .part-heading h2 {font-size:20px}
	#main-franchise-section .tbl-counsel {margin-bottom:45px}
	#main-franchise-section .tbl-counsel th, #main-franchise-section .tbl-counsel td {font-size:13px; padding:6px}
	#main-franchise-section .tbl-counsel .form-number {display:inline-block; width:calc(33.333334% - 6px); margin-right:5px; padding:10px}
	#main-franchise-section .tbl-counsel .form-number:last-child {margin-right:0}
	#main-franchise-section .tbl-counsel select.form-control {width:100%; margin-bottom:10px}
	#main-franchise-section .col-info .info-text {padding:25px}
	#main-franchise-section .col-info h3 {font-size:20px}
	#main-franchise-section .col-info h3:before {content:''; display:inline-block; width:14px; height:1px; margin-right:8px; background-color:#153579; vertical-align:9px; opacity:0.6}
	#main-franchise-section .col-info h4 {font-size:16px}
	#main-franchise-section .col-info p {font-size:14px}
	#main-franchise-section .col-info .agree-check-item {margin-top:15px;}
	#main-franchise-section .col-info .agree-check-item input[type=checkbox] + label {font-size:13px}
	#main-franchise-section .col-info .agree-check-item input[type=checkbox] ~ span {font-size:13px}
	#main-franchise-section .col-button {padding-top:45px}

	/* main bottom section */
	#main-bottom-section .info-item {margin-bottom:40px}
	#main-bottom-section .info-item .info-text h4 {font-size:18px}
	#main-bottom-section .info-item .info-text p {font-size:15px; min-height:inherit}

	/* SUB PAGE */
	/* hero */
	#sub-hero .hero-container {height:350px}
	#sub-hero .hero-container .hero-caption .hero-caption-inner {padding-top:40px}
	#sub-hero .hero-container .hero-caption .hero-caption-inner h2 {font-size:40px}
	#sub-hero .hero-container .hero-caption .hero-caption-inner h3 {font-size:20px}

	/* subpage common */
	#breadcrumb .container {padding-left:0; padding-right:0}
	#breadcrumb ul li {font-size:12px}
	#breadcrumb ul li a {padding:12px 9px}
	.sub-section {padding:60px 0}
	.sub-section .main-heading {margin-bottom:45px}
	.sub-section .main-heading h2 {font-size:38px}
	.sub-section .main-heading p {font-size:16px}

	/* sub story section */
	#sub-intro-section .intro-context p {font-size:14px; margin-bottom:25px}
	#sub-intro-section .intro-context p strong {font-size:18px}
	#sub-intro-section hr {margin:30px 0 !important}
	#sub-intro-section .col-feature {font-size:14px; text-align:left; margin-bottom:20px}
	#sub-intro-section .col-feature + .col-feature:before {display:none}
	#sub-intro-section .col-feature img, #sub-intro-section .col-feature i {margin-right:10px}
	#sub-intro-section .col-feature i {font-size:26px; vertical-align:-4px}
	#sub-story-section .row {padding:35px 0}
	#sub-story-section .row .text-area {padding:25px 0 0}
	#sub-story-section .row .text-area h3 {font-size:20px}
	#sub-story-section .row .text-area p {font-size:14px}

	/* sub interior section */
	#sub-franchise-section .interior-box .box-heading h3 {font-size:18px}
	#sub-franchise-section .interior-box .box-heading p {font-size:14px}
	#sub-franchise-section .interior-slide .slide-nav .slick-list .slide {padding:0 5px}
	#sub-franchise-section .interior-slide .slide-nav .slick-list .slide.slick-current:after {left:5px; right:5px; border-width:4px}
	#sub-franchise-section .interior-slide .slide-nav .slick-arrow {width:40px; height:50px; font-size:26px; margin-top:-25px}

	/* sub point section */
	#sub-point-section .point-box .point-title h3 {font-size:20px}
	#sub-point-section .point-box .point-title h3:after {margin:25px auto 20px}
	#sub-point-section .point-box .point-title p {font-size:14px}
	#sub-point-section .point-item {margin-bottom:30px}
	#sub-point-section .point-box .point-area {min-height:inherit}
	#sub-point-section .point-box .point-area .point-icon {width:50%; margin:auto}
	#sub-point-section .point-box .point-area .point-desc h4 {font-size:20px}
	#sub-point-section .point-box .point-area .point-desc h5 {font-size:15px}
	#sub-point-section .point-box .point-area .point-desc p {word-break:keep-all}

	/*카카오톡상담 아이콘*/
	#fixedbutton {
    position: fixed;
    bottom: 100px;
    right: 20px; 
	z-index:800;
	}

    /* new section style (2019-08-04) */
    .sub-simple-section01 .col-text {margin-top:30px}
    .sub-simple-section01 .col-text h3 {font-size:17px}
    .sub-simple-section01 .col-text p {font-size:14px}
    .sub-simple-section02 .col-img + .col-img {margin-top:30px}

    .sub-simple-section03 {background-color:#f7f7f7}
    .sub-simple-section03 .heading {font-size:20px}
    .sub-simple-section03 .heading strong:before {height:8px}
    .sub-simple-section03 p {font-size:14px}

    .sub-simple-section04 .col-img + .col-img {margin-top:30px}


}