@charset "utf-8";

/**1단(비주얼 영역)**/
#multipleContentsDiv_hong_type3_2 > ._objHtml{position:absolute;right: calc((100% - 1600px) / 2);bottom: 40px;}
.visual-list > ul{display:flex;flex-wrap:wrap;max-width:580px;gap:20px;}
.visual-list > ul > li{width:calc(100% / 2 - 10px);}
.visual-list > ul > li > a{display:block;background:rgba(0,39,74,0.75);transition:all ease .35s;padding:40px 30px 30px;border-radius:25px;height: 270px;color: #fff;position:relative;}
.visual-list > ul > li > a strong{font-size: 24px;display:block;margin-bottom:15px;font-family: 'S-CoreDream-5Medium';}
.visual-list > ul > li > a p{font-size: 15px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;line-height:1.6;overflow:hidden;font-family: 'Noto';font-family: 'S-CoreDream-3Light';}
.visual-list > ul > li > a span{position:absolute;left:30px;bottom:30px;}
.visual-list > ul > li > a:after{content:'';width:32px;height:32px;background:#6e8396 url('../../images/main/vistop-arr.png') no-repeat center;border-radius:50%;position:absolute;right:30px;bottom: 30px;}
.visual-list > ul > li > a:hover{background:rgba(0,39,74,1);}
.visual-list > ul > li > a:hover span{animation:size both 0.75s;}
@keyframes size{
  20%{transform:scale(0.8);}
  70%{transform:scale(1.1);}
  100{transform:scale(1);}
}

@media (max-width: 1640px) { 
  #multipleContentsDiv_hong_type3_2 > ._objHtml{right:25px;}
}
@media (max-width: 1280px) {
  #multipleContentsDiv_hong_type3_2 > ._objHtml{top: 170px;bottom:unset;right:85px;}
  .visual-list > ul{max-width:400px;gap:10px;}
  .visual-list > ul > li{width:calc(100% / 2 - 5px);}
  .visual-list > ul > li > a{height:195px;padding:30px 20px 20px;border-radius:15px;}
  .visual-list > ul > li > a strong{font-size:16px;margin-bottom: 5px;}
  .visual-list > ul > li > a p{font-size:12px;}
  .visual-list > ul > li > a span{left:20px;bottom: 15px;}
  .visual-list > ul > li > a span img{width: 28px;}
  .visual-list > ul > li > a:after{width:20px;height:20px;background-size:10px;right:20px;bottom:20px;}
}
@media (max-width: 1024px) {
  #multipleContentsDiv_hong_type3_2 > ._objHtml{top:140px;right:25px;}
}
@media (max-width: 767px) {
  #multipleContentsDiv_hong_type3_2 > ._objHtml{top:unset;bottom:55px;right:50%;transform:translateX(50%);width: 100%;padding: 0 20px;}
  .visual-list > ul{max-width:100%;}
  .visual-list > ul > li > a{height:235px;}
  .visual-list > ul > li > a strong{font-size:21px;}
  .visual-list > ul > li > a p{font-size:13px;}
  .visual-list > ul > li > a span{bottom:20px;}
  .visual-list > ul > li > a span img{width:40px;}
  .visual-list > ul > li > a:after{width:25px;height:25px;background-size:15px;}
}

/**2단**/
#multipleDiv_hong_type3_3{padding:120px 0 100px;background-color: #f0f5fb;}
#multipleDiv_hong_type3_3:before{content:'';width: 340px;height: 245px;background:url('../../images/main/nong-logo.jpg') no-repeat center;position:absolute;right:0;top:0;}
.sb-tit{text-align:center;}
.sb-tit > strong{font-size:60px;color:#212121;margin-bottom:15px;display:block;font-family: 'S-CoreDream-6Bold';letter-spacing: -2px;}
.sb-tit > p{font-size:20px;color:#333;font-family: 'S-CoreDream-4Regular';}

@media (max-width: 1640px) { 
  #multipleContentsDiv_hong_type3_3{width:100% !important;padding-left:25px;padding-right:25PX;}
}

@media (max-width: 1280px) { 
  #multipleDiv_hong_type3_3:before{width:151px;height: 109px;background-size:contain;}
  #multipleDiv_hong_type3_3{padding:70px 0 80px;}
  .sb-tit > strong{font-size:36px;margin-bottom:5px;}
  .sb-tit > p{font-size:15px;}
}

/**3단**/
.accordion{display: flex;height:800px;}
.accordion .tit-box{width:57%;background:url('../../images/main/handshake2.jpg') no-repeat left top / cover;padding-top: 110px;padding-left: calc((100% - 1600px) / 2);}
.accordion .tit-box > strong{display:block;color:#fff;font-size:60px;line-height: 1.25;margin-bottom: 40px;font-family: 'S-CoreDream-3Light';letter-spacing: -2px;}
.accordion .tit-box > strong i{display: block;}
.accordion .tit-box > strong span{font-family: 'S-CoreDream-6Bold';}
.accordion .tit-box > p{font-size:24px;color:#fff;font-family: 'S-CoreDream-3Light';font-weight: 400;}
.accordion > ul{width:43%;display: flex;overflow: hidden;}
.accordion > ul > li{width: calc(100% / 3);transition: all ease .55s;padding: 110px 20px 110px 20px;display: flex;flex-direction: column;align-items: center;position: relative;border-left: 1px solid rgba(255,255,255,0.5);overflow: hidden;}
.accordion > ul > li:nth-child(1){background: #000 url('../../images/main/accord-img01.jpg') no-repeat right top / cover;}
.accordion > ul > li:nth-child(2){background: #000 url('../../images/main/accord-img02.jpg') no-repeat right top / cover;}
.accordion > ul > li:nth-child(3){background: #000 url('../../images/main/accord-img03.jpg') no-repeat right top / cover;}
.accordion > ul > li:before{content:'';width:613px;height: 737px;background:url('../../images/main/accord-logo.png') no-repeat center;position:absolute;right: -70%;bottom: -25%;display:none;}
.accordion > ul > li strong{display:block;color:#fff;font-size:30px;writing-mode: vertical-lr;font-family: 'S-CoreDream-6Bold';letter-spacing: -7px;}
.accordion > ul > li p{color:#fff;font-size:18px;line-height:1.4;transition:all ease .5s;opacity:0;margin-top:15px;display:none;font-family: 'S-CoreDream-3Light';}
.accordion > ul > li p i{display:block;}
.accordion > ul > li a{color:#fff;height:70px;border:2px solid #fff;border-radius:100px;align-items: center;padding: 0 25px 0 40px;font-size: 18px;box-sizing: border-box;transition:all ease .5s;opacity:0;display: none;gap: 20px;line-height: 1;position: absolute;left: 60px;bottom: 110px;font-family: 'S-CoreDream-3Light';}
.accordion > ul > li a:after{content:'';width: 34px;height: 34px;background:url('../../images/main/accord-arr.png') no-repeat center;display: inline-block;vertical-align: middle;position: relative;top: 1px;transition:all ease .5s;}
.accordion > ul > li a:hover{color:#222;background:#fff;}
.accordion > ul > li a:hover:after{filter:brightness(0);}

@media (min-width: 768px) { 
  .accordion > ul > li.on:before{display:block;}
  .accordion > ul > li.on{width: 64%;align-items:flex-start;padding: 110px 20px 110px 60px;background: #937b5c !important;}
  .accordion > ul > li.on strong{writing-mode: initial;font-size:45px;letter-spacing: -2px;}
  .accordion > ul > li.on p{display:block;opacity: 1;}
  .accordion > ul > li.on a{display:inline-flex;opacity: 1;}
}

@media (max-width: 1640px) { 
  .accordion .tit-box{padding-left:25px;}
  .accordion > ul > li.on{padding: 110px 20px 110px 20px;}
  .accordion > ul > li a{left:20px;}
}

@media (max-width: 1280px) { 
  .accordion{height:460px;}
  .accordion .tit-box{padding-left:20px;padding-top:70px;width: 55%;}
  .accordion .tit-box > strong{font-size:36px;margin-bottom: 25px;position:relative;}
  .accordion .tit-box > p{font-size:15px;position:relative;}
  .accordion > ul{width:45%;}
  .accordion > ul > li{padding-top:65px;}
  .accordion > ul > li:before{width:348px;height:418px;background-size:contain;}
  .accordion > ul > li strong{font-size:18px;letter-spacing: -4px;}
  .accordion > ul > li.on{padding:65px 30px;}
  .accordion > ul > li.on strong{font-size:26px;}
  .accordion > ul > li.on p{font-size:12px;}
  .accordion > ul > li a{font-size:12px;height:45px;left: 30px;padding: 0 15px;bottom: 70px;}
  .accordion > ul > li a:after{width:20px;height:20px;border-radius:50%;background-size:20px;}
}

@media (max-width: 767px) { 
  .accordion{height:auto;flex-wrap:wrap;}
  .accordion .tit-box{width:100%;height:300px;padding-top:55px;position:relative;}
  .accordion .tit-box:before{content:'';width: 100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,0.25);}
  .accordion .tit-box > strong{margin-bottom:15px;}
  .accordion > ul{width:100%;flex-wrap:wrap;}
  .accordion > ul > li{width:100% !important;height:300px;padding: 55px 20px !important;align-items: flex-start;border:0 !important;background-position: 45% 80% !important;background-size: 120% !important;}
  .accordion > ul > li strong{font-size:36px !important;;writing-mode: initial;letter-spacing:-1px !important;}
  .accordion > ul > li p{opacity:1;display:block;font-size:15px !important;}
  .accordion > ul > li a{padding:0 20px 0 25px;font-size:14px;left:20px;bottom:30px;opacity: 1;display: flex;}
  .accordion > ul > li:before{right:-150px;}
}

/**4단**/
#multipleDiv_hong_type3_5{background:#f0f5fb;}
#multipleDiv_hong_type3_5:before{content:'';width: 437px;height: 418px;background:url('../../images/main/nong-logo2.jpg') no-repeat center;position:absolute;left:0;bottom:0;}

.vertical-slider{display: flex;max-width: 980px;justify-content: space-between;}
.vertical-slider .title{padding-top:180px;}
.vertical-slider .title strong{font-size:clamp(28px, 3vw, 60px);color:#121212;font-weight: 300;line-height: 1.25;font-family: 'S-CoreDream-3Light';}
.vertical-slider .title strong span{font-family: 'S-CoreDream-6Bold';}
.vertical-slider .title strong span.blue{color:#005bac;}
.vertical-slider .title strong i{display:block;}

.vertical-slider .list{max-width:500px;margin-left: auto;overflow: hidden;}
/*non-slick-css*/
.vertical-slider .list > ul > li{background:#fff;box-shadow:0 0 15px 0 rgba(0,0,0,0.25);border-radius:15px;text-align: center;}
.vertical-slider .list > ul > li a{padding:70px 60px;display: block;}

.vertical-slider .list .slick-list{margin:-35px 0;}
.vertical-slider .list .slick-slide{background:#fff;box-shadow:0 0 15px 0 rgba(0,0,0,0.25);border-radius:15px;text-align: center;display: inline-block;margin: 35px 15px;max-width: calc(100% - 30px);transition:all ease .25s;}
.vertical-slider .list .slick-slide a{padding:70px 60px;display: block;}
.vertical-slider .list .icon{width:180px;height: 180px;background-color: #005bac;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 40px;transition:all ease .25s;}
.vertical-slider .list .icon img{filter: brightness(0) contrast(1) invert(1);transition:all ease .25s;}
.vertical-slider .list .txt p{font-size:21px;color:#121212;line-height:1.4;letter-spacing:-0.5px;margin-bottom:30px;font-family: 'S-CoreDream-4Regular';}
.vertical-slider .list .txt ul{max-width: 52%;margin:0 auto;}
.vertical-slider .list .txt ul li{font-size:19px;text-align:left;padding-left:15px;position:relative;color: #666;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 1.25;font-family: 'S-CoreDream-3Light';}
.vertical-slider .list .txt ul li + li{margin-top: 4px;}
.vertical-slider .list .txt ul li:before{content:'';width:5px;height:5px;background:#858585;border-radius:50%;position:absolute;left:0;top: 10px;}
.vertical-slider .list .slick-slide.on{background:#005bac;}
.vertical-slider .list .slick-slide.on .icon{background:#fff;}
.vertical-slider .list .slick-slide.on img{filter:none;}
.vertical-slider .list .slick-slide.on .txt p{color:#fff;}
.vertical-slider .list .slick-slide.on .txt ul li{color:#fff;}
.vertical-slider .list .slick-slide.on .txt ul li:before{background:rgba(255,255,255,0.75);}

.goods{padding-top:180px;padding-left:40px;}
.goods > ul > li:not(:last-child){border-bottom:1px solid #666;}
.goods > ul > li > a{padding: 30px 0;display:block;transition:all ease .5s;}
.goods > ul > li > a > strong{font-size:32px;font-family: 'S-CoreDream-5Medium';color:#212121;position:relative;display:block;transition:all ease .5s;}
.goods > ul > li > a > strong:before{content:'';width:8px;height:8px;background:#fcc800;border-radius:2px;position:absolute;left: -30px;top:50%;margin-top:-4px;transform:rotate(45deg);opacity:0;transition:all ease .5s;}
.goods > ul > li > a > strong:after{content:'';width:52px;height:52px;background:#fcc800 url('../../images/main/goods-arr.png') no-repeat center;position:absolute;right:0;top:50%;margin-top:-26px;border-radius:50%;opacity:0;transition:all ease .5s;}
.goods > ul > li > a > p{height:0;overflow:hidden;transition:all ease .5s;}
.goods > ul > li > a > p > span{opacity:0;font-size:20px;color:#666;font-family: 'S-CoreDream-4Regular';display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;transition:all ease .5s;}

.goods > ul > li.on{border-bottom:0;}
.goods > ul > li.on > a{padding: 20px 0 0;}
.goods > ul > li.on > a > strong{font-size:45px;font-family:'S-CoreDream-6Bold';}
.goods > ul > li.on > a > p{height:135px;border-top:1px solid #121212;padding-top: 30px;border-bottom:1px solid #666;margin-top: 20px;}
.goods > ul > li.on > a > p > span{opacity:1;}
.goods > ul > li.on > a > strong:before{opacity:1;}
.goods > ul > li.on > a > strong:after{opacity:1;}

@media (max-width: 1640px) { 
  #multipleContentsDiv_hong_type3_5{width:100% !important;padding-left:25px;padding-right:25px;}
}

@media (max-width: 1280px) { 
  #multipleDiv_hong_type3_5:before{width:267px;height: 257px;background-size:contain;}
  .vertical-slider .title{padding-top:110px;}
  .vertical-slider .title strong{font-size:36px;}
  .vertical-slider .list{max-width: 320px;}
  .vertical-slider .list .slick-slide a{padding:45px 40px;}
  .vertical-slider .list .icon{width:110px;height:110px;margin-bottom: 20px;}
  .vertical-slider .list .icon img{width:55px;height:55px;}
  .vertical-slider .list .txt p{font-size:13px;}
  .vertical-slider .list .txt ul li{font-size:12px;padding-left:10px;}
  .vertical-slider .list .txt ul li:before{width:3px;height:3px;top:5px;}

  .goods{padding-top:110px;padding-left: 30px;}
  .goods > ul > li > a{padding:20px 0;}
  .goods > ul > li > a > strong{font-size:18px;}
  .goods > ul > li.on > a > strong{font-size:28px;}
  .goods > ul > li > a > strong:before{left:-25px;}
  .goods > ul > li > a > p > span{font-size:13px;}
  .goods > ul > li.on > a > p{padding-top:15px;height:80px;}
  .goods > ul > li > a > strong:after{width:30px;height:30px;background-size:14px;margin-top: -15px;}
}

@media (max-width: 1000px) { 
  .vertical-slider .list{max-width: 280px;}
  .vertical-slider .list .slick-slide a{padding:35px 25px;}
  .vertical-slider .list .txt ul{width:70%;}
}

@media (max-width: 767px) { 
  #multipleDiv_hong_type3_5{padding:60px 0;}
  .vertical-slider{flex-wrap:wrap;gap:50px;}
  .vertical-slider .title{padding-top:0;width:100%;max-width:100%;text-align:center;}
  .vertical-slider .title strong i{display:inline-block;}
  .vertical-slider .list{max-width:100%;padding: 15px 0;}
  .vertical-slider .list .slick-slide a{padding:70px 25px 75px;min-height: 680px;}
  .vertical-slider .list .icon{width:180px;height:180px;margin-bottom: 30px;}
  .vertical-slider .list .icon img{width:90px;height:90px;}
  .vertical-slider .list .txt p{font-size:21px;}
  .vertical-slider .list .txt ul li{font-size:19px;padding-left:15px;}
  .vertical-slider .list .txt ul li + li{margin-top:10px;}
  .vertical-slider .list .txt ul li:before{width:5px;height:5px;top:10px;}

  /**
  .vertical-slider .list .slick-slide.slick-current{background:#005bac;}
  .vertical-slider .list .slick-slide.slick-current .icon{background:#fff;}
  .vertical-slider .list .slick-slide.slick-current img{filter:none;}
  .vertical-slider .list .slick-slide.slick-current .txt p{color:#fff;}
  .vertical-slider .list .slick-slide.slick-current .txt ul li{color:#fff;}
  .vertical-slider .list .slick-slide.slick-current .txt ul li:before{background:rgba(255,255,255,0.75);}
  **/

  .goods{padding-top:0;padding-right:35px;height: 520px;}
  .goods > ul > li > a > strong{font-size:26px;}
  .goods > ul > li.on > a > strong{font-size:32px;}
  .goods > ul > li > a > p > span{font-size:17px;}
  .goods > ul > li.on > a > p{height:110px;padding-top: 25px;}

  #multipleContentsDiv_hong_type3_3{display:flex;flex-wrap: wrap;}
  #menu6407_obj108{order: 0;width: 100%;}
  #menu6407_obj119{order: 3;margin: 20px 0 0 0;}
  #menu6407_obj135{ order: 1;margin: 0;}
  #menu6407_obj151{order: 2;}
}

/**5단**/
#multipleContentsDiv_hong_type3_6{padding:120px 0 110px;}
@media (max-width: 1640px) { 
  #multipleContentsDiv_hong_type3_6{width:100% !important;padding-left:25px;padding-right:25px;}
}
@media (max-width: 1280px) { 
  #multipleContentsDiv_hong_type3_6{padding:75px 25px 70px;}
}
