#translation-button { position: absolute; right:22px; top:72px; display: inline-flex; justify-content: space-between; align-items: center; width:150px; min-height: 30px; border: 1px solid #ccc; border-radius: .25rem; background-color: #fff; padding: 0 8px; box-sizing:border-box; cursor: pointer; z-index: 10; } #translation-button .left { display: flex; align-items: center; } #translation-button .left img { width: 16px; height: auto; aspect-ratio: 1/1; } #translation-button .left span { font-size:12px; margin-left:4px; } #translation-box { position: absolute; right:22px; top:110px; width:150px; z-index:10; display: none; } #translation-box .translation-links { display: inline-block; width:100%; background-color:#ffffff; border-radius: .25rem; } #translation-box .translation-links li { display: flex; justify-content: space-between; align-items: center; padding:4px 8px; box-sizing:border-box; cursor: pointer; } #translation-box .translation-links li span { font-size:12px; } #translation-box .translation-links li img { width:20px; height: auto; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; } .pop_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 350; } /* .LayerRollPopup { top: 190px !important; } */ .close_bt { position: absolute; left: 0; bottom:-34px; width: 100%; overflow: hidden; height: 35px; z-index:2; background:#000000; } .close_bt input { float: left; padding: 10px 0 0 5px; box-sizing: border-box; } .close_bt a { float: right; width: 22px; padding: 7px 0px 0 0; overflow: hidden; } .close_bt a img { width: 18px; } .pop_wrap .rollpop { position:absolute; top:48%; left:50%; width:1040px; height:537px; transform:translate(-50%,-50%); } .pop_wrap .popview { position:absolute; top:0px; right:0px; width:900px; height:537px ; background:#000000; overflow:hidden; } .pop_wrap .popview img { width:100%; } .popFadeImg { position:relative; width:900px; height:537px ; } .popFadeThum { position:absolute; top:0; left:0; width:140px; height:537px; background:#ffffff; overflow:hidden; } .popFadeThum li { cursor:pointer; float: left; position:relative; width:100%; height:11.1%; line-height:140%; border-bottom:1px solid #d2d3d4; background:#ffffff; overflow: hidden; box-sizing:border-box; font-size:15px; font-weight:600; color:#000; } .popFadeThum li div { position:absolute; top:50%; left:18px; transform:translate(0%,-50%); } .popFadeThum li.active { border-bottom:1px solid #e6e0d1; background:#eeeeee; font-size:15px; font-weight:700; color:#4a4742; } .popFadeThum li div span { display:block; margin:5px 0; } .popFadeThum li:nth-child(9) { border-bottom:0px; } .popFadeThum li:nth-child(1) div span:nth-child(3) { display:none; } .popFadeThum li:nth-child(2) div span:nth-child(3) { display:none; } .popFadeThum li:nth-child(3) div span:nth-child(2) { display:none; } .popFadeThum li:nth-child(4) div span:nth-child(2) { display:none; } .plink1 { display:none; position:absolute; top:0px; left:0px; width:50%; height:537px; } .plink2 { display:none; position:absolute; top:0px; left:50%; width:50%; height:537px; } .popFadeImg li:nth-child(5) .plink1 { display:block; } .popFadeImg li:nth-child(5) .plink2 { display:block; } body { background:#e8e7e3; overflow-x: hidden; } body img { display:block; } #wrap { overflow-x:hidden; } ::scrollbar { width: 5px; height:12px; } ::-webkit-scrollbar { width: 5px; height:12px; } ::scrollbar-track { background-color: #f1fafe; } ::-webkit-scrollbar-track { background-color: #f1fafe; top:660px; } ::scrollbar-thumb { background: #000000; } ::-webkit-scrollbar-thumb { background: #000000; } ::scrollbar-button { display: none; } ::-webkit-scrollbar-button { display: none; } header { position:absolute; top:0px; left:0px; width:100%; min-width:1280px; height:66px; z-index:2; } header .logo a { display:block; position:absolute; top:12px; left:40px; width:126px; height:53px; background:url('/images/common/logo.svg')no-repeat 0px 0px; background-size:100%; } header .util { position:absolute; top:15px; right:26px; } header .util li { float:left; } header .util li.topbt2 a { display:block; width:109px; height:30px; line-height:30px; text-align:center; font-family: 'MaruBuriBold'; font-size:15px; color:#ffffff; background:#0d0d0d; border-radius:30px; } header .util li.topbt1 a { display:block; height:30px; line-height:30px; font-family: 'MaruBuriBold'; font-size:15px; color:#ffffff; padding-left:25px; margin-right:40px; background:url('/images/common/topbt1.png')no-repeat 0px 4px; border-radius:30px; } .gnb { position:relative; width:1150px; margin:0 auto; height:56px; margin-top:4px; display:flex; justify-content: space-between } .gnb li.dt01 { position:relative; height:56px; } .gnb li.dt01 a.dt01a { display:block; position:relative; height:56px; line-height:70px; font-family: 'MaruBuriBold'; font-size:16px; color:#ffffff; } .gnb li.dt01 a.dt01a:hover { color:#c5ac76; } .gnb li.dt01 ul {display:none; position:absolute; top:56px; left:-24px; background:#0d0d0d; box-sizing:border-box; padding:20px 24px 20px 24px; } .gnb li.dt01 ul li a { display:block; font-family: 'NanumBarunGothic'; color:#a6a6a6; font-size:13px; margin: 12px 0; } .gnb li.dt01 ul li a:hover { color:#c5ac76; } .gnb li.dt01:hover ul { display:block;} .gnb li.dt01.allmenubt { width:18px; height:17px; background:url('/images/common/allmenubt.png')no-repeat 0px 24px; background-size:18px; padding-top:24px; cursor:pointer; } .gnb li.dt01.allmenubt img { width:100%; } .gnb li:nth-child(2) ul { width:140px; } .gnb li:nth-child(3) ul { width:150px; } .gnb li:nth-child(4) ul { width:144px; } .gnb li:nth-child(5) ul { width:190px; } .gnb li:nth-child(6) ul { width:150px; } .gnb li:nth-child(7) ul { width:154px; } .gnb li:nth-child(8) ul { width:154px; } .gnb li:nth-child(9) ul { left:-10px; width:120px; } .gnb li:nth-child(11) ul { width:120px; } .gnb li:nth-child(11) ul { left:-60px; width:200px; } .gnb li:nth-child(11) ul li { float:left; width:33.3%; text-align:center; } .gnb li:nth-child(11) ul li a { margin: 8px 0; } .gnb li:nth-child(12) ul { width:140px; } .gnb li:nth-child(13) ul { width:150px; } .gnb li:nth-child(14) ul { width:150px; } #visual { position:relative; width:100%; height:950px; overflow:hidden; } #visual div.bg { position:absolute; top:0px; left:0px; width:100%; height:950px; background:url('/images/main1/v.jpg')no-repeat 50% 0; background-size:cover; animation: sectionbg 4s ease-out both 0.3s; } #visual ul.maintxt { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); text-align:center; width:700px; } #visual ul.maintxt li.t1 { margin-bottom:20px; font-size:17px; color:#ffffff; font-family: 'MaruBuriSemiBold'; line-height:150%; animation: fadeup 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 0.3s; } #visual ul.maintxt li.t2 { width:136px; height:40px; margin:0 auto; animation: fadeup 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 0.6s; } @keyframes sectionbg { 0% { transform: scale(1.1) translateY(0); transform-origin: 50% 50%; } 100% { transform: scale(1) translateY(0); transform-origin: 50% 50%; } } @keyframes fadeup { 0% { transform:translateY(70px); opacity:0; filter: blur(10px); } 100% { transform:translateY(0); opacity:1; filter: blur(0px); } } .vbg { position:absolute; bottom:268px; left:42%; transform:translateX(-50%); width:345px; height:539px; animation: vbg 5s ease-out infinite 4.0s; } @keyframes vbg { 0% { width:345px; height:0px; background:url('/images/main1/vbg1.png')no-repeat left bottom; } 100% { width:345px; height:539px; background:url('/images/main1/vbg1.png')no-repeat left bottom; } } .vnumber { position:absolute; bottom:268px; left:42%; transform:translateX(-50%); width:345px; height:539px; } .vnumber li { position:absolute; color:#ffffff; font-family: 'MaruBuriBold'; text-align:center; } .vnumber li.num0 { font-size:27px; top:324px; left:109px; animation: num0 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num1 { font-size:21px; top:413px; left:30px; animation: num1 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num2 { font-size:21px; top:332px; left:195px; animation: num2 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num3 { font-size:21px; top:413px; left:132px; animation: num3 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num4 { font-size:27px; top:514px; left:311px; animation: num4 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num5 { font-size:21px; top:59px; left:330px; animation: num5 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num6 { font-size:21px; top:175px; left:171px; animation: num6 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num7 { font-size:21px; top:139px; left:276px; animation: num7 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num8 { font-size:21px; top:332px; left:300px; animation: num8 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num9 { font-size:27px; top:434px; left:232px; animation: num9 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num10 { font-size:27px; top:81px; left:62px; animation: num10 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } .vnumber li.num11 { font-size:27px; top:2px; left:2px; animation: num11 2.5s cubic-bezier(0, 0.55, 0.45, 1) both 1.5s; } @keyframes num0 { 0% { top:324px; left:29px; opacity:0; filter: blur(20px); } 80% { top:324px; left:109px; opacity:1; filter: blur(0px); } 100% { opacity:1; } } @keyframes num1 { 0% { top:493px; left:-50px; opacity:0; filter: blur(20px);} 80% { top:413px; left:30px; opacity:1; filter: blur(0px); } 100% { opacity:30%; } } @keyframes num2 { 0% { top:332px; left:195px; opacity:0; filter: blur(20px); } 80% { top:332px; left:195px; opacity:1; filter: blur(0px); } 100% { opacity:30%; } } @keyframes num3 { 0% { top:493px; left:132px; opacity:0; filter: blur(20px); } 80% { top:413px; left:132px; opacity:1; filter: blur(0px); } 100% { opacity:30%; } } @keyframes num4 { 0% { top:434px; left:391px; opacity:0; filter: blur(20px); } 80% { top:514px; left:311px; opacity:1; filter: blur(0px); } 100% { opacity:1; } } @keyframes num5 { 0% { top:-39px; left:410px; opacity:0; filter: blur(20px); } 80% { top:59px; left:330px; opacity:1; filter: blur(0px); } 100% { opacity:30%; } } @keyframes num6 { 0% { top:175px; left:91px; opacity:0; filter: blur(20px); } 80% { top:175px; left:171px; opacity:1; filter: blur(0px); } 100% { opacity:30%; } } @keyframes num7 { 0% { top:159px; left:356px; opacity:0; filter: blur(20px); } 80% { top:139px; left:276px; opacity:1; filter: blur(0px); } 100% { opacity:30%; } } @keyframes num8 { 0% { top:332px; left:380px; opacity:0; filter: blur(20px); } 80% { top:332px; left:300px; opacity:1; filter: blur(0px); } 100% { opacity:30%; } } @keyframes num9 { 0% { top:494px; left:312px; opacity:0; filter: blur(20px); } 80% { top:434px; left:232px; opacity:1; filter: blur(0px); } 100% { opacity:1; } } @keyframes num10 { 0% { top:0px; left:142px; opacity:0; filter: blur(20px); } 80% { top:81px; left:62px; opacity:1; filter: blur(0px); } 100% { opacity:1; } } @keyframes num11 { 0% { top:82px; left:82px; opacity:0; filter: blur(20px); } 80% { top:2px; left:2px; opacity:1; filter: blur(0px); } 100% { opacity:1; } } #balance { position:relative; width:100%; height:848px; background:#f7f6f2;overflow:hidden; } #balance .txt1 { position:absolute; top:178px; left:21%; transform:translate(-50%,0%); width:115px; height:115px; } #balance .txt1 span { display:block; animation: rotate1 30s ease-out infinite ; } #balance .txt2 { position:absolute; top:260px; left:34%; opacity:0; filter: blur(30px); transform:translate(-50%,0%); width:510px; font-size:68px; color:#505050; font-family: 'MaruBuri'; line-height:130%; } #balance .txt3 { position:absolute; top:358px; left:70%; opacity:0; filter: blur(30px); transform:translate(-50%,0%); width:494px; font-size:19px; color:#000000; font-family: 'MaruBuri'; line-height:190%; } #balance .txt4 { position:absolute; top:590px; left:70%; opacity:0; filter: blur(30px); transform:translate(-50%,0%); width:494px; font-size:19px; color:#000000; font-family: 'MaruBuri'; line-height:190%; } #balance.active .txt2 { left:40%; opacity:1; filter: blur(0px); transition:all 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #balance.active .txt3 { top:328px; opacity:1; filter: blur(0px); transition:all 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; } #balance.active .txt4 { top:550px; opacity:1; filter: blur(0px); transition:all 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s; } @keyframes rotate1 { from { -webkit-transform:translate(0%,0%) rotate(0deg); -o-transform:translate(0%,0%) rotate(0deg); transform:translate(0%,0%) rotate(0deg); } to { -webkit-transform:translate(0%,0%) rotate(360deg); -o-transform:translate(0%,0%) rotate(360deg); transform:translate(0%,0%) rotate(360deg); } } @media all and (min-width:1471px) and (max-width:1530px) { header .logo a { top:12px; left:20px; } .gnb { position:relative; width:1050px; margin:0 auto; height:56px; margin-top:4px; display:flex; justify-content: space-between } .gnb li.dt01 { position:relative; height:56px; } .gnb li.dt01 a.dt01a { display:block; position:relative; height:56px; line-height:66px; font-family: 'MaruBuriBold'; font-size:16.5px; color:#ffffff; } .gnb li.dt01 a.dt01a:hover { color:#c5ac76; } .gnb li.dt01 ul {display:none; position:absolute; top:56px; left:-24px; background:#0d0d0d; box-sizing:border-box; padding:20px 24px 20px 24px; } .gnb li.dt01 ul li a { display:block; font-family: 'NanumBarunGothic'; color:#a6a6a6; font-size:13px; margin: 12px 0; } .gnb li.dt01 ul li a:hover { color:#c5ac76; } .gnb li.dt01:hover ul { display:block;} #balance { position:relative; width:100%; height:848px; background:#f7f6f2;overflow:hidden; } #balance .txt1 { position:absolute; top:178px; left:11%; transform:translate(-50%,0%); width:115px; height:115px; } #balance .txt1 span { display:block; animation: rotate1 30s ease-out infinite ; } #balance .txt2 { position:absolute; top:260px; left:24%; opacity:0; filter: blur(30px); transform:translate(-50%,0%); width:510px; font-size:54px; color:#505050; font-family: 'MaruBuri'; line-height:130%; } #balance .txt3 { position:absolute; top:358px; left:80%; opacity:0; filter: blur(30px); transform:translate(-50%,0%); width:494px; font-size:17px; color:#000000; font-family: 'MaruBuri'; line-height:190%; } #balance .txt4 { position:absolute; top:590px; left:80%; opacity:0; filter: blur(30px); transform:translate(-50%,0%); width:494px; font-size:17px; color:#000000; font-family: 'MaruBuri'; line-height:190%; } #balance.active .txt2 { left:38%; opacity:1; filter: blur(0px); transition:all 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #balance.active .txt3 { top:328px; opacity:1; filter: blur(0px); transition:all 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; } #balance.active .txt4 { top:550px; opacity:1; filter: blur(0px); transition:all 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s; } } @media all and (min-width:320px) and (max-width:1470px) { header .logo a { top:12px; left:20px; } .gnb { position:relative; width:850px; margin:0 auto; height:46px; margin-top:4px; display:flex; justify-content: space-between } .gnb li.dt01 { position:relative; height:46px; } .gnb li.dt01 a.dt01a { display:block; position:relative; height:46px; line-height:66px; font-family: 'MaruBuriBold'; font-size:14px; color:#ffffff; } .gnb li.dt01 a.dt01a:hover { color:#c5ac76; } .gnb li.dt01 ul {display:none; position:absolute; top:46px; left:-24px; background:#0d0d0d; box-sizing:border-box; padding:20px 24px 20px 24px; } .gnb li.dt01 ul li a { display:block; font-family: 'NanumBarunGothic'; color:#a6a6a6; font-size:13px; margin: 12px 0; } .gnb li.dt01 ul li a:hover { color:#c5ac76; } .gnb li.dt01:hover ul { display:block;} header .util { position:absolute; top:15px; right:26px; } header .util li { float:left; } header .util li.topbt2 a { display:block; width:109px; height:30px; line-height:30px; text-align:center; font-family: 'MaruBuriBold'; font-size:15px; color:#ffffff; background:#0d0d0d; border-radius:30px; } header .util li.topbt1 a { display:block; height:30px; line-height:30px; font-family: 'MaruBuriBold'; font-size:15px; color:#ffffff; padding-left:25px; margin-right:16px; background:url('/images/common/topbt1.png')no-repeat 0px 4px; border-radius:30px; } #balance { position:relative; width:100%; height:848px; background:#f7f6f2;overflow:hidden; } #balance .txt1 { position:absolute; top:178px; left:11%; transform:translate(-50%,0%); width:115px; height:115px; } #balance .txt1 span { display:block; animation: rotate1 30s ease-out infinite ; } #balance .txt2 { position:absolute; top:260px; left:24%; opacity:0; filter: blur(30px); transform:translate(-50%,0%); width:510px; font-size:54px; color:#505050; font-family: 'MaruBuri'; line-height:130%; } #balance .txt3 { position:absolute; top:358px; left:80%; opacity:0; filter: blur(30px); transform:translate(-50%,0%); width:494px; font-size:17px; color:#000000; font-family: 'MaruBuri'; line-height:190%; } #balance .txt4 { position:absolute; top:590px; left:80%; opacity:0; filter: blur(30px); transform:translate(-50%,0%); width:494px; font-size:17px; color:#000000; font-family: 'MaruBuri'; line-height:190%; } #balance.active .txt2 { left:38%; opacity:1; filter: blur(0px); transition:all 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #balance.active .txt3 { top:328px; opacity:1; filter: blur(0px); transition:all 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; } #balance.active .txt4 { top:550px; opacity:1; filter: blur(0px); transition:all 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s; } } #solution { position:relative; width:100%; height:2300px; padding-top:118px; margin:0 auto; background:#e8e7e3;overflow:hidden; } #solution .title { position:relative; width:90%; margin:0 auto; max-width:1920px; font-size:54px; color:#505050; font-family: 'MaruBuri'; line-height:100%; } #solution .solution { position:relative; width:100%; max-width:1920px; margin:0 auto; margin-top:40px; height:2057px; overflow:hidden; } #solution .solution .solutionimg { position:absolute; opacity:0; filter: blur(30px); top:0px; right:50%; width:846px; height:2057px; } #solution .solution .solutionimg .solutionimg1 { position:relative; width:100%; height:1049px; background:url('/images/main1/solutionimg1.jpg')no-repeat left 0; background-attachment: fixed; } #solution .solution .solutionimg .solutionimg2 { position:relative; width:100%; height:967px; margin-top:40px; background:url('/images/main1/solutionimg2.jpg')no-repeat left 0; background-attachment: fixed; } #solution .solution .solutiontxt { position:absolute; top:0px; left:50%; width:50%; box-sizing:border-box; } #solution .solution .solutiontxt li.t1 { position:absolute; top:78px; left:-8%; opacity:0; filter: blur(20px); font-size:19px; color:#000000; font-family: 'MaruBuri'; line-height:170%; transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #solution .solution .solutiontxt li.t1 span { color:#ff006c; } #solution .solution .solutiontxt li.t2 { position:absolute; top:610px; right:-8%; opacity:0; filter: blur(20px); transition:all 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #solution .solution .solutiontxt li.t3 { position:absolute; top:1138px; left:-8%; opacity:0; filter: blur(20px); font-size:19px; color:#000000; font-family: 'MaruBuri'; line-height:170%; transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #solution .solution .solutiontxt li.t4 { position:absolute; top:1542px; right:-8%; opacity:0; filter: blur(20px); } #solution .solution .solutiontxt li.t5 { position:absolute; top:1877px; left:-8%; opacity:0; filter: blur(20px); font-size:19px; color:#000000; font-family: 'MaruBuri'; line-height:170%; } #solution.active .solution .solutionimg { opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #solution.active .solution .solutiontxt li.t1 { position:absolute; top:78px; left:8%; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #solution.active .solution .solutiontxt li.t2 { position:absolute; top:610px; right:8%; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #solution.active2 .solution .solutiontxt li.t3 { position:absolute; top:1138px; left:8%; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #solution.active2 .solution .solutiontxt li.t4 { position:absolute; top:1542px; right:8%; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #solution.active2 .solution .solutiontxt li.t5 { position:absolute; top:1877px; left:8%; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #core { position:relative; width:100%; margin:0 auto; padding-top:100px; padding-bottom:100px; background:#e8e7e3; overflow:hidden; transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #core .title { opacity:0; filter: blur(5px); transform:translateY(80px); position:relative; width:90%; margin:0 auto; font-size:54px; color:#505050; font-family: 'MaruBuri'; line-height:100%; } #core.active .title { opacity:1; filter: blur(0px); transform:translateY(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #core .coreslide { opacity:0; filter: blur(5px); transform:translateY(80px); position:relative; width:105%; padding-left:5%; margin:0 auto; margin-top:40px; box-sizing:border-box; overflow:hidden; } #core.active .coreslide { opacity:1; filter: blur(0px); transform:translateY(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; } #core .coreslide img { width:100%; } #core .coreslide .slick-slide ul { float:left; position:relative; width:33.3333%; padding-right:80px; box-sizing:border-box; } #core .coreslide .slick-slide ul:nth-child(2) { margin-top:102px; } #core .coreslide .slick-slide ul:nth-child(3) { margin-top:204px; } #core .coreslide .slick-slide ul li.t1 { font-size:22px; color:#323232; font-family: 'MaruBuriSemiBold'; margin-top:46px; letter-spacing:-1px; line-height:150%; } #core .coreslide .slick-slide ul li.t2 {width:95%; font-size:16px; color:#433f3f; font-weight:400; margin-top:10px; line-height:150%; } .coreslide .slick-dots { position:absolute; bottom:0px; left:50%; width:90%; transform:translateX(-50%); } .coreslide .slick-dots li { display:block; float:left; width:14px; height:14px; background:#ffffff; border:1px solid #816644; border-radius:100%; box-sizing:border-box; margin-right:20px; cursor:pointer; } .coreslide .slick-dots li.slick-active { background:#816644; } #count { position:relative; width:100%; height:849px; background:#ede8e1; margin:0 auto; overflow:hidden; background:url('/images/main1/count.jpg')no-repeat 50% 50%; background-size: cover; background-attachment: fixed; } #count .count { position:absolute; top:402px; left:50%; opacity:0; filter: blur(20px); width:1560px; height:156px; transform:translateX(-50%); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #count .count ul { float:left; width:25%; height:156px; text-align:center; box-sizing:border-box; border-right:1px solid rgba(255,255,255,20%); } #count .count ul:nth-child(4) { border-right:0px solid #bbbbbb; } #count .count ul li:nth-child(1) { padding-top:16px; font-size:71px; color:#ffffff; font-family: 'MaruBuriBold'; line-height:100%; letter-spacing:-1px; } #count .count ul li:nth-child(2) { width:100%; line-height:150%; font-size:18px; margin-top:14px; color:#ffffff; } #count .txt { position:absolute; top:694px; left:50%; width:1560px; opacity:0; filter: blur(20px); height:156px; text-align:center; transform:translateX(-50%); font-size:17px; color:#ffffff; line-height:160%; transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #count .txt span { color:#ff006c; } #count.active .count { top:322px; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #count.active .txt { top:614px; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; } #count.countwrap .count { position:absolute; top:402px; left:50%; opacity:0; filter: blur(20px); width:1260px; height:156px; transform:translateX(-50%); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #count.countwrap .count ul { float:left; width:33%; height:156px; text-align:center; box-sizing:border-box; border-right:1px solid rgba(255,255,255,20%); } #count.countwrap .count ul li:nth-child(2) span { font-size:14px; opacity:50%; } #count.countwrap .count ul:nth-child(3) { border-right:0px solid #bbbbbb; } #count.active .count { top:322px; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #count.active .txt { top:614px; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; } #count .count.count4 ul { float:left; width:33.33%; height:156px; text-align:center; box-sizing:border-box; border-right:1px solid rgba(255,255,255,20%); } #count .count.count4 ul:nth-child(1) { display:none; } #count .count.count4 ul:nth-child(4) { border-right:0px solid #bbbbbb; } #mainbna { position:relative; width:100%; padding-top:110px; padding-bottom:120px; background:#e8e7e3; margin:0 auto; overflow:hidden; box-sizing:border-box; } #mainbna .title { position:relative; width:90%; margin:0 auto; font-size:62px; color:#505050; font-family: 'MaruBuri'; line-height:100%; } #mainbna .mainbna { position:relative; width:90%; margin:0 auto; padding-top:40px; padding-bottom:60px; overflow:hidden; } #mainbna .mainbna { display:none; } #mainbna .mainbna.on { display:block; } #mainbna .mainbnatab { position:relative; width:100%; text-align:center; margin-top:20px; } #mainbna .mainbnatab ul li { display:inline-block; margin:0 5px; font-size:15px; font-weight:400; color:#000000; padding-bottom:10px; cursor:pointer; } #mainbna .mainbnatab ul li.on { border-bottom:1px solid #43423d; } #mainbna .bna_group { overflow:hidden; } #mainbna .bna_group ul li.b_img { float:left; position:relative; width:50%; } #mainbna .bna_group ul li.a_img { float:left; position:relative; width:50%; } #mainbna .bna_group ul li.b_img div.bnaimgb { width:100%; height:50px; line-height:50px; text-align:center; font-size:18px; font-weight:500; color:#fff; background:#6b6b6b; } #mainbna .bna_group ul li.a_img div.bnaimgb { width:100%; height:50px; line-height:50px; text-align:center; font-size:18px; font-weight:500; color:#fff; background:#000000; } #mainbna .bna_group .bnaimg { width:100%; height:366px; overflow:hidden; } #mainbna .bna_group ul li div img { width:100%; min-height:366px; } #mainbna .bna_group .bna_submsg {clear:both; position:relative; width:100%; padding:10px; line-height:25px; box-sizing:border-box; background:#6b6b6b; color:white;} #mainbna .bna_group .bna_title { position:relative; width:100%; padding:3% 5%; border:1px solid #cdcdcd; border-top:0px; box-sizing:border-box; overflow:hidden; background:#f6f6f6; } #mainbna .bna_group .bna_title ul li {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #mainbna .bna_group .bna_title ul li:nth-child(1) { width:100%; height:42px; line-height:40px; margin-bottom:6px; text-align:center; color:#010101; font-size:22px; font-weight:500; } #mainbna .bna_group .bna_title ul li:nth-child(1) span { display:inline-block; vertical-align: top; width:100px; height:36px; line-height:34px; margin-right:10px; text-align:center; font-size:19px; color:#1a1a1a; font-weight:700; background:#ffffff; border:1px solid #000000; border-radius: 26px; } #mainbna .bna_group .bna_title ul li:nth-child(2) { width:100%; text-align:center; color:#5b5b5b; font-size:16px; font-weight:400; } #mainbna .bna_group .review_img { width:100%; height:300px; overflow:hidden; } #mainbna .bna_group .review_img img { width:100%; min-height:300px; } #mainbna .viewbt { position:relative; width:90%; margin:0 auto; padding-top:30px; text-align:right; } #mainbna .viewbt img { display:inline-block; } #mainbna .scrollbar { position:relative; width:90%; height:2px; background:#dcdbd6; margin:0 auto; margin-top:70px; z-index:2; } #mainbna .scrollbar .handle { width:563px; height:2px; background:#c5ac76; } #mainbna .scrollbar .handle .mousearea { position: absolute; top:-5px; left:0; width:100%; height: 10px; cursor:pointer; } #mainbna .swiper-horizontal>.swiper-scrollbar3, .swiper-scrollbar3.swiper-scrollbar-horizontal { position: absolute !important; left: 0% !important; bottom:0px !important; z-index: 50 !important; height: 4px !important; background:#dcdbd6; width: 100% !important; opacity:1 !important; } #mainbna .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background:#b79e6c !important; border-radius: 10px; left: 0; top: 0; } #mainbna .caseimgwrap { display:none; } #mainbna .caseimgwrap.on { display:block; } #case { position:relative; width:100%; padding-bottom:110px; background:#e8e7e3; margin:0 auto; overflow:hidden; box-sizing:border-box; } #case.casetop { padding-top:150px; } #case .title { transform:translateY(70px); opacity:0; filter: blur(5px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; position:relative; width:90%; margin:0 auto; font-size:62px; color:#505050; font-family: 'MaruBuri'; line-height:100%; } #case.active .title { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #case .con { transform:translateY(70px); opacity:0; filter: blur(5px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; position:relative; width:90%; margin:0 auto; margin-top:16px; font-size:18px; color:#505050; font-family: 'MaruBuri'; line-height:160%; } #case .con span {font-family: 'MaruBuriSemiBold'; color:#000000; } #case.active .con { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #case .casetab { position:relative; width:100%; text-align:center; margin-top:20px; } #case .casetab ul li { display:inline-block; margin:0 5px; font-size:15px; font-weight:400; color:#000000; padding-bottom:10px; cursor:pointer; } #case .casetab ul li.on { border-bottom:1px solid #43423d; } #case .caseimgwrap { transform:translateY(70px); opacity:0; filter: blur(5px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; position:relative; width:90%; margin:0 auto; padding-top:40px; padding-bottom:60px; } #case.active .caseimgwrap { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #case .caseimgwrap .caseimg { width:100%; } #case .caseimgwrap .caseimg div.swiper-slide { float:left; position:relative; cursor:pointer; } #case .caseimgwrap .caseimg div ul li.img { position:relative; } #case .caseimgwrap .caseimg div ul li.img img { width:100%; } #case .caseimgwrap .caseimg div ul li.txt { width:100%; height:65px; line-height:65px; background:#ffffff; text-align:center; font-size:15px; color:#414141; font-weight:400; } #case .caseimgwrap .caseimg div ul li.txt span { display:block; float:left; width:50%; } #case .scrollbar { position:relative; width:90%; height:2px; background:#dcdbd6; margin:0 auto; margin-top:70px; z-index:2; } #case .scrollbar .handle { width:563px; height:2px; background:#c5ac76; } #case .scrollbar .handle .mousearea { position: absolute; top:-5px; left:0; width:100%; height: 10px; cursor:pointer; } #case .viewbt { position:relative; width:90%; margin:0 auto; padding-top:30px; text-align:right; } #case .viewbt img { display:inline-block; } #case .scrollbar { position:relative; width:90%; height:2px; background:#dcdbd6; margin:0 auto; margin-top:70px; z-index:2; } #case .scrollbar .handle { width:563px; height:2px; background:#c5ac76; } #case .scrollbar .handle .mousearea { position: absolute; top:-5px; left:0; width:100%; height: 10px; cursor:pointer; } #case .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute !important; left: 0% !important; bottom:0px !important; z-index: 50 !important; height: 4px !important; background:#dcdbd6; width: 100% !important; opacity:1 !important; } #case .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background:#b79e6c !important; border-radius: 10px; left: 0; top: 0; } #case .caseimgwrap { display:none; } #case .caseimgwrap.on { display:block; } #case .caseimgwrap2 { position:relative; width:90%; margin:0 auto; padding-bottom:60px; } #case .caseimgwrap2 .caseimg { position:relative; width:100%; overflow:hidden; } #case .caseimgwrap2 .caseimg div.swiper-slide { float:left; position:relative; width:48%; margin-right:4%; margin-top:4%; cursor:pointer; } #case .caseimgwrap2 .caseimg div.swiper-slide:nth-child(2n) { margin-right:0px; } #case .caseimgwrap2 .caseimg div ul li.img { position:relative; } #case .caseimgwrap2 .caseimg div ul li.img img { width:100%; } #case .caseimgwrap2 .caseimg div ul li.txt { width:100%; height:65px; line-height:65px; background:#ffffff; text-align:center; font-size:15px; color:#414141; font-weight:400; } #case .caseimgwrap2 .caseimg div ul li.txt span { display:block; float:left; width:50%; } #case .title2 { position:relative; width:100%; margin-top:40px; font-size:16px; color:#505050; line-height:100%; text-align:center; } #case .bna_login { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: rgba( 0, 0, 0, 70% ); } #case .bna_login ul { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; } #case .bna_login ul li:nth-child(1) { font-size:18px; font-weight:400; color:#fff; line-height:160%; } #case .bna_login ul li:nth-child(2) { width: 480px; } #case .bna_login ul li:nth-child(2) a { display:inline-block; border-radius:40px; line-height:40px; text-align:center; margin:0 4px; } #case .bna_login ul li:nth-child(2) a.homelogin {width:130px; height:40px; margin-top:20px; font-size:14px; font-weight:400; color:#fff; line-height:40px; text-align:center; border:1px solid #fff; border-radius:40px; cursor:pointer; } #case .bna_login ul li:nth-child(2) a.homelogin:hover { background:#c5ac76; border:1px solid #c5ac76; } #case .bna_login2 { position:absolute; top:0px; right:0px; width:50%; height:100%; background-color: rgba( 0, 0, 0, 70% ); } #case .bna_login2 ul { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; } #case .bna_login2 ul li:nth-child(1) { font-size:16px; font-weight:400; color:#fff; line-height:160%; } #case .bna_login2 ul li:nth-child(2) { width: 480px; } #case .bna_login2 ul li:nth-child(2) a { display:inline-block; border-radius:40px; line-height:40px; text-align:center; margin:0 4px; } #case .bna_login2 ul li:nth-child(2) a.homelogin {width:120px; height:35px; margin-top:20px; font-size:14px; font-weight:400; color:#fff; line-height:35px; text-align:center; border:1px solid #fff; border-radius:40px; cursor:pointer; } #case .bna_login2 ul li:nth-child(2) a.homelogin:hover { background:#c5ac76; border:1px solid #c5ac76; } #review { position:relative; width:100%; padding-bottom:110px; background:#e8e7e3; padding-bottom:5%; margin:0 auto; overflow:hidden; box-sizing:border-box; transform:translateY(70px); opacity:0; filter: blur(5px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; padding-top:100px;} #review.active { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #review .title { position:relative; width:90%; margin:0 auto; font-size:38px; color:#505050; font-family: 'MaruBuri'; line-height:100%; } #review .reviewtab { position:relative; width:100%; text-align:center; margin-top:70px; } #review .reviewtab ul li { display:inline-block; margin:0 5px; font-size:16px; font-weight:400; color:#000000; padding-bottom:10px; cursor:pointer; } #review .reviewtab ul li.on { border-bottom:1px solid #43423d; } #review .reviewimgwrap { position:relative; width:90%; margin:0 auto; padding-top:120px; } #review .reviewimgwrap .reviewimg { width:100%; height:396px; } #review .reviewimgwrap .reviewimg div { float:left; position:relative; width:850px; height:380px; text-align:center; box-sizing:border-box;cursor:pointer; } #review .reviewimgwrap .reviewimg div ul li.t1 { width:100%; font-size:15px; font-weight:400; color:#000000; } #review .reviewimgwrap .reviewimg div ul li.t2 { width:100%; font-size:32px; font-family: 'MaruBuri'; color:#000000; margin-top:20px; } #review .reviewimgwrap .reviewimg div ul li.t3 { width:100%; font-size:16px; font-family: 'MaruBuriSemiBold'; color:#373333; margin-top:36px; line-height:170%; } #review .reviewimgwrap .reviewimg div ul li.t4 { width:100%; font-size:15px; font-weight:300; color:#000000; margin-top:40px; } #review .reviewimgwrap .reviewimg div ul li.line { position:absolute; top:20px; right:0px; width:1px; height:300px; background:#d0d0d0; } #review .scrollbar2 { position:relative; width:90%; height:2px; background:#dcdbd6; margin:0 auto; margin-top:70px; z-index:2; } #review .scrollbar2 .handle2 { width:563px; height:2px; background:#c5ac76; } #review .scrollbar2 .handle2 .mousearea2 { position: absolute; top:-5px; left:0; width:100%; height: 10px; cursor:pointer; } #review .viewbt { position:relative; width:90%; margin:0 auto; padding-top:30px; text-align:right; } #review .viewbt img { display:inline-block; } #review .swiper-horizontal>.swiper-scrollbar2, .swiper-scrollbar2.swiper-scrollbar-horizontal { position: absolute !important; left: 0% !important; bottom:0px !important; z-index: 50 !important; height: 4px !important; background:#dcdbd6; width: 100% !important; opacity:1 !important; } #review .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background:#b79e6c !important; border-radius: 10px; left: 0; top: 0; } #review .reviewimgwrap { display:none; } #review .reviewimgwrap.on { display:block; } #last { position:relative; width:100%; height:1300px; min-width:1400px; padding-top:136px; background:#f7f6f2; margin:0 auto; overflow:hidden; box-sizing:border-box; } #last .title { opacity:0; filter: blur(20px); transform:translateY(90px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; position:relative; width:80%; max-width:1920px; margin:0 auto; font-size:38px; color:#505050; font-family: 'MaruBuri'; line-height:100%; } #last .imgs { position:relative; width:80%; max-width:1920px; margin:0 auto; margin-top:54px; transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #last .imgs .lastimg { opacity:0; filter: blur(20px); transform:translateX(90px); position:relative; width:750px; height:900px; background:url('/images/main1/lastimg.jpg')no-repeat 0 0; background-size:750px; } #last .imgs ul li.t1 { opacity:0; filter: blur(20px); transform:translateY(90px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; position:absolute; top:0px; left:900px; font-size:19px; font-family: 'MaruBuri'; color:#000000; line-height:150%; } #last .imgs ul li.t2 { position:absolute; bottom:0px; right:0px; } #last.active .title { opacity:1; filter: blur(0px); transform:translateY(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #last.active .imgs ul li.t1 { opacity:1; filter: blur(0px); transform:translateY(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; } #last.active .imgs .lastimg { opacity:1; filter: blur(0px); transform:translateX(0px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; } #footcs { position:relative; width:100%; height:858px; background:#f7f6f2; margin:0 auto; overflow:hidden; box-sizing:border-box; } #footcs div.txt { float:left; position:relative; width:50%; height:858px; text-align:center; } #footcs div.txt ul { position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); width:342px; text-align:center; opacity:0; filter: blur(5px); transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #footcs.active div.txt ul { top:50%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; } #footcs div.txt ul li.t1 { font-size:15px; color:#000000; font-weight:400; } #footcs div.txt ul li.t2 { margin-top:14px; font-size:29px; font-family: 'MaruBuri'; color:#242323; line-height:100%; } #footcs div.txt ul li.t3 { width:220px; height:40px; margin:0 auto; margin-top:40px; } #footcs div.bg { float:right; width:0%; height:858px; background:url('/images/main1/csimg.jpg')no-repeat 50% 0; background-size:cover; transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #footcs.active div.bg { width:50%; transition:all 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0s; } footer { position:relative; width:100%; height:340px; background:#eeede5; padding-top:86px; padding-left:4%; padding-right:4%; box-sizing:border-box; } footer div.jijum { float:left; position:relative; width:300px; overflow:hidden; } footer div.jijum ul { float:left; width:33.3%; } footer div.jijum ul li { margin-bottom:14px; font-size:15px; font-weight:300; } footer div.jijum ul li a { color:#757575; } footer div.jijum ul li a:hover,footer div.jijum ul li.on a { font-weight:400; color:#000000; } footer div.copy { float:left; position:relative; width:482px; padding-left:60px; overflow:hidden; } footer div.copy ul li.t1 { font-size:22px; font-weight:700; color:#000000; line-height:100%; } footer div.copy ul li.t2 { margin-top:28px; font-size:15px; font-weight:600; color:#363636; } footer div.copy ul li.t3 { margin-top:14px; font-size:15px; font-weight:400; color:#363636; } footer div.copy ul li.t4 { margin-top:14px; font-size:15px; font-weight:400; color:#363636; } footer div.copy ul li.t5 { margin-top:24px; font-size:13px; font-weight:300; color:#757575; } footer div.footmenu { float:right; position:relative; width:140px; overflow:hidden; } footer div.footmenu a { display:block; font-size:14px; font-weight:300; color:#414141; margin-bottom:12px; } footer div.footmenu a:hover { font-weight:400; color:#000000; } .copytab { display:none; } .copytab.on { display:block; } #go_top { position:fixed; bottom:25px; right:25px; cursor:pointer; } .leftquick { position: fixed; bottom:100px; right:18px; z-index:13; } .toggle-menu { display:block; position:relative; width:56px; height:56px; border-radius:100%; background:#b79e6c; overflow: hidden; cursor:pointer; } .toggle-menu.active { background:#b79e6c; } .toggle-menu .quickbt { position:absolute; top:0px; left:0px; width:56px; height:56px; font-size:13px; font-weight:600; color:#ffffff; text-align:center; line-height:56px; opacity:1; transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s; } .toggle-menu.active .quickbt { opacity:0; transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s; } .toggle-menu .leftquickbt { position:absolute; top:22px; left:17px; width:22px; height:10px; transform: rotate(50deg) scale(1); transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s; } .toggle-menu.active .leftquickbt { transform: rotate(0deg) scale(1); transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s; } .toggle-menu span { opacity:0; position: absolute; width:22px; height:2px; backface-visibility: hidden; background-color:#ffffff; transition: top ease .3s,transform ease .3s } .toggle-menu span:nth-child(1) { top:4px; transform: rotate(45deg) scale(1); } .toggle-menu span:nth-child(2) { top:4px; transform: rotate(-45deg) scale(1); } .toggle-menu.active span { opacity:1; } #rq { position:fixed; top:50%; right:-120px; transform:translateY(-50%); } #rq.active { right:18px; } #rq li { margin: 7px 0; width:56px; cursor:pointer; } #rq li img { width:100%; } #katalk { position:fixed; top:0px; left:0px; right:0px; width:100%; height:0%; overflow:hidden; background:rgba(0,0,0,80%); transition:all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; z-index:200; } #katalk.active { height:100%; transition:all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #katalk .katalk { position:absolute; top:70%; right:100px; transform:translateY(-50%); width:500px; opacity:0; filter: blur(20px); transition:all 2.0s cubic-bezier(0.16, 1, 0.3, 1) 0s; } #katalk .katalk ul.txt li.title { position:relative; font-size:44px; color:#ffffff; font-family: 'NanumBarunGothicBold'; letter-spacing:2px; } #katalk .katalk ul.txt li.title span { position:absolute; top:-50px; left:320px; } #katalk .katalk ul.txt li.con { position:relative; margin-top:10px; font-size:16px; color:#ffffff; font-family: 'NanumBarunGothic'; letter-spacing:1px; } #katalk.active .katalk { top:50%; opacity:1; filter: blur(0px); transition:all 2.0s cubic-bezier(0.16, 1, 0.3, 1) 0.6s; } #katalk .katalk ul.list { position:relative; width:300px; margin-top:40px; overflow:hidden; } #katalk .katalk ul.list li { float:left; position:relative; width:100px; font-size:17px; color:#ffffff; margin-bottom:30px; font-family: 'NanumBarunGothic'; letter-spacing:1px; } #katalk .katalk ul.list li a { color:#ffffff; } #katalk .katalk ul.list li a:hover { color:#f4e21c; } #katalk .katalk ul.list li span { padding-left:10px; } #katalk .katalk .allbt { position:relative; width:270px; font-size:17px; color:#ffffff; margin-top:20px; font-family: 'NanumBarunGothic'; letter-spacing:1px;} #katalk .katalk .allbt a { color:#ffffff; } #katalk .katalk .allbt a:hover { color:#f4e21c; } #katalk .katalk .allbt span { display:block; position:absolute; top:0px; right:0px; padding-left:10px; } #katalk .katalkclose { position:absolute; top:0px; left:-70px; cursor:pointer; } .quickcs { position:fixed; top:50%; right:-390px; opacity:0; filter: blur(20px); transform: translateY(-50%); width:387px; height:589px; background:#ffffff; z-index:63; box-shadow: 1px 1px 22px rgba(0,0,0,0.3); border-radius: 22px; transition:all 0.3s cubic-bezier(0.85, 0, 0.15, 1) 0s; } .quickcs.active { right:100px; opacity:1; filter: blur(0px); transition:all 0.3s cubic-bezier(0.85, 0, 0.15, 1) 0s; } .quickcs .close { position:absolute; top:-22px; right:-20px; cursor:pointer; } .quickcs .close img { display:block; width:70px; } .quickcs .quicktitle { position:relative; width:100%; height:130px; box-sizing:border-box; text-align:center; overflow:hidden; } .quickcs .quicktitle ul li.title { padding-top:40px; font-size:35px; font-weight:700; color:#000000; line-height:100%; } .quickcs .quicktitle ul li.con { padding-top:12px; font-size:17px; font-weight:500; color:#7c7c7c; line-height:100%; } .quickcs .quickcontent { position:relative; width:100%; margin:0 auto; box-sizing:border-box; } .quickcs .quickcontent ul { position:relative; width:313px; margin:0 auto; box-sizing:border-box; } .quickcs .quickcontent ul li label { } .quickcs .quickcontent ul li.name label { display:none; } .quickcs .quickcontent ul li.name input { display:block; width:100%; height:57px; background:#edecee; border:0px; border-radius:12px; margin-bottom:6px; font-size:15px; font-weight:400; color:#2a2a2a; padding:16px; } .quickcs .quickcontent ul li.phone label { display:none; } .quickcs .quickcontent ul li.phone input { display:block; width:100%; height:57px; background:#edecee; border:0px; border-radius:12px; margin-bottom:6px; padding:16px; font-size:15px; font-weight:400; color:#2a2a2a; } .quickcs .quickcontent ul li.subject1 label { display:none;} .quickcs .quickcontent ul li.subject1 select { display:block; width:100%; height:57px; background:#edecee; border:0px; border-radius:12px; margin-bottom:6px; font-size:15px; font-weight:400; color:#2a2a2a; padding:16px; } .quickcs .quickcontent ul li.contents textarea { display:block; width:100%; height:91px; background:#edecee; border:0px; border-radius:12px; padding:16px; margin-bottom:6px; font-size:13px; font-weight:400; color:#8b8686; } .quickcs .quickcontent ul li.prviebt { width:100%; text-align:right; } .quickcs .quickcontent ul li.prviebt label { font-size:11px; font-weight:400; color:#4e4d4d; } .quickcs .quickcontent ul li.prviebt a { font-size:11px; font-weight:400; color:#4e4d4d; } .quickcs .quickcontent ul li.inputdiv { display:block; width:100%; height:57px; background:#edecee; border:0px; border-radius:12px; padding:0 20px; margin-bottom:6px; font-size:15px; font-weight:400; color:#2a2a2a; box-sizing:border-box; overflow:hidden; } .quickcs .quickcontent ul li.inputdiv label { padding-right:10px; } .quickcs .quickcontent ul li.inputdiv div:nth-child(1) { float:left; width:82px; line-height:57px; font-size:15px; font-weight:400; color:#2a2a2a; } .quickcs .quickcontent ul li.inputdiv div:nth-child(2) { float:left; width:172px; line-height:57px; font-size:13px; font-weight:400; color:#2a2a2a; } .quickcs .quickcontent input::placeholder { color:#2a2a2a; } .quickcs .quickcontent textarea::placeholder { color:#8b8686; } .quickcs .submitbt input { display:block; position:absolute; bottom:-1px; left:0px; width:100%; height:72px; border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; margin-top:20px; background:#292929; border:0px; font-size:22px; font-weight:700; color:#ffffff; cursor:pointer; } .quickcs input[type="checkbox"] { display:none; } .quickcs input[type="checkbox"] + label span { display:inline-block; width:13px; height:13px; vertical-align:middle; border:none; cursor:pointer; background:url('/images/ck_off.jpg')no-repeat 0 0; margin-right:6px; } .quickcs input[type="checkbox"]:checked + label span { background:url('/images/ck_on.jpg')no-repeat 0px 0; } .quickcs input[type="radio"] { display:none; } .quickcs input[type="radio"] + label span { display:inline-block; width:17px; height:17px; vertical-align:middle; border:none; cursor:pointer; background:url('/images/radiobt.png')no-repeat 0 0; } .quickcs input[type="radio"]:checked + label span { background:url('/images/radiobt_on.png')no-repeat 0px 0; }