/* Theme Name: Loui Boil Theme URI: Author: GRAVITY STUDIO Author URI: Description: Version: 1.0 License: License URI: Tags: Text Domain: */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap'); /* font-family: 'Noto Sans KR', sans-serif; Thin 100 ExtraLight 200 Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700 ExtraBold 800 Black 900 font-family: 'Montserrat', sans-serif; Thin 100 ExtraLight 200 Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700 ExtraBold 800 Black 900 */ * { margin:0; padding:0; border:0; font-family:'Montserrat','Noto Sans KR', sans-serif; box-sizing:border-box; } html, body { width:100%; height:100%; font-size:11px; color:#666; text-align:center; } html { overflow-y:scroll; } body { background-color:#000000; word-break:break-all; -ms-word-break:break-all; -webkit-text-size-adjust:none; } img,fieldset,iframe { border:0 none; } ul,ol,li { list-style:none; margin:0; padding:0; } em,address { font-style:normal; } img,input,select,textarea { vertical-align:middle; } input, select, textarea { color:#666; font-family:'Noto Sans KR', sans-serif; } input[type=text], input[type=password] { vertical-align:middle; position:relative; border:1px solid #999; height:20px; line-height:20px; padding:0px 10px 0px 10px; } img,fieldset,iframe { border:0 none; } a { color:#818181; text-decoration:none; -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; } a:link { color:#818181; text-decoration:none; -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; } a:visited { color:#818181; text-decoration:none; -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; } a:hover { color:#333333; text-decoration:none; -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; } button,label { cursor:pointer; cursor:pointer; } .blind, legend, caption { display:block; overflow:hidden; position:absolute; left:0; top:-5000px; } hr { display:none; } legend { width:0; } caption { line-height:0; } .text { white-space:nowrap; }/*텍스트줄바꿈방지*/ .link { cursor:pointer; } * {-webkit-text-size-adjust:none} /*모바일 가로시 폰트 커기는거 방지*/ .animation { -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; } legend { display:none;} textarea { border:1px solid #999; } select { border:1px solid #999; height:20px; line-height:20px; } i, .material-symbols-rounded, a, .animate { -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; } .locationWrap, .topWrap, .worldWrap, .menuWrap { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 40px; display: inline-block; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; font-variation-settings:'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 40; } /* .test { color:green; border:1px solid red; display:inline-block; width:100px; height:100px; line-height:100px; text-align:center; font-size:40px; font-variation-settings:'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 20; } .test2 { color:red; border:1px solid red; display:inline-block; width:100px; height:100px; line-height:100px; text-align:center; font-size:40px; font-variation-settings:'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40; } .test3 { color:blue; border:1px solid red; display:inline-block; width:100px; height:100px; line-height:100px; text-align:center; font-size:40px; font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; } */ /*레이어 팝업*/ .layerPop { position:relative; width:90%; max-width:1100px; margin:5% auto; border:2px solid #000; border-radius:5px; display:inline-block; background:#fff; padding:20px; box-sizing:border-box; } .layerPop .content { position:relative; width:100%; display:inline-block; padding:0px 0px 60px 0px; } .layPopContWrap { position:relative; width:100%; display:inline-block; } .layerPop .closeBtn { position:absolute; right:0px; top:0px; width:30px; height:30px; font-size:1.5em; } .laypopLayout { position:relative; width:100%; padding:0px 60px; box-sizing:border-box; display:inline-block; } .overflowHidden { position:fixed; width:100%; height:100%; overflow:hidden !important; box-sizing:border-box; } .blackArea { position:fixed; width:100%; height:100% !important; background:rgba(0,0,0,0.9); z-index:999 !important; left:0px; top:0px; opacity:0; overflow-y:scroll !important; -webkit-overflow-scrolling:touch; } .topWrap { position:fixed; left:0px; top:0px; width:100%; z-index:99; text-align:left; padding:20px; } .topWrap.min { padding:10px; background:rgba(0,0,0,0.8); } .topWrap .logo { display:inline-block; vertical-align:top; width:220px; } .topWrap .logo img { max-width:100%; } .topWrap.min .logo { width:150px; } .topWrap .navi { position:absolute; left:20px; top:50%; transform:translate(0,-50%); z-index:2; } .topWrap .navi .menu { font-size:35px; color:#fff; display:none; } .topWrap .navi:hover .menu { color:#f26522; } .topWrap .insta { position:absolute; right:20px; top:50%; transform:translate(0,-50%); z-index:2; font-size:35px; } .topWrap .insta i { color:#fff; } .topWrap .insta:hover i { color:#f26522; } .worldWrap { position:relative; width:100%; display:inline-block; vertical-align:top; } .worldWrap.deActive { transform:scale(0.9); opacity:0.2; } .mVisual { position:relative; width:100%; height:100vh; min-height:500px; } .mVisual:before { position:absolute; left:0px; top:0px; width:100%; height:30%; background:linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); z-index:1; content:""; } .mVisual:after { position:absolute; left:0px; bottom:0px; width:100%; height:30%; background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); z-index:1; content:""; } .mVisual .typoWrap { position:absolute; left:0px; top:50%; transform:translate(0,-50%); text-align:center; z-index:9; width:100%; } .mVisual .typoWrap > span { display:inline-block; width:100%; vertical-align:top; } .menuWrap { position:fixed; right:20px; top:0px; padding:30px 0px; z-index:99999; } .menuWrap.min { padding:10px 0px; } .closeBtn { display:none; } #menu-gnb { white-space:nowrap; } #menu-gnb > li { display:inline-block; } #menu-gnb > li > a { font-size:16px; font-weight:400; color:#fff; padding:15px 20px; display:inline-block; } .locationWrap { height:27px; position:fixed; right:20px; top:40px; background:#fff; border-radius:15px; z-index:100; font-size:14px; padding:5px 15px; font-weight:500; cursor:pointer; overflow:hidden; } .locationWrap.min { top:20px; } .locationWrap:hover { height:120px; } .locationWrap .btnArea { position:absolute; left:0px; top:40px; width:100%; } .locationWrap .btnArea > a { display:inline-block; vertical-align:top; width:100%; padding:5px 0px; } .locationWrap .icon { display:none; } /* .menuWrap { position:fixed; left:-100%; top:0px; width:100%; max-width:400px; height:100%; background:#fff; padding:80px 40px; z-index:99999; } .menuWrap.active { left:0px; } .closeBtn { position:absolute; right:20px; top:20px; font-size:14px; } .closeBtn .close { font-size:30px; vertical-align:middle; } .closeBtn:hover .close { color:#f26522; } #menu-gnb { position:absolute; left:40px; top:80px; width:calc(100% - 80px); display:inline-block; vertical-align:top; text-align:left; overflow-y:auto; height:calc(100% - 160px); } #menu-gnb > li { position:relative; width:100%; width:100%; } #menu-gnb > li > a { position:relative; display:inline-block; vertical-align:top; width:100%; padding:10px; font-size:18px; font-weight:500; border-radius:5px; } #menu-gnb > li:hover > a { background:#f7f7f7; color:#f26522; } */ .aboutWrap { position:relative; width:100%; display:inline-block; vertical-align:top; padding:0px 20px 0px 20px; text-align:center; background:url("img/aboutbg.png") center bottom no-repeat; } .aboutWrap .aboutus { position:relative; width:100%; max-width:1320px; display:inline-block; vertical-align:top; } .aboutWrap .aboutus > div { width:50%; float:left; padding:10px; } .aboutWrap .aboutus .leftWrap { position:relative; text-align:left; padding:0px 100px 0px 0px; } .aboutWrap .aboutus .leftWrap .txt3 { line-height:1; padding:20px 50px 70px 0px; } .aboutWrap .aboutus .leftWrap .txt4 { line-height:1.6; margin:0px 0px 80px 0px; } .aboutWrap .aboutus .rightWrap { position:relative; text-align:right; } .aboutWrap .aboutus .rightWrap .txt4 { line-height:1.6; text-align:left; padding:60px 10px 0px 10px; } .aboutWrap .aboutus .rightWrap .btnType1 { position:absolute; left:-40px; top:260px; box-shadow:0px 20px 30px rgba(0,0,0,1); } .aboutWrap .aboutus img { box-shadow:0px 30px 30px rgba(0,0,0,0.8); } .reservationsWrap { position:relative; width:100%; padding:50px 20px; background:#9f0001; } .reservationsWrap .txt4 { line-height:1.6; margin:30px 0px 40px 0px; } .reservationsWrap .btnType2 { box-shadow:0px 20px 30px rgba(0,0,0,0.4); } .foodMenuWrap { position:relative; width:100%; display:inline-block; vertical-align:top; padding:70px 20px 400px 20px; text-align:center; background:url("img/menubg.png") center top no-repeat; } .foodMenuWrap .foodMenu { position:relative; width:100%; max-width:1320px; display:inline-block; vertical-align:top; } .foodMenuWrap .foodMenu > div { float:left; padding:10px; } .foodMenuWrap .foodMenu .leftWrap { position:relative; width:40%; text-align:left; padding:0px 100px 0px 0px; } .foodMenuWrap .foodMenu .leftWrap .txt3 { line-height:1; padding:20px 50px 70px 0px; } .foodMenuWrap .foodMenu .leftWrap .txt4 { line-height:1.6; margin:0px 0px 80px 0px; } .foodMenuWrap .foodMenu .rightWrap { position:relative; width:60%; text-align:right; padding:250px 0px 0px 0px; } .foodMenuWrap .foodMenu .rightWrap .txt4 { line-height:1.6; margin:0px 0px 80px 0px; padding:0px 60px; } .foodMenuWrap .foodMenu .rightWrap .btnType1 { position:relative; z-index:9; } .foodMenuWrap .foodMenu .rightWrap .btnType1 a { position:absolute; left:60px; top:-30px; white-space:nowrap; box-shadow:0px 30px 30px rgba(0,0,0,0.8); } .foodMenuWrap .foodMenu img { box-shadow:0px 30px 30px rgba(0,0,0,0.8); } .galleryWrap { position:relative; width:100%; display:inline-block; vertical-align:top; text-align:center; } .galleryWrap .galleryArea { position:relative; width:100%; margin:-250px 0px 100px 0px; background:none; } .galleryWrap .galleryList { background:none; } .googleMap { position:relative; width:100%; } .googleMap iframe { width:100% !important; height:500px !important; } .ourstoryWrap { position:relative; width:100%; display:inline-block; vertical-align:top; padding:768px 0px 0px 0px; background:url("img/ourstory.jpg") center top no-repeat; background-size:cover !important; } .ourstorytxt { max-width:830px; margin:0 auto !important; padding:50px 0px 200px 0px; text-align:left; } .footer { position:relative; width:100%; display:inline-block; vertical-align:top; text-align:center; } .footer .container { position:relative; width:100%; max-width:1320px; display:inline-block; padding:30px 0px; } .footer .container .col { position:relative; width:25%; float:left; text-align:left; padding:20px; line-height:1.7; } .footer .container .col strong { font-weight:500; margin:0px 0px 30px 0px; display:inline-block; vertical-align:top; width:100%; color:#fff; } .footer .container .col a:hover { color:#fff; } .socialLink { position:relative; width:100%; display:inline-block; vertical-align:top; } .socialLink a { display:inline-block; width:32px; height:32px; line-height:32px; color:#000000; background:#ffffff; border-radius:999px; text-align:center; } .socialLink a i { width:32px; height:32px; line-height:32px; color:#000; font-size:20px; } .socialLink a:hover { background:#9f0001; } .socialLink a:hover i { color:#ffffff; } .wp-block-algori-pdf-viewer-block-algori-pdf-viewer { width:100%; max-width:1300px; margin:150px auto; } .wp-block-algori-pdf-viewer-block-algori-pdf-viewer > iframe { width:100% !important; height:700px !important; } .instaList { position:relative; width:100%; max-width:1300px; margin:50px auto 0px auto !important; display:block !important; } .copyRight { position:relative; width:100%; border-top:1px solid #333333; padding:20px; font-size:15px; } .mAboutArea { position:relative; width:100%; margin:0px 0px 100px 0px; padding:0px 10px; } .mAboutArea div > p { margin:0px 0px 10px 0px; } .mAboutArea div > p:last-child { margin:0px 0px 0px 0px; } .txt1 { font-size:74px; font-weight:600; } .txt2 { font-size:20px; font-weight:500; } .txt3 { font-size:49px; font-weight:600; } .txt4 { font-size:17px; font-weight:500; } .txt5 { font-size:16px; font-weight:500; } .colorWhite { color:#ffffff; } .colorRed { color:#9f0001; } .colorGray { color:#a7a7a7; } .colorOpt { opacity:0.7; } .btnType1 a { background:#9f0001; color:#fff; font-size:17px; font-weight:500; padding:17px 30px; border-radius:0px; text-transform:uppercase; } .btnType1 a:hover { background:#f26522; } .btnType2 a { background:#000000; color:#fff; font-size:17px; font-weight:500; padding:17px 30px; border-radius:0px; text-transform:uppercase; } .btnType2 a:hover { background:#f26522; } #order a { background:#000; padding:10px 20px; border:1px solid rgba(255,255,255,0.4); } #order { margin:150px 0px; } #order_lay { max-width:1300px; margin:80px auto; } @media only screen and (max-width : 1250px) { #menu-gnb > li > a { padding:15px 10px; } .ourstoryWrap { padding:568px 0px 0px 0px; } .ourstorytxt { padding:50px 0px 200px 0px; } } @media only screen and (max-width : 1200px) { .topWrap { text-align:center; } .menuWrap { position:fixed; left:-100%; top:0px; width:100%; max-width:400px; height:100%; background:#fff; padding:80px 40px; z-index:99999; transform:translate(0,0); } .menuWrap.active { left:0px; } .closeBtn { position:absolute; right:20px; top:20px; font-size:14px; display:block; } .closeBtn .close { font-size:30px; vertical-align:middle; } .closeBtn:hover .close { color:#f26522; } #menu-gnb { position:absolute; right:40px; top:80px; width:calc(100% - 80px); display:inline-block; vertical-align:top; text-align:left; overflow-y:auto; height:calc(100% - 160px); white-space:normal; } #menu-gnb > li { position:relative; width:100%; width:100%; } #menu-gnb > li > a { position:relative; display:inline-block; vertical-align:top; width:100%; padding:10px; font-size:18px; font-weight:500; border-radius:5px; color:#333333; } #menu-gnb > li:hover > a { background:#f7f7f7; color:#f26522; } .topWrap .navi .menu { display:block; } } @media only screen and (max-width : 850px) { .aboutWrap .aboutus .leftWrap .txt3 { padding:20px 0px 70px 0px; } .foodMenuWrap .foodMenu .leftWrap { width:50%; padding:0px 50px 0px 0px; } .foodMenuWrap .foodMenu .leftWrap .txt3 { padding:20px 0px 70px 0px; } .foodMenuWrap .foodMenu .rightWrap { width:50%; padding:100px 0px 0px 0px; } .foodMenuWrap .foodMenu .rightWrap .txt4 { margin:0px 0px 80px 0px; padding:0px 20px; } .foodMenuWrap .foodMenu .rightWrap .btnType1 a { left:20px; } .footer .container .col { width:50%; } .ourstoryWrap { padding:400px 0px 0px 0px; } .ourstorytxt { padding:50px 0px 100px 0px; } .locationWrap .txt { display:none; } .locationWrap .icon { display:block; font-size:20px; } } @media only screen and (max-width : 640px) { .mVisual { height:auto; /* min-height:170px; margin-top:150px; */ } .mVisual:before { height:10%; } .mVisual:after { height:10%; } .aboutWrap { background:url("img/aboutbg.png") -1100px bottom no-repeat; } .aboutWrap .aboutus > div { width:100%; } .aboutWrap .aboutus .leftWrap { padding:0px 0px 0px 0px; } .aboutWrap .aboutus .leftWrap .txt3 { padding:20px 50px 50px 0px; } .aboutWrap .aboutus .leftWrap .txt4 { margin:0px 0px 50px 0px; } .aboutWrap .aboutus .rightWrap { padding:0px; } .aboutWrap .aboutus .rightWrap img { display:none; } .aboutWrap .aboutus .rightWrap .txt4 { padding:40px 0px 0px 0px; } .aboutWrap .aboutus .rightWrap .btnType1 { position:relative; left:auto; top:auto; box-shadow:0px 20px 30px rgba(0,0,0,1); margin:20px 0px 0px 0px; } .foodMenuWrap .foodMenu .leftWrap { width:100%; padding:0px 0px 0px 0px; } .foodMenuWrap .foodMenu .leftWrap .txt3 { padding:20px 0px 40px 0px; } .foodMenuWrap .foodMenu .rightWrap { width:100%; padding:50px 0px 0px 0px; } .txt1 { font-size:34px; } .txt2 { font-size:16px; } .btnType1 a { background:#9f0001; color:#fff; font-size:15px; font-weight:500; padding:13px 26px; border-radius:0px; text-transform:uppercase; } .locationWrap { top:30px; } .topWrap .logo { width:160px; } .topWrap.min .logo { width:160px; } .topWrap .navi .menu { font-size:30px; } .topWrap .insta { font-size:30px; } .wp-block-algori-pdf-viewer-block-algori-pdf-viewer { width:100%; max-width:1300px; height:calc(100vh - 300px); margin:150px auto; } .wp-block-algori-pdf-viewer-block-algori-pdf-viewer > iframe { width:100% !important; height:100% !important; } .footer .container .col { width:100%; } .footer .container .col:last-child a { display:inline-block; width:100%; } } @media only screen and (max-width : 414px) { .txt1 { font-size:40px; } .txt2 { font-size:16px; } .txt3 { font-size:40px; } .txt4 { font-size:16px; } .footer .container .col { width:100%; } .footer .container .col strong { margin:0px 0px 10px 0px; } } input[type=checkbox], input[type=radio] { vertical-align: middle; position: relative; bottom: 1px; } input[type=radio] { bottom: 2px; }