@charset "utf-8"; /* CSS Document */ body { font-size:16px;} .box1{ width:1160px; max-width:94%; margin:0 auto;} .pcHide{ display:none;} .moHide{} /*header*/ #header{ position:relative; z-index:999; top:0; left:0; right:0; background:#fff;} #header .menu_wrap{ position:relative; z-index:99; background:#f2f5f6;} #header .menu_wrap .menu{ height:2.5em;} #header .menu_wrap .menu > li .in{ display:block; color:#666; text-transform:uppercase;} #header .menu_wrap .menu > li .in:before{ content:""; display:inline-block; vertical-align:middle; width:1px; height:.75em; margin:0 1.125em; background:#000; opacity:.2;} #header .menu_wrap .menu > li:first-child .in:before{ display:none;} #header .menu_wrap .menu > li .xi{ font-size:1em; margin-right:.25em;} #header .menu_wrap .menu > li .tt{ font-size:.813em;} #header .menu_wrap .menu > li:hover .in{ color:#111;} #header .top_wrap{ position:relative; z-index:99; top:0; left:0; right:0; background:#fff;} #header .top_wrap .inner{ height:6.25em;} #header .top_wrap .logo > a{ display:block;} #header .top_wrap .logo > a img{ width:14.5em;} #header .top_wrap .search .inp_wrap{ position:relative; border:2px solid var(--siteC); border-radius:8em; overflow:hidden;} #header .top_wrap .search .inp_wrap .inp{ height:3em; border:none; background-color:transparent; box-sizing:border-box;} #header .top_wrap .search .inp_wrap .inp.txt{ padding:0 3.75em 0 10.25em; width:30em; max-width:100%;} #header .top_wrap .search .inp_wrap .label_select{ position:absolute; top:0; left:0; width:9.5em;} #header .top_wrap .search .inp_wrap .label_select:before{ content:""; position:absolute; right:0; top:20%; width:1px; height:60%; background:#ccc;} #header .top_wrap .search .inp_wrap .label_select select{ padding-left:1.250em;} #header .top_wrap .search .inp_wrap .label_select:after, #header .top_wrap .search .inp_wrap .label_select select{ color:#343b4d;} #header .top_wrap .search .inp_wrap .inp.btn{ position:absolute; top:0; right:0; width:3.75em;} #header .top_wrap .search .inp_wrap .inp.btn .xi{ font-size:1.625em; color:var(--siteC);} #header .top_wrap .search .inp_wrap .inp.btn:hover .xi{ color:#343b4d;} #header .top_wrap .aside #quick{ margin-right:-.75em;} #header .top_wrap .aside #quick .btnQuick{ display:none;} #quick > li{ width:4.375em;} #quick > li .in{ letter-spacing:0;} #quick > li .xi{ font-size:1.500em; line-height:1;} #quick > li .xi:before{ display:inline-block; transition:.4s;} #quick > li .tt{ display:block; margin-top:.313em; font-size:.813em; font-weight:500;} #quick > li:hover .xi:before{ transform:rotateY(360deg);} .quick_wrap > li .in{ position:relative; display:block; padding:.125em .25em; text-align:center; color:#343b4d;} .quick_wrap > li.cart .xi{ margin-left:-.25em;} .quick_wrap > li.cart .num{ position:absolute; top:-.125em; left:50%; margin-left:.25em; width:1.5em; line-height:1.5em; text-align:center; background:var(--siteC); border-radius:50%; color:#fff; letter-spacing:0;} .quick_wrap > li.cart .num > *{ font-size:.813em;} #header .quick_layer{ top:0;} #header .quick_layer #quick{ display:block; height:4.5em;} #header .quick_layer #quick > li{ display:flex; align-items:center; justify-content:center; width:4.063em; height:4.063em; margin-top:.313em; background:#fff; box-shadow:2px 2px 7px rgba(0,0,0,.1); border-radius:50%; transition:.2s;} #header .quick_layer #quick > li:first-child{ margin-top:0;} #header .quick_layer #quick > li.btnQuick{ margin-bottom:.625em; background:var(--siteC);} #header .quick_layer #quick > li.btnQuick .in{ padding-top:.75em; color:#fff; text-transform:uppercase;} #header .quick_layer #quick > li.btnQuick .xi:before{ transform:rotate(0); transition:.2s;} #header .quick_layer #quick > li.btnQuick:hover{ background:#0c0151;} #header .quick_layer #quick > li .in{ padding-left:0; padding-right:0;} #header .quick_layer #quick > li .tt{ margin-top:0; font-size:.688em;} #header .quick_layer #quick > li.con{ opacity:0; visibility:hidden;} #header .quick_layer #quick.on{ height:auto;} #header .quick_layer #quick.on > li.con{ opacity:1; visibility:visible;} #header .quick_layer #quick.on > li.btnQuick .xi:before{ transform:rotate(-180deg);} #header .quick_layer #quick > li.hide{ display:none !important;} #header .goTop{ bottom:0;} #header .goTop .in_wrap{ width:4.063em; height:4.063em; background:#343b4d; box-shadow:2px 2px 7px rgba(0,0,0,.1); border-radius:50%; color:#fff; text-align:center;} #header .goTop .in{ flex:1;} #header .goTop .tt{ display:block; font-size:.625em; font-weight:500; letter-spacing:0;} #header .goTop:hover .in_wrap{ background:#0f2945;} #header .quick_layer, #header .goTop{ position:fixed; z-index:-1; right:3em; opacity:0; visibility:hidden; transition:.2s;} #header .gnb_wrap{ position:relative; z-index:99; background:#fff; border-top:1px solid #ebeeef; border-bottom:1px solid #666;} #header .gnb_wrap .inner{ position:relative; padding-left:3.438em; transition:.2s;} #header .gnb_wrap .inner .mark > a, #header .gnb_wrap .inner .btnAll > a, #header .gnb_wrap .inner .menu .gnb > li .dp1{ display:flex; align-items:center; justify-content:center; text-align:center;} #header .gnb_wrap .mark{ position:absolute; top:0; bottom:0; left:0; display:none;} #header .gnb_wrap .mark > a{ width:3.438em; height:100%;} #header .gnb_wrap .mark > a img{ width:2.375em;} #header .gnb_wrap .btnSearch{ position:absolute; top:0; bottom:0; right:0; width:3.438em; border:none; background:#0c0151; color:#fff; display:none;} #header .gnb_wrap .btnAll{ position:absolute; top:-1px; bottom:0; left:0;} #header .gnb_wrap .btnAll > a{ width:3.438em; height:100%; background:var(--siteC);} #header .gnb_wrap .btnAll .in{ position:relative; width:1.25em; height:1em; margin-top:-1px;} #header .gnb_wrap .btnAll .in .ham{ display:block;} #header .gnb_wrap .btnAll .in .ham, #header .gnb_wrap .btnAll .in .ham:before, #header .gnb_wrap .btnAll .in .ham:after { width:100%; height:2px; background:#fff;} #header .gnb_wrap .btnAll .in .ham:before, #header .gnb_wrap .btnAll .in .ham:after { content:""; position:absolute; left:0; transition:.2s;} #header .gnb_wrap .btnAll .in .ham:before{ top:50%;} #header .gnb_wrap .btnAll .in .ham:after { top:100%;} #header .gnb_wrap .btnAll:hover .ham:before{ width:80%;} #header .gnb_wrap .btnAll:hover .ham:after{ width:120%;} #header .nav_layer{ position:absolute; z-index:-1; left:0; right:0; opacity:0; visibility:hidden;} #header .nav_layer .nav_bg{ position:fixed; z-index:1; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.4); cursor:pointer;} #header .nav_layer .nav_wrap{ position:relative; z-index:2; background:#f2f5f6; box-shadow:0 .25em .25em rgba(0,0,0,.1); max-height:calc(100vh - 15em); overflow-y:auto;} #header .nav_layer #nav .gnb{ flex-wrap:wrap; align-items:stretch; margin-top:-1px; border-right:1px solid #d4d5d8;} #header .nav_layer #nav .gnb > li{ flex:1 0 25%; max-width:25%; padding:1.75em 1.5em; border:solid #d4d5d8; border-width:1px 0 0 1px; box-sizing:border-box;} #header .nav_layer #nav .gnb > li .dp1{ display:block; font-size:1.063em; color:#000; font-weight:500;} #header .nav_layer #nav .gnb > li .dp2{ display:block; padding:.75em 0;} #header .nav_layer #nav .gnb > li .dp2 > li > a{ display:block; padding:.125em 0; color:#555;} #header .nav_layer #nav .gnb > li .dp2 > li > a .tt{ position:relative; display:inline-block; padding-left:.75em; font-size:.875em;} #header .nav_layer #nav .gnb > li .dp2 > li > a .tt:before{ content:""; position:absolute; top:.5em; left:0; width:.313em; height:2px; background:#777;} #header .nav_layer #nav .gnb > li:hover{ background:#fff;} #header .nav_layer #nav .gnb > li .dp2 > li:hover > a{ color:#3ea7e3;} #header .nav_layer #nav .gnb > li .dp2 > li:hover > a .tt{ text-decoration:underline;} #header .nav_layer #nav .gnb > li.m_product .dp1{ cursor:default;} #header .nav_layer #nav .gnb > li.m_mypage, #header .nav_layer #nav .gnb > li.m_order, #header .nav_layer #nav .gnb > li.m_site{ display:none;} #header.nav_open .nav_layer{ z-index:2; opacity:1; visibility:visible;} #header.nav_open .gnb_wrap .btnAll .in{ width:2em; height:2em;} #header.nav_open .gnb_wrap .btnAll .in .ham{ background:transparent;} #header.nav_open .gnb_wrap .btnAll .in .ham:before, #header.nav_open .gnb_wrap .btnAll .in .ham:after { top:50%; width:100% !important;} #header.nav_open .gnb_wrap .btnAll .in .ham:before{ transform:rotate(-45deg);} #header.nav_open .gnb_wrap .btnAll .in .ham:after { transform:rotate(45deg);} #header .gnb_wrap .menu{ margin-right:-2em;} #header .gnb_wrap .menu .gnb{ text-align:center;} #header .gnb_wrap .menu .gnb > li{ flex:1 0 auto;} #header .gnb_wrap .menu .gnb > li .dp1{ display:inline-flex !important; position:relative; padding:0 .25em; height:3.438em;} #header .gnb_wrap .menu .gnb > li .dp1:before{ content:""; position:absolute; left:50%; bottom:-1px; margin-left:0; width:0; height:4px; background:var(--siteC); transition:.2s;} #header .gnb_wrap .menu .gnb > li .dp1 .tt{ font-size:1.063em; font-weight:500;} #header .gnb_wrap .menu .gnb > li:hover .dp1, #header .gnb_wrap .menu .gnb > li.on .dp1 { color:var(--siteC);} #header .gnb_wrap .menu .gnb > li.active .dp1{ color:#0c0151;} #header .gnb_wrap .menu .gnb > li:hover .dp1:before, #header .gnb_wrap .menu .gnb > li.on .dp1:before, #header .gnb_wrap .menu .gnb > li.active .dp1:before{ width:100%; margin-left:-50%;} #header .gnb_wrap .menu .gnb > li.active .dp1:before{ background:#0c0151;} #header .gnb_wrap .menu .gnb > li:not(.m_product), #header .gnb_wrap .menu .gnb .dp2{ display:none;} #header .gnb_dropdown{ position:absolute; left:0; right:0; display:none;} #header .gnb_dropdown *{ box-sizing:border-box;} #header .gnb_dropdown .gnb_bg{ position:fixed; z-index:1; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.4); cursor:pointer;} #header .gnb_dropdown .inner{ position:relative; z-index:2; background:#fff; box-shadow:0 .25em .25em rgba(0,0,0,.1); overflow-y:auto; overflow-x:hidden;} #header .gnb_dropdown .inner .flex{ align-items:stretch;} #header .gnb_dropdown .menu, #header .gnb_dropdown .recomm{ position:relative; padding:2em 0;} #header .gnb_dropdown .menu { flex:1 0 67%;} #header .gnb_dropdown .recomm{ flex:1 0 33%; padding-left:1.5em; border-left:1px solid #d4d5d8;} #header .gnb_dropdown .recomm:before{ content:""; position:absolute; z-index:1; top:0; left:0; width:3000px; height:100%; background:#f2f5f6;} #header .gnb_dropdown .recomm > *{ position:relative; z-index:2;} #header .gnb_dropdown .menu .gnb{ display:block;} #header .gnb_dropdown .menu .gnb > li .dp1{ display:none;} #header .gnb_dropdown .menu .gnb > li .dp2{ flex-wrap:wrap; justify-content:flex-start;} #header .gnb_dropdown .menu .gnb > li .dp2 > li{ flex:1 0 33.33%; max-width:33.33%; padding-right:1em;} #header .gnb_dropdown .menu .gnb > li .dp2 > li > a{ display:block; padding:.75em 0; color:#555; letter-spacing:0;} #header .gnb_dropdown .menu .gnb > li .dp2 > li > a .tt{ position:relative; display:inline-block; padding-left:.75em; font-size:.938em;} #header .gnb_dropdown .menu .gnb > li .dp2 > li > a .tt:before{ content:""; position:absolute; top:.5em; left:0; width:4px; height:4px; background:var(--siteC); border-radius:50%;} #header .gnb_dropdown .menu .gnb > li .dp2 > li:hover > a{ color:var(--siteC);} #header .gnb_dropdown .menu .gnb > li .dp2 > li:hover > a .tt{ text-decoration:underline;} #header .gnb_dropdown .recomm .tit{ margin-bottom:1em; padding-left:.5em;} #header .gnb_dropdown .recomm .tit .tt{ font-size:1.250em;} #header .gnb_dropdown .recomm .list{ margin-left:-1em;} #header .gnb_dropdown .recomm .list > li{ flex:1;} #header .gnb_dropdown .recomm .list > li .in{ display:block; text-align:center; margin-left:1em;} #header .gnb_dropdown .recomm .list .img_wrap{ background:#fff; box-shadow:2px 2px 7px rgba(0,0,0,.05); border-radius:50%; overflow:hidden;} #header .gnb_dropdown .recomm .list .img_wrap .img{ flex-direction:column; align-items:stretch;} #header .gnb_dropdown .recomm .list .img_wrap .img > *{ flex:0 0 auto; max-height:100%;} #header .gnb_dropdown .recomm .list .img_wrap .img img{ max-height:100%;} #header .gnb_dropdown .recomm .list .tt{ margin-top:1em; font-size:.875em; font-weight:500; word-break:break-all; word-wrap:break-word;} #header.gnb_open .gnb_dropdown{ display:block;} .wrapFix #header{ position:fixed;} .wrapFix #header .menu_wrap{ display:none;} .wrapFix #header .top_wrap{ position:fixed; height:0; overflow:hidden; opacity:0;} .wrapFix #header .top_wrap .logo, .wrapFix #header .top_wrap .aside{ visibility:hidden;} .wrapFix #header .gnb_wrap{ border-top-width:0;} .wrapFix #header .gnb_wrap .inner{ padding-left:6.876em; padding-right:3.438em;} .wrapFix #header .gnb_wrap .mark, .wrapFix #header .gnb_wrap .btnSearch{ display:block;} .wrapFix #header .gnb_wrap .btnAll{ left:3.438em;} .wrapFix #header .gnb_wrap .menu{ margin-right:0;} .wrapFix #header .gnb_wrap .menu .gnb > li .dp1 .tt{ font-size:1em;} .wrapFix #header .quick_layer, .wrapFix #header .goTop{ z-index:99; opacity:1; visibility:visible;} .wrapFix #header .quick_layer{ top:5.5em;} .wrapFix #header .goTop{ bottom:2em;} #header.search_open .top_wrap{ height:auto; padding-top:3.5em; box-shadow:0 .25em .25em rgba(0,0,0,.1); opacity:1; transition:.2s;} #header.search_open .gnb_wrap .btnSearch .xi:before{ content:"\e921";} /*footer*/ #footer{} #footer .family_wrap{ padding:1em 0; background:#fff; border-top:2px solid #ddd;} #footer .family_wrap .inner{ overflow:hidden;} #footer .family_wrap .flexAc{ height:3em;} #footer .family_wrap .tit{ float:left; width:11.5em; justify-content:flex-start;} #footer .family_wrap .tit .tt{ font-size:1.125em; color:#333; font-weight:500;} #footer .family_wrap .family{ margin-left:11.5em; opacity:0;} #footer .family_wrap .family.slick-slider{ opacity:1;} #footer .family_wrap .family .item{ float:left;} #footer .family_wrap .family .item .in{ width:100%; overflow:hidden; flex-direction:column;} #footer .family_wrap .family .item .in img{ flex:0 0 auto; max-width:80%; max-height:85%;} #footer .info_wrap{ background:#2c2a39;} #footer .info_wrap .menu_con{ border-bottom:1px solid rgba(255,255,255,.2);} #footer .info_wrap .menu_con .menu{ justify-content:flex-start;} #footer .info_wrap .menu_con .menu > li .in{ height:3.75em; padding:0 1.75em; color:#fff;} #footer .info_wrap .menu_con .menu > li .in.c1{ color:#fff15a;} #footer .info_wrap .menu_con .menu > li:first-child .in{ padding-left:0;} #footer .info_wrap .menu_con .menu > li .tt{ font-size:.938em; font-weight:500;} #footer .info_wrap .menu_con .menu > li:hover .tt{ text-decoration:underline;} #footer .info_wrap .info_con{ padding:2.25em 0 5em 0;} #footer .info_wrap .info_con .inner{ overflow:hidden;} #footer .info_wrap .info_con .logo{ float:left; display:block;} #footer .info_wrap .info_con .logo img{ width:11.5em;} #footer .info_wrap .info_con .copyright{ margin:.125em 0 0 14.125em;} #footer .info_wrap .info_con .copyright *{ color:#fff;} #footer .info_wrap .info_con .copyright .tt{ display:inline-block; padding:.25em 1.125em .25em 0; font-size:.813em; line-height:1.4;} #footer .info_wrap .info_con .copyright .tt *{ vertical-align:baseline;} #footer .info_wrap .info_con .copyright .add{ display:block;} #footer .info_wrap .info_con .copyright .copy{ display:block; margin-top:1.125em; font-size:.688em; text-transform:uppercase; letter-spacing:0;} /*contents*/ #contents{} #contents .sub_page_nav{ padding:.75em 0; background:#fff; border-bottom:1px solid #ebeeef; box-shadow:0 2px 3px rgba(0,0,0,.05);} #contents .sub_page_nav .nav > li{ display:inline-block;} #contents .sub_page_nav .nav > li.def:before{ content:"\e93f"; font-family:xeicon; color:#999; display:inline-block; vertical-align:middle;} #contents .sub_page_nav .nav > li.home .xi{ display:inline-block; font-size:1.125em;} #contents .sub_page_nav .nav > li.def .tt{ display:inline-block; font-size:.875em; text-transform:uppercase;} #contents .sub_page_nav .nav > li.on .tt{ color:var(--siteC); font-weight:500;} #contents .sub_page_layout{ padding:2em 0 8em 0;} #contents .sub_layout_wrap{ align-items:flex-start;} #contents .sub_layout_wrap .lnb_wrap{ width:12em;} #contents .sub_layout_wrap .doc_wrap{ flex:1; padding-left:2.5em;} #contents .sub_layout_wrap .lnb_wrap .gnb{ display:block;} #contents .sub_layout_wrap .lnb_wrap .gnb > li{ display:none;} #contents .sub_layout_wrap .lnb_wrap .gnb > li.on{ display:block;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp1{ position:relative; display:block; padding:1.5em .5em; background:var(--siteC); text-align:center; color:#fff; overflow:hidden;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp1:before{ content:""; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:url(../images/inc/logo_mark_white.svg) no-repeat right .25em bottom -.75em; opacity:.15;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp1 .tt{ position:relative; z-index:2; display:block; font-size:1.375em; font-weight:500; text-transform:uppercase; letter-spacing:0;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp1 .tt:before{ content:""; font-family:xeicon; font-size:1.500em; font-weight:normal; display:block;} #contents .sub_layout_wrap .lnb_wrap .gnb > li.m_customer .dp1 .tt:before{ content:"\eadb";} #contents .sub_layout_wrap .lnb_wrap .gnb > li.m_site .dp1 .tt:before { content:"\eb1f";} #contents .sub_layout_wrap .lnb_wrap .gnb > li.m_mypage .dp1 .tt:before { content:"\e9f5";} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp2{ display:block; border:1px solid #d4d5d8; border-top:none;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp2 > li > a{ position:relative; display:block; padding:1em 1em; padding-right:2em; background:#fff; border:solid #ebeeef; border-width:1px 0 0 0; transition:.2s;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp2 > li:first-child > a{ border-top-width:0;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp2 > li > a:after{ content:"\ea40"; font-family:xeicon; font-size:1.375em; color:#ebeeef; line-height:1; position:absolute; top:50%; right:.5em; margin-top:-.5em; transition:.2s;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:.938em;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp2 > li:hover > a, #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp2 > li.on > a{ background:#f2f5f6; color:var(--siteC);} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp2 > li:hover > a:after, #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp2 > li.on > a:after{ color:var(--siteC);} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp3{ padding:1em 1em; background:#fbfbfb; border-top:1px solid #ebeeef;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp3 > li > a{ display:block; padding:.5em 0; border-top:1px solid #eee; color:#555;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp3 > li:first-child > a{ border-top:none;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp3 > li > a .tt{ font-size:.875em;} #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp3 > li:hover > a, #contents .sub_layout_wrap .lnb_wrap .gnb > li .dp3 > li.on > a{ color:#d82744;} #contents .sub_layout_wrap .doc_wrap .doc_top{ padding:1em 0 1.813em 0; border-bottom:1px solid #d4d5d8;} #contents .sub_layout_wrap .doc_wrap .doc_tit .tt{ font-size:1.750em; color:#343b4d; letter-spacing:0;} #contents .sub_layout_wrap .doc_wrap .doc_txt{ margin-top:1em;} #contents .sub_layout_wrap .doc_wrap .doc_txt .tt{ color:#777;} #contents .sub_layout_wrap .doc{ padding:0 0;} #contents .sub_layout_wrap .doc_top ~ .doc{ padding-top:2.5em;} #contents .sub_page_visual{ position:relative; padding:4.5em 0 8em 0; text-align:center; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;} #contents .sub_page_visual.bg_company{ background-image:url(../images/sub/sub_visual_company.jpg);} #contents .sub_page_visual .sub_tit .tt{ font-size:2.500em; color:#fff;} #contents .sub_page_gnb{ position:absolute; left:0; right:0; bottom:0;} #contents .sub_page_gnb .gnb{ display:block;} #contents .sub_page_gnb .gnb .dp2 > li{ flex:1 0 auto;} #contents .sub_page_gnb .gnb .dp2 > li > a{ display:block; padding:1.125em 1em; background:#000; border-left:1px solid rgba(255,255,255,.2); color:#fff; font-weight:500; opacity:.6; transition:.2s;} #contents .sub_page_gnb .gnb .dp2 > li:first-child > a{ border-left:none;} #contents .sub_page_gnb .gnb .dp2 > li:hover > a{ opacity:.8;} #contents .sub_page_gnb .gnb .dp2 > li.on > a{ background:#fff; color:#111; opacity:1;} #contents .sub_page_gnb .gnb > li, #contents .sub_page_gnb .gnb > li .dp1, #contents .sub_page_gnb .gnb > li .dp3{ display:none;} #contents .sub_page_gnb .gnb > li.on{ display:block;} #contents .sub_page_tit{ position:relative; padding:3em 0 1.5em 0; border-bottom:1px solid #ddd; box-shadow:0 2px 4px rgba(0,0,0,.1); text-align:center;} #contents .sub_page_tit:after{ content:""; position:absolute; bottom:-1px; left:50%; margin-left:-2em; width:4em; height:4px; background:var(--siteC);} #contents .sub_page_tit .tit{ font-size:2.000em; color:#343b4d; font-weight:500; letter-spacing:0;} #contents .sub_icon_cate{ margin-bottom:1em;} #contents .sub_icon_cate .cate_wrap{ align-items:stretch; border:solid #d4d5d8; border-top-color:#343b4d; border-width:3px 0 1px 0;} #contents .sub_icon_cate .cate_wrap *{ box-sizing:border-box;} #contents .sub_icon_cate .cate_wrap .inner{ justify-content:center; text-align:center; padding:1em;} #contents .sub_icon_cate .cate_wrap .cate_tit{ width:16em; border:solid #d4d5d8; border-width:0 1px 0 0; background:#f4f7f8;} #contents .sub_icon_cate .cate_wrap .cate_tit > .tt{ font-size:1.500em; color:#343b4d; font-weight:500; letter-spacing:0;} #contents .sub_icon_cate .cate_wrap .cate_gnb{ flex:1; align-items:stretch;} #contents .sub_icon_cate .cate_wrap .cate_gnb > li{ flex:1;} #contents .sub_icon_cate .cate_wrap .cate_gnb > li .in{ display:block; position:relative; padding:0 .5em;} #contents .sub_icon_cate .cate_wrap .cate_gnb > li .in:before{ content:""; position:absolute; left:0; top:20%; height:60%; width:1px; background:#ebeeef;} #contents .sub_icon_cate .cate_wrap .cate_gnb > li:first-child .in:before{ display:none;} #contents .sub_icon_cate .cate_wrap .cate_gnb > li .in .icon{ display:inline-block; width:2em; line-height:2em; background:#d4d5d8; border-radius:100%; color:#fff; transition:.2s;} #contents .sub_icon_cate .cate_wrap .cate_gnb > li .in .icon .xi{ font-size:1.25em;} #contents .sub_icon_cate .cate_wrap .cate_gnb > li .in .tt{ display:block; margin-top:.75em; font-weight:500;} #contents .sub_icon_cate .cate_wrap .cate_gnb > li:hover .in .icon{ background:#343b4d; transform:rotateY(-180deg);} #contents .sub_icon_cate .cate_wrap .cate_gnb > li.on .in .icon{ background:var(--siteC);} #contents .sub_icon_cate .cate_wrap .cate_gnb > li.on .in .tt{ color:var(--siteC);} #contents .doc{ padding:3em 0 8em 0;} /*PRODUCT************************/ .prod_nav_wrap{ position:relative; z-index:99; left:0; right:0; padding:.75em 0; background:#f2f5f6; border-bottom:1px solid #ebeeef;} .prod_nav_wrap .prod_nav{ justify-content:flex-start;} .prod_nav_wrap .prod_nav > li{ position:relative; margin-left:1em; line-height:1.5em;} .prod_nav_wrap .prod_nav > li:first-child{ margin-left:0;} .prod_nav_wrap .prod_nav > li a{ display:block; position:relative; overflow:hidden; color:#222} .prod_nav_wrap .prod_nav > li .sec{ position:absolute; top:0; left:-1.25em; width:1.5em; text-align:center; font-size:.875em; color:#777;} .prod_nav_wrap .prod_nav > li .sec:before{content:"\e940"} .prod_nav_wrap .prod_nav > li.home > a{ padding-right:.25em;} .prod_nav_wrap .prod_nav > li.home > a .icon:before{ content:"\e902"; font-size:.875em;} .prod_nav_wrap .prod_nav > li .dp1{ padding:0 .5em;} .prod_nav_wrap .prod_nav > li .dp1 .tt{ font-size:.875em; font-weight:500;} .prod_nav_wrap .prod_nav > li .dp1 .arrow{ font-size:1em; padding-left:1em} .prod_nav_wrap .prod_nav > li .dp1 .arrow:before{content:"\e938"} .prod_nav_wrap .prod_nav > li:hover .dp1, .prod_nav_wrap .prod_nav > li.on .dp1{ color:var(--siteC);} .prod_nav_wrap .prod_nav > li .dp2_wrap{ position:absolute; left:0; width:13em; padding-top:.5em; display:none;} .prod_nav_wrap .prod_nav > li .dp2{ border:1px solid #111; box-shadow:4px 4px 5px rgba(0,0,0,.2); background:#fff; padding:.5em .5em;} .prod_nav_wrap .prod_nav > li .dp2 > li > a{ padding:.25em 1.25em .25em .5em; line-height:1.2;} .prod_nav_wrap .prod_nav > li .dp2 > li > a .tt{ font-size:.813em; transition:.3s} .prod_nav_wrap .prod_nav > li .dp2 > li > a .arrow{ position:absolute; right:-2em; top:50%; margin-top:-.438em; width:1em; text-align:center; transition:.3s} .prod_nav_wrap .prod_nav > li .dp2 > li > a .arrow:before{content:"\e93f"; font-size:.75em} .prod_nav_wrap .prod_nav > li .dp2 > li > a:hover{ background:#f5f5f5;} .prod_nav_wrap .prod_nav > li .dp2 > li > a:hover .arrow{ right:0;} .prod_nav_wrap .prod_nav > li.on .dp2_wrap{ display:block;} .wrapFix .prod_nav_wrap{ position:fixed;} .prod_cate_wrap{ padding-top:2em;} .prod_cate_wrap .cate_tit{ position:relative; padding-left:1.75em;} .prod_cate_wrap .cate_tit:before, .prod_cate_wrap .cate_tit:after { content:""; position:absolute; transform:rotate(45deg);} .prod_cate_wrap .cate_tit:before{ top:.375em; left:0; width:.875em; height:.875em; background:#0c0151;} .prod_cate_wrap .cate_tit:after { top:.875em; left:.063em; width:.75em; height:.75em; background:var(--siteC);} .prod_cate_wrap .cate_tit .tt{ font-size:1.750em; color:#343b4d; font-weight:700; letter-spacing:0;} .prod_cate_wrap .cate_list{ margin-top:1.25em;} .prod_cate_wrap .cate_list .cate > li .dp3{ display:none;} .prod_cate_wrap .cate_list .cate > li > a{ position:relative; z-index:1; display:block; margin-bottom:-1px; padding:.875em 5em .875em 1em; min-height:1em; border:solid #c7cdd3; border-width:1px; color:#555; transition:padding .2s;} .prod_cate_wrap .cate_list .cate > li > a .tt{ position:relative; display:block; padding-left:1.5em; font-weight:500;} .prod_cate_wrap .cate_list .cate > li > a .tt:before{ content:"\e928"; font-family:xeicon; position:absolute; top:0; left:0; color:#aaa;} .prod_cate_wrap .cate_list .cate > li > a .arrow{ position:absolute; top:50%; right:1em; transform:translateY(-50%); transition:.2s;} .prod_cate_wrap .cate_list .cate > li > a .arrow:before{ content:"\e940";} .prod_cate_wrap .cate_list .cate > li > a:hover{ z-index:3; padding-left:1.5em; background:#343b4d; border-color:#343b4d; color:#fff;} .prod_cate_wrap .cate_list .cate > li > a:hover .arrow{ right:.75em;} .prod_cate_wrap .cate_list .cate > li.hide{ display:none;} .prod_cate_wrap.on .cate_list .cate > li.hide{ display:block;} .prod_cate_wrap .cate_more{ position:relative; z-index:2; margin-right:1.25em; text-align:right;} .prod_cate_wrap .cate_more .btn{ display:inline-block; padding:.5em 1.5em; min-width:9em; background:#fff; border:1px solid #c7cdd3; border-top:none; text-align:center;} .prod_cate_wrap .cate_more .btn .tt{ font-weight:500;} .prod_cate_wrap .cate_more .btn .tt:before{ content:"카테고리 더보기";} .prod_cate_wrap .cate_more .btn .icon{ padding-left:.5em;} .prod_cate_wrap .cate_more .btn .icon:before{ content:"\e941";} .prod_cate_wrap.on .cate_more .btn .tt:before{ content:"카테고리 닫기";} .prod_cate_wrap.on .cate_more .btn .icon:before{ content:"\e921";} .prod_list_top{ flex-wrap:wrap; padding:.75em 1.5em; background:#f5f5f5; border:solid #ddd; border-top-color:#343b4d; border-width:1px 0;} .prod_list_top > *{ margin-bottom:0 !important; margin-right:2em;} .prod_list_top > *:last-child{ margin-right:0;} .prod_list_top .tit{ flex:1;} .prod_list_top .tit .tt{ display:inline-block; margin-right:1em;} .prod_list_top .tit .tt:last-child{ margin-right:0;} .prod_list_top .tit .tt *{ vertical-align:baseline;} .prod_list_top .tit .t1{ font-size:1.375em; letter-spacing:0;} .prod_list_top .tit .t2{ font-size:1em; font-weight:500; opacity:.6;} .prod_list_top .tit .tb{ font-weight:700;} .prod_list_wrap{} .prod_list_wrap .prod_list .el{ margin-top:-1px; border:solid #d4d5d8; border-width:1px 0;} .prod_list_wrap .prod_list .inner .td{ padding:1em 1em;} .prod_list_wrap .prod_list .inner .che_wrap{ width:4em;} .prod_list_wrap .prod_list .inner .img_wrap{ width:15em;} .prod_list_wrap .prod_list .inner .con_wrap{ width:auto; line-height:1.5; letter-spacing:0;} .prod_list_wrap .prod_list .inner .img_wrap .img{ display:block; background:#fff; border:1px solid #eee; position:relative;} .prod_list_wrap .prod_list .inner .img_wrap .img:before, .prod_list_wrap .prod_list .inner .img_wrap .img:after { position:absolute; z-index:1; opacity:0; visibility:hidden; transition:.2s;} .prod_list_wrap .prod_list .inner .img_wrap .img:before{ content:""; left:-1px; right:-1px; top:-1px; bottom:-1px; background:#000;} .prod_list_wrap .prod_list .inner .img_wrap .img:after { content:"\e917"; font-family:xeicon!important; left:50%; top:50%; transform:translate(-50%, -50%); font-size:2em; color:#fff;} .prod_list_wrap .prod_list .inner .img_wrap .img:hover:before{ opacity:.4; visibility:visible} .prod_list_wrap .prod_list .inner .img_wrap .img:hover:after { opacity:1; visibility:visible; transform:translate(-50%, -50%) rotate(90deg);} .prod_list_wrap .prod_list .inner .con_wrap .path{ margin-bottom:1.5em;} .prod_list_wrap .prod_list .inner .con_wrap .path .tt{ font-size:.875em; color:#333;} .prod_list_wrap .prod_list .inner .con_wrap .sbj{ display:block; font-size:1em; color:#111;/* word-break:break-all; word-wrap:break-word;*/} .prod_list_wrap .prod_list .inner .con_wrap a.sbj:hover{ text-decoration:underline;} .prod_list_wrap .prod_list .inner .con_wrap .desc{ margin-top:.75em; font-size:.875em; color:#72727d;} .prod_list_wrap .prod_list .inner .con_wrap .brand{ display:inline-block; margin-top:1.75em; padding:.25em 1.25em; border:1px solid #d4d5d8; border-radius:6em;} .prod_list_wrap .prod_list .inner .con_wrap .brand .tt{ font-size:.938em; color:var(--siteC); font-weight:500;} .prod_list_wrap .prod_list .inner .con_wrap .num{ margin-bottom:.375em;} .prod_list_wrap .prod_list .inner .con_wrap .num .tt{ display:inline-block;} .prod_list_wrap .prod_list .inner .con_wrap .num .tt:before{ content:""; display:inline-block; vertical-align:middle; margin:0 1em; width:1px; height:1em; background:#d4d5d8;} .prod_list_wrap .prod_list .inner .con_wrap .num .tt:first-child:before{ display:none;} .prod_list_wrap .prod_list .inner .con_wrap .num .t1{ font-size:1em; color:#343b4d; font-weight:700;} .prod_list_wrap .prod_list .inner .con_wrap .num .t2{ font-size:.938em; color:var(--siteC); font-weight:500;} .prod_list_wrap .prod_list .inner .con_wrap .info{ flex-wrap:wrap; margin-top:2em;} .prod_list_wrap .prod_list .inner .con_wrap .info .prod_price{ padding-right:.5em;} .prod_list_wrap .prod_list .inner .con_wrap .more_btn{ margin-top:1.5em;} .prod_list_wrap .prod_list .inner .con_wrap .more_btn .btn{ min-width:8em !important;} .prod_list_wrap .prod_list .inner .con_wrap .prod_icon{ margin-top:1em;} .prod_list_wrap .prod_list .inner .con_wrap .prod_icon + .info{ margin-top:.75em;} .prod_list_wrap.st1{}/*리스트*/ .prod_list_wrap.st2{}/*상세*/ .prod_list_wrap.st3{}/*비교하기*/ .prod_list_wrap.st2 .prod_list .el{ margin-top:0; border-width:0;} .prod_list_wrap.st3 .prod_list{ display:inline-block; width:100%; max-width:16em;} .prod_list_wrap.st3 .prod_list .inner .img_wrap, .prod_list_wrap.st3 .prod_list .inner .con_wrap{ width:auto;} .prod_list_wrap.st3 .prod_list .inner .con_wrap{ margin-top:.75em; font-size:.813em;} .prod_list_wrap.st3 .prod_list .inner .con_wrap .prod_btn_inc{ margin-top:1em;} .prod_list_wrap.st3 .prod_list .inner .con_wrap .prod_btn_inc .input_st{ max-width:4em; font-size:1.125em;} /*제품상세 new style*/ .prod_list_wrap.st2 .prod_list .inner .con_wrap .more_btn > a:hover{ text-decoration:none;} .prod_list_wrap.st2 .prod_list .inner .info_wrap{ width:55%; vertical-align:top; padding-left:1.5em; padding-right:0;} .prod_list_wrap.st2 .prod_list .inner .info_wrap .pg_tit.dep3{ line-height:1;} .prod_list_wrap.st2 .prod_list .inner .info_wrap .flex{ justify-content:flex-start; align-content:flex-start; align-items:flex-start;} .prod_list_wrap.st2 .prod_list .inner .info_wrap .flex, .prod_list_wrap.st2 .prod_list .inner .info_wrap .flex > *{ box-sizing:border-box;} .prod_list_wrap.st2 .prod_list .inner .info_wrap > .info_detail > .info_list{ flex:1; padding-right:1.5em; line-height:1.3;} .prod_list_wrap.st2 .prod_list .inner .info_wrap > .info_detail > .info_list:last-child{ padding-right:0;} .prod_list_wrap.st2 .prod_list .inner .info_wrap > .info_detail > .info_list > li{ padding:.313em 0; font-size:.938em;} .prod_list_wrap.st2 .prod_list .inner .info_wrap > .info_detail > .info_list > li .tit{ width:9em; color:#111; font-weight:500;} .prod_list_wrap.st2 .prod_list .inner .info_wrap > .info_detail > .info_list > li .con{ flex:1;} .prod_list_wrap.st2 .prod_list .inner .info_wrap > .info_detail > .info_list > li .con > p{ padding:.125em 0;} /*end*/ .prod_compare_fix{ position:fixed; z-index:1000; left:0; bottom:-100%; width:100%; background:#0f2945; box-shadow:0 -2px 7px 0 rgba(0,0,0,.2); transition:.4s;} .prod_compare_fix.active{ bottom:0;} .prod_compare_fix.bg1{ background:#0f2945;} .prod_compare_fix.bg2{ background:#171f33;} .prod_compare_fix .con_wrap .td{ padding:1.5em 0;} .prod_compare_fix .con_wrap .list_wrap{ width:auto;} .prod_compare_fix .con_wrap .btn { width:9em;} .prod_compare_fix .con_wrap .btn .input_st{ width:100%; margin:.125em 0; font-size:.938em; border-color:#24282f;} .prod_compare_fix .con_wrap .list{ align-items:flex-start; justify-content:flex-start; align-items:stretch;} .prod_compare_fix .con_wrap .list > li{ flex:1; max-width:25%;} .prod_compare_fix .con_wrap .list > li .in{ position:relative; margin-right:1.5em; padding:.75em; height:100%; min-height:4.875em; background:#fff; border-radius:.25em; box-sizing:border-box;} .prod_compare_fix .con_wrap .list > li .in .img{ width:25%; max-width:4em;} .prod_compare_fix .con_wrap .list > li .in .img .re{ border:1px solid #eee; background:#fff;} .prod_compare_fix .con_wrap .list > li .in .img .noimg{ font-size:.625em;} .prod_compare_fix .con_wrap .list > li .in .desc{ width:70%; padding-left:5%; color:#111;} .prod_compare_fix .con_wrap .list > li .in .desc .num{ font-weight:700;} .prod_compare_fix .con_wrap .list > li .in .desc .tit{ font-size:.813em; margin-top:.25em; height:2.438em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-all; word-wrap:break-word;} .prod_compare_fix .con_wrap .list > li .cmpDel{ position:absolute; top:-.75em; right:-.75em; width:2em; line-height:2em; background:#343b4d; border:2px solid #fff; border-radius:100%; text-align:center; font-size:1em; color:#fff; cursor:pointer;} .prod_compare_fix .con_wrap .list > li .cmpDel:before{ content:"\e921";} .prod_compare_fix .con_wrap .list > li.empty .in{ background:rgba(0,0,0,.5); overflow:hidden;} .prod_compare_fix .con_wrap .list > li.empty .in:before{ content:""; position:absolute; top:50%; left:50%; width:3px; height:500%; background:rgba(255,255,255,.1); transform:translate(-50%,-50%) rotate(72deg);} .prod_compare_fix .con_wrap .list > li.empty .in .img .re{ visibility:hidden;} .prod_compare_fix .con_wrap .list > li.empty .cmpDel{ visibility:hidden;} .prod_compare_fix .con_wrap.cmp_res2 .list > li{ max-width:50%;} .prod_compare_fix .con_wrap.cmp_res2 .list > li:nth-child(3), .prod_compare_fix .con_wrap.cmp_res2 .list > li:nth-child(4){ display:none;} .prod_compare_fix .con_wrap.cmp_res4 .list > li{ max-width:25%;} /**/ .prod_view_top .prod_view_img { width:45%;} .prod_view_top .prod_view_info{ width:55%; letter-spacing:0;} .prod_view_top .prod_view_img .in{ position:relative; display:block; background:#fff; border:1px solid #d4d5d8;} .prod_view_top .prod_view_img .big{ float:left; width:83%;} .prod_view_top .prod_view_img .thumb{ float:right; width:15.77%;} .prod_view_top .prod_view_img .thumb > li{ margin-top:6.5%;} .prod_view_top .prod_view_img .thumb > li:first-child{ margin-top:0;} .prod_view_top .prod_view_img .thumb > li .in:after{ content:""; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; border:solid var(--siteC); border-width:0; transition:.2s;} .prod_view_top .prod_view_img .thumb > li:hover .in{ box-shadow:1px 1px 4px rgba(0,0,0,.15);} .prod_view_top .prod_view_img .thumb > li.on .in:after{ border-width:3px;} .prod_view_top .prod_view_info .inner{ margin-left:5em;} .prod_view_top .prod_view_info .prod_tit{ margin-bottom:2em; padding:1.5em .25em; border-top:2px solid #343b4d; border-bottom:1px dashed #343b4d;} .prod_view_top .prod_view_info .prod_tit .t1{ font-size:.938em; color:var(--siteC); font-weight:500; margin-bottom:.25em;} .prod_view_top .prod_view_info .prod_tit .t2{ font-size:1.375em; color:#111; word-break:break-all; word-wrap:break-word;} .prod_view_top .prod_view_info .prod_tit .t3{ font-size:.938em; color:#72727d; font-weight:500; margin-bottom:1.5em;} .prod_view_top .prod_view_info .prod_tit .t4{ font-size:1.688em; color:#343b4d; font-weight:700; margin-bottom:.25em;} .prod_view_top .prod_view_info .prod_txt{ padding:0 .25em;} .prod_view_top .prod_view_info .prod_txt .txt{ font-size:1em; color:#555; line-height:1.4;} .prod_view_top .prod_view_info .prod_txt .btn{ margin-top:1em; min-width:10em !important; font-size:.875em;} .prod_view_top .prod_view_info .TGwrap .TGcon{ position:relative; height:17em;} .prod_view_top .prod_view_info .TGwrap .TGcon:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:20%; background:rgba(255,255,255,.6); background:linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 100%);} .prod_view_top .prod_view_info .TGwrap.hide .TGcon:after, .prod_view_top .prod_view_info .TGwrap.on .TGcon:after{ display:none;} .prod_view_top .prod_view_info .tt_info > .tt{ font-size:.938em;} .prod_view_top .prod_view_info .pdf_btn{ margin-top:1em; text-align:right; text-transform:uppercase;} .prod_view_top .prod_view_info .prod_price{ margin-top:3em; font-size:1.063em;} .prod_view_top .prod_view_info .prod_btn_inc{ margin-top:3em; font-size:1.063em;} .prod_view_wrap{ position:relative; margin-top:3em; padding-top:5em;} .prod_view_wrap .prod_view_tab{ position:absolute; z-index:9; top:0; left:0; right:0; padding:1em 0 1em 0; background:#fff; border-bottom:1px solid #ebeeef; box-shadow:0 3px 3px rgba(0,0,0,.05);} .prod_view_wrap .prod_view_tab.tabFix{ position:fixed;} .prod_view_wrap .prod_view_con{ padding:2.5em 0 4em 0; min-height:15vh;} .prod_view_wrap .prod_view_con:last-child{ padding-bottom:0;} .prod_view_wrap .prod_view_con .pg_box *{ max-width:100% !important; vertical-align:baseline;} .prod_view_wrap .prod_view_con .pg_box table{ width:100% !important;} .prod_view_wrap .prod_view_con .pg_box img{ width:auto !important; height:auto !important;} .prod_view_wrap .prod_view_con .pg_box strong, .prod_view_wrap .prod_view_con .pg_box b{ font-weight:700;} .prod_view_wrap .clear_btn{ font-size:.875em; text-transform:uppercase;} .prod_filter_wrap{ margin-bottom:2em; padding-top:1px;} .prod_filter_wrap .inner{ flex-wrap:wrap; margin-top:-1px; padding:.5em 1.25em; border:1px solid #343b4d;} .prod_filter_wrap .filterBy { background:linear-gradient(0deg, #ebeeef 0%, #fff 60%);} .prod_filter_wrap .filterApp{ background:#eef7fc;} .prod_filter_wrap .tit{ width:8em;} .prod_filter_wrap .tit .xi{ margin-right:.125em;} .prod_filter_wrap .tit .tt{ font-weight:500; text-transform:uppercase;} .prod_filter_wrap .filter{ flex:1;} .prod_filter_wrap .filter .btn, .prod_filter_wrap .filter .val{ margin:.125em 0; min-width:8em !important; border-radius:5em !important; text-align:center;} .prod_filter_wrap .filter .val{ display:inline-flex; justify-content:space-between; align-content:center; align-items:center; min-width:0; cursor:pointer;} .prod_filter_wrap .filter .val .xi:before{ content:"\e9af";} .prod_filter_wrap .filter .btn:hover{ background:var(--siteC); color:#fff !important;} .tooltip_wrap{ display:inline-block; position:relative;} .tooltip_wrap .tt_tooltip{ position:absolute; left:0; margin-top:.625em; margin-left:-.5em; width:14em; padding:.5em .75em; background:#fff; border:1px solid #343b4d; border-radius:.25em; box-shadow:1px 1px 3px rgba(0,0,0,.3); text-align:left; box-sizing:border-box; font-size:.813rem; color:#000; line-height:1.2; display:none;} .tooltip_wrap .tt_tooltip:before, .tooltip_wrap .tt_tooltip:after { content:""; position:absolute; bottom:100%; left:.813em; width:0; height:0;} .tooltip_wrap .tt_tooltip:after { border:8px solid transparent; border-bottom-color:#fff;} .tooltip_wrap .tt_tooltip:before{ border:9px solid transparent; border-bottom-color:#343b4d; margin-left:-1px;} .tooltip_wrap .tt_tooltip *{ vertical-align:baseline;} .tooltip_wrap.open{ z-index:2;} .tooltip_wrap.open .tt_tooltip{ display:block;} .prod_btn_inc{} .prod_btn_inc .input_st{ padding-left:.25em !important; padding-right:.25em !important; min-width:inherit !important; text-align:center;} .prod_btn_inc .inp{ width:5em;} .prod_btn_inc .btn.st1{ width:12em;} .prod_btn_inc .btn.st2{ width:5em;} .sameAttr_list > li{ display:inline-block; vertical-align:top; margin-right:-.5em;} .sameAttr_list > li > .tt{ display:inline-block; padding:.25em 1.5em .25em 0; line-height:1.2; word-break:break-all; word-wrap:break-word;} .prod_col_wrap{ flex-wrap:wrap; margin-bottom:1em;} .prod_col_wrap .in{ display:inline-block; margin-left:1.5em;} .prod_col_wrap .in:first-child{ margin-left:0;} .prod_col_wrap .tit{ display:inline-block; margin-right:.5em;} .prod_col_wrap.st1{ margin-top:1em; margin-bottom:0;} .prod_col_wrap .board_btn_wrap{ margin-top:0;} .prod_col_wrap .pg_ex{ flex:1 1 100%;} .prod_col_wrap .pg_ex br{ display:none;} .prod_price_total{ padding:2em 1em; border:solid #343b4d; border-width:1px 0; border-top-style:dashed; text-align:right; color:#555; letter-spacing:0;} .prod_price_total .tt_price{ display:inline-block;} .prod_price_total .tt_price > *{ margin-left:.5em;} .prod_price_total .tt_price > *:first-child{ margin-left:0;} .prod_price_total .tt_price > .no{ margin-top:-.125em;} .prod_price_total .tt_price > .tt{ font-size:1.125em;} .prod_price_total .icon{ padding:0 .75em; font-size:1.750em; color:#343b4d;} .date_search_wrap{} .date_search_wrap .tit{ margin-bottom:.5em;} .date_search_wrap .tit .xi{ font-size:1.500em; margin-right:.25em;} .date_search_wrap .tit .tt{ font-size:1.125em;} .date_search_wrap .inner{ margin-top:-1px; padding:1em 1em; border:1px solid #72727d;} .date_search_wrap .inner:first-child{ margin-top:0;} .date_search_wrap .inner .row{ display:flex; flex-wrap:wrap; padding:.25em 0;} .date_search_wrap .inner .con{ display:inline-block; vertical-align:middle; margin-right:2.25em;} .date_search_wrap .inner .con:last-child{ margin-right:0 !important;} .date_search_wrap .inner.flex .tit{ width:10em; margin:0;} .date_search_wrap .inner.flex .row{ flex:1; padding:0;} .date_search_wrap .inner .row > .input_st{ margin-left:.25em;} .date_search_wrap .inner .row > .input_st:first-child{ margin-left:0;} .date_search_wrap .inner .row > .input_st[type=text]{ flex:1;} .date_search_wrap .inner .input_st.s2[type=button]{ min-width:3.813em !important;} .date_search_wrap .btn_wrap{ margin-top:1.5em; text-align:center;} .date_search_wrap.st1{ font-size:.938em;} .date_search_wrap.st1 .inner .con{ margin-right:.5em;} .date_search_wrap.st1 .inner.flex .tit{ width:7.5em;} /*통합검색************************/ .totalSearch{} .totalSearch .lnb_wrap .sear_tit{ padding:1.75em 1em 1em 1em; background:#343b4d;} .totalSearch .lnb_wrap .sear_tit .tit{ margin-bottom:1em;} .totalSearch .lnb_wrap .sear_tit .tit .tt{ font-size:1.125em; color:#fff; letter-spacing:0;} .totalSearch .lnb_wrap .sear_tit .inp_wrap{ position:relative;} .totalSearch .lnb_wrap .sear_tit .inp_wrap .inp{ height:2.5em; border:none; background:transparent; box-sizing:border-box; font-size:.875em;} .totalSearch .lnb_wrap .sear_tit .inp_wrap .inp_txt{ width:100%; padding:0 2em 0 .5em; background:#fff;} .totalSearch .lnb_wrap .sear_tit .inp_wrap .inp_btn{ position:absolute; top:0; right:0; width:2em; text-align:left;} .totalSearch .lnb_wrap .sear_tit .inp_wrap .inp_btn .xi{ font-size:1.750em; color:#343b4d;} .totalSearch .lnb_wrap .sear_gnb > li .dp2{ border-color:#343b4d !important;} .totalSearch .lnb_wrap .sear_gnb > li .dp3{ border-top-color:#ccc !important;} .totalSearch .search_results{ padding:1.5em 1em; background:#f4f7f8; border:solid #343b4d; border-width:2px 0 1px 0; text-align:center;} .totalSearch .search_results .tit .tt{ font-size:1.375em; color:#343b4d;} .totalSearch .search_results .app{ display:flex; flex-wrap:wrap; justify-content:center; margin-top:1em;} .totalSearch .search_results .app .val{ display:inline-flex; align-content:center; align-items:center; text-align:left; min-width:0; min-height:2.375em; margin:.063em .063em; padding:.25em 1.25em; background:linear-gradient(-180deg, #fff 0%, #fff 50%, #ecf0f4 100%); border:1px solid #72727d; border-radius:5em; box-sizing:border-box;} .totalSearch .search_results .app .val .tt{ font-size:.938em; font-weight:500;} .totalSearch .search_results .app .val .xi{ margin-left:.25em;} .totalSearch .search_results .app .val .xi:before{ content:"\e9af";} .totalSearch .search_results .txt{ margin-top:1em;} .totalSearch .search_results .txt .tt{ font-size:1.063em; color:#555;} .totalSearch .search_results .txt .tt em{ vertical-align:baseline; color:var(--siteC); font-weight:700;} .totalSearch .search_tab{ margin:3em 0 2em 0;} .totalSearch .prod_list_wrap .prod_list{ font-size:.938em;} /*SUB PAGE************************/ /*inc*/ .page_mg { margin-top:3em !important;} .page_mg1{ margin-top:1em !important;} .page_mg2{ margin-top:6em !important;} .page_mg3{ margin-top:.375em !important;} .tab_wrap{ margin-bottom:3.5em;} .tab_st{ flex-wrap:wrap; align-items:stretch; justify-content:flex-start; text-align:center; padding:1px 0 0 1px;} .tab_st > li{ flex:1; max-width:20%;} .tab_st > li .in{ display:flex; align-content:center; align-items:center; justify-content:center; text-align:center; position:relative; z-index:1; margin:-1px 0 0 -1px; padding:1em .5em; height:calc(100% + 1px); box-sizing:border-box; background:#f5f5f5; border:1px solid #ddd; color:#666;} .tab_st > li .in .tt{ font-size:1em; font-weight:500; word-break: keep-all;} .tab_st > li.on .in{ z-index:2; background:#fff; color:#111;} .tab_st > li.on .in:before, .tab_st > li.on .in:after { content:""; position:absolute; left:-1px; right:-1px;} .tab_st > li.on .in:before{ top:-1px; height:3px; background:#343b4d;} .tab_st > li.on .in:after { bottom:-1px; height:1px; background:#fff;} .tab_st.st1 > li{ max-width:none;} .pg_ex{ margin-top:1em; color:#333; line-height:1.1em;} .pg_ex:first-child{ margin-top:0;} .pg_ex .icon{ position:relative; margin:.25em 0;} .pg_ex .icon.st1{ padding-left:1em;} .pg_ex .icon.st2{ padding-left:1.5em;} .pg_ex .icon.st3{ padding-left:2em; min-height:1.3em;} .pg_ex .icon:before{ position:absolute; left:0; line-height:1.063em;} .pg_ex .icon.st1:before{ content:"*"; top:.125em; font-size:1.375em;} .pg_ex .icon.st2:before{ content:"※"; top:0; font-size:1.125em;} .pg_ex .icon.st3:before{ content:"\eb23"; top:0; font-family:xeicon; font-size:1.625em; color:var(--siteC);} .pg_ex .pg_ex_in{ display:inline-block; vertical-align:middle; margin-right:2em;} .pg_ex .pg_ex_in:last-child{ margin-right:0;} .pg_ex.st1{ padding:.75em 1em; background:#fff;} .pg_ex.st2{ padding:.75em 1em; background:#f1f1f1; border-radius:.375em;} .pg_ex.st3{ padding:.75em 1em; background:#f9f9f9; border:1px solid #d4d5d8; border-radius:.375em;} .pg_ex.pd1{ padding:1.5em 1.5em;} .pg_ex.ac .icon{ display:inline-block;} .pg_box{ padding:1.25em 1.5em; background:#fff; border:1px solid #d4d5d8; box-sizing:border-box;} .pg_box.st1{ border-top-width:2px; border-top-color:#333; min-height:inherit;} .pg_box.st2{ background:#f4f7f8;} .pg_num_list *{ box-sizing:border-box;} .pg_num_list > li{ padding:.5em 0; border-top:1px solid #ebeeef;} .pg_num_list > li:first-child{ border-top:none;} .pg_num_list .in{ justify-content:flex-start; line-height:1.4;} .pg_num_list .in .no{ min-width:4em; margin-right:1em; padding:.5em .5em; background:linear-gradient(-180deg, #fff 0%, #fff 50%, #ecf0f4 100%); border:1px solid #e5e5e5; border-radius:5em; text-align:center; color:var(--siteC); font-weight:500;} /* .pg_num_list .in:nth-child(7) .no{ line-height: 35px;} */ .pg_num_list .in .tt{ flex:1; word-break: keep-all;} .pg_menu_list{ justify-content:flex-start; align-items:flex-start; align-items:stretch; padding:0 1px 1px 0;} .pg_menu_list > li{ display:flex; flex:1 0 20%; max-width:20%; word-break: keep-all;} .pg_menu_list > li .in{ position:relative; z-index:1; flex:1; margin:0 -1px -1px 0; padding:.5em .5em; min-height:2em; background:linear-gradient(-180deg, #fff 0%, #fff 50%, #ecf0f4 100%); border:1px solid #d4d5d8; text-align:center;} .pg_menu_list > li:hover .in{ z-index:2; background:#0f2945; border-color:#0f2945; color:#fff; transition:.2s;} .pg_list > li{ padding:.125em 0; line-height:1.4;} .pg_tit_col.flex{ flex-wrap:wrap;} .pg_tit_col{ margin-bottom:.75em;} .pg_tit_col *{ margin-bottom:0 !important;} .pg_tit_col.st1{ margin-bottom:3em;} .pg_tit{ position:relative;} .pg_tit:before, .pg_tit:after { content:""; position:absolute; left:0; top:0;} .pg_tit > .tt{ font-weight:500;} .pg_tit > .tt > *{ vertical-align:baseline;} .pg_tit > .tt > span { font-weight:400;} .pg_tit > .tt > strong{ font-weight:700;} .pg_tit > .tt + .pg_tit{ margin-top:.75em;} .pg_tit > span.tt, .pg_tit > strong.tt{ display:inline-block;} .pg_tit .c1{ color:#d82744;} .pg_tit.dep1{ margin-bottom:1em; padding-left:.75em;} .pg_tit.dep1:before{ top:.25em; width:.375em; height:1.125em; background:#0f2945; border-radius:.25em;} .pg_tit.dep1 > .t1{ font-size:1.313em; color:#0f2945; font-weight:500;} .pg_tit.dep1 > .t2{ padding-top:.5em; color:#72727d; font-weight:400; line-height:1.4; word-break: keep-all;} .pg_tit.dep1 > .tt ~ .label_st{ margin-left:1em; font-size:.938em; vertical-align:middle;} .pg_tit.dep2{ margin-bottom:.75em; padding-left:1.5em;} .pg_tit.dep2:before{ z-index:2; top:.125em; width:.438em; height:.438em; background:#fff; border:3px solid var(--siteC);} .pg_tit.dep2:after { z-index:1; top:.313em; left:.188em; width:.875em; height:.875em; background:#c6d1d5;} .pg_tit.dep2 > .tt{ margin-left:2em; color:#171f33;} .pg_tit.dep2 > .tt:first-child{ margin-left:0;} .pg_tit.dep2 > .t1{ font-size:1.125em;} .pg_tit.dep2 > .t2{ font-size:1em;} .pg_tit.dep2 > p.tt, .pg_tit.dep2 > div.tt{ margin-left:0;} .pg_tit.dep2 a:hover{ text-decoration:underline;} .pg_tit.dep3{ margin-bottom:.75em; padding-left:1.375em;} .pg_tit.dep3:before{ content:"\ea40"; font-family:xeicon; font-size:1.125em; color:#00479e; font-weight:normal; line-height:1; top:0;} .pg_tit.dep3 > .tt{ color:#00479e;} .pg_tit.dep3 > .t1{ font-size:1.063em;} .pg_tit.od{ margin-bottom:.75em;} .pg_tit.od > .tt{ font-size:1.250em; color:#424955;} .pg_tit.od > .no{ font-weight:700;} .pg_tit.od > .xi.tt{ font-size:1.625em; margin-right:.25em;} .pg_tit.com{ margin-bottom:1em; text-align:center;} .pg_tit.com > .tt{ font-size:2.000em; color:#343b4d; font-weight:500;} .pg_tit.com > .t1{ font-size:1.625em;} .pg_txt{ vertical-align:baseline;} .pg_txt.line{ text-decoration:underline;} .pg_txt.tb{ font-weight:700;} .pg_txt.t1{ font-size:.750em;} .pg_txt.t2{ font-size:.875em;} .pg_txt.t3{ font-size:.938em;} .pg_txt.t4{ font-size:1em;} .pg_txt.t5{ font-size:1.125em;} .pg_txt.t6{ font-size:1.250em;} .pg_txt.t7{ font-size:1.625em;} .pg_txt.c1{ color:var(--siteC);} .pg_txt.c2{ color:#0f2945;} .pg_txt.c3{ color:#d82744;} .pg_txt.c4{ color:#ef7c00;} .pg_txt.c5{ color:#2abd87;} .pg_txt.c6{ color:#000000;} .pg_txt.c7{ color:#222222;} .pg_txt.c8{ color:#434343;} .pg_txt.c9{ color:#343b4d;} .pg_txt.c10{ color:#124bcb;} .memo_st{ background:#f4f7f8; border:1px solid #ddd; padding:1.5em;} .memo_st:first-child{ margin-bottom:3em;} .memo_st:last-child { margin-top:3em;} .memo_st .tt{ position:relative; margin-top:.5em; padding:.125em 0 .125em 2.25em; line-height:1.4; font-size:.875em; color:#666;} .memo_st .tt:first-child{ margin-top:0;} .memo_st .tt:before{ content:"\e9a6"; font-family:xeicon!important; font-size:1.75em; color:#aaa; line-height:1; position:absolute; left:0; top:0;} .memo_st .tt * { vertical-align:baseline;} .memo_st .tt.t1{ font-size:1em; color:#111;} .ttdot{ position:relative; padding-left:1rem; line-height:1.3; letter-spacing: -0.05em;} .ttdot:before{ content:""; position:absolute; left:0; top:.575em; width:.313rem; height:.313rem; background:var(--siteC); border-radius:50%;} .input_st.c7.re{ white-space: nowrap;} /*flex box*/ .flex_box { } .flex_box.s1 { margin: 0 0 -1em -1em; } .flex_box.s2 { margin: 0 0 -2em -2em; } .flex_box.s3 { } .flex_box.s4 { } .flex_box.s5 { } .flex_box .fst2 > li { flex: 1 1 50%; max-width: 50%; } .flex_box .fst2 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst3 > li { flex: 1 1 33.33%; max-width: 33.33%; } .flex_box .fst3 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst4 > li { flex: 1 1 25%; max-width: 25%; } .flex_box .fst4 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst5 > li { flex: 1 1 20%; max-width: 20%; } .flex_box .fst5 > li > .in { margin: 0 0 1em 1em; } .flex_box li > a { display: block; } /**/ .page_tit{ margin-bottom: 2.5em;} .page_tit .t2{ font-size: 1.915em; font-weight: 900; letter-spacing: -0.03em;} .page_tit .t4{ margin-top: 1em; font-size: 1.15em; font-weight: 500; line-height: 1.4; word-break: keep-all;} /*MEMBER***************************/ .member_wrap{} .member_wrap .login_box{ width:580px; max-width:100%; margin:0 auto;} .member_wrap .join_box { width:860px; max-width:100%; margin:0 auto;} .member_wrap .cert_box { width:800px; max-width:100%; margin:0 auto;} .member_wrap .member_tit{ padding:0 0 2em 0; text-align:center;} .member_wrap .member_tit .tit{ margin-bottom:.3em; color:#343b4d; font-weight:700;} .member_wrap .member_tit .tit.st1{ font-size:2.500em; text-transform:uppercase;} .member_wrap .member_tit .tit.st2{ font-size:2em; margin-bottom:0;} .member_wrap .member_tit .tit.st3{ font-size:1.500em;} .member_wrap .member_tit .txt{ color:#72727d; line-height:1.4;} .member_wrap .member_tit .txt.st1{ font-size:.938em;} .member_wrap .member_tab{ text-align:center; padding:0 1px 0 0;} .member_wrap .member_tab > li{ flex:1 0 auto;} .member_wrap .member_tab > li .in{ position:relative; z-index:1; display:block; margin:0 -1px -1px 0; padding:1em .5em; background:#f0f0f0; border:1px solid #d4d5d8; font-size:1.125em; color:#72727d; font-weight:500;} .member_wrap .member_tab > li.on .in{ z-index:2; background:#fff; border-bottom-color:transparent; color:var(--siteC);} .member_wrap .member_tab > li.on .in:before{ content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:4px; background:var(--siteC);} .member_wrap .member_form{ padding:2.5em 2em; border:1px solid #d4d5d8;} .member_wrap .member_form.st1{ border-top-width:4px; border-top-color:var(--siteC);} .member_wrap .member_form.st2{ padding:0; border-top-color:#0f2945;} .member_wrap .form > li:first-child{ margin-top:0;} .member_wrap .form .inp_wrap{ position:relative; margin-top:.375em;} .member_wrap .form .inp_wrap .xi{ position:absolute; z-index:2; top:0; left:0; width:4em; line-height:3.5em; text-align:center; font-size:1em; color:#343b4d;} .member_wrap .form .inp_wrap .xi:before{ font-size:1.750em;} .member_wrap .form .inp_wrap .inp{ box-sizing:border-box; width:100%; height:3.5em; padding:0 1em 0 4.5em; background:#fff; border:1px solid #ddd; border-radius:.25em;} .member_wrap .form .inp_wrap .inp_sel{ background:transparent;} .member_wrap .form .inp_wrap .inp_btn{ margin-left:.5em; padding:0 1em; background:#343b4d; border-color:#343b4d; color:#fff;} .member_wrap .form .inp_wrap .inp:focus{ border-color:#0c0151;} .member_wrap .form .inp_wrap.flex .inp{ flex:3;} .member_wrap .form .inp_wrap.flex .inp_btn{ flex:1;} .member_wrap .form .btn_wrap{ margin-top:1.25em;} .member_wrap .form .btn_wrap .btn{ margin:.375em 0; font-size:1.125em;} .member_wrap .form .btn{ display:block; box-sizing:border-box; text-align:center; width:100%; padding:.875em 1em; border:1px solid #0f2945; border-radius:.25em;} .member_wrap .form .btn.c1{ background:#0f2945; color:#fff;} .member_wrap .form .btn.c2{ background:#ffffff; color:#0f2945;} .member_wrap .form .id_wrap{ padding:3em 1em; background:#f5f5f5; border:1px solid #e5e5e5; border-radius:.3em; text-align:center;} .member_wrap .form .id_wrap strong{ vertical-align:baseline; color:var(--siteC); letter-spacing:0;} .member_wrap .etc_wrap{ margin-top:1.5em;} .member_wrap .etc_wrap .find{ text-align:center;} .member_wrap .etc_wrap .find .link{ position:relative; display:inline-block; *display:inline; zoom:1; vertical-align:middle; margin-left:.8em; padding-left:.8em;} .member_wrap .etc_wrap .find .link:before{ content:""; position:absolute; top:10%; left:0; width:1px; height:80%; background:#ccc;} .member_wrap .etc_wrap .find .link:first-child{ margin-left:0; padding-left:0;} .member_wrap .etc_wrap .find .link:first-child:before{ display:none;} .member_wrap .etc_wrap .find .link:hover{ text-decoration:underline;} .member_wrap .terms_wrap{} .member_wrap .terms_wrap > li{ padding-top:2em;} .member_wrap .terms_wrap > li:first-child{ padding-top:0;} .member_wrap .terms_wrap .all_check{ padding:1em 0; border-bottom:1px dashed #bbb; font-size:1.063em;} .member_wrap .terms_wrap .label_st .xi ~ span{ font-weight:500;} .member_wrap .terms_wrap .label_st .xi ~ span > *{ vertical-align:baseline;} .member_wrap .terms_wrap .tit{ margin-bottom:.75em; font-size:.938em;} .member_wrap .terms_wrap .c1{ color:#d82744;} .member_wrap .terms_wrap .c2{ color:var(--siteC);} .member_agree .agree{ padding:2em; border:solid #ddd; border-width:2px 1px 1px 1px; border-top-color:#333; color:#555; line-height:1.5; word-break: keep-all;} .member_agree .agree.H { padding:1.5em; border-top-width:1px; background:#f2f5f6; font-size:.875em;} .member_agree .agree.H2{ padding:1em 1.5em;} .member_agree .agree.js_mouse_wheel{ height:10em; overflow-y:scroll;} .member_agree .agree p{ padding:.5em 0;} .member_agree .agree *{ vertical-align:baseline;} .member_agree .agree strong{ color:#222;} .member_agree .agree .table_container{width: 100%; overflow-x: auto;} .member_agree .agree .table_container table{ width:100%; font-size:.875em; line-height:1.3; border-collapse: collapse;} .member_agree .agree .table_container table th, .member_agree .agree .table_container table td{ padding:.5em 1em; vertical-align:middle; border:1px solid #e8e8e8; } .member_agree .agree .table_container table thead th, .member_agree .agree .table_container table thead td{ background:#f0f0f0; text-align:center;} .member_agree .agree .table_container table tbody th, .member_agree .agree .table_container table tbody td{ background:#fff;} .member_agree .agree_tit{ margin-bottom:.5em;} .member_agree .agree_tit *{ vertical-align:middle;} .member_agree .agree_tit .tt{ font-size:1.125em; font-weight:500;} .member_agree .agree_tit .label_st .xi{ font-weight:normal;} .member_agree .agree_check{ margin-top:-1px; padding:1em 1em; border:1px solid #ddd; font-size:.938em;} .member_btn_wrap{ margin-top:1.5em; text-align:center;} .member_btn_wrap > li{ flex:1; padding-left:.5em;} .member_btn_wrap > li:first-child{ padding-left:0;} .member_btn_wrap .input_st{ width:100%; min-width:auto !important; font-size:1.125em !important; padding-left:.5em; padding-right:.5em;} .mem_recover_wrap{ box-sizing:border-box; min-height:calc(100vh - 20em); padding:4em 0 8em 0;} .page_step_wrap{ margin-bottom:2em;} .page_step_wrap .step{ justify-content:center; text-align:center;} .page_step_wrap .step > li .in{ position:relative; padding:0 3.25em; color:#ccc;} .page_step_wrap .step > li .in:before{ content:"\e940"; font-family:xeicon; position:absolute; font-size:2.000em; color:#ddd; top:.25em; left:-.5em;} .page_step_wrap .step > li:first-child .in:before{ display:none;} .page_step_wrap .step > li .in > *{ display:block;} .page_step_wrap .step > li .in .xi{ margin-bottom:.375em; font-size:2.250em; text-align:center;} .page_step_wrap .step > li .in .xi:before{ display:inline-block; width:1.75em; line-height:1.75em; background:#f2f2f2; border-radius:100%;} .page_step_wrap .step > li .in .no{ display:block; font-size:.688em; font-weight:700; text-transform:uppercase; letter-spacing:0;} .page_step_wrap .step > li .in .tt{ display:block; font-size:1.125em; font-weight:500;} .page_step_wrap .step > li.on .in .xi:before{ color:#fff; background:#0c0151;} .page_step_wrap .step > li.on .in .no{ color:#0c0151;} .page_step_wrap .step > li.on .in .tt{ color:#343b4d;} .page_step_wrap.st1{} .page_step_wrap.st2{} .page_step_wrap.st2 .step{ font-size:.875em; text-align:left;} .page_step_wrap.st2 .step > li:first-child .in{ padding-left:0;} .page_step_wrap.st2 .step > li:last-child .in { padding-right:0;} .page_step_wrap.st2 .step > li .in > *{ display:inline-block; vertical-align:middle;} .page_step_wrap.st2 .step > li .in:before{ top:50%; transform:translateY(-50%);} .page_step_wrap.st2 .step > li .in .xi{ font-size:2.500em;} .page_step_wrap.st2 .step > li .in .xi:before{ width:auto; line-height:normal; background:transparent; border-radius:none;} .page_step_wrap.st2 .step > li .in .txt{ padding-left:.5em;} .page_step_wrap.st2 .step > li.on .in .xi:before{ color:#0c0151;} .join_cer_wrap{} .join_cer_wrap > li{ flex:1; position:relative; border-left:1px solid #ebeeef; text-align:center;} .join_cer_wrap > li:first-child{ border-left:none;} .join_cer_wrap .icon .in{ display:inline-flex; width:8em; height:8em; background:#f2f5f6; border-radius:100%;} .join_cer_wrap .icon .in img{ width:5em;} .join_cer_wrap .tit{ padding:1em 0; font-size:1.500em;} .join_cer_wrap .txt{ min-height:4em; font-size:.938em; color:#72727d; line-height:1.4;} .join_cer_wrap .btn{ margin-top:.5em;} .join_cer_wrap em{ vertical-align:baseline; color:#ef7c00; font-weight:700;} .join_cer_wrap.st1 > li{ padding:0 1em;} .join_cer_wrap.st2 > li{ padding:2em 2em;} .join_cer_wrap > li .B{ display:none;} .join_cer_wrap > li.on .A{ display:none;} .join_cer_wrap > li.on .B{ display:block;} .join_cer_wrap > li.on .tit .B{ display:inline-block; vertical-align:baseline;} .join_cer_wrap > li.off:after{ content:""; position:absolute; top:0; left:-1px; right:-1px; bottom:-1px; background:#000; opacity:.4;} .join_table{ border-top:1px solid #333; font-size:.938em;} .join_table th, .join_table td{ height:2.25em; padding:.5em .5em .5em 1.25em; border-bottom:1px solid #e8e8e8; text-align:left;} .join_table th{ color:#343b4d; background:#f8f8f8;} .join_table td{ color:#72727d;} .join_table .w_form_tit{ width:11em;} .join_in_box{ padding:.5em .75em; border:1px solid #ebeeef; border-radius:.25em;} .join_in_box:first-child{ margin-top:0 !important;} .join_in_box > li{ margin-top:.75em; padding-top:.5em; border-top:1px dashed #ccc;} .join_in_box > li:first-child{ margin-top:0; padding-top:0; border-top:none;} .join_in_box .tit{ position:relative; margin:.5em 0 .5em 0; padding-left:.75em; color:#0f2945;} .join_in_box .tit:before{ content:""; position:absolute; top:.45em; left:0; width:.35em; height:.35em; background:#0f2945; border-radius:100%;} .join_in_box .label_st{ font-size:.875em;} .join_finish{ padding:1em 0; text-align:center;} .join_finish .tit{ margin-bottom:.75em; font-size:1.750em; color:#343b4d; font-weight:500;} .join_finish .txt{ color:#72727d; line-height:1.5;} .join_finish .txt strong{ color:#d82744; vertical-align:baseline;} .join_finish .join_table{ width:80%; margin:2em auto 0 auto;} /*MYPAGE***************************/ .my_top_info{ margin-bottom:3em; border:solid #d4d5d8; border-width:2px 1px 1px 1px; border-top-color:#0f2945;} .my_top_info .info_wrap{ padding:.75em 1.25em; background:#f2f5f6; border-bottom:1px solid #ebeeef;} .my_top_info .info_wrap .txt{ flex:1;} .my_top_info .info_wrap .txt .tt{ display:inline-block; margin-right:.25em; font-weight:500;} .my_top_info .info_wrap .txt .xi{ font-size:1.500em; color:#343b4d; margin-right:.25em;} .my_top_info .info_wrap .txt .t1{ font-size:1.063em; color:var(--siteC);} .my_top_info .info_wrap .txt .t2{ font-size:.938em; color:#343b4d;} .my_top_info .info_wrap .txt .t3{ font-size:.938em; color:#666; margin-bottom:.063em;} .my_top_info .info_wrap .btn .link{ position:relative; display:block; color:#0f2945; transition:.3s;} .my_top_info .info_wrap .btn .link:after{ content:"\e907"; font-family:xeicon !important; font-size:1.250em; color:#124bcb; position:absolute; right:0; top:50%; transform:translateY(-50%); opacity:0; transition:.3s;} .my_top_info .info_wrap .btn .link .xi{ font-size:1em; margin-right:.5em;} .my_top_info .info_wrap .btn .link .tt{ font-size:.875em; font-weight:500;} .my_top_info .info_wrap .btn .link:hover{ padding-right:1.5em; color:#124bcb;} .my_top_info .info_wrap .btn .link:hover:after{ opacity:1;} .my_top_info .con_wrap{ flex-wrap:wrap; align-items:stretch; text-align:center;} .my_top_info .con_wrap .inner{ box-sizing:border-box; padding:1em .5em;} .my_top_info .con_wrap .inner.w1{ flex:1;} .my_top_info .con_wrap .inner.w2{ width:18em; border-left:1px solid #ebeeef;} .my_top_info .con_wrap .my_state > li{ flex:1;} .my_top_info .con_wrap .my_state > li .in{ display:block; padding:0 .5em;} .my_top_info .con_wrap .my_state > li .in .icon{ width:3em; line-height:3em; background:#f7f7f7; border-radius:100%; font-size:1em; color:#343b4d;} .my_top_info .con_wrap .my_state > li .in .icon:before{ font-size:1.375em;} .my_top_info .con_wrap .my_state > li .in .tt{ font-size:.875em; color:#343b4d; padding:.5em 0 .125em 0;} .my_top_info .con_wrap .my_state > li .in .no{ font-size:1.250em; color:var(--siteC); font-weight:700;} .my_top_info .con_wrap .my_rank{ flex:1;} .my_top_info .con_wrap .my_rank .tt{ display:inline-block; margin-left:.25em; font-weight:500;} .my_top_info .con_wrap .my_rank .xi{ font-size:1.375em; color:#72727d;} .my_top_info .con_wrap .my_rank .t1{ font-size:1em; color:#72727d;} .my_top_info .con_wrap .my_rank .t2{ font-size:1.188em; color:#111;} /**/ .page_dot_list { padding: 0 1.25em; margin-top: 1.25em; } .page_dot_list.pN { padding: 0em; } .page_dot_list.mt0{ margin-top: 0em;} .page_dot_list.pN > li:before { display: none; } .page_dot_list > li { position:relative; margin-bottom: .5em; letter-spacing: -0.03em; font-weight: 500; word-break: keep-all;} .page_dot_list > li > .txt { font-size: 1em; } .page_dot_list > li:before { position: absolute; left: -15px; top: -1px; content: '-'; } .page_dot_list > li:last-of-type { margin-bottom: 0em; } .page_dot_list.ty1 > li{ position: relative; margin-bottom: .5em; letter-spacing: 0em; font-weight: 500;} .page_dot_list.ty1 > li:before{ position: absolute; left: -15px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); content: '';} .page_dot_list.s1 > li { font-size: .9em; } .page_dot_list.s2 > li { font-size: 1.063em; line-height: 1.4;} .page_dot_list.s3 > li { font-size: 1.15em; line-height: 1.4;} .page_dot_list.w1 { display: flex; flex-wrap: wrap; gap: 1em;} .page_dot_list.w1 > li { width: calc(50% - .5em); margin-bottom: 0em; padding-right: .5em; box-sizing: border-box;} .page_dot_list.w2 { display: flex; flex-wrap: wrap; gap: .5em; } .page_dot_list.w2 > li { width: calc(33.33% - .5em); margin-bottom: 0em; } .page_dot_list.c1{ color: #111;} .page_dot_list.c2{ color: #222;} .page_dot_list.c3{ color: #333;} .page_dot_list.c4{ color: #444;} /*인재채용*/ .human_div{ display: flex; gap: 6em; align-items: center;} .human_div .img_con{ width: 50%; height: 25em;} .human_div .img_con > img{ width: 100%; height: 100%; object-fit: cover;} .human_div .infoW{ position:relative; width: 50%;} .human_div .infoW .iconW{ } .human_div .infoW .iconW > .icon_list{ display: flex; width: 100%; gap: 1em; justify-content: space-between; word-break: keep-all;} .human_div .infoW .iconW > .icon_list > li{ width: 33.33%;} .human_div .infoW .iconW > .icon_list > li > .iconB{ display: flex; margin: 1em auto; align-items: center; justify-content: center; width: 8em; height: 8em; box-shadow: 4px 4px 12px rgba(0,0,0, .25); border-radius: 1em;} .human_div .infoW .iconW > .icon_list > li > .iconB > img{ width: 3.5em; height: 3.5em; object-fit: contain;} .human_div .infoW .iconW > .icon_list > li > .tArea{ text-align: center;} .human_div .infoW .iconW > .icon_list > li > .tArea > .tit{ font-size: 1.315em; font-weight: 800; margin-bottom: .65em;} .human_div .infoW .iconW > .icon_list > li > .tArea > .txt{ font-size: 1.15em; font-weight: normal; color: #444;} .hu_field{ background: #f7f7f7;} .hu_field .field_con{ } .hu_field .field_con > .con{ display: flex; align-items: center; gap: 6em; justify-content: center; margin-bottom: 4.5em;} .hu_field .field_con > .con:last-of-type{ margin-bottom: 0em;} .hu_field .field_con > .con > .img_con, .hu_field .field_con > .con > .txtArea{ width: 50%;} .hu_field .field_con > .con > .img_con{ height: 20em;} .hu_field .field_con > .con > .img_con > img{ width: 100%; height: 100%; object-fit: cover;} .hu_field .field_con > .con > .txtArea > .tit{ font-size: 1.515em; font-weight: 900; margin-bottom: 1em;} .welfare_wrap{} .welfare_wrap .welfare_list{} .welfare_wrap .welfare_list > li{ display: flex;} .welfare_wrap .welfare_list > li > .in{ flex: 1;} .welfare_wrap .welfare_list > li > .in > .inner{ display: flex; padding: 2em; box-sizing: border-box; border: 1px solid #ddd; border-radius: .5em; background: #f9f9f9; gap: 1em; flex-direction: column; height: 100%;} .welfare_wrap .welfare_list > li > .in > .inner > .img_con{ width: 100%; height: 10em; border-radius: .5em; overflow: hidden;} .welfare_wrap .welfare_list > li > .in > .inner > .img_con > img{ width: 100%; height: 100%; object-fit: cover;} .welfare_wrap .welfare_list > li > .in > .inner .twrap{ padding: 0 .5em;} .welfare_wrap .welfare_list > li > .in > .inner .twrap > .tit{ font-size: 1.315em; font-weight: 800; margin-bottom: .5em;} .re-circle-wrap {} .re-circle-wrap .list {gap: 4em; margin-top: 3em; counter-reset: cirnum 0;} .re-circle-wrap .list > li {position: relative; flex: 1 1 33.3%; max-width: 350px;} .re-circle-wrap .list > li:before {content: counter(cirnum); counter-increment: cirnum; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--siteC); z-index: 111;} .re-circle-wrap .list > li .cir-in { height: 300px; border: 2px solid #ddd; border-radius: 50%; background: #fff; box-shadow: 3px 0 9px rgba(0,0,0, .1); position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column;} .re-circle-wrap .list > li:last-of-type .cir-in{ border: 2px dashed var(--siteC);} .re-circle-wrap .list > li .cir-txt {} .re-circle-wrap .list > li .cir-txt > h3 {font-size: 1.25em; font-weight: 700; color: var(--siteC);} .re-circle-wrap .list > li .cir-txt > span {font-size: .938em; color: #888; line-height: 1.2; width: 100%;} .re-circle-wrap .list > li .cir-in .xi {position: absolute; right: -2.15em; top: 50%; transform: translate(-50%, -50%); font-size: 2em; color: var(--siteC);;} .re-circle-wrap .list > li .cir-in .icon{ margin-bottom: 1em;} .re-circle-wrap .list > li .cir-in .icon > img{ width: 80px; height: 80px;} .re-circle-wrap.st2 .list {gap: 2em;} .re-circle-wrap.st2 .list > li {flex: 1 1 20%; max-width: 210px;} .re-circle-wrap.st2 .list > li .cir-txt > h3 {font-size: 1.05em;} .re-circle-wrap.st2 .list > li .cir-in {height: 210px;} .re-circle-wrap.st2 .list > li .cir-in .icon > img{ width: 50px; height: 50px;} .re-circle-wrap.st2 .list > li .cir-in .xi {right: -1.6em;} .center_con {} .center_con.flex {gap: 1em;} .center_con .con_box {border: 1px solid #ddd; background: #fff; margin-bottom: 1em; border-radius: 1em; overflow: hidden;} .center_con .con_box:last-child {margin-bottom: unset;} .center_con .con_box .tit {background: var(--siteGra); padding: 1em; color: #fff; font-size: 1.125em; font-weight: 800;} .center_con .con_box .img_box {gap: 1em; padding: 1em;} .center_con2 {} .center_con2 .img_box {} .center_con2 .img_box .img {} .center_con2 .img_box .img:nth-child(2) {margin-top: 2em;} .center_con2 .tbox {margin-top: 3em; word-break: keep-all;} .center_con2 .tbox p {line-height: 1.4;} /*SITEMAP************************/ .sitemap_wrap .gnb{ flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; align-items:stretch; padding-left:1px; margin-bottom:-3em;} .sitemap_wrap .gnb > li a, .sitemap_wrap .gnb > li .flex{ display:block;} .sitemap_wrap .gnb > li{ flex:1 0 33.33%; max-width:33.33%; margin-bottom:3em; margin-left:-1px; padding:0 1.25em .5em 1.25em; border:solid #ebeeef; border-width:0 1px; box-sizing:border-box;} .sitemap_wrap .gnb > li .dp1{ padding:1em 0; margin-bottom:1em; border:solid #0c0151; border-width:2px 0 1px 0; text-align:center;} .sitemap_wrap .gnb > li .dp1 .tt{ font-size:1.125em; color:#0c0151; font-weight:500;} .sitemap_wrap .gnb > li .dp2 > li > a{ padding:.5em .5em;} .sitemap_wrap .gnb > li .dp2 > li > a .tt{ font-size:.938em;} .sitemap_wrap .gnb > li .dp2 > li > a:hover .tt{ text-decoration:underline;} /*COMPANY*************************/ .com_page_box{ padding:5.75em 0;} .com_page_box.pb0{ padding-bottom: 0em;} .com_page_box.bg1:last-child{ padding-bottom:0;} .com_page_box.bg1{ background:#fff;} .com_page_box.bg2{ background:#f3f3f3;} .com_company .circle_list{ margin-top:3em; padding:0 .75em;} .com_company .circle_list .inner{ flex:1; margin:0 -.75em; position:relative; text-align:center;} .com_company .circle_list .inner .item{ justify-content:flex-start; border-radius:100%; color:#fff;} .com_company .circle_list .inner .item.st1{ background:var(--siteC); background:rgba(4,125,201,.7);} .com_company .circle_list .inner .item.st2{ background:#171f33; background:rgba(23,31,51,.7);} .com_company .circle_list .inner .item.st3{ background:#0c0151; background:rgba(12,1,81,.7);} .com_company .circle_list .inner .item.st4{ background:#01b5bc; background:rgba(1,181,188,.7);} .com_company .circle_list .inner .item.st5{ background:#0051b5; background:rgba(0,81,181,.7);} .com_company .circle_list .inner .item .icon{ padding:3em 0 1.5em 0;} .com_company .circle_list .inner .item .icon img{ width:3.5em;} .com_company .circle_list .inner .item .txt{ padding:0 2.25em; font-size:1.063em; letter-spacing:-1px; line-height:1.4;} /*COMPANY NEW*/ .com_company .com_infoW{ display: flex; gap: 6em; align-items: center;} .com_company .com_infoW .gm_img{ width: 45%;} .com_company .com_infoW .infoC{ width: 55%;} .com_company .com_infoW .infoC .line{ margin: 1.5em 0; width: 50px; height: 3px; background: var(--siteC);} .com_company .com_infoW .infoC .infoT{ font-size: 1.715em; font-weight: 800; margin-bottom: .5em;} .com_company .com_infoW .infoC .tArea{} .com_company .com_infoW .infoC .tArea > .tt{ margin-bottom: 1em; font-size: 1.15em; line-height: 1.4; word-break: keep-all;} .com_company .com_infoW .infoC .tArea > .tt:last-of-type{ margin-bottom: 0em;} .com_company .com_infoW .gm_img{ height: 27em;} .com_company .com_infoW .gm_img > img{ width: 100%; height: 100%; object-fit: cover;} .com_vision{ position: relative; padding: 8em 0; margin-top: 5em;} .com_vision:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .55); content: ''; z-index: 1;} .com_vision .com_vision_wrap{ position:relative; z-index: 2; text-align: center; padding: 0 4em; color: #fff; word-break: keep-all;} .com_vision .com_vision_wrap .tit{ font-size: 1.715em; font-weight: 800; margin-bottom: 1em;} .com_vision .com_vision_wrap .txt{ font-size: 1.315em; font-weight: 500; margin-bottom: 1em;} .com_vision .com_vision_wrap .txt.mb0{ margin-bottom: 0em;} .com_ideology .ideology_list{} .com_ideology .ideology_list > li{} .com_ideology .ideology_list > li > .in{ background: #e3edff; border-radius: 1em; padding: 3em; box-sizing: border-box; text-align: center; word-break: keep-all;} .com_ideology .ideology_list > li > .in > .iconB{ width: 5em; height: 5em; margin: 0 auto;} .com_ideology .ideology_list > li > .in > .iconB > img{ width: 100%; height: 100%; object-fit: contain;} .com_ideology .ideology_list > li > .in > .tit{ margin: 1em 0; font-size: 1.515em; font-weight: 700; color: #276be2;} .com_ideology .ideology_list > li > .in > .txt{ font-size: 1em; font-weight: 500; line-height: 1.6; color: #276be2;} .com_history .tit_wrap{ position:relative;} .com_history .tit_wrap .img{ position:relative; width: 100%; height: 20em;} .com_history .tit_wrap .img:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #06235587; content: ''; z-index: 10;} .com_history .tit_wrap .img > img{ width: 100%; height: 100%; object-fit: cover;} .com_history .tit_wrap .tit{ position:absolute; top:50%; transform: translateY(-50%); left:0; width:100%; justify-content:center; z-index: 11;} .com_history .tit_wrap .tit .tt{ display:block; font-size:2.250em; color:#fff; font-weight:800; letter-spacing:-1px; z-index: 11;} .com_history .tit_wrap .year{ position:absolute; top:65%; left:0; width:30%; height:80%; justify-content:flex-end;} .com_history .tit_wrap .year:before{ content:""; display:block; position:absolute; top:0; right:0; width:60em; height:100%; background:var(--siteC); z-index: 11;} .com_history .tit_wrap .year .in{ position:relative; padding:1em 3em; z-index: 12;} .com_history .tit_wrap .year .tt{ display:block; color:#fff; font-size:3.000em; color:#fff; font-weight:700; text-transform:uppercase;} .com_history .tit_wrap .year .sec{ display:block; margin:.25em auto; width:1px; height:1.5em; background:#fff;} .com_history .his_wrap{ margin:4em 0 0 38%; position:relative;} .com_history .his_wrap:before{ content:""; display:block; position:absolute; top:.5em; bottom:.375em; left:0; width:1px; border-left:4px dotted var(--siteC);} .com_history .his_wrap .inner{ justify-content:flex-start; align-items:flex-start; margin-top:4.5em;} .com_history .his_wrap .inner:first-child{ margin-top:0;} .com_history .his_wrap .inner > *{ box-sizing:border-box;} .com_history .his_wrap .inner .year{ position:relative; width:10.5em; padding-left:3.5em;} .com_history .his_wrap .inner .year:before{ content:""; display:block; position:absolute; top:.313em; left:-.688em; width:1em; height:1em; background:#fff; border:5px solid var(--siteC); border-radius:100%;} .com_history .his_wrap .inner .year .tt{ font-size:1.875em; color:#343b4d; font-weight:700;} .com_history .his_wrap .inner .list{ flex:1;} .com_history .his_wrap .inner .list > li{ padding:.438em 0;} .com_history .his_wrap .inner .list > li:first-child{ padding-top:.5em;} .com_history .his_wrap .inner .list .tt{ display:inline-block; position:relative; padding-left:.75em; font-size:1.125em; color:#555;} .com_history .his_wrap .inner .list .tt:before{ content:""; display:block; position:absolute; top:.438em; left:0; width:4px; height:4px; background:#555;} .com_brand .col_box{ position:relative;} .com_brand .col_box .img_wrap{ position:relative; width:60%; height:26.25em; overflow:hidden;} .com_brand .col_box .img_wrap img{ position:relative; left:50%; top:50%; transform:translate(-50%,-50%); height:100%; max-width:none;} .com_brand .col_box .con_wrap{ position:absolute; left:0; top:0; width:100%; height:100%;} .com_brand .col_box .con_wrap .flex{ height:100%; align-items:flex-end; justify-content:flex-end;} .com_brand .col_box .con_wrap .inner{ box-sizing:border-box; width:50%; padding:4em 4em; padding-right:1.5em; background:#fff;} .com_brand .col_box .con_wrap .inner .tit{ margin-bottom:1.5em;} .com_brand .col_box .con_wrap .inner .tit .tt{ font-size:2.750em; color:#343b4d; font-weight:500; letter-spacing:-1px;} .com_brand .col_box .con_wrap .inner .txt .tt{ font-size:1.250em; color:#555; line-height:1.5;} .com_ethics_list > dt{ margin:2em 0 1em 0; font-size:1.063em; font-weight:500;} .com_ethics_list > dt:first-child{ margin-top:0;} .com_ethics_list > dd{ font-size:.938em; color:#666; line-height:1.7;} .com_ethics_list{ font-size:.938em; color:#666; line-height:1.5; word-break: keep-all;} .com_ethics_list strong{ margin:2em 0 1em 0; font-size:1.125em; font-weight:500; color:#000;} /* .com_brand .list_box .list .inner, .com_brand .list_box .list .inner > *{ box-sizing:border-box;} .com_brand .list_box .list .inner{ padding:2em 2em; justify-content:flex-start; border-top:1px solid #d4d5d8;} .com_brand .list_box .list .inner:first-child{ border-top-width:2px; border-top-color:#333;} .com_brand .list_box .list .inner .img{ width:12em; text-align:center;} .com_brand .list_box .list .inner .txt{ flex:1; padding-left:6em;} .com_brand .list_box .list .inner .txt .tt{ margin-top:.75em;} .com_brand .list_box .list .inner .txt .tt:first-child{ margin-top:0;} .com_brand .list_box .list .inner .txt .t1{ font-size:1.500em; color:var(--siteC); font-weight:500;} .com_brand .list_box .list .inner .txt .t2{ font-size:1.063em; color:#72727d;} .com_brand .list_box .list .inner .txt .t3{ display:inline-block;} .com_brand .list_box .list .inner .txt a:hover{ text-decoration:underline;} */ /*brand new*/ .com_brand .midImg{ width: 100%; height: 20em;} .com_brand .midImg > img{ width: 100%; height: 100%; object-fit: cover;} .com_brand .list_box .list{ display: flex; flex-wrap: wrap; gap: 1.5em; margin-top: 4em;} .com_brand .list_box .list .inner{ width: calc(33.33% - 1em);} .com_brand .list_box .list .inner .img{ width: 100%; padding: 2.5em 2em; border: 1px solid #ddd; box-sizing: border-box; margin: 0 auto;} .com_brand .list_box .list .inner .img > .logo_con{ width: 220px; margin: 0 auto;} .com_brand .list_box .list .inner .img > .logo_con > img{ width: 100%; height: 80px; object-fit: contain;} .com_brand .list_box .list .inner .txt{ margin-top: 1.5em; padding-top: 1.5em; border-top: 1px solid #ddd;} .com_brand .list_box .list .inner .txt .tt{ margin-top:.75em; word-break: keep-all;} .com_brand .list_box .list .inner .txt .tt:first-child{ margin-top:0;} .com_brand .list_box .list .inner .txt .t1{ font-size:1.500em; color:var(--siteC); font-weight:700;} .com_brand .list_box .list .inner .txt .t2{ font-size:1.063em; color:#72727d;} .com_brand .list_box .list .inner .txt .t3{ display:inline-block; word-break: break-all;} .com_brand .list_box .list .inner .txt a:hover{ text-decoration:underline;} .com_info_box{ align-items:flex-start;} .com_info_box > *{ box-sizing:border-box;} .com_info_box .img{ width:35em;} .com_info_box .con{ flex:1; padding:2em 0;} .com_info_box.st1 .con{ padding-right:8em;} .com_info_box.st2 .con{ padding-left:6em;} .com_info_box .con .tit{ margin-bottom:2em;} .com_info_box .con .tit .tt{ font-size:2.000em; color:#343b4d; font-weight:500; letter-spacing:-1px;} .com_info_box .con .tit .tt .no{ display:inline-block; padding:0 .125em .125em 0; font-size:2.250em; color:#bbb; font-style:italic;} .com_info_box .con .tit:after{ content:""; display:block; width:6em; height:1px; margin:2em 0 6em 1em; background:#343b4d; transform:rotate(30deg); transform-origin:left top;} .com_info_box .con .txt{ font-size:1.063em; color:#555; line-height:1.5;} .com_info_box .con .num .inner{ justify-content:flex-start; padding:.5em 0;} .com_info_box .con .num .inner .no{ width:3em; line-height:3em; background:var(--siteC); border-radius:100%; text-align:center; font-size:1.125em; color:#fff; font-weight:700;} .com_info_box .con .num .inner .tt{ flex:1; padding-left:1.5em; font-size:1.375em; color:#222;} .com_info_box .con .num .inner .point{ vertical-align:baseline; color:var(--siteC); font-weight:500;} .recruit_guide{ border-top:2px solid #333;} .recruit_guide .inner, .recruit_guide .inner > *{ box-sizing:border-box;} .recruit_guide .inner{ padding:2em 2em; justify-content:flex-start; align-items:flex-start; background:#fff;} .recruit_guide .inner:nth-child(even){ background:#f3f3f3;} .recruit_guide .inner .tit{ width:15em;} .recruit_guide .inner .txt{ flex:1;} .recruit_guide .inner .tit{ padding-right:6em; text-align:right;} .recruit_guide .inner .tit .tt{ text-align:left; font-size:1.375em; color:#343b4d; font-weight:500; letter-spacing:-1px;} .recruit_guide .inner .tit .icon{ display:inline-block; margin-top:1.25em;} .recruit_guide .inner .tit .icon img{ width:3.5em;} .recruit_guide .inner .txt > li{ position:relative; margin-top:.75em; padding-left:1em;} .recruit_guide .inner .txt > li:first-child{ margin-top:0;} .recruit_guide .inner .txt > li:before{ content:""; position:absolute; top:.5em; left:0; width:3px; height:3px; background:#555;} .recruit_guide .inner .txt .tt{ display:block; font-size:1.063em; color:#555;} .com_location{ margin-top:6em;} .com_location:first-child{ margin-top:0;} .com_location .map_box.img{ padding:1.5em; border:1px solid #ddd; text-align:center;} .com_location .map_box.img .link{ display:block;} .com_location .map_box.map .root_daum_roughmap{ width:100% !important;} .com_location .map_box.map{ padding:1em; border:1px solid #ddd;} .com_location .map_box.map .in_map{ height:31em;} .com_location .map_box.map .in_map .infowindow{ box-sizing:border-box; padding:.5em .5em; min-width:150px; text-align:center; font-weight:500; color:#238cfa;} .com_location .info_box{ padding:1em 2.5em; background:#fff; box-shadow:3px 3px 12px rgba(0,0,0,.15);} .com_location .info_box .inner{ padding:1.5em 0; border-top:1px dashed #ebeeef;} .com_location .info_box .inner:first-child{ border-top:none;} .com_location .info_box .icon{ width:4.5em; line-height:4.5em; border-radius:100%; text-align:center; background:var(--siteC); color:#fff;} .com_location .info_box .icon.c1{ background:var(--siteC);} .com_location .info_box .icon.c2{ background:#0c0151;} .com_location .info_box .icon .xi{ font-size:2.000em;} .com_location .info_box .txt{ flex:1; padding-left:3em;} .com_location .info_box .txt > dt{ margin-bottom:.5em;} .com_location .info_box .txt .tt{ display:inline-block; margin-right:1.5em; font-weight:500;} .com_location .info_box .txt .tt:last-child{ margin-right:0;} .com_location .info_box .txt .t1{ font-size:1.250em; color:#343b4d; font-weight:700;} .com_location .info_box .txt .t2{ font-size:1.250em; color:#72727d;} /* 분석센터 */ .center_table_wrap {} .center_table_wrap .table_tit {background: var(--siteC); color: #fff; display: inline-block; padding: .5em 1em; font-size: 1.05em; font-weight: 600; border-radius: .8em; margin-bottom: 1em;} /**********************************/ /*POPUP****************************/ body.pop .popWidth.st1 .popIn{ width:750px;}/*아이디, 비밀번호 찾기, 이메일 인증, 엑셀업로드*/ body.pop .popWidth.st2 .popIn{ width:480px;}/*장바구니 담기, 즐겨찾기 등록, 게시판 비밀번호입력*/ body.pop .popWidth.st3 .popIn{ width:920px;}/*관련자료 게시판*/ body.pop .popWidth.st4 .popIn{ width:800px;}/*배송지*/ body.pop .popPrint .popIn{ width:880px;}/*주문서, 견적서 인쇄*/ .js_layerW.st1 .js_inner{ width:760px;}/*제품 필터 옵션*/ /*PRINT*/ .printPreview:before{ content:""; position:absolute; z-index:1; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5);} .printPreview .pop_page_print{ visibility:hidden;} .pop .pop_page_print{ letter-spacing:0;} /*주문확인서, 견적서 인쇄*/ .pop .pop_page_print{ box-sizing:border-box;} .pop .pop_page_print .print_con .tit{ margin-bottom:1.5em; text-align:center;} .pop .pop_page_print .print_con .tit .tt{ display:inline-block; padding-bottom:.25em; border-bottom:1px solid #222; font-size:1.875em; font-weight:700;} .pop .pop_page_print .print_con .tit .tt.st1{ letter-spacing:.25em; text-indent:.25em; padding-left:.5em; padding-right:.5em;} .pop .pop_page_print .print_con .tit .tt.st2{ letter-spacing:.75em; text-indent:.75em;} .pop .pop_page_print .print_con .col_wrap .con{ width:49.5%; position:relative;} .pop .pop_page_print .print_con .col_wrap .print_table{ height:21em; position:relative; z-index:inherit;} .pop .pop_page_print .print_con .col_wrap .stamp{ position:absolute; z-index:inherit; top:6.5em; right:3em; max-width:3.125em;} .print_table{ font-size:.813em;} .print_table th, .print_table td{ height:1.375em; padding:.5em .5em; border:1px solid #111; line-height:1.1;} .print_table th{ background:#f1f1f1; text-align:center;} .print_table.st1{ border:2px solid #111; font-size:.938em;} .print_table.st1 th, .print_table.st1 td{ padding:.75em 1em; border:none; font-weight:500;} @page{ size:auto; margin:10mm -210mm; -webkit-margin-before:0; -webkit-margin-end:0; -webkit-margin-after:0; -webkit-margin-start:0;} @media print { html{ margin:0 210mm; -webkit-margin-end:0; -webkit-margin-start:0; background:#fff;} html:before{ display:none;} .noprint{ display:none;} .printBreak{ page-break-before:always;} .printPreview .pop_page_print{ visibility:visible;} .pop_page_print{ padding:1em 2em 0 2em;} .pop_page_print2{ padding:0 2em;} .pop_page_print:first-child{ -webkit-padding-before:10mm;} .printBreak + .pop_page_print{ -webkit-padding-before:10mm;} .printBreak + .pop_page_print .print_table{ margin-top:0 !important;} .pop .pop_page_print .print_con .col_wrap .stamp{ top:5.5em;} .print_table{ font-size:.750em;} #header .menu_wrap, #header .gnb_wrap, #header .top_wrap .search, #header .top_wrap .aside, #footer .family_wrap, #footer .info_wrap .menu_con, #footer .info_wrap .info_con .logo{ display:none;} #footer .info_wrap .info_con .copyright{ margin:0; text-align:center;} #contents .doc{ font-size:.750em;} } /*MAIN************************/ .main_visual{ position:relative;} .main_visual .visual .slick-track, .main_visual .visual .item{ height:37.5em;} .main_visual .visual .item{ position:relative; overflow:hidden;} .main_visual .visual .item .in { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;} .main_visual .visual .item .img{ position:absolute; top:0; left:50%; transform:translatex(-50%); display:block; max-width:none; min-width:100%; min-height:100%;} .main_visual .visual .item .link{ position:relative; display:block; height:100%;} .main_visual .slick-dots, .main_visual .control_box{ position:absolute; left:0; right:0; bottom:1.25em;} .main_visual .control_box .arrow_wrap, .main_visual .control_box .pause_wrap{ position:absolute; bottom:0;} .main_visual .control_box .arrow_wrap{ left:0;} .main_visual .control_box .pause_wrap{ right:0;} .main_visual .control_box .btn{ display:block; margin-left:-1px; width:2.5em; line-height:2.5em; border:1px solid #fff; text-align:center; cursor:pointer;} .main_visual .control_box .btn:first-child{ margin-left:0;} .main_visual .control_box .btn .xi{ color:#fff;} .main_visual .control_box .btn:hover{ background:#171f33; transition:.2s;} .main_visual .slick-dots{ text-align:center;} .main_visual .slick-dots > ul{ display:inline-block;} .main_visual .slick-dots > ul > li{ display:inline-block; padding:.938em .125em;} .main_visual .slick-dots > ul > li button{ width:.625em; height:.625em; background:#fff; border:none; text-indent:-9999px; opacity:.5; transition:.2s;} .main_visual .slick-dots > ul > li:hover button{ background:#171f33;} .main_visual .slick-dots > ul > li.slick-active button{ width:5.5em; opacity:1;} .main_con{ padding:4.75em 0 5em 0;} .main_con.service{ padding:6em 0 11.25em 0; background:#f7fafb;} .main_con.recomm { padding:0 0; background:#f3f3f3;} .main_tit{ margin-bottom:2.5em; text-align:center;} .main_tit .t1{ font-size:2.000em; font-weight:700;} .main_tit .t2{ margin-top:.625em; color:#666;} .main_more{ margin-top:1.25em; text-align:center;} .main_more .btn{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:.5em; height:4em; text-align:center; padding:.75em 1em; border:2px solid #ddd; border-radius:.313em; color:#666; transition:.2s;} .main_more .btn > *{ display:inline-block;} .main_more .btn .tt{ font-size:1.125em; font-weight:800;} .main_more .btn .xi{ font-size:1.5em} .main_more .btn.c1{ min-width:16em;} .main_more .btn.c2{ min-width:10em; background:var(--siteC); color:#fff;} .main_more .btn.c2 .tt{ font-size:1em;} .main_more .btn:hover{ border-color:#111; color:#111} .main_list .list{ align-items:flex-start;} .main_list .list .item{ flex:1; overflow:hidden;} .main_list .list .item .in{ display:block; text-align:center;} .main_list .list .item .img_wrap .img{ border:1px solid #ddd; overflow:hidden; flex-direction:column; align-items:stretch;} .main_list .list .item .img_wrap .img:before{ content:""; position:absolute; top:0; bottom:0; left:0; right:0; border:solid var(--siteC); opacity:0; visibility:hidden; transition:.2s;} .main_list .list .item .img_wrap .img > *{ flex:0 0 auto; max-height:100%;} .main_list .list .item .txt_wrap{ padding:1.25em .75em; line-height:1.4;} .main_list .list .item .txt_wrap .sbj{ display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .main_list .list .item .txt_wrap .sbj .tt{ font-size:1.125em; color:#000;} .main_list .list .item .txt_wrap .txt{ margin-top:1em; min-height:2.5em;} .main_list .list .item .txt_wrap .txt .tt{ font-size:.875em; color:#666;} .main_list.st1 .list{ margin:0 0 0 -.813em;} .main_list.st1 .list .item .in{ margin:0 0 0 .813em;} .main_list.st1 .list .item .img_wrap .img img{ max-height:100%;} .main_list.st2 .list{ margin:0 0 0 -1.125em;} .main_list.st2 .list .item{ float:left;} .main_list.st2 .list .item .in{ margin:0 0 0 1.125em;} .main_list.st2 .list .item .resize{ padding-bottom:69.3333%;} .main_list.st2 .list .item .img_wrap .img img{ width:100%;} .main_list .list .item:hover .img_wrap .img{ border-color:transparent;} .main_list .list .item:hover .img_wrap .img:before{ border-width:.438em; opacity:1; visibility:visible;} .main_icon_list .list{ margin:0 0 -1.25em -1.125em; align-items:flex-start;} .main_icon_list .list > li{ flex:1 0 33.33%;} .main_icon_list .list > li .in{ margin:0 0 1.25em 1.125em; padding:0 2em 0 2.25em; height:4.25em; background:#fff; border:1px solid #ddd; border-radius:10em; justify-content:flex-start; transition:.2s;} .main_icon_list .list > li .in > *{ transition:.2s;} .main_icon_list .list > li .xi{ font-size:1em; line-height:1;} .main_icon_list .list > li .icon{ margin-right:1em; color:#ccc;} .main_icon_list .list > li .icon:before{ font-size:3.000em;} .main_icon_list .list > li .arrow{ color:#aaa;} .main_icon_list .list > li .arrow:before{ content:"\e940"; font-size:1.500em;} .main_icon_list .list > li .tt{ flex:1; font-size:1.063em; color:#333; font-weight:500;} .main_icon_list .list > li:hover .in{ padding-right:1em; background:var(--siteC); border-color:var(--siteC);} .main_icon_list .list > li:hover .in > *{ color:#fff;} .main_con.recomm{ position:relative; height:25em; overflow:hidden;} .main_con.recomm .img_wrap{ position:absolute; z-index:1; top:0; left:0; width:100%; height:100%;} .main_con.recomm .img_wrap img{ position:relative; top:50%; left:50%; transform:translate(-50%, -50%); max-width:inherit; min-width:100%; min-height:100%;} .main_con.recomm .link_wrap{ position:relative; z-index:2; display:block; height:inherit;} .main_con.recomm .con_wrap{ position:relative; z-index:2;} .main_con.recomm .con_wrap, .main_con.recomm .con_wrap .inner{ box-sizing:border-box; height:inherit;} .main_con.recomm .con_wrap .inner{ display:flex; flex-direction:column; justify-content:center; padding:1em 0;} .main_con.recomm .con_wrap .inner > *{ max-width:65%; text-align:left;} .main_con.recomm .con_wrap .main_tit .t1{ font-size:2.188em; letter-spacing:-1px;} .main_con.recomm .con_wrap .main_tit .t2{ font-size:1.125em; margin-top:1.25em;} .main_recomm{ position:relative; padding:0 0 !important;} .main_recomm .recomm_slide .slick-track, .main_recomm .recomm_slide .item{ height:25em;} .main_recomm .recomm_slide .item{ position:relative; overflow:hidden;} .main_recomm .recomm_slide .item .img_wrap { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%;} .main_recomm .recomm_slide .item .img_wrap .img{ position:relative; top:50%; left:50%; transform:translate(-50%, -50%); max-width:inherit; min-width:100%; min-height:100%;} .main_recomm .recomm_slide .item .link_wrap{ position:relative; z-index:2; display:block; height:inherit;} .main_recomm .slick-dots{ text-align:center; margin-top:1.5em;} .main_recomm .slick-dots > ul{ display:inline-block;} .main_recomm .slick-dots > ul > li{ display:inline-block; padding:0 .125em;} .main_recomm .slick-dots > ul > li button{ width:.625em; height:.625em; background:#000; border:none; text-indent:-9999px; opacity:.5; transition:.2s;} .main_recomm .slick-dots > ul > li:hover button{ background:#171f33;} .main_recomm .slick-dots > ul > li.slick-active button{ width:5.5em; opacity:1;} /**/ .mainLayerPop{} .mainLayerPop .popLayer{ display:block; position:absolute; overflow:auto; background:#fff; border:1px solid #000; box-sizing:border-box;} .mainLayerPop .popLayer_closeW{ height:35px; padding:0 1em; text-align:right; background:#343b4d;} .mainLayerPop .popLayer_closeW *{ color:#fff;} .mainLayerPop .popLayer_close .tt{ font-size:.875em;} .mainLayerPop .popLayer_close a{ display:inline-block; margin-left:.5em; font-weight:500;} .clink1{color:#72727d !important;} /**/ .overListV{ border-top:1px solid #343b4d} .overListV > li .listTop{ border-bottom:1px solid #ddd} .overListV > li .listTop .toggleBtn{ cursor:pointer} .overListV > li .listTop .toggleBtn .arrow{ margin-right:.25em} .overListV > li .listTop .toggleBtn .arrow:before{content:"\e943"} .overListV > li .listTop .in_state{ flex:1;} .overListV > li .listCon{ display:none} .overListV > li .listCon table{ background:#fff} .overListV > li.on .listCon{ display:block; padding:1em; background:#f1f1f1} .overListV > li.on .listTop .toggleBtn .arrow:before{content:"\e946"} /*오시는길*/ .se_gray_box { background: #f2f2f2; padding: 2em 2.5em; border-radius: .5em; } .se_gray_box .gr_list { } .se_gray_box .gr_list > li { margin-bottom: .35em; } .se_gray_box .gr_list > li:last-of-type { margin-bottom: 0em; } .map_wrap { } .map_wrap .cnt_con { margin-bottom: 3em; } .map_wrap .cnt_con:last-of-type { margin-bottom: 0em; } .map_wrap .cnt_con .map_box { } .map_wrap .cnt_con .map_box .c_map { flex: 1 1 50%;} .map_wrap .cnt_con .map_box .c_map > .root_daum_roughmap { width: 100%; height: 100%;} .map_wrap .cnt_con .map_box .c_map > .nocon{ height: 100%;} .map_wrap .cnt_con .map_box .c_map .root_daum_roughmap .wrap_map{ height: 100%;} .map_wrap .cnt_con .map_box .c_info { position:relative; flex: 1 1 50%; background: #f5f5f5; padding: 7.5em 4.25em; box-sizing: border-box; } .map_wrap .cnt_con .map_box .c_info .info_box { color: #111; padding-right: 3.5em; } .map_wrap .cnt_con .map_box .c_info .info_box .tit { font-size: 2em; font-weight: 700; margin-bottom: 1em; } .map_wrap .cnt_con .map_box .c_info .info_box .txt { position:relative; padding-left: 1.35em; font-size: 1.35em; opacity: .9; font-weight: 600; line-height: 1.4; } .map_wrap .cnt_con .map_box .c_info .info_box .txt > .xi { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .map_wrap .cnt_con .map_box .c_info .link_btn { position: absolute; background: var(--siteC); right: 0; height: 100%; top: 0; width: 70px; display: block; padding-bottom: 70px; color: #fff; transition: all 0.4s; box-sizing: border-box; } .map_wrap .cnt_con .map_box .c_info .link_btn:hover { } .map_wrap .cnt_con .map_box .c_info .link_btn .inner_box { display: table; width: 100%; height: 100%; } .map_wrap .cnt_con .map_box .c_info .link_btn .inner_box .inner { display: table-cell; vertical-align: middle; } .map_wrap .cnt_con .map_box .c_info .link_btn .ibox { position: absolute; bottom: 0; height: 70px; border-top: 1px solid rgba(255,255,255, .2); width: 100%; display: block; content: ''; } .map_wrap .cnt_con .map_box .c_info .link_btn .ibox .xi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .map_wrap .cnt_con .map_box .c_info .link_btn .tit_wrap > span { display: block; width: 100%; text-align: center; font-size: 18px; line-height: 1.2; } .map_wrap .cnt_con .map_box .c_info .link_btn .tit_wrap > .op { opacity: .6; } .map_wrap .cnt_con .map_box .c_info .info_box .info_list { margin-top: 1em; } .map_wrap .cnt_con .map_box .c_info .info_box .info_list > li { margin-bottom: .3em; font-size: 1.05em; font-weight: 500; opacity: .75; } .map_wrap .cnt_con .map_box .c_info .info_box .info_list > li:last-of-type { margin-bottom: 0em; } .map_wrap .cnt_con .map_box .c_info .info_box .info_list > li > span { } .root_daum_roughmap { width: 100%; } /**/ .board_table.view1.stN{ border-bottom:1px solid #ddd;} .board_table.view1.stN{ border-top:none} .board_table.view1.stN th, .board_table.view1.stN td{ border-left:none; border-right:none; border-bottom:none; background:#fff; vertical-align:middle} .board_table.view1.stN .cmp_table_head{ position:sticky; left:0; top:calc(var(--headerH1) + var(--headerH3) - 21vmin)} .scroll .board_table.view1.stN .cmp_table_head{ top:calc(var(--headerH2) + var(--headerH3) - 21vmin)} .scroll.tBannerOff .board_table.view1.stN .cmp_table_head{ top:calc(var(--headerH3) - 21vmin)} .board_table.view1.stN .cmp_table_head th, .board_table.view1.stN .cmp_table_head td{ background:#f5f5f5} .board_table.view1.stN .prodN_st{ height:100%} .board_table.view1.stN .prodN_st .img_wrap{ width:20vmin; box-sizing:border-box} .board_table.view1.stN .prodN_st .con_wrap{ flex:1 1 0%; min-height:0; padding:1em 0} .board_table.view1.stN .prodN_st .con_wrap .btnW{ margin-top:auto} .jsAccW.on .jsAcc > *{ background:#e1ebfe !important} @media screen and (max-width:768px){ .overListV > li .in_state{ align-content:center; align-items:center; min-width:0;} .overListV > li .in_state .in{ flex:0 0 auto; border:none} .overListV > li .in_state .moW100{ flex:1 1 100%; padding-top:0; padding-left:2.5em;} .overListV > li .listCon .in{ padding:0} }