@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Raleway:wght@300;400;500;700;900&display=swap');



/* common */
:root { --app-height: 100%; }    
html,body{overflow:hidden; height: 100vh; height: var(--app-height); }
html { font-size: 62.5%; /*height: -webkit-fill-available;*/ }
/*body { min-height: 100vh; min-height: -webkit-fill-available;}*/
.mobile_br {display: none;}


*{font-family:'Noto Sans KR', 'Roboto', sans-serif; box-sizing:border-box;}
.btn-box{font-size:0}
select{-webkit-appearance:none;/* �ㅼ씠�곕툕 �명삎 媛먯텛湲� */-moz-appearance:none;appearance:none;background:url(../images/support/icon01.png) no-repeat right center;border:none;outline:none}
/* IE 10, 11�� �ㅼ씠�곕툕 �붿궡�� �④린湲� */
select::-ms-expand{display:none}
button{padding:0;border:none;outline:none;background:transparent}
/* .main-padding{ padding-left: 3vw; padding-top: 1.5vh; padding-bottom: 3.9vh; } */
.default-btn{display: block;width: 120px;height: 36px;border-radius: 3vw;border: 1px solid #707070;line-height: 34px;text-align: center;font-size: 16px;font-weight: 700;color: #707070}
.text-center{text-align: center;}
.f0{font-size: 0;}
.hidden{display: none;}

/* header.php */
header { padding: 0 3vw; border-bottom: 1px solid #bcbcbc; height: 45px; width: 100%; position: fixed; top: 0; left: 0; z-index: 50;} 
header .left_box { position: absolute; left: 3vw; top: 50%; transform: translateY(-50%); }
header .left_box .logo_box { display: inline-block; width: 70px; vertical-align: middle; margin-right: 0.8vw; }
header .left_box .logo_box img {width: 70px;}
header .left_box .search_box { display: inline-block; vertical-align: middle; }
header .sns_box { position: absolute; right: 3vw; top: 50%; transform: translateY(-50%);}
header .sns_box ul { font-size: 0; }
header .sns_box ul li { display: inline-block; vertical-align: middle; margin-right: 20px;}
header .sns_box ul li:last-child { margin-right: 0; }
header .sns_box ul li a{ display: block; line-height: 1;}
header .sns_box ul li a img {width: 20px; }

.search_input_box { width: 260px; border-radius: 5px; background-color: #e1e1f6; border: 1px solid #d5d5d5; box-shadow: 0 6px 22px 0 rgb(0 0 0 / 5%);}
.search_input_box form { width: 100%; font-size: 0; }
.search_btn { border: 0; border-radius: 5px; padding-left: 15px; display: inline-block; vertical-align: middle; width: 40px; height: 25px; padding-right: 15px;  }
.search_input { border: 0; border-radius: 5px; background-color: #e1e1f6; color: #6a6a6a; font-size: 13px; font-weight: bold; padding: 0; display: inline-block; vertical-align: middle; height: 25px; width: calc(100% - 40px); }
.search_input:focus { outline: none; }

/* footer.php */

.footer { height: 150px; position: fixed; background: #fff; width: 100%; bottom: 0; z-index: 10; border-top: 1px solid #ccc; }
.footer .inner { height: 100%; }
.footer .inner ul { text-align: center; height: 100%; font-size: 0; }
.footer .inner ul li { display: inline-block; vertical-align: top; width: calc(100% / 5); position: relative; height: 100%; padding: 25px 0;}
.footer .inner ul li a { display: block; height: 100%; }
.footer .inner ul li a img { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); width: 60px;}
/*.footer .inner ul li:nth-child(3n) a img {width: 40px;}*/
.footer .inner ul li p { font-size: 14px; font-weight: bold; position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%);  width: 100%; }
.footer .inner ul li.on { background-color: #e1e1f6; }
.footer .inner ul li.on p { color: #0101ac; }


.mobile_br {display: none;}



/* index.php */

.text-wrap{position: absolute;top: 50%;z-index: 2;width: 100%;transform: translateY(-50%);text-align: center;}
.text-wrap > div{overflow: hidden;}
.text-wrap h2 a{ display: block; }
.text-wrap h2 a img { width: 240px; }




/* common */
.blur{opacity: 0;filter: blur(5px);transition: filter 1s, opacity 1s ease;}
.blur.on{opacity: 1;filter: blur(0);}
.letter{transition: all .5s cubic-bezier(.43,.1,.57,.9);transform: translateY(50%);}
.letter.on{transform: translateY(0);}
.up{opacity: 0;transition: opacity .5s, transform .5s cubic-bezier(.43,.1,.57,.9);transform: translateY(15px);}
.up.on{opacity: 1;transform: translateY(0);}

._title { height: 7vh;  position: relative; }
._title h2 a{ font-size: 1.2vw; font-weight: bold; color: #333; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); }


/* main.php */


.main{position: relative; width: 100%; height: calc(100vh - 45px);  margin-top: 45px; padding-bottom: 7vh; }
.main ._title { padding-left: 3vw; }
.main .main_content { height: 85vh; position: relative; top: -20px; overflow-y: auto; }
#grid-swiper01 { padding: 20px 3vw;} 
#grid-swiper01 .swiper-slide{ width: 25%; min-width: 23vmax; /*eight: auto; */ background-color: #fff; box-shadow: 0 0 20px 0 rgb(0 0 0 / 20%); border-radius: 3vw; margin-right: 3vw; overflow-y: auto; }
#grid-swiper01 .swiper-slide:last-child { margin-right: 0; }
#grid-swiper01 .swiper-slide .item_list { padding: 5vh 1.5vw; }
#grid-swiper01 .swiper-slide .item_list .title_box { margin-bottom: 1vmax; padding: 0 1.5vw;}
#grid-swiper01 .swiper-slide .item_list .title_box h2 { font-size: 11px; font-weight: bold; color: #333; }
#grid-swiper01 .swiper-slide .item_list .title_box h3 { font-size: 16px; color: #0101ac; font-weight: bold; line-height: 1; }
#grid-swiper01 .swiper-slide .item_list .img_box { height: 0; padding-bottom: 65%;  background-size: contain; background-position: center; background-repeat: no-repeat; }
#grid-swiper01 .swiper-slide .item_list .txt_box { margin-top: 0.6vmax; padding: 0 1.5vw; min-height: 28vh;}
#grid-swiper01 .swiper-slide .item_list .view_box { background-color: #0000ac; border-radius: 15px; margin: 0 1.5vw; margin-top: 3vh;}
#grid-swiper01 .swiper-slide .item_list .view_box a { text-align: center; display: block; color: #fff; font-size: 11px; font-weight: bold; padding: 15px 1vw; }

.txt_box ul { overflow: hidden; }
.txt_box ul li { display: flex; padding: 0.8vmax 0; border-bottom: 1px solid #eaeaea; }
.txt_box .sub_info li:first-child { padding-top: 0; }
.txt_box ul li:last-child { padding-bottom: 0; border-bottom: none; }
.txt_box ul li p {font-size: 16px;}
.product .txt_box ul li ._left { width: 10vmax; }
.txt_box ul li ._left p { font-weight: bold; color: #001c62; line-height: 1; }
.product .txt_box ul li ._right { width: calc(100% - 10vmax - 1vw); margin-left: 1vw; }
.txt_box ul li ._right p {color: #333; line-height: 1;}
.txt_box ul li ._right p._size { width: 3vw; margin-right: 1.5vw; }
.txt_box ul li ._right p._info { width: calc(100% - 3vw - 1.5vw); }
.txt_box ul li ._right p._info span { line-height: 1; margin-right: 5px;}
.txt_box ul li ._right p._info span:last-child {margin-right: 0;}

.main .txt_box ul li ._left { width: 6vmax; font-weight: bold; color: #001c62; line-height: 1; }
.main .txt_box ul li ._right { width: calc(100% - 6vmax - 10px); margin-left: 10px; color: #333; line-height: 1; }


/* product.php */
._title ul { font-size: 0; position: absolute; top: 50%; transform: translateY(-50%); }
._title ul li { display: inline-block; vertical-align: middle; }
._title ul li a { display: block; font-size: 1.2vw; font-weight: bold; color: #8b8b8b; }
._title ul li ._slash { margin: 0 1vw; color: #b8b8b8; font-size: 1.2vw; }
._title ul li p { font-size: 1.2vw; color: #333; font-weight: bold; }

.sub_page.product { width: 100%; height: calc(100% - 45px); padding-left: 3vw; padding-right: 3vw; padding-bottom: 7vh; overflow: hidden; position: relative; top: 45px}
.sub_page.product .main_content { position: relative; height: 90%; }
.sub_page.product .main_content .product_wrap { background-color: #fff; box-shadow: 0 0 20px 0 rgb(0 0 0 / 20%); border-radius: 3vw; height: 100%; padding-bottom: 5vh;}
.sub_page.product .main_content .product_wrap .menu_cate { height: 45px; position: relative; z-index: 10;}
.sub_page.product .main_content .product_wrap .menu_cate ul { display: flex; align-items: center; }
.sub_page.product .main_content .product_wrap .menu_cate ul li { display: inline-block; vertical-align: top; width: 33.333333%; height: 45px; position: relative; background: #f8f9f4; border-right: 1px solid #b8b8b8; border-bottom: 1px solid #b8b8b8; cursor: pointer;}
.sub_page.product .main_content .product_wrap .menu_cate ul li:first-child { border-radius: 3vw 0 0 0; }
.sub_page.product .main_content .product_wrap .menu_cate ul li:last-child { border-right: none; border-radius: 0 3vw 0 0; }
.sub_page.product .main_content .product_wrap .menu_cate ul li.on { background: #fff; border-bottom: none; transition: all 0.3s; }
.sub_page.product .main_content .product_wrap .menu_cate ul li p { text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 1.2vw; font-weight: bold; color: #8b8b8b; word-break: keep-all;}
.sub_page.product .main_content .product_wrap .menu_cate ul li.on p { color: #000fac; }
.sub_page.product .main_content .product_wrap .menu_contents { height: calc(100% - 45px); position: relative; overflow-y: auto; }
.sub_page.product .main_content .product_wrap .menu_contents .box { display: flex; padding-left: 5vw; padding-right: 5vw; width: 100%; height: 100%; padding-top: 3vh;}
.sub_page.product .main_content .product_wrap .menu_contents .box1 .img_box { max-width: 32vw; width: 100%;}
.sub_page.product .main_content .product_wrap .menu_contents .box1 .txt_box { width: calc(100% - 32vw - 5vw); margin-left: 5vw; }
.sub_page.product .main_content .product_wrap .menu_contents .box .txt_box h2 { font-size: 2.8vmax; font-weight: bold; color: #1623b4; line-height: 4vmax; margin-bottom: 2.5vh}
.sub_page.product .main_content .product_wrap .menu_contents .box1 .sub_text { margin-top: 3.5vh; }
.sub_page.product .main_content .product_wrap .menu_contents .box1 .sub_text p { font-size: 16px; padding-bottom: 0.8vw; }
.sub_page.product .main_content .product_wrap .menu_contents .box1 .sub_text p:last-child {padding-bottom: 0;}

.sub_page.product .main_content .product_wrap .menu_contents .box2 .txt_box { width: 22vw; }
.sub_page.product .main_content .product_wrap .menu_contents .box2 .txt_box ul li ._left { width: 100px; }
.sub_page.product .main_content .product_wrap .menu_contents .box2 .txt_box ul li ._right { width: calc(100% - 100px); padding-left: 1vw;  }
.sub_page.product .main_content .product_wrap .menu_contents .box2 .img_box { width: calc(100% - 22vw - 6vw); margin-left: 6vw; overflow-x: auto; overflow-y: hidden; height: 40vh; position: relative;}
.sub_page.product .main_content .product_wrap .menu_contents .box2 .img_box > div { height: 100%; display: flex; flex-wrap: nowrap; }
.sub_page.product .main_content .product_wrap .menu_contents .box2 .img_box > div img { height: 100%; cursor: pointer;}
/* .sub_page.product .main_content .product_wrap .menu_contents .box2 .img_box:after { content: ''; display: block; width: 4vw; height: 5.5vh; position: sticky; left: 50%; bottom: -2vh; transform: translateX(-50%); background-image: url('../images/product/touch_icon.png'); background-position: center; background-repeat: no-repeat; background-size: contain; } */
/* .sub_page.product .main_content .product_wrap .menu_contents .box2 .img_box img:first-child { height: 100%; } */
.sub_page.product .main_content .product_wrap .menu_contents .box2 .img_box img._icon { position: sticky; left: 50%; bottom: 5vh; transform: translateX(-50%); width: 4vmax; animation: fadeOut 1.5s infinite linear alternate; }


.sub_page.product .main_content .product_wrap .menu_contents .box2 .img_box::-webkit-scrollbar { width: 100%; height: 12px; }
.sub_page.product .main_content .product_wrap .menu_contents .box2 .img_box::-webkit-scrollbar-track { background-color: rgba(70,70,70,0.3); border-radius: 10vw; }
.sub_page.product .main_content .product_wrap .menu_contents .box2 .img_box::-webkit-scrollbar-thumb { background-color: #0101ac; border-radius: 10vw; }


#grid-swiper02 { height: 100%; z-index: 0; padding-bottom: 5vh; cursor: pointer; }
#grid-swiper02 .swiper-slide { width: 30%; height: 100%; padding-bottom: 5vh; }
#grid-swiper02 .swiper-slide .item_list { height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center;}
#grid-swiper02 .swiper-scrollbar { bottom: 0px; height: 12px; border-radius: 10vw; }
#grid-swiper02 .swiper-scrollbar-drag { background-color: #0101ac; }

.sub_page.product .main_content .product_wrap .menu_contents .box3 {padding-right: 3vw; position: relative;}
.sub_page.product .main_content .product_wrap .menu_contents .box3:after { content: ''; display: block; position: sticky; width: 3vw; height: 4vw; right: 10%; top: 50%; transform: translateY(-50%); background: url('../images/product/touch_icon_vertical.png'); background-size: contain; background-repeat: no-repeat; background-position: center; animation: fadeOut 1.5s infinite linear alternate; }
.sub_page.product .main_content .product_wrap .menu_contents .box3 .txt_box { width: 30vw; }
.sub_page.product .main_content .product_wrap .menu_contents .box3 .txt_box ul li ._left { width: 6vw; }
.sub_page.product .main_content .product_wrap .menu_contents .box3 .txt_box ul li ._right { width: calc(100% - 6vw - 1vw); margin-left: 1vw;  }
.sub_page.product .main_content .product_wrap .menu_contents .box3 .img_wrap { width: 40vw; height: 55vh; margin-left: 2vw; }
.sub_page.product .main_content .product_wrap .menu_contents .box3 .img_box { width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; display: none; }

.sub_page.product .main_content .product_wrap .menu_contents .box3 .color_box { width: calc(100% - 60vw); overflow-y: auto; margin-top: 3vh; margin-bottom: 3vh; }
.sub_page.product .main_content .product_wrap .menu_contents .box3 .color_box ._circle { width: 5vw; height: 5vw; border-radius: 25vw; margin: 0 auto; margin-bottom: 10px; background-color: #ccc; background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; box-sizing: border-box;}
.sub_page.product .main_content .product_wrap .menu_contents .box3 .color_box ._circle:last-child { margin-bottom: 0; }


.sub_page.product .main_content .product_wrap .menu_contents .box3 .color_box::-webkit-scrollbar { width: 12px; height: 100%; }
.sub_page.product .main_content .product_wrap .menu_contents .box3 .color_box::-webkit-scrollbar-track { background-color: rgba(70,70,70,0.3); border-radius: 10vw; }
.sub_page.product .main_content .product_wrap .menu_contents .box3 .color_box::-webkit-scrollbar-thumb { background-color: #0101ac; border-radius: 10vw;}


@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@-ms-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }


.product_popup { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.8); z-index: 1000; }
.product_popup .inner { position: absolute; top: 50%; left: 50%; width: 500px; height: 60vh; transform: translate(-50%, -50%); background-color: #fff; }
.product_popup .inner .close_btn { position: absolute; top: -75px; left: 50%; width: 50px; height: 50px; border: none; background-color: rgba(255, 255, 255, 0.53); padding: 0; border-radius: 50px; background-image: url(../images/common/close.png); background-position: center; background-size: 15px; background-repeat: no-repeat; transform: translateX(-50%); }
.product_popup .inner .top_box { height: 100%; }
.product_popup .inner .top_box .img_box { background-repeat: no-repeat; background-position: center; background-size: contain; height: 100%; }