﻿@charset "UTF-8";
/*
    [제목] 핀업 메인페이지 CSS
    [생성일] 2020-04-16
    [내용] 메인페이지 에 있는 레이아웃, 플로우팅 버튼, 배너, 팝업 등의 스타일을 포함하고 있음.
    [비고] CSS 작성시 핀업 디자인팀 내부에 규정하고 있는 CSS 작성 규칙를 준수하여 작성할 것.
*/

.main_wrap .box_cont { display:block; position:relative; width:100%; overflow:hidden; }

.main_wrap .box_cont.intro { height:970px; }
.main_wrap .box_cont.stock { height:970px; background:url(../images/main_stock.png) no-repeat; background-size:cover; }
.main_wrap .box_cont.radar { height:970px; background:url(../images/main_radar.png) no-repeat; background-size:cover; }
.main_wrap .box_cont.starter { height:970px; background:url(../images/main_starter.png) no-repeat; background-size:cover; }
.main_wrap .box_cont.funding { height:970px; background:url(../images/main_funding.png) no-repeat; background-size:cover; }
.main_wrap .box_cont.tssa { height:970px; background:url(../images/main_t-ssa.png) no-repeat; background-size:cover; }

.main_wrap .box_cont .box_desc  { display:block; width:1200px; padding:167px 0; margin:0 auto; }
.main_wrap .box_cont .box_desc  .desc_intro { display:inline-block; margin-top:100px; }
.main_wrap .box_cont .box_desc  .desc_intro .tit { color:#fff; font-size:45px; font-weight:200; text-shadow:5px 3px 10px rgba(0, 0, 0, 0.1); }
.main_wrap .box_cont .box_desc  .desc_intro .tit b { font-weight:400; }
.main_wrap .box_cont .box_desc  .desc_intro .logo { margin-bottom:10px; }
.main_wrap .box_cont .box_desc  .desc_intro .platform_wrap { margin-top:110px; overflow:hidden; }
.main_wrap .box_cont .box_desc  .desc_intro .platform_wrap .platform { display:inline-block; float:left; width:75px; height:75px; margin-left:15px; border:1px solid #fff; border-radius:100px; color:#fff; cursor:pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; }
.main_wrap .box_cont .box_desc  .desc_intro .platform_wrap .platform:hover { background:#fff; color:#f47226; }
.main_wrap .box_cont .box_desc  .desc_intro .platform_wrap .platform.rd:hover { color:#eb486c; }
.main_wrap .box_cont .box_desc  .desc_intro .platform_wrap .platform.st:hover { color:#42b0d6; }
.main_wrap .box_cont .box_desc  .desc_intro .platform_wrap .platform.fd:hover { color:#029e6e; }
.main_wrap .box_cont .box_desc  .desc_intro .platform_wrap .platform.ts:hover { color:#f13f44; }
.main_wrap .box_cont .box_desc  .desc_intro .platform_wrap .platform:first-child { margin-left:0; }
.main_wrap .box_cont .box_desc  .desc_intro .platform_wrap .platform i { position:relative; top:25px; left:25px; font-size:25px; }

.main_wrap .box_cont .box_desc  .desc_info { float:right; width:370px; height:640px; background-color:rgba(255, 255, 255, 0.1); box-shadow:10px 3px 20px rgba(0, 0, 0, 0.05); }
.main_wrap .box_cont .box_desc  .desc_info a { position:relative; width:100%; height:160px; }
.main_wrap .box_cont .box_desc  .desc_info .info_list { height:160px; padding:45px 30px; border-bottom:1px solid rgba(255, 255, 255, 0.2); box-sizing:border-box; overflow:hidden; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; }
.main_wrap .box_cont .box_desc  .desc_info .info_list:hover { background:#f47525; cursor:pointer; }

.main_wrap .box_cont .box_desc  .desc_info .box_txt .tit_de {display:block;}
.main_wrap .box_cont .box_desc  .desc_info .box_txt .subtit_de {display:block;}
.main_wrap .box_cont .box_desc  .desc_info .box_txt .tit_on {display:none;}
.main_wrap .box_cont .box_desc  .desc_info .box_txt .subtit_on {display:none;}

.main_wrap .box_cont .box_desc  .desc_info .box_txt.on .tit_de {display:none;}
.main_wrap .box_cont .box_desc  .desc_info .box_txt.on .subtit_de {display:none;}
.main_wrap .box_cont .box_desc  .desc_info .box_txt.on .tit_on {display:block;}
.main_wrap .box_cont .box_desc  .desc_info .box_txt.on .subtit_on {display:block;}

.main_wrap .box_cont .box_desc .desc_info .info_list.color_rd:hover { background:#eb486c; } 
.main_wrap .box_cont .box_desc .desc_info .info_list.color_rd:hover { background:#eb486c; }
.main_wrap .box_cont .box_desc .desc_info .info_list.color_st:hover { background:#42b0d6; }
.main_wrap .box_cont .box_desc .desc_info .info_list.color_fd:hover { background:#029e6e; }
.main_wrap .box_cont .box_desc .desc_info .info_list.color_ts:hover { background:#f13f44; }

.main_wrap .box_cont .box_desc .desc_info .info_list:hover .btn_arrow { opacity:0.9; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; }
.main_wrap .box_cont .box_desc .desc_info .info_list .list_ic { position:relative; top:5px; display:inline-block; float:left; }
.main_wrap .box_cont .box_desc .desc_info .info_list .box_txt { display:inline-block; margin-left:5px; color:#fff; text-shadow:5px 3px 10px rgba(0, 0, 0, 0.1); }
.main_wrap .box_cont .box_desc .desc_info .info_list .box_txt .desc { float:left; width:270px; }
.main_wrap .box_cont .box_desc .desc_info .info_list .subtit_de { font-size:18px; font-weight:200; margin-top:5px; opacity:0.8; }
.main_wrap .box_cont .box_desc .desc_info .info_list .tit_de { font-size:25px; font-weight:400; }
.main_wrap .box_cont .box_desc .desc_info .info_list .tit_on { font-size:27px; font-weight:bold; }
.main_wrap .box_cont .box_desc .desc_info .info_list .btn_arrow { float:right; margin-top:27px; margin-left:10px; opacity:0.3; }

.indi { display:block; position:fixed; top:50%; right:calc(50% - 800px); transform:translateY(-50%); width:15px; z-index:999; }
.indi .indi_nor { width:15px; height:15px; margin-bottom:13px; background:#ccc; border-radius:100px; }
.indi .indi_nor:hover { background:#fff; }
.indi .indi_nor a{ display:block; width:100%; height:100%; cursor:pointer;}
.indi .indi_nor.act { height:40px; background:#f47525; }
.indi .indi_nor:last-child { margin-bottom:0; }

/* 1차 개선_상단배너 및 서비스 소개 */
.main_wrap .box_cont.intro .renewal_wrap { display:block; width:100%; height:370px; background:url(/images/new_main/main_top_bg.png) no-repeat; background-size:cover; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal { padding-top:110px; color:#fff; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal span { font-size:18px; font-weight:lighter; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal .tit { font-size:39px; font-weight:bold; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal .tit b { color:#ff7500; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal p { font-size:22px; font-weight:lighter; line-height:41px; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal .btn_about { display:inline-block; width:180px; height:40px; padding:0 15px; margin:30px 0 0 0; border:1px solid #ff7500; border-radius:20px; background:#fff; font-size:15px; font-weight:600; letter-spacing:1px; line-height:36px; text-align:center; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal .btn_about:hover { background:#ff7500; color:#fff; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal ul { margin-top:30px; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal ul li { display:inline-block; width:26px; height:26px; margin-right:32px; cursor:pointer; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal ul li:hover { color:#453eee; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal ul .ic_naver { background:url(/images/new_main/ic_sns_naver.png) no-repeat 0px 0px; }
.main_wrap .box_cont.intro .renewal_wrap .box_desc.renewal ul .ic_naver:hover { background:url(/images/new_main/ic_sns_naver.png) no-repeat -28px 0px; }
.main_wrap .box_cont.intro .box_desc.intro_con { position:relative; padding:50px 0; }
.main_wrap .box_cont.intro .box_desc.intro_con .box_txt { font-size:26px; line-height:41px; font-weight:300; text-align:center; }
.main_wrap .box_cont.intro .box_desc.intro_con .box_txt p { position:absolute; top:70px; left:50%; transform:translateX(-50%); }
.main_wrap .box_cont.intro .box_desc.intro_con .box_txt b { color:#453eee; font-weight:600; }
.main_wrap .box_cont.intro .box_desc.intro_con .box_txt span:nth-of-type(1) { position:absolute; left:155px; }
.main_wrap .box_cont.intro .box_desc.intro_con .box_txt span:nth-of-type(2) { position:absolute; right:155px; }
.main_wrap .box_cont.intro .result_wrap { width:930px; margin:-43px auto 0 auto; }
.main_wrap .box_cont.intro .result_wrap .result { position:relative; top:200px; left:50%; transform:translateX(-50%); width:870px; height:230px!important; text-align:center; clear:both; z-index:2; }
.main_wrap .box_cont.intro .result_wrap .result .list { position:relative; display:block; width:310px; height:150px; margin-top:20px; background:#fff; z-index:2; }
.main_wrap .box_cont.intro .result_wrap .result .list .box_list { position:absolute; right:0; width:280px; }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center { top:0; width:310px!important; height:195px; margin-top:0; z-index:3; }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center .box_list { width:310px; height:195px; }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center .box_list .list_con { height:150px; background-color:#ebedf6; background-repeat:no-repeat; background-position:right bottom; box-shadow:3px 10px 20px rgba(000,000,000,0.3); }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center .box_list .list_con h3 { font-size:35px; }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center .box_list .list_con span { font-size:20px; }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center .box_list .list_con.stock { background-image:url('/images/new_main/ic_bg_stock.jpg'); }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center .box_list .list_con.radar {  background-image:url('/images/new_main/ic_bg_radar.jpg'); }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center .box_list .list_con.starter { background-image:url('/images/new_main/ic_bg_starter.jpg'); }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center .box_list .list_con.funding { background-image:url('/images/new_main/ic_bg_funding.jpg'); }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center .box_list .list_con.lab { background-image:url('/images/new_main/ic_bg_lab.jpg'); }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-center + .list .box_list { position:absolute; left:0; }
.main_wrap .box_cont.intro .result_wrap .result .list.slick-slider .slick-track, .slick-slider .slick-list { height:230px; }
.main_wrap .box_cont.intro .result_wrap .result .list img { display:block; margin:0 auto 15px auto; }
.main_wrap .box_cont.intro .result_wrap .result .list .list_con { display:block; height:110px; padding:25px; border-top:1px solid #ededed; background:#fff; box-sizing:border-box; }
.main_wrap .box_cont.intro .result_wrap .result .list .list_con h3 { font-size:25px; font-weight:bold; text-align:center; }
.main_wrap .box_cont.intro .result_wrap .result .list .list_con span { display:block; margin-top:5px; color:#777; font-size:15px; font-weight:400; text-align:center; }
.main_wrap .box_cont.intro .result_wrap .result button.slick-arrow { position:absolute; font-size:20px; z-index:100;}
.main_wrap .box_cont.intro .result_wrap .result button.slick-arrow.slick-next {right:calc(50% - 599px); width:52px; height:12px; background:url('/images/new_main/banner_arrow.png') no-repeat -52px 0;}
.main_wrap .box_cont.intro .result_wrap .result button.slick-arrow.slick-next:hover { background:url('/images/new_main/banner_arrow.png') no-repeat -52px -12px; }
.main_wrap .box_cont.intro .result_wrap .result button.slick-arrow.slick-next:before { content:""; font-size:20px; }
.main_wrap .box_cont.intro .result_wrap .result button.slick-arrow.slick-prev { left:calc(50% - 599px); width:52px; height:12px; background:url('/images/new_main/banner_arrow.png') no-repeat 0px 0; }
.main_wrap .box_cont.intro .result_wrap .result button.slick-arrow.slick-prev:hover { background:url('/images/new_main/banner_arrow.png') no-repeat 0px -12px; }
.main_wrap .box_cont.intro .result_wrap .result button.slick-arrow.slick-prev:before { content:""; font-size:20px; }
.main_wrap .box_cont.intro .bg_border { position:absolute; bottom:105px; left:50%; transform:translateX(-50%); display:block; width:1200px; height:100px; background:#3d43b1; z-index:1; }
