/* ===== MAIN - VISUAL ===== */ .main-visual {position:relative;margin:0 auto;height:100vh;} .main-visual .visual-slider {overflow:hidden;position:absolute;left:50%;top:50%;width:100%;height:100%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%); } .main-visual .visual-slider .swiper-slide {overflow:hidden;position:relative;height:100%;} .main-visual .visual-slider .swiper-slide .vs-bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center bottom;background-size:cover;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1); transition-duration:3s;} .main-visual .visual-slider .swiper-slide .vs-bg1{ background-image:url(../img/main/Visual_banner1.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg2{ background-image:url(../img/main/Visual_banner2.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg3{ background-image:url(../img/main/Visual_banner3.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg4{ background-image:url(../img/main/Visual_banner2.jpg);} .main-visual .visual-slider .swiper-slide .vs-txt {display:flex; flex-direction:column; justify-content:center; position:relative; margin:0 auto; max-width:150em; width:74%; height:100%; z-index:1; color:#fff;} .main-visual .visual-slider .swiper-slide .vs-txt h1, .main-visual .visual-slider .swiper-slide .vs-txt h2, .main-visual .visual-slider .swiper-slide .vs-txt p {opacity:0;;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);} .main-visual .visual-slider .swiper-slide .vs-txt h1{font-size:85px;font-weight:700; } .main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size:60px; margin:20px 0 30px 0;} .main-visual .visual-slider .swiper-slide .vs-txt p {font-size:25px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:30px;color:#fff;} .main-visual .visual-slider .swiper-button-prev { left:330px; } .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{position:absolute; background:none; display:flex;align-items: center;justify-content: center;width:70px; height:70px; top:auto; border-radius:50%; border:1px solid #fff; bottom:300px; z-index:10; } .main-visual .visual-slider .swiper-button-prev:after { display:none;} .main-visual .visual-slider .swiper-button-next { left:420px;} .main-visual .visual-slider .swiper-button-next:after { display:none;} .main-visual .visual-slider .swiper-pagination { position:absolute; right:auto; top:50%; margin-top:-250px; left:310px; font-size:20px;display:flex;align-items: center;justify-content: center;height:70px; z-index:10; width:100px; color:#ffffff; letter-spacing:0.333em;} .main-visual .visual-slider .swiper-pagination span { font-style:normal;} .main-visual .visual-slider .swiper-pagination span {font-style:normal;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg {-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:transform 1.4s;-moz-transition:transform 1.4s;-ms-transition:transform 1.4s;-o-transition:transform 1.4s;transition:transform 1.4s;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h1, .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h2 {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt p {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-ms-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s;} .hide {position: absolute;left: -9999%;font-size: 0;line-height: 0;text-indent: -9999px;} @media all and ( max-width: 1920px ){ .main-visual .visual-slider .swiper-slide .vs-txt h1{font-size:75px;} .main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size:50px;} .main-visual .visual-slider .swiper-slide .vs-txt p {font-size:20px;} .main-visual .visual-slider .swiper-pagination { margin-top:-230px; left:230px; font-size:17px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{width:50px; height:50px;bottom:200px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:25px;} .main-visual .visual-slider .swiper-button-prev { left:250px; } .main-visual .visual-slider .swiper-button-next { left:320px;} } @media all and ( max-width: 1280px ){ .main-visual .visual-slider .swiper-slide .vs-txt h1{font-size:60px;} } @media all and ( max-width: 1440px ){ .main-visual {height:650px;} .main-visual .visual-slider .swiper-slide .vs-txt{ margin-top:-80px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:40px;} .main-visual .visual-slider .swiper-slide .vs-txt .sTit{ font-size:25px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ width:57px; height:57px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:57px; font-size:25px;} .main-visual .visual-slider .swiper-button-prev{ margin-top:-100px;} .main-visual .visual-slider .swiper-pagination{ width:57px; font-size:15px;} } @media all and ( max-width: 1280px ){ .main-visual .visual-slider .swiper-slide .vs-txt{ max-width:auto; width:auto; margin-left:10%; margin-top:0;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ bottom:100px; width:50px; height:50px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-pagination{ left:10%;} .main-visual .visual-slider .swiper-button-next{ left:calc(10% + 60px)} .main-visual .visual-slider .swiper-pagination{ margin-top:-200px;} } @media all and ( max-width: 1024px ){ .main-visual {height:550px;} .main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:50px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:25px; margin:10px 0 15px 0;} .main-visual .visual-slider .swiper-slide .vs-txt p{ font-size:17px;} .main-visual .visual-slider .swiper-pagination{ margin-top:-150px;} } @media all and ( max-width: 800px ){ } @media all and ( max-width: 640px ){ .main-visual {height:450px;} .main-visual .visual-slider .swiper-slide .vs-txt p{ display:none;} .main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:40px; line-height:40px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:20px;} .main-visual .visual-slider .swiper-pagination{ margin-top:-130px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ bottom:50px; width:40px; height:40px;} .main-visual .visual-slider .swiper-button-next{ left:calc(10% + 50px)} } .dl{ display:flex;} .dl dt{flex-shrink: 0;} .dl dd{flex-grow: 1;} .df{ display:flex; flex-wrap: wrap; } #sec01 h1, #sec02 h1, #sec03 h1, #sec04 h1{ font-size:45px; color:#333; font-weight:500; letter-spacing:-1px;} #sec02 h2, #sec03 h2{ color:#1b77cd; font-size:35px; margin-bottom:10px;} /**sec01**/ #sec01 {display: flex;} #sec01 .s01_left {width: calc(100% / 2); background-image: url(../img/main/s01_1.jpg) no-repeat; flex-basis: 50%; flex-shrink: 0;} #sec01 .s01_left img {width: 100%;} #sec01 .s01_right {width: calc(100% / 2); display: flex; align-items: center; justify-content: center; background-color: #f6f6f6;} #sec01 .s01_right h1 {font-size: 64px; font-weight: 800; color: #222; margin: 10px 0 65px 0;} #sec01 .s01_right h5 {font-size: 24px; font-weight: 800; color: #c99900;} #sec01 .s01_right p {font-size: 22px; color: #666; margin-bottom: 30px; font-weight: 300;} #sec01 .s01_right a {background-color: #c99900; padding: 10px 75px; border-radius: 25px; color: #fff; display: inline-block; margin-top: 15%;} #sec01 .s01_right a p{ display: inline; color: #fff; font-weight: 500;} #sec01 .s01_right ul{display: flex; justify-content: space-between;} #sec01 .s01_right ul li{ text-align: center; border: 1px solid #c99900; width: 145px; height: 145px; display: flex; align-items: center; justify-content: center; border-radius: 100%; color: #c99900; background-color: #fff;} /**sec02**/ #sec02 .s02{margin:180px 0; display: flex;} #sec02 .s02_left {width: calc(100% / 2);} #sec02 .s02_left h1 {font-size: 64px; font-weight: 800; color: #222; margin: 10px 0 65px 0;} #sec02 .s02_left h5 {font-size: 24px; font-weight: 800; color: #c99900;} #sec02 .s02_left p {font-size: 22px; color: #666; margin-bottom: 30px; font-weight: 300;} #sec02 .s02_left a {background-color: #c99900; padding: 10px 75px; border-radius: 25px; color: #fff; display: inline-block;} #sec02 .s02_left a p{ display: inline; color: #fff; font-weight: 500;} #sec02 .s02_right {width: calc(100% / 2);} #sec02 .s02_box{margin-top: 70px;} .box-wrap {width: 90%; height: 100%;display: flex; justify-content: center; align-items: center;} .hoverbox {position: relative; width:100%; height: auto; border: 2px solid #ddd; transition: all 0.2s ease-out; } .hoverbox img { width: 100%;} .hoverbox .hovertext { color: #fff; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.7); width: 100%; padding: 15px; box-sizing: border-box; opacity: 0; transition: opacity 0.35s ease-in-out; height: 100%; text-align: center; padding: 75px;} .hoverbox:hover { transform: translate(0, -20px);} .hoverbox:hover .hovertext { opacity: 1;} .hoverbox .hovertext h3 {font-size: 28px; padding-bottom: 0.4em; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; color: #fec81e; margin-top: 40px;} .hoverbox .hovertext h4 {color: #fec81e; font-size: 24px; margin-bottom: 36px;} #sec02 .hoverbox .hovertext p {font-size: 20px; color: #fff; margin-bottom: 15px;} /**sec03**/ #sec03{ position:relative; display:flex; background: #faf9f9; padding: 130px 0;} /*#sec03:before{content:''; position:absolute; left:-170px; top:-150px; width:850px; height:850px;background:url(../img/main/sec-03-001.png) no-repeat; background-size:auto 100%; z-index:-1 }*/ #sec03 .area{ float:left; } #sec03 .s01{ width:47%; margin-right:100px;} #sec03 .s02{ width:calc((100% - 47%) - 100px);} #sec03 .s01 .fs40 span{ display:inline-block; margin-right:15px;} #sec03 .s02 ul{ display:flex;flex-wrap: wrap;} #sec03 .s02 li{ position:relative;display: table;width:calc((100% / 2) - 12px); border:1px #ddd solid; margin-right:20px; margin-bottom:20px; border-radius: 4px;} #sec03 .s02 .thum{background-repeat: no-repeat; display:inline-block;width:50px;height:50px; position:absolute; right:50px; top:40px;background-position: center center; background-size: 100%; display:block;} #sec03 .s02 a >div, #sec03 .s02 dl {margin: 45px;} #sec03 .s02 a i.n1{background-image:url(../img/main/s03_icon1.png);} #sec03 .s02 a i.n2{background-image:url(../img/main/s03_icon2.png);} #sec03 .s02 a i.n3{background-image:url(../img/main/s03_icon3.png);} #sec03 .s02 a i.n4{background-image:url(../img/main/s03_icon4.png);} #sec03 .s02 i.n5{background-image:url(../img/main/s03_icon5.png);} #sec03 .s02 a:hover i.n1, #sec03 .s02 a:focus i.n1, #sec03 .s02 a:active i.n1{background-image:url(../img/main/s03_icon1_on.png);} #sec03 .s02 a:hover i.n2, #sec03 .s02 a:focus i.n2, #sec03 .s02 a:active i.n2{background-image:url(../img/main/s03_icon2_on.png);} #sec03 .s02 a:hover i.n3, #sec03 .s02 a:focus i.n3, #sec03 .s02 a:active i.n3{background-image:url(../img/main/s03_icon3_on.png);} #sec03 .s02 a:hover i.n4, #sec03 .s02 a:focus i.n4, #sec03 .s02 a:active i.n4{background-image:url(../img/main/s03_icon4_on.png);} #sec03 .s02 li:nth-child(2n+2){ margin-right:0;} #sec03 .s02 li:nth-child(5){width:100%; margin-right:0;} #sec03 .s02 dl{ position:relative;} #sec03 .s02 dl dt{ position:absolute; top:0; left:0;} #sec03 .s02 dl dd{ margin-left:150px; color:#777;} #sec03 .s02 a { display:table; width:100%; height:100%;transition:all .3s linear;} #sec03 .s02 a:hover{background:#c99900; color:#fff; border-color:#c99900} #sec03 .s02 dl dd span{ display:inline-block;} #sec03 .s02 dl dd a{display:inline-block; border:1px #777 solid; padding:10px 35px; border:1px #ddd solid; border-radius:5px; display:inline-block; margin-bottom:20px; width:auto;} #sec03 .s02 dl dd a i{ margin-left:15px;} #sec03 .s02 dl dd a:hover{ } #sec03 .s02 dl dd p {display: flex;} #sec03 .s02 dl dd p strong {flex-basis: 17%; flex-shrink: 0;} #sec03 .s02 dl dd p span {flex-grow: 1;} /**sec04**/ #sec04{background:#5a799c url(../img/main/sec04-01.jpg) no-repeat 100% 0; background-size:auto 100%; padding:170px 0; margin-top:170px; color:#fff;} #sec04 h1{ color:#fff;} #sec04 ul{margin-top:50px;} #sec04 ul li:nth-child(1){ position:relative; padding-right:70px; margin-right:70px;} #sec04 ul li:nth-child(1):after{ content:''; position:absolute; right:0; top:0;width:1px; height:100%;border-right:1px solid rgb(255,255,255,0.2)} #sec04 ul li:nth-child(1):before, #sec04 ul li:nth-child(2):before{ content:''; display:inline-block; width:70px; height:70px;background-size:cover; background-repeat:no-repeat;} #sec04 ul li:nth-child(1):before{ background-image:url(../img/main/sec04-02.png)} #sec04 ul li:nth-child(2):before{ background-image:url(../img/main/sec04-03.png)} #sec04 ul li strong{ display:block; font-size:27px; margin:15px 0 30px 0;} #sec04 ul li{ font-size:19px;} #sec04 ul li a{ display:inline-block; padding:13px 25px; border-radius:10px; border:1px solid rgb(255,255,255,0.3); color:#fff; margin-top:30px;} #sec04 ul li a i{ margin-left:50px; opacity:0.6} @media all and ( max-width: 1920px ){ #sec01 .s01_right ul li{font-size: 20px;} #sec01 .s01_right h1, #sec02 .s02_left h1 {font-size: 54px;margin: 10px 0 30px 0;} #sec01 .s01_right p, #sec02 .s02_left p {font-size: 20px;} #sec02 .hoverbox .hovertext p {font-size: 18px;font-weight: 200;} .hoverbox .hovertext h3 {margin-top: 0;} #sec03 .s02 a >div, #sec03 .s02 dl { margin: 32px;} #sec03 .s02 .thum {width: 45px; height: 45px; top: 20px;} } @media all and ( max-width: 1680px ){ .mainContents{ overflow:hidden;} .contentbox{ margin-left:0;} #sec01 .s01_right h1, #sec02 .s02_left h1 {font-size: 46px;} } @media all and ( max-width: 1280px ){ #sec01 .s01_right h1, #sec02 .s02_left h1 { font-size: 38px;} #sec01 .s01_right ul li { width: 130px; height: 130px;} #sec01 .s01_right a {margin-top: 7%;} #sec02 .hoverbox .hovertext p {margin-bottom: 10px;} .hoverbox .hovertext {padding: 55px;} .hoverbox .hovertext h4 {margin-bottom: 15px;} } @media all and ( max-width: 1152px ){ } @media all and ( max-width: 1024px ){ } @media all and ( max-width: 960px ){ #sec01 .s01_left {display: none;} #sec01 .s01_right {width: 100%; padding: 50px;} #sec01 .s01_right h1, #sec02 .s02_left h1 { font-size: 32px;} #sec02 .s02 {margin: 100px 0;} #sec02 .hoverbox .hovertext p {font-size: 15px;} .hoverbox .hovertext { padding: 20px; } .hoverbox .hovertext h3 {font-size: 22px; margin-top: 20px;} .hoverbox .hovertext h4 {font-size: 20px; margin-bottom: 5px;} #sec03 {display: block; padding: 80px 0;} #sec03 .s01, #sec03 .s02 {width: 100%;} #sec03 .area {float: none; margin-top: 20px;} } @media all and ( max-width: 640px ){ #sec01 .s01_right h1, #sec02 .s02_left h1 {font-size: 30px; margin: 10px 0;} #sec01 .s01_right h5, #sec02 .s02_left h5 {font-size: 18px;} #sec01 .s01_right p, #sec02 .s02_left p { font-size: 15px; } #sec01 .s01_right ul li {width: 100px; height: 100px; font-size: 16px; } #sec02 .s02 { margin: 60px 0; display: block; text-align: center;} #sec02 .s02_left, #sec02 .s02_right { width: 100%;} #sec02 .s02_box { margin-top: 30px; display: flex;justify-content: center;} .hoverbox {width: 80%;} .hoverbox .hovertext h3 {margin-top: 40px;} } @media all and ( max-width: 500px ){ .hoverbox .hovertext h3 { margin-top: 20px; font-size: 19px;} .hoverbox { width: 90%; } .notice dl dd { margin-left: 80px;} #sec01 .s01_right { padding: 50px 20px; } .box-wrap {width: 100%;} #sec03 .s02 .thum { width: 40px;height: 40px; right: 30px;} #sec03 .s02 dl dd {margin-left: 100px;} #sec03 {padding: 40px 0;} #sec03 .s02 a >div, #sec03 .s02 dl {margin: 28px;} .notice .noticeT p {font-size: 30px;} } /*****영어******/ #engMainContent #sec01 .s01_right ul li {width: 200px; height: 200px;} #engMainContent .hoverbox .hovertext h3{margin-top: 0;} #engMainContent .main-visual .visual-slider .swiper-slide .vs-bg1{ background-image:url(../img/main/Visual_banner1_en.jpg);} @media all and ( max-width: 1920px ){ #engMainContent .hoverbox .hovertext { padding: 48px;} #engMainContent .hoverbox .hovertext h3{ font-size: 22px;} #engMainContent .hoverbox .hovertext h4{ font-size: 20px;} } @media all and ( max-width: 700px ){ #engMainContent #sec01 .s01_right ul li {width: 150px; height: 150px;} }