.visual {position:relative; height:1300px;} .visual .control {position:absolute; width:300px; left:300px; bottom:400px; padding:0; height:24px; z-index:10; } .visual .control a[class*="btn_"] {display:none; text-align:center; width:40px; height:40px; right:auto; bottom:0; border:0; border-radius:50%; -webkit-border-radius:50%; vertical-align:top; position:relative; background-repeat:no-repeat; background-position:center 50%; background-color:rgba(255,255,255,0.2);} .visual .control a[class*="btn_"] span {line-height:1px; font-size:1px; position:absolute; left:-10000px; top:0; overflow:hidden; text-indent:-30000px;} .visual .control a.btn_stop {background-image:url(../img/main/visual_control_stop.png); background-size:15px auto;} .visual .control a.btn_play {background-image:url(../img/main/visual_control_play.png); background-size:15px auto;} .visual .control ul {width:auto; height:4px; text-align:left; display:inline-block; vertical-align:top; position:relative; left:auto; bottom:0; margin-top:15px;} .visual .control ul li {display:inline-block; vertical-align:top; margin:0 10px 0 0; height:10px;} .visual .control ul li a {display:block; position:relative; width:65px; height:10px; text-indent:-9999px; overflow:hidden; background:#fff; border-radius:0; -webkit-border-radius:0; opacity:0.3; -webkit-opacity:0.3; transition : all 0.2s ease; -webkit-transition : all 0.2s ease;} .visual .control ul li a.on {opacity:1; -webkit-opacity:1;} .visual .move {position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; } .visual .move ul {overflow:hidden; position:absolute; left:0; top:0; width:100%; height:100%;} .visual .move ul li {position:absolute; left:100%; top:0; width:100%; height:100%; display:none; } .visual .move ul li:first-child {left:0; display:block;} .visual .move ul li.bg1 { background:url(../img/main/img_main_slide01.jpg);} .visual .move ul li.bg2 { background:url(../img/main/img_main_slide02.jpg)} .visual .move ul li.bg1, .visual .move ul li.bg2{ background-size:cover; background-position:50% 50%;} .visual .move ul li {background-position:center top; background-repeat:no-repeat; background-size:cover;} .visual .move ul li .slogon { position:absolute; left:0; top:400px; margin:0 300px;} .visual .move ul li .slogon p {color:#fff; font-size:35px;} .visual .move ul li .slogon p.eng{ font-size:30px; letter-spacing:15px; font-weight:300; opacity:0.7;} .visual .move ul li .slogon p.subject { font-size:100px; line-height:120px; font-weight:300; margin:15px 0 30px 0; letter-spacing:-2px;} .visual .move ul li .slogon p.subject strong {font-weight:bold } .visual .move ul li .slogon p.txt_b {font-size:20px; line-height:26px;} .visual .move ul li .slogon p.txt_s {font-size:17px; line-height:22px; margin-top:25px; opacity:0.9; -webkit-opacity:0.9; font-weight:300;} .visual .move ul li .slogon p.txt_s span {display:block;} @-webkit-keyframes move { 0% {bottom:40px;} 100% {bottom:55px;} } /* Standard syntax */ @keyframes move { 0% {bottom:40px;} 100% {bottom:55px;} } @media all and (max-width : 1920px){ .visual { height:935px;} .visual .control{ bottom:300px; left:250px;} .visual .control ul li a { width:45px; height:7px;} .visual .move ul li .slogon{ top:250px; margin:0 250px;} .visual .move ul li .slogon p {font-size:25px;} .visual .move ul li .slogon p.eng{ font-size:25px; letter-spacing:10px;} .visual .move ul li .slogon p.subject { font-size:70px; line-height:80px;} } @media all and (max-width : 1680px){ .visual .move ul li .slogon{ margin:0 0 0 100px;} .visual .move ul li .slogon p.eng{ font-size:20px;} .visual .move ul li .slogon p.subject{ font-size:60px; line-height:70px;} .visual .move ul li .slogon p{ font-size:23px;} } @media all and (max-width : 1220px){ .visual { height:1000px;} .visual .move ul{ height:calc(100% - 300px);} .visual .move ul li .slogon{ margin:0 0 0 50px; top:100px;} .visual .control{ left:60px; bottom:430px;} } @media all and (max-width : 960px){ .visual { height:850px;} .visual .move ul{ height:calc(100% - 250px);} .visual .move ul li.bg1, .visual .move ul li.bg2{ background-position:100% 100%;} .visual .move ul li .slogon{ margin:0 0 0 50px; top:100px;} .visual .move ul li .slogon p.eng{ font-size:17px;} .visual .move ul li .slogon p.subject{ font-size:45px; line-height:50px; margin:10px 0 10px 0;} .visual .move ul li .slogon p.subject br{ display:none;} .visual .move ul li .slogon p{ font-size:20px;} .visual .move ul li .slogon p br{ display:none} .visual .control{ bottom:370px;} } @media all and (max-width : 640px){ .visual { height:650px;} .visual .move ul{ height:calc(100% - 200px);} .visual .move ul li .slogon{top:70px;} .visual .move ul li .slogon p.txt{ display:none;} .visual .move ul li .slogon p.subject{ font-size:40px; line-height:45px;} .visual .control{ bottom:350px;} .visual .move ul li.bg1, .visual .move ul li.bg2{ background-position:87% 100%;} } @media all and (max-width : 480px){ .visual { } .visual .move ul{ height:calc(100% - 150px);} .visual .move ul li .slogon{top:50px; text-align:center; margin:0 20px;} .visual .move ul li.bg1, .visual .move ul li.bg2{ background-position:80% 0; background-size: auto 120%;} .visual .move ul li .slogon p.eng{ font-size:15px; letter-spacing:6px} .visual .move ul li .slogon p.subject{ font-size:30px; line-height:35px;} .visual .control{ bottom:300px; width:100%; text-align:center; left:0;} } @media all and (max-width :400px){ .visual .move ul li .slogon p.eng{ font-size:13px;} .visual .move ul li.bg1, .visual .move ul li.bg2{ background-position:80% 0; background-size: auto 110%;} } .cs{ position:absolute; bottom:0; left:0; z-index:1; width:100%; } .cs .s01, .cs .s02, .cs .s03{ position:absolute; bottom:0;} .cs .s01{ left:0; width:55%; } .cs .s02{ left:55%; width:calc(100% - 55%);height:200px;background:#003663; color:#fff; display:none;} .cs .s02 .area{ padding:40px 100px;} .cs .s02 .area .fs23{ position:relative; margin-bottom:15px; padding-left:50px;} .cs .s02 .area .fs23:before{ content:''; position:absolute; top:0; left:0;background:url('../img/main/cs_icon.png') no-repeat center; background-size:100% auto; width:40px; height:40px; } .cs .s03{ left:55%; width:calc(100% - 55%);height:170px; background:#003663; color:#fff; text-align:center;} .cs .s03 p{ padding-top:45px;} .cs .s03 i{ padding-right:5px;} .cs .s03 span{ font-size:30px; font-weight:bold; display:block;} /* 팝업존 */ .bannerZone{position:relative; width:100%; } .bannerZone h3{ font-size:20px; line-height:20px; font-family:'NotoM'; color:#222;} .bannerZone .bannerZone_list{display:block; } .bannerZone .bannerZone_list p{display:table; float:left;} .bannerZone .bannerZone_list a{display:table-cell; vertical-align: middle; width:100%; text-align:center; background:#f0f0f0; overflow:hidden;} .bannerZone .bannerZone_list a img{width:100%; max-width:100%; max-height:100%;} .bannerZone .bannerZone_list .slick-arrow{position:absolute; bottom:30px; width:40px; height:40px; border-radius:50%; text-indent:-9999%; overflow:hidden; cursor:pointer; z-index:2} .bannerZone .bannerZone_list .slick-next{right:30px; background:#fff url('../img/main/btn_p_next.png') no-repeat center;} .bannerZone .bannerZone_list .slick-prev{right:80px; background:#fff url('../img/main/btn_p_prev.png') no-repeat center;} .bannerZone .control a{position:absolute; right:30px; top:2px; width:20px; height:20px; display:block; text-indent:-9999%; overflow:hidden;} /* 슬라이드 공용 */ .slick-slider{transition:all ease-in-out .3s; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent; } .slick-slide{ display:none; height:100%; min-height:1px; vertical-align:middle; } .slick-list{ overflow:hidden; } .slick-list.dragging{ cursor:pointer; } .slick-initialized .slick-slide{ display:inline-block; z-index:0 !important; } .slick-arrow.slick-hidden { display:none; } .slick-current { opacity:1; display:block; } .form_wrap .hide_label {position: absolute; z-index: -1;text-indent: -9999px;} .f_cate,.f_etc1,.f_name,.f_tel{box-sizing:border-box;font-size:18px;padding:0 15px;border:0;border-radius:5px;height:50px;} .f_name, .f_tel, .f_etc1 {margin-left: 13px;} .f_submit{box-sizing:border-box;border:none;width:200px;height:50px;color:#fff;text-align:center;background:#0072bc;margin-left:13px;cursor:pointer;border:0;border-radius:5px;} .f_cate,.f_etc1,.f_name{width:17%} .f_tel{width:calc((100% - 34%) - 253px);} #sec_01{ position:relative; } #sec_01 .sTit{ position:absolute; top:0; left:0;} #sec_01 .sTit:before{ content:''; position:absolute; top:-150px; left:-330px;background:url('../img/main/sec_01_bg.png') no-repeat; background-size:100% auto; width:650px; height:800px; } #sec_01 ul{ display:table; width:100%;} #sec_01 ul li{ position:relative; float:left; width:calc(100% / 3); height:400px;} #sec_01 ul li .area{ position:absolute; bottom:50px; left:50px; z-index:1} #sec_01 ul li a{display:block; width:100%; height:100%; position:relative; color:#222;transition:color 200ms ease-in-out;} #sec_01 ul li a:hover{color:#FFF;} #sec_01 ul li a:before{display:block; position:absolute; top:-1px; left:-1px; z-index:1; width:calc(100% + 1px); height:calc(100% + 1px); content:''; transition-property:background-color, box-shadow; transition-duration:200ms; transition-timing-function:ease-in-out;} #sec_01 ul li a:hover:before{background-color:#003663; box-shadow:rgba(0, 0, 0, 0.15) 10px 17px 15px; opacity:0.8;} #sec_01 ul li a:hover .area{ top:90px; left:0; width:100%; text-align:center; color:#fff;} #sec_01 ul li:nth-child(1){ margin-left:calc(100% / 3); background:url('../img/main/sec_01_conbg1.jpg') no-repeat center; } #sec_01 ul li:nth-child(2){background:url('../img/main/sec_01_conbg2.jpg') no-repeat center; } #sec_01 ul li:nth-child(3){background:url('../img/main/sec_01_conbg3.jpg') no-repeat center; } #sec_01 ul li:nth-child(4){background:url('../img/main/sec_01_conbg4.jpg') no-repeat center; } #sec_01 ul li:nth-child(5){background:url('../img/main/sec_01_conbg5.jpg') no-repeat center; } #sec_01 ul li:nth-child(2) a{ color:#fff;} #sec_01 ul li:nth-child(1), #sec_01 ul li:nth-child(2), #sec_01 ul li:nth-child(3), #sec_01 ul li:nth-child(4), #sec_01 ul li:nth-child(5){ background-size:cover; background-position:50% 100%;} #sec_01 ul li .more{ display:none;} #sec_01 ul li a:hover .more{ display:inline-block; padding:10px 50px; border:1px #809bb1 solid; margin-top:30px; color:#ccd7e0;} #sec_02{ position:relative;} #sec_02:before{ content:''; position:absolute; top:-200px; left:0;background:url('../img/main/sec_02_bg.jpg') no-repeat; background-size:100% auto; background-position:50% 100%; width:100%; height:600px; z-index:-1; } .main_pro {position:relative; padding-top:70px;} .main_pro h3{position:absolute; width:1px; height:1px; left:-9999em; top:-9999em; text-indent:-9999em; overflow:hidden;} .main_pro button{cursor:pointer;} .main_pro .pro{position:relative; height:100%; z-index:0; } .main_pro .pro div{height:100%;} .main_pro .pro .area{display:table; float:left;} .main_pro .pro .area dl{ position:relative; margin:0 150px; } .main_pro .pro .area dl dt{ width:45%; } .main_pro .pro .area dl dt img{ height:800px;margin:0 !important; } .main_pro .pro .area dl dd{ position:absolute; top:150px; left:53%; } .main_pro .pro .area dl dd .ffN{ font-weight:800} .main_pro .pro .area dl dd a{ position:relative; display:inline-block; padding:13px 120px 13px 35px; border:1px #333 solid; border-radius:30px; color:#333;} .main_pro .pro .area dl dd a i{ position:absolute; right:35px; top:15px; font-size:25px;} .main_pro .pro p a{display:table-cell; vertical-align: middle; padding:0; margin:0;} .main_pro .pro img{width:auto; height:auto; max-width:100%; max-height:100%; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; } .main_pro .pro .slick-counter{ position: absolute; top:50px; right:270px;width:75px; height:55px; line-height:55px; color:#333; text-align:center; font-family: 'NotoM'; font-size:25px;} .main_pro .pro .slick-arrow{position:absolute; top:50px; width:55px; height:55px; text-indent:-9999%; overflow:hidden; z-index:1; } .main_pro .pro .slick-prev{right:340px;background:url('../img/main/btn_p_prev.png') no-repeat center;} .main_pro .pro .slick-next{right:220px; background:url('../img/main/btn_p_next.png') no-repeat center;} .main_pro .control{ display:none;position:absolute; right:0; top:0; z-index:1;} .main_pro .control a{display:block; width:55px; height:55px; text-indent:-9999%; overflow:hidden;} #sec_03{ position:relative;} #sec_03:before{ content:''; position:absolute; top:300px; left:0;background:url('../img/main/sec_03_bg1.png') no-repeat ; background-size:100% auto; background-position:50% 0; width:600px; height:605px; z-index:-1; } #sec_03:after{ content:''; position:absolute; top:-500px; right:0;background:url('../img/main/sec_03_bg2.png') no-repeat ; background-size:100% auto; background-position:50% 0; width:950px; height:1272px; z-index:-1; } #sec_03 .cover{ padding:0 400px;} #sec_03 li{ position:relative; display:inline-block; vertical-align:top; width:calc((100% / 3) - 13px); text-align:center;} #sec_03 .pic img{ width:100%;} #sec_03 .fs40{ font-weight:800; color:#ddd;} #sec_03 .area{ margin:0 50px;} #sec_03 .area h1 b{ letter-spacing:17px; margin-left:20px;} #sec_03 .area .fs23{ margin-left:55px; color:#555;} #sec_03 .area .fs55{ border-bottom:1px #ddd solid; padding-bottom:20px; margin-bottom:20px;} #sec_03 .area .m{ display:none;} #sec_04{ position:relative; background:#e5e8ea;} #sec_04 .area01, #sec_04 .area02{ display:inline-block; vertical-align:top;} #sec_04 .area01{ position:relative; width:57%; margin-right:150px;} #sec_04 .area02{ width:calc((100% - 57%) - 160px); background:#0072bc; color:#fff; margin-top: 70px;} #sec_04 .area01 .sTit{ position:absolute; top:0;left:0;} #sec_04 .area01 .news{ margin-left:200px;} #sec_04 .area02 .s01, #sec_04 .area02 .s02, #sec_04 .area02 .s03{ float:left;} #sec_04 .area02 .s01{ width:100%;background:url('../img/main/sec_0403.jpg') no-repeat 100% 0;} #sec_04 .area02 .s01 .area{ padding:60px ;} #sec_04 .area02 .s01 .area .fs50{ position:relative; font-weight:bold; padding-bottom:7px; margin-bottom:7px;} #sec_04 .area02 .s01 .area .fs50:before{ content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; border-top:1px #ddd solid; opacity:0.5;} #sec_04 .area02 .s01 .area .fs20{ opacity:0.7} #sec_04 .area02 .s02, #sec_04 .area02 .s03{ width:100%; text-align:center; padding:50px 0;} #sec_04 .area02 .s02 img, #sec_04 .area02 .s03 img{ height:70px; margin-bottom:20px;} #sec_04 .area02 a{ color:#fff;} #sec_04 .area02 .s02{ background:#0054a6} #sec_04 .area02 .s03{ background:#003663} #sec_04 .area02 .s02 .fs20, #sec_04 .area02 .s03 .fs20{ opacity:0.8;} #sec_04{ position:relative;} #sec_05 li{ position:relative; display:inline-block; vertical-align:top; width:calc((100% / 2) - 30px); border:1px #ddd solid; } #sec_05 li:nth-child(1){ margin-right:50px;} #sec_05 li:before{ content:''; position:absolute; right:20px; top:20px; width:65px; height:65px; background:url('../img/main/mf_blog.png') no-repeat ; background-size:100% auto;} #sec_05 .area{ padding:50px; color:#444;} #sec_05 .area .fs30{ color:#222;} #sec_06 li{ position:relative; display:inline-block; vertical-align:top; width:calc((100% / 5) - 27px); margin-right:30px; background:#fff; text-overflow:ellipsis;} #sec_06 li:before{ content:''; position:absolute; right:20px; top:20px; width:50px; height:50px; background:url('../img/main/mf_insta.png') no-repeat ; background-size:100% auto;} #sec_06 li:nth-child(5){ margin-right:0;} #sec_06 li img{ width:100%;} #sec_06 li p{margin-top:25px; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient: vertical;display: -webkit-box;line-height:1.2em; height:2.4em; word-wrap:break-word;} #ft .banner{ margin-top:30px;} #ft .banner img{ margin-right:20px;} #ft .banner br{ display:none} .ft_menu ul, .ft_info .area{ margin-left:400px;} .ft_info .f_logo{ position:absolute; top:0; left:0;} .ft_info .f_logo img{ width:250px;} .ft_info .sns { position:absolute; right:0; top:0;} .ft_info .sns img{ margin-left:15px;} @media all and (max-width : 1920px){ .cs .s02{ height:170px} .cs .s02 .area .fs23:before{ width:30px; height:30px;} .f_cate,.f_etc1,.f_name,.f_tel{ height:40px;} .f_name, .f_tel, .f_etc1 {margin-left:5px;} .f_cate,.f_etc1,.f_name,.f_tel{ font-size:16px;} .f_submit{ height:40px;} .f_tel{width:calc((100% - 34%) - 205px)} .f_submit{ width:170px;} .bannerZone .bannerZone_list .slick-arrow{ width:35px; height:35px;} .bannerZone .bannerZone_list .slick-prev, .bannerZone .bannerZone_list .slick-next{ background-size:auto 15px;} #sec_01 ul li{ height:350px;} #sec_01 ul li a:hover .area{ top:80px;} #sec_01 .sTit:before{ top:-150px; left:-300px; width:600px; } #sec_02:before{ height:530px;} .main_pro{ padding-top:40px;} .main_pro .pro .area dl dt{ width:47%;} .main_pro .pro .area dl dt img{ height:700px;} .main_pro .pro .area dl dd{ top:150px;} .main_pro .pro .area dl dd .mb30{ margin-bottom:15px;} .main_pro .pro .area dl dd .mb50{ margin-bottom:40px;} .main_pro .pro .area dl dd a{ padding:10px 110px 10px 30px;} .main_pro .pro .area dl dd a i{ top:13px; font-size:20px;} .main_pro .pro .slick-arrow, .main_pro .pro .slick-counter{ top:80px;} #sec_03 .cover{ padding:0 310px;} #sec_03:before{ top:200px;width:474px; height:480px;} #sec_03:after{ top:-400px;width:743px; height:995px; } #sec_03 .area{ margin:0 20px;} #sec_03 .area h1 b{ letter-spacing:13px; margin-left:15px;} #sec_04:before{height:83px;} #sec_04 .area01{ margin-right:100px;} #sec_04 .area02 .s01 .area{ padding:50px 70px ;} #sec_04 .area02{ width:calc((100% - 57%) - 105px); } #sec_04 .area02 .s02, #sec_04 .area02 .s03{ padding:35px 0;} #sec_04 .area02 .s02 img, #sec_04 .area02 .s03 img{ height:50px; margin-bottom:20px;} #sec_06 li:before{ width:40px; height:40px; } #sec_05 li:before{width:55px; height:55px; } .ft_menu ul, .ft_info .area{ margin-left:300px;} .ft_info .f_logo img{ width:200px;} .ft_info .sns img{ width:50px;} } @media all and (max-width : 1800px){ #sec_03 .cover{ padding:0 10%;} #sec_04 .inner{ margin:0 50px;} #sec_04 .area01{ margin-right:50px;} #sec_04 .area02{ width:calc((100% - 57%) - 54px); } } @media all and (max-width : 1700px){ .cs .s02{ height:150px;} .cs .s02 .area{ padding:30px 50px;} #sec_03 .cover{ padding:0 10%;} .main_pro .pro .area dl{ margin:0 50px; } .main_pro .pro .area dl dd .mb50 br{ display:none;} .main_pro .pro .area dl dd .fs35{ margin-bottom:0;} .main_pro .pro .area dl dd .fs80{ font-size:55px; line-height:65px;} .main_pro .pro .area dl dd .fs100{ font-size:65px; line-height:65px;} #sec_03 .area .fs40{ font-size:27px;} #sec_04 .area02 .s01 .area .lunch{ font-size:17px;} } @media all and (max-width : 1400px){ #sec_04 .area02 .s01 .area .lunch{ font-size:15px;} } @media all and (max-width : 1220px){ .cs .s01{position:relative;} .cs .s02{ width:100%; left:0; position:relative;} .cs .s02 .area{ padding:30px;} .f_tel{width:calc((100% - 59%) - 35px)} .f_submit{ width:25%} #sec_01 ul li .area{ left:20px;} #sec_01 ul li{ height:270px;} #sec_01 ul li p br{ display:none;} #sec_01 ul li{ left:0; } #sec_01 ul li a:hover .area{ top:50px; } #sec_01 ul li a:hover .area .fs23 { margin:0 20px;} #sec_01 ul li a{display:block; height:100%; padding:0} #sec_01 ul li a:hover .more{ display:inline-block; padding:7px 30px; border:1px #809bb1 solid; margin-top:30px; color:#ccd7e0; font-size:17px;} #sec_03 .cover{ padding:0;} #sec_03 .area .fs30{ letter-spacing:0; line-height:25px} #sec_03 .fs40{ font-size:25px;} #sec_04{ background:none;} #sec_04::before{ display:none} #sec_04 .area01{ margin-top:0; margin-right:50px;} #sec_04 .area01 .sTit{ position:relative; top:0; margin-bottom:15px;} #sec_04 .area01 .news{ margin-left:0;} #sec_04 .area02 {width: calc((100% - 57%) - 53px);} #sec_06 li{width: calc((100% / 4) - 25px);} #sec_06 li:nth-child(4){ margin-right:0;} #sec_06 li:nth-child(5){ display:none;} #sec_05 .area .fs30{ margin-right:40px} #sec_02::before{height: 430px;} .main_pro .pro .area dl dd .fs35{ margin-bottom:0; font-size:20px;} .main_pro .pro .area dl{ margin:0; } .main_pro .pro .slick-arrow, .main_pro .pro .slick-counter{ bottom:0;} .ft_info .f_logo{ position:relative; text-align:center; margin-bottom:20px;} .ft_info .sns{ position:relative; text-align:center; margin-top:20px;} .ft_menu ul, .ft_info .area{ margin-left:0; text-align:center;} } @media all and (max-width : 960px){ #sec_01 .sTit{ position:relative;} #sec_01 .sTit br{ display:none;} #sec_01 .sTit .fs30{ margin-bottom:0px;} #sec_01 .sTit .fs70{ margin-bottom:30px;} #sec_01 ul li{ width:calc(100% / 2);} #sec_01 ul li:nth-child(1){ margin:0;} #sec_01 ul li:nth-child(5){ width:100%; background:url('../img/main/sec_01_conbg5_m.jpg') no-repeat ;background-size:auto 100%; background-position:100% 100%;} #sec_02::before{ background-size:auto 100%; background-position:30% 100%; height:300px; top:-150px;} #sec_03::before{ display:none} #sec_03 .fs60{ font-size:35px; line-height:43px;} #sec_03 .fs60 br{ display:none;} #sec_03 .cover .pic{ display:none} #sec_03 .area{ margin:0 10px;} #sec_03 .area .m{ display:block; text-align:center;} #sec_03 .area .m img{ width:100%;} #sec_03 .area .fs23{ margin-left:0;} #sec_03 .area h1 b{ letter-spacing:7px; font-size:30px; margin-left:5px} #sec_03 .area .fs55{ margin-bottom:10px; padding-bottom:10px;} #sec_04 .inner{ margin:0 10px;} #sec_04 .area01{ width:100%; margin-right:0;} #sec_04 .area02{ width:100%; margin-bottom:0} #sec_06 li{width: calc((100% / 4) - 10px); margin-right:10px;} #sec_04 .area02 .s01 .area .lunch{ display:inline-block} .main_pro .pro .slick-arrow, .main_pro .pro .slick-counter{ top:0} .main_pro .pro .slick-next{ right:0;} .main_pro .pro .slick-counter{ right:40px;} .main_pro .pro .slick-prev{ right:100px;} .main_pro .pro .area dl dt{ width:100%; text-align:center} .main_pro .pro .area dl dt img{ height:auto; max-height:500px;} .main_pro .pro .area dl dd{ position:relative; left:0; top:0; padding-bottom:20px;} #sec_05 li{width: calc((100% / 2) - 14px);} #sec_05 li:nth-child(1) {margin-right:20px;} .cscroll_768 .ft_menu { width:980px;} } @media all and (max-width : 640px){ .cs .s01{position:relative; width:100%;} .cs .s03{position:relative; width:100%; left:0; height:100px; line-height:27px;} .cs .s03 p{ padding-top:20px;} .cs .s03 p span{ font-size:25px;} #sec_01 ul li{ width:100%;} #sec_03 .fs60{ font-size:30px; line-height:35px;} #sec_03 li{ width:100%; margin:0 0 20px 0;} #sec_03 li:nth-child(3){ margin-bottom:0;} #sec_03 .area .fs30 { text-align:left; display:block} #sec_03 .area .fs30 br{ display:none;} #sec_03 .area .m img{ width:70%;} #sec_05 li{ width:100%;} #sec_05 li:nth-child(1){ margin-right:0; margin-bottom:10px;} #sec_05 .area{ padding:30px;} #sec_06 li{width: calc((100% / 2) - 12px); margin-right:20px;} #sec_06 li:nth-child(1), #sec_06 li:nth-child(2){ margin-bottom:20px;} #sec_06 li:nth-child(2n+2){ margin-right:0;} .main_pro .pro .area dl dt img{ height:auto; width:60%;} #ft .banner img{ height:30px; margin-bottom:5px;} #ft .banner br{ display:block} } @media all and (max-width : 480px){ .f_cate, .f_etc1, .f_name, .f_tel{ height:35px;} .f_cate{ width:29%;} .f_name{ width:22%;} .f_tel {width: calc((100% - 51%) - 20px);} .f_submit{ height:35px; width:100%; margin:10px 0 0 0;} .cs .s02 .area{ padding:30px 20px;} .cs .s02{ height:auto;} .bannerZone .bannerZone_list .slick-prev{ right:40px;} .bannerZone .bannerZone_list .slick-arrow{ width:25px; height:25px;} .bannerZone .bannerZone_list .slick-next{ right:10px;} .bannerZone .bannerZone_list .slick-prev, .bannerZone .bannerZone_list .slick-next{ background-size:auto 10px;} #sec_03 .area .fs30{ text-align:center; letter-spacing:-1px;} #sec_03 .fs60{ font-size:25px; line-height:30px;} #sec_06 li{width: calc((100% / 2) - 7px); margin-right:10px;} #sec_04 .area02 .s01 .area{ padding:30px;} #sec_04 .area02 .s01 .area .fs50{ font-size:35px;} #sec_04 .area02 .s02 .fs20, #sec_04 .area02 .s03 .fs20{ display:none;} #sec_04 .area02 .s02 img, #sec_04 .area02 .s03 img{ height:40px; margin-bottom:10px;} #sec_05 li::before{ width:40px; height:40px;} .main_pro{ padding-top:0;} .main_pro .pro .slick-arrow, .main_pro .pro .slick-counter{ top:100px;} .main_pro .pro .slick-prev{ left:0;} .main_pro .pro .slick-counter{ display:none;} .main_pro .pro .area dl dd .fs80{ font-size:35px; line-height:45px;} .main_pro .pro .area dl dd .fs100{ font-size:45px; line-height:45px;} .cscroll_768 .ft_menu { width:900px;} }