/*body{ overflow-x: hidden; }*/ #main{ overflow-x: hidden; } .inner{width: 1280px; margin: 0 auto; } #footer{z-index: 4;position: relative} .main_visual{height: 970px;position: relative; } /* 메인비주얼 */ .main_visual{width:100%;position: relative;z-index: 3; height: 970px;;background: #f2f4f5;} .main_visual .main_slider{ height:100%;overflow: hidden; position: relative;} .main_visual .main_slider .slide_box{ overflow: hidden;width:100%;height:100%; position: relative; background-color: #fff; } .main_visual .main_slider .slide_box > div{ overflow: hidden;height:inherit;position: absolute;left:0;top:0;right:0; z-index: 3; overflow: hidden; width: 100%; height: 100%; opacity:0; } .main_visual .main_slider .slide_box > div{ -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } .main_visual .main_slider .slide_box .main_img{ position: absolute;left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; -moz-transition: all 8s ; -webkit-transition: all 8s; -o-transition: all 8s; -ms-transition: all 8s ; transition: all 8s ; } .main_visual .main_slider .slide_box .main_img .videobcg{ display: block; min-height: 100vh; min-width: 100vw; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .main_visual .main_slider .slide_box .main_img img{ display: block; min-width: 100%; max-width: auto;height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.5); transition: transform 4s; } .main_visual .main_slider .slide_box > div.on .main_img img{ transform: translate(-50%,-50%) scale(1); } .main_visual .main_slider .slide_box > div.on{ z-index: 5; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" } .main_visual .main_slider .slide_box .in_inner{ text-align: center; } .main_visual .main_slider .slide_box .in_inner .dot{ display: flex; gap: 10px; margin-bottom: 30px; justify-content: center; } .main_visual .main_slider .slide_box .in_inner .dot span{ display: block; width: 8px; height: 8px; border-radius: 50%; animation: dot 3s infinite; background-color: #fff; } .main_visual .main_slider .slide_box .in_inner .dot span:nth-child(2){ animation-delay: .5s; } .main_visual .main_slider .slide_box .in_inner .dot span:nth-child(3){ animation-delay: 1s; } .main_visual .main_slider .slide_box .in_inner > strong{ display: block; font-size: 48px; line-height: 1.4em; color: #fff; font-weight: 700; margin-bottom: 60px; } .main_visual .main_slider .slide_box .in_inner .btn{ display: flex; gap: 20px; justify-content: center; } .main_visual .main_slider .slide_box .in_inner .btn a{ display: block; width: 166px; height: 48px; border-radius: 50px; border: 2px solid #fff; background-color: rgba(217,217,217,0.13); display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 20px; font-weight: 700; color: #fff; transition: border .3s, color .3s, background .3s; } .main_visual .main_slider .slide_box .in_inner .btn a:hover{ background-color: #fff; color: #003dae; } .main_visual .main_slider .slide_box .in_inner .btn a svg circle{ transition: fill .3s; } .main_visual .main_slider .slide_box .in_inner .btn a:hover svg circle{ fill: #003DAE; } .main_visual .scroll{ position: absolute; left: 50%; bottom: 42px; z-index: 10; display: flex; flex-flow: column; align-items: center; gap: 14px; transform: translate(-50%,0)} .main_visual .scroll p{ font-size: 16px; font-weight: 500; color: #fff; } .main_visual .scroll svg{ animation: sc 1s infinite; } /*효과*/ .main_visual .in_inner{width: 1280px;margin: 0 auto;max-width: 100%; position: absolute; left: 0; right: 0; top: 50%; transform: translate(0,-50%); z-index: 10; } .main_visual .main_slider .slide_box .in_inner > strong{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .2s; } .main_visual .main_slider .slide_box > div.on .in_inner > strong{ transform: translateY(0); opacity: 1; } .main_visual .main_slider .slide_box .in_inner .btn{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .4s; } .main_visual .main_slider .slide_box >div.on .in_inner .btn{ transform: translateY(0); opacity: 1; } /* 메인컨텐츠 공통 */ .inner{ width: 1020px; margin: 0 auto; } .dots{ display: flex; gap: 6px; } .dots.vert{ flex-flow: column; } .dots span{ display: block; width: 5px; height: 5px; border-radius: 50%; animation: dot 3s infinite; } .dots span:nth-child(2){ animation-delay: .5s; } .dots span:nth-child(3){ animation-delay: 1s; } .dots.blue span{ background-color: #003DAE; } .dots.black span{ background-color: #1f1f1f; } .dots.white span{ background-color: #ffffff; } .m_tit{ display: flex; gap: 14px; align-items: center; } .m_tit strong{ font-size: 40px; font-weight: 700; color: #1f1f1f; display: block; letter-spacing: -1px; } .m_tit p{ font-size: 17px; line-height: 1.8em; letter-spacing: -1px; color: #fff; } .con_w{ padding: 130px 0; } .img img{ display: block; width: 100%; } /*con01*/ #main .con01{ padding: 128px 0; background: url('/img/main/con01_bg.png') center center no-repeat; background-size: cover; } #main .con01 .inner{ display: flex; flex-flow: column; align-items: center; } #main .con01 svg{ margin-bottom: 30px; transition: opacity 1s; opacity: 0; } #main .con01 .dots{ transition: opacity 1s; opacity: 0; transition-delay: .2s; } #main .con01 strong{ display: block; font-size: 40px; font-weight: 500; letter-spacing: -1px; margin-top: 12px; } #main .con01.on svg{ opacity: 1; } #main .con01.on .dots{ opacity: 1; } #main .con01 strong{ opacity: 0; filter: blur(10px); letter-spacing: 3px; transition: opacity 1s, filter 1s, letter-spacing 1s; } #main .con01.on strong{ opacity: 1; filter: blur(0); letter-spacing: -1px; } /* con02 */ #main .con02 .img { overflow: hidden; } #main .con02 .img img{ transform: scale(1.1); transition: transform 2s; } #main .con02.on .img img{ transform: scale(1); } /* con03 */ #main .con03{ background: url('/img/main/con02_bg.jpg') center center no-repeat; background-size: cover; } #main .con03 p{ margin-top: 40px; font-size: 24px; line-height: 1.6em; color: #595959; letter-spacing: -1px; } #main .con03 p span{ display: block; } #main .con03 p b{ color: 1f1f1f; } #main .con03 .txt{ margin-top: 160px; display: flex; gap: 16px; } #main .con03 .txt .dots{ margin-top: 15px; } #main .con03 .st2{ font-size: 32px; line-height: 1.8em; letter-spacing: -1px; color: #000; } #main .con03 .st2 span{ display: block; } #main .con03 .st2 b{ color: #003DAE; } #main .con03 .m_tit{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; } #main .con03.on .m_tit{ transform: translateY(0); opacity: 1; } #main .con03 p{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .2s; } #main .con03.on p{ transform: translateY(0); opacity: 1; } #main .con03 .txt{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .4s; } #main .con03.on .txt{ transform: translateY(0); opacity: 1; } /* con04 */ #main .con04 .img { overflow: hidden; } #main .con04 .img img{ transform: scale(1.1); transition: transform 2s; } #main .con04.on .img img{ transform: scale(1); } /*con05*/ #main .con05 .das{ background-color: #003DAE; border-radius: 200px; padding: 65px 20px; border-radius: 300px; display: flex; align-items: center; justify-content: center; flex-flow: column; margin-bottom: 95px; box-shadow: 4px 4px 16px rgba(0,25,70,0.2); } #main .con05 .das strong{ display: block; font-size: 40px; font-weight: 700; color: #fbfcfd; margin-bottom: 30px; } #main .con05 .das strong span{ color: #fbfcfd; opacity: .8; } #main .con05 .das p{ font-size: 22px; font-weight: 700; color:#FBFCFD; word-break: keep-all; } #main .con05 .wrap{ display: flex; flex-flow: wrap; gap: 130px 75px; background: url('/img/main/con04_bg.png') right bottom no-repeat;} #main .con05 .wrap dl{ width: calc(33.3333333% - 50px); } #main .con05 .wrap dl dt{ font-size: 40px; font-weight: 800; color: #1f1f1f; line-height: 1.2em; margin-bottom: 30px; } #main .con05 .wrap dl dt .dots{ margin-bottom: 10px; } #main .con05 .wrap dl dd{ font-size: 17px; line-height: 1.8em; letter-spacing: -1px; color: #595959; word-break: keep-all; } #main .con05 .das{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; } #main .con05.on .das{ transform: translateY(0); opacity: 1; } #main .con05 .wrap dl{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; } #main .con05.on .wrap dl{ transform: translateY(0); opacity: 1; } #main .con05 .wrap dl:nth-child(1){ transition-delay: .3s; } #main .con05 .wrap dl:nth-child(2){ transition-delay: .5s; } #main .con05 .wrap dl:nth-child(3){ transition-delay: .7s; } #main .con05 .wrap dl:nth-child(4){ transition-delay: .9s; } #main .con05 .wrap dl:nth-child(5){ transition-delay: 1.1s; } /*con06*/ #main .con06{ background-color: #000; overflow: hidden; } #main .con06 .m_tit{ flex-flow: column; gap: 30px; align-items: flex-start; margin-bottom: 100px; } #main .con06 .m_tit strong{ color: #fff; } #main .con06 .img{ margin-bottom: 80px; } #main .con06 .wrap{ display: flex; justify-content: space-between; margin-bottom: 64px; } #main .con06 .wrap p{ border-radius: 10px; background-color: #262626; padding: 20px 30px; width: 400px; padding-right: 10px; font-size: 17px; line-height: 1.8em; letter-spacing: -0.6px; color: #999; } #main .con06 .link{ position: relative; } #main .con06 .link .inner{ display: flex; flex-flow: wrap; gap: 20px; } #main .con06 .link .inner > div{ width: calc(50% - 10px); border-radius: 400px; background-color: #090909; border: 1px solid #201f1f; height: 272px; display: flex; align-items: center; gap: 40px; justify-content: center;position: relative; z-index: 1; } #main .con06 .link .inner > div .txt{ display: flex; flex-flow: column; gap: 20px; } #main .con06 .link .inner > div .txt em{ display: block; width: 48px; height: 30px; border-radius: 50px; background-color: #1a1a1a; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 500; font-size: 18px; } #main .con06 .link .inner > div .txt strong{ font-size: 20px; line-height: 1.6em; letter-spacing: -1.67px; color: #fff; } #main .con06 .link .inner > div .txt .btn a{ display: block; width: 144px; height: 48px; border-radius: 50px; background-color: #003DAE; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 20px; font-weight: 700; color: #fff; transition: color .3s, background .3s; } #main .con06 .link .inner > div .txt .btn a:hover{ background-color: #004CDA; } #main .con06 .link .txt_bg{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%); width: 100%; } #main .con06 .link .txt_bg .track_w{ height: 146px; position: relative; } #main .con06 .link .txt_bg .track{ position: absolute; white-space: nowrap; will-change: transform; animation: marquee 100s linear infinite; display: flex; } #main .con06 .link .txt_bg .track2{ animation: marquee2 100s linear infinite; right: 0; } #main .con06 .m_tit strong{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; } #main .con06.on .m_tit strong{ transform: translateY(0); opacity: 1; } #main .con06 .m_tit p{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .2s; } #main .con06.on .m_tit p{ transform: translateY(0); opacity: 1; } #main .con06 .img{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .5s; } #main .con06.on .img{ transform: translateY(0); opacity: 1; } #main .con06 .wrap p{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .8s; } #main .con06.on .wrap p{ transform: translateY(0); opacity: 1; } #main .con06 .wrap p:nth-child(2){ transition-delay: 1s; } /*con07*/ #main .con07 ul{ margin-top: 30px; display: flex; flex-flow: wrap; gap: 50px 33px; } #main .con07 ul li{ width: calc(25% - 24.75px); box-shadow: 4px 4px 18px rgba(0,25,43,0.1); border-radius: 12px; overflow: hidden; } #main .con07 ul li .txt{ padding: 16px 0; text-align: center; background-color: #fafafa; } #main .con07 ul li .txt strong{ display: block; font-size: 18px; font-weight: 600; color: #1f1f1f; word-break: keep-all} #main .con07 .m_tit{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; } #main .con07.on .m_tit{ transform: translateY(0); opacity: 1; } #main .con07 ul{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .3s;} #main .con07.on ul{ transform: translateY(0); opacity: 1; } @keyframes dot { 0% { opacity: 1; } 50%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes sc{ 0%{ transform: translateY(0); } 50%{ transform: translateY(8px) } 100%{ transform: translateY(0) } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marquee2 { from { transform: translateX(0); } to { transform: translateX(50%); } } @media (max-width: 1919px){ .main_visual { height: 100vh; } } @media (max-width: 1560px){ #header{ padding: 0 20px; } #header .gnb{ gap: 20px; } #header .gnb.ac > ul{ gap: 70px; } } @media (max-width: 1280px){ #header .gnb.ac > ul{ gap: 40px; } #header .gnb > ul > li > a{ font-size: 15px; } #header .gnb > ul > li > ul li a{ font-size: 14px; } } @media (max-width: 1080px){ #header .gnb > ul{ display: none; } #header .all_menu_b{ display: block; } #header .gnb .lang{ margin-right: 40px; } #header:before{ display: none; } .main_visual .main_slider .slide_box .in_inner > strong{ font-size: 32px; margin-bottom: 30px; } .main_visual .main_slider .slide_box .in_inner .btn a{ font-size: 15px; width: 132px; height: 42px; } .main_visual .main_slider .slide_box .in_inner .btn a svg{ width: 10px; height: auto; } #main .con01 strong{ font-size: 24px; } #main .con01 svg { margin-bottom: 20px; width: 100px; height: auto; } #main .con01{ padding: 80px 0; } .con_w{ padding: 80px 0; } .inner{ width: 100%; padding: 0 20px; } .m_tit{ gap: 8px; } .m_tit strong{ font-size: 24px; } .dots{ gap: 3px; } .dots span{ width: 3px; height: 3px; } #main .con03 p{ margin-top: 20px; font-size: 16px; } #main .con03 .txt .dots{ margin-top: 10px; } #main .con03 .txt { margin-top: 80px; } #main .con03 .st2{ font-size: 20px; } #main .con05 .das{ padding: 30px 20px; } #main .con05 .das strong{ font-size: 20px; margin-bottom: 12px; } #main .con05 .das p{ font-size: 16px; } #main .con05 .wrap dl dt{ font-size: 20px; margin-bottom: 12px; } #main .con05 .wrap dl dd{ font-size: 14px; } #main .con05 .wrap{ gap: 50px 30px; } #main .con05 .wrap dl{ width: calc(33.3333333% - 20px); } #main .con05 .wrap{ background-size: 300px auto; } #main .con06 .m_tit{ gap: 12px; margin-bottom: 40px; } #main .con06 .img{ margin-bottom: 40px; } #main .con06 .wrap{ gap: 20px; } #main .con06 .wrap p{ width: calc(50% - 10px); font-size: 14px; } #main .con06 .link .txt_bg .track img{ height: 100px; } #main .con06 .link .txt_bg .track_w{ height: 100px; } #main .con06 .link .inner > div{ height: 200px; } #main .con06 .link .inner > div .txt{ gap: 10px; } #main .con06 .link .inner > div{ justify-content: flex-start; padding-left: 30px; } #main .con06 .link .inner > div .txt strong{ font-size: 16px; } #main .con06 .link .inner > div .txt em{ font-size: 14px; width: 38px; height: 24px; } #main .con06 .link .inner > div .txt .btn a{ width: 110px; height: 38px; gap: 6px; font-size: 14px; } #main .con06 .link .inner > div .txt .btn a svg{ width: 9px; height: auto; } #main .con07 ul{ margin-top: 20px; gap: 20px; } #main .con07 ul li{ width: calc(25% - 15px) } #main .con07 ul li .txt strong{ font-size: 14px; } #footer address{ font-size: 14px; } } @media (max-width: 880px){ #main .con06 .link .inne{ gap:20px; } #main .con06 .link .inner > div{ width: 100%; gap: 20px; height: auto; padding: 20px; padding-right: 10px;} #main .con06 .link .inner > div .txt strong{ font-size: 14px; } #main .con06 .link .inner > div .txt strong br{ display: none; } #main .con06 .link .inner > div .imgs img{ width: 120px; } } @media (max-width: 640px){ #header { height: 60px; } #header h1 svg{ width: 100px; height: auto; } #header .gnb .lang{ width: 70px; height: 28px; } #header .gnb .lang a{ font-size: 14px; gap: 4px; } .main_visual .main_slider .slide_box .in_inner > strong{ font-size: 22px; margin-bottom: 20px; } .main_visual .main_slider .slide_box .in_inner .dot{ gap: 4px; margin-bottom: 15px; } .main_visual .main_slider .slide_box .in_inner .dot span{ width: 4px; height: 4px; } .main_visual .main_slider .slide_box .in_inner .btn{ gap: 10px; } .main_visual .main_slider .slide_box .in_inner .btn a{ font-size: 14px; width: 120px; gap: 8px; } .main_visual .scroll p{ font-size: 14px; } .main_visual .scroll svg{ width: 24px; height: auto; } #main .con01 svg{ width: 70px; margin-bottom: 12px; } #main .con01 strong{ font-size: 18px; } .m_tit strong{ font-size: 20px; } #main .con03 p{ font-size: 13px; margin-top: 12px; word-break: keep-all; } #main .con03 p span{ display: none; } #main .con03 .st2{ font-size: 16px; line-height: 1.5em; } #main .con03 .txt .dots{ margin-top: 4px; } #main .con03 .txt{ margin-top: 30px; } .con_w{ padding: 50px 0; } #main .con05 .das{ margin-bottom: 40px; } #main .con05 .das strong{ font-size: 16px; margin-bottom: 8px; } #main .con05 .das p{ text-align: center; word-break: keep-all; font-size: 13px; font-weight: 400; } #main .con05 .wrap dl dt{ font-size: 16px; margin-bottom: 8px; } #main .con05 .wrap dl dd{ font-size: 13px; line-height: 1.5em; } #main .con05 .wrap{ gap: 30px 20px; background-size: 200px auto; } #main .con05 .wrap dl{ width: calc(50% - 10px); } #main .con06 .m_tit{ gap: 4px; margin-bottom: 20px; } .m_tit p{ font-size: 13px; } #main .con06 .wrap{ margin-bottom: 30px; } #main .con06 .wrap p{ font-size: 12px; line-height: 1.5em; padding: 12px 0; padding-left: 20px; } #main .con07 ul li{ width: calc(50% - 10px); } #main .con07 ul li .txt strong{ font-size: 13px; } #footer{ padding-top: 30px; padding-bottom: 40px; } #footer svg{ width: 100px; height: auto; } #footer address{ font-size: 12px; margin-top: 10px; } .main_visual .main_slider .slide_box .in_inner > strong{ font-size: 18px; } #main .con01 strong{ letter-spacing: -1px; } }