@charset "utf-8";


 *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

body {width:100%; height: 100%;margin: 0px; padding: 0px; position:relative; 
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-webkit-font-smoothing: antialiased;
}

body { background-color: #fff; color: #5a6c76;}
body {vertical-align: baseline; word-break: keep-all; word-wrap: break-word;}


@media only screen and (max-width:768px)
{
body { background-color: #fff; color: #252d30;}
}
/* ie 용 스크롤 바 *********************************************/
html {
            -ms-overflow-style: -ms-autohiding-scrollbar;
            scrollbar-arrow-color: #efefef;
            scrollbar-Track-Color: #efefef;
            scrollbar-base-color: #dfdfdf;
            scrollbar-Face-Color: #dfdfdf;
            scrollbar-3dLight-Color: #dfdfdf;
            scrollbar-DarkShadow-Color: #dfdfdf;
            scrollbar-Highlight-Color: #dfdfdf;
            scrollbar-Shadow-Color: #dfdfdf
        }

/* Chrome, Safari용 스크롤 바 */
::-webkit-scrollbar { width:6px;  background: rgba(223,223,223,0.9); }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); }

/* WebKit browsers */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #b0b0b0;font-size:12px;}

::-moz-placeholder { /* Firefox 19+ */
color: #b0b0b0;font-size:12px;}

:-ms-input-placeholder { /* IE 10+ */
color: #b0b0b0;font-size:12px;}

:-moz-placeholder { /* Firefox 18- */
color: #b0b0b0;font-size:12px;}

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { 
-webkit-text-size-adjust:none; }


h1, h2, h3, h4, h5, h6 { color: #5a6c76;  font-weight: 500;}


dl { margin: 0px; padding: 0px;}
dt { margin: 0px; padding: 0px;}
dd { margin: 0px; padding: 0px;}
ul { margin: 0px; padding: 0px;}
ol { margin: 0px; padding: 0px;}
h1 { margin: 0px; padding: 0px;}
h2 { margin: 0px; padding: 0px;}
h3 { margin: 0px; padding: 0px;}
h4 { margin: 0px; padding: 0px;}
h5 { margin: 0px; padding: 0px;}
h6 { margin: 0px; padding: 0px;}
form { margin: 0px; padding: 0px;}
fieldset { margin: 0px; padding: 0px;}
p { margin: 0px; padding: 0px; }
button { margin: 0px; padding: 0px;}
select { margin: 0px; padding: 0px;}
input { margin: 0px; padding: 0px;}
textarea { margin: 0px; padding: 0px;}
th { margin: 0px; padding: 0px;}
td { margin: 0px; padding: 0px;}
img { border: currentColor; border-image: none; vertical-align: top;}
ul { list-style: none;}
ol { list-style: none;}
fieldset { border: currentColor; border-image: none;}
table { border-collapse: collapse;}
caption { width: 0px; height: 0px; line-height: 0; overflow: hidden; font-size: 0px;}
img { padding: 0px; border: 0px currentColor; border-image: none;}

fieldset { padding: 0px; border: 0px currentColor; border-image: none;}
button { padding: 0px; border: 0px currentColor; border-image: none;}
button { background: none;}
input { vertical-align: middle;}
select { vertical-align: middle;}
legend { width: 0px; height: 0px; overflow: hidden; font-size: 0px; position: absolute;}


A:link {text-decoration:none; }
A:visited {text-decoration:none; }
A:active {text-decoration:none;}
A:hover {text-decoration:none;}


A.color-none:link {color: #5a6c76;}
A.color-none:visited {color: #5a6c76; }
A.color-none:active {color: #5a6c76;}
A.color-none:hover {color: #5a6c76;}





a, .btn, button, .m-over {text-decoration: none; outline: none;border-radius: 0;-webkit-transition: all 300ms linear 0s;
  -o-transition: all 300ms linear 0s;
  transition: all 300ms linear 0s; }

a:before, a:after, .btn:before, .btn:after, button:before, button:after, .m-over:before, .m-over:after {
    -webkit-transition: all 300ms linear 0s;
    -o-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s; }
a:hover, a:focus, .btn:hover, .btn:focus, button:hover, button:focus { outline: none; text-decoration: none; }

input:focus {outline:none;}
textarea:focus {outline:none;}


/* 구글 input 입력폼의 자동완성시 백그라운드 색상 변경 */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #f5f5f4 inset !important;
}







/****************************  
         loader  
***************************/
#loader {
  position: fixed;
  width: 96px;
  height: 96px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.24);
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .2s ease-out, visibility 0s linear .2s;
  -o-transition: opacity .2s ease-out, visibility 0s linear .2s;
  transition: opacity .2s ease-out, visibility 0s linear .2s;
   z-index:999999999999999999999999; }

#loader.fullscreen {
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  background-color: #fff;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none; 
 
  }

#loader.show {
  -webkit-transition: opacity .4s ease-out, visibility 0s linear 0s;
  -o-transition: opacity .4s ease-out, visibility 0s linear 0s;
  transition: opacity .4s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1; }

#loader .circular {
  -webkit-animation: loader-rotate 2s linear infinite;
  animation: loader-rotate 2s linear infinite;
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  display: block;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg); }

#loader .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: loader-dash 1.5s ease-in-out infinite;
  animation: loader-dash 1.5s ease-in-out infinite;
  stroke-linecap: round; }

