/*# sourceURL=../css/content.css?t=1 */
/*@ sourceURL=../css/content.css?t=1 */
/*@ sourceURL=../css/content.css */
/* CONTENT CSS - add CSS (header, footer : com.css) */

/* 메인 css */
section{position: relative; text-align: center;}

a.border_blu, a.border{border: 3px solid #fff; border-radius: 50px; text-align: center; height: 36px; line-height: 34px; margin-top: 4.5rem; transition: 0.5s;}
a.border_blu{border: 3px solid #0162cf; color: #0162cf;}
a.border:hover{background-color: #fff; color: #0162cf; opacity: 1;}
a.border_blu:hover{color: #fff; background-color: #0162cf; opacity: 1;}

.letters_n{letter-spacing: 0;}
.banner_text h1, .main_con h1{font-weight: 600; color: #0162cf; word-break: keep-all;}
.banner_text h1{font-size: 4.5rem;}
.main_con h1{font-size: 4rem;}
.main_con h2{font-size: 2.2rem; color: #0162cf; word-break: keep-all;}
.main_con h3{font-size: 1.6rem; font-weight: 500; color: #646464; word-break: keep-all;}
.raleway{font-family: 'Raleway', sans-serif !important;}
.raleway_b{font-family: 'Raleway', sans-serif !important; font-weight: 700 !important;}

/* banner */
.banner_text p, .banner_text h1, .banner_text a{color: #fff;}
.banner_text p{opacity: 0.7;}
.banner{
  width: 100%; height: 600px;
  background: url("http://hankukgolf.co.kr/css/../images/main/main_banner0.jpg") center center no-repeat;
  background-size: cover;
}
.banner_text_bg{
  position: absolute;
  width: 45%;
  height: 660px;
  top: 0; left: 0;
  background-color: #0162cf;
  opacity: .8;
  z-index: 5;
}
.banner_text{
  width: 1400px;
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 30%;
  text-align: left;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.banner_text p{font-size: 1.8rem;}
.banner_text a{
  width: 127px;
  font-size: 1.6rem;
}
/* banner */
p.banner_text_logo {
    font-size: 2.2rem;
    opacity: 100%;
    font-weight: 600;
}
/* process */
.main_con{
  position: relative;
  overflow: hidden;
  height: 100%;
  display: inline-block;
  text-align: center;
}
section.section2{
  background-color: #f1f1f1;
  height: 510px;
  overflow: hidden;
}
section.section2 img{
  float: left;
  position: relative;
  top: 24.5%;
}
.process_text{
  margin-left: 100px;
  float: left;
  text-align: left;
  position: relative;
  top: 40%;
}
.process_text a{
  width: 180px;
  height: 36px;
  text-align: center;
  line-height: 34px;
  font-size: 1.8rem;
}
/* process */

/* solution */
section.section3{padding: 7em 0;}
section.section3 .main_con{width: 100%;}
.solution_box h2{color: #fff; font-weight: 600; position: absolute; bottom: 40px; right: 50px;}
.solution_box p{color: #fff; font-size: 1.8rem; position: relative; top: 45%; right: 50px; transform: translateY(-50%);}
.solution_box p.hide_p{opacity: 0; transition: 1s;}
.solution_box:hover p.hide_p{opacity: 1;}
a.souution_plus{
  width: 127px;
  font-size: 1.6rem; font-weight: 500;
  clear: both;
  display: block;
  margin-left: auto; margin-right: auto;
}
.solution_wrap{
  display: inline-block;
  height: 715px;
  margin: 7em auto 0;
}
.solution_box{
  width: 580px; height: 320px;
  background-color: #3399ff;
  float: left;
  text-align: right;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.solution_box::before{
  content: '';
  position: absolute;
  width: 0; height: 0;
  bottom: -310px; right: -23%;
  transition: 0.5s;
  border-radius: 100%;
  opacity: 0;
}
.solution_box:hover::before{
  width: 800px; height: 800px; opacity: 1;
}
.solution_box::before{
  background-color: #0162cf;
}
.solution_box:nth-child(n+3)::before{background-color: #3399ff;}
.solution_box:nth-child(2n+1){margin-right: 10px; clear: both; top: 5em;}
.solution_box:nth-child(n+3){margin-top: 10px; background-color: #0162cf;}
.sol_tower{background: url("http://hankukgolf.co.kr/css/../images/main/solution_img02.jpg") center center no-repeat; background-size: cover;}
.sol_net{background: url("http://hankukgolf.co.kr/css/../images/main/solution_img09.jpg") center center no-repeat; background-size: cover;}
.sol_weed{background: url("http://hankukgolf.co.kr/css/../images/main/solution_img07.jpg") center center no-repeat; background-size: cover;}
.sol_etc{background: url("http://hankukgolf.co.kr/css/../images/main/solution_img05.jpg") center center no-repeat; background-size: cover;}
.sol_gre{background: url("http://hankukgolf.co.kr/css/../images/main/solution_img06.jpg") center center no-repeat; background-size: cover;}
.sol_auto{background: url("http://hankukgolf.co.kr/css/../images/main/solution_img08.jpg") center center no-repeat; background-size: cover;}

.slider-prev, .slider-next{position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; font-size: 8rem;}
.slider-prev a, .slider-next a{color: #0162cf; font-weight: 500 !important;}
.slider-prev{left: 5%;}
.slider-next{right: 5%;}
/* solution */

/* plus */
section.section4{
  width: 100%; height: 500px;
  background: url("http://hankukgolf.co.kr/css/../images/main/content_ask_bg.jpg") center center; background-size: cover;
}
.plus{
  float: left;
  text-align: center;
  width: 320px; height: 284px;
  margin-right: 35px;
  background-color: #fff;
  position: relative;
  top: 50%; transform: translateY(-50%);
}
.plus:last-child{margin-right: 0;}
.plus img{margin-top: 40px; height: 44px;}
.plus h3{font-weight: 400; margin-top: 17px;}
.plus h2{margin-top: 26px; font-weight: 500;}
.plus a{
  font-size: 3.6rem;
  color: #fff;
  background-color: #0162cf;
  border-radius: 100%;
  width: 40px; height: 40px;
  line-height: 34px;
  text-align: center;
  margin-top: 26px;
  transition: .5s;
}
.plus a:hover{opacity: 1; transform: rotate(180deg);}


/* 노트북 반응형 */
/* 노트북 반응형 */
@media screen and (max-width: 1400px){
  .banner_text{width: 40vw; margin: 0 auto; padding: 2vw; text-align: center; background-color: rgba(1, 98, 207, 0.8);}
  .banner_text p{font-size: 1.5vw;}
  .banner_text h1, .main_con h1{font-size: 3.3vw;}
  .banner_text_bg{display: none;}
  .banner_text a{width: 10vw;}

  section.section2{height: auto; padding-top: 6vw;}
  section.section2 img{width: 50vw;}
  .process_text{margin-top: 1vw;}
  .process_text a{width: 10vw;}
  
  .solution_box{width: 47vw;}
  .slider-prev a, .slider-next a{color: #222;}
  .solution_box:hover::before{width: 80vw; height: 80vw; bottom: -50%;}
  .solution_wrap{height: auto; margin-bottom: 5em;}
  .slider-next{right: 1%;}
  .slider-prev{left: 1%;}
  .slider-prev, .slider-next{font-size: 6vw;}

  .plus{width: 20vw; margin-right: 1vw; padding: 1vw;}

}


/* TABLET 반응형 */
/* TABLET 반응형 */
@media screen and (max-width: 1024px){
  a.border_blu, a.border{margin-top: 5vw;}
  
  .banner_text{width: 50vw;}
  .banner_text p{font-size: 1.6rem;}
  .banner_text h1, .main_con h1{font-size: 4vw;}
  .main_con h2{font-size: 1.8rem;}
  .banner_text a{width: 12vw;}
  .process_text a{width: 16vw;}

  section.section2{text-align: center;}
  section.section2 .main_con{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    align-items: center;
  }
  section.section2 img{width: 80vw; float: none;}
  .process_text{margin: 1vw 0 5vw; float: none; text-align: center;}

  .slider-prev{left: 0;}
  .slider-next{right: 0;}
  .solution_box{height: 35vw; width: 44vw;}
  .solution_box p{font-size: 1.6rem; margin-right: 3vw; right: 0; top: 40%;}
  .solution_box h2{bottom: 2.5vw; right: 3vw;}
  .solution_box::before{
    opacity: 0.5;
    width: 80vw;
    height: 80vw;
    bottom: -50%;
    background-color: #3399ff;
  }
  .solution_box:nth-child(2n)::before{background-color: #0162cf;}
  .solution_box:nth-child(2n+1){
    top: 0;
  }
  .solution_box p{display: none;}
  .solution_box h2{
    width: 100%; text-align: center;
    right: 0; bottom: 50%;
    transform: translateY(50%);
    margin: 0;
  }
  .solution_wrap{margin: 5vw 0 1vw;}
  .slider-prev, .slider-next{font-size: 8vw;}

  section.section4{height: auto; padding: 5vw 0;}
  .plus{width: 30vw; height: 30vw; margin-right: 3vw; margin-bottom: 3vw; top: 0; transform: none;}
  .plus:nth-child(3n){clear: both;}
  .plus img{margin-top: 0;}
  .plus h2{margin-top: 8%;}
  .plus h3{margin-top: 5%;}
  .plus_box{position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);}
  .plus:nth-child(2n){margin-right: 0;}

}
/* MOBILE 반응형 */
/* MOBILE 반응형 */
@media screen and (max-width: 640px){
  .banner_text{width: 80vw; padding: 3vw 2vw;}
  .banner_text p{font-size: 1.6rem;}
  .banner_text h1, .main_con h1{font-size: 3rem;}
  .banner_text a{width: 100px;}

  .process_text a{width: 130px;}

  .slider-prev, .slider-next{font-size: 10vw;}

  .plus{width: 40vw; height: 40vw;}
  .plus h3{margin-top: 0; display: none;}
  .plus a{margin-top: 5vw;}
}