#allWrap{position:relative; overflow:hidden;} /* common */ .wrap{position: relative; overflow: hidden; background: url('../images/main/vtop_bg.jpg') 0 0 no-repeat;} .area{max-width: 1300px; margin: 0 auto;} .m-tit{text-align:center;} .m-tit h3.mt-main{font-size:45px; font-weight:600; letter-spacing:-0.03em; line-height:1; color:#222;} .m-tit p.mt-sub{font-size:18px; font-weight:500; letter-spacing:0.01em; line-height:1; color:#999; margin-top:13px;} h5.mt-main{font-size:40px; font-weight:500; letter-spacing:-0.03em; line-height:1; color:#222;} @media (max-width: 1340px){ .wrap{background: none;} .area{padding: 0 20px;} .m-tit h3.mt-main{font-size:38px;} .m-tit p.mt-sub{font-size:17px;margin-top:13px;} h5.mt-main{font-size:34px;} } @media (max-width: 1020px){ .m-tit h3.mt-main{font-size:34px;} .m-tit p.mt-sub{font-size:17px;margin-top:10px;} h5.mt-main{font-size:30px;} } @media (max-width: 860px){ .m-tit h3.mt-main{font-size:28px;} .m-tit p.mt-sub{font-size:16px;margin-top:10px;} h5.mt-main{font-size:28px;} } @media (max-width: 460px){ .m-tit h3.mt-main{font-size:25px;} .m-tit p.mt-sub{font-size:15px;margin-top:10px;} h5.mt-main{font-size:25px;} } /* 메인 비쥬얼 */ #visual{position: relative; background: rgb(73,28,132); background: linear-gradient(16deg, rgba(73,28,132,1) 0%, rgba(23,36,145,1) 100%); overflow: hidden; max-width: 1920px; margin: 0 auto;} #visual:after{content: ''; display: block; clear: both;} #visual > div.mvimg{float: right;} /* 메인 비쥬얼-텍스트 */ #visual .mvtxt{position: absolute; z-index: 1; width: 35%; padding:200px 0 0 100px;} #visual .mvtxt ul li h1{font-size: 45px; line-height: 1.21; font-weight: 600; letter-spacing:-0.03em; color: #fff; overflow: hidden; text-align: left;} #visual .mvtxt ul li h1 b{font-size: 62px; font-weight: 700;} #visual .mvtxt ul li:nth-of-type(2){overflow: hidden;} #visual .mvtxt ul li p{padding-top: 26px; font-size: 20px; line-height: 1.25; color:rgb(255 255 255 / 50%);} #visual .mvtxt ul li a{display: block; margin-top: 75px; width: 210px; height: 60px; border-radius: 50px;background: #732cd1; text-align: center; box-shadow: -2px 2px 64.6px 3.4px rgba(73, 28, 132, 0.46); transition:.2s ease-out;} #visual .mvtxt ul li a span{position: relative; line-height: 60px; font-size: 17px; font-weight: 600; letter-spacing: 0.03em; color: #fff; padding-right: 30px; transition:.2s ease-out;} #visual .mvtxt ul li a span::before{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 5px; height: 5px; background: #fff; border-radius: 50%; transition:.2s ease-out;} #visual .mvtxt ul li a:hover{background: #fff; transition:.2s ease-out;} #visual .mvtxt ul li a:hover span{color: #732cd1; transition:.2s ease-out;} #visual .mvtxt ul li a:hover span::before{ right: -10px; background: #732cd1; transition:.2s ease-out;} /* 슬로건 애니메이션 */ #visual .mvtxt h1 .char{ animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(60ms * var(--char-index)); } @keyframes text-active-animation { from{opacity:0; transform: translateY(50%);} to{opacity:1.0; transform: translateY(0px);} } /* 메인 비쥬얼-이미지 */ #visual .mvimg{position: relative; width:65%; margin-bottom:150px; overflow:hidden; border-bottom-left-radius:100px;} #visual .visual_slide .visual_bg.slick-slide img{margin: 0 auto; border-bottom-left-radius: 100px; width:100%;} #visual .visual_slide .visual_bg.slick-current img{animation: mymove 5s;} @keyframes mymove { from {transform:scale(1.2)} to {transform:scale(1)} } /* 메인 비쥬얼-dot 아이콘 */ #visual .mvcon{position: absolute; bottom: 0; right: 0;} #visual .mvcon > div{position: absolute; right: 0; z-index: 1; bottom: 0;display: inline-block; vertical-align: middle;} #visual .mvcon > div.mv_arrow{width: 260px; height: 150px; line-height: 150px; padding:0 65px;} #visual .mvcon > div.mv_ico{right: 260px; height: 150px; line-height: 150px;} #visual .mvcon .mv_arrow .slick-arrow{width: 13px; height: 19px; font-size: 0; border: none; background: none;} #visual .mvcon .mv_arrow .slick-arrow.mva_prev{background: url('../images/main/arrow_prev-bw.png') 0 0 no-repeat; background-size: contain; margin-right: 90px;} #visual .mvcon .mv_arrow .slick-arrow.mva_next{background: url('../images/main/arrow_next-bw.png') 0 0 no-repeat; background-size: contain;} #visual .mvcon .mv_paging{display: inline-block; margin: 0 50px;} #visual .mvcon .mv_paging > span{font-size: 18px; font-weight: 600; color: #fff;} #visual .mvcon .mv_paging > span:nth-of-type(1){padding-right: 30px; opacity: .4;} #visual .mv_ico{display: flex !important; align-items: center;} #visual .mv_ico .slick-list .slick-track{} #visual .mv_ico .mva_con{display: flex; flex-direction: column; align-items: flex-start; line-height: inherit; width: 220px; opacity:.3; cursor: pointer;} #visual .mv_ico .mva_con img{} #visual .mv_ico .mva_con p{font-size:14px; font-weight:400; color:#fff; line-height: 1.25; margin-top:10px;} #visual .mv_ico .mva_con.current{opacity:1;} /* ---- particles-js ---- */ canvas{ display: block; vertical-align: bottom; } #particles-js{ position:absolute; width: 100%; height: auto; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; } @media (max-width: 1600px){ #visual{height:720px} #visual .mvtxt{padding:150px 0 0 5%;} #visual .mvtxt ul li h1{font-size: 37px;} #visual .mvtxt ul li h1 b{font-size: 50px;} #visual .mvtxt ul li p{padding-top: 22px; font-size: 18px;} #visual .mvtxt ul li a{margin-top: 75px; width: 210px; height: 60px;} #visual .mvtxt ul li a span{line-height: 60px; font-size: 17px; padding-right: 30px;} #visual .mvimg{width:62%; margin-bottom:150px; border-bottom-left-radius:80px; height: 570px;} #visual .visual_slide .visual_bg.slick-slide img{height:570px} #visual .mvcon > div.mv_arrow{width: 160px; height: 150px; line-height: 150px; padding:0 15px;} #visual .mvcon > div.mv_ico{right: 160px; height: 150px; line-height: 150px;} #visual .mvcon .mv_arrow .slick-arrow{width: 13px; height: 19px;} #visual .mvcon .mv_arrow .slick-arrow.mva_prev{margin-right: 90px;} #visual .mv_ico .mva_con{width:190px;} #visual .mv_ico .mva_con img{width:38px} #visual .mv_ico .mva_con p{font-size:14px;} } @media (max-width: 1420px){ #visual{height:670px} #visual .mvtxt{padding:150px 0 0 5%;} #visual .mvtxt ul li h1{font-size: 31px;} #visual .mvtxt ul li h1 b{font-size: 38px;} #visual .mvtxt ul li p{padding-top: 22px; font-size: 18px;} #visual .mvtxt ul li a{margin-top: 70px; width: 200px; height: 55px;} #visual .mvtxt ul li a span{line-height: 55px; font-size: 16px; padding-right: 30px;} #visual .mvimg{width:62%; margin-bottom:150px; border-bottom-left-radius:80px; height: 520px;} #visual .visual_slide .visual_bg.slick-slide img{height:520px} } @media (max-width: 1180px){ #visual{height:600px} #visual .mvtxt{font-size: 27px;} #visual .mvtxt ul li h1{font-size: 27px;} #visual .mvtxt ul li h1 b{font-size: 35px;} #visual .mvtxt ul li p{padding-top: 20px; font-size: 17px;} #visual .mvimg{width:62%; margin-bottom:130px; border-bottom-left-radius:80px; height: 470px;} #visual .visual_slide .visual_bg.slick-slide img{height:470px} #visual .mvcon > div.mv_arrow{width: 130px; height: 130px; line-height: 130px; padding:0 10px;} #visual .mvcon > div.mv_ico{right: 130px; height: 130px; line-height: 130px;} #visual .mvcon .mv_arrow .slick-arrow{width: 11px; height: 16px;} #visual .mvcon .mv_arrow .slick-arrow.mva_prev{margin-right: 45px;} #visual .mv_ico .mva_con{width:130px;} #visual .mv_ico .mva_con img{width:32px} #visual .mv_ico .mva_con p{font-size:13px;} } @media (max-width: 960px){ #visual{height: auto;} #visual:after {position: absolute; background: rgb(0 0 0 / 45%); width: 100%; height: 100%;} #visual .mvtxt{padding: 0 5%; width: 100%; text-align: center; top: 50%; transform: translateY(-45%);} #visual .mvtxt ul li h1{font-size: 27px; text-align: center;} #visual .mvtxt ul li h1 br{display:none;} #visual .mvtxt ul li h1 b{font-size: 35px;} #visual .mvtxt ul li p{padding-top: 20px; font-size: 17px; color: rgb(255 255 255 / 70%);} #visual .mvtxt ul li a{margin: 0 auto; margin-top: 30px; width: 200px; height: 55px;} #visual .mvtxt ul li a span{line-height: 55px; font-size: 16px; padding-right: 30px;} #visual .mvimg{width:100%; margin-bottom:0; border-bottom-left-radius:0; height: 100%; min-height:300px;} #visual .visual_slide .visual_bg.slick-slide img { border-bottom-left-radius: 0; height: auto;} #visual .visual_slide .slick-list{padding:0 !important;} #visual .mvcon{display: none;} } @media (max-width: 640px){ #visual .mvtxt ul li h1{font-size: 23px; text-align: center;} #visual .mvtxt ul li h1 b{font-size: 30px;} #visual .mvtxt ul li p{padding-top: 18px; font-size: 15px;} #visual .mvtxt ul li a{margin: 0 auto; margin-top: 30px; width: 160px; height: 45px;} #visual .mvtxt ul li a span{line-height: 45px; font-size: 13px; padding-right: 20px;} #visual .visual_slide .visual_bg.slick-slide img { border-bottom-left-radius: 0; height: auto; width:auto; max-height:320px;} } @media (max-width: 440px){ #visual .mvtxt ul li h1{font-size: 17px; text-align: center;} #visual .mvtxt ul li h1 b{font-size: 22px;} #visual .mvtxt ul li p{padding-top: 16px; font-size: 15px;} #visual .mvtxt ul li a{margin: 0 auto; margin-top: 30px; width: 160px; height: 45px;} } /*메인리서치*/ #mrch{padding:80px 0 135px; position:relative; background-image: url(./img/rch_bg.jpg); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%;} #mrch .r_list{margin-top:30px;} #mrch .r_list ul {display: flex;justify-content: space-between;flex-wrap: wrap;} #mrch .r_list ul li.r_con{padding:20px 0; width: 25%;text-align: center;align-self: center;-webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;transition: .3s;position: relative;} #mrch .r_list ul li.r_con::after {display: block;content: '';padding-bottom: 100%;} #mrch .r_list ul li.r_con:nth-child(2n){transform: translateY(50px);} #mrch .r_list ul li.r_con .rch_cnt{display: inline-block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;} #mrch .r_list ul li.r_con a{width: 100%;height: 100%;position: relative;display: table;} #mrch .r_list ul li.r_con a::before{animation:big 1s infinite;width: 98%;height: 102%;background: url(./img/mrch_line.png) 50% 50% no-repeat;left: 50%;top: 50%;transform:translate(-50%,-50%);position: absolute;content: '';-webkit-background-size: cover;background-size: cover;display: none;} #mrch .r_list ul li.r_con a::after{animation:big 1s infinite;width: 107%;height: 111%;background: url(./img/mrch_line\ \(1\).png) 50% 50% no-repeat;left: 50%;top: 50%;transform:translate(-50%,-50%);position: absolute;content: '';-webkit-background-size: cover;background-size: cover;opacity: 0.5;display: none;} #mrch .r_list ul li.r_con a p{display: table-cell;vertical-align:middle; color:#fff; font-size:28px; font-weight:600; line-height:1.25; letter-spacing:-0.03em; text-shadow: 0px 3px 2.85px rgba(0, 0, 0, 0.15);} #mrch .r_list ul li.r_con.r1 {background: url(./img/GPU.png) 50% 50% no-repeat;} #mrch .r_list ul li.r_con.r2 {background: url(./img/work.png) 50% 50% no-repeat;} #mrch .r_list ul li.r_con.r3 {background: url(./img/nas.png) 50% 50% no-repeat;} #mrch .r_list ul li.r_con.r4 {background: url(./img/HPC.png) 50% 50% no-repeat;} @keyframes rchDown{0%{opacity: 0;top: -50px;}100%{opacity: 1;top: 0;}} #mrch .r_list ul li.ani{opacity: 0;-webkit-animation: rchDown .7s linear forwards; -o-animation: rchDown .7s linear forwards;animation: rchDown .7s linear forwards;-webkit-transition: .4s;-moz-transition: .4s;-ms-transition: .4s;-o-transition: .4s;transition: .4s; } #mrch .r_list ul li.r1.ani.in-view{-webkit-animation-delay:.3s;-o-animation-delay:.3s ;animation-delay:.3s;} #mrch .r_list ul li.r2.ani.in-view{-webkit-animation-delay:.5s;-o-animation-delay:.5s ;animation-delay:.5s;} #mrch .r_list ul li.r3.ani.in-view{-webkit-animation-delay:.7s;-o-animation-delay:.7s ;animation-delay:.7s;} #mrch .r_list ul li.r4.ani.in-view{-webkit-animation-delay:.9s;-o-animation-delay:.9s ;animation-delay:.9s;} @media(min-width:1024px){ #mrch .r_list ul li.r1:hover{background: url(./img/1\ GPU.png) 50% 50% no-repeat;} #mrch .r_list ul li.r2:hover{background: url(./img/work1.png) 50% 50% no-repeat;} #mrch .r_list ul li.r3:hover{background: url(./img/nas1.png) 50% 50% no-repeat;} #mrch .r_list ul li.r4:hover{background: url(./img/HPC1.png) 50% 50% no-repeat;} #mrch .r_list ul li:hover .btn{opacity: 1;bottom: 46px;} #mrch .r_list ul li:hover a::before{display: block;} #mrch .r_list ul li:hover a::after{display: block;} } @keyframes big{from {transform:translate(-50%,-50%) scale(0.9) }to {transform: translate(-50%,-50%) scale(1.05);opacity: 0;}} @media(max-width:1520px){ #mrch h3{font-size:42px; margin-bottom:50px;} #mrch .r_list ul li.r_con{-webkit-background-size: 100%!important;background-size: 100%!important;} #mrch .r_list ul li.r_con a p{font-size:26px;} } @media(max-width:1200px){ #mrch{padding:70px 0 100px; } #mrch h3{font-size:38px; margin-bottom:46px;} #mrch .r_list ul li.r_con a .tit{font-size: 24px;} #mrch .r_list ul li.r_con a p{font-size:25px;} } @media(max-width:1024px){ #mrch h3{font-size:36px; margin-bottom:35px;} #mrch .r_list ul li.r_con{-webkit-background-size: 111% !important;background-size: 111% !important;} #mrch .r_list ul li.r_con a p{font-size:20px;} } @media(max-width:768px){ #mrch{padding:60px 0 80px;} #mrch h3{font-size:30px; margin-bottom:15px;} #mrch .r_list ul{display: block;} #mrch .r_list ul li.r_con{-webkit-background-size: cover!important;background-size: cover!important;width: 100%;height: 160px; margin-bottom: 10px;} #mrch .r_list ul li.r_con:nth-child(2n) {transform: translateY(0);} #mrch .r_list ul li.r_con:last-child{margin-bottom:0;} #mrch .r_list ul li.r_con::after{padding-bottom: 0;} #mrch .r_list ul li.r_con.r1{background: url(./img/mrch_mo01.jpg) 50% 50% no-repeat;} #mrch .r_list ul li.r_con.r2{background: url(./img/mrch_mo02.jpg) 50% 50% no-repeat;} #mrch .r_list ul li.r_con.r3{background: url(./img/mrch_mo03.jpg) 50% 50% no-repeat;} #mrch .r_list ul li.r_con.r4{background: url(./img/mrch_mo04.jpg) 50% 50% no-repeat;} #mrch .r_list ul li.r_con a {text-align:left; left:10%;} #mrch .r_list ul li.r_con a .tit br{display: none; } #mrch .r_list ul li.r_con a p{font-size:25px;} } @media(max-width:680px){ #mrch h3{font-size:23px; margin-bottom:10px;} #mrch .r_list ul{display: block;margin-top: 0;} #mrch .r_list ul li.r_con{width: 100%;height: 160px; margin-bottom: 1%;} #mrch .r_list ul li.r_con:last-child{margin-bottom:0;} #mrch .r_list ul li.r_con::after{padding-bottom: 0;} #mrch .r_list ul li.r_con a .tit br{display: none; } #mrch .r_list ul li.r_con a p{font-size:25px;} } @media(max-width:480px){ #mrch h3{font-size:21px; margin-bottom:10px;} #mrch .r_list ul li.r_con{height: 130px;} #mrch .r_list ul li.r_con a .tit{font-size: 19px;} #mrch .r_list ul li.r_con a p{font-size:19px;} } /* 메인 지식카드 */ #mCard{position:relative; padding:30px 0;} #mCard .mCard_wr{} #mCard .m-tit{position:relative; text-align: left; display:flex; align-items: center; justify-content: space-between;} #mCard .m-tit::after{position:absolute; content:''; width:calc(100% - 780px); height:2px; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%); top: 50%; transform: translateX(-50%); right: -22%;} #mCard .m-tit .f-txt{display:flex;} #mCard .m-tit p.mt-sub{margin-left:20px;} #mCard .m-tit .mc_arrow{position:relative; height: 80px; width: 158px;} #mCard .m-tit .mc_arrow::after{position:absolute; content:''; width:300%; height:2px; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%); top: 50%; transform: translateX(-50%); left: -150%;} #mCard .m-tit .mc_arrow button{position: absolute;width: 80px; height: 80px; font-size: 0; border: none; background: #fff;} #mCard .m-tit .mc_arrow .mca_prev{border:2px solid #ddd; right:78px;} #mCard .m-tit .mc_arrow .mca_next{border:2px solid #46266e; right:0;} .card_list{padding-top:50px;} .card_list ul{} .card_list ul li.card_con{width:33.333%; text-align:center; padding: 0 50px; margin-top: 10px;} .card_list ul li.card_con .img_box{position: relative; width:275px; height:275px; margin: 0 auto;} .card_list ul li.card_con .img_box .img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius:50%; width:240px; height:240px; display:block; overflow:hidden;} .card_list ul li.card_con .img_box .img img{width:100%;} .card_list ul li.card_con .txt_box{position:relative;} .card_list ul li.card_con .txt_box .tabs{position: relative; height: 30px; margin-top: 50px;} .card_list ul li.card_con .txt_box .tabs ul{width:100px; height:30px; background:#ddd; border-radius:30px; padding:4px; display: flex; float: right;} .card_list ul li.card_con .txt_box .tabs ul li{width: 50%; text-align: center;} .card_list ul li.card_con .txt_box .tabs ul li a{position:relative; width: 100%; height: 100%; display: block; font-size: 12px; font-weight: 600; color: #9c9c9c; line-height: 20px; z-index:5;} .card_list ul li.card_con .txt_box .tabs ul li a.show{color: #fff;} .card_list ul li.card_con .txt_box .tabs ul li a.show::before{position:absolute; content:''; background:#46266e;width: 100%; height: 100%; border-radius:30px; z-index: -1; left: 0; top: 0;} .card_list ul li.card_con .txt_box{} .card_list ul li.card_con .txt_box .cont_wr{padding-top:30px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit{position:relative; font-size: 14px; font-weight:700; line-height: 1; letter-spacing:0.05em; color: #46266e; text-align:center; margin-bottom: 25px; padding-bottom: 30px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit big{font-family:'GmarketSansMedium'; font-size: 30px; letter-spacing:-0.05em; color:#111; display: inline-block; margin-top:15px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit::before{position:absolute; content:''; width:50px; height:3px; background:#eed24e; left:50%; bottom:0; transform: translateX(-50%);} .card_list ul li.card_con .txt_box .cont_wr p{text-align:left; font-size: 17px; font-weight:300; line-height: 1.35; letter-spacing:-0.01em; color: #666; word-break: keep-all;} .card_list ul li.card_con .txt_box .cont_wr.Eng p{font-weight:400;} #mCard .recir{display: flex; justify-content: space-between; position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%); z-index: -1;} #mCard .recir .recinn{flex: 0 1 33.33%; position: relative;} #mCard .recir .recinn:before{content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #eee; z-index: -1;} #mCard .recir .recinn:last-child:after{content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #eee; z-index: -1;} .card_list ul li.card_con .loader1{position: absolute; height: 100%; width: 100%; border-radius: 50%; border: 1px solid #ddd; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-animation: loader1 3s linear infinite; animation: loader1 3s linear infinite;} .card_list ul li.card_con .loader1:after{content: ""; position: absolute; top: 10px; left: 71px; width: 8px; height:8px; border-radius: 50%; background-color:#46266e; box-shadow: 0px 0px 4.75px 0.25px rgba(70, 38, 110, 0.64);} /* .card_list ul li.card_con:nth-child(2n) .loader1:after{top: 130px; left: 269px; } .card_list ul li.card_con:nth-child(3n) .loader1:after{top: 200px; left: 13px;}*/ @-webkit-keyframes loader1{ 0%{-webkit-transform:translate(-50%, -50%) rotate(0deg);} 100%{-webkit-transform:translate(-50%, -50%) rotate(360deg);} } @keyframes loader1{ 0%{transform:translate(-50%, -50%) rotate(0deg);} 100%{transform:translate(-50%, -50%) rotate(360deg);} } @keyframes rotate_image{ 100% { transform:translate(-50%, -50%) rotate(360deg); } } @media(max-width:1400px){ #mCard .m-tit::after{width:calc(100% - 750px); height:2px; right: -12%;} .card_list ul li.card_con .img_box{width:250px; height:250px;} .card_list ul li.card_con .img_box .img{width:220px; height:220px;} .card_list ul li.card_con .txt_box .cont_wr{padding-top:30px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit{font-size: 14px; margin-bottom: 25px; padding-bottom: 30px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit big{font-size: 28px; margin-top:15px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit::before{width:50px; height:3px;} .card_list ul li.card_con .txt_box .cont_wr p{font-size: 19px;} .card_list ul li.card_con .loader1:after{top: 5px; left: 71px; width: 8px; height:8px;} } @media(max-width:1120px){ #mCard .m-tit::after{width:calc(100% - 750px); height:2px; right: -12%;} .card_list ul li.card_con .img_box{width:225px; height:225px;} .card_list ul li.card_con .img_box .img{width:200px; height:200px;} .card_list ul li.card_con .txt_box .cont_wr{padding-top:30px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit{font-size: 13px; margin-bottom: 25px; padding-bottom: 30px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit big{font-size: 24px; margin-top:15px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit::before{width:42px; height:2px;} .card_list ul li.card_con .txt_box .cont_wr p{font-size: 17px;} .card_list ul li.card_con .loader1:after{top: 5px; left: 63px; width: 8px; height:8px;} } @media(max-width:900px){ #mCard .m-tit::after{width:calc(100% - 750px); height:2px; right: -12%;} #mCard .m-tit p.mt-sub{margin-left:20px;} .card_list{padding-top:50px;} .card_list ul li.card_con{padding: 0 30px; margin-top: 10px;} .card_list ul li.card_con .img_box{width:225px; height:225px;} .card_list ul li.card_con .img_box .img{width:200px; height:200px;} .card_list ul li.card_con .txt_box .cont_wr{padding-top:30px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit{font-size: 13px; margin-bottom: 25px; padding-bottom: 30px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit big{font-size: 24px; margin-top:15px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit::before{width:42px; height:2px;} .card_list ul li.card_con .txt_box .cont_wr p{font-size: 17px;} #mCard .recir .recinn{flex: 0 1 50%;} #mCard .recir .recinn:nth-child(2):after{content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #eee; z-index: -1;} #mCard .recir .recinn:last-child{display:none;} .card_list ul li.card_con .loader1:after{top: 5px; left: 63px; width: 8px; height:8px;} } @media(max-width:680px){ #mCard .m-tit .f-txt {flex-wrap: wrap; flex-direction: column;} #mCard .m-tit::after{width:calc(100% - 750px); height:2px; right: -12%;} #mCard .m-tit p.mt-sub{margin-left:0;} .card_list{padding-top:50px;} .card_list ul li.card_con{padding: 0 30px; margin-top: 10px;} .card_list ul li.card_con .img_box{width:225px; height:225px;} .card_list ul li.card_con .img_box .img{width:200px; height:200px;} .card_list ul li.card_con .txt_box .cont_wr{padding-top:30px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit{font-size: 13px; margin-bottom: 18px; padding-bottom: 22px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit big{font-size: 20px; margin-top:15px;} .card_list ul li.card_con .txt_box .cont_wr h2.tit::before{width:42px; height:2px;} .card_list ul li.card_con .txt_box .cont_wr p{font-size: 15px;} .card_list ul li.card_con .loader1:after{top: 5px; left: 65px; width: 6px; height:6px;} } @media(max-width:560px){ #mCard .recir .recinn{flex: 0 1 100%;} #mCard .recir .recinn:nth-child(1):after{content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #eee; z-index: -1;} #mCard .recir .recinn:nth-child(2){display:none;} .card_list ul li.card_con .loader1:after{top: 5px; left: 63px; width: 8px; height:8px;} } /* 메인 보드존 */ #mBoard{position:relative; padding:80px 0; background-image: url(./img/rch_bg.jpg); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%;} #mBoard .mBoard_wr{position: relative; z-index: 1; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;} #mBoard .mBoard_wr .mBoard_left{width:41%;} #mBoard .mBoard_wr .mBoard_right{width:54%;} #mBoard .mBoard_wr .board-btn{display: flex; flex-direction: column; align-items: center;} #mBoard .mBoard_wr .board-btn .btn_cir{width: 40px; height: 40px; border-radius: 50%; transition: .4s;} #mBoard .mBoard_wr .board-btn img{position: absolute; opacity:0; transition: .4s;} #mBoard .mBoard_wr ul{margin-top:25px;} #mBoard .mBoard_wr ul li:not(:first-child){margin-top:25px;} #mBoard h1.bo-po_txt{position: absolute; right: 40px; bottom: 10px; font-size: 75px; font-weight:900; line-height: .8; letter-spacing:-0.025em; color: #222; opacity:5%; text-align: right; text-transform: uppercase;} /* 퍼블리케이션 */ #mPub{} #mPub .mPub_wr{} #mPub .mPub_wr ul.p-list{} #mPub .mPub_wr ul.p-list li.p-con{} #mPub .mPub_wr ul.p-list li.p-con a{width:100%; height:100%; padding: 20px 20px 20px 25px; min-height: 160px; display:block; display: flex; align-items: center;} #mPub .mPub_wr ul.p-list li.p-con a .txt{width: calc(100% - 40px); padding-right: 20px;} #mPub .mPub_wr ul.p-list li.p-con a .txt h3.tit{font-size: 20px; font-weight:600; line-height: 1; letter-spacing:-0.025em; color: #222; word-break: keep-all;} #mPub .mPub_wr ul.p-list li.p-con a .txt p.sub{font-size: 15px; font-weight:500; line-height: 1.13; letter-spacing:-0.025em; color: #888; margin-top:8px; word-break: keep-all;} #mPub .mPub_wr ul.p-list li.p-con a .board-btn .btn_cir{background: url(/images/main/pub_icomore.png) 50% 50% no-repeat; background-color: #fff;} /* 뉴스 */ #mNew{} #mNew .mNew_wr{} #mNew .mNew_wr ul.n-list{} #mNew .mNew_wr ul.n-list li.n-con{} #mNew .mNew_wr ul.n-list li.n-con a{display: flex; flex-wrap: wrap; align-items: stretch;} #mNew .mNew_wr ul.n-list li.n-con a .img{width:375px; height:253px; overflow:hidden;} #mNew .mNew_wr ul.n-list li.n-con a .img img{width:100%; transition: .4s;} #mNew .mNew_wr ul.n-list li.n-con a .txt{position:relative; padding: 40px 30px 0 30px; width: calc(100% - 375px); transition: .4s;} #mNew .mNew_wr ul.n-list li.n-con a .txt span.date{font-size: 18px; font-weight:700; line-height: 1; color: #222;} #mNew .mNew_wr ul.n-list li.n-con a .txt h3.tit{font-size: 24px; font-weight:700; line-height: 1.13; letter-spacing:-0.025em; color: #222; margin-top:25px; word-break: keep-all;} #mNew .mNew_wr ul.n-list li.n-con a .txt p.sub{font-size: 17px; font-weight:500; line-height: 1.13; letter-spacing:-0.025em; color: #888; margin-top:10px; word-break: keep-all;} #mNew .mNew_wr ul.n-list li.n-con a .txt .board-btn{position: absolute; right: 20px; top: 25px;} #mNew .mNew_wr ul.n-list li.n-con a .txt .board-btn .btn_cir{background: url(/images/main/new_icomore.png) 50% 50% no-repeat; background-color: #fff;} @media(min-width:880px){ #mNew .mNew_wr ul.n-list li.n-con:hover a .board-btn .btn_cir{background: url(/images/main/new_icomore_ho.png) 50% 50% no-repeat; background-color: #46266e; transform: rotateY(360deg); transition: .4s;} #mNew .mNew_wr ul.n-list li.n-con:hover a .board-btn img{padding-top: 40px; opacity:1; transition: .4s;} #mNew .mNew_wr ul.n-list li.n-con:hover a .img img{transform: scale(1.2); transition: .4s;} #mNew .mNew_wr ul.n-list li.n-con:hover a .txt{background:#fff; transition: .4s;} #mPub .mPub_wr ul.p-list li.p-con:hover a .board-btn .btn_cir{background: url(/images/main/pub_icomore_ho.png) 50% 50% no-repeat; background-color: #46266e; transform: rotateY(360deg); transition: .4s;} #mPub .mPub_wr ul.p-list li.p-con:hover a .board-btn img{padding-top: 40px; opacity:1; transition: .4s;} #mPub .mPub_wr ul.p-list li.p-con:hover{background:#fff; transition: .4s;} } @media(max-width:1400px){ /* 메인 보드존 */ #mBoard{padding:80px 0;} #mBoard .mBoard_wr .mBoard_left{width:41%;} #mBoard .mBoard_wr .mBoard_right{width:54%;} #mBoard .mBoard_wr .board-btn .btn_cir{width: 40px; height: 40px;} #mBoard .mBoard_wr ul{margin-top:25px;} #mBoard .mBoard_wr ul li:not(:first-child){margin-top:25px;} #mBoard h1.bo-po_txt{right: 40px; font-size: 65px;} /* 퍼블리케이션 */ #mPub .mPub_wr ul.p-list li.p-con a{padding: 20px 20px 20px 25px; min-height: 160px;} #mPub .mPub_wr ul.p-list li.p-con a .txt{width: calc(100% - 40px); padding-right: 20px;} #mPub .mPub_wr ul.p-list li.p-con a .txt h3.tit{font-size: 18px;} #mPub .mPub_wr ul.p-list li.p-con a .txt p.sub{font-size: 15px;} #mPub .mPub_wr ul.p-list li.p-con:hover a .board-btn img{padding-top: 40px;} /* 뉴스 */ #mNew .mNew_wr ul.n-list li.n-con a .img{width:300px; height:240px;} #mNew .mNew_wr ul.n-list li.n-con a .txt{padding: 40px 30px 0 30px; width: calc(100% - 300px);} #mNew .mNew_wr ul.n-list li.n-con a .txt span.date{font-size: 17px;} #mNew .mNew_wr ul.n-list li.n-con a .txt h3.tit{font-size: 19px;} #mNew .mNew_wr ul.n-list li.n-con a .txt p.sub{font-size: 16px;} #mNew .mNew_wr ul.n-list li.n-con a .txt .board-btn{right: 20px; top: 25px;} #mNew .mNew_wr ul.n-list li.n-con:hover a .board-btn img{padding-top: 40px;} } @media(max-width:1180px){ /* 메인 보드존 */ #mBoard{padding:80px 0;} #mBoard .mBoard_wr .mBoard_left{width:40%;} #mBoard .mBoard_wr .mBoard_right{width:56%;} #mBoard .mBoard_wr .board-btn .btn_cir{width: 40px; height: 40px;} #mBoard .mBoard_wr ul{margin-top:25px;} #mBoard .mBoard_wr ul li:not(:first-child){margin-top:25px;} #mBoard h1.bo-po_txt{right: 40px; font-size: 45px;} /* 퍼블리케이션 */ #mPub .mPub_wr ul.p-list li.p-con a{padding: 20px 20px 20px 25px; min-height: 140px;} #mPub .mPub_wr ul.p-list li.p-con a .txt{width: calc(100% - 40px); padding-right: 20px;} #mPub .mPub_wr ul.p-list li.p-con a .txt h3.tit{font-size: 17px;} #mPub .mPub_wr ul.p-list li.p-con a .txt p.sub{font-size: 14px;} /* 뉴스 */ #mNew .mNew_wr ul.n-list li.n-con a .img{width:280px; height:200px;} #mNew .mNew_wr ul.n-list li.n-con a .txt{padding: 40px 30px 0 30px; width: calc(100% - 280px);} #mNew .mNew_wr ul.n-list li.n-con a .txt span.date{font-size: 17px;} #mNew .mNew_wr ul.n-list li.n-con a .txt h3.tit{font-size: 19px;} #mNew .mNew_wr ul.n-list li.n-con a .txt p.sub{font-size: 16px;} #mNew .mNew_wr ul.n-list li.n-con a .txt .board-btn{right: 20px; top: 25px;} } @media(max-width:880px){ /* 메인 보드존 */ #mBoard{padding:80px 0;} #mBoard .mBoard_wr .mBoard_left{width:100%;} #mBoard .mBoard_wr .mBoard_right{width:100%; margin-top:30px;} #mBoard .mBoard_wr .board-btn .btn_cir{width: 40px; height: 40px;} #mBoard .mBoard_wr ul{margin-top:10px;} #mBoard .mBoard_wr ul li:not(:first-child){margin-top:25px;} #mBoard h1.bo-po_txt{display:none;} /* 퍼블리케이션 */ #mBoard .mBoard_wr ul li:not(:first-child) {margin-top: 15px;} #mPub .mPub_wr ul.p-list li.p-con a {padding: 15px 20px 15px 20px; min-height: 120px;} #mPub .mPub_wr ul.p-list li.p-con{background: rgb(255 255 255 / 70%);} #mPub .mPub_wr ul.p-list li.p-con a .board-btn .btn_cir{border: 1px solid #f0f0f0;} /* 뉴스 */ #mNew .mNew_wr ul.n-list li.n-con{background: rgb(255 255 255 / 70%);} #mNew .mNew_wr ul.n-list li.n-con a .board-btn .btn_cir{border: 1px solid #f0f0f0;} } @media(max-width:780px){ /* 퍼블리케이션 */ #mPub .mPub_wr ul.p-list li.p-con a{padding: 20px 20px 20px 25px; min-height: 140px;} #mPub .mPub_wr ul.p-list li.p-con a .txt{width: calc(100% - 40px); padding-right: 20px;} #mPub .mPub_wr ul.p-list li.p-con a .txt h3.tit{font-size: 15px;} #mPub .mPub_wr ul.p-list li.p-con a .txt p.sub{font-size: 13px;} /* 뉴스 */ #mNew .mNew_wr ul.n-list li.n-con a .img{width:200px; height:150px;} #mNew .mNew_wr ul.n-list li.n-con a .txt{padding: 25px 20px 0 20px; width: calc(100% - 200px);} #mNew .mNew_wr ul.n-list li.n-con a .txt span.date{font-size: 14px;} #mNew .mNew_wr ul.n-list li.n-con a .txt h3.tit{font-size: 15px; margin-top:15px;} #mNew .mNew_wr ul.n-list li.n-con a .txt p.sub{font-size: 13px;} #mNew .mNew_wr ul.n-list li.n-con a .txt .board-btn{right: 10px; top: 10px;} } @media(max-width:440px){ /* 퍼블리케이션 */ #mPub .mPub_wr ul.p-list li.p-con a{padding: 20px 20px 20px 25px; min-height: 140px;} #mPub .mPub_wr ul.p-list li.p-con a .txt{width: calc(100% - 40px); padding-right: 20px;} #mPub .mPub_wr ul.p-list li.p-con a .txt h3.tit{font-size: 15px;} #mPub .mPub_wr ul.p-list li.p-con a .txt p.sub{font-size: 13px;} /* 뉴스 */ #mNew .mNew_wr ul.n-list li.n-con a .img{width:100%; height:150px;} #mNew .mNew_wr ul.n-list li.n-con a .txt{padding: 25px 20px; width:100%;} #mNew .mNew_wr ul.n-list li.n-con a .txt span.date{font-size: 14px;} #mNew .mNew_wr ul.n-list li.n-con a .txt h3.tit{font-size: 15px; margin-top:15px;} #mNew .mNew_wr ul.n-list li.n-con a .txt p.sub{font-size: 13px;} #mNew .mNew_wr ul.n-list li.n-con a .txt .board-btn{right: 10px; top: 10px;} } /* 하단 */ footer { background-color: #222; width: 100%; padding: 45px 0;} footer .f-logo {height: 50px;} footer .f-logo img {height: 100%;} footer .footer-wrap {display:flex; justify-content:space-between; align-items:center;} footer .ft-left .selt{display: flex; padding-top:15px;} footer .ft-left .selt a{position:relative; color:#999; font-size:15px;} footer .ft-left .selt a + a{margin-left:10px; padding-left:8px;} footer .ft-left .selt a + a::before{position:absolute; content:''; width:1px; height:12px; left:0; top:4px; background:#999;} footer .ft-right ul li {color:#999; font-size:16px; text-align: right;} footer .ft-right ul li a {color:#999;} footer .ft-right ul li.copyright { color: #999; margin-top: 6px;} /* media-query */ @media (max-width:1500px) { } @media (max-width:1080px) { footer .f-logo {height: 45px;} footer .ft-right ul li {font-size:14px;} } @media (max-width:800px) { footer .f-logo{height: 40px; text-align: center;} footer .footer-wrap {flex-direction:column; justify-content:center;} footer .ft-right {margin-top: 30px;} footer .ft-right ul li {text-align: center;} } @media (max-width:600px) { footer .ft-right ul li {font-size:13px;} footer .ft-left .selt a {font-size: 12px;} } @media (max-width:480px) { footer .f-logo {height: 35px;} }