@-webkit-keyframes loader-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes loader-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-webkit-keyframes loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -136px; } }

@keyframes loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -136px; } }



/****************************  
        사각 최상단으로 가기  
***************************/
/**********  사각형  
#go-top { width: 40px; height: 40px; text-align: center; border-radius: 4px; position: fixed; bottom: 30px; right: 30px;
  visibility: hidden; z-index: 1000;background:rgba(0, 0, 0, 0.5)}
#go-top i {font-size: 25px; line-height: 40px; color: #fff;}
#go-top:hover { cursor: pointer; background-color: #000000;}
#go-top:active { background-color: #000000;}
#go-top.show { opacity: 1; visibility: visible;}
***************/

/**********  원형  ***************/
#go-top {width: 44px; height: 44px; text-align: center; position: fixed; bottom: 30px; right: 30px;z-index: 1000;}

#go-top .top {position:relative; z-index:1;width: 44px; height: 44px;  border-radius: 50%; opacity:0.5!important; filter:alpha(opacity=50);}

#go-top .top:after {position:absolute;top:0; left:0;
    opacity:0.5!important; filter:alpha(opacity=50);
    z-index:-1; content:""; width: 44px; height: 44px;  border-radius: 50%; text-align: center;}
#go-top .top i {font-size: 1.5rem; line-height: 40px; color: #fff;z-index: 1000;}
#go-top .top p{color:#fff;}

#go-top .top:hover { cursor: pointer; opacity:1.0!important; filter:alpha(opacity=100);}
#go-top .top:active { background-color: #000000;}






/**************************** 
      parallax background  
***************************/
.panel { position: absolute;  top: 0;right: 0; left: 0; bottom: 0; width: 100%; height: 100%;
        background-repeat: no-repeat;  background-position: 50% 50%;background-size: contain;}
.panel2 { position: absolute;top: 0;right: 0; left: 0; bottom: 0;  background: rgba(0, 0, 0, 0.4);}


/****************************  
         section
***************************/
.section {width:100%;  height: 100%; padding: 0; margin:0 auto; position: relative; z-index:2;}



/****************************  
      컨텐츠 가로 사이즈 / pc, mobile 버전 
***************************/
 .main-container {position:relative; width:1170px; padding:0;margin: auto;z-index:2;}
 .container {position:relative; width:1170px; padding:0;margin: auto; z-index:2;}
 
.pc-mode {display:inline-block}
.mobile-mode {display:none}


 @media (max-width:1170px){
.main-container {width:95%;}
.container {width:95%;}
 }

 @media (max-width:980px){
 .main-container {width:95%;}
 .container {width:95%;}
 }

 @media (max-width:768px){
.main-container {width:95%;}
.container {width:95%; text-align:center}
.pc-mode { display:none }
.mobile-mode { display:inline-block }

 }

 @media (max-width:480px){
.main-container {width:100%;}
.container {width:90%;text-align:center}
 }



