@import url(main_mobile_reset.css);


@font-face{
    font-family:NotoSans;
    src:url( ../fonts/NotoSansKR-Regular.eot?#iefix) format('embedded-opentype');
    src:local('※'), url( ../fonts/NotoSansKR-Regular.woff) format('woff');
}
@font-face{
    font-family:NotoSansM;
    src:url( ../fonts/NotoSansKR-Medium.eot?#iefix) format('embedded-opentype');
    src:local('※'), url( ../fonts/NotoSansKR-Medium.woff) format('woff');
}
@font-face{
    font-family:NotoSansDL;
    src:url( ../fonts/NotoSansKR-DemiLight.eot?#iefix) format('embedded-opentype');
    src:local('※'), url( ../fonts/NotoSansKR-DemiLight.woff) format('woff');
}
@font-face{
    font-family:NotoSansL;
    src:url( ../fonts/NotoSansKR-Light.eot?#iefix) format('embedded-opentype');
    src:local('※'), url( ../fonts/NotoSansKR-Light.woff) format('woff');
}

@font-face{
    font-family:NotoSans;
    src:url( ../fonts/NotoSansKR-Regular.eot?#iefix) format('embedded-opentype');
    src:local('※'), url( ../fonts/NotoSansKR-Regular.woff) format('woff');
}
@font-face{
    font-family:NotoSansM;
    src:url( ../fonts/NotoSansKR-Medium.eot?#iefix) format('embedded-opentype');
    src:local('※'), url( ../fonts/NotoSansKR-Medium.woff) format('woff');
}
@font-face{
    font-family:NotoSansDL;
    src:url( ../fonts/NotoSansKR-DemiLight.eot?#iefix) format('embedded-opentype');
    src:local('※'), url( ../fonts/NotoSansKR-DemiLight.woff) format('woff');
}
@font-face{
    font-family:NotoSansL;
    src:url( ../fonts/NotoSansKR-Light.eot?#iefix) format('embedded-opentype');
    src:local('※'), url( ../fonts/NotoSansKR-Light.woff) format('woff');
}
@font-face{
    font-family:NotoSansT;
    src:url( ../fonts/NotoSansKR-Thin.eot?#iefix) format('embedded-opentype');
    src:local('※'), url( ../fonts/NotoSansKR-Thin.woff) format('woff');
}
@font-face{
    font-family:Roboto;
    src:url( ../fonts/Roboto-Regular.eot?#iefix) format('embedded-opentype');
    src:local('※'), url( ../fonts/Roboto-Regular.woff) format('woff');
}


.main_inner { position : relative; padding : 1rem } 
.main_inner2 { position : relative; top : -8rem; margin-bottom: -6rem;} 
#visual { background : url(/images/ko/main_visual_01.png) no-repeat center center / cover; color : #fff; font-size : 1rem; padding : 3rem 2rem 7rem; } 
#visual.nomember {margin-bottom : 9rem;padding: 3rem 2rem;}
#visual.nopadding { padding-bottom : 4rem !important }
#visual h2 { font-size : 1.8rem; color : #fff; margin-bottom : 1.2rem } 
#visual .search_wrap { position : relative; border : none; margin-top : 1.8rem; z-index : 5 } 
#visual .search_wrap input { display : block; height : 55px; line-height : 55px; border : none; padding : 0 45px 0 2rem; border-radius : .5rem; width : 100%; border-radius : 10rem; background-color: #fff; } 
#visual .search_wrap.active input { border-radius : 0 }
#visual .search_wrap > button { position : absolute; top : 0; right : 0; height : 55px; width : 65px; } 
#visual .search_wrap > button img { width : 20px; } 
#visual .search_wrap .autocomplete_wrap { display : none; position : absolute; top : 100%; left : 0; width : 100%; background-color : #fff;  border : 1px solid #003D7A; border-top : none; }
#visual .search_wrap .autocomplete_wrap.active { display : block }
#visual .search_wrap .autocomplete_wrap button { display : block; width : 100%; background-color: #f1f1f1; padding : .5rem; text-align: right; font-size : 14px;}
#visual .search_wrap .autocomplete { max-height : 150px; overflow : auto }
#visual .search_wrap .autocomplete a { display : block; font-size : 14px; padding : 10px 15px; letter-spacing: 0; }
#visual .search_wrap .autocomplete a:hover { background-color: #003D7A; color : #fff }


#loginArea { position : relative; background : #fff url(/images/ko/login_bg.png) no-repeat center center / cover; border-radius : 1rem; overflow : hidden; padding : 3rem 2rem; margin : 2rem 0; box-shadow : -1px 7px 11px 1px #ababab } 
#loginArea * { position : relative; z-index : 3 } 
#loginArea h2 { font-size : 1.8rem; line-height : 130% } 
#loginArea p { font-size : 1.1rem; margin-top : 1rem; line-height : 150% } 
#loginArea.login_after {display: block;justify-content: space-between;align-items: center;} 
#loginArea.login_after .login_after_txt{
    display: flex;
    align-items: center;
}
#loginArea.login_after .qr_wrap { padding : .1rem; border-radius : .8rem; background-color: #fff; display : flex; align-items: center; justify-content: center; border : 5px solid #003D7A } 
#loginArea.login_after .qr_wrap img { width : 150px; height : 150px } 
#loginArea.login_before { padding : 2rem; text-align : center } 
#loginArea.login_before a { display : block; margin-top : 1rem; opacity: 0.8; background: url(/images/ko/login_btn_bg.png) no-repeat center center / cover; color : #fff; line-height : 60px; text-align : center; border-radius : 10px } 

#mainLink { display : flex; gap : 1rem; margin-bottom : 6rem } 
#mainLink > * { flex : 1 } 
#mainLink a { display : block; background-size : cover; background-repeat : no-repeat; background-position : center center; padding : 2rem; position : relative; border-radius : 1rem; font-size : 1.8rem; font-weight: bold; line-height : 150% } 
#mainLink > div { flex-basis: 300px; display : flex; flex-direction: column; gap : 1rem } 
#mainLink a img { position : absolute; bottom : 1rem; right : 1rem } 
#mainLink a#link01 { background-image : url('/images/ko/img_link_01.png'); flex-basis: 300px; } 
#mainLink a#link02 { background-image : url('/images/ko/img_link_02.png'); height : 150px; font-size : 1.4rem } 
#mainLink a#link03 { background-image : url('/images/ko/img_link_03.png'); height : 150px; font-size : 1.4rem } 
#mainLink a#link04 { background-image : url('/images/ko/img_link_03.png');   height : 300px; font-size : 1.8rem } 

.second_mainLink { display : grid !important; grid-template-columns: 1fr 1fr }
.second_mainLink span { position : absolute; top : 2rem; left : 2rem; font-size : 1.4rem; font-weight: bold; line-height : 130% } 
#mainLink a#link05 { background-image : url('/images/ko/img_link_01.png'); padding-top : 30% }
#mainLink a#link06 { background-image : url('/images/ko/img_link_03.png'); padding-top : 30% }


#memberLink { display : grid; grid-template-columns: repeat(2, 1fr); gap : 1rem; margin : 1rem 0 6rem 0 } 
#memberLink a { overflow : hidden; background-size : cover; background-repeat : no-repeat; background-position : center center; padding : 2rem; position : relative; border-radius : 1rem; font-weight: bold; line-height : 150%; font-size : 1.4rem; height : 150px; } 
#memberLink a img { position : absolute; bottom : 1rem; right : 1rem } 
#memberLink a#link01 { background-image : url('/images/ko/img_link_04.png'); } 
#memberLink a#link02 { background-image : url('/images/ko/img_link_01.png'); } 
#memberLink a#link03 { background-image : url('/images/ko/img_link_02.png'); } 
#memberLink a#link04 { background-image : url('/images/ko/img_link_03.png'); } 

#mainLinkAuto { position : relative; display : flex; flex-wrap : wrap; gap : 1rem; margin : 1rem 0 6rem 0 }
#mainLinkAuto a { flex-grow : 1; overflow : hidden; background-size : cover; background-repeat : no-repeat; background-position : center center; padding : 2rem; position : relative; border-radius : 1rem; font-weight: bold; line-height : 150%; font-size : 1.4rem; height : 150px; }
#mainLinkAuto a img { position : absolute; bottom : 1rem; right : 1rem } 

.card_type {display : grid;gap : 1rem;margin: 1rem 0 4rem 0;} 
.card_type a { overflow : hidden; background-size : cover; background-repeat : no-repeat; background-position : center center; padding : 1.2rem 1.7rem; position : relative; border-radius : 1rem; font-weight: bold; line-height : 150% } 
.card_type a img { position : absolute; bottom : 1.2rem; right : 1.2rem } 
.card_type a#link01 { background-image : url('/images/ko/img_link_04.png');} 
.card_type a#link02 { background-image : url('/images/ko/img_link_01.png');} 
.card_type a#link03 { background-image : url('/images/ko/img_link_02.png');} 
.card_type a#link04 { background-image : url('/images/ko/img_link_03.png');} 
.card_type a#link05 { background-image : url('/images/ko/img_link_01.png');}
.card_type a#link06 { background-image : url('/images/ko/img_link_03.png');}
#cardType01 { grid-template-columns: repeat(2, 1fr); } 
#cardType01 a {font-size: 4.5vw;} 

#cardType02 { grid-template-columns: repeat(2, 1fr); }
#cardType02 a { font-size : 1.2rem }
#cardType02 a:nth-child(1) { grid-row: 1 / a 2; font-size : 1.4rem } 

#cardType03 { grid-template-columns: repeat(2, 1fr); } 
#cardType03 a { height : 15rem; font-size : 1.4rem }
.main_title {display : flex;align-items: center;justify-content: center;text-align : center;font-size : 2.1rem;margin: 4rem 0 2rem;} 
.tab_nav { margin : 2rem 0; text-align: center; } 
.tab_nav li { display : inline-block } 
.tab_nav li + li { margin-left : .5rem } 
.tab_nav li a { display : inline-block; line-height : 50px; text-align : center; background-color: #fff; border-radius : 5rem; font-size : 1.2rem; border : 1px solid #5f5f5f; padding : 0 20px; } 
.tab_nav li.active a { background-color: #003D7A; color : #fff } 

#newBookSlider{
    padding-bottom: 1rem;
}
#newBookSlider a, #reviewListSlider a {display : flex;padding: 1rem 0;align-items: center;overflow : hidden} 
#newBookSlider a p, #reviewListSlider a p { width : 180px; border-radius : .5rem; overflow : hidden; position : relative; height : 240px; flex-basis: 180px; flex-shrink: 0; box-shadow: 0px 0px 9px 5px #ccc } 
#newBookSlider a p img, #reviewListSlider a p img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); object-fit: cover; height : 100%; max-height : 100%; width : 100%; } 
#newBookSlider a div, #reviewListSlider a div { padding : 0 2.0rem } 
#newBookSlider a h2, #reviewListSlider a h2 { font-size : 1.6rem; margin-bottom : 1rem; line-height : 120% } 
#newBookSlider a span, #reviewListSlider a span { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin : 1rem 0 } 
#newBookSlider a i, #reviewListSlider a i { display : inline-block; width : 1.5px; height : 15px; background-color: var(--gray50); margin : 0 0.3rem; position : relative; top : 1px }

 

.portal_wrap { display : grid; grid-template-columns: repeat(3, 1fr); gap : 1rem; margin-bottom : 5rem } 
.portal_wrap_second { margin-bottom : 1rem } 
.portal_wrap a { display : block; border : 1px solid var(--gray20); border-radius : 1rem; padding : 1.5rem; text-align: center; } 
.portal_wrap a span { display : flex; height : 55px; justify-content: center; align-items: center; margin-bottom : 1.5rem } 

.portal_middle_wrap { display : grid; grid-template-columns : 2fr 1fr; gap : 1rem; margin-bottom : 1rem } 
.portal_middle_wrap a { flex-grow : 1; display : block; border : 1px solid var(--gray20); border-radius : 1rem; padding : 1.5rem; text-align: center; } 
.portal_middle_wrap a span { display : flex; height : 55px; justify-content: center; align-items: center; margin-bottom : 1.5rem } 
.portal_middle_wrap a.portal_nail { display : flex; align-items: center; justify-content: center; } 
.portal_nail { background : url('/images/ko/nail_bg.png') no-repeat center center / cover } 
.portal_nail img { max-width : 170px; height : auto } 


.modal_wrap { display : none; position : fixed; top : 0; left : 0; width : 100%; height : 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 9; } 
.modal_wrap.active { display : block } 
.modal_wrap .inner { position : absolute; top : 50%; left : 50%; transform: translate(-50%, -50%); background: #fff url(/images/ko/bg_qr.png) no-repeat center center / cover; padding : 5rem 2rem; border-radius : 1rem; text-align: center; min-width : 300px; width : 100%; max-width : 380px } 
.modal_wrap .inner button { position : absolute; top : 1rem; right: 1rem } 
.modal_wrap .inner button img { width : 30px; height : 30px } 
.modal_wrap h2 { font-size : 22px } 
.modal_wrap div.qrcode_wrap {margin : 1rem 0 2rem;background : url('/images/ko/ic_qr_line.png') no-repeat center center / contain;height : 200px;overflow : hidden;display: flex;padding : 1.5rem;justify-content: center;} 
.modal_wrap div.qrcode_wrap .img{
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal_wrap div img { display : block; height : 100%; margin : 0 auto } 
.modal_wrap dl { display : flex; font-size : 17px; max-width : 200px; margin : .5rem auto } 
.modal_wrap dt { width : 80px; text-align: left; } 

.swiper-slide { width: 100% !important; } 
.swiper-pagination { bottom : 0 !important }


@media ( max-width : 1024px ){
	#mainLink a#link05 ,
	#mainLink a#link06 { padding-top : 60% } 
}


@media ( max-width : 600px ){
 #newBookSlider a p, #reviewListSlider a p { width : 135px; height : 180px; flex-basis: 125px; } 
 #loginArea.login_after .qr_wrap img { width : 100px; height : 100px } 
 #newBookSlider a h2, #reviewListSlider a h2 { font-size : 1.4rem } 
 .portal_nail img { max-width : 140px; height : auto } 
 .main_title img { display : inline-block; width : 30px; margin-right : .5rem } 
 #cardType01 a img {width: 8vw;height: 8vw;object-fit: contain;object-position: center;}
 #cardType02 a img {width: 8vw;height: 8vw;object-fit: contain;object-position: center;} 
 }
 
 
@media ( max-width : 400px ){
 #newBookSlider a h2, #reviewListSlider a h2 { font-size : 1rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 }
 
  
 } 


@media ( max-width : 440px ){
    #loginArea h2 { font-size : 20px }
    #loginArea.login_after { padding : 2rem 1.5rem }
    #loginArea p { font-size : .9rem; padding-right : 10px; word-break: keep-all; }
    #loginArea.login_after .qr_wrap img { width : 80px; height :80px }
    #visual .search_wrap input { padding : 0 1rem }
   
 #loginArea.login_after .qr_wrap { margin : 1rem 0 0 0 } 
 .tab_nav li a { width : 130px; font-size : 1rem } 
 #newBookSlider a p, #reviewListSlider a p { height : 180px; flex-basis : 120px } 
 .portal_wrap a,
 .portal_middle_wrap a { padding : 1rem .5rem; font-size : 14px; }  
 .portal_middle_wrap a span,
 .portal_wrap a span { margin-bottom : .5rem !important } 
 .portal_middle_wrap a span { height : auto }
 .portal_middle_wrap a span img,
 .portal_wrap a span img { max-width : 35px } 

 .modal_wrap .inner { width : 300px } 
  #mainLink a { font-size : 1.2rem !important; padding : 1.4rem  }
  
  #visual {padding: 3rem 2rem 7rem;}
  
  #mainLink a#link05,
	#mainLink a#link06 { padding-top : 110% } 
	.second_mainLink span { top : 1rem; left : 1rem; font-size: 1.2rem }
  
}

@media ( max-width : 400px ){
    #memberLink a{ font-size : 1rem !important; padding : 1.2rem  }
}