/* BASIC css start */ #header{position:fixed !important; top:0; left:50%; transform:translateX(-50%); background:transparent !important;transition:background-color .2s} #header.scroll{background-color:rgba(255,255,255,1.99) !important; } /* 원본 rgba(255,255,255,.88) 스크롤시 상단바에 비치지 않게 .88 수치를 조절 */ /* 섹션공통 */ .section{margin-bottom: 70px;} .sec_inner{padding:0 5%} .section h2{font-family: 'Montserrat', sans-serif; font-size: 20px; color: #000; font-weight: 700; margin-bottom: 30px; line-height: 1.3;} .section h5{font-family: 'Montserrat', sans-serif; font-size: 20px; color: #000; font-weight: 700; margin-bottom: 30px; line-height: 1.3;} .section h1{font-family: 'Montserrat', sans-serif; font-size: 15px; color: #939597; font-weight: 500; margin-bottom: 30px; margin-top:-40px; line-height: 1.3;} .section h3{font-family: 'Montserrat', sans-serif; font-size: 15px; color: #939597; font-weight: 500; margin-bottom: 30px; margin-top:5px; line-height: 1.3;} .section h0{font-family: 'Montserrat', sans-serif; font-size: 20px; color: #000; font-weight: 700; margin-bottom: 10px; line-height: 1.3;} .section h4{font-family: 'Montserrat', sans-serif; font-size: 15px; color: #939597; font-weight: 500; margin-bottom: 30px; margin-top:-12px; line-height: 1.3;} .section h2:has(a){display: flex; justify-content: space-between; align-items: center;} .section h2:has(a) a{text-decoration: underline; color: #000;font-family: 'Montserrat', sans-serif; font-size: 12px;font-weight: 600;} .section h6{font-family: 'Montserrat', sans-serif; font-size: 17px; color: #000; font-weight: 700; margin-bottom: 15px; margin-left: 10px; line-height: 1.5; text-align: center;} .section h6:has(a) a{text-decoration: color: #000;font-family: 'Montserrat', sans-serif; font-size: 12px;font-weight: 600; margin-left: 20px;} .section h7{font-family: 'Montserrat', sans-serif; font-size: 12px; color: #747272; font-weight: 600; margin-left: 10px; line-height: 1.3; text-align: center;} .section h7:has(a) a{ color: #747272;font-family: 'Montserrat', sans-serif; font-size: 12px;font-weight: 600; margin-left: 150px;} /* +follow 위치중앙 */ /* sec1 */ #sec1{} #sec1 .swiper{} #sec1 .swiper ul{} #sec1 .swiper ul li{position: relative;} #sec1 .swiper ul li>a{display: block;width: 100%; height: 350px; margin-top:95px;} /* height: 480px; 메인이미지 세로 사이즈 제한을 위한 생성 margin-top:130px; 메인이미지 적절한 위치 */ #sec1 .swiper ul li>a>img{width: 100%;} #sec1 .swiper ul li .txt_area{overflow: visible; position: absolute; left: 0%; bottom: 0% ; width:100%; padding:0 7% 100px 5%; } /* 원본 left: 0%; bottom: 0% ; padding:0 7% 100px 5%; 여기서 100px은 텍스트 위치 */ #sec1 .swiper ul li .txt_area p{ font-family: 'Montserrat', sans-serif; opacity: 0;} #sec1 .swiper ul li .txt_area.act p{transform: translateY(30px); opacity: 1;} /* 원본 translateY(30px); */ #sec1 .swiper ul li .txt_area.act a.more{transform: translateY(30px); opacity: 1;} /* 원본 translateY(30px); */ #sec1 .swiper ul li .txt_area.act a.more2{transform: translateY(90px); opacity: 1;} #sec1 .swiper ul li .txt_area p.big{font-size: 15px; color: #414040; font-weight: 800; transition: all .5s;line-height: 1.2; margin-bottom: 11px;} #sec1 .swiper ul li .txt_area p.big3{font-size: 19px; color: #fff; font-weight: 800; transition: all .5s;line-height: 1.2; margin-bottom: 11px;} #sec1 .swiper ul li .txt_area p.big2{font-size: 22px; color: #fff; font-weight: 800; transition: all .5s;line-height: 1.05; margin-bottom: 11px;} #sec1 .swiper ul li .txt_area p.sub{color: #fff; font-size: 15px; font-weight: 500; transition: all .4s; transition-delay: .25s; line-height: 1.6;} #sec1 .swiper ul li .txt_area p.sub2{color: #000; font-size: 14px; font-weight: 500; transition: all .4s; transition-delay: .25s; line-height: 1.4;} #sec1 .swiper ul li .txt_area a.more{width:auto; font-family: 'Montserrat', sans-serif; background-color: #a51e22; transition: transform .4s, opacity .4s;display: inline-block;opacity: 0; transition-delay: .4s; border: 0px solid #fff ;padding: 5px 30px; color: #fff; font-size: 12px; font-weight: 600; margin-top: 25px; } /* 원본 background-color: #000; */ #sec1 .swiper ul li .txt_area a.more2{width:auto; font-family: 'Montserrat', sans-serif; background-color: opacity: 0; transition: transform .4s, opacity .4s;display: inline-block;opacity: 0; transition-delay: .4s; border: 0px solid #fff ; padding: 130px 160px; color: #fff; font-size: 12px; font-weight: 600; margin-top: 25px; } /* 원본 background-color: #000; */ #sec1 .swiper ul li .txt_area a.more:active{background-color: #000; color: #fff;} #sec1 .swiper-pagination{width: auto; top: 70%; right: 5%;transform:translateY(-50%); bottom: unset; left: unset; z-index: 19; } #sec1 .swiper-pagination-bullet{background-color: #000; display: block;margin: 9px 0;transform:scale(.8); opacity:var(--swiper-pagination-bullet-inactive-opacity, .4)} #sec1 .swiper-pagination-bullet-active{opacity:1} #sec1 .swiper_btn_next{position: absolute; bottom: 25px; z-index: 10; left: 50%; transform: translateX(-50%); cursor: pointer; } #sec1 .swiper-button-disabled{opacity: .3;} #sec1 .swiper_btn_next img{transform:scale(.66); transform-origin:center center} /* 메인 중앙위치시 메뉴랩(6칸) */ #sec1 .menu_wrap{width: 100%; min-width: 320px; max-width: 850px;} #sec1 .menu_wrap ul{width: 100%; display: flex; flex-wrap: wrap;} #sec1 .menu_wrap ul li{width: 33%; text-align: center; border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;} /* width: 25%; 가로칸 갯수(4칸) */ #sec1 .menu_wrap ul li:nth-child(3n){border-right:none !important} /* 세로줄 갯수 :nth-child(3n) */ #sec1 .menu_wrap ul li a{display: block; padding: 10px 0; color:#333; font-size:13px; font-family: 'Noto Sans KR', sans-serif; font-weight:400} /* 그리드메뉴 상단위치시(6칸) */ .grid4 { display: flex; flex-wrap: wrap; background: #fff; margin-top:70px;} /* 메인에서 그리드메뉴 위치에 필요 margin-top:70px; */ .grid4 li {width: 33.333%;overflow: hidden;} .grid4 li a { display: block; line-height: 34px; height: 34px; border: 0.6px solid #c1c1c1; border-width: 0 1px 1px 0; text-align: center; font-size: 12px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } /* 메인배너 아래 배너 */ #mainBnSet { padding:20px 3px 5px; position:relative } /* padding:3px 3px 28px; */ #mainBnSet ul { *zoom:1 } #mainBnSet ul:after { display:block; clear:both; content:'' } #mainBnSet ul li { float:left; width:50% } #mainBnSet ul li a { display:block; padding:2px } #mainBnSet ul li a img { width:100% } #mainBnSet2 { padding:0px 3px 0px; position:relative } /* padding:3px(탑간격) 3px 28px;(bottom 간격) */ #mainBnSet2 ul { *zoom:1 } #mainBnSet2 ul:after { display:block; clear:both; content:'' } #mainBnSet2 ul li { float:left; width:100% } #mainBnSet2 ul li a { display:block; padding:2px } #mainBnSet2 ul li a img { width:100% } /* sec2 */ #sec2{margin-top:-30px;} /* 간격을 위해 생성 */ #sec2 .sec_inner{padding:0} #sec2 .sec_inner h2{padding:0 5%} #sec2 .sec_inner h1{text-align: center;} #sec2 .sec_inner .sec2_cont{} #sec2 .sec_inner .sec2_cont .swiper{ padding-left:5%;padding-bottom: 30px;} #sec2 .sec_inner .sec2_cont .swiper ul{} #sec2 .sec_inner .sec2_cont .swiper ul li{width:42%} #sec2 .sec_inner .sec2_cont .swiper ul li>a{display: block; width: 100%;overflow:hidden;} #sec2 .sec_inner .sec2_cont .swiper ul li>a>img{width: 100%; transition: all .3s;} #sec2 .sec_inner .sec2_cont .swiper ul li .txt_area{ padding: 15px 0;} #sec2 .sec_inner .sec2_cont .swiper ul li .txt_area p.tit{text-align: center; font-size: 14px; color: #000; font-family: 'Montserrat', sans-serif; font-weight: 500;} /* 원본 font-size:12px; */ #sec2 .sec_inner .sec2_cont .swiper ul li .txt_area p.tit2{text-align: center; font-size: 13px; color: #8d8d8d; font-family: 'Montserrat', sans-serif; font-weight: 400;} #sec2 .swiper-pagination{bottom: 0; top: unset; width:90%; left:5%} #sec2 .swiper-pagination-progressbar{background-color: rgba(0,0,0,.05);} #sec2 .swiper-pagination-progressbar-fill{background-color: #cfcfcf;} /* sec3 */ #sec3{margin-top:-20px;} #sec3 .sec_inner{} #sec3 .sec_inner h0{} #sec3 .sec_inner h3{text-align: center;margin-top:10px; margin-bottom:30px;} #sec3 .sec_inner .sec3_cont{} #sec3 .sec_inner .sec3_cont ul{display: flex; flex-wrap:wrap; gap:20px 5%} #sec3 .sec_inner .sec3_cont ul li a{display:block; width:100%} #sec3 .sec_inner .sec3_cont ul li a img{width:100%} #sec3 .sec_inner .sec3_cont ul li:nth-child(1){width:100%} #sec3 .sec_inner .sec3_cont ul li:nth-child(1) .thumb img{} #sec3 .sec_inner .sec3_cont ul li:not(:nth-child(1)){width:47.5%} #sec3 .sec_inner .sec3_cont ul li:not(:nth-child(1)) .thumb img{} /* sec4 */ #sec4{margin-top:-30px;} #sec4 .sec_inner{padding:0} #sec4 .sec_inner h5{ padding:0 5%; margin-bottom:20px} #sec4 .sec_inner h4{text-align: center; margin-bottom:30px; margin-top:10px;} #sec4 .sec_inner .sec4_cate{margin-bottom: 10px; padding:0 5%} #sec4 .sec_inner .sec4_cate ul{display:flex; gap:8px; flex-wrap:wrap; } #sec4 .sec_inner .sec4_cate ul li{} #sec4 .sec_inner .sec4_cate ul li a{display:block; width:100%;background-color: #f6f6f6; border-radius: 20px; padding: 8px 16px; text-align:center; font-family: 'Montserrat', sans-serif; color:#5a5a5a; font-size: 15px; font-weight: 500; display:block;} #sec4 .sec_inner .sec4_cate ul li.on>a{ color: #fff;background-color: #000;} #sec4 .sec_inner .sec4_cate ul li a:hover{background-color: #000; color: #fff;} #sec4 .sec4_prd{} #sec4 .sec4_prd>div{display: none; position:relative;} #sec4 .sec4_prd>div ul{display:flex; flex-wrap:wrap; gap:20px 5%} #sec4 .sec4_prd>div.show{display: block;} #sec4 .sec4_prd>div ul li a{display:block; width:100%} #sec4 .sec4_prd>div ul li a img{width:100%} #sec4 .sec4_prd>div ul li:not(:first-child){width:47.5%} #sec4 .sec4_prd>div ul li:is(:nth-child(2),:nth-child(4),:nth-child(6)){padding-left:5%} #sec4 .sec4_prd>div ul li:is(:nth-child(3),:nth-child(5),:nth-child(7)){padding-right:5%} #sec4 .sec4_prd>div ul li:nth-child(1){width:100%;margin-bottom:20px } #sec4 .sec4_prd>div ul li.sec4_cont_li .inner{padding: 10px 25px 55px;} #sec4 .sec4_prd>div ul li.sec4_cont_li .inner :is(*){color: #fff;font-family: 'Montserrat', sans-serif;} #sec4 .sec4_prd>div ul li.sec4_cont_li .inner h3{font-size: 20px; font-weight: 700;opacity: 0; transition: all .4s;line-height: 1.3; margin-bottom: 10px;} #sec4 .sec4_prd>div ul li.sec4_cont_li .inner p.sub{font-size: 13px; font-weight: 400; opacity: 0; transition: all .4s; transition-delay: .2s; line-height: 1.6;} #sec4 .sec4_prd>div ul li.sec4_cont_li .inner a{ font-family: 'Montserrat', sans-serif;opacity: 0; transition: transform .4s, opacity .4s;display: inline-block;width:auto; transition-delay: .35s; border: 1px solid #fff ;padding: 5px 40px; color: #fff; font-size: 13px; font-weight: 400; margin-top: 25px;} /* more 사이즈 font-size: 10px; */ #sec4 .sec4_prd>div.act ul li.sec4_cont_li .inner h3{transform: translateY(20px); opacity: 1;} #sec4 .sec4_prd>div.act ul li.sec4_cont_li .inner p{transform: translateY(20px); opacity: 1;} #sec4 .sec4_prd>div.act ul li.sec4_cont_li .inner a{transform: translateY(20px); opacity: 1;} /* 아래에서 각 영역의 텍스트박스 색상 변경이 가능합니다*/ #sec4 .sec4_prd>div:nth-child(1) ul li:nth-child(1){background-color: #192172;} /* #abbac9 */ #sec4 .sec4_prd>div:nth-child(2) ul li:nth-child(1){background-color: maroon;} /* salmon #fd6060; */ #sec4 .sec4_prd>div:nth-child(3) ul li:nth-child(1){background-color: teal;} /* sandybrown; */ #sec4 .sec4_prd>div:nth-child(4) ul li:nth-child(1){background-color: coral;} #sec4 .sec4_prd>div:nth-child(5) ul li:nth-child(1){background-color: thistle;} #sec4 .sec4_prd>div:nth-child(6) ul li:nth-child(1){background-color: darkcyan;} #sec4 .sec4_prd>div:nth-child(7) ul li:nth-child(1){background-color: cornflowerblue;} #sec4 .sec4_prd>div:nth-child(8) ul li:nth-child(1){background-color: coral;} #sec4 .sec4_prd>div:nth-child(9) ul li:nth-child(1){background-color: maroon;} /* sec5 */ #sec5{margin-top:-30px;} #sec5 .sec_inner{padding:0} #sec5 .sec_inner h5{ padding:0 5%; margin-bottom:20px} #sec5 .sec_inner h4{ text-align: center;; margin-bottom:10px; margin-top:10px;} #sec5 .sec_inner .sec5_cate{margin-bottom: 10px; padding:0 5%} #sec5 .sec_inner .sec5_cate ul{display:flex; gap:8px; flex-wrap:wrap; } #sec5 .sec_inner .sec5_cate ul li{} #sec5 .sec_inner .sec5_cate ul li a{display:block; width:100%;background-color: #f6f6f6; border-radius: 20px; padding: 8px 16px; text-align:center; font-family: 'Montserrat', sans-serif; color:#5a5a5a; font-size: 10px; font-weight: 500; display:block;} #sec5 .sec_inner .sec5_cate ul li.on>a{ color: #fff;background-color: #000;} #sec5 .sec_inner .sec5_cate ul li a:hover{background-color: #000; color: #fff;} #sec5 .sec5_prd{} #sec5 .sec5_prd>div{display: none; position:relative;} #sec5 .sec5_prd>div ul{display:flex; flex-wrap:wrap; gap:15px 5%} /* gap:20px */ #sec5 .sec5_prd>div.show{display: block;} #sec5 .sec5_prd>div ul li a{display:block; width:100%} #sec5 .sec5_prd>div ul li a img{width:100%} #sec5 .sec5_prd>div ul li:not(:first-child){width:47.5%} #sec5 .sec5_prd>div ul li:is(:nth-child(2),:nth-child(4),:nth-child(6)){padding-left:5%} #sec5 .sec5_prd>div ul li:is(:nth-child(3),:nth-child(5),:nth-child(7)){padding-right:5%} #sec5 .sec5_prd>div ul li:nth-child(1){width:100%;margin-bottom:20px; } #sec5 .sec5_prd>div ul li.sec5_cont_li .inner{padding: 10px 25px 55px;} #sec5 .sec5_prd>div ul li.sec5_cont_li .inner :is(*){color: #828181;font-family: 'Montserrat', sans-serif;} #sec5 .sec5_prd>div ul li.sec5_cont_li .inner h3{font-size: 25px; font-weight: 700;opacity: 0; transition: all .4s;line-height: 1.3; margin-bottom: 10px;} #sec5 .sec5_prd>div ul li.sec5_cont_li .inner p.sub{font-size: 13px; font-weight: 400; opacity: 0; transition: all .4s; transition-delay: .2s; line-height: 1.6;} #sec5 .sec5_prd>div ul li.sec5_cont_li .inner a{ font-family: 'Montserrat', sans-serif;opacity: 0; transition: transform .4s, opacity .4s;display: inline-block;width:auto; transition-delay: .35s; border: 1px solid #828181 ;padding: 5px 40px; color: #828181; font-size: 10px; font-weight: 400; margin-top: 25px;} #sec5 .sec5_prd>div.act ul li.sec5_cont_li .inner h3{transform: translateY(20px); opacity: 1;} #sec5 .sec5_prd>div.act ul li.sec5_cont_li .inner p{transform: translateY(20px); opacity: 1;} #sec5 .sec5_prd>div.act ul li.sec5_cont_li .inner a{transform: translateY(20px); opacity: 1;} /* 아래에서 각 영역의 텍스트박스 색상 변경이 가능합니다*/ #sec5 .sec5_prd>div:nth-child(1) ul li:nth-child(1){background-color: #f5f5f5;} /* #sec5 .sec5_prd>div:nth-child(1) ul li:nth-child(1){background:url(/design/asianbean/atype/PC_img/findus.jpg)} */ #sec5 .sec5_prd>div:nth-child(2) ul li:nth-child(1){background-color: maroon;} /* salmon #fd6060; */ #sec5 .sec5_prd>div:nth-child(3) ul li:nth-child(1){background-color: teal;} /* sandybrown; */ #sec5 .sec5_prd>div:nth-child(4) ul li:nth-child(1){background-color: thistle;} #sec5 .sec5_prd>div:nth-child(5) ul li:nth-child(1){background-color: thistle;} #sec5 .sec5_prd>div:nth-child(6) ul li:nth-child(1){background-color: darkcyan;} #sec5 .sec5_prd>div:nth-child(7) ul li:nth-child(1){background-color: cornflowerblue;} #sec5 .sec5_prd>div:nth-child(8) ul li:nth-child(1){background-color: coral;} #sec5 .sec5_prd>div:nth-child(9) ul li:nth-child(1){background-color: maroon;} /* sec6 */ #sec6 a{display:block; width:100%} #sec6 a img{width:100%} #instagram{ margin: 0 5px; margin-bottom:15px; margin-top:10px;} #instagram h2{margin-left:0 !important} #instagram img{} /* BASIC css end */