/****************************  
         배경
***************************/

.wave { width: 100%; overflow: hidden; position: absolute; z-index: 1; bottom: -150px;}
.cloud { width: 100%; overflow: hidden; position: absolute; z-index: 1; bottom: -10px;}


.division-bg {width:100%;height:98px; position: absolute;right: 0; left: 0; bottom: -3px; 
                    background: url("../../img/division-bg.png") no-repeat bottom center; background-size: 100% auto; z-index:3;}

.division-bg2 {width:100%;height:98px; position: absolute;right: 0; left: 0; top: -3px; 
                    background: url("../../img/division-bg2.png") no-repeat top center; background-size: 100% auto; z-index:3;}

.division-bg3 {width:100%;height:98px; position: absolute;right: 0; left: 0; top: -3px; 
                    background: url("../../img/division-bg3.png") no-repeat top center; background-size: 100% auto; z-index:3;}


.division-bg4 {width:100%;height:98px; position: absolute;right: 0; left: 0; bottom: -3px; 
                    background: url("../../img/division-bg4.png") no-repeat top center; background-size: 100% auto; z-index:3;}

.division-bg5 {width:100%;height:98px; position: absolute;right: 0; left: 0; top: -3px; 
                    background: url("../../img/division-bg5.png") no-repeat top center; background-size: 100% auto; z-index:3;}





