/* 접근성 텍스트 숨김 클래스 */ .link-text { position: absolute; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; top: 50%; } #mainpopup { animation: opa 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 5.7s; } body { display: } body .modal-active { } /* 디자인 */ #wrap { position:relative; width:100%; max-width:640px; margin:0 auto; } #wrap img { max-width:100%; } header { position:fixed; top:0px; left:0px; right:0px; width:100%; z-index:41; } header h1 { position:absolute; top:12px; left:50%; width:88px; transform:translate(-50%,0%); } header h1 a { display:block; width:88px; height:50px; background:url('/images/common/02logo.png')no-repeat 50% 50%; background-size:100%; } header div.allmenu2 { position:absolute; top:24px; right:20px; width:36px; cursor:pointer; } header .hamburger { padding:0px;} header .hamburger-box { width:34px; } header .hamburger-inner { width:34px; } header .hamburger-inner:before { width:34px; } header .hamburger-inner:after { width:34px; } nav { position:fixed; width:100%; height:0%; background:#fff; z-index:40; transition:all 0.6s cubic-bezier(0.22, 1, 0.36, 1) ; box-sizing:border-box; overflow:hidden; } nav.view { height:100%; transition:all 0.6s cubic-bezier(0.22, 1, 0.36, 1) ; } nav .gnbwrap { position:relative; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; } nav .gnb { display:none; position:relative; top:72px; width:100%; padding:5% 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} nav.view .gnb { display:block; } nav .gnb li.gnbli { position:relative; width:90%; margin:0 auto; padding:3% 0; } nav .gnb li a.gnb1td { display:block; position:relative; width:100%; padding:0 0 0 0; font-size:16px; font-weight:500; color:#000; line-height:1; } nav .gnb li.gnbli.active a.gnb1td { color:#11bed5; } nav .gnb li span { display:block; position:absolute; top:0px; right:0px; font-weight:400; font-size:20px; } nav .gnb li.gnbli .dropnav { position:relative; width:100%; height:0px; padding:0 0; transition:all 0.6s cubic-bezier(0.22, 1, 0.36, 1) ; overflow:hidden; } nav .gnb li.gnbli.active .dropnav { position:relative; width:100%; height:auto; padding:5% 0 0 0; } nav .dropnav ul li { padding:1% 0; } nav .dropnav ul li a { font-size:14px; font-weight:400; color:#1e1a1a; line-height:1; } nav .dropnav ul li a:hover { color:#11bed5; } .allmenu_info { position:relative; top:72px; width:90%; margin:0 auto; padding:5% 0; } .allmenu_info ul.all_phone { width:100%; min-height:30px; margin-bottom:3%; padding-left:40px; box-sizing:border-box; background:url('/images/common/all_phone.jpg')no-repeat 0 0; } .allmenu_info ul.all_add { width:100%; min-height:30px; padding-left:40px; box-sizing:border-box; background:url('/images/common/all_add.jpg')no-repeat 0 0; } .allmenu_info ul.all_phone li {display:inline-block; font-size:23px; font-weight:700; color:#46d1e1; line-height:1; } .allmenu_info ul.all_phone li a { color:#46d1e1; } .allmenu_info ul.all_add { font-size:13px; color:#717171; font-weight:400; } /*인트로*/ #loading { position:fixed; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; height:100%; z-index:900; overflow:hidden; animation: loadinghide 0.4s ease-in-out both 4.8s; } #loading div.loading { position:absolute; width:100%; height:25%; background:#00b9d2; box-sizing:border-box; } #loading div.loading1 { top:0%; right:0; animation: rightani 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 3.9s; } #loading div.loading2 { top:25%; right:0; animation: rightani 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 4.1s; } #loading div.loading3 { top:50%; right:0; animation: rightani 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 4.2s; } #loading div.loading4 { top:75%; right:0; animation: rightani 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 4.3s; } #typingtxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; text-align:center; animation: opatxt 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 3.9s; } #typingtxt li { width:100%; height:28px; margin:10px 0; font-family: 'IBM Plex Sans KR', sans-serif; font-size:22px; color:#fff; font-weight:600; line-height:1; white-space: nowrap; overflow:hidden; } /*섹션1*/ #mainvideo .txtline1 { position:absolute; top:12%; left:0; transform: translate(0,-50%); width:100%; font-family: 'Jost'; font-size:34px; font-weight:600; color:#ebebeb; line-height:100%; } #mainvideo .txtline2 { position:absolute; top:85%; left:0; transform: translate(0,-50%); width:100%; font-family: 'Jost'; font-size:34px; font-weight:600; color:#ebebeb; line-height:100%; } #mainvideo .txtline1 span.t1 { display:inline-block; position:absolute; left:5%; transform: translate(-50%,0); } #mainvideo .txtline1 span.t2 { display:inline-block; position:absolute; left:35%; transform: translate(-50%,0); width:24px; padding-top:5px; } #mainvideo .txtline1 span.t3 { display:inline-block; position:absolute; left:65%; transform: translate(-50%,0); } #mainvideo .txtline1 span.t4 { display:inline-block; position:absolute; left:95%; transform: translate(-50%,0); } #mainvideo .txtline2 span.t1 { display:inline-block; position:absolute; left:5%; transform: translate(-50%,0); } #mainvideo .txtline2 span.t2 { display:inline-block; position:absolute; left:20%; transform: translate(-50%,0); } #mainvideo .txtline2 span.t3 { display:inline-block; position:absolute; left:40%; transform: translate(-50%,0); } #mainvideo .txtline2 span.t4 { display:inline-block; position:absolute; left:60%; transform: translate(-50%,0); } #mainvideo .txtline2 span.t5 { display:inline-block; position:absolute; left:80%; transform: translate(-50%,0); } #mainvideo .txtline2 span.t6 { display:inline-block; position:absolute; left:95%; transform: translate(-50%,0); } #mainvideo #mainvod { position:absolute; top:32%; left:50%; transform: translate(-50%,-50%); width:60%; height:256px; overflow:hidden; animation: mainvod 1.3s cubic-bezier(0.22, 1, 0.36, 1) both 4.8s; } #mainvideo #mainvod video { display: inline-block; position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%); min-width: 105%; min-height: 105%; width: auto; height:105%; } #mainvideo #vodtxt { position:absolute; top:73%; left:59%; transform: translate(-50%,-50%); width:80%; } #mainvideo #vodtxt .title { font-size:18px; color:#000; font-weight:700; line-height:130%; animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 5.2s; } #mainvideo #vodtxt .con { margin-top:3%; font-size:14px; color:#2e2e2e; font-weight:500; line-height:170%; animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 5.6s; } #mainvideo #vodtxt .linkbt { margin-top:6%; text-align: center; animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 6.0s; } #mainvideo #vodtxt .linkbt a { display: block; width:110px; height: 30px; line-height: 29px; font-size: 12px; font-weight: 500; color: #000; border: 1px solid #000; border-radius: 50px; } #maindrbg { width:100%; overflow:hidden; } #maindrbg div { position:absolute; top:0px; left:0px; right:0px; bottom:0px; background-image:url('/images/common/section2.jpg'); background-position:0px 0; background-size:cover; animation:maindrbg 10s linear alternate infinite; } #centerbox .centerboxbg { position:absolute; top:0px; left:0px; right:0px; bottom:0px; /* background-image:url('/images/common/section2.jpg'); background-position:0px 0; */ background-size:cover; animation:maindrbg 10s linear alternate infinite; } #centerbox .mainbg1 { position:absolute; top:0%; right:0; width:100%; height:25%; background:#f1f8f7; box-sizing:border-box; } #centerbox .mainbg2 { position:absolute; top:25%; right:0; width:100%; height:25%; background:#f1f8f7; box-sizing:border-box; } #centerbox .mainbg3 { position:absolute; top:50%; right:0; width:100%; height:25%; background:#f1f8f7; box-sizing:border-box; } #centerbox .mainbg4 { position:absolute; top:75%; right:0; width:100%; height:25%; background:#f1f8f7; box-sizing:border-box; } #mainbox { position:absolute; top:48%; left:50%; width:90%; height:71%; transform: translate(-50%,-50%); } #mainbox ul { float:left; position:relative; width:48%; height:25%; border-bottom-right-radius:30px; overflow:hidden; cursor:pointer; } #mainbox ul.box1 { margin-right:4%; margin-bottom:5%; } #mainbox ul.box2 { margin-bottom:5%; } #mainbox ul.box3 { margin-right:4%; margin-bottom:5%; } #mainbox ul.box4 { margin-bottom:5%; } #mainbox ul.box5 { margin-right:4%;} #mainbox ul.box6 {margin-top:5%; } #mainbox ul.box7 { background:url('/images/main_a/box7bg.png')no-repeat 50% 0; background-size:cover; display:block;} #mainbox ul.box8 {margin-top:5%; margin-left:4%; background:url('/images/main_a/box1bg.jpg')no-repeat 50% 0; background-size:cover;} #mainbox ul div.boxbg { position:absolute; bottom:0px; left:0px; width:100%; height:100%; background:#17c5da; transition:all 0.3s cubic-bezier(0.22, 1, 0.36, 1) ; } #mainbox ul:hover div.boxbg { height:0%; } #mainbox ul li.txt1 { position:absolute; top:15%; left:5%; font-size:12px; font-weight:300; color:#fff; } #mainbox ul li.txt2 { position:absolute; bottom:15%; left:5%; font-size:13px; font-weight:400; color:#fff; } #mainbox ul li.txt2 span { display:block; float:right; width:60px; height:1px; background:#fff; margin-top:20px; display:none; } #mainbox ul:hover li.txt2 span { background:#fff; } #mainbox video { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; height: auto; width: auto; } #mainbox .subvodbg{ position:absolute; bottom:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); } .active#centerbox .mainbg1 { animation: rightani2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#centerbox .mainbg2 { animation: rightani2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .active#centerbox .mainbg3 { animation: rightani2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active#centerbox .mainbg4 { animation: rightani2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#centerbox #mainbox ul.box1 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#centerbox #mainbox ul.box2 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#centerbox #mainbox ul.box3 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } .active#centerbox #mainbox ul.box4 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } .active#centerbox #mainbox ul.box5 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#centerbox #mainbox ul.box6 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#centerbox #mainbox ul.box7 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#centerbox #mainbox ul.box8 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } #center_dr { position:absolute; width:100%; height:100%; overflow:hidden; } #center_dr .centerdr { position:relative; width:100%; height:100%; outline:none; } #center_dr .centerdr.center_01 { background:url('/images/mobile/centerdr1.jpg')no-repeat 50% 95%; background-size:100%; } #center_dr .centerdr.center_02 { background:url('/images/mobile/centerdr5.jpg')no-repeat 50% 95%; background-size:100%; } #center_dr .centerdr.center_03 { background:url('/images/mobile/centerdr3.jpg')no-repeat 50% 95%; background-size:100%; } #center_dr .centerdr.center_04 { background:url('/images/mobile/centerdr4.jpg')no-repeat 50% 95%; background-size:100%; } #center_dr .centerdr.center_05 { background:url('/images/mobile/centerdr2.jpg')no-repeat 50% 95%; background-size:100%; } #center_dr .centerdr.center_06 { background:url('/images/mobile/centerdr6.jpg')no-repeat 50% 95%; background-size:100%; } #center_dr .centerdr.center_07 { background:url('/images/common/centerdr7.png')no-repeat 50% 95%; background-size:100%;} #center_dr .centerdr .txtwrap { position:absolute; top:14%; left:5%; width:90%; margin:0 auto; text-align:center; } #center_dr .centerdr .txtwrap li.txt1 { font-size:18px; font-weight:700; color:#000; line-height:120%; } #center_dr .centerdr .txtwrap li.txt2 { padding-top:10px; font-size:12px; font-weight:400; color:#4c5155; font-style: italic; line-height:170%; } #center_dr .centerdr .txtwrap li.txt3 a { display:inline-block; margin-top:8px; padding:3px 0; font-size:10px; font-weight:400; color:#000; border-top:1px solid #4c5155; line-height:1; border-bottom:1px solid #4c5155; } #center_dr .centerdr .txtwrap li.txt3 a:hover { color:#13c0d7; border-top:1px solid #13c0d7; border-bottom:1px solid #13c0d7; } .centerdr.slick-active .txtwrap li.txt1 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.3s; } .centerdr.slick-active .txtwrap li.txt2 { animation: fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .centerdr.slick-active .txtwrap li.txt3 { animation: fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .centerbt { position:absolute; top:52%; left:40%; width:56%; height:1px; background:#e3e3e3; transform: translate(-50%,-50%); } .centerbt ul { position:relative; width:100%; } .centerbt ul li.centerbt1 { position:absolute; top:0px; left:0px; } .centerbt ul li.centerbt2 { position:absolute; top:0px; left:16%; } .centerbt ul li.centerbt3 { position:absolute; top:0px; left:33%; } .centerbt ul li.centerbt4 { position:absolute; top:0px; left:49%; } .centerbt ul li.centerbt5 { position:absolute; top:0px; left:65%; } .centerbt ul li.centerbt6 { position:absolute; top:0px; left:82%; } .centerbt ul li.centerbt7 { position:absolute; top:0px; left:100%; } .centerbt ul li span.bt { position:absolute; top:-7px; left:0px; display:block; width:12px; height:12px; background:#13c0d7; border-radius:100%; cursor:pointer; } .centerbt ul li span.txt { position:absolute; top:-58px; left:0px; width:114px; display:block; transform: rotate(-40deg); font-size:10px; font-weight:400; color:#4b4b4b; } .centerbt ul li.cbt.on span.txt { color:#13c0d7; } .centerbt ul li.cbt .linkwrap { display:none; opacity:0; position:absolute; top:16px; left:5%; width:250px; transition: all 0.2s; text-align:left; } .centerbt ul li.cbt .linkwrap.linkwrap2 { left:-120px; } .centerbt ul li.cbt.on .linkwrap { display:block; opacity:1; top:16px; } .centerbt ul li.cbt .linkwrap li { display:inline-block; width:70px; } .centerbt ul li.cbt .linkwrap li a { display:block; width:100%; height:24px; background:#13c0d7; font-size:11px; color:#fff; font-weight:400; border-radius:50px; text-align:center; line-height:22px; box-sizing:border-box; } .centerbt ul li.cbt .linkwrap li a:hover { color:#fff; } .centerbt ul li.cbt.centerbt2 .linkwrap { left:-30px; } .centerbt ul li.cbt.centerbt3 .linkwrap { left:-60px; } .centerbt ul li.cbt.centerbt5 .linkwrap { left:-120px; } .centerbt ul li.cbt.centerbt6 .linkwrap { left:-150px; } .active#maindr #center_dr { animation: fadeup2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#maindr #center_dr .centerbt { animation: fadeup2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } footer { position:relative; width:100%; padding:12% 0; background:#fff; border-top:1px solid #ddd; } footer ul { width:100%; overflow:hidden; text-align:center; } footer ul li { display:inline-block; margin:0 8px; } footer div { width:100%; text-align:center; padding-top:10px; font-size:12px; font-weight:400; color:#494646; line-height:160%; } footer div span { font-size:10px; color:#cfcfcf; } .quickcsbt { position:fixed; bottom:0px; right:5%; width:100px; height:30px; text-align:center; line-height:30px; cursor:pointer; border-top-left-radius:14px; border-top-right-radius:14px; transition:all 0.3s cubic-bezier(0.22, 1, 0.36, 1) ; background:#13c0d7 url('/images/mobile/quickcsbt.jpg')no-repeat 16px 52%; background-size:14px; font-size:12px; font-weight:500px; color:#fff; box-sizing:border-box; padding-left:20px; } .quickcsbt.hide { bottom:-30px; transition:all 0.3s cubic-bezier(0.22, 1, 0.36, 1) ; } .quickcswrap { position:fixed; top:0px; right:0px; left:0px; width:100%; height:0%; background:rgba(0,0,0,0.5); overflow:hidden; z-index:160; transition:all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s; } .quickcswrap.active { bottom:0px; height:100%; transition:all 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; } .quickcs { position:absolute; top:60%; left:50%; transform: translate(-50%,-50%); width:276px; opacity:0; transition:all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; } .quickcswrap.active .quickcs { top:56%; opacity:1; transition:all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.9s; } .quickcsbt2 { display: block; position:absolute; top:-70px; right:0px; width:46px; height:46px; padding-top:14px; box-sizing:border-box; line-height:46px; text-align:center; vertical-align:middle; background:#fff; border-radius:100%; cursor:pointer; } .quickcsbt2 img { width:34px; } .quickcs ul { position:relative; width:100%; height:100%; width:276px; height:400px; padding-top:20px; background:#f4f5f5; border-radius:30px; box-sizing:border-box; overflow:hidden; box-shadow: 4px 4px 14px #555; } .quickcs ul li.name { width:232px; height:36px; margin:0 auto; padding-top:14px; overflow:hidden; } .quickcs ul li.phone { width:232px; height:36px; margin:0 auto; padding-top:14px; overflow:hidden; } .quickcs ul li.subject1 { width:232px; height:36px; margin:0 auto; padding-top:14px; overflow:hidden; } .quickcs ul li.contentinput { width:232px; height:60px; margin:0 auto; padding-top:14px; overflow:hidden; } .quickcs ul li.subject2 { width:232px; height:36px; margin:0 auto; padding-top:14px; overflow:hidden; } .quickcs ul li.fpv { width:232px; text-align:right; margin:0 auto; padding-top:6px; font-size:13px; font-weight:400; } .quickcs ul li.name label, .quickcs ul li.phone label, .quickcs ul li.subject1 label, .quickcs ul li.contentinput label { display:block; float:left; width:50px; height:36px; line-height:36px; text-align:right; font-size:13px; font-weight:500; color:#808080; } .quickcs ul li input.required { display:block; float:right; width:170px; height:36px; background:#fff; border-radius:10px; } .quickcs ul li select { display:block; float:right; width:170px; height:36px; background:#fff; border-radius:10px; border:0px; font-family: 'Noto Sans KR', sans-serif; } .quickcs ul li div.subject2left { display:block; float:left; width:50px; height:36px; line-height:36px; text-align:right; font-size:13px; font-weight:500; color:#808080; } .quickcs ul li div.subject2right { display:block; float:right; width:170px; height:36px; } .quickcs ul li div.subject2right span { display:block; float:left; width:33%; padding-top:10px; } .quickcs ul li div.subject2right span label { padding-left:4px; font-size:13px; color:#13c0d7; font-weight:500; } .quickcs ul li div.subject2right input { border-radius:100%; } .quickcs ul li.submitbt { position:absolute; bottom:0px; left:0px; width:100%; } .quickcs ul li.submitbt input { display:block; width:100%; height:62px; font-size:18px; font-weight:700; letter-spacing:-2px; color:#fff; background:#13c0d7; border:0px; cursor:pointer; } .quickcs ul li textarea { display:block; float:right; width:170px; height:63px; padding:5px; background:#fff; font-size:12px; border-radius:10px; font-family: 'Noto Sans KR', sans-serif; resize: none; } .quickcs ul li.fpv input[id="check1"] { display: none; } .quickcs ul li.fpv input[id="check1"] + label { display: inline-block; width: 13px; height: 13px; border: 0px solid #bcbcbc; background:#fff; cursor: pointer; border-radius:100%; margin-right:4px; vertical-align: middle; } .quickcs ul li.fpv input[id="check1"]:checked + label { background-color: #000; } .lqbt { position:fixed; top:25px; left:20px; z-index:12; } .lqbt span.figuretxt2 { display:none; width:30px; text-align:center; padding-bottom:14px; } .lqbt span.figurebt { display:block; position:relative; width:30px; height:30px; background:url('/images/main_c/figure.png')no-repeat 50% 50%; background-size:100%; cursor:pointer; z-index:1; animation: rotation 1.4s infinite linear; } .lqbt span.figurebt_on { display:none; position:relative; width:40px; height:40px; background:url('/images/main_c/figure2.png')no-repeat 50% 50%; background-size:30px; cursor:pointer; z-index:201; } .lqbt.active span.figurebt,.lqbt.active span.figuretxt2 { display:none; } .lqbt.active span.figurebt_on { display:block; } .figuretxt { position:fixed; top:0; left:0; width:100%; height:0%; overflow:hidden; z-index:11; transition:all 0.3s cubic-bezier(0.22, 1, 0.36, 1) 1.3s; } .figuretxt.active { bottom:0px; height:100%; transition:all 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.0s; } .figuretxt .bgwrap li:nth-child(1) { float:left; position:absolute; top:0px; left:0px; width:100%; height:25%; background:#22cee1; box-sizing:border-box; } .figuretxt .bgwrap li:nth-child(2) { float:left; position:absolute; top:25%; left:0px; width:100%; height:25%; background:#22cee1; box-sizing:border-box; } .figuretxt .bgwrap li:nth-child(3) { float:left; position:absolute; top:50%; left:0px; width:100%; height:25%; background:#22cee1; box-sizing:border-box; } .figuretxt .bgwrap li:nth-child(4) { float:left; position:absolute; top:75%; left:0px; width:100%; height:25%; background:#22cee1; box-sizing:border-box; } .figuretxt.active .bgwrap li:nth-child(1) { animation: rightani2 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.2s; } .figuretxt.active .bgwrap li:nth-child(2) { animation: rightani2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.3s; } .figuretxt.active .bgwrap li:nth-child(3) { animation: rightani2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .figuretxt.active .bgwrap li:nth-child(4) { animation: rightani2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .figuretxt .leftquicktxt { position:absolute; top:15%; width:100%; text-align:center; } .figuretxt .leftquicktxt li.t1 { opacity:0; margin-top:50px; font-size:24px; font-weight:700; color:#fff; line-height:1; transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.9s; } .figuretxt .leftquicktxt li.t2 { opacity:0; margin-top:50px; padding-top:10px; font-size:14px; font-weight:400; color:#fff; line-height:150%; transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s; } .figuretxt.active .leftquicktxt li.t1 { opacity:1; margin-top:0px; transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.0s; } .figuretxt.active .leftquicktxt li.t2 { opacity:1; margin-top:0px; transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.4s; } .figuretxt .cqtxt1 { position:absolute; top:40%; left:20%; transform: translate(-50%,0); width:150px; text-align:center; } .figuretxt .cqtxt2 { position:absolute; top:40%; left:50%; transform: translate(-50%,0); width:150px; text-align:center; } .figuretxt .cqtxt3 { position:absolute; top:40%; left:80%; transform: translate(-50%,0); width:150px; text-align:center; } .figuretxt .cqtxt4 { position:absolute; top:65%; left:20%; transform: translate(-50%,0); width:170px; text-align:center; } .figuretxt .cqtxt5 { position:absolute; top:65%; left:50%; transform: translate(-50%,0); width:150px; text-align:center; } .figuretxt .cqtxt6 { position:absolute; top:65%; left:80%; transform: translate(-50%,0); width:170px; text-align:center; } .figuretxt ul li.centerbg { position:relative; width:90px; height:90px; margin:0 auto; border-radius:100%; overflow:hidden; box-sizing:border-box; } .figuretxt ul li.centerbg video { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } .figuretxt ul li.txt3 { margin-top:10px; font-size:13px; font-weight:300; color:#fff; } .figuretxt ul.cqtxt { opacity:0; margin-top:30px; transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; } .figuretxt.active ul.cqtxt { opacity:1; margin-top:0px; transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.8s; } .section { overflow:hidden; } #main01 { height:100%; background: url('/images/main2/m_ain01.jpg')no-repeat 50% 0; background-size: cover;} #main01 .maintxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; width:100%; } #main01 .maintxt .txt1 { font-size: 26px; font-weight: 700; color: #fff; line-height: 126%;} #main01 .maintxt .txt1 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; line-height: 140%; max-height: 100%; background-size: cover; background-attachment: fixed; background-position: 50% 50%;} #main01 .maintxt .txt2 { font-size: 14px; font-weight: 500; color: #fff; line-height: 126%; margin-top:3%;} #main01 .maintxt .txt2 { animation: blurtxt2 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; line-height: 150%; max-height: 100%; background-size: cover; background-attachment: fixed; background-position: 50% 50%;} #main02 .maintxt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 100%; } #main02 .maintxt .txt1 { font-size: 22px; font-weight: 700; color: #14c2d3; line-height: 146%;} #main03 {height:100%;} #main03 { background:#fff; max-height:100%; background-size: cover; background-attachment: fixed; background-position:50% 50%; } #main03 .subtxtbg { position:absolute; top:0px; left:0; width:100%; height:100%; } #main03 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #main03 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #main03 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #main03 .titletxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:240px; } #main03 .titletxt div { position:relative; width:100%; margin-bottom:20px; font-size:24px; font-weight:700; color:#fff; } #main03 .titletxt span { display:inline-block; position:absolute; top:2px; right:0px; cursor:pointer; width:30px; } .active#main03 .subtxtbg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#main03 .subtxtbg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#main03 .subtxtbg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#main03 #ieuleng div span { animation: opa 1.5s cubic-bezier(0.22, 1, 0.36, 1)both 1.0s; } .active#main03 .titletxt div { animation: fadeleft 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active#main03 .titletxt div span { animation: faderight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } #main03 img {max-width:100%;} #modal-container, #modal-container2, #modal-container3, #modal-container4, #modal-dr { position: fixed; top: 0px; width: 100%; height: 0px; z-index: 150; overflow-y: auto; overflow-x: hidden; transition: all 0.3s cubic-bezier(0.5, 0, 0.1, 1); background: #ffffff; } .modaltab1{ position:relative; width:90%; margin:0 auto; text-align:center; overflow:hidden; z-index:1; padding:5% 0;} .modaltab1 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab1 ul li.active,.modaltab2 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .modaltab22{position:relative; width:90%; margin:0 auto; text-align:center; overflow:hidden; z-index:1;padding:5% 0;} .modaltab22 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab22 ul li.active,.modaltab2 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .modaltab33 {position:relative; width:90%; margin:0 auto; text-align:center; overflow:hidden; z-index:1;padding:5% 0;} .modaltab33 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab33 ul li.active,.modaltab2 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .modaltab4{ position:relative; width:90%; margin:0 auto; text-align:center; overflow:hidden; z-index:1; padding:5% 0; } .modaltab4 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab4 ul li.active,.modaltab2 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } #main06 {background:#fff;} #main06 .contents { position:relative; width:90%; margin:0 auto; padding-top:30%; padding-bottom:40px; } #main06 .contents li { } #main06 .contents li .img {width:100%; overflow:hidden;} #main06 .contents li .img img { width:100%;} #main06 .contents li:hover .img {box-shadow: 0px 0px 10px #999; transition:all 0.2s ease-in-out;} #main06 .contents li .title {font-size:16px; font-weight:500; margin:10px 0 5px 0; } #main06 .contents li .subt {font-size:12px; font-weight:400; color:#999; } #main06 .viewmore { width:120px; margin:0 auto; height:40px; margin-top:5%;} #main06 .viewmore p {width:120px; height:35px; border:1px solid #45c3de; text-align:center; font-weight:700; line-height:35px; color:#45c3de; float:right;} #main06 .viewmore p:hover {background:#45c3de; text-align:center; font-weight:700; color:#fff; display:inline-block} #main06 .slick-dots { position: absolute; display: block; bottom:-0px; padding: 0; margin: 0; list-style: none; text-align: center; width:100%; height:20px; } #main06 .slick-dots li { display:inline-block; width:16px; height:16px; border-radius:100%; background:#a5a5a5; margin:0 2px; } #main06 .slick-dots li.slick-active { display:inline-block; width:16px; height:16px; border-radius:100%; background:#13c0d7; margin:0 2px; } #main07 .maintxt { width:100%; margin:20% 0 3% 0;} #main07 .maintxt li.t1{text-align:center; font-size:22px; color:#2e2e2e; font-weight:700; margin-bottom:3%;} #main07 .maintxt li.t2{text-align:center; font-size:12px; color:#2e2e2e; font-weight:500;} #main07.active .maintxt li.t1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #main07.active .maintxt li.t2 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } #main07 {background-image: url(/images/main2/main07.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%;} #main07 .dtimg {width:459px; margin:0 auto;} #main07 .contents {width:95%; margin:0 auto;} #main07 .circletxt {text-align:center; font-size:12px; font-weight:500; } #main07 ul li.circletxt { width:48.5%; float:left; margin-right:3%; background:#13c0d7; margin-bottom:3%; color:#fff;} #main07 ul li.circletxt { padding:5% 0; } #main07 ul li.circletxt:nth-child(2n) {margin-right:0%;} #main07 ul li.circletxt:nth-child(1) {background:#dddcdc; color:#333;} #main07 ul li.circletxt:nth-child(4) {background:#dddcdc; color:#333;} #main07 ul li.circletxt:nth-child(5) {background:#dddcdc; color:#333;} #main07.active ul li.circletxt { animation: fadeup 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } #main07.active ul li.circlet8 {background-image: url(/images/main2/m/ieulboxbg.jpg); background-size: cover; } #main08.active .maintxt { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #main08.active ul li:nth-child(1) { animation: fadeup 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #main08.active ul li:nth-child(2) { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #main08.active ul li:nth-child(3) { animation: fadeup 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #main08.active ul li:nth-child(4) { animation: fadeup 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #main08 {background:#fcfcfc;} #main08 .maintxt {font-size:24px; color:#2e2e2e; font-weight:700; margin-top:20%; line-height:130%; text-align:center;} #main08 .maintxt {animation: fadeup3 0.5s ease-in-out both 1.7s; } #main08 ul { margin:0 auto; overflow:hidden; margin-top:5%; } #main08 ul li{width:90%; margin:0 auto; overflow:hidden; text-align:left; margin-bottom:0;} #main08 ul li .img {position:relative; width:30%; float:left;} #main08 ul li .txtbox { position:relative;width:65%; float:left; overflow:hidden;} #main08 ul li .txtbox {margin-left:2%;} #main08 ul li .cimg {position:relative; width:90px; height:90px; border-radius: 100%; overflow: hidden; box-shadow: 0px 0px 10px #ccc; margin-right:5%;} #main08 ul li .txtbox .title{ position:relative;color:#13bbd2; font-size:15px; font-weight:700; margin-bottom:15%;} #main08 ul li .txtbox .subtxt {position:relative; position:relative; text-align:left; font-size:12px;} #main08 ul li .cimg img{width:100%;} #main09.active .maintxt li.t1 { animation: fadeup 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #main09.active .maintxt li.t2 { animation: fadeup 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } #main09.active ul.contents { animation: fadeup 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } #main09 {background:#fff;} #main09 .maintxt .t1 {text-align: center; font-size: 20px; color: #2e2e2e; font-weight: 700; margin-top:20%;} #main09 .maintxt .t2 {text-align: center; font-size: 12px; color: #2e2e2e; font-weight: 500; margin-top:10px;} #main09 ul.contents {width:90%; margin:0 auto; overflow:hidden; margin-top:5%;} #main09 ul.contents li {width:45%; float:left; } #main09 ul.contents li:first-child {margin-right:10%;} #main09 ul.contents li:last-child {margin-top:5%;} #main09 ul.contents li .img{border-radius:100%; overflow:hidden;} #main09 ul.contents li .img img{width:100%;} #main09 ul.contents li .title{text-align:center; font-size:14px; color:#2e2e2e; margin-top:5%; font-weight:500;} #bottom_sns .subsnswrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; } #main10.active .maintxt li.t1 { animation: fadeup 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #main10.active .maintxt li.t2 { animation: fadeup 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } #main10.active ul.contents { animation: fadeup 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; overflow:hidden;} #main10 {background:#f5fcfe;} #main10 .maintxt{margin-bottom:5%; margin-top:20%;} #main10 .maintxt .t1 {text-align: center; font-size: 22px; color: #2e2e2e; font-weight: 700; line-height:130%; letter-spacing:-1px; } #main10 .maintxt .t2 {text-align: center; font-size: 13px; color: #2e2e2e; font-weight: 500;margin-top:10px;} #main10 ul.contents {width:80%; margin:0 auto; margin-bottom:2%;} #main10 ul.contents li {width:47.5%; float:left; margin-right:5%; overflow:hidden; margin-bottom:1%;} #main10 ul.contents li:nth-child(2) {margin-right:0px;} #main10 ul.contents li .img { width:100%; height:10%; overflow:hidden;} #main10 ul.contents li .img img { width:100%; height:100%; object-fit:cover; } #main10 ul.contents li .title {width:100%; height:22px; background:#45c3de; text-align:center; color:#fff; line-height:22px; font-weight:500; font-size:12px;} #main10 ul.contents li:nth-child(6) .title {line-height:110%; height:60px; padding-top:15px;} #main10 ul:last-child li {width:100%; margin-right:0%; overflow:hidden; } .mobilequick { position:fixed; bottom:14px; right:14px; z-index:8; } .mobilequick ul li { width:40px; margin-top:10px; } .mobilequick ul li img { width:100%; } #allmenuwrap { position:fixed; right:-100%; top:0px; width:100%; height:100%; z-index:30; overflow-x:hidden; overflow-y:scroll; background-color: rgba( 0, 0, 0, 0.8 ); } .allmenu_top { width:100%; height:70px; background:#000; opacity:1; } .allmenu_top ul { width:90%; padding:0 5%; overflow:hidden;} .allmenu_top ul li { float:left; color:#fff; padding-top:25px; } .allmenu_top ul li a { font-size:15px; color:#fff; } .allmenu_top ul li span { padding:0 10px; } .allmenu_top ul li.allmenu_point a {color:#ffec19;} .allmenu_top ul li.allmenu_close { position:absolute; top:0px; right:20px; width:20px; float:right;} .allmenu_top ul li.allmenu_close img { width:100%; } .allmenu_list { position:relative; height:100%; } .allmenu_list .allmenu_01dep_wrap li.dep01 a {width:90%; padding:14px 5%; display:inline-block; font-size:16px; color:#e3e3e3; border-bottom:1px solid #111; } .allmenu_list .allmenu_01dep_wrap li.dep01_on a { background:#fff; color:#07212d; } .allmenu_02dep_wrap {position:absolute; top:0; right:-50%; width:50%; overflow:hidden; height:auto; min-height:100%;background:#fff;} .allmenu_list .allmenu_02dep_wrap li.dep02 a { width:90%; padding:14px 5%; display:inline-block; font-size:16px; color:#07212d; border-bottom:1px solid #dedede; } .allmenu_list .allmenu_02dep_wrap li.dep02_on a { background:#07212d; color:#fff; } .allmenu_02dep_more {float:right;width:2%; padding-right:5%;} .allmenu_03dep_wrap {width:100%; background:#f2f2f2; color:#fff; } .allmenu_list .allmenu_03dep_wrap li.dep03 > a {padding:10px 7%; width:86%; display:inline-block; font-size:14px;color:#fff;} /* 서브 로케이션 */ .subtap { position:relative; width:100%; } .subtap .taptitlewrap { position:relative; width:100%; height:44px; } .subtap .taptitle { position:relative; width:100%; height:44px; line-height:44px; padding:0 0; background:#009eac; overflow:hidden; } .subtap .taptitle div { float:left; padding-left:5%; color:#fff; font-size:15px; font-weight:300; } .subtap .taptitle span { position:absolute; top:0px; right:0px; padding-right:5%; color:#fff; font-size:20px; font-weight:500; } .subtap ul { position:absolute; top:114px; right:0px; width:100%; z-index:10;} .subtap ul li { position:relative; width:100%; } .subtap ul li.off a { display:block; width:100%; padding-left:5%; height:40px; font-size:13px; line-height:40px; font-weight:300; color:#fff; background:#909090; border-bottom:1px solid #7d7d7d; box-sizing:border-box; } .subtap ul li.on a { display:block; width:100%; padding-left:5%; height:40px; font-size:13px; line-height:40px; font-weight:300; color:#fff; background:#016eac; box-sizing:border-box; } .subtap03 {position:relative; width:100%; } .subtap03 .tap03title { position:relative; width:100%; height:44px; line-height:44px; padding:0 0; background:#007bac; overflow:hidden; } .subtap03 .tap03title div { float:left; padding-left:5%; color:#fff; font-size:13px; font-weight:300; } .subtap03 .tap03title span { position:absolute; top:0px; right:0px; padding-right:5%; color:#fff; font-size:20px; font-weight:500; } .subtap03 ul { position:absolute; top:44px; right:0px; width:100%; z-index:10;} .subtap03 ul li { position:relative; width:100%; } .subtap03 ul li.depth3_off a { display:block; width:100%; padding-left:5%; height:40px; font-size:12px; line-height:40px; font-weight:300; color:#fff; background:#909090; border-bottom:1px solid #7d7d7d; box-sizing:border-box; } .subtap03 ul li.depth3_on a { display:block; width:100%; padding-left:5%; height:40px; font-size:12px; line-height:40px; font-weight:300; color:#fff; background:#007bac; box-sizing:border-box; }