/* BASIC css start */ /* Main vis CSS */ .main-scroll {position: absolute; bottom: 100px; left: 50%; color: #fff; display: inline-block; transform: translate(-50%, 0); z-index: 10;} .main-scroll .main-scrollWrap {cursor:pointer; width: 58px; height: 58px; border: 1px solid #fff; position: relative;} .main-scroll .main-scrollWrap span {display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .main-scroll .main-scrollWrap span img {animation: mymovee 2s ease-out infinite;} @keyframes mymovee { 0% { opacity: 0; transform: translateY(-25px); } 100% { opacity: 1; transform: translateY(0); } } /* 메인비주얼 */ #mVisual{height:100%; width:100%; display:block; position:relative; left:0; top:0; z-index:0;} #mVisual:before{display:block; content:""; width:100%; height:100%; background:#000; opacity:0.2; position:absolute; left:0; top:0; z-index:2;} #mVisual .mv .bx-wrapper{border:0!important;box-shadow:none!important;} #mVisual .mv{width:100%; height:100vh; overflow:hidden; background:#ddd; position:absolute; left:0; top:0; z-index:1;} #mVisual .mv div{width:100% !important} #mVisual .mv div.mv1{background:url("/design/dermacle/img/pc/main01.png") no-repeat 50%; background-size:cover; height:100%; animation:mymove 3s;} #mVisual .mv div.mv2{background:url("/design/dermacle/img/pc/main01.png") no-repeat 50%; background-size:cover; height:100%; animation:mymove 3s;} #mVisual .mv div.mv3{background:url("/design/dermacle/img/pc/main01.png") no-repeat 50%; background-size:cover; height:100%; animation:mymove 3s;} #mVisual .bx-controls{} #mVisual .bx-wrapper .bx-controls-direction:after{content:''; display:block; clear:both;} #mVisual .bx-wrapper .bx-prev{display:block; position:absolute; top:40%; right:inherit; left:0; width:105px; height:80px; z-index:100; text-indent:-9999px;} #mVisual .bx-wrapper .bx-next{display:block; position:absolute; top:40%; left:inherit; right:0; width:105px; height:80px; z-index:100; text-indent:-9999px;} #mVisual .bx-wrapper .bx-prev{margin-top:-40px; background: rgba(86,86,86,0.4) url("/design/dermacle/img/pc/btn_prev_off.png") no-repeat center; background-size:12px auto;} #mVisual .bx-wrapper .bx-next{margin-top:-40px; background: rgba(86,86,86,0.4) url("/design/dermacle/img/pc/btn_next_off.png") no-repeat center; background-size:12px auto;} #mVisual .bx-wrapper .bx-prev:hover{background:rgba(86,86,86,0.4) url("/design/dermacle/img/pc/btn_prev_on.png") no-repeat center;} #mVisual .bx-wrapper .bx-next:hover{background:rgba(86,86,86,0.4) url("/design/dermacle/img/pc/btn_next_on.png") no-repeat center;} #mVisual .bx-wrapper .bx-prev:after{display:block; content:""; position:absolute; bottom:0; left:21px; width:63px; height:1px; background:rgba(255,255,255,0.14)} #mVisual .slogan{display:block; position:absolute; top:16%/*175px*/; left:50%; margin-left:-600px; width:1200px; height:auto; text-align:left; z-index:9999;} #mVisual .slogan .slo-1{position:relative; display:block; text-transform:uppercase; font-size:16px; color:#fff; font-weight:600; margin-bottom:30px;} #mVisual .slogan .slo-2{margin-bottom:40px; position:relative; display:block;} #mVisual .slogan .slo-2 img{} #mVisual .slogan .slo-3{ position: relative; display: block; padding-left: 0; padding-top: 40px; color: #fff; font-size: 22px; font-weight: unset; line-height: 32px; letter-spacing: -.2px; margin-bottom: 30px;} #mVisual .slogan .slo-3:before{display:block; content:""; background:#fff; width:61px; height:3px; position:absolute; left:0; top:10px;} #mVisual .slogan .slo-4{ position: relative; display: block; padding-left: 0; color: #00213d; font-size: 16px; line-height: 22px; margin-bottom: 50px;} #mVisual .slogan .more-view{ width: 140px; line-height: 42px; display: inline-block; position: relative; vertical-align: middle; text-align: center; border-radius: 5px; font-size: 11px; font-weight: 500; height: 40px; letter-spacing: 2px; color: #1481dd; background: #fff; cursor: pointer; -webkit-transition: border 300ms,background 300ms,color 300ms; transition: border 300ms,background 300ms,color 300ms; font-family: 'GmarketSansMedium'; } #mVisual .slogan .more-view span{-webkit-transition: padding 300ms, margin 300ms;transition: padding 300ms, margin 300ms; position:relative;} #mVisual .slogan .more-view span.arrow{padding-right: 0;} #mVisual .slogan .more-view span.arrow i{ font-size: 14px; display: block; position: absolute; right: 0; top: -1px; font-weight: 600; opacity: 0; -webkit-transition: opacity 200ms, right 200ms; transition: opacity 200ms, right 200ms;} #mVisual .slogan .more-view:hover span.arrow i{opacity:1; right: -15px; } #mVisual .slogan .more-view:hover span.arrow{margin-left:-10px;padding-right:10px;} #mVisual .slogan .slo-1{opacity:0; transform:translateX(40px);} #mVisual .slogan.in-view .slo-1{opacity:1; transform:translateX(0px); transition:all 1s 0.2s ease;} #mVisual .slogan .slo-2{opacity:0; transform:translateX(40px);} #mVisual .slogan.in-view .slo-2{opacity:1; transform:translateX(0px); transition:all 1s 0.4s ease;} #mVisual .slogan .slo-3:before{opacity:0; transform:translateX(40px);} #mVisual .slogan.in-view .slo-3:before{opacity:1; transform:translateX(0px); transition:all 1s 0.6s ease;} #mVisual .slogan .slo-3{opacity:0; transform:translateX(40px);} #mVisual .slogan.in-view .slo-3{opacity:1; transform:translateX(0px); transition:all 1s 0.8s ease;} #mVisual .slogan .slo-4:before{opacity:0; transform:translateX(40px);} #mVisual .slogan.in-view .slo-4:before{opacity:1; transform:translateX(0px); transition:all 1s 0.8s ease;} #mVisual .slogan .slo-4{opacity:0; transform:translateX(40px);} #mVisual .slogan.in-view .slo-4{opacity:1; transform:translateX(0px); transition:all 1s 1s ease;} #mVisual .slogan .more-view{opacity:0; transform:translateY(-40px);} #mVisual .slogan.in-view .more-view{opacity:1; transform:translateY(0px); transition:all 1s 1.2s ease;} @media (max-width: 1600px){ #mVisual .slogan{left:15%; margin-left:0; width:100%;} } @media (max-width: 1240px){ #mVisual{width:100%; height:0; overflow:hidden; padding-bottom:60%/*56.26%*/;} #mVisual .mv{height:0; overflow:hidden; padding-bottom:60%/*56.26%*/;} } @media (max-width: 1170px){ #mVisual .slogan .slo-1{font-size:16px; margin-bottom:20px;} #mVisual .slogan .slo-2{margin-bottom:20px;} #mVisual .slogan .slo-2 img{width:100%; max-width:516px;} #mVisual .slogan .slo-3{padding-left:60px; font-size:15px; line-height:26px; margin-bottom:30px;} #mVisual .slogan .slo-3:before{width:41px; height:3px; top:10px;} #mVisual .slogan .more-view{width:180px; padding:20px 10px; font-size:13px; border:2px solid #fff;} #mVisual .slogan .more-view span{-webkit-transition: padding 300ms, margin 300ms;transition: padding 300ms, margin 300ms; position:relative;} #mVisual .slogan .more-view span.arrow i{font-size:14px; -webkit-transition: opacity 200ms, right 200ms;transition: opacity 200ms, right 200ms;} #mVisual .slogan .more-view:hover span.arrow i{opacity:1; right:-15px;} #mVisual .slogan .more-view:hover span.arrow{margin-left:-10px;padding-right:10px;} } @media (max-width: 840px){ #mVisual .slogan{/*top:16%;*/} #mVisual .slogan .slo-2 img{width:100%; max-width:316px;} #mVisual .slogan .slo-3{padding-left:30px; font-size:12px; line-height:20px; margin-bottom:30px;} #mVisual .slogan .slo-3:before{width:21px; height:3px; top:7px;} #mVisual .slogan .more-view{width:140px; padding:15px 10px; font-size:11px; border:2px solid #fff;} #mVisual .bx-wrapper .bx-prev, #mVisual .bx-wrapper .bx-next{top:40%; left:0; width:65px; height:45px;} #mVisual .bx-wrapper .bx-prev{margin-top:-25px; background-size:8px auto;} #mVisual .bx-wrapper .bx-next{margin-top:20px; background-size:8px auto;} #mVisual .bx-wrapper .bx-prev:after{left:10px; width:45px;} #mVisual .bx-wrapper .bx-prev:hover, #mVisual .bx-wrapper .bx-next:hover{background-size:8px auto;} } @media (max-width: 640px){ #mVisual{padding-bottom:100%;} #mVisual .mv{padding-bottom:100%;} #mVisual .slogan{left:0; margin-left:0; width:100%; text-align:center; padding:0 30px;} #mVisual .slogan .slo-2 img{width:100%; max-width:316px;} #mVisual .slogan .slo-3{padding-top:30px; padding-left:0; font-size:12px; line-height:20px; margin-bottom:30px;} #mVisual .slogan .slo-3:before{width:40px; height:2px; top:0px; left:50%; margin-left:-20px;} #mVisual .bx-wrapper .bx-prev, #mVisual .bx-wrapper .bx-next{display:none;} } @media (max-width: 420px){ #mVisual .slogan{left:0; margin-left:0; width:100%; text-align:center; padding:0 8%;} #mVisual .slogan .slo-1{font-size:15px; margin-bottom:10px;} #mVisual .slogan .slo-2{margin-bottom:10px;} #mVisual .slogan .slo-3{padding-top:20px; padding-left:0; margin-bottom:20px;} #mVisual .slogan .slo-3 br{display:none;} #mVisual .slogan .slo-3:before{width:40px; height:2px; top:0px; left:50%; margin-left:-20px;} #mVisual .slogan .more-view{width:120px; padding:10px 5px; font-size:11px; border:2px solid #fff;} #mVisual .bx-wrapper .bx-prev, #mVisual .bx-wrapper .bx-next{display:none;} } @media (max-width: 340px){ #mVisual{padding-bottom:120%;} #mVisual .mv{padding-bottom:120%;} } /* 퀵메뉴 */ .quick-business{position:fixed; bottom:25px; left:50%; margin-left:-800px; width:136px; height:134px; z-index:99;} .quick-business a{display:block; background:#684ab3; width:100%; height:100%; transition:all .6s;} .quick-business a .qbt-txt{padding:5px; overflow:hidden;} .quick-business a .qbt-txt p.big-eng{font-size:20.5px/*26px*/; line-height:1;color:#fff; font-weight:600; letter-spacing:-1.5px;} .quick-business a .qbt-txt small{font-size:18px; color:#fff; font-weight:400; margin-top:10px;} .quick-button{position:fixed; bottom:30px; right:50%; margin-right:-800px; z-index:99;} .quick-button a{} .quick-button a .lag-list{display:table; height:100%; padding-left:75px;} .quick-button2{bottom:100px;} .quick-button2 .lag-list{font-size:0; width:60px; height:60px; overflow:hidden; background:url("/images/common/global.png") 16px 16px no-repeat #684ab3; border-radius:100px; transition: all .6s;} .quick-button2 .lag-list ul{display:block; opacity:0; padding:20px 0 0 50px;} .quick-button2:hover .lag-list{width:155px;} .quick-button2:hover .lag-list ul{opacity:1; width:155px;} .quick-button2 .lag-list li{} .quick-button2 .lag-list li a{font-size:14px; color:#a485f1; font-weight:600; display:inline-block; position:relative; float:left; margin:0 3px;} .quick-button2:hover .lag-list li a{opacity:1; transition:all .4s;} .quick-button2 .lag-list li a:hover{color:#fff;} .quick-button2 .lag-list li a:hover:after{width:100%; height:2px; background:#fff; content:''; position:absolute; left:0; bottom:-3px; transition:all .4s;} .quick-button3{bottom:20px;} .quick-button3 a{display:block; width:60px; height:60px; border-radius:100px; font-size:0; background: url("/design/dermacle/img/pc/quick_arrow.png") 50% 50% no-repeat#fff; border: 1px solid #e2e2e2; transition:all .6s;} @media (min-width: 1219px) and (max-width: 1600px){ .quick-business{left:0; margin-left:0;} } @media (min-width: 896px) and (max-width: 1218px){ .quick-business{width:100px; height:98px;left:0; margin-left:0;} .quick-business a .qbt-txt p.big-eng{font-size:18.5px;} .quick-business a .qbt-txt small{font-size:16px; margin-top:10px;} } @media (min-width: 640px) and (max-width: 1600px){ .quick-button{right:20px; margin-right:0; -ms-transform:translate(0, 0); -webkit-transform:translate(0, 0); -moz-transform:translate(0, 0); transform:translate(0, 0);} } @media (min-width: 0px) and (max-width: 895px){ .quick-business{width:60px; height:59px;left:0; margin-left:0;} .quick-business a .qbt-txt p.big-eng{display:none;} .quick-business a .qbt-txt small{font-size:13px; margin-top:10px;} } /* ABOUT CENTER */ #section01{width:100%; position:relative; background:#fff; padding:120px 0 150px;} #section01 article{position:relative; margin:0 auto; max-width:1200px; width:90%;} #section01 h2{text-align:center; margin-bottom:50px;} #section01 h2 .big-tit{font-size:46px; color:#1a1a1a; font-weight:700;} #section01 h2 .big-tit strong{ letter-spacing: 1px; color: #000; font-family: 'Rubik', sans-serif; display: inline-block; margin-top: 0; margin-right: 2px; vertical-align: top;} #section01 h2 .sm-txt{font-size:26px; color:#9c9c9c; font-weight:400; margin-top:25px;} #section01 ul{display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;} #section01 ul li{ width: 380px; height: 350px; margin-right:30px; text-align: center; transition: .2s ease-out;} #section01 ul li:last-child{margin-right:0;} #section01 .ac-wrap{ position: relative; display: block; height: 100%; _padding: 65px 1%; background: #fafafa; transform: perspective(1px) translateZ(0); border: 2px solid #e6e6e6; border-radius: 15px;} #section01 .ac-wrap:before{content:""; position:absolute; left:0; top:0; background:#000; display:block; width:0; height:100%; transition:.2s ease-out; z-index:0;} #section01 .ac-wrap .ac-icon{ width: 132px; height: 122px; margin: 60px auto 50px;} #section01 .ac-wrap .ac-info{position:relative;} #section01 .ac-wrap .ac-num{margin:0 auto; position:relative; display:table; width:42px; height:42px; background:#7a52dd; border-radius:50%;} #section01 .ac-wrap .ac-num span{letter-spacing:0; display:table-cell; width:100%; height:100%; font-size:18px; color:#fff; font-weight:500; text-align:center; vertical-align:middle;} #section01 .ac-wrap h4{ font-size: 32px; color: #000; font-weight: bold;} #section01 .ac-wrap p{ font-size: 20px; color: #5e5e5e; font-weight: 300; letter-spacing: 0; margin-top: 15px;} #section01 li:first-child .ac-wrap:before{background:none;} #section01 li:nth-child(2n) .ac-wrap:before{background:none} #section01 li:nth-child(3n) .ac-wrap:before{background:none} #section01 li:nth-child(4n) .ac-wrap:before{background:none} #section01 li:hover .ac-wrap:before{width:100%;} #section01 li:first-child .ac-icon{background: url(/design/dermacle/img/pc/ac_icon1.png) no-repeat 50% 50%} #section01 li:nth-child(2n) .ac-icon{background:url("/design/dermacle/img/pc/ac_icon2.png") no-repeat 50% 40%;} #section01 li:nth-child(3n) .ac-icon{background:url("/design/dermacle/img/pc/ac_icon3.png") no-repeat 50% 40%;} #section01 h2 .big-tit{opacity:0; transform:translateY(40px);} #section01 .in-view h2 .big-tit{ opacity: 1; transform: translateY(0px); transition: all 1s 0.4s ease; font-weight: 500; color: #545454; font-size: 32px;} #section01 h2 .sm-txt{opacity:0; transform:translateY(40px);} #section01 .in-view h2 .sm-txt{opacity:1; transform:translateY(0px); transition:all 1s 0.6s ease;} #section01 ul li:nth-child(1){opacity:0;} #section01 .in-view ul li:nth-child(1){animation:rotate-in-ver 1s 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; opacity:1;} #section01 ul li:nth-child(2) {opacity:0;} #section01 .in-view ul li:nth-child(2){animation:rotate-in-ver 1s 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; opacity:1;} #section01 ul li:nth-child(3){opacity:0;} #section01 .in-view ul li:nth-child(3){animation:rotate-in-ver 1s 1.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; opacity:1;} #section01 ul li:nth-child(4){opacity:0;} #section01 .in-view ul li:nth-child(4){animation:rotate-in-ver 1s 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; opacity:1;} .rotate-in-ver{-webkit-animation: rotate-in-ver 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: rotate-in-ver 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;} @-webkit-keyframes rotate-in-ver { 0%{-webkit-transform:rotateY(-180deg); transform:rotateY(-180deg); opacity:0;} 100%{-webkit-transform:rotateY(0deg); transform:rotateY(0deg); opacity:1;} } @keyframes rotate-in-ver{ 0%{-webkit-transform:rotateY(-180deg); transform:rotateY(-180deg); opacity:0;} 100%{-webkit-transform:rotateY(0deg); transform:rotateY(0deg); opacity:1;} } /* @media (max-width: 1240px){ #section01{padding:80px 0;} } @media (max-width: 1170px){ #section01 ul li{width:45.5%; margin:0 1% 1% 0;} #section01 ul li:nth-child(2n), #section01 ul li:last-child{margin-right:0;} #section01 .ac-wrap{padding:40px 3%;} } @media (max-width: 767px){ #section01 h2{margin-bottom:50px;} #section01 h2 .big-tit{font-size:40px;} #section01 h2 .sm-txt{font-size:20px; margin-top:15px;} #section01 ul li{margin:0 2% 2% 0;} #section01 .ac-wrap .ac-icon{width:80px; height:75px; margin-bottom:10px;} #section01 .ac-wrap .ac-num{width:32px; height:32px;} #section01 .ac-wrap .ac-num span{font-size:14px;} #section01 .ac-wrap h4{font-size:18px; margin-top:10px;} #section01 .ac-wrap p{font-size:13px; margin-top:5px;} #section01 li:first-child .ac-icon{background-size:80px;} #section01 li:first-child:hover .ac-icon{background-size:80px;} #section01 li:nth-child(2n) .ac-icon{background-size:80px;} #section01 li:nth-child(2n):hover .ac-icon{background-size:80px;} #section01 li:nth-child(3n) .ac-icon{background-size:80px;} #section01 li:nth-child(3n):hover .ac-icon{background-size:80px;} #section01 li:nth-child(4n) .ac-icon{background-size:80px;} #section01 li:nth-child(4n):hover .ac-icon{background-size:80px;} } @media (max-width: 640px){ #section01{padding:50px 0;} #section01 h2{margin-bottom:30px;} #section01 h2 .big-tit{font-size:30px;} #section01 h2 .sm-txt{font-size:16px; margin-top:10px;} } @media (max-width: 520px){ #section01 .ac-wrap .ac-icon{width:60px; height:55px; margin-bottom:5px;} #section01 .ac-wrap .ac-num{width:28px; height:28px;} #section01 .ac-wrap .ac-num span{font-size:12px;} #section01 .ac-wrap h4{font-size:16px; margin-top:5px;} #section01 .ac-wrap p{font-size:11px; margin-top:5px;} #section01 li:first-child .ac-icon{background-size:60px;} #section01 li:first-child:hover .ac-icon{background-size:60px;} #section01 li:nth-child(2n) .ac-icon{background-size:60px;} #section01 li:nth-child(2n):hover .ac-icon{background-size:60px;} #section01 li:nth-child(3n) .ac-icon{background-size:60px;} #section01 li:nth-child(3n):hover .ac-icon{background-size:60px;} #section01 li:nth-child(4n) .ac-icon{background-size:60px;} #section01 li:nth-child(4n):hover .ac-icon{background-size:60px;} } @media (max-width: 420px){ #section01 ul li{width:100%; max-width:250px; margin:0 0 2%;} #section01 .ac-wrap{padding:25px 5% 30px 5%;} #section01 .ac-wrap .ac-icon{width:40px; height:37px; margin-bottom:5px;} #section01 .ac-wrap .ac-num{width:24px; height:24px;} #section01 .ac-wrap .ac-num span{font-size:10px;} #section01 .ac-wrap h4{font-size:16px; margin-top:5px;} #section01 .ac-wrap p{font-size:11px; margin-top:5px;} #section01 li:first-child .ac-icon{background-size:40px;} #section01 li:first-child:hover .ac-icon{background-size:40px;} #section01 li:nth-child(2n) .ac-icon{background-size:40px;} #section01 li:nth-child(2n):hover .ac-icon{background-size:40px;} #section01 li:nth-child(3n) .ac-icon{background-size:40px;} #section01 li:nth-child(3n):hover .ac-icon{background-size:40px;} #section01 li:nth-child(4n) .ac-icon{background-size:40px;} #section01 li:nth-child(4n):hover .ac-icon{background-size:40px;} } */ /* 참가자 */ #section02{width:100%; position:relative; background:#fff; padding:10px 0 140px;} #section02:after{content:''; display:block; clear:both;} #section02 article{position:relative; margin:0 auto; max-width:1200px; width:90%;} #section02 h2{text-align:center; margin-bottom:50px;} #section02 h2 .big-tit{font-size:46px; color:#1a1a1a; font-weight:700;} #section02 h2 .big-tit strong{ letter-spacing: 1px; color: #000; font-family: 'Rubik', sans-serif; display: inline-block; margin-top: 0; margin-right: 2px; vertical-align: top;} #section02 h2 .sm-txt{font-size:26px; color:#9c9c9c; font-weight:400; margin-top:25px;} #section02 h2 .big-tit{opacity:0; transform:translateY(40px);} #section02 .in-view h2 .big-tit{ opacity: 1; transform: translateY(0px); transition: all 1s 0.4s ease; font-weight: 500; color: #545454; font-size: 32px;} #section02 h2 .sm-txt{opacity:0; transform:translateY(40px);} #section02 .in-view h2 .sm-txt{opacity:1; transform:translateY(0px); transition:all 1s 0.6s ease;} /* 왼쪽 */ #section02 .cont-wrap{position:relative;} #section02 .left-cont{position:relative; display:inline-block; width:594px; height: 340px; float:left;} #section02 .test-info{display:block; height:100%;} #section02 h3{position:relative; display:block; width:100%; margin-bottom:30px; overflow:hidden;} #section02 .s-tit{font-size:26px; color:#333; font-weight:500px;} #section02 .test-info .s-cont{padding:40px; background:url("/images/main/bus_left_bg.png") no-repeat #684ab3 93% bottom; width:100%; height:100%; } #section02 .test-info .s-txt{font-size:24px; color:#fff; font-weight:300;} #section02 .test-info .s-txt strong{font-weight:500;} #section02 .test-info ul{display:block; margin-top:25px;} #section02 .test-info ul li{position:relative; display:inline-block; padding:7px 30px 7px 28px;} #section02 .test-info ul li:before{content:""; position:absolute; left:0; top:14px; width:14px; height:2px; background:#fff; display:block; } #section02 .test-info ul li a{font-size:16.5px; line-height:1; color:#fff; font-weight:500;} #section02 .test-info ul li a:hover{opacity:0.8; transition:.2s ease-out;} /* 오른쪽 */ #section02 .right-cont{float:right; position:relative; display:inline-block; width:594px; height: 340px;} #section02 .text-part{} #section02 .text-part h3{margin-bottom:24px;} #section02 .text-part h3 .s-tit{float:left;} #section02 .text-part .s-tab{float:right;} #section02 .text-part .s-tab li{display:inline-block; padding:0; margin:0; cursor:pointer;} #section02 .text-part .s-tab li{text-align:center; padding:12px 20px 10px 20px; display:inline-block; font-size:16px; font-weight:400; color:#383838; background:none; border-radius:30px; line-height:1; transition:.2s ease-out;} #section02 .text-part .s-tab li.active{background:#000; color:#fff;} #section02 .text-part .s-tab li:hover{background:#000; color:#fff;} #section02 .text-part .s-cont{position:relative; display:block; width:100%; height:100%; clear:both;} #section02 .text-part .tabcontent{display:none;} #section02 .text-part .tab-board{font-size:0;} #section02 .text-part .tab-board li{display:inline-block;width:33.33333%; padding:6px 6px 0 0; box-sizing:border-box;} #section02 .text-part .tab-board li a{display:block; position:relative; padding:15px 18px; background:#fff; border:1px solid #d1d1d1; box-sizing:border-box; font-size:14px; } #section02 .text-part .tab-board li a span{display:block;} #section02 .text-part .tab-board li .t-cate{display:inline-block; height:auto; padding:6px 15px; text-align:center; line-height:1; font-size:13px; color:#fff; border-radius:30px;} #section02 .text-part .tab-board li span.co-1{background:#684ab3;} /* 화장품임상센터 */ #section02 .text-part .tab-board li span.co-2{background:#2bb2c3;} /* 건강기능식품임상센터 */ #section02 .text-part .tab-board li span.co-3{background:#dfb142;} /* 광선임상센터 */ #section02 .text-part .tab-board li span.co-4{background:#cd55ad;} /* 비임상연구센터 */ #section02 .text-part .tab-board li .t-tit{height:37px; margin:.84821em 0 1em 0; color:#000; font-size:14px; overflow:hidden; } #section02 .text-part .tab-board li .t-date{color:#787878; font-size:12px; font-weight:400; } #section02 .text-part .tab-board li .bn-more{position:absolute; display:block; width:14px; border:0; right:20px; bottom:25px; font-size:0;} @-moz-document url-prefix() {#section02 .text-part .tab-board li .bn-more {width:14px;}}/*파이어폭스*/ #section02 .text-part .tab-board li .bn-more .line1, #section02 .text-part .tab-board li .bn-more .line2{position:absolute; z-index:10; right:0; top:0; width:2px; height:14px; background-color:#676767; transition:transform .7s; -webkit-transition:-webkit-transform .7s; -moz-transition:-moz-transform .7s;} #section02 .text-part .tab-board li .bn-more .line1{transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg);} #section02 .text-part .tab-board li .bn-more .line2{transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg);} #section02 .text-part .tab-board li:hover .bn-more .line1{transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);} #section02 .text-part .tab-board li:hover .bn-more .line2{transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg);} .sr {position:absolute; width:1px; height:1px; clip:rect(0 0 0 0); overflow:hidden;} #section02 ul li .ac-info{ position: absolute; bottom: 0; background: #fff; width: 490px; left: 22px; height: 100px; padding: 25px 30px 0;} #section02 ul li .ac-info h4{ font-size: 24px; color: #3f3f3f; font-weight: bold; padding-bottom: 15px;} #section02 ul li .ac-info h4 img{float: right;} #section02 ul li .ac-info p{ font-size: 16px; color: #3f3f3f; font-weight: 400; line-height: 26px; white-space: nowrap;} #section02 .left-cont{opacity:0; transform:translateX(40px);} #section02 .in-view .left-cont{opacity:1; transform:translateX(0px); transition:all 1s 0.4s ease;} #section02 .right-cont{opacity:0; transform:translateX(-40px);} #section02 .in-view .right-cont{opacity:1; transform:translateX(0px); transition:all 1s 0.6s ease;} /* @media (max-width: 1240px){ #section02{padding:80px 0;} } @media (max-width: 1170px){ #section02 h3{margin-bottom:10px;} #section02 .left-cont{width:100%; height:100%; float:none;} #section02 .right-cont{float:none; position:relative; display:inline-block; width:100%; height:100%; margin-top:30px;} #section02 .text-part h3{margin-bottom:10px;} #section02 .text-part h3 .s-tit{float:none; margin-bottom:10px;} #section02 .text-part .s-tab{float:none;} #section02 .text-part .tab-board li{width:50%; vertical-align:top;} #section02 .text-part .tab-board li:nth-child(2n), #section02 .text-part .tab-board li:nth-child(4n), #section02 .text-part .tab-board li:last-child{padding:6px 0 0 0; } } @media (max-width: 767px){ #section02 h2{margin-bottom:50px;} #section02 h2 .big-tit{font-size:40px;} #section02 h2 .sm-txt{font-size:20px; margin-top:15px;} #section02 .s-tit{font-size:20px;} } @media (max-width: 640px){ #section02{padding:50px 0;} #section02 h2{margin-bottom:20px;} #section02 h2 .big-tit{font-size:30px;} #section02 h2 .sm-txt{font-size:16px; margin-top:10px;} #section02 .text-part .s-tab li{padding:7px 15px 7px 15px; font-size:14px;} #section02 .test-info .s-cont{padding:20px 25px;} #section02 .test-info .s-txt{font-size:20px;} #section02 .test-info ul{margin-top:15px;} #section02 .test-info ul li{padding:6px 30px 6px 28px;} #section02 .test-info ul li a{font-size: 15.5px;} } @media (max-width: 520px){ #section02 .text-part .tab-board li{width:100%; padding:6px 0 0 0; } #section02 .text-part .tab-board li:nth-child(2n), #section02 .text-part .tab-board li:nth-child(4n), #section02 .text-part .tab-board li:last-child{padding:6px 0 0 0; } #section02 .text-part .tab-board li .t-tit{height:20px;} } */ /* 오시는길 */ #section03{width:100%;position: relative;background: #f8f8f8; padding: 80px 0 55px;} #section03:after{content:''; display:block; clear:both;} #section03 article{position:relative; margin:0 auto; max-width: 1145px;} #section03 h2{text-align:center; margin-bottom:50px;} #section03 h2 .big-tit{font-size:46px; color:#1a1a1a; font-weight:700;} #section03 h2 .big-tit strong{ letter-spacing: 1px; color: #000; font-family: 'Rubik', sans-serif; display: inline-block; margin-top: 0; margin-right: 2px; vertical-align: top;} #section03 h2 .sm-txt{font-size:26px; color:#9c9c9c; font-weight:400; margin-top:25px;} #section03 h2 .big-tit{opacity:0; transform:translateY(40px);} #section03 .in-view h2 .big-tit{ opacity: 1; transform: translateY(0px); transition: all 1s 0.4s ease; font-weight: 500; color: #545454; font-size: 32px;} #section03 h2 .sm-txt{opacity:0; transform:translateY(40px);} #section03 .in-view h2 .sm-txt{opacity:1; transform:translateY(0px); transition:all 1s 0.6s ease;} /* 왼쪽 */ #section03 .cont-wrap{position:relative;} #section03 .cont-wrap ul{display:table; width:100%} #section03 .cont-wrap div.txt{margin: 50px auto 0; display: table;} #section03 .cont-wrap div.txt p{ text-align: center; padding-bottom: 20px;} #section03 .cont-wrap div.txt p span{font-size: 18px;} #section03 .cont-wrap div.txt p span b{margin-right: 6px; color: #272727;font-weight: 600;} #section03 .cont-wrap div.txt p span em{color:#8e8e8e; font-weight:300} #section03 .left-cont{position:relative; display:inline-block; width:544px; height: 306; float:left;} #section03 .test-info{display:block; height:100%;} #section03 h3{position:relative; display:block; width:100%; margin-bottom:30px; overflow:hidden;} #section03 .s-tit{font-size:26px; color:#333; font-weight:500px;} #section03 .test-info .s-cont{padding:40px; background:url("/images/main/bus_left_bg.png") no-repeat #684ab3 93% bottom; width:100%; height:100%; } #section03 .test-info .s-txt{font-size:24px; color:#fff; font-weight:300;} #section03 .test-info .s-txt strong{font-weight:500;} #section03 .test-info ul{display:block; margin-top:25px;} #section03 .test-info ul li{position:relative; display:inline-block; padding:7px 30px 7px 28px;} #section03 .test-info ul li:before{content:""; position:absolute; left:0; top:14px; width:14px; height:2px; background:#fff; display:block; } #section03 .test-info ul li a{font-size:16.5px; line-height:1; color:#fff; font-weight:500;} #section03 .test-info ul li a:hover{opacity:0.8; transition:.2s ease-out;} /* 오른쪽 */ #section03 .right-cont{float:right; position:relative; display:inline-block; width:544px; height: 306px;} #section03 .text-part{} #section03 .text-part h3{margin-bottom:24px;} #section03 .text-part h3 .s-tit{float:left;} #section03 .text-part .s-tab{float:right;} #section03 .text-part .s-tab li{display:inline-block; padding:0; margin:0; cursor:pointer;} #section03 .text-part .s-tab li{text-align:center; padding:12px 20px 10px 20px; display:inline-block; font-size:16px; font-weight:400; color:#383838; background:none; border-radius:30px; line-height:1; transition:.2s ease-out;} #section03 .text-part .s-tab li.active{background:#000; color:#fff;} #section03 .text-part .s-tab li:hover{background:#000; color:#fff;} #section03 .text-part .s-cont{position:relative; display:block; width:100%; height:100%; clear:both;} #section03 .text-part .tabcontent{display:none;} #section03 .text-part .tab-board{font-size:0;} #section03 .text-part .tab-board li{display:inline-block;width:33.33333%; padding:6px 6px 0 0; box-sizing:border-box;} #section03 .text-part .tab-board li a{display:block; position:relative; padding:15px 18px; background:#fff; border:1px solid #d1d1d1; box-sizing:border-box; font-size:14px; } #section03 .text-part .tab-board li a span{display:block;} #section03 .text-part .tab-board li .t-cate{display:inline-block; height:auto; padding:6px 15px; text-align:center; line-height:1; font-size:13px; color:#fff; border-radius:30px;} #section03 .text-part .tab-board li span.co-1{background:#684ab3;} /* 화장품임상센터 */ #section03 .text-part .tab-board li span.co-2{background:#2bb2c3;} /* 건강기능식품임상센터 */ #section03 .text-part .tab-board li span.co-3{background:#dfb142;} /* 광선임상센터 */ #section03 .text-part .tab-board li span.co-4{background:#cd55ad;} /* 비임상연구센터 */ #section03 .text-part .tab-board li .t-tit{height:37px; margin:.84821em 0 1em 0; color:#000; font-size:14px; overflow:hidden; } #section03 .text-part .tab-board li .t-date{color:#787878; font-size:12px; font-weight:400; } #section03 .text-part .tab-board li .bn-more{position:absolute; display:block; width:14px; border:0; right:20px; bottom:25px; font-size:0;} @-moz-document url-prefix() {#section03 .text-part .tab-board li .bn-more {width:14px;}}/*파이어폭스*/ #section03 .text-part .tab-board li .bn-more .line1, #section03 .text-part .tab-board li .bn-more .line2{position:absolute; z-index:10; right:0; top:0; width:2px; height:14px; background-color:#676767; transition:transform .7s; -webkit-transition:-webkit-transform .7s; -moz-transition:-moz-transform .7s;} #section03 .text-part .tab-board li .bn-more .line1{transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg);} #section03 .text-part .tab-board li .bn-more .line2{transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg);} #section03 .text-part .tab-board li:hover .bn-more .line1{transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);} #section03 .text-part .tab-board li:hover .bn-more .line2{transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg);} .sr {position:absolute; width:1px; height:1px; clip:rect(0 0 0 0); overflow:hidden;} #section03 ul li .ac-info{ position: absolute; bottom: 0; background: #fff; width: 490px; left: 22px; height: 100px; padding: 25px 30px 0;} #section03 ul li .ac-info h4{ font-size: 24px; color: #3f3f3f; font-weight: bold; padding-bottom: 15px;} #section03 ul li .ac-info h4 img{float: right;} #section03 ul li .ac-info p{ font-size: 16px; color: #3f3f3f; font-weight: 400; line-height: 26px; white-space: nowrap;} #section03 .left-cont{opacity:0; transform:translateX(40px);} #section03 .in-view .left-cont{opacity:1; transform:translateX(0px); transition:all 1s 0.4s ease;} #section03 .right-cont{opacity:0; transform:translateX(-40px);} #section03 .in-view .right-cont{opacity:1; transform:translateX(0px); transition:all 1s 0.6s ease;} /* @media (max-width: 1240px){ #section03{padding:80px 0;} } @media (max-width: 1170px){ #section03 h3{margin-bottom:10px;} #section03 .left-cont{width:100%; height:100%; float:none;} #section03 .right-cont{float:none; position:relative; display:inline-block; width:100%; height:100%; margin-top:30px;} #section03 .text-part h3{margin-bottom:10px;} #section03 .text-part h3 .s-tit{float:none; margin-bottom:10px;} #section03 .text-part .s-tab{float:none;} #section03 .text-part .tab-board li{width:50%; vertical-align:top;} #section03 .text-part .tab-board li:nth-child(2n), #section03 .text-part .tab-board li:nth-child(4n), #section03 .text-part .tab-board li:last-child{padding:6px 0 0 0; } } @media (max-width: 767px){ #section03 h2{margin-bottom:50px;} #section03 h2 .big-tit{font-size:40px;} #section03 h2 .sm-txt{font-size:20px; margin-top:15px;} #section03 .s-tit{font-size:20px;} } @media (max-width: 640px){ #section03{padding:50px 0;} #section03 h2{margin-bottom:20px;} #section03 h2 .big-tit{font-size:30px;} #section03 h2 .sm-txt{font-size:16px; margin-top:10px;} #section03 .text-part .s-tab li{padding:7px 15px 7px 15px; font-size:14px;} #section03 .test-info .s-cont{padding:20px 25px;} #section03 .test-info .s-txt{font-size:20px;} #section03 .test-info ul{margin-top:15px;} #section03 .test-info ul li{padding:6px 30px 6px 28px;} #section03 .test-info ul li a{font-size: 15.5px;} } @media (max-width: 520px){ #section03 .text-part .tab-board li{width:100%; padding:6px 0 0 0; } #section03 .text-part .tab-board li:nth-child(2n), #section03 .text-part .tab-board li:nth-child(4n), #section03 .text-part .tab-board li:last-child{padding:6px 0 0 0; } #section03 .text-part .tab-board li .t-tit{height:20px;} } */ /* 공지 뉴스*/ #section04{width:100%; position:relative; background:#fff; padding:120px 0 140px;} #section04 article{position:relative; margin:0 auto; max-width:1200px; } #section04 h2{text-align:center; margin-bottom:50px;} #section04 h2 .big-tit{font-size:34px; color:#545454; font-weight:500;} #section04 h2 .big-tit strong{ letter-spacing: 1px; color: #000; font-family: 'Rubik', sans-serif; display: inline-block; margin-top: 0; margin-right: 2px; vertical-align: top;} #section04 .notice{position:relative;} #section04 .notice li{ height: 80px; border: 1px solid #e6e6e6; border-radius: 15px; margin-bottom: 10px; line-height: 80px; font-size: 18px; color: #000000;} #section04 .notice span{ vertical-align: middle;} #section04 .notice span.tit{ font-weight: bold; font-size: 20px; width: 120px; display: inline-block; text-align: center; position: relative;} #section04 .notice span.tit:after{ content: "l"; width: 1px; height: 44px; background: #e6e6e6; font-size: 0; display: block; position: absolute; right: 0; top: 20px;} #section04 .notice span.con{ text-indent: 40px; display: inline-block; font-weight: 300;} #section04 .notice span.con a{ font-size: inherit; color: inherit; line-height: initial; vertical-align: initial;} #section04 .notice span.date{ float: right; padding-right: 35px; color: #8e8e8e; font-weight: 400;} #section04 .notice a.more_view_btn{ margin-left: 17px; margin-top: -4px; display: inline-block;} #section04 h2 .big-tit{opacity:0; transform:translateY(40px);} #section04 .in-view h2 .big-tit{opacity:1; transform:translateX(0px); transition:all 1s 0.4s ease;} #section04 h2 .sm-txt{opacity:0; transform:translateY(40px);} #section04 .in-view h2 .sm-txt{opacity:1; transform:translateX(0px); transition:all 1s 0.6s ease;} #section04 .notice{opacity:0; transform:translateY(40px);} #section04 .in-view .notice{opacity:1; transform:translateX(0px); transition:all 1s 0.6s ease;} .floating-banner { position: fixed; top: 80%; right: 16px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 1000; } /* 개별 버튼 */ .floating-banner .banner-btn { display: flex; align-items: center; gap: 8px; background-color: #f9f9f9; padding: 8px 16px; border-radius: 30px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; } /* Font Awesome 아이콘 크기 & 색상 */ .floating-banner .banner-btn i { font-size: 20px; width: 20px; text-align: center; color: #555; } /* 텍스트 스타일 */ .floating-banner .banner-btn span { font-size: 14px; color: #333; white-space: nowrap; } /* 호버 효과 */ .floating-banner .banner-btn:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .floating-banner .banner-btn .material-symbols-outlined { /* 기존 폰트 설정 유지 */ font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; font-size: 20px; line-height: 1; color: #fff; /* 원형 배경 */ background-color: #0080ff; /* 배경색 */ border-radius: 50%; /* 완전 원형 */ padding: 8px; /* 원 크기 조정 */ display: inline-flex; /* 가운데 정렬 */ align-items: center; justify-content: center; } /* 이미지 아이콘에 원형 배경 입히기 */ .floating-banner .banner-btn .banner-icon { /* 이미지 본연의 크기 */ width: 35px; height: 35px; /* circle 배경 */ border-radius: 50%; /* Flex 가운데 정렬 */ display: inline-flex; align-items: center; justify-content: center; /* 이미지 비율 유지 */ object-fit: contain; } /* BASIC css end */