@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(icon.css);

body, html { width:100%; /*height:100%;*/ }
body { font-family:"Noto Sans KR", "Malgun Gothic", Gulim, Dotum, sans-serif; }

hr { max-width:50px; border-width:3px; border-color:#00bdcd; }
hr.light { border-color:#fff; }
a { color:#00bdcd; transition:all .2s; }
a:hover { color:#00bdcd; }
h1, h2, h3, h4, h5, h6 { font-family:"Noto Sans KR", "Malgun Gothic", Gulim, Dotum, sans-serif; }

::-moz-selection { color:#fff; background:#212529; text-shadow:none; }
::selection { color:#fff; background:#212529; text-shadow:none; }
img::selection { color:#fff; background:0 0; }
img::-moz-selection { color:#fff; background:0 0; }


/************************************************************
	[PAGE]
************************************************************/
/************ [NAV] ************/
#mainNav { border-bottom:1px solid rgba(33,37,41,.1); background-color:#fff; font-family:"Noto Sans KR", "Malgun Gothic", Gulim, Dotum, sans-serif; transition:all .2s }
#mainNav .navbar-brand { color:#00bdcd; font-weight:700; font-family:"Noto Sans KR", "Malgun Gothic", Gulim, Dotum, sans-serif; text-transform:uppercase; }
#mainNav .navbar-brand { background-repeat:no-repeat; background-position:0; background-size:auto 100%; text-indent:-9999px; white-space:nowrap; overflow: hidden; }
#mainNav .navbar-brand:focus,
#mainNav .navbar-brand:hover { color:#00bdcd; }
#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus { color:#212529; font-size:.9rem; font-weight:500; text-transform:uppercase; }
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover { color:#00bdcd; }
#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active { background-color:transparent; color:#00bdcd !important; }
#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover { background-color:transparent; }
.navbar-light .navbar-toggler { border-color:rgba(0, 0, 0, 0); }

/*** Responsive ***/
@media (min-width:992px) {
	#mainNav { padding-top:1rem; padding-bottom:1rem; background-color:#fff; }
	#mainNav .navbar-brand { color:rgba(255,255,255,.7); }
	#mainNav .navbar-brand:focus,
	#mainNav .navbar-brand:hover { color:#fff; }
	#mainNav .navbar-nav > li.nav-item > a.nav-link { padding:.5rem 1rem; }
	#mainNav .navbar-nav > li.nav-item > a.nav-link,
	#mainNav .navbar-nav > li.nav-item > a.nav-link:focus { color:rgba(0,0,0,1); font-size:1rem; font-weight:500; }
	#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover,
	#mainNav .navbar-nav > li.nav-item > a.nav-link:hover { color:#fff; }
	#mainNav.navbar-shrink { padding:0.5rem 1rem; border-bottom:1px solid rgba(33,37,41,.1); background-color:rgba(255,255,255,.9); }
	#mainNav.navbar-shrink .navbar-brand { color:#00bdcd; }
	#mainNav.navbar-shrink .navbar-brand:focus,
	#mainNav.navbar-shrink .navbar-brand:hover { color:#00bdcd; }
	#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
	#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus { color:#212529; font-size:.9rem; font-weight:500; }
	#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover,
	#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover { color:#00bdcd; }
}

/************ [HEADER] ************/
header.masthead { padding-top:10rem; padding-bottom:calc(10rem - 56px); background-repeat:no-repeat; background-position:center center; background-size:cover; }
header.masthead hr { margin-top:30px; margin-bottom:30px; }
header.masthead h1 { font-size:2rem; }
header.masthead p { font-weight:300; }

/*** Responsive ***/
@media (min-width:768px) {
	header.masthead strong { font-size:1.5rem; }
	header.masthead p { font-size:1.15rem; }
}
@media (min-width:992px) {
	header.masthead { height:100vh; /*min-height:650px;*/ padding-top:0; padding-bottom:0; }
	header.masthead h1,
	header.masthead h1 strong { font-size:3rem; }
}
@media (min-width:1200px) {
	header.masthead h1,
	header.masthead h1 strong { font-size:4rem; }
}

.btn-apply { background-color:#ffd800; border-color:#ffd800; color:#e7124e !important; font-size:.9rem; }
#mainNav.navbar-shrink .btn-apply { font-size:.85rem; font-weight:600; }
.btn-apply:hover { background-color:#ffae00; border-color:#ffae00; color:#fff !important; }
.btn-apply:focus,
.btn-apply.focus { box-shadow:0 0 0 0 rgba(255, 193, 7, 0); }
.btn-apply.disabled,
.btn-apply:disabled { background-color:#ffd800; border-color:#ffd800; color:#e7124e; }
.btn-apply:not(:disabled):not(.disabled):active,
.btn-apply:not(:disabled):not(.disabled).active { background-color:#ffd800 !important; border-color:#ffd800; color:#e7124e !important; }
.btn-apply:not(:disabled):not(.disabled):active:focus,
.btn-apply:not(:disabled):not(.disabled).active:focus { color:#e7124e !important; }

/************ [SECTION] ************/
section { padding:4rem 0; }
section h2.section-heading { margin-top:0; margin-bottom:5px; font-size:22px; }
section .section-subheading { margin-bottom:35px; font-size:12px; font-weight:400; text-transform:none; }
/*** Responsive ***/
@media (min-width:576px) {
	section h2.section-heading { font-size:28px; }
	section .section-subheading { margin-bottom:25px; font-size:16px; }
}
@media (min-width:768px) {
	section { padding:6rem 0; }
	section h2.section-heading { font-size:36px; }
	section .section-subheading { font-size:16px; }
}
@media (min-width:992px) {
	section { padding:8rem 0; }
}

/********* Segment : Carousel *********/
.swiper-container { width:100%; height:100%; margin:0 auto; padding:0; position:relative; list-style:none; overflow:hidden; z-index:1; }
.swiper-wrapper { width:100%; height:100%; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; position:relative; -webkit-transition-property:-webkit-transform; transition-property:-webkit-transform; -o-transition-property:transform; transition-property:transform; transition-property:transform, -webkit-transform; z-index:1; }
.swiper-container-android .swiper-slide,
.swiper-wrapper { -webkit-transform:translate3d(0px, 0, 0); transform:translate3d(0px, 0, 0); }
.swiper-slide { width:100%; height:100%; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; -webkit-flex-shrink:0; -ms-flex-negative:0; flex-shrink:0; position:relative; -webkit-transition-property:-webkit-transform; transition-property:-webkit-transform; -o-transition-property:transform; transition-property:transform; transition-property:transform, -webkit-transform; background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:cover; text-align:center; }
.swiper-slide img { width:100%; }
/*** Paginaition ***/
.swiper-pagination { position:absolute; text-align:center; -webkit-transition:300ms opacity; -o-transition:300ms opacity; transition:300ms opacity; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); z-index:10; }
.swiper-pagination.swiper-pagination-hidden { opacity:0; }
.swiper-pagination.swiper-pagination-bullets { width:100%; bottom:10px; left:0; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width:8px; height:8px; margin:0 4px; display:inline-block; border-radius:100%; background-color:#fff; opacity:0.5; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active { background-color:#000; opacity:1; }
/*** Prev, Next Button ***/
.swiper-button-next,
.swiper-button-prev { width:27px; height:44px; margin-top:-22px; position:absolute; top:50%; background-size:27px 44px; background-position:center; background-repeat:no-repeat; cursor:pointer; z-index:10; }
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled { opacity:0.35; cursor:auto; pointer-events:none; }
.swiper-button-prev { right:auto; left:20px; }
.swiper-button-next { right:20px; left:auto; }
.swiper-button-next:before,
.swiper-button-prev:before,
.swiper-button-next:after,
.swiper-button-prev:after { content:''; width:20px; height:20px; margin-top:-10px; margin-left:-10px; display:block; position:absolute; top:50%; left:50%; -webkit-transform:rotate(-135deg); -ms-transform:rotate(-135deg); transform:rotate(-135deg); cursor:pointer; z-index:2; }
.swiper-button-next:after,
.swiper-button-prev:after { margin:-20px; z-index:1; }

/*** Responsive ***/
@media (min-width:576px) {
	.swiper-button-prev { left:30px; }
	.swiper-button-next { right:30px; }
	.swiper-button-next:before,
	.swiper-button-prev:before,
	.swiper-button-next:after,
	.swiper-button-prev:after { width:30px; height:30px; margin-top:-15px; margin-left:-15px; }	
}
@media (min-width:992px) {
	.swiper-button-prev { left:40px; }
	.swiper-button-next { right:40px; }
	.swiper-button-next:before,
	.swiper-button-prev:before,
	.swiper-button-next:after,
	.swiper-button-prev:after { width:40px; height:40px; margin-top:-20px; margin-left:-20px; }	
}

/********* Segment : Image *********/
.img-segment.segment-wrap { padding:0; }
.img-segment .img-item { width:100%; margin:0 auto; }
.img-segment .img-item img { width:100%; }
/*** Responsive ***/
@media (min-width:577px) {
	.img-responsive .img-item-m { display:none; }
}
@media (max-width:576px) {
	.img-responsive .img-item-d { display:none; }
}

/********* Segment : BG Image *********/
.bg-segment { background-repeat:no-repeat; background-position:center center; background-size:cover; }



/********* Segment :  *********/
.service-box { max-width:400px; }
.portfolio-box { max-width:650px; margin:0 auto; position:relative; display:block; }
.portfolio-box .portfolio-box-caption { width:100%; height:100%; display:block; position:absolute; bottom:0; text-align:center; opacity:0; color:#fff; background:rgba(240,95,64,.9); transition:all .2s; }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content { width:100%; position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); text-align:center; }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { padding:0 15px; font-family:"Noto Sans KR", "Malgun Gothic", Gulim, Dotum, sans-serif; }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { font-size:14px; font-weight:600; text-transform:uppercase; }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-size:18px; }
.portfolio-box:hover .portfolio-box-caption { opacity:1; }
.portfolio-box:focus { outline:0; }
/*** Responsive ***/
@media (min-width:768px) {
	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { font-size:16px; }
	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-size:22px; }
}

/********* Segment : Form *********/
/*** Responsive ***/
@media (max-width:575px) {
	.form-segment .row + .row { margin-top:0 !important; }	
}

/********** Segment : Footer **********/
.bd-footer { font-size:75%; text-align:left; }
.bd-footer a { font-weight:500; color:#495057; }
.bd-footer a:focus,
.bd-footer a:hover { color:#007bff; }
.bd-footer p { margin-bottom:0; color:rgba(255,255,255,.5); }

/********* Form *********/
/****** Layout ******/
form { width:100%; }
.form-col-basic { padding-top:1rem; }
.form-col-basic .form-group { min-width:100%; margin-bottom:0.5rem;  }
.form-col-terms { margin:1.5rem auto 0; border-top:1px solid rgba(0, 0, 0, .15); }
/*** Responsive ***/
@media (min-width:768px) {
	.form-col-basic { -ms-box-orient:horizontal; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; }
	.form-col-basic .form-group { min-width:50%; width:50%; margin-right:0; margin-left:0; }
	.form-col-terms { margin:3rem auto 0; }
}

/****** Label ******/
.col-form-label,
.custom-control-label { font-size:0.85rem; font-weight:500; }
.col-form-label { padding-right:15px; text-align:right; }
.col-form-label + div { padding-left:0; }

.custom-control-label { line-height:1.5; padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); padding-left:1.5rem; cursor:pointer; }
.custom-control-label .required { color:#ff0000; font-size:0.8rem; }
.custom-control-label .required-no { color:#888; font-size:0.8rem; }

/****** Field ******/
.form-control { height:34px; font-size:0.85rem; border-color:rgba(0,0,0,.05); }
.form-control:focus { box-shadow:0 0 0 0 rgba(0, 123, 255, 0) !important; }

/****** Add on ******/
.input-group-append { height:34px; }
.input-group-text { min-width:50px; font-size:0.85rem; }

/****** Select ******/
.form-control-select { position:relative; }
.form-control-select:before { content:''; width:0; height:0; position:absolute; top:14px; right:14px; border-left:5px solid transparent; border-right:5px solid transparent; border-top-width:7px; border-top-style:solid; border-top-color:#333; pointer-events:none; z-index:3; }
.form-control-select select { -webkit-appearance:none; -moz-appearance:button; appearance:button; }
.form-control-select select::-ms-expand { display:none; background:transparent; border:0; color:transparent; }
.form-control-select select.form-control:not([size]):not([multiple]) { height:auto; }

/****** Checkbox & Radio ******/
.custom-control { padding-left:0; }
.input-group > .custom-control { width:1%; margin-bottom:0; position:relative; -ms-flex:1 1 auto; flex:1 1 auto; }
.custom-control-label::before { top:0.55rem; left:0; background-color:#fff; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow:0 0 0 0 #fff, 0 0 0 0 rgba(0, 123, 255, 0) !important; }
.custom-control-input:disabled ~ .custom-control-label { color:#212529; opacity:.5; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color:#fff !important; }
/*** radio ***/
.custom-radio .custom-control-input ~ .custom-control-label::after { width:0.5rem; height:0.5rem; top:0.82rem; left:0.25rem; background-color:rgba(0, 0, 0, .05); border-radius:100px; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image:none; background-color:#00bdcd; }
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color:rgba(255, 255, 255, 0.5); }
.custom-radio .custom-control-input:disabled:checked ~.custom-control-label::after { background-color:rgba(0, 0, 0, 0.5); }
/*** check box ***/
.custom-checkbox .custom-control-input ~ .custom-control-label::after { content:'\f00c'; top:0.52rem; left:0.15rem; color:rgba(0, 0, 0, .05); font-family:'Icons'; font-size:0.75rem; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image:none; color:#00bdcd !important; }
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color:rgba(255, 255, 255, 0.5); }
.custom-checkbox .custom-control-input:disabled:checked ~.custom-control-label::after { color:rgba(0, 0, 0, 0.5); }

.form-checkbox-all { margin-bottom:0; padding:0.5rem 1rem; background-color:rgba(255,255,255,.2); border-bottom:1px solid rgba(0, 0, 0, 0.1); }
.form-checkbox-all .custom-control {}
.form-checkbox-all .custom-checkbox .custom-control-input {}
.form-checkbox-all .custom-checkbox .custom-control-label { font-size:1rem; font-weight:500; }
.form-checkbox-all .custom-checkbox .custom-control-label::before { width:1.2rem; height:1.2rem; }
.form-checkbox-all .custom-checkbox .custom-control-input ~ .custom-control-label::after { top:0.62rem; left:0.25rem; }
.form-checkbox-sub { padding:0.2rem 1rem; background-color:rgba(255,255,255,.2); }
.form-checkbox-sub .custom-control {}
.form-checkbox-sub .custom-checkbox .custom-control-input {}
.form-checkbox-sub .custom-checkbox .custom-control-label {}
.form-checkbox-sub .custom-checkbox .custom-control-label::before,
.form-checkbox-sub .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color:transparent; border-color:transparent; }
.form-checkbox-sub .custom-checkbox .custom-control-input ~ .custom-control-label::after { color:rgba(0, 0, 0, .25); }

.input-group .custom-control + .input-group-append { position:relative; }
.input-group .custom-control + .input-group-append > .btn { min-width:50px; padding:0.0625rem 0.5rem !important; position:absolute; top:5px; right:0; border-radius:300px; font-size:0.85rem; }
/*** Responsive ***/
@media (min-width:576px) {	
	.input-group .custom-control + .input-group-append > .btn { min-width:70px; }
}

/****** Button ******/
.btn-form-apply { padding:0.4rem 2rem; font-size:1rem; }	
/*** Responsive ***/
@media (min-width:576px) {
	.btn-form-apply { padding:0.6rem 2rem; font-size:1.1rem; }
}
@media (min-width:768px) {
	.btn-form-apply { padding:1rem 2rem; font-size:1.1rem; }
}

/****** Error Feedback ******/
.invalid-feedback { margin-top:0.25rem; padding:.5rem; background-color:rgba(220, 53, 69, 1); border-radius:.2rem; color:#fff; font-size:80%; }
.was-validated .custom-control-input:invalid ~ .custom-control-label::before,
.custom-control-input.is-invalid ~ .custom-control-label::before { border:1px solid #efa2a9; }

/****** Sucess Feedback ******/
.was-validated .custom-control-input:valid ~ .custom-control-label,
.custom-control-input.is-valid ~ .custom-control-label { color:#212529; }
.was-validated .custom-control-input:valid ~ .custom-control-label::before,
.custom-control-input.is-valid ~ .custom-control-label::before { background-color:#fff; }
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.custom-select.is-valid { border-color:rgba(0,0,0,.05); }
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus { border-color:rgba(0,0,0,.05); box-shadow:0 0 0 0 rgba(40, 167, 69, 0); }




/************************************************************
	[ELEMENTS]
************************************************************/
/************ [ELEMENTS] ************/
/********* Scroll To Top *********/
.scroll-to-top { display:none; right:1rem; bottom:1rem; z-index:1042; }
.scroll-to-top a { width:3.5rem; height:3.5rem; background-color:rgba(33,37,41,.5); border-radius:100px; line-height:3.1rem; }
.scroll-to-top a:hover {text-decoration:none; }
.scroll-to-top a i { margin-top:0.1em; margin-right:0; font-size:1.5em; }

/********** Sticky Banner **********/
.sticky-bnr { right:1rem; top:15%; z-index:1042; }


/************ [ELEMENTS DESIGN] ************/
/********* Background *********/
.bg-primary { background-color:#00bdcd !important }
.bg-dark { background-color:#212529 !important }

/********* Text *********/
.text-primary { color:#00bdcd!important; }
.text-faded { color:rgba(255,255,255,.7); }

/********* Column ********* /
.col-sm-25, .col-sm-95 { position:relative; width:100%; min-height:1px; padding-right:15px; padding-left:15px; }
.col-sm-25 { -ms-flex:0 0 20.833333%; flex:0 0 20.833333%; max-width:20.833333%; }
.col-sm-95 { -ms-flex:0 0 79.166667%; flex:0 0 79.166667%; max-width:79.166667%; } */

/********* Button *********/
button:focus { outline:none; }

.btn { font-weight:500; font-family:"Noto Sans KR", "Malgun Gothic", Gulim, Dotum, sans-serif; text-transform:uppercase; }
.btn:active,
.btn:focus,
.btn.focus { box-shadow:0 0 0 0 rgba(0, 123, 255, 0) !important; }

.btn-rounded { border-radius:300px; }

.btn-primary { background-color:#00bdcd; border-color:#00bdcd; }
.btn-primary:hover { background-color:#33cad7; border-color:#33cad7; }
.btn-primary:focus,
.btn-primary.focus { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
.btn-primary.disabled,
.btn-primary:disabled { background-color:#00bdcd; border-color:#00bdcd; }
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active { background-color:#0097a4; border-color:#0097a4; }
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus { box-shadow:0 0 0 0 rgba(0, 123, 255, 0); }

.btn-outline-primary { border-color:#00bdcd; color:#00bdcd; }
.btn-outline-primary:hover { background-color:#00bdcd; border-color:#00aab8; }
.btn-outline-primary:focus,
.btn-outline-primary.focus { box-shadow:0 0 0 0 rgba(0, 123, 255, 0); }
.btn-outline-primary.disabled,
.btn-outline-primary:disabled { color:#00aab8; }
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active { background-color:#00aab8; border-color:#00aab8; }
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus { box-shadow:0 0 0 0 rgba(0, 123, 255, 0); }

/********* Modal *********/
.modal.fade .modal-dialog { -webkit-transform:translate(0, 0%); transform:translate(0, 0%); }
.modal-footer .btn { min-width:100px; }
.modal-backdrop.show { opacity:0.75; }
.modal iframe { border:none; }
.modal iframe:focus { outline:none; }
.modal iframe[seamless] { display:block; }

/********* State *********/
.element-hide { width:1px; height:1px; margin:-1px; padding:0; position:absolute; border:0; clip:rect(0 0 0 0); overflow:hidden; }