You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
715 lines
18 KiB
715 lines
18 KiB
/**********************************************************************************************************************
|
|
* 메인페이지
|
|
***********************************************************************************************************************/
|
|
#main{
|
|
width:100%;
|
|
.box {
|
|
position: relative;
|
|
overflow: hidden;
|
|
.box-link{
|
|
width:100%;
|
|
height:100%;
|
|
position:absolute;
|
|
left:0;
|
|
top:0;
|
|
}
|
|
}
|
|
|
|
.main-top {
|
|
@include display-flex();
|
|
align-items: stretch;
|
|
justify-content: space-between;
|
|
@include display-xs(){
|
|
flex-direction: column;
|
|
}
|
|
.line-01 {
|
|
width:REM(169px);
|
|
.label-wrap {
|
|
display: none;
|
|
}
|
|
@include display-xs(){
|
|
.label-wrap {
|
|
display: initial;
|
|
}
|
|
#nav {
|
|
.menu-list,
|
|
.family-list {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.line-02 {
|
|
width:REM(416px);
|
|
@include display-flex();
|
|
flex-direction: column;
|
|
.top{
|
|
border:REM(1px) solid #C8C8C8FF;
|
|
border-radius: REM(15px);
|
|
width:REM(417px);
|
|
height:REM(234px);
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
position:relative;
|
|
}
|
|
.bottom {
|
|
margin-top:REM(12px);
|
|
@include display-flex();
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
.left {
|
|
position: relative;
|
|
border-radius: REM(15px);
|
|
width: REM(229px);
|
|
height: REM(229px);
|
|
background-color:#33CC99FF;
|
|
overflow:hidden;
|
|
border:REM(1px) solid #C8C8C8FF;
|
|
.link {
|
|
width: 100%;
|
|
height:100%;
|
|
padding:REM(15px);
|
|
@include display-flex();
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
.title {
|
|
font-size:REM(36.83px);
|
|
font-weight:$font-weight-extra-bold;
|
|
line-height:1.15;
|
|
color:#fff;
|
|
font-family: $font-family-base;
|
|
padding-bottom:REM(28px);
|
|
position:relative;
|
|
&:before{
|
|
content:"";
|
|
width:REM(66px);
|
|
height:REM(5px);
|
|
background-color:#fff;
|
|
position:absolute;
|
|
left:0;
|
|
bottom:REM(12px);
|
|
}
|
|
}
|
|
.date{
|
|
display: block;
|
|
margin-bottom:REM(12px);
|
|
> dd {
|
|
font-size:REM(18.25px);
|
|
color:#fff;
|
|
}
|
|
}
|
|
.info {
|
|
padding:0;
|
|
li {
|
|
font-size:REM(15.23px);
|
|
color:#fff;
|
|
margin-bottom:REM(5px);
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
.box {
|
|
border:REM(1px) solid #C8C8C8FF;
|
|
border-radius: REM(15px);
|
|
position:relative;
|
|
background-size:cover;
|
|
overflow:hidden;
|
|
&.top{
|
|
width: REM(179px);
|
|
height: REM(107px);
|
|
overflow: hidden;
|
|
}
|
|
&.bottom{
|
|
width: REM(179px);
|
|
height: REM(111px);
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include display-xs(){
|
|
width:100%;
|
|
position:relative;
|
|
.top {
|
|
width:100%;
|
|
height:REM(368px / 3);
|
|
border-radius: REM(20px / 3);
|
|
}
|
|
.bottom {
|
|
flex-direction: row-reverse;
|
|
margin-top:REM(20px / 3);
|
|
background-position: center;
|
|
.left {
|
|
border-radius: REM(20px / 3);
|
|
width: REM(310px / 3);
|
|
height: REM(367px / 3);
|
|
border:REM(1px) solid #C8C8C8FF;
|
|
.link {
|
|
padding:REM(20px / 3);
|
|
@include display-flex();
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
.title {
|
|
font-size:REM(53px / 3);
|
|
font-family: $font-family-base;
|
|
padding-bottom:REM(50px / 3);
|
|
position:relative;
|
|
&:before{
|
|
width:REM(98px / 3);
|
|
height:REM(10px / 3);
|
|
background-color:#fff;
|
|
bottom:REM(24px / 3);
|
|
}
|
|
}
|
|
.date{
|
|
margin-bottom:REM(15px / 3);
|
|
> dd {
|
|
font-size:REM(27px / 3);
|
|
}
|
|
}
|
|
.info {
|
|
li {
|
|
font-size:REM(22px / 3);
|
|
margin-bottom:REM(10px / 3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
.box {
|
|
border-radius: REM(20px / 3);
|
|
&.top{
|
|
width: REM(335px / 3);
|
|
height: REM(235px / 3);
|
|
overflow: hidden;
|
|
position:absolute;
|
|
right:0;
|
|
top:REM(775px / 3);
|
|
}
|
|
&.bottom{
|
|
width: REM(318px / 3);
|
|
height: REM(367px / 3);
|
|
overflow: hidden;
|
|
margin-top:0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.line-03 {
|
|
width:REM(191px);
|
|
@include display-flex();
|
|
flex-direction: column;
|
|
.top {
|
|
border:REM(1px) solid #C8C8C8FF;
|
|
border-radius: REM(15px);
|
|
width: REM(191px);
|
|
height: REM(351px);
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
}
|
|
.bottom {
|
|
border-radius: REM(15px);
|
|
border:REM(1px) solid #C8C8C8FF;
|
|
width: REM(192px);
|
|
height: REM(112px);
|
|
background-color:#FFB400FF;
|
|
margin-top:REM(12px);
|
|
.link {
|
|
@include display-flex();
|
|
flex-direction: column;
|
|
padding:REM(10px) REM(10px);
|
|
}
|
|
.title{
|
|
font-size:REM(18px);
|
|
font-weight:$font-weight-extra-bold;
|
|
line-height:1.15;
|
|
color:#fff;
|
|
font-family: $font-family-base;
|
|
padding-bottom:REM(28px);
|
|
position:relative;
|
|
letter-spacing: REM(-1px);
|
|
&:before{
|
|
content:"";
|
|
width:REM(66px);
|
|
height:REM(5px);
|
|
background-color:#fff;
|
|
position:absolute;
|
|
left:0;
|
|
bottom:REM(12px);
|
|
}
|
|
}
|
|
.sub-text{
|
|
font-size:REM(18.36px);
|
|
line-height: REM(21px);
|
|
width:100%;
|
|
height: REM(42px);
|
|
min-height:REM(42px);
|
|
color:#fff;
|
|
word-wrap: break-word;
|
|
word-break: keep-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
@include display-xs(){
|
|
width:100%;
|
|
margin-top:REM(20px / 3);
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.top {
|
|
border-radius: REM(20px / 3);
|
|
width: REM(300px / 3);
|
|
height: REM(530px / 3);
|
|
}
|
|
.bottom {
|
|
border-radius: REM(20px / 3);
|
|
width: REM(335px / 3);
|
|
height: REM(276px / 3);
|
|
margin-top:REM(20px / 3);
|
|
align-self: flex-end;
|
|
box-sizing: border-box;
|
|
.link {
|
|
padding:REM(20px / 3);
|
|
}
|
|
.title{
|
|
font-size:REM(51px / 3);
|
|
padding-bottom:REM(56px / 3);
|
|
word-wrap: break-word;
|
|
word-break: keep-all;
|
|
|
|
&:before{
|
|
content:"";
|
|
width:REM(107px / 3);
|
|
height:REM(7px / 3);
|
|
background-color:#fff;
|
|
position:absolute;
|
|
left:0;
|
|
bottom:REM(24px / 3);
|
|
}
|
|
}
|
|
.sub-text{
|
|
font-size:REM(22px / 3);
|
|
line-height: REM(30px / 3);
|
|
height: REM(60px / 3);
|
|
min-height:REM(60px / 3);
|
|
color:#fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.main-center {
|
|
margin:REM(15px) 0 REM(50px) 0;
|
|
.line-banner{
|
|
border:REM(1px) solid #C8C8C8FF;
|
|
width:100%;
|
|
|
|
border-radius: REM(12px);
|
|
background-position: center center;
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
&.pc {
|
|
height:REM(71px);
|
|
}
|
|
&.mobile {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
@include display-xs(){
|
|
margin:REM(20px / 3) 0;
|
|
.line-banner{
|
|
width:100%;
|
|
border-radius: REM(20px / 3);
|
|
background-size: contain;
|
|
&.pc {
|
|
display: none;
|
|
}
|
|
&.mobile {
|
|
display: block;
|
|
height:REM(295px / 3);
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.family-list.mobile {
|
|
display: none;
|
|
@include display-xs(){
|
|
@include display-flex();
|
|
justify-content: center;
|
|
width:100%;
|
|
padding:REM(30px / 3) 0;
|
|
border-radius: REM(20px / 3);
|
|
position:relative;
|
|
background-color:#fff;
|
|
border:REM(1px) solid #cccccc;
|
|
margin-bottom:REM(80px / 3);
|
|
.item{
|
|
a {
|
|
@include display-flex();
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position:relative;
|
|
padding-left:REM(55px / 3);
|
|
font-size:REM(27px / 3);
|
|
height:REM(40px / 3);
|
|
line-height:1;
|
|
font-weight:700;
|
|
&:after{
|
|
content:"";
|
|
position:absolute;
|
|
left:0;
|
|
top:50%;
|
|
transform: translate(0, -50%);
|
|
background-size: contain;
|
|
width:REM(45px / 3);
|
|
height:REM(45px / 3);
|
|
}
|
|
}
|
|
&.tv {
|
|
> a {
|
|
&:after{
|
|
@include background-image('../images/common/tv.png')
|
|
}
|
|
}
|
|
}
|
|
&.instagram {
|
|
margin-left:REM(50px / 3);
|
|
> a {
|
|
&:after{
|
|
@include background-image('../images/common/instagram.png')
|
|
}
|
|
}
|
|
}
|
|
&.blog {
|
|
margin-left:REM(50px / 3);
|
|
> a {
|
|
&:after{
|
|
@include background-image('../images/common/blog.png')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.main-bottom {
|
|
@include display-flex();
|
|
justify-content: space-between;
|
|
position:relative;
|
|
z-index:1;
|
|
@include display-xs(){
|
|
flex-direction: column;
|
|
}
|
|
.title-box {
|
|
@include display-flex();
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom:REM(1px) solid #02205b;
|
|
padding-bottom:REM(10px);
|
|
margin-bottom:REM(10px);
|
|
@include display-xs(){
|
|
justify-content: flex-end;
|
|
padding-bottom:REM(20px / 3);
|
|
margin-bottom:0;
|
|
}
|
|
}
|
|
.slide-title {
|
|
font-size:REM(20px);
|
|
line-height:1;
|
|
color:#02205b;
|
|
@include display-xs(){
|
|
display: none;
|
|
}
|
|
}
|
|
.control-box {
|
|
@include display-flex();
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.btn {
|
|
background-color:#fff;
|
|
width:REM(24px);
|
|
height:REM(24px);
|
|
border-radius: REM(24px);
|
|
border:none;
|
|
@include display-flex();
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left:REM(15px);
|
|
line-height:1;
|
|
padding:0;
|
|
color:#02205b;
|
|
&.btn-right{
|
|
margin-left:REM(5px);
|
|
}
|
|
.icon {
|
|
font-size:REM(24px);
|
|
}
|
|
&:active,
|
|
&:hover,
|
|
&:focus,
|
|
&:focus-visible,
|
|
&:focus-within{
|
|
width:100%;
|
|
outline: none;
|
|
background-color: #d5d8e1;
|
|
cursor: pointer;
|
|
overflow:hidden;
|
|
}
|
|
}
|
|
.swiper-pagination {
|
|
position:relative;
|
|
left:0;
|
|
transform: translate(0);
|
|
height:REM(24px);
|
|
bottom: 0;
|
|
@include display-flex();
|
|
align-items: center;
|
|
overflow: initial;
|
|
}
|
|
.swiper-pagination-bullet{
|
|
background-color:#8b93ae;
|
|
width:REM(7px);
|
|
height:REM(7px);
|
|
&.swiper-pagination-bullet-active {
|
|
width:REM(18px);
|
|
border-radius: REM(9px);
|
|
background-color:#02205b;
|
|
}
|
|
}
|
|
@include display-xs(){
|
|
.btn {
|
|
width:REM(42px / 3);
|
|
height:REM(42px / 3);
|
|
border-radius: REM(42px / 3);
|
|
margin-left:REM(26px / 3);
|
|
&.btn-right{
|
|
margin-left:REM(15px / 3);
|
|
}
|
|
.icon {
|
|
font-size:REM(38px / 3);
|
|
}
|
|
}
|
|
.swiper-pagination {
|
|
height:REM(42px / 3);
|
|
}
|
|
.swiper-pagination-bullet{
|
|
width:REM(12px / 3);
|
|
height:REM(12px / 3);
|
|
&.swiper-pagination-bullet-active {
|
|
width:REM(28px / 3);
|
|
border-radius: REM(14px / 3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.left-slide{
|
|
width:REM(416px);
|
|
.swiper-container {
|
|
width:REM(416px);
|
|
height:REM(375px);
|
|
overflow:hidden;
|
|
}
|
|
.recent-list {
|
|
.swiper-slide {
|
|
padding:REM(12px) 0;
|
|
height: REM(78px) !important;
|
|
border-bottom:REM(1px) solid #26356b;
|
|
box-sizing: border-box;
|
|
.link {
|
|
@include display-flex();
|
|
width: 100%;
|
|
position:relative;
|
|
min-width: 0;
|
|
&:after{
|
|
content:"\e5e1";
|
|
font-family: 'Material Symbols Outlined';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
-webkit-font-feature-settings: 'liga';
|
|
-webkit-font-smoothing: antialiased;
|
|
font-size:REM(30px);
|
|
position:absolute;
|
|
right:0;
|
|
font-weight:200;
|
|
top:50%;
|
|
transform: translate(0,-50%);
|
|
}
|
|
}
|
|
.date{
|
|
font-size:REM(12.75px);
|
|
font-weight:$font-weight-semi-bold;
|
|
line-height:1;
|
|
color:#02205b;
|
|
flex-shrink: 0;
|
|
.big{
|
|
display: block;
|
|
font-size:REM(30px);
|
|
font-weight:$font-weight-bold;
|
|
text-align: center;
|
|
margin-top:REM(5px);
|
|
}
|
|
}
|
|
.notice-text {
|
|
margin-left:REM(15px);
|
|
@include display-flex();
|
|
justify-content: space-evenly;
|
|
flex-direction: column;
|
|
color:#02205b;
|
|
flex:1;
|
|
min-width:0;
|
|
|
|
.label{
|
|
display: block;
|
|
font-size:REM(12.75px);
|
|
line-height:1;
|
|
color:#02205b;
|
|
|
|
a {
|
|
color:inherit;
|
|
}
|
|
}
|
|
.title{
|
|
width:100%;
|
|
padding-right:REM(50px);
|
|
font-size:REM(15.75px);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
margin-bottom:0;
|
|
margin-top:REM(5px);
|
|
a {
|
|
color:inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include display-xs(){
|
|
width:100%;
|
|
.swiper-container {
|
|
width:100%;
|
|
height:REM(624px / 3);
|
|
overflow:hidden;
|
|
}
|
|
.recent-list {
|
|
.swiper-slide {
|
|
padding:REM(25px / 3) 0;
|
|
height: REM(126px / 3) !important;
|
|
.link {
|
|
@include display-flex();
|
|
width: 100%;
|
|
position:relative;
|
|
&:after{
|
|
font-size:REM(60px / 3);
|
|
}
|
|
}
|
|
.date{
|
|
font-size:REM(21.73px / 3);
|
|
.big{
|
|
font-size:REM(54.32px / 3);
|
|
}
|
|
}
|
|
.notice-text {
|
|
|
|
margin-left:REM(35px / 3);
|
|
.label{
|
|
font-size:REM(24px / 3);
|
|
}
|
|
.title{
|
|
font-size:REM(30px / 3);
|
|
padding-right:REM(50px / 3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right-slide{
|
|
width:REM(360px);
|
|
overflow: hidden;
|
|
.swiper-slide {
|
|
width:REM(175px) !important;
|
|
height:REM(315px);
|
|
border-radius: REM(15px);
|
|
border:none;
|
|
background-size: cover;
|
|
overflow: hidden;
|
|
&.swiper-slide{
|
|
margin-right:REM(8px);
|
|
}
|
|
&:last-child {
|
|
margin-right:0;
|
|
}
|
|
}
|
|
.swiper-slide.full {
|
|
width:100% !important;
|
|
height:REM(195px);
|
|
border-radius: REM(20px);
|
|
}
|
|
.btn-more{
|
|
display: none;
|
|
}
|
|
@include display-xs(){
|
|
width:100%;
|
|
.title-box {
|
|
display: none;
|
|
}
|
|
.swiper-slide {
|
|
width:REM(317px / 3) !important;
|
|
height:REM(584px / 3);
|
|
border-radius: REM(20px / 3);
|
|
&.swiper-slide{
|
|
margin-right:REM(13px / 3);
|
|
}
|
|
&:last-child {
|
|
margin-right:0;
|
|
}
|
|
}
|
|
.swiper-slide.full {
|
|
width:100% !important;
|
|
height:REM(390px / 3);
|
|
border-radius: REM(45px / 3);
|
|
}
|
|
.btn-more {
|
|
display: block;
|
|
font-size:REM(27px / 3);
|
|
border:REM(1px / 3) solid #7D7D7DFF;
|
|
color:#7D7D7DFF;
|
|
width: 100%;
|
|
height: REM(79px / 3);
|
|
margin:REM(37px / 3) 0 REM(57px / 3) 0;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include display-xs(){
|
|
#nav .search-box .search-form {
|
|
.input {
|
|
padding:REM(5px / 3) REM(70px / 3) REM(5px / 3) REM(45px / 3);
|
|
}
|
|
.label-wrap {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|