.bg1 { background: #fafcfc;}
.bg2 { background: #83c4ff;}
.bg3 { background: #fafafa;}
.bg4 { background: #1a2428;}
.bg5 { background: rgba(26, 36, 40, 0.95); Opacity:0.8}


.bg-overlay {width:100%;height:100%; position: absolute;top: 0;right: 0; left: 0; bottom: 0; z-index:1; background-size: cover;}

/****************************  
         디폴트 칼라
***************************/

.df-color {color: #00b8d4; }
.df-bgcolor {background: #00b8d4; }
.df-bocolor {border: 1px solid #00b8d4;}

.df-bgcolor1 {background: #00b8d4; opacity: 0.1; }
.df-bgcolor2 {background: #00b8d4; opacity: 0.2;}
.df-bgcolor3 {background: #00b8d4; opacity: 0.3; }
.df-bgcolor4 {background: #00b8d4; opacity: 0.4; }
.df-bgcolor5 {background: #00b8d4; opacity: 0.5; }
.df-bgcolor6 {background: #00b8d4; opacity: 0.6; }
.df-bgcolor7 {background: #00b8d4; opacity: 0.7; }
.df-bgcolor8 {background: #00b8d4; opacity: 0.8; }
.df-bgcolor9 {background: #00b8d4; opacity: 0.9; }
.df-bgcolor10 {background: #00b8d4; opacity: 0.11; }

.df-bgimg1 {background: url("../../img/pattern.png") repeat center center rgba(0, 0, 0, 0.6);}
.df-bgimg2 {background: url("../../img/pattern4.png") repeat center center;opacity: 0.1; }


.df-bgimg3 { z-index: 99;  background-image: url("../../img/section-bgL.png");  background-position: left bottom;
  background-repeat: no-repeat;}
.df-bgimg4 { z-index: 99;  background-image: url("../../img/section-bgR.png");  background-position: right bottom;
  background-repeat: no-repeat;}
.df-bgimg5 { z-index: 99;  background-image: url("../../img/section-bgL.png");  background-position: left bottom;
  background-repeat: no-repeat; }
.df-bgimg6 { z-index: 99;  background-image: url("../../img/section-bgR.png");  background-position: right bottom;
  background-repeat: no-repeat; }
.df-bgimg7 { z-index: 99;  background-image: url("../../img/section-bgL01.png");  background-position: left bottom;
  background-repeat: no-repeat; }

.bg-size4780 {background-size: 47% 80%;}
.bg-size47 {background-size: 47% 100%;}
.bg-size60 {background-size: 60% 100%;}
.bg-size70 {background-size: 70% 100%;}
.bg-size80 {background-size: 80% 100%;}




/****************************  
       유튜브 배경
***************************/
.mbr-background-video, .mbr-background-video-preview  { position: absolute;  bottom: 0;  left: 0; right: 0; top: 0;}



/****************************  
        가운데 정렬
***************************/

.d-flex {  display: -webkit-box !important;  display: -ms-flexbox !important;  display: flex !important; }
.justify-center {  -webkit-box-pack: center !important;  -ms-flex-pack: center !important;  justify-content: center !important; }
.align-center {    -webkit-box-align: center !important; -ms-flex-align: center !important;  align-items: center !important; }

.ab-center{left: 50%; top: 50%; transform: translate(-50%, -50%); }

.relative {position: relative; }



/****************************  
         grid  
***************************/
.overflow {overflow:hidden;}

.row {width:100%; margin:0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.row-cen {width:100%; margin:0; position: relative; display: -webkit-box; display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;justify-content: center; }

.row-flex {display:-ms-flexbox!important;display:flex!important}
.row-between{-ms-flex-pack:justify!important;justify-content:space-between!important}




.col-md-1  {-ms-flex:0 0 8.333333%;  flex:0 0 8.333333%;  max-width:8.333333%}
.col-md-2  {-ms-flex:0 0 16.666667%; flex:0 0 16.666667%; max-width:16.666667%}
.col-md-3  {-ms-flex:0 0 25%;        flex:0 0 25%;        max-width:25%}
.col-md-4  {-ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%}
.col-md-5  {-ms-flex:0 0 41.666667%; flex:0 0 41.666667%; max-width:41.666667%}
.col-md-6  {-ms-flex:0 0 50%;        flex:0 0 50%;        max-width:50%}
.col-md-7  {-ms-flex:0 0 58.333333%; flex:0 0 58.333333%; max-width:58.333333%}
.col-md-8  {-ms-flex:0 0 66.666667%; flex:0 0 66.666667%; max-width:66.666667%}
.col-md-9  {-ms-flex:0 0 75%;        flex:0 0 75%;        max-width:75%}
.col-md-10 {-ms-flex:0 0 83.333333%; flex:0 0 83.333333%; max-width:83.333333%}
.col-md-11 {-ms-flex:0 0 91.666667%; flex:0 0 91.666667%; max-width:91.666667%}
.col-md-12 {-ms-flex:0 0 100%;       flex:0 0 100%;       max-width:100%}
.col-md-13  {-ms-flex:0 0 14.285%; flex:0 0 14.285%; max-width:14.285%}
.col-md-14  {-ms-flex:0 0 55%; flex:0 0 55%; max-width:55%}
.col-md-15  {-ms-flex:0 0 45%; flex:0 0 45%; max-width:45%}
.col-md-16 { -webkit-box-flex: 0;  -ms-flex: 0 0 60%;  flex: 0 0 60%;  max-width: 60%; }
.col-md-17 { -webkit-box-flex: 0; -ms-flex: 0 0 40%;  flex: 0 0 40%;  max-width: 40%;}
.col-md-18 { -webkit-box-flex: 0; -ms-flex: 0 0 100%;  flex: 0 0 100%;  max-width: 100%;}

.col-md-20 { -webkit-box-flex: 0; -ms-flex: 0 0 20%;  flex: 0 0 20%;  max-width: 20%;}

.col-md-40  {-ms-flex:0 0 40%; flex:0 0 40%; max-width:40%}
.col-md-60  {-ms-flex:0 0 60%; flex:0 0 60%; max-width:60%}

.col-md-35  {-ms-flex:0 0 35%; flex:0 0 35%; max-width:35%}
.col-md-65  {-ms-flex:0 0 65%; flex:0 0 65%; max-width:65%}



@media only screen and (max-width:768px)
 {
.col-md-1  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-2  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-3  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-4  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-5  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-6  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-7  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-8  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-9  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-10 {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-11 {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-16 {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-17 {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-20 {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-40 {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-60 {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}

.col-md-35  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}
.col-md-65  {-ms-flex:0 0 100%;  flex:0 0 100%;  max-width:100%}

.col-md-14  {-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%}
.col-md-15  {-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%}
 }


/* margin-top space */
.mt-10 {margin-top:10px;}
.mt-20 {margin-top:20px;}
.mt-30 {margin-top:30px;}
.mt-40 {margin-top:40px;}
.mt-50 {margin-top:50px;}
.mt-60 {margin-top:60px;}
.mt-80 {margin-top:80px;}
.mt-90 {margin-top:90px;}
.mt-100 {margin-top:100px;}
.mt-110 {margin-top:110px;}
.mt-120 {margin-top:120px;}

/* margin-bottom space */
.mb-10 {margin-bottom:10px;}
.mb-20 {margin-bottom:20px;}
.mb-30 {margin-bottom:30px;}
.mb-40 {margin-bottom:40px;}
.mb-50 {margin-bottom:50px;}
.mb-60 {margin-bottom:60px;}
.mb-80 {margin-bottom:80px;}
.mb-90 {margin-bottom:90px;}
.mb-100 {margin-bottom:100px;}
.mb-110 {margin-bottom:110px;}
.mb-120 {margin-bottom:120px;}



/* margin-left space */
.ml-10 {margin-left:10px;}
.ml-15 {margin-left:15px;}
.ml-20 {margin-left:20px;}
.ml-30 {margin-left:30px;}
.ml-40 {margin-left:40px;}
.ml-50 {margin-left:50px;}
.ml-60 {margin-left:60px;}
.ml-70 {margin-left:70px;}
.ml-80 {margin-left:80px;}
.ml-90 {margin-left:90px;}
.ml-100 {margin-left:100px;}
.ml-110 {margin-left:110px;}
.ml-120 {margin-left:120px;}

/* margin-right space */
.mr-10 {margin-right:10px;}
.mr-15 {margin-right:15px;}
.mr-20 {margin-right:20px;}
.mr-30 {margin-right:30px;}
.mr-40 {margin-right:40px;}
.mr-50 {margin-right:50px;}
.mr-60 {margin-right:60px;}
.mr-70 {margin-right:70px;}
.mr-80 {margin-right:80px;}
.mr-90 {margin-right:90px;}
.mr-100 {margin-right:100px;}
.mr-110 {margin-right:110px;}
.mr-120 {margin-right:120px;}


/* padding-top space */
.pt-10 {padding-top:10px;}
.pt-20 {padding-top:20px;}
.pt-30 {padding-top:30px;}
.pt-40 {padding-top:40px;}
.pt-50 {padding-top:50px;}
.pt-60 {padding-top:60px;}
.pt-70 {padding-top:70px;}
.pt-80 {padding-top:80px;}
.pt-90 {padding-top:90px;}
.pt-100 {padding-top:100px;}
.pt-110 {padding-top:110px;}
.pt-120 {padding-top:120px;}

/* padding-bottom space */
.pb-10 {padding-bottom:10px;}
.pb-20 {padding-bottom:20px;}
.pb-30 {padding-bottom:30px;}
.pb-40 {padding-bottom:40px;}
.pb-50 {padding-bottom:50px;}
.pb-60 {padding-bottom:60px;}
.pb-70 {padding-bottom:70px;}
.pb-80 {padding-bottom:80px;}
.pb-90 {padding-bottom:90px;}
.pb-100 {padding-bottom:100px;}
.pb-110 {padding-bottom:110px;}
.pb-120 {padding-bottom:120px;}

/* padding-left space */
.pl-10 {padding-left:10px;}
.pl-15 {padding-left:15px;}
.pl-20 {padding-left:20px;}
.pl-30 {padding-left:30px;}
.pl-40 {padding-left:40px;}
.pl-50 {padding-left:50px;}
.pl-60 {padding-left:60px;}
.pl-70 {padding-left:70px;}
.pl-80 {padding-left:80px;}
.pl-90 {padding-left:90px;}
.pl-100 {padding-left:100px;}
.pl-110 {padding-left:110px;}
.pl-120 {padding-left:120px;}

/* padding-right space */
.pr-10 {padding-right:10px;}
.pr-15 {padding-right:15px;}
.pr-20 {padding-right:20px;}
.pr-30 {padding-right:30px;}
.pr-40 {padding-right:40px;}
.pr-50 {padding-right:50px;}
.pr-60 {padding-right:60px;}
.pr-70 {padding-right:70px;}
.pr-80 {padding-right:80px;}
.pr-90 {padding-right:90px;}
.pr-100 {padding-right:100px;}
.pr-110 {padding-right:110px;}
.pr-120 {padding-right:120px;}



/*top bottom space */
.h-space20 {padding:20px 0 20px 0 }
.h-space30 {padding:30px 0 30px 0 }
.h-space40 {padding:40px 0 40px 0 }
.h-space50 {padding:50px 0 50px 0 }
.h-space60 {padding:60px 0 60px 0 }
.h-space70 {padding:70px 0 70px 0 }
.h-space80 {padding:80px 0 80px 0 }
.h-space90 {padding:90px 0 90px 0 }
.h-space100 {padding:100px 0 100px 0 }
.h-space120 {padding:120px 0 120px 0 }
.h-space140 {padding:140px 0 140px 0 }

/* top space */
.t-space20 {width:100%; padding: 20px 0 0px 0; margin:0; position: relative; }
.t-space40 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }
.t-space50 {width:100%; padding: 50px 0 0px 0; margin:0; position: relative; }
.t-space60 {width:100%; padding: 60px 0 0px 0; margin:0; position: relative; }
.t-space70 {width:100%; padding: 70px 0 0px 0; margin:0; position: relative; }
.t-space80 {width:100%; padding: 80px 0 0px 0; margin:0; position: relative; }
.t-space90 {width:100%; padding: 90px 0 0px 0; margin:0; position: relative; }
.t-space100 {width:100%; padding: 100px 0 0px 0; margin:0; position: relative; }
.t-space110 {width:100%; padding: 110px 0 0px 0; margin:0; position: relative; }
.t-space120 {width:100%; padding: 120px 0 0px 0; margin:0; position: relative; }

/* bottom space */
.b-space20 {width:100%; padding: 0 0 20px 0; margin:0; position: relative; }
.b-space40 {width:100%; padding: 0 0 40px 0; margin:0; position: relative; }
.b-space50 {width:100%; padding: 0 0 50px 0; margin:0; position: relative; }
.b-space60 {width:100%; padding: 0 0 60px 0; margin:0; position: relative; }
.b-space70 {width:100%; padding: 0 0 70px 0; margin:0; position: relative; }
.b-space80 {width:100%; padding: 0 0 80px 0; margin:0; position: relative; }
.b-space90 {width:100%; padding: 0 0 90px 0; margin:0; position: relative; }
.b-space100 {width:100%; padding: 0 0 100px 0; margin:0; position: relative; }

/* no space */
.no-space {width:100%; padding: 0px 0 0px 0; margin:0; position: relative; }
.no-space { margin-right: 0; margin-left: 0}
.no-space>[class*=col] {  padding-right: 0;  padding-left: 0}

/* slogan space */
.slogan-space {padding:100px 0 100px 0 }


/* 이미지 가운데 정렬 */
.img-center { margin-right: auto !important;}
.img-center { margin-left: auto !important;}
.d-block { display: block !important;}

/* text 가운데 정렬 */
.text-center {margin:0 auto; text-align:center;}
.text-left {margin:0 auto; text-align:left;}
.text-right {margin:0 auto; text-align:right;}

/* 버튼 스타일 */
.btn {border-radius: 0%;border: none;text-transform: uppercase; z-index:100;}
.btn { padding: 10px 0px 10px 0px; font-size: 1rem; font-weight:500;}
.btn-1 {width:100%; padding: 10px 25px 10px 25px; color: #ffffff; z-index:100;}
.btn-1:hover, .btn-1:focus { background: #ff6726; color: #ffffff; z-index:100;}


.btn-m {border-radius: 0%;border: none;text-transform: uppercase; z-index:100;}
.btn-m { padding: 8px 0px 8px 0px; font-size: 0.7rem; font-weight:bold;}
.btn-m1 {width:100%; padding: 8px 15px 8px 15px; color: #ffffff; z-index:100;}
.btn-m1:hover, .btn-m1:focus { background: #ff6726;color: #ffffff; z-index:100;}


.btn_send  { padding: 10px 0px 10px 0px; font-size: 1rem; font-weight:500;}
.btn_send:hover, .btn_send:focus { background: #ff6726;color: #ffffff; }
.btn_send:hover .send-btn { background: #ff6726;color: #ffffff; }
.send-btn {width:100%; padding: 15px 50px 15px 50px; color: #ffffff; z-index:100;}


.btn_more  { padding: 10px 0px 10px 0px; font-size: 1rem; font-weight:500;}
.btn_more:hover, .btn_send:focus { background: #ff6726;color: #ffffff; }
.btn_more:hover .more-btn { background: #ff6726;color: #ffffff; }
.more-btn {width:100%;  padding: 10px 30px 10px 30px; color: #ffffff; z-index:100;}




.btn_close {padding: 11px 25px 11px 25px;background: #647483;color: #ffffff; margin:0 0 0 30px;}
a.btn_close {color: #ffffff;}
.btn_close:hover, .btn_close:focus { background: #ff6726;color: #ffffff; }

.btn2-warp {	margin: 20px 0px 30px 0; text-align: center;}
.btn-2 {padding: 6px 15px 6px 15px;margin: 0px 5px 0px 5px;background-color:#f5f5f4;border: 1px solid #eaeaea;color: #797979; 
font-size: 0.8rem; font-weight:300; cursor: pointer;}
.btn-2:hover, .btn-2:focus { background: #686b82;color: #fff; }





/* 이미지 마우스 오버시 효과 */
.s-img { position: relative; overflow: hidden; }
.s-img:before {
    position: absolute;
    content: "";
    background: rgba(255, 255, 255, 0.4);
    z-index: 999;
    left: 110%;
    top: 0px;
    height: 100%;
    width: 110%;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
.s-img:hover:before { left: -110%; top: 0; }


/* 이미지 마우스 오버시 줌인 효과*/
.z-img {  overflow: hidden; }
.z-img img {
    width: 100%;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s; }
.z-img:hover img {
  transform: scale(1.1); }



/* 백그라운드 이미지 마우스 오버시 줌인 효과*/
.zb-img {
      -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;

 }
.zb-img:hover{
transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);  -ms-transform: scale(1.1); /* IE 9 */
        -o-transform: scale(1.1);
  }



@media only screen and (max-width:768px)
{
.h-space {padding:40px 0 40px 0 }

}



@media only screen and (max-width:480px)
{




/*top bottom space */
.h-space {padding:40px 0 40px 0 }
.h-space20 {padding:40px 0 40px 0 }
.h-space30 {padding:40px 0 40px 0 }
.h-space40 {padding:40px 0 40px 0 }
.h-space50 {padding:40px 0 40px 0 }
.h-space60 {padding:40px 0 40px 0 }
.h-space70 {padding:40px 0 40px 0 }
.h-space80 {padding:40px 0 40px 0 }
.h-space90 {padding:40px 0 40px 0 }
.h-space100 {padding:40px 0 40px 0 }
.h-space120 {padding:40px 0 40px 0 }
.h-space140 {padding:40px 0 40px 0 }



/* padding-left space */
.pl-10 {padding-left:0px;}
.pl-15 {padding-left:0px;}
.pl-20 {padding-left:0px;}
.pl-30 {padding-left:0px;}
.pl-40 {padding-left:0px;}
.pl-50 {padding-left:0px;}
.pl-60 {padding-left:0px;}
.pl-70 {padding-left:0px;}
.pl-80 {padding-left:0px;}
.pl-90 {padding-left:0px;}
.pl-100 {padding-left:0px;}
.pl-110 {padding-left:0px;}
.pl-120 {padding-left:0px;}

/* padding-right space */
.pr-10 {padding-right:0px;}
.pr-15 {padding-right:0px;}
.pr-20 {padding-right:0px;}
.pr-30 {padding-right:0px;}
.pr-40 {padding-right:0px;}
.pr-50 {padding-right:0px;}
.pr-60 {padding-right:0px;}
.pr-70 {padding-right:0px;}
.pr-80 {padding-right:0px;}
.pr-90 {padding-right:0px;}
.pr-100 {padding-right:0px;}
.pr-110 {padding-right:0px;}
.pr-120 {padding-right:0px;}



/* top space */
.t-space20 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }
.t-space40 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }
.t-space50 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }
.t-space60 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }
.t-space70 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }
.t-space80 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }
.t-space90 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }
.t-space100 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }
.t-space110 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }
.t-space120 {width:100%; padding: 40px 0 0px 0; margin:0; position: relative; }

/* bottom space */
.b-space20 {width:100%; padding: 0 0 20px 0; margin:0; position: relative; }
.b-space40 {width:100%; padding: 0 0 40px 0; margin:0; position: relative; }
.b-space50 {width:100%; padding: 0 0 50px 0; margin:0; position: relative; }
.b-space60 {width:100%; padding: 0 0 60px 0; margin:0; position: relative; }
.b-space70 {width:100%; padding: 0 0 70px 0; margin:0; position: relative; }
.b-space80 {width:100%; padding: 0 0 80px 0; margin:0; position: relative; }
.b-space90 {width:100%; padding: 0 0 90px 0; margin:0; position: relative; }
.b-space100 {width:100%; padding: 0 0 100px 0; margin:0; position: relative; }





/* 버튼 스타일 */
.btn {border-radius: 0%;border: none;text-transform: uppercase; z-index:100;}
.btn { padding: 10px 0px 10px 0px; font-size: 1rem; font-weight:bold;}
.btn-1 {width:100%; padding: 10px 25px 10px 25px; color: #ffffff; z-index:100;}
.btn-1:hover, .btn-1:focus { background: #ff6726; color: #ffffff; z-index:100;}


.btn-m {border-radius: 0%;border: none;text-transform: uppercase; z-index:100;}
.btn-m { padding: 8px 0px 8px 0px; font-size: 0.7rem; font-weight:bold;}
.btn-m1 {width:100%; padding: 8px 15px 8px 15px; color: #ffffff; z-index:100;}
.btn-m1:hover, .btn-m1:focus { background: #ff6726;color: #ffffff; z-index:100;}


.btn_send  { padding: 10px 0px 10px 0px; font-size: 1rem; font-weight:bold;}
.btn_send:hover, .btn_send:focus { background: #ff6726;color: #ffffff; }
.btn_send:hover .send-btn { background: #ff6726;color: #ffffff; }
.send-btn {width:100%; padding: 15px 50px 15px 50px; color: #ffffff; z-index:100;}


.btn_close {padding: 11px 25px 11px 25px;background: #647483;color: #ffffff; margin:0 0 0 30px;}
a.btn_close {color: #ffffff;}
.btn_close:hover, .btn_close:focus { background: #ff6726;color: #ffffff; }

.btn2-warp {	margin: 20px 0px 30px 0; text-align: center;}
.btn-2 {padding: 6px 15px 6px 15px;margin: 0px 5px 0px 5px;background-color:#f5f5f4;border: 1px solid #eaeaea;color: #797979; 
font-size: 0.8rem; font-weight:300; cursor: pointer;}
.btn-2:hover, .btn-2:focus { background: #686b82;color: #fff; }





/**********  원형  ***************/
#go-top {width: 35px; height: 35px; text-align: center; position: fixed; bottom: 10px; right: 10px;z-index: 1000;}

#go-top .top {position:relative; z-index:1;width: 35px; height: 35px;  border-radius: 50%; opacity:0.3!important; filter:alpha(opacity=50);}

#go-top .top:after {position:absolute;top:0; left:0;
    opacity:0.5!important; filter:alpha(opacity=30);
    z-index:-1; content:""; width: 35px; height: 35px;  border-radius: 50%; text-align: center;}
#go-top .top i {font-size: 1.2rem; line-height: 35px; color: #fff;z-index: 1000;}
#go-top .top p{color:#fff;}

#go-top .top:hover { cursor: pointer; opacity:1.0!important; filter:alpha(opacity=100);}
#go-top .top:active { background-color: #000000;}







}