/*main*/ #main{ clear:both; width:100%; overflow:hidden; position:relative; background:#fff;} #main .gallery{ width:1920px; height:645px; position:relative; left:50%; top:0; margin-left:-960px;} #main .gallery ul{ width:5760px; overflow:hidden; position:relative; left:0; top:0;} #main .gallery li{ float:left; } #main .rudder{ width:100%; height:645px; position:absolute; left:0; top:0;} #main .rudder span{ display:block; width:40px; height:78px; cursor:pointer; position:absolute; top:50%; margin-top:-39px;} #main .rudder span.prev{ background:url(../images/arrow_prev.png) 0 0 no-repeat; left:60px;} #main .rudder span.next{ background:url(../images/arrow_next.png) 0 0 no-repeat; right:60px;} #main .dock{ width:100px; height:10px; position:absolute; left:50%; bottom:30px; margin-left:-50px;} #main .dock span{ display:block; width:10px; height:10px; float:left; cursor:pointer; } #main .dock span.mbutton{ background:url(../images/mainbtn.png) 0 0 no-repeat; margin-right:7px;} #main .dock span.btn1{} #main .dock span.btn2{} #main .dock span.btn3{} #main .dock span.ps{ background:url(../images/mainpause.png) 0 0 no-repeat; margin-left:20px;} /*contents*/ /*con1*/ #contents{ clear:both;} #contents .con_1{ width:100%; background:url(../images/notice_deco.png) top right no-repeat #d3e2d6;} #contents .con_1 .notice{width:1100px; height:80px; margin:0 auto; overflow:hidden; position:relative;} #contents .con_1 .notice .notice_title{ line-height:80px; font-size:18px; font-weight:700; } #contents .con_1 .notice .notice_title span{ margin:0 40px;} #contents .con_1 .notice .lt{ position:absolute; top:0px; left:15%;} #contents .con_1 .notice .lt li{ height:60px; padding:10px 0;} #contents .con_1 .notice .lt li a{ line-height:60px; font-size:18px; text-overflow:clip; -o-text-overflow:clip; } #contents .con_1 .notice a.btn_plus{ display:block; width:35px; height:35px; background:url(../images/btn_more.png) 0 0 no-repeat; text-indent:-1000px; color:#fff; font-size:1px; overflow:hidden; position:absolute; top:22.5px; right:0;} /*con2*/ #contents .con_2{ clear:both; width:100%; } #contents .con_2 .beverage{ width:1100px; margin:115px auto; text-align:center; } #contents .con_2 .beverage .beverage_title{ font-family:'Rajdhani', sans-serif; font-size:32px; font-weight:500; margin-bottom:50px;} #contents .con_2 .beverage ul{ overflow:hidden;} #contents .con_2 .beverage li{ float:left; width:240px; margin-right:47px;} #contents .con_2 .beverage li:nth-child(3){ margin-right:46px;} #contents .con_2 .beverage li:last-child{ margin-right:0px;} #contents .con_2 .beverage li a{ display:block; width:240px; position:relative;} #contents .con_2 .beverage li a .b_img{ display:block; width:240px; height:317px; text-indent:-1000px; font-size:1px; color:#fff; overflow:hidden; transition:all 0.7s ease-in-out; -webkit-transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; -ms-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;} #contents .con_2 .beverage li.beverage1 a .beverage_img1{ background:url(../images/beverage1.png) bottom left no-repeat; } #contents .con_2 .beverage li.beverage2 a .beverage_img1{ background:url(../images/beverage2.png) bottom left no-repeat; } #contents .con_2 .beverage li.beverage3 a .beverage_img1{ background:url(../images/beverage3.png) bottom left no-repeat; } #contents .con_2 .beverage li.beverage4 a .beverage_img1{ background:url(../images/beverage4.png) bottom left no-repeat; } #contents .con_2 .beverage li a .beverage_img2{ opacity:0; position:absolute; top:0; left:0;} #contents .con_2 .beverage li.beverage1 a .beverage_img2{ background:url(../images/beverage1_on.png) bottom left no-repeat; } #contents .con_2 .beverage li.beverage2 a .beverage_img2{ background:url(../images/beverage2_on.png) bottom left no-repeat; } #contents .con_2 .beverage li.beverage3 a .beverage_img2{ background:url(../images/beverage3_on.png) bottom left no-repeat; } #contents .con_2 .beverage li.beverage4 a .beverage_img2{ background:url(../images/beverage4_on.png) bottom left no-repeat; } #contents .con_2 .beverage li a:hover .beverage_img2{ opacity:1; } #contents .con_2 .beverage li a .beverage_btn{ display:block; width:100%; font-family:'Rajdhani', sans-serif; font-weight:600; color:#14beb9; line-height:35px; border:2px solid #14beb9; box-sizing:border-box; margin:15px 0;} /*con3*/ #contents .con_3{ clear:both; width:100%; padding:100px 0; background:url(../images/space_bg.png) right bottom no-repeat #f2f6f6;} #contents .con_3 .space{ width:1100px; height:275px; margin:0 auto; position:relative; } #contents .con_3 .space .space_title{ font-family:'Rajdhani', sans-serif; font-size:32px; font-weight:500; line-height:36px;} #contents .con_3 .space .space_title span{ font-size:22px; } #contents .con_3 .space p{ font-size:16px; margin-top:10px;} #contents .con_3 .space p strong{color:#14beb9;} #contents .con_3 .space a{ display:block; width:150px; line-height:50px; text-align:center; font-weight:700; font-size:16px; border:2px solid #383838; box-sizing:border-box; position:absolute; bottom:0; left:0;} /*con4*/ #contents .con_4{ clear:both; width:100%; padding:100px 0; background:#f7f7eb; position:relative;} #contents .con_4 .story_bg{ width:650px; height:480px; background:url(../images/story_bg.png) 0 0 no-repeat; position:absolute; top:0; left:10%; z-index:10;} #contents .con_4 .story{ width:1100px; height:210px; margin:0 auto; text-align:right; position:relative;} #contents .con_4 .story .story_title{ font-family:'Rajdhani', sans-serif; font-size:32px; font-weight:500; line-height:36px;} #contents .con_4 .story .story_title span{ font-size:22px; } #contents .con_4 .story p{ font-size:16px; margin-top:10px; } #contents .con_4 .story p strong{ color:#14beb9;} #contents .con_4 .story a{ display:block; width:150px; line-height:50px; text-align:center; font-weight:700; font-size:16px; border:2px solid #383838; box-sizing:border-box; position:absolute; bottom:0; right:0;} /*con5*/ #contents .con_5{ clear:both; width:100%; padding:100px 0 145px;} #contents .con_5 .information{ width:1100px; margin:0 auto;} #contents .con_5 .information h3{ color:#004b37; font-size:26px; font-weight:normal; text-align:center; margin-bottom:50px; padding-top:40px; background:url(../images/information_deco.png) top center no-repeat;} #contents .con_5 .information h3 span{ font-family:'Rajdhani', sans-serif; font-size:32px; font-weight:500; } #contents .con_5 .information ul{ overflow:hidden; } #contents .con_5 .information li{ width:360px; float:left; margin-right:10px; border:1px solid #d3e2d6; box-sizing:border-box; transition:all 0.3s ease; } #contents .con_5 .information li:hover{ background:#1d8667;} #contents .con_5 .information li:last-child{ margin-right:0px;} #contents .con_5 .information li a.info_img{ display:block; min-width:358px; max-width:100%; max-height:300px; width:100%; height:auto; overflow: hidden; position: relative;} #contents .con_5 .information li a.info_img img{ display: block; min-height: 100%; max-width: 358px; height:300px; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden;} #contents .con_5 .information li:hover a.info_img img{ -webkit-transform: scale3d(1.1,1.1,1); transform: scale3d(1.1,1.1,1); } #contents .con_5 .information li dl{ text-align:center; padding:30px 0;} #contents .con_5 .information li dt{ margin-bottom:20px;} #contents .con_5 .information li dt a{ font-family:'Rajdhani', sans-serif; font-size:32px; font-weight:500; transition:all 0.3s ease;} #contents .con_5 .information li:hover dt a{ color:#fff; } #contents .con_5 .information li dd a{ display:block; font-size:16px; line-height:26px; margin-bottom:25px; transition:all 0.3s ease;} #contents .con_5 .information li:hover dd a{ color:#d3e2d6; } #contents .con_5 .information li dd span{ display:block; background:url(../images/line.jpg) center top no-repeat; padding-top:15px; color:#004b37; font-weight:700;} /*----------------------------------------------------------*/ /* 일반 pc */ @media screen and (max-width:1280px) { /*contents*/ /*con1*/ #contents .con_1{ width:90%; padding:0 5%; } #contents .con_1 .notice{width:100%;} /*con2*/ #contents .con_2{ clear:both; width:90%; padding:0 5%;} #contents .con_2 .beverage{ width:100%; margin:75px auto;} #contents .con_2 .beverage .beverage_title{ margin-bottom:30px; } #contents .con_2 .beverage li{ width:23.5%; margin-right:2%;} #contents .con_2 .beverage li:nth-child(3){ margin-right:2% } #contents .con_2 .beverage li a{ width:100%; } #contents .con_2 .beverage li a .b_img{ width:100%; } #contents .con_2 .beverage li.beverage1 a .beverage_img1{ background:url(../images/beverage1.png) bottom center no-repeat; } #contents .con_2 .beverage li.beverage2 a .beverage_img1{ background:url(../images/beverage2.png) bottom center no-repeat; } #contents .con_2 .beverage li.beverage3 a .beverage_img1{ background:url(../images/beverage3.png) bottom center no-repeat; } #contents .con_2 .beverage li.beverage4 a .beverage_img1{ background:url(../images/beverage4.png) bottom center no-repeat; } #contents .con_2 .beverage li a .beverage_img2{ opacity:0; position:absolute; top:0; left:0;} #contents .con_2 .beverage li.beverage1 a .beverage_img2{ background:url(../images/beverage1_on.png) bottom center no-repeat; } #contents .con_2 .beverage li.beverage2 a .beverage_img2{ background:url(../images/beverage2_on.png) bottom center no-repeat; } #contents .con_2 .beverage li.beverage3 a .beverage_img2{ background:url(../images/beverage3_on.png) bottom center no-repeat; } #contents .con_2 .beverage li.beverage4 a .beverage_img2{ background:url(../images/beverage4_on.png) bottom center no-repeat; } /*con3*/ #contents .con_3{ width:90%; padding:50px 5%; background:url(../images/space_bg.png) 150% bottom no-repeat #f2f6f6; } #contents .con_3 .space{ width:100%; } /*con4*/ #contents .con_4{ width:90%; padding:50px 5%; } #contents .con_4 .story_bg{ background:url(../images/story_bg.png) 0 0 no-repeat; position:absolute; top:0; left:5%; z-index:10; background-size:75%; -webkit-background-size:75%; -moz-background-size:75%; } #contents .con_4 .story{ width:100%; } /*con5*/ #contents .con_5{ width:90%; padding:100px 5% 145px;} #contents .con_5 .information{ width:100%;} #contents .con_5 .information li{ width:31.5%; margin-right:2.75%;} #contents .con_5 .information li a.info_img{ min-width:0px;} /* #contents .con_5{ clear:both; width:100%; padding:100px 0 145px;} #contents .con_5 .information{ width:1100px; margin:0 auto;} #contents .con_5 .information h3{ color:#004b37; font-size:26px; font-weight:normal; text-align:center; margin-bottom:50px; padding-top:40px; background:url(../images/information_deco.png) top center no-repeat;} #contents .con_5 .information h3 span{ font-family:'Rajdhani', sans-serif; font-size:32px; font-weight:500; } #contents .con_5 .information ul{ overflow:hidden; } #contents .con_5 .information li{ width:360px; float:left; margin-right:10px; border:1px solid #d3e2d6; box-sizing:border-box; transition:all 0.3s ease; } #contents .con_5 .information li:hover{ background:#1d8667;} #contents .con_5 .information li:last-child{ margin-right:0px;} #contents .con_5 .information li a.info_img{ display:block; min-width:358px; max-width:100%; max-height:300px; width:100%; height:auto; overflow: hidden; position: relative;} #contents .con_5 .information li a.info_img img{ display: block; min-height: 100%; max-width: 358px; height:300px; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden;} #contents .con_5 .information li:hover a.info_img img{ -webkit-transform: scale3d(1.1,1.1,1); transform: scale3d(1.1,1.1,1); } #contents .con_5 .information li dl{ text-align:center; padding:30px 0;} #contents .con_5 .information li dt{ margin-bottom:20px;} #contents .con_5 .information li dt a{ font-family:'Rajdhani', sans-serif; font-size:32px; font-weight:500; transition:all 0.3s ease;} #contents .con_5 .information li:hover dt a{ color:#fff; } #contents .con_5 .information li dd a{ display:block; font-size:16px; line-height:26px; margin-bottom:25px; transition:all 0.3s ease;} #contents .con_5 .information li:hover dd a{ color:#d3e2d6; } #contents .con_5 .information li dd span{ display:block; background:url(../images/line.jpg) center top no-repeat; padding-top:15px; color:#004b37; font-weight:700;} } /* 테블릿 */ @media screen and (max-width:1024px) { } /* 소형 테블릿 */ @media screen and (max-width:768px) { } /* 모바일 */ @media screen and (max-width:640px) { } /* 최소 사이즈 처리 */ @media screen and (max-width:480px) { #wrap { min-width:320px; } }