@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); .noto-sans-kr-{ font-family:"Noto Sans KR", sans-serif; font-optical-sizing:auto; font-weight:; font-style:normal; } *{ font-family:inherit; font-size:inherit; font-weight:inherit; border:0; outline:none; } html,body{ font-family:"Noto Sans KR", sans-serif; font-size:16px; font-weight:500; color:#333; letter-spacing:-0.05em; } body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background:#333; } a{ text-decoration:none !important; } a:hover{ color:inherit; } i{ font-family:"FontAwesomes"; } .container{ width:auto; padding-right:0; padding-left:0; } .row{ margin-right:0; margin-left:0 } .tcol,.pageNavigation strong,.colorActive,.mobile_menu .btnWrap a:before,.productView .productSaleInfo .mallControlBtn ul li #cartBtn {color:#8040e3 !important;} .tcolb,.table_basic,#ajax_body,.productView .productInfo .productImageZoom a:hover,.tmp-select > a:before,.form-control:focus,.input:focus {border-color:#E53032 !important;} {border-color:#E53032;} .tcolbg,.tb thead tr,#ajax_display .menu_black,.new_login_box .loginbtn,#clNav:hover > div,.tabRecent .on:before,.subHeader h3,.productView,.productTab li.on .productSaleInfo .mallControlBtn ul li .buyBtn ,.banner .bx-pager div a.active,.Photo:before,.Photo *:before {background-color:#8040e3 !important;} .btnPack.strong,.box:after,.btnPack.blue,.btnPack.red {background-color:#E53032;} #Default .emailContent{background:rgba(45,130,194,0.1);} #Default .emailContent dt{color:rgba(45,130,194,0.7);} /*header*/ #header{ background-color:#fff; } #header .stickmenu{ top:0 !important; } #header .stickmenu .container{ max-width:1920px; padding-top:30px; } #header .stickmenu .container .row .logo{ width:max-content; margin:auto; display:block; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu{ width:max-content; margin:auto; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu>li{ position:relative; width:auto !important; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu>li .mlink{ line-height:1; font-size:18px; color:rgba(0,0,0,.8); padding:26px 20px; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu>li:hover .mlink{ color:#6653df; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu>li .depth2{ top:100%; left:50%; transform:translateX(-50%); background-color:#6653df; border-radius:10px; box-shadow:2px 2px 3px rgba(0,0,0,.1); padding:15px; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu>li .depth2 li:nth-child(n+2){ border-top:1px solid rgba(255,255,255,.1); } #header .stickmenu .container .row #Menu2 .localNavi #topmenu>li .depth2 li a{ line-height:20px; font-size:15px; color:#fff; padding:13px; display:block; transition:all .2s; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu>li .depth2 li:hover a{ font-weight:500; color:#0f005d; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu #lnb005{ display:none; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu #lnb001 .depth2{ width:170px; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu #lnb002 .depth2{ width:125px; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu #lnb004 .depth2{ width:150px; } #header .stickmenu .container .row #opNav{ position:relative; top:auto; right:auto; margin:0 0 0 auto; cursor:pointer; } #header .stickmenu .container .row #opNav div{ background:#000; } #header .stickmenu .container .row #opNav .bar1{ top:5px; } #header .stickmenu .container .row #opNav:hover .bar1{ top:4px; } #header .stickmenu .container .row #opNav .bar3{ top:23px; } #header .stickmenu .container .row #opNav:hover .bar3{ top:25px; } #header .sticky{ display:none; } /*sns*/ .sns{ position:fixed; top:50%; right:calc(2% + 5px); transform:translateY(-50%); z-index:20; } .sns a{ width:50px; height:50px; border-radius:50%; display:block; filter:drop-shadow(3px 3px 5px #0000004a); overflow:hidden; margin-bottom:10px; } .sns a:last-child{ margin-bottom:0; } .sns .back-to-top{ position:initial; line-height:1; font-size:13px; color:#fff; background-color:#382fb7; border:none; display:flex !important; align-items:center; justify-content:center; opacity:1 !important; } .sns .back-to-top::before{ display:none; } .sns .back-to-top div i{ height:6px; display:block; } .sns .back-to-top div span{ display:block; margin-top:5px; } /*footer*/ #footer{ font-size:initial; padding:0; } #footer .top{ background-color:#eee; } #footer .top .content{ max-width:1400px; height:75px; display:flex; align-items:center; justify-content:space-between; margin:auto; } #footer .top .content .site{ display:flex; } #footer .top .content .site dl{ display:flex; align-items:center; margin-right:10px; } #footer .top .content .site dl:last-child{ margin-right:0; } #footer .top .content .site dl dt{ position:relative; font-size:15px; font-weight:700; color:#333; padding:0 10px; margin-right:10px; } #footer .top .content .site dl dt::before{ content:""; position:absolute; top:5px; left:0; width:1px; height:12px; background-color:rgba(0,0,0,.2); } #footer .top .content .site dl dt::after{ content:""; position:absolute; top:5px; right:0; width:1px; height:12px; background-color:rgba(0,0,0,.2); } #footer .top .content .site dl:first-child dt{ padding:0 10px 0 0; margin-right:0; } #footer .top .content .site dl:first-child dt::before{ display:none; } #footer .top .content .site dl:first-child dt::after{ display:none; } #footer .top .content .site dl:last-child dt{ color:#858585; } #footer .top .content .site dl dd{ font-size:15px; font-weight:700; color:#333; display:flex; align-items:center; } #footer .top .content .site dl dd div:nth-child(n+2){ position:relative; margin-left:10px; padding-left:10px; } #footer .top .content .site dl dd div:nth-child(n+2)::before{ content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1px; height:12px; background-color:rgba(0,0,0,.2); } #footer .top .content .family{ position:relative; width:280px; height:100%; } #footer .top .content .family button{ width:100%; height:100%; background-color:#ddd; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; padding:0 25px; } #footer .top .content .family button span{ font-size:14px; font-weight:800; color:#5f5f5f; } #footer .top .content .family button i{ font-size:14px; color:#5f5f5f; transition:.5s; } #footer .top .content .family ul{ position:absolute; top:100%; left:0; width:100%; height:123px; background-color:#fff; border:1px solid rgba(0,0,0,.5); padding-bottom:0; overflow-x:hidden; overflow-y:auto; display:none; z-index:10; } #footer .top .content .family ul li{ border-bottom:1px dashed rgba(0,0,0,.1); display:block; } #footer .top .content .family ul li::after{ display:none; } #footer .top .content .family ul li:last-child{ border-bottom:none; } #footer .top .content .family ul li a{ height:40px; font-size:13px; color:#666; display:flex; align-items:center; padding:0 10px; transition:.1s; } #footer .top .content .family ul li:hover a{ color:#fff; background-color:#faa831; } #footer .top .content .family_on button i{ transform:rotate(180deg); } #footer .bottom{ background-color:#fff; } #footer .bottom .content{ max-width:1400px; margin:auto; display:flex; align-items:flex-start; padding:56px 0 90px 0; } #footer .bottom .content .right{ text-align:left; margin-left:50px; } #footer .bottom .content .right ul{ line-height:1; padding-bottom:0; margin-bottom:20px; } #footer .bottom .content .right ul li{ position:relative; margin-right:10px; padding-right:10px; } #footer .bottom .content .right ul li::after{ position:absolute; top:3px; left:100%; background:rgba(0,0,0,.2); margin:0; } #footer .bottom .content .right ul li a{ font-size:15px; font-weight:700; color:#9b9b9b; display:block; } #footer .bottom .content .right .info h4{ line-height:1; font-size:16px; font-weight:800; color:#333; } #footer .bottom .content .right .info div{ line-height:1.2; margin:14px 0 10px 0; } #footer .bottom .content .right .info div span{ font-size:15px; font-weight:500; color:#6f6f6f; margin-right:20px; } #footer .bottom .content .right .info div span::after{ display:none; } #footer .bottom .content .right .info div span:last-child{ margin-right:0; } #footer .bottom .content .right .info copy{ line-height:1; font-size:15px; font-weight:500; color:#6f6f6f; margin-top:0; } #footer .bottom .content .right .info copy *{ color:#6f6f6f; } #footer .bottom .content .right .info copy span::after{ display:none; } /*menu(2차)*/ .sub_menu{ position:relative; max-width:1400px; background-color:#fff; border-bottom:1px solid rgba(0,0,0,.1); margin:-57px auto 0 auto; display:flex; z-index:10; } .sub_menu .subMenu::after{ display:none; } .sub_menu .subMenu>div>a{ position:relative; font-size:16px; padding:0 17px; } .sub_menu .subMenu .home{ border-right:none; } .sub_menu .subMenu .home a{ width:57px; height:57px; font-size:0; background-color:#0f035d; } .sub_menu .subMenu .home a::before{ content:"\f015"; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); line-height:1; font-family:"FontAwesomes"; font-size:20px; color:#fff; } .sub_menu .subMenu .depth{ position:relative; min-width:260px !important; } .sub_menu .subMenu .depth>a{ line-height:57px; } .sub_menu .subMenu .depth>a::before{ top:50% !important; right:17px !important; transform:translateY(-50%); font-size:13px !important; color:#ddd; } .sub_menu .subMenu .depth>.up::before{ top:50% !important; transform:translateY(-50%) rotate(-180deg) !important; } .sub_menu .subMenu .depth ul{ top:100%; left:0; width:calc(100% + 1px); min-width:initial; background:#fff; border:1px solid rgba(0,0,0,.1); border-top:none; } .sub_menu .subMenu .depth ul li{ width:100% !important; } .sub_menu .subMenu .depth ul li:hover a{ color:#fff; background-color:#c8a7ff; } .sub_menu .subMenu .m02>a{ color:#333; background-color:#fff !important; } .sub_menu .subMenu .m02 ul{ left:-1px; width:calc(100% + 2px); } .sub_menu .subMenu .m03{ display:none; } .sub_menu .right{ margin:0 30px 0 auto; display:flex; } .sub_menu .right div{ display:flex; align-items:center; margin-right:15px; } .sub_menu .right div:last-child{ margin-right:0; } .sub_menu .right div button img{ display:block; } .sub_menu .right .share{ position:relative; } .sub_menu .right .share ul{ position:absolute; top:50%; right:100%; transform:translateY(-50%); display:none; gap:4px; margin-right:15px; } .sub_menu .right .share ul li{ width:auto !important; } .sub_menu .right .share ul li a{ width:33px; height:33px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .sub_menu .right .share ul .twitter a{ background-color:#00acee; } .sub_menu .right .share ul .facebook a{ background-color:#4267B3; } .sub_menu .right .share ul .kakao a{ background-color:#F7E600; } /*menu(3차)*/ .third_menu{ width:100%; display:flex; flex-wrap:wrap; margin:65px 0 55px 0; } .third_menu li{ font-size:15px; text-align:center; word-break:keep-all; color:#888; background-color:#f8f8f8; border:1px solid #eaeaea; padding:18px 10px; cursor:pointer; } .third_menu li:hover{ font-weight:700; color:#252c84; background-color:#e9e9fe; border:1px solid #cecef7; } .third_menu .on{ font-weight:700; color:#252c84; background-color:#e9e9fe; border:1px solid #cecef7; } .conts001005 .third_menu li{ width:calc(100% / 3); } /*menu(mobile)*/ .mobile_menu #clNav{ top:20px; } .mobile_menu>ul .keep>a::before, .mobile_menu>ul .keep>a::after{ background:rgba(0,0,0,.8) !important; } .mobile_menu>ul .keep .submn{ background:#6d51d0; } .mobile_menu>ul .keep .submn li{ border-top:1px solid rgba(255,255,255,.1); } .mobile_menu>ul .keep .submn li a{ color:#fff; } /*반응형*/ @media only screen and (max-width:1844px){ /*footer*/ #footer .top .content{ max-width:initial; padding:0 50px; } #footer .bottom .content{ max-width:initial; padding:56px 50px 90px 50px; } /*menu(2차)*/ .sub_menu{ width:calc(100% - 100px); max-width:initial; } /*menu(3차)*/ .third_menu{ margin:35px 0 50px 0; } } @media only screen and (max-width:1400px){ /*header*/ #header .stickmenu .container .row .logo img{ height:69px; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu>li .mlink{ font-size:17px; padding:25px 20px; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu>li .depth2{ width:max-content !important; padding:10px 15px; } #header .stickmenu .container .row #Menu2 .localNavi #topmenu>li .depth2 li a{ font-size:14px; padding:12px 10px; } /*footer*/ #footer .bottom .content img{ height:69px; } } @media only screen and (max-width:1214px){ /*header*/ #header .stickmenu .container{ padding-top:0; } #header .stickmenu .container .row{ height:70px; padding:0 50px; display:flex; align-items:center; } #header .stickmenu .container .row .logo{ margin:0; } #header .stickmenu .container .row .logo img{ height:40px; } /*sns*/ .sns{ display:none; } /*footer*/ #footer .top .content{ height:70px; } #footer .top .content .site dl dt{ font-size:14px; } #footer .top .content .site dl dt::before{ height:10px; } #footer .top .content .site dl dt::after{ height:10px; } #footer .top .content .site dl dd{ font-size:14px; } #footer .top .content .site dl dd div:nth-child(n+2)::before{ height:10px; } #footer .top .content .site dl dd div img{ height:24px; } #footer .top .content .family{ width:250px; } #footer .bottom .content img{ height:61px; } #footer .bottom .content .right ul li::after{ height:10px; } #footer .bottom .content .right ul li a{ font-size:14px; } #footer .bottom .content .right .info h4{ font-size:15px; } #footer .bottom .content .right .info div span{ font-size:14px; margin-right:10px; } #footer .bottom .content .right .info copy{ font-size:14px; } /*menu(2차)*/ .sub_menu .subMenu .depth{ min-width:240px !important; } /*menu(3차)*/ .third_menu li{ padding:16px 10px; } } @media only screen and (max-width:1005px){ /*menu(2차)*/ .sub_menu{ z-index:-1; } } @media only screen and (max-width:1000px){ /*header*/ #header .stickmenu .container .row{ padding:0 25px; } /*footer*/ #footer .top .content{ height:auto; flex-wrap:wrap; padding:0; } #footer .top .content .site{ padding:15px 25px; } #footer .top .content .family{ width:100%; } #footer .top .content .family button{ padding:15px 25px; } #footer .bottom .content{ padding:52px 25px 80px 25px; } #footer .bottom .content img{ height:53px; } #footer .bottom .content .right{ margin-left:25px; } /*menu(2차)*/ .sub_menu{ width:calc(100% - 50px); } /*menu(3차)*/ .third_menu{ margin:15px 0 30px 0; } } @media only screen and (max-width:800px){ /*header*/ #header .stickmenu .container .row .logo img{ height:35px; } /*footer*/ #footer .top .content .site{ width:100%; flex-wrap:wrap; justify-content:center; } #footer .top .content .site dl:last-child{ width:100%; margin-top:10px; justify-content:center; } #footer .top .content .site dl:last-child dt{ padding:0 10px 0 0; } #footer .top .content .site dl:last-child dt::before{ display:none; } #footer .bottom .content{ flex-wrap:wrap; justify-content:center; padding:30px 25px 50px 25px; } #footer .bottom .content img{ height:49px; } #footer .bottom .content .right{ text-align:center; margin:25px 0 0 0; } #footer .bottom .content .right .info div span{ margin:0 5px !important; } /*menu(3차)*/ .third_menu li{ font-size:14px; padding:14px 10px; } } @media only screen and (max-width:600px){ /*footer*/ #footer .bottom .content img{ height:45px; } #footer .bottom .content .right ul{ width:200px; margin:0 auto 20px auto; } #footer .bottom .content .right ul li:nth-child(2n){ margin-right:0; padding-right:0; } #footer .bottom .content .right ul li:nth-child(n+3){ margin-top:5px; } #footer .bottom .content .right ul li:nth-child(2)::after{ display:none; } /*menu(3차)*/ .conts001005 .third_menu li{ width:50%; } } @media only screen and (max-width:500px){ /*footer*/ #footer .bottom .content .right .info copy{ line-height:1.2; } /*menu(3차)*/ .conts001005 .third_menu li{ width:100%; } } @media only screen and (max-width:400px){ /*footer*/ #footer .top .content .site dl{ width:100%; justify-content:center; } #footer .top .content .site dl:nth-child(n+2){ margin-top:10px; } #footer .top .content .site dl:last-child{ align-items:flex-start; } #footer .top .content .site dl dt{ min-width:35px; padding:0 10px 0 0; } #footer .top .content .site dl dt::before{ display:none; } #footer .top .content .site dl dd{ display:block; } #footer .top .content .site dl dd div:nth-child(n+2){ margin:5px 0 0 0; padding-left:0; } #footer .top .content .site dl dd div:nth-child(n+2)::before{ display:none; } #footer .bottom .content .right .info div span{ word-break:keep-all; white-space:initial; } }