body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
html {overflow-y:scroll;background:#fff}
html,body {width:100%;height:100%}
dl,ul,ol,menu,li {list-style:none}
img,fieldset,iframe {border:0 none}
img {vertical-align:top}
input,select,textarea,button {vertical-align:middle}
input::-ms-clear {display:none}
button {border:0 none;background-color:transparent;cursor:pointer;border-radius:0;}
table {border-collapse:collapse;border-spacing:0;empty-cells:show}
caption,legend {position:absolute;top:-9999px;left:-9999px;font-size:0px;line-height:0}
a {color:#666;text-decoration: none;}
a:hover {text-decoration: none;;}
a:active {background-color:transparent}
body,h1,h2,h3,h4,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Nanum Gothic';color:#666;}
hr {display:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
 
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
 

 

 
 /**/
 
.wrapper {  
  font-weight: 300;
  color: #fff;
  position: relative;
}

section {
  height: 100vh;
  font-size: 40px;
  font-weight: 100;
  background-color: #22A7F0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center; padding-top:30px;
          align-items: center;
}
section:nth-child(1) {
  background: white;
}
section:nth-child(2) { background:url(/layouts/Door_cpB_limit/img/main_bag_01.jpg) 50% no-repeat #2e95cc;
    background-size: cover;
}
section:nth-child(3)  { background:url(/layouts/Door_cpB_limit/img/main_bag_02.jpg) 50% no-repeat #233739;
    background-size: cover;
}
section:nth-child(4) {
   background:url(/layouts/Door_cpB_limit/img/main_bag_03.jpg) 50% no-repeat #13bfdd;
    background-size: cover; 
}
section:nth-child(5) {background:url(/layouts/Door_cpB_limit/img/main_bag_04.jpg) 50% no-repeat #3b9e68;    background-size: cover;}
section:nth-child(6) {background:url(/layouts/Door_cpB_limit/img/main_bag_05.jpg) 50% no-repeat #3d5fa6;    background-size: cover;}
section:nth-child(7) {background:url(/layouts/Door_cpB_limit/img/main_bag_06.jpg) 50% no-repeat #ecebe7;    background-size: cover;}

.nav__wrapper {
  position: fixed; 
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end; right:-80px; z-index:100; top:150px;    font-family: 'NanumSquare', sans-serif;
}
.nav {
  margin: 0 0 100px 30px;
}
.nav__counter {
  font-size: 13px;
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.nav__title {
  font-size: 32px;
  font-weight: 300;
  margin: 0 0 0.25em;
  width: 300px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: height 0.3s ease-out, opacity 0.2s ease-out;
  transition: height 0.3s ease-out, opacity 0.2s ease-out;
}
.nav__body {
  font-weight: 100;
  font-size: 18px;
  font-size: 18px;
  width: 150px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: height 0.3s ease-out, opacity 0.2s ease-out;
  transition: height 0.3s ease-out, opacity 0.2s ease-out;
}
.nav li {
  position: relative;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  margin-bottom: 1em;
}
.nav li:after {
  content: '';
  display: block;
  border-left: 2px solid white;
  border-top: 2px solid white;
  height: 350px;
  width: 20px;
  position: absolute;
  left: -30px;
  top: 15px;
}
.nav li a {
  display: block;
  padding: 0;
  color: #fff;
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.nav li a:hover {
  background-color: transparent;
  padding-left: 1em;
}
.nav li a:focus {
  background-color: transparent;
}
.nav li.active {
  pointer-events: none;
  padding-left: 1em;
}
.nav li.active:after {
  width: 35px;
  height: 400px;
  top: 35px;
}
.nav li.active .nav__counter {
  font-size: 38px;
}
.nav li.active .nav__title {
  -webkit-border-radius:100px; 
  -moz-border-radius: 100px; 
  border-radius: 100px; background:#333; 
    width: 100px; font-size:22px; font-weight:bold; color:#FFFFFF;
  height: 85px;
  opacity: 1;
  overflow: visible; text-align:center; padding-top:15px; letter-spacing:-1px;
}
.nav li.active .nav__body {
  height: 100px;
  opacity: 1;
  overflow: visible;
}

.fromRightIn {
    transition: transform 1.0s ease, opacity 1.0s ease;
    transform: translate(0,0);
    opacity: 1.0;
}

.section3 .front {  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
	}
	
 


/**/
.maincont {margin: 0 auto; position: relative; height:680px; width:1100px;    display: table-cell;  margin-top:20px;    font-family: 'NanumSquare', sans-serif;}
 .pad_top100 { padding-top:130px;}
.pad_top50 { padding-top:90px;}
.maincont  .text{font-size:35px; font-weight: 500;  color: #fff;font-family: Raleway, sans-serif; letter-spacing: 2px; text-align:left; margin:20px 0}
.maincont .maintitle1 {font-size:48px; font-weight: 800;  color: #fff;font-family: Raleway, sans-serif;}
.maincont  .text1{font-size:25px; font-weight: 500;  color: #fff;font-family: Raleway, sans-serif; letter-spacing: 2px; text-align:left; margin:20px 0}
.maincont  .text2{font-size:28px; font-weight: 600;  color: #fff;font-family: Raleway, sans-serif; letter-spacing: 2px; text-align:left; margin:20px 0}
.maincont  .text3{font-size:18px; font-weight: 500;  color: #fff;font-family: Raleway, sans-serif; letter-spacing: 2px; text-align:left; margin:20px 0}
.maincont  .text4{font-size:32px; font-weight: 700;  color: #fff;font-family: Raleway, sans-serif; letter-spacing: 2px; text-align:left; margin:20px 0}

/* Button styles */
.mainbtn {
  padding-top: 20px;
  height:60px ;
  width: 250px; overflow:hidden; float:left
}
.btn {
  box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
  
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 53px;
  
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
    
  line-height: 30px;
  font-size: 16px;
  font-weight: bold;
}

  .btn span.icon, .btn span.title {
    display: block;
    position: relative;
    line-height: 50px;
    padding: 0 30px;  
    
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;  
  }
    
  .btn span.icon {
    font-size: 16px;
    background-color: #00967f;    
    
    -webkit-box-shadow: 0 3px 0 0 #007261;
    box-shadow: 0 3px 0 0 #007261;
  }
  .btn span.title {        
    -webkit-box-shadow: 0 3px 0 0 #1275b7;
    box-shadow: 0 3px 0 0 #1275b7;
    background-color: #1e88ce;
  }
  
  .btn:active,
  .btn.active {
    height: 51px;
  }

.btn-small {
  height: 30px;
  font-size: 12px;
  line-height: 10px;
}
  a.btn-small span.btn {
    height: 30px;
  }


.btn-slide {
  position: relative;
  display: inline-block;
  height: 45px;
  width:210px;
  line-height: 35px; 

  border-radius: 45px;
  -moz-border-radius: 45px;
  -webkit-border-radius: 45px;  

  transition: .5s;
  -webkit-transition: .5s;

  border: 2px solid #fff; overflow:hidden
}
  .btn-slide:hover {
    background-color: #1275b7;
  }
    .btn-slide:hover span.circle {
      left: 100%;
      margin-left: -33px;
      background-color: #36a7f3;
    }
    .btn-slide:hover span.title {
      left: 10px;
      opacity: 0;
    }
    .btn-slide:hover span.title-hover {
      opacity: 1;
      left: 20px;color: #fff;
    }

  .btn-slide span.circle {
    display: block;
    background-color: #1275b7;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 20px;
    width: 20px;
    top: 7px;
    left: 3px;

    transition: .5s;
    -webkit-transition: .5s;

    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  }

  .btn-slide span.title,
  .btn-slide span.title-hover { 
    position: absolute;
	 top:5px;
    left: 40px;
    transition: .5s;
    -webkit-transition: .5s;color: #fff; font-size:18px
  }

  .btn-slide span.title-hover {
    left: 80px; 
    opacity: 0;
  }
  
  
  /*¼¼¸é´ë*/
  .roll_div { display:block;}
  .mouscroll {position: absolute;
    left: 50%;
    bottom: 25px;
    width: 100px;
    height: 100px;
    margin: 0 0 0 -50px;
    color: #FFFFFF;
    z-index: 2;}
 