@charset "utf-8"; /*//////////////*/ /*/ fruit- /*/ /*////////////*/ #wrap{width:100%; } #wrap #header { position:relative; z-index:3; top:0; left:0; width:1100px; height:130px; display:block; margin:0 auto; margin-top:20px; } #wrap #header .header-wrap { position:relative; } #wrap #header .logo-wrap { display:block; text-align:center; } #wrap #header .logo-wrap2 { display:none; text-align:center; } #wrap #header .logo-wrap img { width:100px;} #wrap #header .mainmenu-container { display:block; width:1100px; height:50px; margin-top:15px; } #wrap #header .mainmenu-container .mainmenu-wrap { width:100%;} #wrap #header .mainmenu-container .mainmenu-wrap nav { text-align:center; width:100%; } #wrap #header .mainmenu-container .mainmenu-wrap nav .mainmenu { text-align:center; width:555px; border-top:2px solid #fff; border-bottom:2px solid #fff; display:inline-block; } #wrap #header .mainmenu-container .mainmenu-wrap nav .mainmenu li {text-align:left; display:inline-block; padding:12px 10px; } #wrap #header .mainmenu-container .mainmenu-wrap nav .mainmenu li a { font-family:Nanum Myeongjo; padding-bottom:4px; border-bottom:1px solid transparent; display:inline-block; font-size:14px; color:#fff; font-weight:600; } #wrap #header .mainmenu-container .mainmenu-wrap nav .mainmenu li a:hover { color:#222; border-bottom:1px solid #222;} #wrap #header .mainmenu-container .mainmenu-wrap nav .mainmenu i { display:inline-block; width:1px; height:10px; background:#fff; } #wrap #header .appBar a { display:inline-block; } #wrap #header .appBar a > span { position:relative; width:20px; height:14px; display:inline-block; } #wrap #header .appBar a > span i { position:absolute; left:0; display:block; width:100%; height:1px; background:#fff; transition:all 0.6s; } #wrap #header .appBar a > span i.appBarLine0 { top:0%; } #wrap #header .appBar a.addBarBtn > span i.appBarLine0 { top:50%;margin-top:-0.5px; transform:rotate(135deg); } #wrap #header .appBar a > span i.appBarLine1 { top:50%; margin-top:-0.5px; left:0; width:80%; } #wrap #header .appBar a.addBarBtn > span i.appBarLine1 { left:-1000px; } #wrap #header .appBar a > span i.appBarLine2 { bottom:0%; } #wrap #header .appBar a.addBarBtn > span i.appBarLine2 { bottom:50%; margin-bottom:-0.5px; transform:rotate(-135deg); } #wrap #header .appBar a > span span {display:inline-block; margin-left:5px; margin-top:-3px; font-size:16px; font-size:500; color:#fff; } #wrap #header.addMenu { position:fixed; z-index:3;margin-top:0px; top:0px; left:0; width:100%; height:100px; display:block; box-shadow:0px 3px 12px rgba(0,0,0,.25); } #wrap #header.addMenu .header-wrap { position:fixed; z-index:3;margin-top:0px; top:0px; left:0; width:100%; height:100px; display:block; background:#fff; } #wrap #header.addMenu .logo-wrap { display:none; text-align:center; } #wrap #header.addMenu .logo-wrap2 {position:absolute;display:block; top:5px; left:50%; margin-left:-55px;width:1500px;height:100px display:block; text-align:center; } #wrap #header.addMenu .logo-wrap2 img { display:block; position:absolute;top:10px; left:0;height:65px;} #wrap #header .appBar { position:absolute; top:20px; left:0; display:none; width:200px; overflow:hidden;} #wrap #header.addMenu .appBar {display:block; position:absolute; z-index:3; margin-left:260px; left:0; top:16px;overflow:hidden; width:200px; padding:21.5px 0; } #wrap #header.addMenu .appBar a { display:inline-block; } #wrap #header.addMenu .appBar a > span { position:relative; width:20px; height:14px; display:inline-block; } #wrap #header.addMenu .appBar a > span i { position:absolute; left:0; display:block; width:100%; height:1px; background:#222; transition:all .3s; } #wrap #header.addMenu .appBar a > span i.appBarLine0 { top:0%; } #wrap #header.addMenu .appBar a.addBarBtn > span i.appBarLine0 { top:50%;margin-top:-0.5px; transform:rotate(135deg); } #wrap #header.addMenu .appBar a > span i.appBarLine1 { top:50%; margin-top:-0.5px; left:0; width:80%; } #wrap #header.addMenu .appBar a.addBarBtn > span i.appBarLine1 { left:-1000px; } #wrap #header.addMenu .appBar a > span i.appBarLine2 { bottom:0%; } #wrap #header.addMenu .appBar a.addBarBtn > span i.appBarLine2 { bottom:50%; margin-bottom:-0.5px; transform:rotate(-135deg); } #wrap #header.addMenu .appBar a > span span {display:inline-block; margin-left:5px; margin-top:-3px; font-size:16px; font-size:500; color:#222; } #wrap #header .addMainmenu {display:none; position:absolute; top:20px; width:100%; height:60px; background:#382d2c; box-shadow:5px 13px 10px rgba(0,0,0,.3); } #wrap #header .addMainmenu .mainmenu-wrap { width:1400px; height:60px; margin:0 auto; } #wrap #header .addMainmenu .mainmenu-wrap nav { display:block; text-align:center; width:100%; } #wrap #header .addMainmenu .mainmenu-wrap nav .mainmenu { text-align:center; width:100%; display:inline-block; } #wrap #header .addMainmenu .mainmenu-wrap nav .mainmenu li {text-align:center; display:inline-block; padding:23px 15px; } #wrap #header .addMainmenu .mainmenu-wrap nav .mainmenu li a { font-family:Nanum Myeongjo; display:inline-block; font-size:14px; color:#fff; font-weight:600; } #wrap #header .addMainmenu .mainmenu-wrap nav .mainmenu li a:hover { color:#7a5249; border-bottom:1px solid #7a5249; } #wrap #header .addMainmenu .mainmenu-wrap nav .mainmenu i { display:inline-block; width:1px; height:10px; background:#fff; } #wrap #main { position:relative; z-index:1; } #wrap #section1 { z-index:1; position:fixed; top:0; left:0; width:100%; } #wrap #section1 .video-wrap{position:absolute; top:-300px; z-index:1; width:100%; height:100%;} #wrap #section1 .video-wrap video{width:100%;} #wrap #section1 > div {position:absolute; z-index:2;width:100%; background:url(../img/sec1Bg.png) no-repeat 100%; background-size:cover;display:block; height:100%; } #wrap #section1 > div .title {position:absolute; bottom:28%; right:10%; } #wrap #section1 > div .title img { width:auto;} #wrap #section1 > div .sub-title {position:absolute; bottom:25%; right:5%;} #wrap #section1 > div .sub-title img {width:auto; } #section1 .scrollBtn-wrap {position:absolute;z-index:3; bottom:10%; left:50%; margin-left:-50px; width:100px; } #section1 .scrollBtn-wrap a { display:block; text-align:center;width:100px; } #section1 .scrollBtn-wrap a h2 { font-family:Roboto; font-size:15xp; display:inline-block; color:#fff; } #section1 .scrollBtn-wrap a span { position:relative; top:-3px; text-align:center; display:block; width:100px; transition:all .6s; } #section1 .scrollBtn-wrap a:hover span { top:5px; } #section1 .scrollBtn-wrap a span i:first-child {position:absolute; top:0; left:50%; margin-left:-20px; width:30px; height:30px; display:inline-block; transform:rotate(-135deg); border-top:1px solid #fff;border-left:1px solid #fff; } .scrollBtn-wrap {position:absolute;z-index:2; bottom:18%; left:50%; margin-left:-50px; width:100px; } .scrollBtn-wrap a { display:block; text-align:center;width:100px; } .scrollBtn-wrap a h2 { font-family:Roboto; font-size:15xp; display:inline-block; color:#382d2b; } .scrollBtn-wrap a span { position:relative; top:-3px; text-align:center; display:block; width:100px; transition:all .6s; } .scrollBtn-wrap a:hover span { top:5px; } .scrollBtn-wrap a span i:first-child {position:absolute; top:0; left:50%; margin-left:-20px; width:30px; height:30px; display:inline-block; transform:rotate(-135deg); border-top:1px solid #382d2b;border-left:1px solid #382d2b; } #wrap #section2 {position:relative; margin-top:1100px; z-index:1;width:100%; height:950px; background:#fff; overflow:hidden;} #wrap #section2 .bfdeco { position:absolute;top:-500;z-index:1;width:1900px; margin:0 auto; } #wrap #section2 .bfdeco img {width:100%;} #wrap #section2 > div {position:relative; width:1800px; top:50px; height:100%; margin:0 auto; } #wrap #section2 > div .left-wrap {float:left; position:absolute; z-index:2; top:0; left:3%; display:block; } #wrap #section2 > div .left-wrap .title { width:100%; } #wrap #section2 > div .left-wrap .title img { width:auto; } /* 토글 슬라이드 */ #wrap #section2 > div .right-wrap{float:left;position:absolute; z-index:1; top:165px; left:650px; width:1000px; height:350px; } #wrap #section2 > div .right-wrap .se2-slide-Title { width:1900px; display:block; text-align:center; } #wrap #section2 > div .right-wrap .se2-slide-Title .title { width:1900px; border-bottom:10px solid #845e53; } #wrap #section2 > div .right-wrap .se2-slide-Title .title a { padding:18px; margin-right:50%; } #wrap #section2 > div .right-wrap .se2-slide-Title .title a .title-1 { padding-right:50px; } #wrap #section2 > div .right-wrap .se2-slide-Title .title a .title-1 img { width:auto; } #wrap #section2 > div .right-wrap .se2-slide-Title .title a .title-2 {position:absolute; top:25px; transition:all .6s; } #wrap #section2 > div .right-wrap .se2-slide-Title .title a.addArrow01 .title-2 {position:absolute; top:25px; transform:rotate(-180deg); } #wrap #section2 > div .right-wrap .se2-slide-Title .title a .title-2 img { width:auto; } #wrap #section2 > div .right-wrap .se2-slide-container { display:none; overflow:hidden; position:relative; width:1900px; margin-top:5px; border-top:4px solid #845e53; height:250px; border-bottom:4px solid #845e53; background:rgba(255,255,255,.8);} #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view { width:150px; height:250px; margin:0 auto; position:absolute; top:60px; left:20%; overflow:hidden;} #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view ul { position:relative;left:0; top:0; width:900px; margin-left:-150px; left:calc(-150px*0); } #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view ul li { position:relative;float:left; width:150px; height:250px; } #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view ul li.se2slide0 > div {top:20%; } #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view ul li.se2slide2 > div {top:10%; } #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view ul li > div { width:80px; height:60px; position:relative; margin:0 auto; display:block; top:15%; } #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view ul li > div img { width:80px; margin:0 auto; display:block; } #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view ul li span { position:relative; bottom:-70px; display:block; text-align:center; } #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view ul li span a { display:inline-block; font-family:roboto; color:#845e53; padding:10px 30px; background:transparent; border:2px solid #845e53; transition:all .3s; } #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view ul li span a:hover { color:#fff; background:#845e53; border:2px solid #845e53; } #wrap #section2 > div .right-wrap .se2-slide-container .se2-slide-view ul li span a.addtoggleClick { color:#fff; background:#845e53; border:2px solid #845e53; } #wrap #section2 > div .right-wrap .se2-slide-container .nextPrevBtn { position:absolute; z-index:2; top:50%;margin-top:-10px; left:55%; margin-left:-690px; width:200px; background:#c99; } #wrap #section2 > div .right-wrap .se2-slide-container .nextPrevBtn .nextBtn-wrap { position:relative; } #wrap #section2 > div .right-wrap .se2-slide-container .nextPrevBtn .nextBtn-wrap .nextBtn { position:absolute; right:0; } #wrap #section2 > div .right-wrap .se2-slide-container .nextPrevBtn .nextBtn-wrap .nextBtn img { width:auto; } #wrap #section2 > div .right-wrap .se2-slide-container .nextPrevBtn .prevBtn-wrap { position:relative; } #wrap #section2 > div .right-wrap .se2-slide-container .nextPrevBtn .prevBtn-wrap .prevBtn { position:absolute; left:0; } #wrap #section2 > div .right-wrap .se2-slide-container .nextPrevBtn .prevBtn-wrap .prevBtn img {width:auto; } #wrap #section2 > div .right-wrap .se2-slide-container .pageBtn-wrap { position:absolute; z-index:2; top:23%; right:50%; margin-right:465px } #wrap #section2 > div .right-wrap .se2-slide-container .pageBtn-wrap ul { margin:0 auto; } #wrap #section2 > div .right-wrap .se2-slide-container .pageBtn-wrap ul li { float:left; } #wrap #section2 > div .right-wrap .se2-slide-container .pageBtn-wrap ul li .pageBtn { display:block; padding:5px;} #wrap #section2 > div .right-wrap .se2-slide-container .pageBtn-wrap ul li .pageBtn i { width:5px; height:5px; background:transparent; border:1px solid #845e53; border-radius:50%; } #wrap #section2 > div .right-wrap .se2-slide-container .pageBtn-wrap ul li .pageBtn.addPageBtn i { width:5px; height:5px; background:#845e53; border:1px solid #845e53; border-radius:50%; } #wrap #section2 > div .right-wrap .se2-slide-container .toggleTitle { position:absolute; top:25px; left:15%; } #section3 .scrollBtn-wrap {bottom:10%;} #wrap #section3 { position:relative; z-index:1; width:100%; background:#fff; } #wrap #section3 > div { position:relative; width:100%; height:100%; margin:0 auto; padding:50px 0 0 0;} #wrap #section3 > div .sec3-menubtn { position:relative; z-index:1; background:url(../img/sec3sub-menuoff.png) no-repeat 0 0; height:100px; width:500px; margin:0 auto;} #wrap #section3 > div .sec3-menubtnon { position:absolute;z-index:1; left:0; background:url(../img/sec3sub-menuon.png) no-repeat 0 0; height:100px; width:99px; transition:all 0.3s; } #wrap #section3 > div .sec3-menubtn ul { position:relative; z-index:2; width:500px; height:100px; } #wrap #section3 > div .sec3-menubtn ul li { float:left; width:100px; height:100px; } #wrap #section3 > div .sec3-menubtn ul li > div { } #wrap #section3 > div .sec3-menubtn ul li > div .iconBtn { position:relative; width:100px; height:100px; } #wrap #section3 > div .sec3-menubtn ul li > div .iconBtn i {transition:all 0.6s; } #wrap #section3 > div .sec3-menubtn ul li > div .iconBtn:hover i { position:absolute; bottom:0; left:0px;width:99px; height:4px; background:#826d6a; } #wrap #section3 > div .sec3-menubtn ul li > div .iconBtn.addiconBtnbar i { position:absolute; bottom:0; left:0px;width:99px; height:4px; background:#826d6a; } #wrap #section3 > div .sec3box-container { position:relative; border-top:1px solid #826d6a; width:100%; } /* 아리아 */ #wrap #section3 > div .sec3box-container .sec3-area { display:block; position:relative; background:#f6f6f6; width:100%;height:100%; margin-top:4px; border-top:4px solid #826d6a; border-bottom:2px solid #826d6a; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 { margin:0 auto; width:1400px;height:473px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-left { position:relative; display:block;width:700px; height:473px; float:left; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-left a .row1-left-hover { position:absolute; top:0; left:0; z-index:2;width:700px; height:473px; background:rgba(0,0,0,0); transition:all 0.3s; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-left a .row1-left-hover:before { content:''; position:absolute; z-index:2; right:0; top:45%; border-right:20px solid #f6f6f6; border-top:20px solid transparent; border-bottom:20px solid transparent;border-left:20px solid transparent; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-left a:hover .row1-left-hover { background:rgba(0,0,0,.5); } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-left a span:nth-child(2) { position:absolute; top:0; left:0;z-index:1; width:700px; height:473px; overflow:hidden; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-left a:hover span:nth-child(2) img { width:auto; transform:scale(1.3); } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-left a span:nth-child(2) img { width:auto; transition:all 0.6s; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-left a span:last-child { position:absolute; z-index:3;top:50%; left:50%; margin-left:-148.5px; margin-top:-19px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-left a span:last-child img { width:auto; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-right { overflow:hidden; display:block;float:left; position:relative; width:700px; height:473px; background:url(../img/se3applespacle.png) no-repeat 50%; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-right span:first-child { position:absolute;top:45%; left:50%; margin-top:-13px; margin-left:-187px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-right span:first-child img { width:auto; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-right span:nth-child(2) { position:absolute;top:55%; left:50%; margin-top:-20px; margin-left:-179px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-right span:nth-child(2) img { width:auto; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-right span:nth-child(3) { position:absolute; top:63%; left:50%; margin-left:-75px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-right span:nth-child(3) > a { font-family:roboto; font-size:20px; transition:all .3s;color:#382d2b; border:1px solid #382d2b; padding:10px 55px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row1 .row1-right span:nth-child(3) > a:hover { background:#382d2b; color:#fff; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 { margin:0 auto; width:1400px; display:block; height:473px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-left { overflow:hidden; float:left; display:block; position:relative; width:700px; height:473px; background:url(../img/sec3strawparticle.png) no-repeat 50%; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-left span:first-child { position:absolute; top:45%; left:50%; margin-top:-13px; margin-left:-93px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-left span:first-child img { width:auto; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-left span:nth-child(2) { position:absolute;top:55%; left:50%; margin-top:-20px; margin-left:-171.5px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-left span:nth-child(2) img { width:auto; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-left span:nth-child(3) { position:absolute; top:60%; left:50%; margin-left:-75px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-left span:nth-child(3) > a { font-family:roboto; font-size:20px; transition:all .3s;color:#382d2b; border:1px solid #382d2b; padding:10px 55px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-left span:nth-child(3) > a:hover { background:#382d2b; color:#fff; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-right { position:relative;float:left;display:block; width:700px; height:473px; display:block; overflow:hidden; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-right a .row2-left-hover { position:absolute; top:0; left:0; z-index:2;width:700px; height:473px; background:rgba(0,0,0,0); transition:all 0.3s; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-right a .row2-left-hover:before { content:''; position:absolute; z-index:2; left:-10; top:45%; border-left:20px solid #f6f6f6; border-top:20px solid transparent; border-bottom:20px solid transparent;border-right:20px solid transparent; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-right a:hover .row2-left-hover { background:rgba(0,0,0,.5); } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-right a span:nth-child(2) { position:absolute;z-index:1; top:0; left:0; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-right a span:last-child { position:absolute;z-index:3;top:50%; left:50%; margin-left:-193.5px; margin-top:19.5 } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-right a span:nth-child(2) img { width:auto; transition:all 0.6s; height:473px; } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-right a:hover span:nth-child(2) img { width:auto; transform:scale(1.3); } #wrap #section3 > div .sec3box-container .sec3-area .sec3-area-row2 .row2-right a span:last-child img { width:auto; } /* 코리아 */ #wrap #section3 > div .sec3box-container .korea { display:none; position:relative; background:#f6f6f6;background:#f6f6f6; width:100%;height:850px; margin-top:4px; border-top:4px solid #826d6a; border-bottom:2px solid #826d6a; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container { width:1600px; position:relative; margin:0 auto; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-title { position:absolute; top:50px; left:50%; margin-left:-170px;} #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-title > h2 { font-family:Nanum Myeongjo; font-size:50px;} #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view { position:relative; top:152px; width:1350px; height:700px; overflow:hidden; margin:0 auto;} #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap {position:absolute; left:calc(-450px*0); margin-left:-450px; width:calc(450px*9); margin:0 auto;} #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li { position:relative; width:400px; height:600px; float:left; padding:0 25px;} #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox { position:relative; width:400px; height:600px; background:#fff; box-shadow:5px 5px 5px #ccc; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox a { width:100%; height:100%; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox a .ko-row1 { position:absolute; top:15%; left:50%; margin-left:-125px; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox a .ko-row1 img { width:250px; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox a .ko-row2 { position:absolute; bottom:19%; left:50px; width:300px; text-align:center; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox a .ko-row2 h2 { font-family:roboto; font-size:30px; color:#323333; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox a .ko-row2 i { width:100px; height:3px; background:#434243; display:inline-block;margin-bottom:5px; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox a .ko-row2 h3 { font-family:roboto; font-size:20px; color:#6c6c6c; padding-bottom:15px; padding-top:5px;} #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox a .ko-row2 h4 { font-family:roboto;color:#6c6c6c; font-size:14px;} #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox .border-wrap { position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox .border-wrap i.border{ position:absolute; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox .border-wrap i.border0{ top:0; right:0; width:0; height:4px; background:#826d6a; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox .border-wrap i.border1{ bottom:0; right:0; width:4px; height:0; background:#826d6a; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox .border-wrap i.border2{ bottom:0; left:0; width:0; height:4px; background:#826d6a; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .korea-slide-view .korea-slide-wrap li .koreabox .border-wrap i.border3{ top:0; left:0; width:4px; height:0; background:#826d6a; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .ko-nextprevBtn-wrap { position:absolute; top:50%; margin-top:15px;left:50%; margin-left:-750px; width:1500px; height:100px; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .ko-nextprevBtn-wrap .ko-next { position:absolute; right:0; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .ko-nextprevBtn-wrap .ko-next a.ko-nextvBtn { position:relative; right:0; top:25px;width:50px; height:50px; display:block; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .ko-nextprevBtn-wrap .ko-next a.ko-nextvBtn i { display:absolute;right:0; display:block; width:50px; height:50px; border-top:2px solid #826d6a; transform:rotate(45deg); border-right:2px solid #826d6a; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .ko-nextprevBtn-wrap .ko-prev { position:absolute; left:0; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .ko-nextprevBtn-wrap .ko-prev a.ko-prevBtn { position:relative; left:0; top:25px;width:50px; height:50px; display:block; } #wrap #section3 > div .sec3box-container .korea .korea-slide-container .ko-nextprevBtn-wrap .ko-prev a.ko-prevBtn i { display:absolute;right:0; display:block; width:50px; height:50px; border-top:2px solid #826d6a; transform:rotate(-45deg); border-left:2px solid #826d6a; } #wrap #section3 > div .sec3box-container .korea-pageBtn-container { position:absolute; bottom:-100px; left:50%; margin-left:-100px; width:200px; height:10px; text-align:center; } #wrap #section3 > div .sec3box-container .korea-pageBtn-container .korea-pageBtn-wrap { display:inline-block; } #wrap #section3 > div .sec3box-container .korea-pageBtn-container .korea-pageBtn-wrap li { float:left; padding:5px; display:inline-block; } #wrap #section3 > div .sec3box-container .korea-pageBtn-container .korea-pageBtn-wrap li a { width:100%; } #wrap #section3 > div .sec3box-container .korea-pageBtn-container .korea-pageBtn-wrap li a i { display:block; width:10px; height:10px; background:transparent; border:1px solid #826d6a; border-radius:50%; } #wrap #section3 > div .sec3box-container .korea-pageBtn-container .korea-pageBtn-wrap li a.addkopageBtn i { background:#826d6a; } /* 트로피카 */ #wrap #section3 > div .sec3box-container .tropical { display:none; overflow:hidden; position:relative; background:#f6f6f6; width:100%;height:100%; margin-top:4px; border-top:4px solid #826d6a; border-bottom:2px solid #826d6a; } #wrap #section3 > div .sec3box-container .tropical .tropical-container { position:relative; margin:0 auto; width:1400px; height:850px; width:1400px; } #wrap #section3 > div .sec3box-container .tropical .tropical-container > h3 { position:absolute; z-index:3; top:60px; left:50%; margin-left:-158px; font-family:Nanum Myeongjo; font-size:50px; } #wrap #section3 > div .sec3box-container .tropical .tropicalBgdeco1 { position:absolute;z-index:1; bottom:0%;left:-11%; } #wrap #section3 > div .sec3box-container .tropical .tropicalBgdeco1 img { width:auto; } #wrap #section3 > div .sec3box-container .tropical .tropicalBgdeco2 { position:absolute;z-index:1;bottom:0%; right:-8%; } #wrap #section3 > div .sec3box-container .tropical .tropicalBgdeco2 img { width:auto; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap { position:relative; text-align:center; z-index:2; width:1400px; display:block; height:700px; padding-top:150px; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li { float:left; width:400px; padding:25px 25px; height:240px; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li a { position:relative; width:400px; height:240px; overflow:hidden; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li a > div { position:absolute;top:0; z-index:2; left:0; width:400px; height:240px; transition:all .6s;} #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li a:hover > div { background:rgba(130,109,106,.8); } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li a .tropicalimgimg { position:absolute; z-index:1; top:0; left:0; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li a .tropicalimgimg img { width:400px; transition:all .6s;} #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li a:hover .tropicalimgimg img { transform:scale(1.2); } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li a .tropicalimgtitle { opacity:0; transition:all 0.6s; position:absolute; z-index:3; top:50%; left:50%; margin-left:-100px; margin-top:-15px; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li a:hover .tropicalimgtitle {opacity:1; position:absolute; z-index:3; top:50%; left:50%; margin-left:-100px; margin-top:-15px; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li a .tropicalimgtitle img { width:200px; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li:nth-child(4) a { left:225px; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li:nth-child(5) a {left:225px; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li .border-wrap { position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li .border-wrap .border { position:absolute; display:block; background:#400040; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li .border-wrap .bordera0 { top:0; left:0; width:0%; height:3px; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li .border-wrap .bordera1 { right:0; bottom:0; width:3px; height:0%; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li .border-wrap .bordera2 { top:0; left:0; width:3px; height:0%; } #wrap #section3 > div .sec3box-container .tropical .tropical-container .tropical-wrap > li .border-wrap .bordera3 { bottom:0; right:0; width:0%; height:3px; } #wrap #section3 > div .sec3box-container .america { display:none; overflow:hidden; position:relative; background:#f6f6f6; width:100%;height:100%; margin-top:4px; border-top:4px solid #826d6a; border-bottom:2px solid #826d6a; } #wrap #section3 > div .sec3box-container .america .america-container { position:relative; margin:0 auto; height:700px; width:1500px; } #wrap #section3 > div .sec3box-container .america .america-container > h2 { position:absolute; top:70px; left:50%; margin-left:-120px; font-family:Nanum Myeongjo; font-size:50px; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap { position:relative; top:150px; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li {width:450px; height:400px; float:left; margin:25px; background:rgba(255,255,255,0); transition:all .6s; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li:hover {width:450px; height:400px; float:left; margin:25px; background:rgba(255,255,255,1); } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a { width:450px; height:400px; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a .americaimg { position:relative; top:25px; padding:25px; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a .americaimg img { width:auto; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a h2 { position:relative; top:25px; font-size:30px; text-align:center; padding:20px 0 0 0; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a .americabar { position:relative; top:25px; width:210px; display:block; padding:10px; margin:0 auto;} #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a .americabar i { width:210px; height:3px; transform:scale(0,1 ); transition:all .6s; display:block; background:#400040; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a:hover .americabar i { width:210px; height:3px; transform:scale(1,1 ); display:block; background:#400040; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a h3 { position:relative;font-size:14px;top:25px; text-align:center; padding-top:5px; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a h3 span { position:relative; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a h3 span i { transition:all .6s; width:5px; height:5px; border-top:1px solid #222;border-right:1px solid #222; transform:rotate(45deg); display:inline-block; } #wrap #section3 > div .sec3box-container .america .america-container .america-wrap li a:hover h3 span i { position:relative; left:5px; width:5px; height:5px; border-top:1px solid #222;border-right:1px solid #222; transform:rotate(45deg); display:inline-block; } #wrap #section3 > div .sec3box-container .china { display:none; overflow:hidden; position:relative; background:#f6f6f6; width:100%;height:100%; margin-top:4px; border-top:4px solid #826d6a; border-bottom:2px solid #826d6a; } #wrap #section3 > div .sec3box-container .china .china-container { position:relative; margin:0 auto; height:900px; width:1400px; } #wrap #section3 > div .sec3box-container .china .china-container > h2{ position:absolute; top:70px; left:50%; margin-left:-120px; font-family:Nanum Myeongjo; font-size:50px; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap { position:relative; top:150px; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li { position:relative; float:left; width:350px; height:500px; padding:50px; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn {position:relative; background:#fff;width:350px; height:500px; box-shadow:2px 0px 30px #ccc; transition:all .6s; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn:hover {transform:scale(1.1); } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn .chinaboxdeco01 { position:absolute; z-index:1; bottom:0; left:0; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn .chinaboxdeco01 img { width:auto; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn .chinaboxdeco02 { position:absolute; z-index:1; bottom:0; right:0; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn .chinaboxdeco02 img { width:auto; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn .chinaphoto { position:absolute; z-index:2; top:25px; left:25px; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn .chinaphoto img { width:auto; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn h2 { position:absolute; top:48%; left:50%; margin-left:-123px; font-family:Nanum Myeongjo; font-size:30px; color:#070707; font-weight:600; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn .middle-bar {position:absolute; top:54%; left:50%; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn .middle-bar i { display:inline-block; width:250px; margin-left:-125px; height:4px; background:#4a4a4a; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn p {position:absolute; top:60%; left:50%; margin-left:-125px; font-family:Nanum Myeongjo; font-size:16px; color:#070707; font-weight:600; width:250px; } #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn .bottom-bar { position:absolute; bottom:0; z-index:2; width:100%; height:20px;} #wrap #section3 > div .sec3box-container .china .china-container .china-wrap li .chinaBoxBtn .bottom-bar i { display:inline-block; width:100%; height:20px; background:#070707; } #wrap #section4 {position:relative; z-index:2; width:100%; height:300px; background:#fff; border-bottom:2px solid #826d6a; } #wrap #section4 .section4-wrap { position:relative; z-index:1; width:100%; height:300px; overflow:hidden; } #wrap #section4 .section4-wrap .sec4-background { background:url(../img/sec4Bg.png) no-repeat fixed; background-size:cover; width:100%; height:100%;} #wrap #section4 .section4-wrap .sec4-background .sec4title { position:absolute; top:50%;left:50%; margin-left:-163px; margin-top:-65px;} #wrap #section4 .section4-wrap .sec4-background .sec4title img { width:auto; } #wrap #section4 .section4-wrap .sec4-background h2 { font-size:18px; color:#fff; position:absolute; top:45%; left:50%; margin-left:-84px; } #wrap #section4 .section4-wrap .sec4-background h3 { font-size:14px; color:#fff; position:absolute; top:52%; left:50%; margin-left:-91.5px; } #wrap #section4 .section4-wrap .sec4-background .find { position:absolute; top:60%;left:50%;margin-left:-82px; } #wrap #section4 .section4-wrap .sec4-background .find a { font-size:16px; color:#fff; padding:15px 26px; border:1px solid #fff; transition:all .6s; } #wrap #section4 .section4-wrap .sec4-background .find a:hover { color:#000; background:#fff; } #wrap #section4 .section4-wrap .STOREBOX { position:absolute; z-index:2; top:300px; width:100%; height:300px; background:#fff; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap {position:relative;width:100%; height:300px; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap h2 { font-family:Nanum Myeongjo; font-size:36px; font-weight:600; position:absolute; top:40px; left:50%; margin-left:-119.865px; color:#5b5252;} #wrap #section4 .section4-wrap .STOREBOX .store-wrap .storeimg { position:absolute; top:5px; left:50%; margin-left:-200px; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .storeimg img { width:400px; opacity:.2;} #wrap #section4 .section4-wrap .STOREBOX .store-wrap .store-title { position:absolute; bottom:28%; left:50%; margin-left:-99.2px;} #wrap #section4 .section4-wrap .STOREBOX .store-wrap .store-title > h3 { font-size:20px; color:#564a4a;font-family:Nanum Myeongjo; font-weight:600; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .STOREBOX-close {transition:all .6s; position:absolute; bottom:5%; right:50%; margin-right:-52px; font-size:16px; font-family:Nanum Myeongjo; color:#826d6a; padding:10px 25px; border:1px solid #826d6a; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .STOREBOX-close:hover { background:#826d6a; color:#fff; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .stoe-picture { position:relative; z-index:2; width:100%; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .stoe-picture .stoe-picture-wrap { text-align:center; padding-top:80px;} #wrap #section4 .section4-wrap .STOREBOX .store-wrap .stoe-picture .stoe-picture-wrap li { position:relative; text-align:center; display:inline-block; width:auto; height:80px; padding:10px 10px; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .stoe-picture .stoe-picture-wrap li img { width:100px; height:80px; display:block; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .stoe-picture .stoe-picture-wrap li:nth-child(1) img { width:80px; height:80px; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .stoe-picture .stoe-picture-wrap li:nth-child(3) img { width:80px; height:80px; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .stoe-picture .stoe-picture-wrap li:nth-child(7) img { width:80px; height:80px; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .stoe-picture .stoe-picture-wrap li span { width:auto; display:block; height:80px; } #wrap #section4 .section4-wrap .STOREBOX .store-wrap .stoe-picture .stoe-picture-wrap li i { position:relative; top:50%; margin-top:-7.5px; width:15px; height:15px; border-top:2px solid #826d6a; border-right:2px solid #826d6a; transform:rotate(45deg); display:block; } #wrap #section5 { position:relative; z-index:2;width:100%; height:; background:#fff;} #wrap #section5 .fruit-cook { position:relative; width:100%; height:1450px; padding-top:150px; } #wrap #section5 .fruit-cook .fruit-title { padding-bottom:120px; text-align:center; } #wrap #section5 .fruit-cook .fruit-title h2 { font-family:Nanum Myeongjo; font-size:40px; color:#826d6a; font-weight:600; display:inline-block; } #wrap #section5 .fruit-cook .fruit-title i { width:270px; height:2px; display:block; background:#826d6a; margin:0 auto; margin-top:15px; } #wrap #section5 .fruit-cook .fruit-cook-content { position:relative; width:100%; max-width:1360px; height:560px; border:4px solid #826d6a;margin:0 auto; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container { width:100%; max-width:1360px; height:100%; margin:0 auto; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view {position:relative; width:100%; max-width:1200px; height:100%; margin:0 auto; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap { width:100%; height:100%; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li.s3slide { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:#fff; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li.s3slide0 { z-index:3; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li.s3slide1 { z-index:2; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li.s3slide2 { z-index:1; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li > div { position:relative; width:100%; height:100%; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li > div .fruit-left { position:absolute; top:-60px; left:0; width:46.6666667%; height:100%;} #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li:nth-child(1) > div .fruit-left { background:url(../img/slide0.jpg) no-repeat 50% 50%; background-size:cover; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li:nth-child(2) > div .fruit-left { background:url(../img/slide1.jpg) no-repeat 50% 50%; background-size:cover; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li:nth-child(3) > div .fruit-left { background:url(../img/slide2.jpg) no-repeat 50% 50%; background-size:cover; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li > div .fruit-right { position:absolute; top:0px; right:0; width:46.6666667%; height:100%; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li > div .fruit-right div { padding-top:16%; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li > div .fruit-right div h2 { font-size:30px; font-weight:600; color:#5b5252; font-family:Nanum Myeongjo; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li > div .fruit-right div h3 { font-size:16px; color:#222; padding:20px 0 30px 0; } #wrap #section5 .fruit-cook .fruit-cook-content .fruit-container .fruit-view ul.fruit-wrap li > div .fruit-right div p { font-size:14px; color:#666; line-height:180%; } #wrap #section5 .fruit-cook .fruit-cook-content .pageImageBtn-wrap { position:absolute; z-index:3; bottom:-4.9689441%; left:44%; width:33.4640523%; height:216px; } #wrap #section5 .fruit-cook .fruit-cook-content .pageImageBtn-wrap li {float:left; width:50%; height:100%; } #wrap #section5 .fruit-cook .fruit-cook-content .pageImageBtn-wrap li> div { margin:0 7.8125%; height:100%; } #wrap #section5 .fruit-cook .fruit-cook-content .pageImageBtn-wrap li> div > div { width:100%; height:100%; } #wrap #section5 .fruit-cook .fruit-cook-content .pageImageBtn-wrap li:nth-child(1)> div > div { background:url(../img/slide1.jpg) no-repeat 50% 50%; background-size:cover; } #wrap #section5 .fruit-cook .fruit-cook-content .pageImageBtn-wrap li:nth-child(2)> div > div { background:url(../img/slide2.jpg) no-repeat 50% 50%; background-size:cover; } #wrap #section5 .fruit-cook .section5-wrap { position:relative; width:100%; margin-top:150px; height:400px; background:url(../img/se6bg.png) no-repeat fixed; background-size:cover; } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg { width:318px; height:318px; position:absolute; top:50%;margin-left:-159px; margin-top:-159px; left:50%; } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg .rotateFornt { } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg .rotateFornt .rotateForntbtn {transition:all .6s; backface-visibility:hidden;position:absolute; top:0; left:0%; transform:rotateY(0deg); z-index:2; } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg:hover .rotateFornt .rotateForntbtn { transform:rotateY(180deg);z-index:1; position:absolute; top:0; left:0%; } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg .rotateFornt .rotateForntbtn img { width:auto; } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg .rotateback { } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg .rotateback .rotatebackbtn { transition:all .6s; transform:rotateY(180deg);position:absolute; top:0; left:0; z-index:1; } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg:hover .rotateback .rotatebackbtn { transform:rotateY(0deg); position:absolute;z-index:2; } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg .rotateback .rotatebackbtn img { position:relative; z-index:1; width:auto; } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg .rotateback .rotatebackbtn .clickbtn { display:block; transition:all .6s; font-weight:600; position:absolute; top:50%; left:50%; margin-top:20px; margin-left:-60px; z-index:2; font-size:18px; padding:10px 30px; color:#382d2a; border:2px solid #382d2a; } #wrap #section5 .fruit-cook .section5-wrap .se5-rotateimg .rotateback .rotatebackbtn .clickbtn:hover { background:#382d2a; color:#fff; } #wrap #section5 .fruit-cook .arrow { position:absolute; z-index:3; bottom:0; right:0; width:82px; height:41px; } #wrap #section5 .fruit-cook .arrow .arrowBtn-wrap { width:82px; height:41px; } #wrap #section5 .fruit-cook .arrow .arrowBtn-wrap li { float:left; width:50%; height:100%; } #wrap #section5 .fruit-cook .arrow .arrowBtn-wrap li div { width:100%; height:100%; } #wrap #section5 .fruit-cook .arrow .arrowBtn-wrap li div a { display:block; text-align:center; width:41px; line-height:41px; background:#826d6a; } #wrap #section5 .fruit-cook .arrow .arrowBtn-wrap li:nth-child(1) div a i { display:inline-block; margin-left:5.5px; width:11px; height:11px; border:1px solid #fff; border-right:0; border-bottom:0; transform:rotate(-45deg); } #wrap #section5 .fruit-cook .arrow .arrowBtn-wrap li:nth-child(2) div a i { display:inline-block; margin-right:5.5px; width:11px; height:11px; border:1px solid #fff; border-left:0; border-bottom:0; transform:rotate(45deg); } #wrap #section5 .scrollBtn-wrap {position:absolute;z-index:2; bottom:6%; left:50%; margin-left:-50px; width:100px; } .rotatebehind-wrap { display:none; position:fixed; top:0; left:0; z-index:5; width:100%; height:100%; background:#846f6b; } .rotatebehind { position:absolute; top:50%; margin-top:-220px; left:0%; background:#846f6b; width:100%; height:400px; } .rotatebehind > h2 { text-align:center; padding-top:0px; font-size:50px; color:#e0c2c2; font-family:Nanum Myeongjo; } .rotatebehind .rotatebehind-modal { position:relative; top:50px; width:1600px; height:300px; margin:0 auto; } .rotatebehind .rotatebehind-modal > li { float:left; position:relative; width:300px; height:280px; padding:0 10px; } .rotatebehind .rotatebehind-modal > li > a {width:300px; position:relative; height:280px; display:block; background:transparent; transition:all 0.6s; } .rotatebehind .rotatebehind-modal > li > a div {width:300px; height:200px; overflow:hidden; } .rotatebehind .rotatebehind-modal > li > a:hover { background:transparent; } .rotatebehind .rotatebehind-modal > li > a div > img { width:300px; height:200px; transform:scale(1); transition:all .6s; } .rotatebehind .rotatebehind-modal > li > a:hover div > img { transform:scale(1.2); } .rotatebehind .rotatebehind-modal > li > a > span {position:relative;top:10px; width:50px; display:block; margin:0 auto;} .rotatebehind .rotatebehind-modal > li > a > span> i { display:inline-block; width:50px; height:2px; text-align:center; background:#e0c2c2; } .rotatebehind .rotatebehind-modal > li > a:hover > span> i { background:#fff; } .rotatebehind .rotatebehind-modal > li > a > h3 {position:absolute; bottom:3%; left:50%; margin-left:-50px; color:#e0c2c2; font-size:17px; padding:15px; display:inline-block; } .rotatebehind .rotatebehind-modal > li > a:hover > h3 {color:#fff; } .rotatebehind .rotatebehind-modal > li > a .border-wrapb { position:absolute;display:block; top:0; left:0; z-index:3; width:100%; height:200px; } .rotatebehind .rotatebehind-modal > li > a .border-wrapb .borderb { position:absolute;background:#e0c2c2; } .rotatebehind .rotatebehind-modal > li > a .border-wrapb .borderb0 { top:0; left:0; width:0%; height:3px; } .rotatebehind .rotatebehind-modal > li > a .border-wrapb .borderb1 { bottom:0; left:0; width:3px; height:0%; } .rotatebehind .rotatebehind-modal > li > a .border-wrapb .borderb2 { top:0; right:0; width:3px; height:0%; } .rotatebehind .rotatebehind-modal > li > a .border-wrapb .borderb3 { bottom:0; right:0; width:0%; height:3px; } .rotatebehind .modalcloseBox { position:absolute; bottom:0%; margin-bottom:-50px; right:50%; margin-right:-15px; } .rotatebehind .modalcloseBox .modalBOX-close { position:absolute; z-index:3; bottom:50%; right:50%; margin-right:0; border:1px solid #e0c2c2;width:30px; height:30px; border-radius:50%; } .rotatebehind .modalcloseBox .modalBOX-close span { position:absolute; top:15px; left:3px; } .rotatebehind .modalcloseBox .modalBOX-close span:first-child i { width:25px; display:block; height:1px; background:#e0c2c2;transform:rotate(45deg); } .rotatebehind .modalcloseBox .modalBOX-close span:last-child i { width:25px; display:block; height:1px; background:#e0c2c2;transform:rotate(-45deg); } .rotatebehind .modalcloseBox .modalBOX-close:hover { background: #e0c2c2; } .rotatebehind .modalcloseBox .modalBOX-close:hover span { position:absolute; top:15px; left:3px; } .rotatebehind .modalcloseBox .modalBOX-close:hover span:first-child i { width:25px; display:block; height:1px; background:#fff;transform:rotate(45deg); } .rotatebehind .modalcloseBox .modalBOX-close:hover span:last-child i { width:25px; display:block; height:1px; background:#fff;transform:rotate(-45deg); } #wrap #section6 { position:relative; z-index:2;width:100%; height:450px; background:#fff; } #wrap #section6 .store-search { position:relative; top:0px; width:1400px; height:100%; margin:0 auto; overflow:hidden; } #wrap #section6 .store-search .store-left {position:absolute;top:0; left:0; z-index:1; width:50%; } #wrap #section6 .store-search .store-left .store-left-row1 { position:absolute; top:0px; left:0;} #wrap #section6 .store-search .store-left .store-left-row1 img { width:auto; } #wrap #section6 .store-search .store-left .store-left-row2 { position:absolute;top:180px; left:0; } #wrap #section6 .store-search .store-left .store-left-row2 img { width:auto; } #wrap #section6 .store-search .store-left .map {position:relative; z-index:2; left:0; opacity:0; top:1000px; width:200%; height:400px; background:#fff; } #wrap #section6 .store-search .store-left .map h3 {position:absolute;top:0px; margin-left:-34.5px;left:50%; font-family:Nanum Myeongjo; font-size:30px; font-weight:600;} #wrap #section6 .store-search .store-left .map .mapcloseBtn {position:absolute; bottom:0%; left:50%;z-index:2; border:1px solid #382d2a; width:30px; height:30px; border-radius:50%; } #wrap #section6 .store-search .store-left .map .mapcloseBtn:hover { background:#382d2a; } #wrap #section6 .store-search .store-left .map .mapcloseBtn i {position:absolute;top:2px; left:7px; display:block; transform:rotate(-135deg); width:15px; height:15px; border-left:2px solid #382d2a; border-top:2px solid #382d2a;} #wrap #section6 .store-search .store-left .map .mapcloseBtn:hover i { border-left:2px solid #fff; border-top:2px solid #fff;} #wrap #section6 .store-search .store-left .map > div {position:absolute; z-index:1; margin-left:-450px; left:50%; top:50px; } #wrap #section6 .store-search .store-left .map > div iframe { width:900px; height:300px; } #wrap #section6 .store-search .store-right { width:50%; top:50%; margin-top:-100px; right:100px; height:300px; position:absolute; } #wrap #section6 .store-search .store-right .store-right-row1 { position:relative; top:0px; right:10px; display:block; text-align:right; } #wrap #section6 .store-search .store-right .store-right-row1 img { width:auto; } #wrap #section6 .store-search .store-right .store-right-row2 { position:relative; top:20px; right:0; display:block;text-align:right;} #wrap #section6 .store-search .store-right .store-right-row2 img { width:200px; } #wrap #section6 .store-search .store-right .store-right-row3 { position:relative; top:30px; right:0; display:block; text-align:right;} #wrap #section6 .store-search .store-right .store-right-row3 img { width:400px; } #wrap #section6 .store-search .store-right > span { position:relative; top:60px; right:0; text-align:right;display:block; } #wrap #section6 .store-search .store-right > span a { font-family:Nanum Myeongjo; font-size:15px; padding:15px 30px; color:#fff; border:1px solid #382d2a;background:#382d2a; border-radius:4px; } #wrap #section6 .store-search .store-right > span a:hover { color:#382d2a; background:#fff; } #wrap #footer { position:relative; z-index:2; width:100%; height:250px; background:#382d2a; border-top:1px solid #000000; } #wrap #footer .footer-menu { position:absolute; top:50px; left:50%; margin-left:-394px; } #wrap #footer .footer-menu ul { } #wrap #footer .footer-menu ul li { float:left; padding:5px 50px;} #wrap #footer .footer-menu ul li a { color:#fff; font-size:16px; } #wrap #footer .footer-menu ul li a:hover { text-decoration:underline; } #wrap #footer .footer-inform { } #wrap #footer .footer-inform ul {position:absolute; top:100px;left:50%; margin-left:-290.5px; } #wrap #footer .footer-inform ul li {float:left; padding:5px 15px; } #wrap #footer .footer-inform ul li h3 {color:#ddd; } #wrap #footer .footer-inform address {position:absolute; top:150px;left:50%; margin-left:-153px; color:#ddd;}