﻿.top { margin-top: 90px; background: url('/upload/brand/bossam_top_img.jpg') no-repeat 100% 100%; height: 300px; position: relative; }
.top .title {color: #fff;font-weight: 800;font-size: 36px;height: 300px;line-height: 300px;text-align: center;}

.sub-tit { margin: 0 auto; margin-top: 80px; margin-bottom: 60px; }
.sub-tit .title { font-size: 28px; font-weight: 800; text-align: center; }

/* 탭 메뉴 */
.tab-menu-wrap {text-align:center; min-width: 1280px; height: 50px;border-bottom: 2px solid #CD261F;margin: 0 auto;margin-top: 35px;}
.tab-menu {display: inline-block;margin-bottom:10px;height: 50px;text-align: center;}
.tab-menu:after { display: block; content: ''; clear:both; }
.tab-menu li {float: left;width: 220px;line-height: 35px;height: 100%;display: inline-block;border-top: 2px solid #d3d3d3;border-right: 2px solid #d3d3d3;border-bottom: 2px solid #CD261F;padding:7px 15px;margin-bottom: -1px;background: #fff;text-align:center;cursor: pointer;font-size: 18px;font-weight: 600; transition: background .4s ease; }
.tab-menu li:first-child { border-left: 1px solid #d3d3d3; }
.tab-menu li.on {border-bottom: none;border-top:2px solid #CD261F;border-left: 2px solid #CD261F;border-right: 2px solid #CD261F; color:#CD261F; background-color:#fff;}
.tab-menu li:not(.on):hover { background-color:#e9e9e9;  }

.m-brand-wrap { display: none; }

.logo-wrap { text-align:center; }
.logo-wrap .brand-logo { margin-top: 50px; margin-bottom: 20px; }

/* 브랜드 스토리 */
#story-section-01 { width: 1280px; margin: 0 auto; margin-top: 80px; background-color: #f9f9f9; vertical-align: middle; position: relative; }
#story-section-01 .img { width: 50%; height: auto; display: inline-block; }
#story-section-01 .img img { width: 100%; height: 100%; }
#story-section-01 .txt { display: inline-block; position:absolute; top: 30%; left: 55%;  }
#story-section-01 .txt p { font-size: 18px; line-height: 24px; font-weight: 600; }
#story-section-01 .txt p.txt-02 { font-size: 28px; color: #d8262f; font-weight: 800; margin-top: 15px; margin-bottom: 20px; }

#story-section-02 { background: url(/upload/brand/bossam_img01.jpg) no-repeat 100% 100%; width: 1480px; margin: 0 auto; margin-top: 80px; height: 700px; position: relative; padding: 7%; }
#story-section-02 .section-title { margin-bottom: 80px; font-size: 32px; color: #fff;font-weight: 800;text-align: center;} 
#story-section-02 .sub-section { text-align: center; }
#story-section-02 .sub-section li { border: 1px solid #fff; display: inline-block; font-size: 18px; padding: 25px; width: 290px; color: #fff; height: 290px; text-align: center; vertical-align: middle; padding-top: 60px; margin-left: 35px; }
#story-section-02 .sub-section li:first-child { margin-left: 0px; }
#story-section-02 .sub-section li .sub-section-title { color: #d8262f; font-size: 24px; font-weight: 800; }
#story-section-02 .sub-section li .sub-section-subtitle { margin-top: 5px; margin-bottom: 15px; }
#story-section-02 .sub-section li .sub-section-txt { font-size: 18px; line-height: 26px; }

.story-section-03 { width: 1480px; margin: 0 auto; margin-top: 80px; height: 700px; position: relative; text-align: center; }
.story-section-03 .section-since { color: #fff; background-color: #d8262f; display: inline-block; padding: 2px 5px; margin-bottom: 15px; font-size: 18px; }
.story-section-03 .section-desc { font-size:  18px; font-weight: 600; margin-bottom: 15px; }
.story-section-03 .section-title { font-size: 36px; color: #d8262f; font-weight: 800; margin-bottom: 30px; }
.story-section-03 .section-txt { font-size: 17px; line-height: 24px; }
.story-section-03 .sub-section { margin-top: 15px; }

.story-section-03 .sub-section li { display: inline-block; font-size: 18px; padding: 25px; color: #fff; text-align: center; vertical-align: middle; padding-top: 60px; margin-left: 35px; } 
.story-section-03 .sub-section li img { width: 200px; height: 200px; }
.story-section-03 .sub-section li .sub-section-title { font-weight: 600; color: #191919; margin-top: 10px; font-size: 22px; }
.story-section-03 .sub-section li .sub-section-txt { color: #191919; font-size: 17px; font-weight: 400; margin-top: 10px; line-height: 24px; }

.story-section-04 { background: url(/upload/brand/bossam_img02.jpg) no-repeat 100% 100%; width: 1480px; margin: 0 auto; margin-top: 80px; height: 700px; position: relative; padding: 7%; }
.story-section-04 .section-title { margin-bottom: 80px; font-size: 32px; color: #fff; font-weight: 800;text-align: center;} 
.story-section-04 .sub-section { text-align: center; }
.story-section-04 .sub-section li { border: 1px solid #fff; display: inline-block; font-size: 18px; padding: 20px; width: 310px; color: #fff; height: 290px; text-align: center; vertical-align: middle; padding-top: 60px; margin-left: 35px; }
.story-section-04 .sub-section li:first-child { margin-left: 0px; }
.story-section-04 .sub-section li .sub-section-title { color: #d8262f; font-size: 24px; font-weight: 800; }
.story-section-04 .sub-section li .sub-section-subtitle { margin-top: 5px; margin-bottom: 15px; }
.story-section-04 .sub-section li .sub-section-txt { font-size: 18px; line-height: 26px; }

/* 메뉴 */
.section {width: 1240px;margin: 0 auto;padding: 10px 20px;margin-top: 50px;}
.section .subtitle { color: #191919; text-align: center; font-size: 18px; font-weight: 600; }
.section .title { color: #d8262f; font-weight: 800; text-align: center; font-size: 24px; letter-spacing: -1px; margin-top: 15px; }

.section .section-menu {margin-top: 20px; display: grid;grid-template-columns: repeat(3, calc(100% / 3));grid-gap: 15px;text-align: left;}
.section .section-menu .menu-item {width: 100%;height: 450px;display: inline-block;text-align: center;vertical-align: top;border: 1px solid #8b8b8b;padding: 8px 8px; position: relative; }
.section .section-menu .menu-item:first-child {}
.section .section-menu .menu-item .img { width: 300px; height: 300px; margin: 0 auto; }
.section .section-menu .menu-item .img img { width: 100%; height: 100%; }

.section .section-menu .menu-item .menu-info {margin-top: 15px;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.section .section-menu .menu-item .menu-info .new-icon {background-color: #d8262f;color: #fff;display: inline-block;padding: 2px 4px;font-weight: 600;margin-bottom: 10px;}
.section .section-menu .menu-item .menu-info .new-icon + .menu-title {margin-top: 0px;}
.section .section-menu .menu-item .menu-info .menu-title {color: #191919;font-weight: 600;font-size: 22px;letter-spacing: -1px;margin-top: 45px;display: flex;}
.section .section-menu .menu-item .menu-info .menu-desc { font-size: 17px; font-weight: 600; margin-top: 10px; letter-spacing: -1px; }
.section .section-menu .menu-item .best-icon {display: inline-block;margin-top: -50px;margin-left: -50px;}

/* 도시락 */
.dosirak.section-01 { width: 1280px; height: 400px;margin: 0 auto; margin-top: 80px; background-color: #f9f9f9; vertical-align: middle; position: relative; display: table;}
.dosirak.section-01 .img { width: 50%; height: auto; display: table-cell; }
.dosirak.section-01 .img img { width: 100%; height: 100%; }
.dosirak.section-01 .txt { display: table-cell; vertical-align: middle;padding-left: 60px;}
.dosirak.section-01 .txt p { font-size: 18px; line-height: 24px; font-weight: 600; }
.dosirak.section-01 .txt p.txt-02 { font-size: 28px; color: #d8262f; font-weight: 800; margin-top: 15px; margin-bottom: 20px; }

.dosirak.section-02 { background: url(/upload/brand/bossam_dosirak_img01.png) no-repeat; background-size: contain; height: 465px;margin: 0 auto; width: 1480px;margin-top: 80px;    }
.dosirak.section-02 .section-title { margin-bottom: 40px; font-size: 30px; color: #fff;font-weight: 800;text-align: center;padding-top: 100px;} 
.dosirak.section-02 .sub-section { text-align: center; }
.dosirak.section-02 .sub-section li { border: 1px solid #fff; display: inline-block; font-size: 18px; padding: 25px; width: 230px; line-height: 100px;color: #fff; height: 160px; text-align: center; vertical-align: middle;  margin-left: 35px; }
.dosirak.section-02 .sub-section li:first-child { margin-left: 0px; }
.dosirak.section-02 .sub-section li .sub-section-title { color: #fff; font-size: 24px; font-weight: 600; }
.dosirak.section-02 .sub-section li .sub-section-subtitle { margin-top: 5px; margin-bottom: 15px; }
.dosirak.section-02 .sub-section li .sub-section-txt { font-size: 18px; line-height: 26px; }

.dosirak.section-03 {width: 1100px;margin: 0 auto;margin-top: 80px;position: relative;text-align: center;}
.dosirak.section-03 .title { color: #d8262f; font-weight: 800; text-align: center; font-size: 24px; letter-spacing: -1px; margin-top: 15px; }
.dosirak.section-03 .sub-section { margin-top: 40px; margin-bottom: 20px; }
.dosirak.section-03 .menu {margin-bottom: 20px;display: grid;grid-template-columns: repeat(3, 1fr);}
.dosirak.section-03 .menu .menu-item {display: inline-block;border: 1px solid #d3d3d3;padding: 30px 20px;margin-right: 20px;margin-top: 20px;text-align: center;}
.dosirak.section-03 .menu .menu-item:last-child { }
.dosirak.section-03 .menu .menu-item .img {width: 300px;height: 300px;display: inline-block;}
.dosirak.section-03 .menu .menu-item .img img { width: 100%; height: 100%; }
.dosirak.section-03 .menu .menu-item .info { margin-top: 20px; font-size: 18px; font-weight: 600; }


.foot-menu-wrap { margin-top: 100px; margin-bottom: 100px; }
.foot-menu { text-align: center; }
.foot-menu li {padding: 15px 20px;background-color: #fff;border: 2px solid #d8262f;border-radius: 25px;display: inline-block;margin-right: 25px;width: 250px;text-align: center;font-size: 18px;font-weight: 600;}
.foot-menu li a { color:#000; text-decoration: none; margin-left: 10px}
.foot-menu li.dosirak { background: url(/content/image/common/dosirak.png) no-repeat #fff; background-size: 32px 25px; background-position: 17% center; }
.foot-menu li.dosirak:hover { background: url(/content/image/common/dosirak_over.png) no-repeat #d8262f; background-size: 32px 25px; background-position: 17% center;  color: #fff;  }
.foot-menu li.dosirak:hover a { color:#fff; }
.foot-menu li.kakao { background: url(/content/image/common/kakao.png) no-repeat #fff; background-size: 25px 25px; background-position: 13% center; }
.foot-menu li.kakao:hover { background: url(/content/image/common/kakao_over.png) no-repeat #d8262f; background-size: 25px 25px; background-position: 13% center; color: #fff;  }
.foot-menu li.kakao:hover a { color:#fff; }
.foot-menu li.interior { background: url(/content/image/common/interior.png) no-repeat #fff; background-size: 25px 25px; background-position: 28% center; }
.foot-menu li.interior:hover { background: url(/content/image/common/interior_over.png) no-repeat #d8262f; background-size: 25px 25px; background-position: 28% center; color: #fff; }
.foot-menu li.interior:hover a { color:#fff; }
.foot-menu li.store { background: url(/content/image/common/store.png) no-repeat #fff; background-size: 25px 25px; background-position: 28% center; }
.foot-menu li.store:hover { background: url(/content/image/common/store_over.png) no-repeat #d8262f; background-size: 25px 25px; background-position: 28% center; color: #fff; }
.foot-menu li.store:hover a { color:#fff; }

