/*폰트*/ @import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); @font-face { font-family: 'Arita-buri-SemiBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Arita-buri-SemiBold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');} /* noto-serif-kr-400 - latin_korean */ @font-face { font-family: 'Noto Serif KR'; font-style: normal; font-weight: 400; src: url('/css/fonts/noto-serif-kr-v6-latin_korean-regular.eot'); /* IE9 Compat Modes */ src: local('Noto Serif KR'), local('NotoSerifKR-Regular'), url('/css/fonts/noto-serif-kr-v6-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/css/fonts/noto-serif-kr-v6-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/css/fonts/noto-serif-kr-v6-latin_korean-regular.woff') format('woff'), /* Modern Browsers */ url('/css/fonts/noto-serif-kr-v6-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/css/fonts/noto-serif-kr-v6-latin_korean-regular.svg#NotoSerifKR') format('svg'); /* Legacy iOS */ } /* noto-serif-kr-500 - latin_korean */ @font-face { font-family: 'Noto Serif KR'; font-style: normal; font-weight: 500; src: url('/css/fonts/noto-serif-kr-v6-latin_korean-500.eot'); /* IE9 Compat Modes */ src: local('Noto Serif KR Medium'), local('NotoSerifKR-Medium'), url('/css/fonts/noto-serif-kr-v6-latin_korean-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/css/fonts/noto-serif-kr-v6-latin_korean-500.woff2') format('woff2'), /* Super Modern Browsers */ url('/css/fonts/noto-serif-kr-v6-latin_korean-500.woff') format('woff'), /* Modern Browsers */ url('/css/fonts/noto-serif-kr-v6-latin_korean-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('/css/fonts/noto-serif-kr-v6-latin_korean-500.svg#NotoSerifKR') format('svg'); /* Legacy iOS */ } /*초기화*/ *{margin: 0;padding: 0;} html, body{height:100%;width:100%;margin:0;padding:0;font-family: "Noto Sans KR", sans-serif !important ;letter-spacing:-1px} h1,p,ul{margin:0;padding:0} li{list-style:none} a{color:#141414;text-decoration:none !important} .left{float:left !important} .right{float:right !important} .clear{clear:both} p{margin:0;padding:0;word-break:break-all} b{font-weight:bold} br{font-family:"Noto Sans KR", sans-serif !important} .img-responsive{max-width:100%;display:block;height:auto} .over-h{overflow:hidden;} .padding-0{padding:0 !important} .margin-0{margin:0 !important} .m-auto{margin:auto} .w-100{width:100%} .p-100{padding:100px 0;} .pt-20{padding-top:20px;} .pb-20{padding-bottom:20px;} .mb-20{margin-bottom:20px;} .eng{ font-family: 'Titillium Web', sans-serif !important;letter-spacing:0 !important;} .buri{font-family: 'Arita-buri-SemiBold';} .serif{font-family: 'Noto Serif KR', sans-serif !important} .text-c{text-align:center;} .text-l{text-align:left;} .visible-lg{display:block !important} .visible-xs{display:none !important} .visible-sm{display:none !important} .zip{position:fixed;top:0;z-index:99999;width:100%;border-bottom:1px solid #e5e5e5;} #mb_login legend{display:none;} /*main 공통*/ .section{height: 100%;width: 100%;position: relative;} .section .tit{font-size:48px;font-weight:200;padding-bottom:50px;letter-spacing:-2px;color:#141414} .section .tit b{font-weight:500} #section01{background:#ffffff} #section02{background:url('/img/main/bg01.jpg')no-repeat;background-size:cover} #section03{background:#eeeeee} #section04{background:#ece9e9} #section05{background:#f7f1e9} #section06{background:url('/img/main/bg02.jpg')no-repeat;background-size:cover} #section07{background:#ffffff} #section08{background:#fafafa} #section09{background:#ffffff} #section10{background:url('/img/main/bg03.jpg')no-repeat;background-size:cover} #section11{background:#797a7c} #section01 .container{margin:inherit;} #section01 .swiper-slide{background-size:cover;background-repeat:no-repeat;background-position:50% 50%} #section01 .swiper-slide01{background-image:url('/img/main/slide09.png');} #section01 .swiper-slide01 .slogan01{float:left;width:55%} #section01 .swiper-slide01 .slogan01 .txt01{padding:30px 0;overflow:hidden;} #section01 .swiper-slide01 .slogan01 .txt01 h1{color:#FFF;font-size:55px;font-weight:300;float:left;} #section01 .swiper-slide01 .slogan01 .txt01 h1 span{font-size:65px;font-weight:500;text-shadow:0 5px 10px rgba(0,0,0,0.3)} #section01 .swiper-slide01 .slogan01 .txt03{color:#FFF;font-size:20px;font-weight:300} #section01 .swiper-slide01 .slogan01 .txt04{color:#FFF;font-size:24px;background:#6f5230;padding:5px 8px;display:inline;} #section01 .swiper-slide01 .slogan01 .mark{ margin-top:30px;} #section01 .swiper-slide01 .slogan02 {width:60%;position:absolute;right:0;bottom:0} #section01 .swiper-slide02{background:#292927} #section01 .swiper-slide02 h1{color:#c7a991} #section01 .swiper-slide02 h2, #section01 .swiper-slide02 p{color:#fff} #section01 .swiper-slide02 .img{float:left;width:50%;margin-top:10%} #section01 .swiper-slide02 .slogan{float:right;width:50%;} #section01 .swiper-slide02 .slogan h2{font-size:48px;font-weight:300;letter-spacing:-3px;margin:0;padding:150px 0 0 0;} #section01 .swiper-slide02 .slogan h1{font-size:84px;font-weight:600;letter-spacing:-7px;padding:30px 0} #section01 .swiper-slide02 .slogan p{font-size:18px;} #section01 .swiper-slide02 .slogan img{margin-top:60px} #section01 .swiper-slide03{background-image:url('/img/main/slide03.png');color:#FFF;text-align:Center} #section01 .swiper-slide03 h2{font-size:60px;font-weight:200;margin-top:140px} #section01 .swiper-slide03 h2 img{vertical-align:text-bottom;} #section01 .swiper-slide03 p{padding:40px 0;letter-spacing:20px;font-weight:200;font-size:18px;} #section01 .swiper-slide03 b{font-weight:500} #section01 .swiper-slide04{background-image:url('/img/main/slide04.png');} #section01 .swiper-slide04 .slogan01{position:absolute;top:200px} #section01 .swiper-slide04 .slogan02{position:absolute;bottom:18%;right:20%;text-align:right} #section01 .swiper-slide04 .slogan02 h1{color:#262e50;font-weight:300} #section01 .swiper-slide04 .slogan02 h1 b{font-weight:500} #section01 .swiper-slide04 .slogan02 p{background:rgba(0,0,0,0.3);color:#FFF;padding:5px 10px;display:inline-block;font-size:18px;font-weight:200} #section01 .swiper-slide04 .laser{position:absolute;bottom:0;left:50%;margin-left:-652px;} #section01 .swiper-slide05{background-image:url('/img/main/slide05.png');color:#FFF;text-align:center} #section01 .swiper-slide05 h2{margin-top:200px} #section01 .swiper-slide05 p{padding:40px 0 0 0;font-size:18px;} #section01 .swiper-slide06{background-image:url('/img/main/slide06.png');color:#FFF;} #section01 .swiper-slide06 .img{float:left;width:50%;margin-top:100px} #section01 .swiper-slide06 .slogan{float:right;width:45%;margin-top:200px} #section01 .swiper-slide06 .slogan h2{font-weight:700;font-size:80px;padding:20px 0} #section01 .swiper-slide06 .slogan p{font-size:18px;font-weight:300} #section01 .swiper-slide06 .slogan span{background:#793109;font-size:25px;padding:0 5px;font-weight:400} #section01 .swiper-slide07{background-image:url('/img/main/slide07.png');} #section01 .swiper-slide07 .slogan{background:url('/img/main/slide07_01.png') no-repeat center center;height:695px;position:relative} #section01 .swiper-slide07 .slogan_txt{position:Absolute;text-align:center;left:31%;top:20%;} #section01 .swiper-slide07 .slogan_txt h1{letter-spacing:-3px;font-weight:300;font-size:70px;padding:20px 0 50px 0} #section01 .swiper-slide07 .slogan_txt h1 b{font-weight:700} #section01 .swiper-slide07 .slogan_txt p{background:url('/img/main/slide07_05.png')no-repeat center bottom;line-height:3;font-size:25px;margin-bottom:50px;font-weight:200;} #section01 .swiper-slide08{background-image:url('/img/main/slide08.png');color:#FFF;text-align:center} #section01 .swiper-slide08 h2{margin-top:-120px} #section01 .swiper-slide08 .slogan01 {background:url('/img/main/slide08_02.png') no-repeat center center;height:192px} #section01 .swiper-slide08 .slogan01 p{font-size:45px;text-shadow:0 10px 20px rgba(0, 0, 0, 0.9)} #section01 .swiper-slide08 .slogan02 {background:url('/img/main/slide08_03.png') no-repeat center center;height:294px;padding:40px 0} #section01 .swiper-slide08 .slogan02 li{float:left;width:25%;margin:2% 0} #section01 .swiper-slide10{background-image:url('/img/main/slide10.png');color:#FFF;text-align:center} #section01 .swiper-slide10 .tit{position: absolute; top: 13%; left: 50%; transform: translateX(-50%); z-index: 10; width: 100%;} #section01 .swiper-slide10 .tit h2{font-size: 50px; font-weight: normal;} #section01 .swiper-slide10 .tit h2 b{font-weight: bold; font-size: 80px;} #section01 .swiper-slide10 .tit p{position: relative; color: #fff; font-size: 40px; background-image:url('/img/main/s10_box.png'); background-position: center; margin: 20px auto 0 auto;background-repeat: no-repeat;} #section01 .swiper-slide10 .m10_gif{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 9;} #section01 .swiper-slide10 .s10_01{position: absolute; top: 40%; left: 0; } #section01 .swiper-slide10 .s10_02{position: absolute; top: 50%; right: 0; } #section01 .swiper-slide10 .s10_03{position: absolute; top: 80%; left: 0; } #section01 .swiper-slide10 .s10_04{position: absolute; top: 90%; right: 0; } #section01 .txt{max-width: 1450px;margin: inherit; position: relative; height: 50vh;} #section01 .swiper-pagination-fraction, #section01 .swiper-pagination-custom, #section01 .swiper-container-horizontal > #section01 .swiper-pagination-bullets{bottom:10%;width:40%;color:#fff;font-size:19px;font-family: 'Titillium Web'} #section01 .swiper-pagination-current{font-weight:bold} #section01 .swiper-button-prev, #section01 .swiper-container-rtl .swiper-button-next{left:15%;background:url('/img/main/btn_prev04.png')no-repeat} #section01 .swiper-button-next, #section01 .swiper-container-rtl .swiper-button-prev{left:17%;background:url('/img/main/btn_next04.png')no-repeat} #section01 .swiper-button-prev, #section01 .swiper-button-next{width:20px;height:10px;bottom:10.5%;} /*section02*/ #section02 figure.system {position: relative;float:left;width:31%;margin-right:3.5%;color:#fff;overflow:hidden;background:#000;} #section02 figure.system * {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;} #section02 figure.system img {width: 100%;vertical-align: top;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;} #section02 figure.system figcaption {position: absolute;bottom:0px;left: 0;width:100%;height:100%;} #section02 figure.system figcaption > div {height: 50%;overflow: hidden;width: 100%;position: relative;} #section02 figure.system h2,figure.system h3 {margin: 0;position: absolute;left: 0;padding: 0 30px;text-transform: uppercase;} #section02 figure.system h2 {font-size: 40px;top: 0;font-weight:300;} #section02 figure.system h3 {font-size: 20px;bottom: 0;font-weight: 300;} #section02 figure.system h3:nth-of-type(2) {opacity: 0;-webkit-transform: translateY(150%);transform: translateY(150%);} #section02 figure.system a {left: 0;right: 0;top: 0;bottom: 0;position: absolute;} #section02 figure.system:hover img,figure.system.hover img {opacity: 0.5;-webkit-filter: grayscale(100%);filter: grayscale(100%);} #section02 figure.system:hover figcaption h3:first-of-type,figure.system.hover figcaption h3:first-of-type {-webkit-transform: translateY(150%);transform: translateY(150%);opacity: 0;} #section02 figure.system:hover figcaption h3:nth-of-type(2),figure.system.hover figcaption h3:nth-of-type(2){opacity: 1;-webkit-transform: translateY(0%);transform: translateY(0%);} /*section03*/ #section03 .section03_wrap{max-width:1920px;} #section03 h4{font-size:26px;padding:0 0 10px 0} #section03 li{float:left;width:50%;position:relative;} #section03 .txt{position:absolute;bottom:40px;left:40px} #section03 .txt p{opacity:0} #section03 li:hover {filter:grayscale(1);transition:all .5s ease;} #section03 li:hover p{opacity:1;transition:all .5s ease} #section03 .swiper-button-prev, #section03 .swiper-container-rtl .swiper-button-next{right:7%;} #section03 .swiper-button-next, #section03 .swiper-container-rtl .swiper-button-prev{right:0%;} #section03 .swiper-button-prev, #section03 .swiper-button-next{width:68px;height:68px;bottom:0} /*section04*/ /*#section04 .laser_menu{overflow:hidden;} #section04 .laser_menu ul li{float:left;width:33.333%;font-size:18px;text-align:Center;} #section04 .laser_menu ul li a{display:block;color:#a6a6a6;background:#FFF;padding:10px 0;border-bottom:1px solid #902b29;border-top:1px solid #e5e5e5;border-right:1px solid #e5e5e5} #section04 .laser_menu ul li:nth-child(1){border-left:1px solid #e5e5e5} #section04 .laser_menu ul li a.on{background:#412524;color:#FFF;border:1px solid #412524;}*/ #section04 .laser_wrap {overflow:hidden;text-align:center;} #section04 .laser_wrap div{float:left;width:50%;} #section04 .swiper-container06{padding:0 0 30px 0} #section04 .swiper-button-prev, #section04 .swiper-container-rtl .swiper-button-next{left:0%;} #section04 .swiper-button-next, #section04 .swiper-container-rtl .swiper-button-prev{right:0%;} #section04 .swiper-button-prev, #section04 .swiper-button-next{width:68px;height:68px;top:50%;margin-top:-34px;} #section04 h2{padding:30px 0 10px 0;font-size:25px;} #section04 .view{border:1px solid #000;border-radius:100px;margin:20px auto 0;width:100px;display:block;text-align:center;padding:10px 0;background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);background-position: 0 0;background-size: 200% auto;transition: .3s;} #section04 .view:hover{background-position: -100% 0;color:#FFF;width:130px} /*section05*/ #section05 .section05_wrap{max-width:1920px;margin:auto} #section05 h2{margin:20px auto;text-align:center;font-size:26px;box-shadow: inset 0 -14px 0 rgba(239, 227, 211, 1);max-width:355px;} #section05 p{text-align:center;} #section05 .swiper-container04{padding:0 0 50px 0} #section05 .swiper-container04 .swiper-pagination-bullet{width:15px;height:15px;} #section05 .swiper-container04 .swiper-pagination-bullet-active{background:#412524;width:35px;} /*section06*/ #section06 .case li{float:left;width:20%;background:rgba(255,255,255,0.7);text-align:center;color:#412524;border-right:1px solid #464544;border-bottom:1px solid #464544;} #section06 .case li:nth-child(5n-0){border-right:none} #section06 .case li a{display:block;padding:45px;transform:translateY(20px)} #section06 .case li h3{padding:20px 0 10px 0;font-size:19px;} #section06 .case li p{color:#f5b153;opacity:0;transform: translateY(100%);} #section06 .case li img{margin:auto;} #section06 .case .on{display:none;} #section06 .case li:hover{background:#412524;color:#fff;transition:all .5s ease;} #section06 .case li:hover a{color:#fff;transform:translateY(0);transition:all .5s ease} #section06 .case li:hover p{opacity:1;transform: translateY(0%);transition:all .5s ease} #section06 .case li:hover img{display:none;transition:all .5s ease;} #section06 .case li:hover .on{display:block;transition:all .5s ease;} /*section07*/ #section07 .swiper-container05{padding:0 0 30px 0} #section07 .swiper-container05 .swiper-button-prev, #section07 .swiper-container05 .swiper-button-next{width:20px;height:10px;top:98%;}/*이벤트 3개 이상되면 display:none 지우고 활성화*/ #section07 .swiper-container05 .swiper-pagination-progressbar{width:90%;} #section07 .swiper-container05 .swiper-button-prev{background:url('/img/main/btn_prev02.png');right:80px;} #section07 .swiper-container05 .swiper-button-next{background:url('/img/main/btn_next02.png');right:10px;} #section07 .event p{font-weight:500;font-size:21px;text-align:center;} #section07 .event img{border:1px solid #e5e5e5} #section07 .event .view{border:1px solid #000;border-radius:100px;margin:20px auto 0;width:100px;display:block;text-align:center;padding:10px 0;background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);background-position: 0 0;background-size: 200% auto;transition: .3s;} #section07 .event .view:hover{background-position: -100% 0;color:#FFF;width:130px} /*section08*/ #section08 .community{margin-bottom:50px;overflow:hidden;} #section08 .community ul li{cursor:pointer;float:left;width:33.333%;font-size:18px;text-align:Center;color:#a6a6a6;background:#FFF;padding:10px 0;border-bottom:1px solid #902b29;border-top:1px solid #e5e5e5;border-right:1px solid #e5e5e5} #section08 .community ul li:nth-child(1){border-left:1px solid #e5e5e5} #section08 .community ul li.current{background:#902b29;color:#FFF;border:1px solid #902b29 !important;} #section08 .tab-content{display: none;} #section08 .tab-content.current{display: inherit;} #section08 .online ul{overflow:hidden;padding:0 0 0 30px;margin:0 0 0.7% 0;background:#FFF;border:1px solid #e5e5e5;} #section08 .online ul:nth-child(5){margin:0 0 30px 0;} #section08 .online li {float:left;font-size:17px;padding:20px 0;} #section08 .online .num{width:10%;} #section08 .online .wr_content{width:60%} #section08 .online .name{width:10%} #section08 .online .date{width:10%} #section08 .online .qa{padding:20px;text-align:center;width:10%;background:#e5e5e5;float:right} #section08 .online .qa.on{background:#902b29;color:#FFF} #section08 .board ul{float:left;width:31%;margin:0 3.5% 3.5% 0;background:#FFF;padding:20px 30px;border:1px solid #e5e5e5;min-height:160px;} #section08 .board ul:nth-child(3){margin:0 0 3.5% 0;} #section08 .board ul:nth-child(4){margin:0 3.5% 0 0;} #section08 .board ul:nth-child(5){margin:0 3.5% 0 0;} #section08 .board ul:nth-child(6){margin:0 0 30px 0;} #section08 .board .date{color:#902b29;} #section08 .board h4{padding:10px 0;font-size:20px} #section08 .board p{color:#141414;font-size:17px;} #section08 .view{border:1px solid #000;border-radius:100px;margin:auto;width:100px;display:block;text-align:center;padding:10px 0;background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);background-position: 0 0;background-size: 200% auto;transition: .3s;} #section08 .view:hover{background-position: -100% 0;color:#FFF;width:130px} /*section09*/ #section09 .insta ul{overflow:hidden} #section09 .insta ul li{float:left;width:20%;} /*section10*/ #section10 .sub_map{width:100% !important;padding:0;border:none} #section10 .map_info{text-align:Center;color:#fff;background:#902b29;/*background-image: linear-gradient(to right, #b2673f , #5b1b12)*/;position:absolute;right:0;z-index:9999;font-family: "Noto Sans KR", sans-serif;padding:80px 30px 0 30px;width:35%;height:100%;opacity:0.95} #section10 .map_info .add{padding-bottom:20px} #section10 .map_info .txt01{font-size:17px;font-weight:300} #section10 .map_info .txt01 span{font-family: 'Titillium Web', sans-serif;} #section10 .map_info .txt02{font-size:50px;font-weight:600;} #section10 .map_info .txt02 a{color:#FFF;} #section10 .map_info .txt03{font-size:20px;font-weight:500;padding:0 0 10px 0;letter-spacing:-1px;} #section10 .root_daum_roughmap .wrap_controllers{display:none} /*footer*/ #section11 .f_info{overflow:hidden;padding-bottom:35px;} #section11 .f_info li{float:left;margin-right:20px} #section11 .f_info li a{color:#FFF;} #section11 p{color:#b3b3b4;font-size:15px;} #section11 p a{color:#b3b3b4;} footer{clear:both;overflow:hidden;background:#797a7c;padding:50px 0;} footer .f_logo{height:60px} footer .f_info{overflow:hidden;padding-bottom:35px;} footer .f_info li{float:left;margin-right:20px} footer .f_info li a{color:#FFF;} footer p{color:#b3b3b4;font-size:15px;} footer p a{color:#b3b3b4;} .items-wrapper .pop {display:none;padding:50px;background:url('/img/sub/intro/laser_bg.jpg');position:fixed; top:500px; left:50%; margin-left:-450px; right:0; transform:translateY(-50%); z-index:11; width:900px; } .items-wrapper .pop .pop_txt{text-align:left;} .items-wrapper .pop .pop_txt h1 {color:#902b29;padding:0 0 10px 0;font-weight:500} .items-wrapper .pop .pop_txt .txt03 {padding:0 0 10px 0} .items-wrapper .dimmed_bg {display:none; position:fixed; top:0; left:0; right:0; z-index:4; width:100%; height:100%;} .items-wrapper .dimmed_bg.on {display:block; background:rgba(0,0,0,0.8);} .items-wrapper .pop .btn_close {position:absolute; top:20px; left:810px; width:70px; height:70px; background:url('/img/sub/intro/btn_close.png') no-repeat center;} .quick {z-index:9999;position:fixed;right:25px;bottom:200px;width:120px} .quick ul{display:none;text-align:center} .quick ul li {margin-bottom:5px} .quick ul li img{float:left;margin-right:5px;} .quick ul li a{display:block;background:#fff;border-radius:100px;padding:12px;width:50px;height:50px;margin:auto;font-size:14px;border:1px solid #f6f6f6} .quick ul li a span{display:none;} .quick ul li a:hover{width:120px;} .quick ul li a:hover span{display:block} .quick .q_menu{cursor:pointer;width:100%;} .quick .q_menu img{margin:auto} .quick .up{display:none} .quick .bottom{display:none} .btn_top {box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26); position:fixed;cursor:pointer;right:2em;bottom:4em;z-index:9999;border-radius:100px} .btn_top img{width:55px} .quick02 {cursor:pointer;box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26); position:fixed;cursor:pointer;right:2em;bottom:8em;z-index:9999;border-radius:100px} .quick02 img{width:55px} .circular-menu { position: fixed; bottom: 7.7em; right: 2em; z-index:99999; } .circular-menu .floating-btn img{width:55px} .circular-menu .menu-item img{width:55px} .circular-menu .floating-btn { display: block; width: 55px; height: 55px; border-radius: 50%; /* background:#902b29; background-color: hsl(4, 98%, 60%);*/ box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26); color: hsl(0, 0%, 100%); text-align: center; /*line-height: 3.9;*/ cursor: pointer; outline: 0; } .circular-menu.active .floating-btn { box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3); } .circular-menu .floating-btn:active { box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .4); } .circular-menu .floating-btn i { font-size: 1.3em; transition: transform .2s; color:#FFF } .circular-menu.active:after { transform: scale3d(5.5, 5.5, 1); transition-timing-function: cubic-bezier(.68, 1.55, .265, 1); } .circular-menu .items-wrapper { padding: 0; margin: 0; } .circular-menu .menu-item { display: block; text-decoration: none; color: hsl(0, 0%, 100%); width: 55px; height: 55px; border-radius: 50%; background-color: hsla(0,0%,0%,.15); transition: transform .3s ease, background .2s ease; margin-bottom: 0.5em; box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26); } .circular-menu .menu-item:hover { background-color: hsla(0,0%,0%,.3); opacity:1; transition:all .5s ease; } .circular-menu.active .menu-item { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } /** * The other theme for this menu */ @media (max-width: 1400px){ .visible-sm{display:block !important} .visible-lg{display:none !important} .hidden-sm{display:none !important} .p-100{padding:50px 0} .cd-logo img{width:90px !important} #section01 .swiper-slide01 .box{margin:0} #section01 .swiper-slide01 .slogan01{width:100%;float:none;text-align:Center;position:absolute;top:15%;left:0} #section01 .swiper-slide01 .slogan01 .txt01 h1{float:none} #section01 .swiper-slide01 .slogan02{width:100%;float:none} #section01 .swiper-slide01 .slogan02 img{display:block} #section01 .swiper-slide02 .img{float:none;width:100%;margin:0} #section01 .swiper-slide02 .img img{margin:auto} #section01 .swiper-slide02 .slogan{float:;width:100%;text-align:center} #section01 .swiper-slide02 .slogan h2{font-size:30px;padding:20px 0 0 0} #section01 .swiper-slide02 .slogan h1{font-size:60px;padding:10px 0;letter-spacing:-2px;} #section01 .swiper-slide03 h2{margin-top:0} #section01 .swiper-slide04 h2{text-align:Center;} #section01 .swiper-slide04 .laser{position:inherit;margin:auto;} #section01 .swiper-slide04 .slogan01{left:50%;margin-left:-217.5px;top:15%;} #section01 .swiper-slide04 .slogan02{display:none;} #section01 .swiper-slide05 h2{margin-top:0} #section01 .swiper-slide06 .img{float:none;width:100%;margin:0} #section01 .swiper-slide06 .img img{margin:auto;} #section01 .swiper-slide06 .slogan{float:none;margin-top:20px;width:100%;text-align:center} #section01 .swiper-slide07 .slogan{background:#fff;width:80%;margin:auto} #section01 .swiper-slide07 .slogan_txt{left:50%;margin-left:-262px;top:12%} #section01 .swiper-slide08 h2{margin-top:0;position:absolute;top:0;left:0;right:0} #section01 .swiper-slide08 .slogan01{margin:50px 0;height:auto} #section01 .swiper-slide08 .slogan02{width:80%;margin:auto;background:#f7f1df;padding:30px;height:340px} #section01 .swiper-slide08 .slogan02 li{width:50%;} #section01 .swiper-button-prev, #section01 .swiper-container-rtl .swiper-button-next{left:40%;} #section01 .swiper-button-next, #section01 .swiper-container-rtl .swiper-button-prev{left:57%;} #section01 .swiper-pagination-fraction{width:100%;} #section01 .swiper-slide10 .tit h2{font-size: 30px;} #section01 .swiper-slide10 .tit h2 b{font-size: 60px;} #section01 .swiper-slide10 .tit p{font-size: 30px; width: 80%; background-size: 100%;} #section01 .swiper-slide10 .m10_gif{max-width: 65%; bottom: 0;} #section02 figure.system{width:100%;margin-right:0} #section04 .laser_wrap div{width:100%;padding:0 50px} #section04 .laser_wrap .video{display:none} #section07 .swiper-container05 .swiper-pagination-progressbar{width:80%;} #section08 .online .wr_content{width:50%} #section08 .online .qa{width:15%;} #section08 .board ul{width:100%;margin:0 0 0.7% 0;min-height:auto;} #section08 .board ul:nth-child(3){margin:0 0 30px 0} #section08 .board ul:nth-child(4){display:none} #section08 .board ul:nth-child(5){display:none} #section08 .board ul:nth-child(6){display:none} #section09 .insta ul li{float:left;width:33.333%;} #section09 .insta ul li:nth-child(7){display:none} #section09 .insta ul li:nth-child(8){display:none} #section09 .insta ul li:nth-child(9){display:none} #section09 .insta ul li:nth-child(10){display:none} #section10 .wrap_map {height:650px !important} #section10 .map_info{padding:10px;width:100%;bottom:0;height:50%} #section10 .map_info .txt01{font-size:18px;} #section10 .map_info .txt02{font-size:22px;} } @media (max-width:1366px) and (min-width:1024px){ #section06 .case li{width:50%;} #section06 .case li a{padding:15px 45px;} #section06 .case li:nth-child(5n-0){border-right:1px solid #464544} #section07 .swiper-container05 .swiper-button-prev, #section07 .swiper-container05 .swiper-button-next {display:block} } @media (max-width:1023px) and (min-width:768px){ #section01 .swiper-slide01 .slogan h1{font-size:50px} #section01 .swiper-slide01 .slogan h2{font-size:40px;} #section01 .swiper-slide01 .slogan01 .txt01 h1{font-size:45px} #section01 .swiper-slide01 .slogan01 .txt01 h1 span{font-size:55px;} #section01 .swiper-slide01 .slogan01 .mark {margin:0} #section01 .swiper-slide01 .slogan02 img {height:500px} #section01 .swiper-slide03 h2{font-size:50px;} #section01 .swiper-slide03 p{letter-spacing:10px} #section01 .swiper-slide04 .slogan02 h1{font-size:20px} #section01 .swiper-slide05 .pad{height:400px} #section01 .swiper-slide06 .img img{height:400px} #section01 .swiper-slide06 .slogan h2{font-size:60px} #section01 .swiper-slide07 .slogan{height:700px} #section01 .swiper-slide07 .slogan_txt{top:15%;margin-left:-184px;} #section01 .swiper-slide07 .slogan_txt h1{font-size:50px;} #section01 .swiper-slide08 .slogan01{margin:100px 0 50px 0} #section01 .swiper-slide08 .slogan01 p{font-size:40px;} #section01 .swiper-slide08 .slogan02{height:240px} #section01 .swiper-slide08 .slogan02 li{width:50%;margin:0 0 2% 0} #section01 .swiper-slide08 .slogan02 li img{height:40px} #section06 .case li{width:25%;} #section06 .case li img{height:60px;} #section06 .case li a{padding:10px;} #section06 .case li:nth-child(5n-0){border-right:1px solid #464544} #section06 .case li:nth-child(9){width:50%;} #section06 .case li:nth-child(10){width:50%;} #section07 .swiper-container05 .swiper-button-prev, #section07 .swiper-container05 .swiper-button-next {display:block} #section08 .online .wr_content{width:45%;} #section08 .online .date{width:15%;text-align:center} } @media (max-width: 767px){ .visible-xs{display:block !important} .hidden-xs{display:none !important} header .logo{height:40px;width:auto !important} .section .tit{font-size:22px;padding-bottom:30px;font-weight:300} #section01 .swiper-slide01 .slogan01 .txt01{width:100%;padding:20px 0} #section01 .swiper-slide01 .slogan01 .txt01 h1{font-size:25px;float:none} #section01 .swiper-slide01 .slogan01 .txt01 h1 span{font-size:30px;} #section01 .swiper-slide01 .slogan01 .qa{height:40px} #section01 .swiper-slide01 .slogan01 .mark {height:100px;margin:0} #section01 .swiper-slide01 .slogan02 img {height:300px} #section01 .swiper-slide02 .img img {height:250px} #section01 .swiper-slide02 .slogan h2{font-size:25px;letter-spacing:-2px;} #section01 .swiper-slide02 .slogan h1{font-size:35px;padding:5px 0;letter-spacing:-2px;} #section01 .swiper-slide02 .slogan p{font-size:16px;font-weight:300} #section01 .swiper-slide03 h2{font-size:25px;} #section01 .swiper-slide03 p{letter-spacing:10px} #section01 .swiper-slide03 h2 img{height:60px;} #section01 .swiper-slide04 h2 img{height:60px;margin:auto;display:block} #section01 .swiper-slide04 .txt{height:45px} #section01 .swiper-slide04 .laser {height:250px;margin:100px auto 0} #section01 .swiper-slide04 .slogan01{margin:0;left:0;right:0;top:15%;} #section01 .swiper-slide04 .slogan02 {right:50%;margin-right:-100px;text-align:center} #section01 .swiper-slide04 .slogan02 h1{font-size:20px;} #section01 .swiper-slide05 h2 img{height:100px} #section01 .swiper-slide05 p{font-size:16px;padding:20px 0 0 0;font-weight:300} #section01 .swiper-slide05 .pad{height:200px} #section01 .swiper-slide06 .img img{height:250px} #section01 .swiper-slide06 .slogan h2{font-size:25px;padding:10px 0} #section01 .swiper-slide06 .slogan p{font-size:16px;padding:0 !important;font-weight:300} #section01 .swiper-slide06 .slogan span {font-size:16px} #section01 .swiper-slide06 .slogan img{height:80px} #section01 .swiper-slide07 .slogan{height:350px;width:90%;margin:auto} #section01 .swiper-slide07 .slogan_txt{margin-left:-120px;top:15%;} #section01 .swiper-slide07 .slogan_txt h1{font-size:25px;padding:20px 0;letter-spacing:-2px} #section01 .swiper-slide07 .slogan_txt p{background:none;font-size:16px;margin-bottom:20px;line-height:1.2} #section01 .swiper-slide07 .slogan_txt .img01{height:90px;} #section01 .swiper-slide07 .slogan_txt .img02{height:30px} #section01 .swiper-slide08 h2{position:inherit;} #section01 .swiper-slide08 .slogan01 {background:none;padding:30px 0;margin:0;} #section01 .swiper-slide08 .slogan01 p{font-size:20px} #section01 .swiper-slide08 .slogan02 {background:#f7f1df;padding:20px;width:90%;height:auto;overflow:hidden;} #section01 .swiper-slide08 .slogan02 li{width:49%;margin:0 2% 4% 0} #section01 .swiper-slide08 .slogan02 li:nth-child(2n){margin:0} #section01 .swiper-slide08 .slogan02 li:nth-child(7){margin:0 2% 0 0} #section01 .swiper-slide08 .slogan02 li img {height:25px} #section01 .swiper-slide10 .tit h2{font-size: 25px;} #section01 .swiper-slide10 .tit h2 b{font-size: 50px;} #section01 .swiper-slide10 .tit p{width: 100%; font-size: 25px;} #section01 .swiper-slide10 .m10_gif{bottom: 0} #section01 .swiper-pagination-fraction{bottom:7%;font-size:15px;} #section01 .swiper-button-prev, #section01 .swiper-container-rtl .swiper-button-next{left:38%;} #section01 .swiper-button-prev, #section01 .swiper-button-next {bottom:8%;} #section02 figure.system h2{font-size:20px;} #section02 figure.system h3{font-size:15px;} #section03 h4{font-size:15px} #section03 li{margin-bottom:10px;} #section03 .txt{left:10px;bottom:20px} #section03 .txt p{font-size:13px;opacity:1;font-weight:300} #section04 h2{font-size:20px} #section04 p{font-size:13px;letter-spacing:0;line-height:1.65;} #section04 .laser_menu ul li{font-size:16px;} #section04 .laser_menu ul li a{padding:5px 0} #section04 .laser_wrap div{float:none;width:100%;} #section04 .laser_wrap .laser h1{font-size:25px;} #section04 .laser_wrap .laser img{height:180px;} #section04 .laser_wrap .video video{width:100%;height:200px;} #section04 .view {padding:5px 0;font-size:13px;} #section05 .swiper-container04{padding:0 0 30px 0} #section05 h2{font-size:20px;margin:10px auto;} #section05 p{font-size:13px;letter-spacing:0;line-height:1.65;} #section06 .case{overflow:hidden;width:90%;margin:auto;} #section06 .case li{width:50%;text-align:right;} #section06 .case li:nth-child(5n-0){border-right:1px solid #464544;} #section06 .case li a{padding:10px 20px;overflow:hidden;transform:none} #section06 .case li:nth-child(7) h3{line-height:1.7} #section06 .case li:nth-child(8) h3{line-height:1.7} #section06 .case li:nth-child(9) h3{line-height:1.7} #section06 .case li:nth-child(10) h3{line-height:1.7} #section06 .case li img{height:40px;float:left} #section06 .case li h3{padding:0;font-size:13px;line-height:3} #section06 .case li p{display:none;} #section07 .event{width:90%;margin:auto;} #section07 .swiper-container05 {padding:0 0 20px 0} #section07 .swiper-container05 .swiper-pagination-progressbar{width:100%;} #section07 .event p{font-size:13px;letter-spacing:0;line-height:1.65;} #section07 .event img{width:70%;margin:auto} #section07 .event .view{padding:5px 0;font-size:13px;margin:} #section08 .community{margin-bottom:20px;} #section08 .community ul li{font-size:13px;padding:5px 0} #section08 .online ul{padding:0 0 0 15px} #section08 .online li{font-size:13px;padding:15px 5px} #section08 .online .wr_content{width:33%;} #section08 .online .name{width:14%;} #section08 .online .date{width:21%;} #section08 .online .qa{padding:15px 5px;width:20%;} #section08 .online ul:nth-child(3){margin:0 0 20px 0} #section08 .online ul:nth-child(4){display:none} #section08 .online ul:nth-child(5){display:none} #section08 .online ul:nth-child(6){display:none} #section08 .board ul{padding:15px} #section08 .board ul:nth-child(2){margin:0 0 20px 0} #section08 .board ul:nth-child(3){display:none} #section08 .board h4{font-size:13px;padding:5px 0} #section08 .board p{font-size:13px;} #section08 .view{padding:5px 0;font-size:13px;} #section09 .insta ul {width:90%;margin:auto;} #section09 .insta ul li{width:50%;} #section09 .insta ul li:nth-child(5){display:none} #section09 .insta ul li:nth-child(6){display:none} #section10 .sub_map {width:90% !important; margin:auto;} #section10 .wrap_map{height:360px !important} #section10 .map_info{width:100%;height:auto;bottom:0;padding:10px} #section10 .map_info .add{padding-bottom:5px} #section10 .map_info .txt01{font-size:12px;line-height:1.3} #section10 .map_info .txt03{font-size:13px;} #section11 p {font-size:13px;} #section11 h1{text-align:center;padding-bottom:20px} #section11 img{margin:auto;} #section11 .f_info{padding-bottom:20px} #section11 .f_icon{float:none;padding-top:20px} #section11 .f_info li a{font-size:13px;} footer{padding:30px 0;} footer .f_info li a {font-size:13px} footer p{font-size:13px;} footer h1 img{padding:0 0 20px 0;width:100px;} footer .f_info{padding-bottom:10px;} footer .f_icon{float:none;margin:20px 0 0 0} .btn_top{bottom:2em;right:1em} .btn_top img { width: 40px; } .circular-menu {bottom:4.5em;right:1em} .circular-menu .menu-item { width: 40px; height: 40px; } .circular-menu .menu-item img { width: 40px; } } @media (max-width: 450px){ #section01 .swiper-slide10 .tit h2{font-size: 18px;} #section01 .swiper-slide10 .tit h2 b{font-size: 35px;} #section01 .swiper-slide10 .tit p{width: 100%; font-size: 18px;} } @media (max-width: 360px){ #section02 figure.system h2{font-size:20px;} }