/* @import url("./comm/common.css"); */ @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..500,0..1,-50..200"); .header {background:var(--white); } .header .header_in > .logo.one{display:none;} .header .header_in > .logo.two {display:block;} .header .header_in .top_util ul li a{color:var(--black);} .header .header_in a svg .up{fill:var(--black);} .header .gnb ul li > a{color:var(--black);} .header .header_in .top_util ul li svg path {stroke:var(--black)} /********** css ���� **********/ .other_cont {margin-top:80px;} #contents{} .sticky{position: sticky !important; top:0 !important; z-index:9999999 !important; transition:all 0.4s ease;} .basicCont{padding:0 0 170px; margin: 0 auto; max-width:1350px; width: 90%;} .compad{padding:170px 0; box-sizing:border-box;} .compad_t{padding:170px 0 0; box-sizing:border-box;} .compad_b{padding:0 0 170px; box-sizing:border-box;} .subpad{padding:170px 0; box-sizing:border-box;} .subpad_t{padding:170px 0 0; box-sizing:border-box;} .subpad_b{padding:0 0 170px; box-sizing:border-box;} .subpad.ver2 {padding:200px 0; box-sizing:border-box;} .subpad_t.ver2 {padding:200px 0 0; box-sizing:border-box;} .subpad_b.ver2 {padding:0 0 200px; box-sizing:border-box;} .subpad.ver3 {padding:110px 0; box-sizing:border-box;} .subpad_t.ver3 {padding:110px 0 0; box-sizing:border-box;} .subpad_b.ver3 {padding:0 0 110px; box-sizing:border-box;} .padT70 {padding-top:70px; box-sizing:border-box;} /********** css ���� **********/ /********** ��? **********/ .num {position:relative; width:50px; height:50px; border-radius:100%; background:var(--main); display: inline-block; font-size:1rem; line-height:50px; display:flex; align-items:center; justify-content:center;} .fs60 {font-size:3.333rem; font-weight: 700; letter-spacing: -0.263rem; line-height:120%; color:var(--black);} .fs60 span, .fs60 b {font-size:inherit; font-weight: inherit; letter-spacing: inherit; line-height:inherit;} .fs30 {font-size:1.667rem; font-weight: 700; letter-spacing: -0.131rem; line-height:133.333%; } .fs30 span, .fs30 b {font-size:inherit; font-weight: inherit; letter-spacing: inherit; line-height:inherit;} .fs24 {font-size:1.333rem; font-weight: 700; letter-spacing: -0.105rem; line-height:150%; color:var(--black);} .fs24 span, .fs24 b {font-size:inherit; font-weight: inherit; letter-spacing: inherit; line-height:inherit;} .fs20 {font-size:1.111rem; font-weight: 500; letter-spacing: -0.088rem; line-height:150%; color:var(--black);} .fs18 {font-size:1rem; font-weight: 400; letter-spacing: -1.26px; line-height:177.778%; } .fs16 {font-size:0.889rem; font-weight: 400; letter-spacing: -0.07rem; line-height:175%; } /********** ��? **********/ /********** ����? **********/ .subtop{position: relative; width:100%; background:var(--white); padding-top:100px;} .subtop .subtop_in {padding-top:100px; box-sizing:border-box;} .subtop .visual_lnb{/* opacity:0; visibility:hidden; transform:translateY(70px); animation: v_txt 1.3s 0.3s ease forwards; */ position: relative; z-index: 999;} .subtop .visual_tit {/* opacity:0; visibility:hidden; transform:translateY(70px); animation: v_txt 1.3s 0.6s ease forwards; */ position: relative; z-index: 9; margin-top:20px; font-size:3.333rem; font-weight: 700; line-height:120%; letter-spacing: -0.263rem; color:var(--black);} .subtop .visual_lnb dl{display: flex; align-items:center; justify-content: flex-start; width:100%;} .subtop .visual_lnb dl dt {} .subtop .visual_lnb dl dt .home {display:block; transition:all .3s linear; line-height:1;} .subtop .visual_lnb dl dt .home svg {display:block; line-height:1;} .subtop .visual_lnb dl dd{position: relative; display:flex; flex-wrap:wrap; align-items:center;} .subtop .visual_lnb dl dd:before {content:''; display: block; width: 1px; height: 16px; background:rgba(34,34,34,.2); margin:0 14px; position:relative; } .subtop .visual_lnb dl dd > a {position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; font-size:0.888rem; line-height:175%; letter-spacing: -0.07rem;} .subtop .visual_lnb dl dd > a:after {content:'\e313'; display: block; font-size:16px; line-height:1; font-family:var(--icon); color:rgba(34,34,34,.5); transition:all .3s ease;} .subtop .visual_lnb dl dd > a.on:after{transform:rotate(180deg); transition:all .3s ease;} .subtop .visual_lnb dl dd > a:hover {color:var(--black);} .subtop .visual_lnb dl dd > a:hover:after {color:var(--black);} .subtop .visual_lnb dl dd .dlst{position: absolute; z-index: 999999; margin: 10px 0 0; min-width: 200px; background-color: var(--white); padding:15px 20px; box-sizing:border-box; display: none; box-shadow:5px 5px 15px rgba(0,0,0,0.05); text-align:left; left: 15px; top:27px; border:1px solid var(--border);} .subtop .visual_lnb dl dd .dlst.on{display: block;} .subtop .visual_lnb dl dd .dlst ul{} .subtop .visual_lnb dl dd .dlst ul li{padding: 0 0 8px; line-height: 120%;} .subtop .visual_lnb dl dd .dlst ul li:last-child{padding: 0;} .subtop .visual_lnb dl dd .dlst ul li a{display: block; font-size: 0.8888rem; transition:all .3s linear; line-height: 150%; letter-spacing: -1px;} .subtop .visual_lnb dl dd .dlst ul li a:hover{color:var(--main);} .subtop .visual_lnb dl dd .dlst ul li a.on{color:var(--main); font-weight: 700;} .subtop .subtop_img {width: 100%; height: 600px; overflow:hidden; margin:80px 0 170px; position:relative;} .subtop .tit_area{position:absolute; text-align:center; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; padding:0 10%; } .subtop .tit_area span {display:block; font-size:14px; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; line-height:128.571%; font-family:var(--eng);} .subtop .tit_area h3{font-size:3.333rem; font-weight: 700; color:var(--white); letter-spacing: -0.263rem; line-height: 120%; margin:20px 0;} .subtop .tit_area p { font-size:1.111rem; letter-spacing:-0.088rem; line-height:170%; font-weight:400;} @keyframes v_txt { 0% { opacity:0; visibility:hidden; transform:translateY(70px); } 100% { opacity: 1; visibility: visible; transform: translateY(0); } } @keyframes v_bg { 0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); } 20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); } 100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); } } /********** ����? **********/ /********** ��?�� �?� ��� ���� � **********/ .subtop.two .subtop_img {width: 100%; height: auto; overflow:hidden; margin:80px 0 0; position:relative; box-sizing:border-box; padding:170px 0 240px; background-position: center right 65% !important;} .subtop.two .w1350 {display:flex; flex-wrap:wrap; align-items:flex-end;} .subtop.two .people {height:688px; overflow:hidden; width:50%;} .subtop.two .people img {display:block; margin:0 auto;} .subtop.two .tit_area {position:relative; left:0; transform:translateY(-50%); width:50%; /* margin-left:auto; */text-align:left; padding:0;} .subtop.two .tit_area span {display:inline-block; } .subtop.two .tit_area .quote {font-family: var(--kor); font-weight:700; color:var(--white); position:relative; z-index:1; font-size: 1.667rem; font-weight: 700; letter-spacing: -0.131rem; line-height: 133.333%;} .subtop.two .tit_area .quote:before {background:var(--main);width:100%;height: 85%;position:absolute;left:0;top: 13%;display:block;content:'';z-index:-1;padding-right:5px;} .subtop.two .tit_area h3{font-size:3.333rem; font-weight: 700; color:var(--white); letter-spacing: -0.263rem; line-height: 120%; margin:22px 0 17px;} .subtop.two .tit_area h3 span {display:inline-block; margin-left:12px; font-size:1.944rem; letter-spacing:-0.153rem; line-height:137.143%; font-weight:400; color:rgba(255,255,255,.8);} .subtop.two .tit_area p {font-size:1.111rem; letter-spacing:-0.088rem; line-height:170%; font-weight:400;} .subtop.two .tit_area ul:first-of-type {padding-top:30px; border-top:1px solid rgba(255,255,255,.3);} .subtop.two .tit_area ul:first-of-type li {color:var(--white); line-height:170%;} .subtop.two .tit_area ul:last-of-type {display:flex; padding-top:40px; } .subtop.two .tit_area ul:last-of-type li {position:relative; padding:0 30px 0 23px; box-sizing:border-box;color:var(--white); } .subtop.two .tit_area ul:last-of-type li:before {display:block; content:''; position:absolute; left:0; top:2px; font-family:var(--icon); font-size:1rem; color:var(--white); } .subtop.two .tit_area ul:last-of-type li.tel:before {content:'\e0b0';} .subtop.two .tit_area ul:last-of-type li.mail:before {content:'\e158';} /********** ��?�� �?� ��� ���� � **********/ /********** �?����� ��� ���� � **********/ .subtop.three {} .subtop.three .subtop_img {width: 100%; height: auto; overflow:hidden; margin:56px 0 0; position:relative; box-sizing:border-box; padding:170px 10% 170px;} .subtop.three .self_wrap {display:flex; } .subtop.three .self_wrap .tit_area{position:unset; text-align:left; transform:unset; padding:0; width:50%; margin-right:36px;} .subtop.three .self_wrap .tit_area .self_list {margin-top:20px;} .subtop.three .self_wrap .tit_area .self_list li {position:relative; padding-left:45px; margin-bottom:10px; color:var(--white); font-weight:400;} .subtop.three .self_wrap .tit_area .self_list li:before {position:absolute; left:0; width:35px; height:35px; border-radius:100%; line-height:35px; display:flex; align-items:center; justify-content:center; background:var(--white); font-family:var(--icon); font-size:21px; color:var(--main); content:'\e5ca';} .subtop.three .self_wrap .tit_area .link_list {margin-top:50px; display:flex; gap:5px;} .subtop.three .self_wrap .tit_area .link_list a {display: inline-block; width:200px; max-width:200px; background:var(--main); padding:15px 26px; box-sizing:border-box; border-radius:35px; display: flex; position:relative; transition:all .4s linear; overflow:hidden; border:1px solid transparent; align-items: center; justify-content: space-between;} .subtop.three .self_wrap .tit_area .link_list a em {font-style:normal; color:var(--white); transition:all .4s linear; font-size:0.889rem; letter-spacing:-0.07rem; line-height:175%; text-transform:uppercase; font-weight:500; z-index:3; position:relative;} .subtop.three .self_wrap .tit_area .link_list a span {line-height:35px; color:var(--main); font-size:21px; display:flex; z-index:2; display:flex; justify-content:center; align-items:center; font-family:var(--icon); font-weight:400; } .subtop.three .self_wrap .tit_area .link_list a span:before {display:block; content:''; border-radius:100%; background:var(--white); width:35px; height:35px; position:absolute; z-index:-1; transition:all .4s linear; } .subtop.three .self_wrap .tit_area .link_list a:hover {border-color:var(--main); } .subtop.three .self_wrap .tit_area .link_list a:hover em {color:var(--main);} .subtop.three .self_wrap .tit_area .link_list a:hover span:before {transform:scale(10); } .subtop.three .self_wrap .tit_area .link_list a.store {background:var(--sub); border-color:var(--sub);} .subtop.three .self_wrap .tit_area .link_list a.store:hover {border-color:var(--sub);} .subtop.three .self_wrap .tit_area .link_list a.store:hover em {color:var(--sub);} .subtop.three .self_wrap .tit_area .link_list a.store em {font-size:14px; line-height:128.571%; font-weight:700; letter-spacing:0.7px; text-transform: uppercase;} .subtop.three .self_wrap .tit_area .link_list a.store span img {max-width:100%; height:auto;} .subtop.three .self_wrap .img_area{position:relative; width: 50%;} .subtop.three .self_wrap .img_area img {max-width: 100%; height:auto; position:absolute; bottom:-170px;} /********** �?����� ��� ���� � **********/ /********** ?�?��� **********/ .cate_tit {display:flex; justify-content: space-between; align-items: flex-end; margin-bottom:62px;} .cate_tab{} .cate_tab ul{display:flex;} .cate_tab ul li{width:auto; margin:0 40px 0 0;} .cate_tab ul li:last-of-type {margin:0 0 0 0;} .cate_tab ul li a{display:block; font-size:1rem; line-height:177.778%; letter-spacing: -1.26px; font-weight:500; color:rgba(34,34,34,.5); transition:all .3s linear; position:relative;} .cate_tab ul li a:after{content:''; display:block; width:0; height:3px; background:var(--main); position:absolute; left:0; bottom:-5px; transition:all .3s linear;} .cate_tab ul li.hover a:after{width:100%;} .cate_tab ul li:hover a:after{width:100%;} .cate_tab ul li.hover a{color:var(--main);} .cate_tab ul li:hover a{color:var(--main);} .subtop.member .cate_tit {justify-content: center; align-items: center; margin-bottom:50px;} /********** ?�?��� **********/ /********** 2�� **********/ .basic_style{display:flex;} .basic_style .tit_area{width:240px; box-sizing:border-box; padding:0 50px 0 0;} .basic_style .tit_area .tit_sticky{position:sticky; top:120px; left:0;} .basic_style .tit_area .tit_sticky .cate_tab {margin-top:13px;} .basic_style .tit_area .tit_sticky .cate_tab ul {flex-direction: column;} .basic_style .tit_area .tit_sticky .cate_tab ul li {margin:0 0 40px 0; } .basic_style .tit_area .tit_sticky .cate_tab ul li a {display:inline;} .basic_style .cont_area{width:calc(100% - 240px);} /********** 2�� **********/ /********** ���� �?��� **********/ .news_cont .news_list {display:flex; flex-wrap:wrap; gap:30px;} .news_cont .news_list dl {width:calc((100% - 60px) / 3); background:var(--white); box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08);} .news_cont .news_list dl dt {aspect-ratio:4.3 / 2.8; overflow:hidden;} .news_cont .news_list dl dt img {max-width:100%; height:auto; transition:all .4s linear;} .news_cont .news_list dl dd {padding:25px 30px 37px;; box-sizing:border-box} .news_cont .news_list dl dd .fs20 {margin-bottom:2px; transition:all .4s linear;} .news_cont .news_list dl a:hover {} .news_cont .news_list dl a:hover dt img {transform:scale(1.1);} .news_cont .news_list dl a:hover dd .fs20 {color:var(--main);} /********** ���� �?��� **********/ /********** �������� �?��� **********/ .info_cont {} .info_cont .statutory_list {border-top:2px solid var(--black);box-sizing:border-box} .info_cont .statutory_list dl {box-sizing:border-box; border-bottom:1px solid var(--border); padding:30px 0; transition:all .3s ease;} .info_cont .statutory_list dl:first-of-type {padding:25px 0 30px;} .info_cont .statutory_list dl dt {margin-bottom:3px; } .info_cont .statutory_list dl a dt h4 {transition:all .3s ease;} .info_cont .statutory_list dl a dt h4 span {transition:all .3s ease; color:var(--basic); margin-right:7px;} .info_cont .statutory_list dl dd ul {display:flex; } .info_cont .statutory_list dl dd ul li {margin-right:30px; } .info_cont .statutory_list dl dd ul li b {color:var(--black); font-weight:500; margin-right:10px; font-size:inherit; letter-spacing:inherit; line-height:inherit;} .info_cont .statutory_list dl a:hover {} .info_cont .statutory_list dl a:hover dt h4 {color:var(--main)} .info_cont .statutory_list dl a:hover dt h4 span {color:var(--black)} .info_cont .page_num {padding: 50px 0 0;} /********** �������� �?��� **********/ /********** FAQ **********/ .faq_list dl{border:1px solid var(--border); margin-bottom:5px; } .faq_list dl:last-of-type {margin-bottom:0;} .faq_list dl .faq_tit{display:block; width:35px; height:35px; line-height:35px; text-align:center; border-radius:50%; color:var(--white); font-size:1em; font-family:var(--eng); position:absolute; left:20px; letter-spacing:0.36px; font-weight:700;} .faq_list dl .faq_tit.q{background:var(--main); top:20px;} .faq_list dl .faq_tit.a{background:rgba(34,34,34,.5); top:20px;} .faq_list dl dt{font-size:1rem; font-weight:500; color:var(--black); letter-spacing: -1.26px; line-height:177.777%; box-sizing:border-box; position:relative; padding:23px 67px; cursor:pointer;} .faq_list dl dt:after{content:'\e313'; font-family:var(--icon); display:block; font-size:24px; color:rgba(34,34,34,.5); position:absolute; right:30px; top:50%; margin-top:-12px; font-weight:400; transition:all .3s linear;} .faq_list dl.on {border:1px solid var(--main);} .faq_list dl.on dt {background: rgba(243, 243, 243, 0.50); color:var(--main);} .faq_list dl.on dt:after{transform:rotate(180deg);} .faq_list dl dd{border-top:1px solid var(--border);background:var(--white); box-sizing:border-box; position:relative; padding:22px 67px; font-size:1rem; letter-spacing: -0.07rem; line-height:175%; color:rgba(34,34,34,.7)} /********** FAQ **********/ /********** �?��� ���� **********/ /* select, .select {font-size:0.9222rem; color:rgba(119,119,119,.8); border:1px solid var(--border); padding:0 20px; font-family:inherit; height:50px; box-sizing:border-box; -webkit-appearance: none; -webkit-border-radius: 5px; background: url("/img/cat_arrow_bk.svg") no-repeat right 20px center/10px auto; outline:none; cursor:pointer;} */ .input {font-size:0.889rem; color:var(--basic); border:1px solid var(--border); background-color:var(--white); padding:0 20px; font-family:inherit; height:50px; box-sizing:border-box; -webkit-appearance: none; -webkit-border-radius: 5px;} .blind {position:absolute; top:0px; left:0px; overflow:hidden; display:inline-block !important; width:1px !important; height:1px !important; margin:0 !important; font-size:0 !important; line-height:0 !important;} .textarea {width:100%; height: 200px; font-family:inherit; color:var(--basic); line-height:150%; letter-spacing:-0.5px; padding:15px; border: 1px solid var(--border); background-color:var(--white); box-sizing:border-box; -webkit-appearance: none; -webkit-border-radius: 5px;} /********** �?��� ���� **********/ /********** �? �?��� ����� **********/ .bbs_con {width:100%; border-collapse:separate; border-spacing:0; border-top:2px solid var(--black); text-align:center;} .bbs_con th {font-size:1rem; letter-spacing:-1.26px; line-height:177.778%; font-weight:500; color:var(--black); box-sizing:border-box; padding:13px 10px 16px; border-bottom:1px solid var(--border);} .bbs_con td {font-size:1rem; letter-spacing:-1.26px; line-height:177.778%; font-weight:400; color:var(--basic); box-sizing:border-box; padding:15px 10px 18px; border-bottom:1px solid var(--border);} .bbs_con td a {line-height: inherit; letter-spacing:inherit; font-weight:inherit; font-size:inherit; } .bbs_con td.basicColor {color:var(--basic);} .bbs_con td.left {text-align:left; padding:15px 10px 18px; font-size:1rem; letter-spacing:-1.26px; line-height:177.778%; font-weight:400; color:var(--basic)} .bbs_con td.left a {display:flex; align-items:center; } .bbs_con td.left span {color:var(--sub); font-size:24px; margin-right:3px} .bbs_con tr.point td{background:rgba(0, 158, 76, .05)} .bbs_con td .state {border:1px solid var(--main); color:var(--main); padding:0px 12px; font-weight:500; font-size:0.889rem; letter-spacing:-0.07rem; line-height:31px; height:34px; display:inline-block; box-sizing:border-box; } .bbs_con td .state.answer {border:1px solid var(--sub); color:var(--sub)} .bbs_con .notice span{color:var(--main); vertical-align: middle;} .bbs_con .mo_line{display:none;} .board_cont .basicCont {position:relative;} .board_cont .bbs_btn { padding-top:0; position:absolute; right:0; bottom:170px; display: flex;} .board_cont .bbs_btn a {margin-left:auto; font-size:0.889rem; letter-spacing:-0.07rem; max-width:150px; height: 50px; line-height: 48px; position:relative; z-index:999;} /********** �? �?��� ����� **********/ /********** �?��� **********/ .bbs_search {text-align:center; padding:30px 0 0; font-size:0; position:relative; z-index:1;} .bbs_search dl{display:flex; max-width:475px; width:100%; margin:0 auto; gap:4px} .bbs_search dt {width: 120px;} .bbs_search dt select{width:100%; height:60px !important; font-size:0.889rem; -webkit-border-radius: 5px; letter-spacing:-0.07rem; } .bbs_search dd{width:calc(100% - 120px); position:relative; display:flex;} .bbs_search dd .search_input {font-size:0.889rem; color: var(--basic); border: 1px solid var(--border); background-color: var(--white); padding:0 15px; font-family:inherit; height:60px; line-height:53px; box-sizing:border-box; width:calc(100% - 60px); box-sizing:Border-box; -webkit-appearance: none; -webkit-border-radius: 5px;} .bbs_search dd .bbs_s_b{padding:0; border:0; background:var(--black); outline:none; cursor:pointer; width:60px; height:60px; display:flex; align-items:center; justify-content: center; width: 60px; transition:all .3s linear; border-radius:5px; margin-left:4px;} .bbs_search dd .bbs_s_b:hover{background:var(--sub);} .bbs_search dd .bbs_s_b span{font-size:28px; color:var(--white);} /********** �?��� **********/ /********** �?��� �������� **********/ .bbs_view {position: relative; width:100%; background:var(--white); padding-top:100px;} .bbs_view .basicCont {margin-top:100px;} .bbsView_tit{border-bottom:1px solid var(--border); padding:0 10% 40px; box-sizing:border-box; position: relative; text-align:center;} .bbsView_tit .subject{font-size:2.222rem; letter-spacing:-2.8px; line-height:125%; font-weight:700; color:var(--black);} .bbsView_tit .subject span{display:inline-block; margin-right: 5px; letter-spacing:-1pt;} .bbsView_tit .view_detail{margin:15px 0 0; display:flex; flex-wrap:wrap; justify-content:center;} .bbsView_tit .view_detail li{color:var(--basic); padding:0 25px 0 0; position:relative; display:flex; align-items: center; gap:4px } .bbsView_tit .view_detail li:after{content:''; display:block; width:1px; height:14px; background:#ccc; position:absolute; right:12px; top:50%; margin-top:-6px;} .bbsView_tit .view_detail li:last-child:after{display:none;} .bbsView_tit .view_detail li span {font-size:20px;} .view_content{padding:50px 0 40px; box-sizing:border-box;} .view_content img{max-width:100%; height:auto !important;} .view_content *{font-size:1rem; letter-spacing: -1.26px; line-height:177.777%;} .fill { font-variation-settings: 'FILL' ,} .view_content .link {display:flex; margin-left:auto; justify-content: flex-end; margin-top:67px; } .view_content .link li {transition:all .3s ease;} .view_content .link li:first-of-type a {border:none;} .view_content .link li a {display:inline-block; width:42px; height:42px; border-radius:100%; border:1px solid var(--border); margin-left:5px; position:relative; display:flex; justify-content:center; align-items:center; } .view_content .link li a:hover {border-color:var(--black);} .view_content .link li a:before {display:block; content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background-size: cover !important;} .view_content .link li.fb a:before {background:url('/img/fb.svg'); width:26px; height:26px;} .view_content .link li.in a:before {background:url('/img/in.svg'); width:17px; height:17px;} .view_content .link li.con a:before {background:url('/img/con1.svg'); width:22px; height:22px;} .view_content .link li.tw a:before {background:url('/img/tw.svg'); width:19px; height:18px;} .answer_content{padding:30px 0; word-break:break-all; border-top:1px dashed var(--border); margin:50px 0 0;} .answer_content p.title{font-weight:700; color:var(--black); letter-spacing:-0.5pt; padding:0 0 8px;} .view_file{margin:100px 0 0; padding:14px 25px; box-sizing:border-box; background:var(--grayBg); display:flex;} .view_file .btit{width:170px; font-size:1rem; font-weight: 500; letter-spacing:-1.26px; line-height: 177%; color:var(--black); box-sizing:border-box; position: relative;} .view_file .btit span{display: inline-block; vertical-align: middle; font-size:20px; line-height: 20px; margin:-2px 3px 0 0;} .view_file .bstxt{width:calc(100% - 170px); font-size:1rem; font-weight: 400; letter-spacing:-1.26px; line-height: 177%; box-sizing:border-box;} .view_file .bstxt a{display:inline-block; font-size:1rem; font-weight: 400; letter-spacing:-1.26px; line-height: 177%; margin: 5px 0 0; word-break:break-all;} .view_file .bstxt a:first-child{margin: 0;} .bbs_bottom{border-top:1px solid var(--border); display:flex;} .bbs_bottom.last{border-bottom:1px solid var(--border);} .bbs_bottom dt{width:170px; padding:20px; font-size:1rem; font-weight: 500; font-size:1rem; font-weight: 400; letter-spacing:-1.26px; color:var(--black); box-sizing:border-box; position: relative;} .bbs_bottom dt .arrow{color:var(--black); position:absolute; right:0; top:50%; transform:translateY(-50%);} .bbs_bottom dd{width:calc(100% - 170px); padding:20px; font-size:0.889rem; font-size:1rem; font-weight: 400; letter-spacing:-1.26px; box-sizing:border-box;} .bbs_bottom dd a{line-height: inherit; letter-spacing:inherit; font-weight:inherit; font-size:inherit; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;} /********** �?��� �������� **********/ /*********** Passwd *************/ .passwd{position: relative; border:1px solid var(--border); box-sizing:border-box; text-align:center; padding:120px 5%;} .passwd .pw_img{} .passwd .pw_img span{color: var(--main); font-size: 120px;} .passwd .msg_tit{padding:25px 0 10px; font-weight:700; font-size:1.875rem; line-height: 120%; letter-spacing:1.5pt; font-family:var(--eng); color:var(--black);} .passwd .msg_txt{font-size:1.125rem; color:var(--basic); line-height:150%;} .passwd .input_passwd{max-width:400px; margin:40px auto 0;} .passwd .input_passwd dt{width: 100%; margin: 0 0 5px;} .passwd .input_passwd dt input{width: 100%;} .passwd .input_passwd dd{display: flex;} .passwd .input_passwd dd a {width:100%; background:var(--black); color:var(--white); letter-spacing:-0.72px; padding:15px 0; font-size:1rem; border:0; margin:0; border-radius:5px; cursor:pointer; transition:all 0.3s linear;} .passwd .input_passwd dd a:hover{background:var(--main); border-color:var(--main); transition:all 0.3s linear;} /*********** Passwd *************/ /********** �?��� �������� ver2 **********/ .bbs_view.ver2 {padding-top:100px;} .bbs_view.ver2 .basicCont {margin-top:100px;} .bbs_view.ver2 .bbsView_tit{padding:0 10% 48px; box-sizing:border-box; position: relative; text-align:center;} .bbs_view.ver2 .bbsView_tit .subject{ font-size: 1.667rem; font-weight: 700; letter-spacing: -0.131rem; line-height: 133.333%; color:var(--black);} .bbs_view.ver2 .bbsView_tit .view_detail{margin:17px 0 0; display:flex; flex-wrap:wrap; justify-content:center;} .bbs_view.ver2 .bbsView_tit .view_detail li {color:var(--basic); padding:0 30px 0 0; position:relative; display:flex; align-items: center; gap:10px } .bbs_view.ver2 .bbsView_tit .view_detail li:after{display:none; } .bbs_view.ver2 .bbsView_tit .view_detail li b {color:var(--black); font-weight:500; } .bbs_view.ver2 .bbsView_tit .view_detail li:last-of-type {gap:6px;} .bbs_view.ver2 .view_content{padding:50px 0 60px; box-sizing:border-box;} .bbs_view.ver2 .view_content .link {margin-top:-10px; } .bbs_view.ver2 .view_content dl {box-sizing:border-box; padding:35px 0; border-bottom:1px dashed #bbb;} .bbs_view.ver2 .view_content dl:first-of-type {padding-top:0;} .bbs_view.ver2 .view_content dl:last-of-type {border-bottom:0; padding-bottom:0;} .bbs_view.ver2 .view_content dl dt {font-size: 1.111rem; font-weight: 500; letter-spacing: -0.088rem; line-height: 150%; color: var(--black); margin-bottom:5px;} .bbs_view.ver2 .view_content dl dd {font-size: 1rem; font-weight: 400; letter-spacing: -1.26px; line-height: 177.778%;} .bbs_view.ver2 .view_content dl dd .line {text-decoration:underline;} /********** �?��� �������� ver2 **********/ /********** �?��� �������� ver3 **********/ .bbs_view.ver3 {padding-top:0;} /********** �?��� �������� ver3 **********/ /********** �?� ��? **********/ .bbs_btn {position:relative; overflow:hidden; width:100%; padding-top:40px;} .bbs_btn a {display:inline-block; text-align:center; max-width:200px; width:100%; height:65px; line-height:63px; border-radius:50px; border:1px solid var(--border); box-sizing:border-box; transition:all .3s ease; font-weight:400;} .bbs_btn a:hover {background:var(--main); border-color:var(--main); color:var(--white); } /********** �?� ��? **********/ /********** ������ **********/ .tele_cont .basicCont {margin-top:0px; background:var(--white); z-index:1; position:relative;} .form_basic {max-width:775px; margin:0 auto;} .form_table{width:100%; padding-top:0px; box-sizing:border-box;} .form_table dl{display: flex; flex-wrap:wrap; border:1px solid var(--border); border-radius:5px; margin-bottom:4px;} .form_table dt{width: 200px; font-size:0.889rem; color:var(--black); font-weight: 500; letter-spacing:-0.07rem; line-height:175%; padding:20px; box-sizing:border-box; display: flex; align-items:center; position:relative;} .form_table dt:before {height:calc(100% - 40px); width:1px; display:block; content:''; background:var(--border); position:absolute; top:50%; right:0; transform:translateY(-50%);} .form_table dt span{color:var(--main); margin-left: 5px;} .form_table dd{width: calc(100% - 200px); color:var(--basic); font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; padding:15px; box-sizing:border-box; } .form_table dd input {border: 0 !important; height:30px;} .form_table dd input[type='checkbox'] {border:1px solid var(--border); accent-color: var(--main); border-radius:5px;} .form_table dd select {border: 0 !important; height:30px;} .form_table dd textarea {border: 0 !important; height:110px;} .form_table dd .sub_txt{display: block; text-align:left; font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; padding:5px 0 0; color:var(--basic);} .form_table dd .sub_txt a:hover{color:var(--black); transition:all .3s linear;} .form_table dd span.hyp{display:inline-block; width:15px; text-align:center; font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; } .form_table dd .select_num{width:calc((100% - 40px)/3);} .form_table dd .input_num{width:calc((100% - 40px)/3);} .form_table dd .norobot_img{display:inline-block; vertical-align: top; padding:7px 0 8px; box-sizing:border-box; height:30px; } /* .form_table dd .norobot_img img {max-width:100%; width:auto; height:30px;} */ .form_table dd .vcode{display:inline-block; vertical-align: top; width:calc(50% - 80px);} /********** ������ **********/ /********** �������� ���� **********/ .submit {display: flex; padding: 30px 0 0; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; } .agree_con{} .submit .privacy_agree{box-sizing:border-box; border-top:0; margin:10px 0 30px} .submit .privacy_agree .textarea{border:0; border:1px solid var(--border);font-size:0.938rem; color:var(--basic); padding: 15px ; line-height: 160%; width: 100%; } .submit .privacy_head{font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; word-break:keep-all; text-align:left; } .submit .privacy_head .agree_checkbox{display:inline-block; width:20px; height:20px; margin:-2px 7px 0 0; vertical-align:middle;} .submit .privacy_head .checkbox_wrap{font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; word-break:keep-all;} .submit .privacy_head .option{display:inline-block; margin-left: 5px; cursor:pointer; color:var(--black); font-weight:500; text-decoration:underline; font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; } .submit .submit_btn {margin-left:auto;} .submit .submit_btn a {display: inline-block; width:200px; max-width:200px; background:var(--main); padding:15px 26px; box-sizing:border-box; border-radius:35px; display: flex; margin: 0 auto; position:relative; transition:all .4s linear; overflow:hidden; border:1px solid transparent; align-items: center; justify-content: space-between;} .submit .submit_btn a em {font-style:normal; color:var(--white); transition:all .4s linear; font-size:0.889rem; letter-spacing:-0.07rem; line-height:175%; font-weight:500; z-index:3; position:relative; } .submit .submit_btn a span {line-height:35px; color:var(--main); font-size:21px; display:flex; z-index:2; display:flex; justify-content:center; align-items:center;} .submit .submit_btn a span:before {display:block; content:''; border-radius:100%; background:var(--white); width:35px; height:35px; position:absolute; z-index:-1; transition:all .4s linear; } .submit .submit_btn a:hover {border-color:var(--main);} .submit .submit_btn a:hover em {color:var(--main);} .submit .submit_btn a:hover span:before {transform:scale(10); } /********** �������� ���� **********/ /********** ������ ver2 **********/ .form_basic.ver2 {max-width:100%; margin:0 auto; border-top:2px solid var(--black);} .form_basic.ver2 .form_table{width:100%; padding-top:0; display: flex; flex-wrap:wrap; } .form_basic.ver2 .form_table dl{border:0; border-radius:0; margin-bottom:0; padding:13px 20px; padding-right:0; border-bottom:1px solid var(--border); width:100%; } .form_basic.ver2 .form_table dt{ font-size:1rem; color:var(--black); font-weight: 500; letter-spacing:-1.26px; line-height:177.778%; padding:0; } .form_basic.ver2 .form_table dt:before {display:none;} .form_basic.ver2 .form_table dd{font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; padding:0; position:relative; } .form_basic.ver2 .form_table dd input {border: 1px solid var(--border) !important; height:45px; font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; max-width:510px; width:50%;} .form_basic.ver2 .form_table dd select {border: 1px solid var(--border) !important; height:45px; font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; width:100%;} .form_basic.ver2 .form_table dd textarea {border: 1px solid var(--border) !important; height:250px; font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; width:100%;} .form_basic.ver2 .form_table dd input::placeholder {font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; } .form_basic.ver2 .form_table dd .select_num{width:calc((100% - 40px)/3);} .form_basic.ver2 .form_table dd .input_num{width:calc((100% - 40px)/3);} .form_basic.ver2 .form_table dd .norobot_img{padding:7px 0 8px; position: absolute; top: 4px; left: 4px} .form_basic.ver2 .form_table dd .input.vcode{padding-left:85px;} .form_basic.ver2 .form_table dl:first-of-type dd input, .form_basic.ver2 .form_table dl:nth-of-type(2) dd input {width:100%} .form_basic.ver2 .form_table dl:nth-of-type(3) dd span {font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; color:rgba(34,34,34,.5); margin-left:15px;} .form_basic.ver2 .form_table dl:nth-of-type(4) dd {max-width:510px;} .form_basic.ver2 .form_table dl:nth-of-type(6) dd input {max-width:100%; width:100%;} .form_basic.ver2 .form_table dl:nth-of-type(7) { padding-left:0;} .form_basic.ver2 .form_table dl:nth-of-type(7) dd {width:100%;} /********** ������ ver2 **********/ /********** �������� ���� ver2 **********/ .form_basic.ver2 .submit {padding: 47px 0 0; justify-content: center; flex-direction:column} .form_basic.ver2 .submit .privacy_agree{box-sizing:border-box; border-top:0;} .form_basic.ver2 .submit .privacy_agree .textarea{ font-size:0.938rem; color:var(--basic); padding: 15px ; line-height: 160%; width: 100%; } .form_basic.ver2 .submit .privacy_head{font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; word-break:keep-all; text-align:left; } .form_basic.ver2 .submit .privacy_head .agree_checkbox{display:inline-block; width:20px; height:20px; margin:-2px 7px 0 0; vertical-align:middle;} .form_basic.ver2 .submit .privacy_head .checkbox_wrap{font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; word-break:keep-all;} .form_basic.ver2 .submit .privacy_head .option{display:inline-block; margin-left: 5px; cursor:pointer; color:var(--black); font-weight:500; text-decoration:underline;} .form_basic.ver2 .submit .submit_btn {margin-top:30px; margin-left:unset;} /* ?? 1) ?? ? ?/??? ??? ?? ??????????????????????????? */ .submit .submit_btn a span::before { content: none !important; } .submit .submit_btn a span i { display: none !important; } /* ?? 2) ?? ????: ??? ?? ?? ????????????????????????? */ .submit .submit_btn a{ position: relative; z-index: 0; /* ::before(z:-1) ?? ???? ?? ?? */ overflow: hidden; display: flex; align-items: center; justify-content: center; /* ??? ?? ?? */ width: 200px; max-width: 200px; padding: 15px 26px; border-radius: 35px; background: var(--main); border: 1px solid transparent; transition: all .4s ease; } /* ?? 3) ???: ?? ?? ??? ???????????????????????????????? */ .submit .submit_btn a span{ position: relative; z-index: 1; /* ::before?? ? */ color: #fff; /* ??? ?? */ font-size: 0.889rem; font-weight: 500; line-height: 1; } /* ?? 4) ??? ? ?: ??? ??, ?? ? ?? ????????????????? */ .submit .submit_btn a::before{ content: ''; position: absolute; top: 50%; left: 50%; width: 35px; height: 35px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%) scale(0); /* ?? ? ??? */ transition: transform .4s ease; z-index: -1; /* ??? ? */ } .submit .submit_btn a:hover{ border-color: var(--main); } .submit .submit_btn a:hover span{ color: var(--main); } .submit .submit_btn a:hover::before{ transform: translate(-50%, -50%) scale(10); /* ?? ? ???? ?? */ } /********** �������� ���� ver2 **********/ /********** �?���?������ **********/ .member_cont {} .member_cont .login_input.ver2 {margin-top:60px; } .member_cont .kakao_btn {margin-top:0; } .member_cont .kakao_btn a {width:100%; display:inline-block; text-align:center; background:#F2DA00; height:80px; line-height:78px; border-radius:10px; color:#3A1C1D; letter-spacing:-0.088rem; font-weight:700; font-size:1.111rem; box-sizing:border-box; transition:all .4s linear; border:1px solid transparent;} .member_cont .kakao_btn a p {position:relative; display: inline; padding-left:37px;box-sizing:border-box; } .member_cont .kakao_btn a p:before {position:absolute; left:0; top:4px; display:block; content:''; background:url('/img/mem_kakao.svg'); width:27px; height:24px; background-size:cover !important;} .member_cont .kakao_btn a * {font-size:inherit; letter-spacing:inherit; line-height:inherit; font-weight:inherit;} .member_cont .kakao_btn a:hover {background:var(--white); border-color:#F2DA00; } .member_cont .mem_btn {margin-top:10px;} .member_cont .mem_btn a {width:100%; display:inline-block; text-align:center; background:var(--black); height:80px; line-height:78px; border-radius:10px; color:var(--white); letter-spacing:-0.088rem; font-weight:700; font-size:1.111rem; box-sizing:border-box; transition:all .4s linear; border:1px solid transparent;} .member_cont .mem_btn a:hover {background:var(--white); border-color:var(--black); color:var(--black); } .member_cont .login_input {} .member_cont .login_input dd {margin-bottom:10px; font-size:1.111rem; letter-spacing:-0.088rem; height:80px; line-height:78px; border-radius:10px; border:1px solid var(--border); overflow:hidden; padding:25px; box-sizing:border-box; display: flex;} .member_cont .login_input dd input {border:none; width:100%; height:100%; } .member_cont .login_input dd input::placeholder {font-size:1.111rem; letter-spacing:-0.088rem; color:rgba(119,119,119,.5)} .member_cont .login_input dt input {width:100%; display:inline-block; text-align:center; background:var(--black); height:80px; line-height:78px; border-radius:10px; color:var(--white); letter-spacing:-0.088rem; font-weight:700; font-size:1.111rem; box-sizing:border-box; transition:all .4s linear; border:1px solid transparent; margin-top:20px;cursor:pointer; } .member_cont .login_input dt input:hover {background:var(--white); border-color:var(--black); color:var(--black);} .member_cont .member_btn {display:flex; justify-content:center; gap:40px; margin-top:20px; transition:all .4s ease;} .member_cont .member_btn a {position:relative; font-size:1rem; color:var(--black);} .member_cont .member_btn a:hover {color:var(--sub);} .member_cont .member_btn a:before {display:block; content:''; width:1px; height:16px; position:absolute; right:-20px; background:#bbb; top:10px;} .member_cont .member_btn a:last-of-type:before {display:none;} .member_cont .join_input {} .member_cont .join_input dd {margin-bottom:10px; } .member_cont .join_input dd p {margin-bottom:15px; color:var(--black); font-weight:500; } .member_cont .join_input dd input {border:none; width:100%; height:100%; font-size:1.111rem; letter-spacing:-0.088rem; height:80px; line-height:78px; border-radius:10px; border:1px solid var(--border); overflow:hidden; padding:25px; box-sizing:border-box; display: flex; margin-bottom:10px;} .member_cont .join_input dd input::placeholder {font-size:1.111rem; letter-spacing:-0.088rem; color:rgba(119,119,119,.5)} .member_cont .join_input dt input {width:100%; display:inline-block; text-align:center; background:var(--black); height:80px; line-height:78px; border-radius:10px; color:var(--white); letter-spacing:-0.088rem; font-weight:700; font-size:1.111rem; box-sizing:border-box; transition:all .4s linear; border:1px solid transparent; margin-top:20px;cursor:pointer; } .member_cont .join_input dt input:hover {background:var(--white); border-color:var(--black); color:var(--black);} .member_cont .join_input dd a {width:100%; display:inline-block; text-align:center; background:var(--white); height:80px; line-height:78px; border-radius:10px; color:var(--black); letter-spacing:-0.088rem; font-weight:700; font-size:1.111rem; box-sizing:border-box; transition:all .4s linear; border:1px solid var(--black);} .member_cont .join_input dd a:hover {background:var(--black); border-color:var(--white); color:var(--white); } .member_cont .agree_cont {margin-top:50px;} .member_cont .agree_cont dt {padding-bottom:18px; box-sizing:border-box; border-bottom:1px solid var(--border); font-size:0.889rem; letter-spacing:-0.07rem; line-height:175%; font-weight:500; color:var(--black); display:flex; align-items:center; gap:10px;} .member_cont .agree_cont dt span, .member_cont .agree_cont dd span {font-size:inherit; letter-spacing:inherit; line-height:inherit; font-weight:inherit;} .member_cont .agree_cont dd:first-of-type {padding-top:15px; box-sizing:border-box; margin-bottom:5px; } .member_cont .agree_cont dd { font-size:0.889rem; letter-spacing:-0.07rem; line-height:175%; font-weight:400; display:flex; align-items:center; gap:10px} .member_cont .agree_cont input[type='checkbox'] {border:1px solid var(--border); accent-color: var(--main); width:22px; height:22px; border-radius:5px;} .member_cont .agree_cont input[type="checkbox"]:checked { border-radius:5px;} .member_cont .agree_cont .join_btn {margin-top:40px;} .member_cont .agree_cont .join_btn a {width:100%; display:inline-block; text-align:center; background:var(--black); height:80px; line-height:78px; border-radius:10px; color:var(--white); letter-spacing:-0.088rem; font-weight:700; font-size:1.111rem; box-sizing:border-box; transition:all .4s linear; border:1px solid transparent;} .member_cont .agree_cont .join_btn a:hover {background:var(--white); border-color:var(--black); color:var(--black); } /********** �?���?������ **********/ /********** �?����?� **********/ .img_box{box-sizing:border-box; } .img_box img{max-width:100% !important; height: auto !important;} /********** �?����?� **********/ /********** ��?����� **********/ .dot_list{text-align:left;} .dot_list > li, .dot_list > dd{font-size:0.889rem; letter-spacing: -0.07rem; line-height:175%; color:var(--basic); padding:0 0 6px 11px; box-sizing:border-box; position:relative;} .dot_list > li:last-child, .dot_list > dd:last-child{padding-bottom:0;} .dot_list > li:before, .dot_list > dd:before{content:''; display:block; width:4px; height:4px; border-radius:50%; position:absolute; left:0; top:13px; background:var(--basic); opacity:0.5} .dot_list2 > li, .dot_list2 > dd{font-size:1rem;} .dot_list2 > li:before, .dot_list2 > dd:before{top:12px;} .dot_list2 > li b, .dot_list2 > dd b{font-weight: 500; color:var(--black); letter-spacing: inherit; line-height: inherit;} /********** ��?����� **********/ /********** ��������󝝝�? **********/ .policy_cont{position:relative; overflow:hidden; font-size:1rem;} .policy_cont br{display:block;} .policy_cont strong{font-weight:500; color:var(--black);} .policy_cont .cont_title{font-size:1.412rem; color:var(--black); padding-bottom:18px; letter-spacing:-0.02em; font-weight:500;} .policy_cont p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:500; color:var(--black) !important; letter-spacing:-0.02em;} .policy_cont .cont_txt {padding:0px 0px 35px 0;} .policy_cont .cont_txt2 {padding-bottom:35px;} .policy_cont .cont_box {padding:25px; background:var(--grayBg); margin:7px 0px 10px 0px; display:block; letter-spacing:-0.02em; line-height:1.7;} .privacy_list {width:91%; overflow:hidden; clear:both; *zoom:1; padding:4% 4% 3% 4%; border:1px solid var(--border); margin-bottom:30px;} .privacy_list li {width:50%; float:left; padding-bottom:1%;} .privacy_list li a {font-weight:500; color:var(--black);} /********** ��������󝝝�? **********/ /********** ������ �������� **********/ .responsive-dim{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6);z-index: 100; display:none;} .responsive-dim .stock-scroll-drag-guide{position: absolute;top: 50%; left: 0;right: 0; text-align: center; transform: translate(0,-50%);} .stock-scroll-drag-guide {display:flex; justify-content:center;} .stock-scroll-drag-guide .stock-scroll-drag-inner { position: relative; width:50px; height: 50px; } .stock-scroll-drag-guide .stock-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:rgba(255,255,255,0.5); content:""; border-radius:5px;} .stock-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:stock-drag-hand 3s both infinite; } .stock-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color:#fff; border-radius:5px; opacity:1; } .stock-scroll-drag-guide .drag-tail .hand-icon{margin-top: 5px; display: block;} @keyframes stock-drag-hand { 0% { left: 0; margin-left: 0px; transform: rotate(0deg); } 10% { left: 0; margin-left: 0px; transform: rotate(0deg); } 50% { left: 100%; margin-left: -25px; } 100% { left: 0; margin-left: 0px; } } /********** ������ �������� **********/ /******************************************************************************* @media 1700px *******************************************************************************/ @media all and (max-width:1700px){ /********** FAQ **********/ .faq_list dl dd br {display:none} /********** FAQ **********/ .subtop.three .subtop_img { padding:170px 5% 170px;} } /******************************************************************************* @media 1500px *******************************************************************************/ @media all and (max-width:1500px){ } /******************************************************************************* @media ~1300px *******************************************************************************/ @media all and (max-width:1300px){ /********** ����? **********/ /* .subtop{padding-top:80px;} .subtop .subtop_in {padding-top:80px;} .subtop .visual_tit {font-size:3.33rem; letter-spacing: -0.263rem;} .subtop .visual_lnb dl dt{margin-right:15px; } .subtop .visual_lnb dl dd{padding: 0 38px 0 15px;} .subtop .visual_lnb dl dd:before{height: 16px; margin-top: -8px;} .subtop .visual_lnb dl dd > a{font-size:0.889rem; letter-spacing: -0.07rem; } .subtop .visual_lnb dl dd > a:after{width: 16px; height: 16px; line-height: 16px; font-size:16px; right:-24px; margin-top: -8px;} .subtop .visual_lnb dl dd .dlst{margin: 10px 0 0; min-width: 150px; padding:20px 15px;} .subtop .visual_lnb dl dd .dlst ul li{padding: 0 0 8px;} */ .subtop .subtop_img {height: 500px; margin:50px 0 120px; } .subtop .tit_area span { font-size:14px; letter-spacing:0.7px; line-height:128.571%; } .subtop .tit_area h3{font-size:3.33rem; letter-spacing: -0.263rem; margin:20px 0 21px;} .subtop .tit_area p {font-size:1.11rem; letter-spacing:-0.088rem; } .subtop .tit_area p br {display:none;} /********** ����? **********/ /********** ��?�� �?� ��� ���� � **********/ .subtop.two .subtop_img {margin:50px 0 0; padding:170px 0 235px; } .subtop.two .tit_area .quote {font-size: 1.66rem; letter-spacing: -0.131rem; } .subtop.two .tit_area .quote:before {padding-right:5px; } .subtop.two .tit_area h3{font-size:3.33rem; letter-spacing: -0.263rem; margin:20px 0 21px;} .subtop.two .tit_area p {font-size:1.11rem; letter-spacing:-0.088rem;} .subtop.two .people img {height:100%;} .subtop.two .tit_area h3 span {margin-left:15px; font-size:1.94rem; letter-spacing:-0.153rem; } .subtop.two .tit_area ul:first-of-type {padding-top:25px; } .subtop.two .tit_area ul:last-of-type {padding-top:32px; } .subtop.two .tit_area ul:last-of-type li {padding:0 30px 0 23px; } .subtop.two .tit_area ul:last-of-type li:before {top:2px; font-size:1rem; color:var(--white); } /********** ��?�� �?� ��� ���� � **********/ /********** �?����� ��� ���� � **********/ .subtop.three .subtop_img {margin:50px 0 0; padding:150px 5% 150px;} .subtop.three .self_wrap .tit_area{width:60%; margin-right:30px;} .subtop.three .self_wrap .tit_area .self_list {margin-top:20px;} .subtop.three .self_wrap .tit_area .self_list li {padding-left:45px; margin-bottom:10px; } .subtop.three .self_wrap .tit_area .self_list li:before {width:35px; height:35px; line-height:35px; font-size:21px; } .subtop.three .self_wrap .tit_area .link_list {margin-top:50px; gap:5px;} .subtop.three .self_wrap .tit_area .link_list a {width:200px; max-width:200px; padding:15px 26px; } .subtop.three .self_wrap .tit_area .link_list a em {font-size:0.889rem; letter-spacing:-0.07rem;} .subtop.three .self_wrap .tit_area .link_list a span {line-height:35px; font-size:21px;} .subtop.three .self_wrap .tit_area .link_list a span:before {width:35px; height:35px; } .subtop.three .self_wrap .tit_area .link_list a.store em {font-size:14px; letter-spacing:0.7px;} .subtop.three .self_wrap .img_area{width: 45%;} .subtop.three .self_wrap .img_area img { bottom:-150px;} /********** �?����� ��� ���� � **********/ /********** 2�� **********/ .basic_style .tit_area{width:160px; box-sizing:border-box; padding:0 30px 0 0;} .basic_style .tit_area .tit_sticky .cate_tab ul li {margin:0 0 35px 0; } .basic_style .cont_area{width:calc(100% - 160px);} /********** 2�� **********/ /********** ?�?��� **********/ .cate_tit {flex-wrap:wrap; margin-bottom:60px;} .cate_tab ul li{margin:0 35px 0 0;} .cate_tab ul li a{font-size:1rem; letter-spacing: -1.2px; } .cate_tab ul li a:after{bottom:-5px; } /********** ?�?��� **********/ /********** ���� �?��� **********/ .news_cont .news_list {gap:20px;} .news_cont .news_list dl {width:calc((100% - 40px) / 3); } .news_cont .news_list dl dt img {max-width:100%;;} .news_cont .news_list dl dd {padding:25px 25px 30px;} .news_cont .news_list dl dd .fs20 {margin-bottom:2px;} /********** ���� �?��� **********/ /********** �?��� �������� **********/ .bbs_view { padding-top:80px;} .bbs_view .basicCont {margin-top:80px;} /********** �?��� �������� **********/ /********** �?��� �������� ver2 **********/ .bbs_view.ver2 {padding-top:80px;} .bbs_view.ver2 .basicCont {margin-top:80px;} /********** �?��� �������� ver2 **********/ /********** ������ **********/ .tele_cont .basicCont {margin-top:0px; } .form_basic {max-width:775px; } .form_table{padding-top:0px;} .form_table dl{margin-bottom:4px;} .form_table dt{width: 150px; font-size:0.889rem; color:var(--black); letter-spacing:-0.07rem; padding:20px; } .form_table dt:before {height:calc(100% - 40px); margin-left: 5px;} .form_table dd{width: calc(100% - 150px); font-size:0.889rem; letter-spacing:-0.07rem; padding:15px; } .form_table dd input {height:30px;} .form_table dd select {height:30px;} .form_table dd textarea { height:110px; padding: 0;} .form_table dd .sub_txt{font-size:0.889rem; letter-spacing:-0.07rem; padding:5px 0 0;} .form_table dd span.hyp{width:15px; font-size:0.889rem; letter-spacing:-0.07rem; } .form_table dd .select_num{width:calc((100% - 40px)/3);} .form_table dd .input_num{width:calc((100% - 40px)/3);} .form_table dd .norobot_img{ padding:7px 0 8px; height:30px; } .form_table dd .norobot_img img {height:30px;} .form_table dd .vcode{ width:calc(50% - 80px);} /********** ������ **********/ /********** �������� ���� **********/ .submit {padding: 30px 0 0;} .submit .privacy_agree .textarea{font-size:0.938rem; padding: 15px ; } .submit .privacy_head{font-size:0.889rem; letter-spacing:-0.07rem;} .submit .privacy_head .agree_checkbox{width:20px; height:20px; margin:-2px 7px 0 0;} .submit .privacy_head .checkbox_wrap{font-size:0.889rem; letter-spacing:-0.07rem;} .submit .privacy_head .option{margin-left: 5px;} .submit .submit_btn a {width:180px; max-width:180px;padding:15px 26px;} .submit .submit_btn a em {font-size:0.889rem; letter-spacing:-0.07rem;} .submit .submit_btn a span {line-height:35px; font-size:21px; } .submit .submit_btn a span:before {width:35px; height:35px; } /********** �������� ���� **********/ /********** ������ ver2 **********/ .form_basic.ver2 {max-width:100%;} .form_basic.ver2 .form_table{width:100%; padding-top:0; display: flex; flex-wrap:wrap; } .form_basic.ver2 .form_table dl{border:0; border-radius:0; margin-bottom:0; padding:13px 20px; padding-right:0; border-bottom:1px solid var(--border); width:100%; } .form_basic.ver2 .form_table dt{ font-size:1rem; color:var(--black); font-weight: 500; letter-spacing:-1.26px; line-height:177.778%; padding:0; } .form_basic.ver2 .form_table dt:before {display:none;} .form_basic.ver2 .form_table dd{font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; padding:0; position:relative; } .form_basic.ver2 .form_table dd input {height:45px; font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; max-width:510px; width:50%;} .form_basic.ver2 .form_table dd select {height:45px; font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; width:100%;} .form_basic.ver2 .form_table dd textarea {height:250px; font-size:0.889rem; font-weight: 400; letter-spacing:-0.07rem; line-height:175%; width:100%;} .form_basic.ver2 .form_table dd input::placeholder {font-size:0.889rem; letter-spacing:-0.07rem; line-height:175%; } .form_basic.ver2 .form_table dd .select_num{width:calc((100% - 40px)/3);} .form_basic.ver2 .form_table dd .input_num{width:calc((100% - 40px)/3);} .form_basic.ver2 .form_table dd .norobot_img{padding:7px 0 8px; position: absolute; top: 4px; left: 4px} .form_basic.ver2 .form_table dl:first-of-type, .form_basic.ver2 .form_table dl:nth-of-type(2) {width:100%;} .form_basic.ver2 .form_table dl:first-of-type dd input, .form_basic.ver2 .form_table dl:nth-of-type(2) dd input {width:100%} .form_basic.ver2 .form_table dl:nth-of-type(2) dt {justify-content: flex-start;} .form_basic.ver2 .form_table dl:nth-of-type(3) dd span {font-size:0.889rem; letter-spacing:-0.07rem; margin-left:0; margin-top:5px; display:block} .form_basic.ver2 .form_table dl:nth-of-type(3) dd input {width:100%; max-width:510px;} .form_basic.ver2 .form_table dl:nth-of-type(4) dd {max-width:510px;} .form_basic.ver2 .form_table dl:nth-of-type(6) dd input {max-width:100%; width:100%;} .form_basic.ver2 .form_table dl:nth-of-type(7) { padding-left:0;} .form_basic.ver2 .form_table dl:nth-of-type(7) dd {width:100%;} /********** ������ ver2 **********/ /********** �������� ���� ver2 **********/ .form_basic.ver2 .submit {padding: 40px 0 0; } .form_basic.ver2 .submit .submit_btn {margin-top:30px;} /********** �������� ���� ver2 **********/ /********** css ���� **********/ .other_cont {margin-top:70px;} .basicCont{padding:0 0 120px; } .compad{padding:120px 0; ;} .compad_t{padding:120px 0 0;} .compad_b{padding:0 0 120px; } .subpad{padding:120px 0;} .subpad_t{padding:120px 0 0; } .subpad_b{padding:0 0 120px;} .subpad.ver2 {padding:140px 0;} .subpad_t.ver2 {padding:140px 0 0; } .subpad_b.ver2 {padding:0 0 140px;} .subpad.ver3 {padding:80px 0;} .subpad_t.ver3 {padding:80px 0 0;} .subpad_b.ver3 {padding:0 0 80px } .padT70 {padding-top:60px; } .fs60 {font-size:3.33rem; letter-spacing: -0.263rem; } /********** css ���� **********/ } /******************************************************************************* @media ~980px *******************************************************************************/ @media all and (max-width:980px){ /********** ����? **********/ .subtop{padding-top:70px;} .subtop .subtop_in {padding-top:70px;} .subtop .visual_tit {font-size:2.777rem; margin-top:15px;} /* .subtop .visual_lnb dl dt{margin-right:15px; } .subtop .visual_lnb dl dd{padding: 0 30px 0 13px;} .subtop .visual_lnb dl dd:before{height: 16px; margin-top: -8px;} .subtop .visual_lnb dl dd > a{font-size:0.889rem; letter-spacing: -0.07rem; } .subtop .visual_lnb dl dd > a:after{width: 16px; height: 16px; line-height: 16px; font-size:16px; right:-20px; margin-top: -8px;} .subtop .visual_lnb dl dd .dlst{margin: 4px 0 0; min-width: 120px; padding:16px 12px;} .subtop .visual_lnb dl dd .dlst ul li{padding: 0 0 4px;} */ .subtop .subtop_img {height: 400px; margin:60px 0 100px; } .subtop .tit_area {padding:0 7%;} .subtop .tit_area span { font-size:14px; letter-spacing:0.5px; line-height:128.571%; } .subtop .tit_area h3{font-size:2.6rem; letter-spacing: -1.2pt; margin:20px 0 21px;} .subtop .tit_area p {font-size:1rem; letter-spacing:-1.0px; } /********** ����? **********/ /********** ��?�� �?� ��� ���� � **********/ .subtop.two .subtop_img {margin:40px 0 0; padding:150px 0 220px; } .subtop.two .people {height:585px;} .subtop.two .tit_area .quote {font-size: 1.6rem; letter-spacing: -0.131rem; } .subtop.two .tit_area .quote:before {padding-right:5px; } .subtop.two .tit_area h3{font-size:2.6rem; letter-spacing: -3.2px; margin:15px 0 16px;} .subtop.two .tit_area p {font-size:1rem; letter-spacing:-1.0px;} .subtop.two .tit_area h3 span {margin-left:13px; font-size:1.6rem; letter-spacing:-2.0px; } .subtop.two .tit_area ul:first-of-type {padding-top:20px; } .subtop.two .tit_area ul:last-of-type {padding-top:26px; } .subtop.two .tit_area ul:last-of-type li {padding:0 22px 0 20px; } .subtop.two .tit_area ul:last-of-type li:before {top:1px; font-size:1rem; color:var(--white); } /********** ��?�� �?� ��� ���� � **********/ /********** �?����� ��� ���� � **********/ .subtop.three .subtop_img {margin:40px 0 0; padding:100px 5% 100px;} .subtop.three .self_wrap .tit_area{width:60%; margin-right:20px;} .subtop.three .self_wrap .tit_area .self_list {margin-top:15px;} .subtop.three .self_wrap .tit_area .self_list li {padding-left:40px; margin-bottom:10px; } .subtop.three .self_wrap .tit_area .self_list li:before {width:30px; height:30px; line-height:30px; font-size:19px; } .subtop.three .self_wrap .tit_area .link_list {margin-top:40px; gap:5px;} .subtop.three .self_wrap .tit_area .link_list a {width:170px; max-width:170px; padding:15px 20px; } .subtop.three .self_wrap .tit_area .link_list a em {font-size:0.889rem; letter-spacing:-0.07rem;} .subtop.three .self_wrap .tit_area .link_list a span {line-height:30px; font-size:19px;} .subtop.three .self_wrap .tit_area .link_list a span:before {width:30px; height:30px; } .subtop.three .self_wrap .tit_area .link_list a.store em {font-size:13px; letter-spacing:0.7px;} .subtop.three .self_wrap .img_area{width: 45%;} .subtop.three .self_wrap .img_area img { bottom:-100px;} /********** �?����� ��� ���� � **********/ /********** 2�� **********/ .basic_style {flex-direction:column;} .basic_style .tit_area{width:100%; padding:0 0 30px 0;} .basic_style .tit_area .tit_sticky .cate_tab {margin-top:0;} .basic_style .tit_area .tit_sticky .cate_tab ul {flex-direction:row;} .basic_style .tit_area .tit_sticky .cate_tab ul li {margin:0 30px 0 0; } .basic_style .cont_area{width:100%;} /********** 2�� **********/ /********** ?�?��� **********/ .cate_tit {flex-wrap:wrap; margin-bottom:50px;} .cate_tab ul li{margin:0 30px 0 0;} .cate_tab ul li a{font-size:1rem; letter-spacing: -1px; } .cate_tab ul li a:after{bottom:-3px; } /********** ?�?��� **********/ /********** �?��� **********/ .bbs_search {padding:20px 0 0; } .bbs_search dl{max-width:475px; gap:4px} .bbs_search dt {width: 100px;} .bbs_search dt select{width:100%; height:50px !important; } .bbs_search dd{width:calc(100% - 100px); } .bbs_search dd .search_input {font-size:0.889rem; padding:0 15px; font-family:inherit; height:50px; line-height:53px; width:calc(100% - 50px); } .bbs_search dd .bbs_s_b {width:50px; height:50px; margin-left:4px;} .bbs_search dd .bbs_s_b span{font-size:28px; } /********** �?��� **********/ /********** ���� �?��� **********/ .news_cont .news_list {gap:20px;} .news_cont .news_list dl {width:calc((100% - 20px) / 2); } .news_cont .news_list dl dt img {max-width:100%;;} .news_cont .news_list dl dd {padding:20px 20px 25px;} .news_cont .news_list dl dd .fs20 {margin-bottom:2px;} /********** ���� �?��� **********/ /********** �������� �?��� **********/ .info_cont .statutory_list dl {padding:20px 0;} .info_cont .statutory_list dl:first-of-type {padding:18px 0 20px;} .info_cont .statutory_list dl dt {margin-bottom:3px; } .info_cont .statutory_list dl a dt h4 span {margin-right:5px;} .info_cont .statutory_list dl dd ul li {margin-right:20px; } .info_cont .statutory_list dl dd ul li b {margin-right:8px; ;} .info_cont .page_num {padding: 40px 0 0;} /********** �������� �?��� **********/ /********** FAQ **********/ .faq_list dl{ margin-bottom:5px; } .faq_list dl .faq_tit{width:30px; height:30px; line-height:30px; font-size:1em; left:20px; letter-spacing:0.32px; } .faq_list dl .faq_tit.q{top:18px;} .faq_list dl .faq_tit.a{top:15px;} .faq_list dl dt{font-size:1rem; letter-spacing: -1.1px; padding:18px 60px;} .faq_list dl dt:after{width:22px; height:22px; line-height:22px; font-size:22px; right:30px; margin-top:-10px; } .faq_list dl dd{padding:18px 60px; font-size:1rem; letter-spacing: -1.1px; } /********** FAQ **********/ /********** �? �?��� ����� **********/ .bbs_con th {font-size:1rem; letter-spacing:-1px; padding:12px 10px 14px; } .bbs_con td {font-size:1rem; letter-spacing:-1px; padding:13px 10px 16px; } .bbs_con td.left {padding:15px 10px 18px; font-size:1rem; letter-spacing:-1px;} .bbs_con td.left span { font-size:20px;} .bbs_con td .state {padding:0px 12px; letter-spacing:-0.07rem; line-height:27px; height:30px; } .board_cont .bbs_btn {position:unset; padding-top:25px; } .board_cont .bbs_btn a {font-size:0.889rem; letter-spacing:-1.1px; max-width:120px; height: 40px; line-height: 38px;} /********** �? �?��� ����� **********/ /********** �?��� �������� **********/ .bbs_view { padding-top:60px;} .bbs_view .basicCont {margin-top:60px;} .bbsView_tit{ padding:0 10% 30px;} .bbsView_tit .subject{font-size:1.8rem; letter-spacing:-2.6px; } .bbsView_tit .view_detail{margin:13px 0 0; } .bbsView_tit .view_detail li{padding:0 21px 0 0; gap:3px } .bbsView_tit .view_detail li:after{height:14px; right:10px; top:50%; margin-top:-6px;} .bbsView_tit .view_detail li span {font-size:18px;} .view_content{padding:40px 0 30px; ;} .view_content *{letter-spacing: -1px; } .view_content .link { margin-top:50px; } .view_content .link li a {width:42px; height:42px; margin-left:5px; ; } .view_content .link li.fb a:before {width:26px; height:26px;} .view_content .link li.in a:before {width:17px; height:17px;} .view_content .link li.con a:before {width:22px; height:22px;} .view_content .link li.tw a:before {width:19px; height:18px;} .view_file{margin:80px 0 0; padding:14px 25px; } .view_file .btit{width:140px; letter-spacing:-1.26px; } .view_file .btit span{font-size:18px; line-height: 20px; margin:-2px 3px 0 0;} .view_file .bstxt{width:calc(100% - 140px); font-size:1rem; letter-spacing:-1px; } .view_file .bstxt a{letter-spacing:-1px; margin: 3px 0 0; } .bbs_bottom dt{width:140px; padding:20px; font-size:1rem; letter-spacing:-1px;} .bbs_bottom dd{width:calc(100% - 140px); padding:20px; letter-spacing:-1px; } /********** �?��� �������� **********/ /********** �?��� �������� ver2 **********/ .bbs_view.ver2 {padding-top:60px;} .bbs_view.ver2 .basicCont {margin-top:60px;} .bbs_view.ver2 .bbsView_tit{padding:0 10% 40px;} .bbs_view.ver2 .bbsView_tit .subject{ font-size: 1.4rem; letter-spacing: -1.8px;} .bbs_view.ver2 .bbsView_tit .view_detail{margin:14px 0 0;} .bbs_view.ver2 .bbsView_tit .view_detail li { padding:0 20px 0 0; gap:8px } .bbs_view.ver2 .bbsView_tit .view_detail li:last-of-type {gap:4px;} .bbs_view.ver2 .view_content{padding:35px 0 45px;} .bbs_view.ver2 .view_content .link {margin-top:-10px; } .bbs_view.ver2 .view_content dl {padding:25px 0; } .bbs_view.ver2 .view_content dl dt {font-size: 1.1rem; letter-spacing: -1.1px; margin-bottom:5px;} .bbs_view.ver2 .view_content dl dd {font-size: 1rem; letter-spacing: -1px; } .bbs_view.ver2 .view_content dl dd br {display:none;} /********** �?��� �������� ver2 **********/ /********** ������ **********/ .tele_cont .basicCont {margin-top:0px; } .form_basic {max-width:775px; padding:0 5%; } .form_table{padding-top:0px;} .form_table dl{margin-bottom:4px;} .form_table dt{width: 120px; font-size:0.889rem; letter-spacing:-1px; padding:15px; } .form_table dt:before {height:calc(100% - 30px); margin-left: 5px;} .form_table dd{width: calc(100% - 120px); font-size:0.889rem; letter-spacing:-1px; padding:15px; } .form_table dd input {height:30px; padding:0 10px;} .form_table dd select {height:30px; padding:0 10px;} .form_table dd textarea { height:110px; padding: 0;} .form_table dd .sub_txt{font-size:0.889rem; letter-spacing:-1px; padding:5px 0 0;} .form_table dd span.hyp{width:15px; font-size:0.889rem; letter-spacing:-1px; } .form_table dd .select_num{width:calc((100% - 40px)/3);} .form_table dd .input_num{width:calc((100% - 40px)/3);} .form_table dd .norobot_img{ padding:7px 0 8px; height:30px; } .form_table dd .norobot_img img {height:30px;} .form_table dd .vcode{ width:calc(50% - 80px);} /********** ������ **********/ /********** �������� ���� **********/ .submit {padding: 30px 0 0;} .submit .privacy_agree {margin:10px 0 20px;} .submit .privacy_agree .textarea{font-size:0.938rem; padding: 15px ; } .submit .privacy_head{font-size:0.889rem; letter-spacing:-1px;} .submit .privacy_head .agree_checkbox{width:20px; height:20px; margin:-2px 7px 0 0;} .submit .privacy_head .checkbox_wrap{font-size:0.889rem; letter-spacing:-1px;} .submit .privacy_head .option{margin-left: 5px;} .submit .submit_btn a {width:160px; max-width:160px;padding:12px 20px;} .submit .submit_btn a em {font-size:0.889rem; letter-spacing:-1px;} .submit .submit_btn a span {line-height:30px; font-size:19px; } .submit .submit_btn a span:before {width:30px; height:30px; } /********** �������� ���� **********/ /********** ������ ver2 **********/ .form_basic.ver2 {max-width:100%; padding:0;} .form_basic.ver2 .form_table{width:100%;} .form_basic.ver2 .form_table dl{padding:13px 15px; padding-right:0; width:100%; } .form_basic.ver2 .form_table dt{ font-size:1rem; letter-spacing:-1.1px; } .form_basic.ver2 .form_table dd{font-size:0.889rem; letter-spacing:-1px; } .form_basic.ver2 .form_table dd input {height:40px; font-size:0.889rem; letter-spacing:-1px; max-width:100%; width:100%;} .form_basic.ver2 .form_table dd select {height:40px; font-size:0.889rem;letter-spacing:-1px; width:100%;} .form_basic.ver2 .form_table dd textarea {height:200px; font-size:0.889rem; letter-spacing:-1px; width:100%;} .form_basic.ver2 .form_table dd input::placeholder {font-size:0.889rem; letter-spacing:-1px;} .form_basic.ver2 .form_table dd .select_num{width:calc((100% - 40px)/3);} .form_basic.ver2 .form_table dd .input_num{width:calc((100% - 40px)/3);} .form_basic.ver2 .form_table dd .norobot_img{top: 2px; left: 2px} .form_basic.ver2 .form_table dl:first-of-type, .form_basic.ver2 .form_table dl:nth-of-type(2) {width:100%;} .form_basic.ver2 .form_table dl:first-of-type dd input, .form_basic.ver2 .form_table dl:nth-of-type(2) dd input {width:100%} .form_basic.ver2 .form_table dl:nth-of-type(2) dt {justify-content: flex-start;} .form_basic.ver2 .form_table dl:nth-of-type(3) dd span {font-size:0.889rem; letter-spacing:-1px; margin-left:0; margin-top:5px; } .form_basic.ver2 .form_table dl:nth-of-type(3) dd input {width:100%; max-width:100%;} .form_basic.ver2 .form_table dl:nth-of-type(4) dd {max-width:100%;} .form_basic.ver2 .form_table dl:nth-of-type(6) dd input {max-width:100%; width:100%;} .form_basic.ver2 .form_table dl:nth-of-type(7) { padding-left:0;} .form_basic.ver2 .form_table dl:nth-of-type(7) dd {width:100%;} /********** ������ ver2 **********/ /********** �������� ���� ver2 **********/ .form_basic.ver2 .submit {padding: 30px 0 0; } .form_basic.ver2 .submit .submit_btn {margin-top:20px;} /********** �������� ���� ver2 **********/ /********** �?� ��? **********/ .bbs_btn { padding-top:30px;} .bbs_btn a {max-width:160px; width:100%; height:55px; line-height:53px;} /********** �?� ��? **********/ /********** �?���?������ **********/ .member_cont .login_input.ver2 {margin-top:40px; } .member_cont .kakao_btn a {height:70px; line-height:68px; letter-spacing:-1.2px; font-size:1.1rem; } .member_cont .kakao_btn a p {padding-left:30px;} .member_cont .kakao_btn a p:before {top:4px; width:23px; height:20px;} .member_cont .mem_btn {margin-top:10px;} .member_cont .mem_btn a {height:70px; line-height:68px; border-radius:10px; letter-spacing:-1.2px; font-size:1.1rem; } .member_cont .login_input dd {margin-bottom:10px; letter-spacing:-1.2px; font-size:1.1rem; height:70px; line-height:68px; padding:25px;} .member_cont .login_input dd input::placeholder {letter-spacing:-1.2px; font-size:1.1rem; ;} .member_cont .login_input dt input {height:70px; line-height:68px; letter-spacing:-1.2px; font-size:1.1rem; margin-top:15px;} .member_cont .member_btn {gap:30px; margin-top:15px;} .member_cont .member_btn a:before { height:14px; right:-15px; top:8px;} .member_cont .join_input dd {margin-bottom:10px; } .member_cont .join_input dd p {margin-bottom:15px; } .member_cont .join_input dd input {letter-spacing:-1.2px; font-size:1.1rem; ; height:70px; line-height:68px; border-radius:10px; padding:25px; margin-bottom:10px;} .member_cont .join_input dd input::placeholder {letter-spacing:-1.2px; font-size:1.1rem; } .member_cont .join_input dt input {height:70px; line-height:68px; border-radius:10px; letter-spacing:-1.2px; font-size:1.1rem; margin-top:15px;} .member_cont .join_input dd a {height:70px; line-height:68px; letter-spacing:-1.2px; font-size:1.1rem; } .member_cont .agree_cont input[type='checkbox'] {width:18px; height:18px; } .member_cont .agree_cont {margin-top:50px;} .member_cont .agree_cont dt {padding-bottom:18px; font-size:0.889rem; letter-spacing:-0.07rem;} .member_cont .agree_cont dd:first-of-type {padding-top:15px; margin-bottom:5px; } .member_cont .agree_cont dd { font-size:0.889rem; letter-spacing:-0.07rem; gap:10px} .member_cont .agree_cont .join_btn {margin-top:30px;} .member_cont .agree_cont .join_btn a {height:70px; line-height:68px; letter-spacing:-0.088rem; font-size:1.1rem; } /********** �?���?������ **********/ /********** css ���� **********/ .other_cont {margin-top:60px;} .basicCont{padding:0 0 80px; } .compad{padding:80px 0; ;} .compad_t{padding:80px 0 0;} .compad_b{padding:0 0 80px; } .subpad{padding:80px 0;} .subpad_t{padding:80px 0 0; } .subpad_b{padding:0 0 80px;} .subpad.ver2 {padding:90px 0;} .subpad_t.ver2 {padding:90px 0 0; } .subpad_b.ver2 {padding:0 0 90px;} .subpad.ver3 {padding:70px 0;} .subpad_t.ver3 {padding:70px 0 0;} .subpad_b.ver3 {padding:0 0 70px } .padT70 {padding-top:50px; } /********** css ���� **********/ /********** ��? **********/ .num {width:40px; height:40px; font-size:1rem; line-height:40px;} .fs60 {font-size:2.222rem;} .fs24 {font-size:1.33rem; letter-spacing: -0.105rem; } .fs20 {font-size:1.11rem;} .fs18 {font-size:1rem;} .fs30 {font-size:1.66rem;} /********** ��? **********/ /********** ��?����� **********/ .dot_list > li, .dot_list > dd{padding:0 0 4px 10px;} .dot_list > li:before, .dot_list > dd:before {top:10px;} .dot_list2 > li:before, .dot_list2 > dd:before{top:11px;} /********** ��?����� **********/ .policy_cont{} .policy_cont p.cont_tit {font-size:1.2em !important; padding-bottom:5px;} .policy_cont .cont_txt {padding:0px 0px 25px 0; } .policy_cont .cont_txt2 {padding-bottom:25px;} .policy_cont .cont_box {padding:18px 18px; } .privacy_list {margin-bottom:30px;} .privacy_list li {width:100%; } } /******************************************************************************* @media 481~680px *******************************************************************************/ @media all and (max-width:680px){ /********** ����? **********/ .subtop{padding-top:63px;} .subtop .subtop_in {padding-top:0;} .subtop .visual_tit {margin-top:40px; font-size:2rem; text-align:center;} .subtop .visual_lnb dl dd {position:static;} .subtop .visual_lnb dl dd .dlst {width:100%; left:0; top:43px; margin-top:0; padding:15px; border-left:0; border-right:0;} .subtop .visual_lnb dl dd:last-of-type .dlst {transform:translateX(0);} .subtop .visual_lnb dl dd.one .dlst {transform:translateX(0);} /* .subtop .visual_lnb dl dt{margin-right:10px; } .subtop .visual_lnb dl dt .home {display:flex; align-items:center; justify-content:center;} .subtop .visual_lnb dl dt .home svg {width:15px; height:15px;} .subtop .visual_lnb dl dd{padding: 0 25px 0 10px;} .subtop .visual_lnb dl dd:before{height: 14px; margin-top: -7px;} .subtop .visual_lnb dl dd > a{font-size:0.889rem; letter-spacing: -0.07rem; } .subtop .visual_lnb dl dd > a:after{width: 16px; height: 16px; line-height: 16px; font-size:14px; right:-20px; margin-top: -7px;} .subtop .visual_lnb dl dd .dlst{margin: 4px 0 0; min-width: 90px; padding:8px;} .subtop .visual_lnb dl dd .dlst ul li{padding: 0 0 3px;} */ .subtop .visual_lnb {width:100%; } .subtop .visual_lnb dt {display:none;} .subtop .visual_lnb dl dd {width:50%;border-top:1px solid var(--border); border-bottom:1px solid var(--border); box-sizing:border-box;} .subtop .visual_lnb dl dd:last-of-type {border-left:1px solid var(--border);} .subtop .visual_lnb dl dd:before {display:none;} .subtop .visual_lnb dl dd.one{width:100%; border-left:0} .subtop .visual_lnb dl dd > a {position:relative; display:block; padding:10px 20px 10px 15px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; width:100%; font-size:0.9333rem;} .subtop .visual_lnb dl dd > a::after {position:absolute; top:50%; right:15px; margin-top:-8px;} .subtop .subtop_img {height: auto; margin:30px 0 60px; } .subtop .tit_area {padding:60px 5%; position:unset; transform:unset;} .subtop .tit_area span { font-size:12px; letter-spacing:0.4px; line-height:128.571%; } .subtop .tit_area h3{font-size:1.777rem; margin:14px 0;} .subtop .tit_area p {font-size:1rem; letter-spacing:-1.0px; } .subtop .tit_area p br {display:none;} /********** ����? **********/ /********** ��?�� �?� ��� ���� � **********/ .subtop.two .subtop_img {margin:30px 0 0; padding:60px 0 170px; } .subtop.two .people {width:100%; height:365px; -webkit-mask-image:linear-gradient(to bottom, #000 60%, transparent 100%, transparent 100%);} .subtop.two .people img {height:366px;} .subtop.two .tit_area {transform:translateY(0); width:100%; text-align:center; margin:-130px 0 0;} .subtop.two .tit_area .quote {font-size: 1.2rem;} .subtop.two .tit_area .quote:before {padding-right:3px; } .subtop.two .tit_area h3{font-size:1.666rem; margin:10px 0 12px;} .subtop.two .tit_area p {font-size:1rem; letter-spacing:-1.0px;} .subtop.two .tit_area h3 span {margin-left:6px; font-size:1.2rem; letter-spacing:-1.9px; } .subtop.two .tit_area ul:first-of-type {padding-top:0; border-top:0;} .subtop.two .tit_area ul:last-of-type {padding-top:15px; flex-wrap: wrap; width:100%; justify-content:center; } .subtop.two .tit_area ul:last-of-type li {padding:0 20px 0 18px; } .subtop.two .tit_area ul:last-of-type li:before {top:1px; font-size:1rem; color:var(--white); } /********** ��?�� �?� ��� ���� � **********/ /********** �?����� ��� ���� � **********/ .subtop.three .subtop_img {margin:30px 0 0; padding:60px 5% 0;} .subtop.three .self_wrap {flex-wrap:wrap;} .subtop.three .self_wrap .tit_area{width:100%; margin-right:0; margin-bottom:20px;} .subtop.three .self_wrap .tit_area .self_list {margin-top:15px;} .subtop.three .self_wrap .tit_area .self_list li {padding-left:36px; margin-bottom:8px; } .subtop.three .self_wrap .tit_area .self_list li:before {width:25px; height:25px; line-height:25px; font-size:16px; } .subtop.three .self_wrap .tit_area .link_list {margin-top:20px; gap:3px;} .subtop.three .self_wrap .tit_area .link_list a {width:150px; max-width:150px; padding:10px 15px; } .subtop.three .self_wrap .tit_area .link_list a em {font-size:0.889rem; letter-spacing:-1px;} .subtop.three .self_wrap .tit_area .link_list a span {line-height:25px; font-size:16px;} .subtop.three .self_wrap .tit_area .link_list a span:before {width:25px; height:25px; } .subtop.three .self_wrap .tit_area .link_list a.store em {font-size:12px; letter-spacing:0.7px;} .subtop.three .self_wrap .tit_area .link_list a.store span img {width:14px; height:14px;} .subtop.three .self_wrap .img_area{max-width:80%; width:100%; margin:0 auto} .subtop.three .self_wrap .img_area img {position:unset;} /********** �?����� ��� ���� � **********/ /********** 2�� **********/ .basic_style .tit_area{ padding:0 0 20px 0;} .basic_style .tit_area .tit_sticky .cate_tab {margin-top:0;} .basic_style .tit_area .tit_sticky .cate_tab ul li {margin:0 20px 0 0; } /********** 2�� **********/ /********** ?�?��� **********/ .cate_tit {flex-direction:column; align-items: flex-start; margin-bottom:30px;} .cate_tab {margin-top:20px;} .cate_tab ul li{margin:0 20px 0 0;} .cate_tab ul li a{font-size:1rem; letter-spacing: -1px; } .cate_tab ul li a:after{bottom:-3px; height:2px } /********** ?�?��� **********/ /********** �?��� **********/ .bbs_search {padding:15px 0 0; } .bbs_search dl{gap:3px} .bbs_search dt {width: 100px;} .bbs_search dt select{width:100%; height:40px !important; padding:0 12px; } .bbs_search dd{width:calc(100% - 100px); } .bbs_search dd .search_input {font-size:0.889rem; padding:0 12px; font-family:inherit; height:40px; line-height:43px; width:calc(100% - 40px); } .bbs_search dd .bbs_s_b {width:40px; height:40px; margin-left:3px;} .bbs_search dd .bbs_s_b span{font-size:20px; } /********** �?��� **********/ /********** ���� �?��� **********/ .news_cont .news_list {gap:10px;} .news_cont .news_list dl {width:100% } .news_cont .news_list dl dt img {max-width:100%; width:100%;} .news_cont .news_list dl dd {padding:15px 15px 20px;} .news_cont .news_list dl dd .fs20 {margin-bottom:2px;} /********** ���� �?��� **********/ /********** �������� �?��� **********/ .info_cont .statutory_list dl {padding:12px 0;} .info_cont .statutory_list dl:first-of-type {padding:12px 0 15px;} .info_cont .statutory_list dl dt {margin-bottom:6px;} .info_cont .statutory_list dl dd ul {flex-wrap:wrap;} .info_cont .statutory_list dl dd ul li {margin-right:16px; font-size:13px;} .info_cont .statutory_list dl dd ul li b {margin-right:4px; ;} .info_cont .page_num {padding: 20px 0 0;} /********** �������� �?��� **********/ /********** FAQ **********/ .faq_list dl{ margin-bottom:3px; } .faq_list dl .faq_tit{width:25px; height:25px; line-height:25px; font-size:1em; left:16px; letter-spacing:0.3px; } .faq_list dl .faq_tit.q{top:14px;} .faq_list dl .faq_tit.a{top:15px;} .faq_list dl dt{font-size:1rem; letter-spacing: -1px; padding:15px 50px;} .faq_list dl dt:after{width:19px; height:19px; line-height:19px; font-size:19px; right:20px; margin-top:-8px; } .faq_list dl dd{padding:15px 50px; font-size:1rem; letter-spacing: -1px; } /********** FAQ **********/ /********** �?��� �������� **********/ .bbs_view { padding-top:40px;} .bbs_view .basicCont {margin-top:40px;} .bbsView_tit{ padding:0 5% 20px;} .bbsView_tit .subject{font-size:1.3rem; letter-spacing:-2.2px; } .bbsView_tit .view_detail{margin:10px 0 0; } .bbsView_tit .view_detail li{padding:0 17px 0 0; gap:3px } .bbsView_tit .view_detail li:after{height:12px; right:8px; top:50%; margin-top:-4px;} .bbsView_tit .view_detail li span {font-size:16px;} .view_content{padding:30px 0 20px; ;} .view_content .link { margin-top:30px; } .view_content .link li a {width:30px; height:30px; margin-left:5px; } .view_content .link li.fb a:before {width:22px; height:22px;} .view_content .link li.in a:before {width:13px; height:13px;} .view_content .link li.con a:before {width:18px; height:18px;} .view_content .link li.tw a:before {width:15px; height:14px;} .answer_content {padding:20px 0; margin:30px 0 0;} .view_file{margin:30px 0 0; padding:12px 16px; } .view_file .btit{width:100px; letter-spacing:-1.26px; } .view_file .btit span{font-size:16px; line-height: 16px; margin:-2px 3px 0 0;} .view_file .bstxt{width:calc(100% - 100px); font-size:1rem; letter-spacing:-1px; } .view_file .bstxt a{letter-spacing:-1px; margin: 3px 0 0; } .bbs_bottom dt{width:100px; padding:16px; font-size:1rem; letter-spacing:-1px;} .bbs_bottom dd{width:calc(100% - 100px); padding:16px; letter-spacing:-1px; } .bbs_bottom dt .arrow {font-size:16px;} /********** �?��� �������� **********/ /********** �?��� �������� ver2 **********/ .bbs_view.ver2 {padding-top:40px;} .bbs_view.ver2 .basicCont {margin-top:40px;} .bbs_view.ver2 .bbsView_tit{padding:0 5% 20px;} .bbs_view.ver2 .bbsView_tit .subject{ font-size: 1.2rem; letter-spacing: -1.6px;} .bbs_view.ver2 .bbsView_tit .view_detail{margin:10px 0 0;} .bbs_view.ver2 .bbsView_tit .view_detail li { padding:0 10px 0 0; gap:4px } .bbs_view.ver2 .bbsView_tit .view_detail li:last-of-type {gap:2px;} .bbs_view.ver2 .view_content{padding:20px 0 30px;} .bbs_view.ver2 .view_content .link {margin-top:-10px; } .bbs_view.ver2 .view_content dl {padding:15px 0; } .bbs_view.ver2 .view_content dl dt {font-size: 1.06rem; letter-spacing: -1.02px; margin-bottom:3px;} .bbs_view.ver2 .view_content dl dd {font-size: 1rem; letter-spacing: -1px; } /********** �?��� �������� ver2 **********/ /********** �?� ��? **********/ .bbs_btn { padding-top:20px;} .bbs_btn a {max-width:100px; width:100%; height:40px; line-height:38px;} .bbs_con thead {display:none; } .bbs_con .pc_line{display:none !important;} .bbs_con .mo_line{display:block; width:100%; text-align:left;} /********** �?� ��? **********/ /********** �? �?��� ����� **********/ .bbs_con .mo_line ul li {display:inline; margin-bottom:5px; font-size:13px; letter-spacing:-0.9px;} .bbs_con .mo_line ul li .material-symbols-outlined {} .bbs_con .mo_line ul li:last-of-type {margin-bottom:0; width:100%; display:flex; margin-top:6px;} .bbs_con .mo_line ul li:first-of-type {width:100%; display:flex; align-items:center;} .bbs_con .mo_line span { font-size:18px; margin-left:3px; color:var(--sub); } .bbs_con .mo_line .state {width:100%; font-weight:500; font-size:0.889rem; letter-spacing:-0.07rem; color:var(--main); margin-left:0px; text-align:center;} .board_cont .bbs_btn {position:unset; padding-top:20px; } .board_cont .bbs_btn a {font-size:0.889rem; letter-spacing:-1px; max-width:100px; height: 35px; line-height: 33px;} /********** �? �?��� ����� **********/ /********** ������ **********/ .tele_cont .basicCont {margin-top:-0px; } .form_basic {max-width:775px; padding:0 5%; } .form_table{padding-top:0px;} .form_table dl{margin-bottom:4px;} .form_table dt{width: 100%; font-size:0.889rem; letter-spacing:-0.9px; padding:8px 12px; padding-bottom:0; } .form_table dt:before {display:none;} .form_table dd{width: 100%; font-size:0.889rem; letter-spacing:-0.9px; padding:8px 12px; padding-top:0;} .form_table dd input {height:30px; padding:0 5px; width:100%;} .form_table dd select {height:30px; padding:0 5px;} .form_table dd textarea { height:60px;} .form_table dd .sub_txt{font-size:0.889rem; letter-spacing:-0.9px; padding:5px 0 0;} .form_table dd span.hyp{width:15px; font-size:0.889rem; letter-spacing:-0.9px; } .form_table dd .select_num{width:calc((100% - 40px)/3);} .form_table dd .input_num{width:calc((100% - 40px)/3);} .form_table dd .norobot_img{ padding:7px 0 8px; height:30px; } .form_table dd .norobot_img img {height:30px;} .form_table dd .vcode{ width:calc(50% - 80px);} /********** ������ **********/ /********** �������� ���� **********/ .submit {padding:15px 0 0; flex-direction:column; justify-content:center; gap:10px;} .submit .privacy_agree {margin:0px 0 8px;} .submit .privacy_agree .textarea{font-size:0.938rem; padding: 10px ; } .submit .privacy_head{font-size:0.889rem; letter-spacing:-0.9px; text-align:center;} .submit .privacy_head .agree_checkbox{width:20px; height:20px; margin:-2px 7px 0 0;} .submit .privacy_head .checkbox_wrap{font-size:0.889rem; letter-spacing:-0.9px;} .submit .privacy_head .option{margin-left: 5px;} .submit .privacy_head .agree_checkbox input[type='checkbox'] {width:14px; height:14px; } .submit .submit_btn {margin:0 auto} .submit .submit_btn a {width:120px; max-width:120px;padding:8px 15px;} .submit .submit_btn a em {font-size:0.889rem; letter-spacing:-0.9px;} .submit .submit_btn a span {line-height:25px; font-size:16px; } .submit .submit_btn a span:before {width:25px; height:25px; } /********** �������� ���� **********/ /********** ������ ver2 **********/ .form_basic.ver2 {max-width:100%; padding:0;} .form_basic.ver2 .form_table{width:100%;} .form_basic.ver2 .form_table dl{padding:10px 0; padding-right:0; width:100%; } .form_basic.ver2 .form_table dt{ font-size:1rem; letter-spacing:-1.1px; margin-bottom:3px;} .form_basic.ver2 .form_table dd{font-size:0.889rem; letter-spacing:-1px; } .form_basic.ver2 .form_table dd input {height:35px; font-size:0.889rem; letter-spacing:-1px; max-width:100%; width:100%;} .form_basic.ver2 .form_table dd select {height:35px; font-size:0.889rem;letter-spacing:-1px; width:100%; padding:0 10px;} .form_basic.ver2 .form_table dd textarea {height:150px; font-size:0.889rem; letter-spacing:-1px; width:100%;} .form_basic.ver2 .form_table dd input::placeholder {font-size:0.889rem; letter-spacing:-1px;} .form_basic.ver2 .form_table dd .select_num{width:calc((100% - 40px)/3);} .form_basic.ver2 .form_table dd .input_num{width:calc((100% - 40px)/3);} .form_basic.ver2 .form_table dd .norobot_img{top: 2px; left: 4px; height:26px; padding: 5px 0 6px;} .form_basic.ver2 .form_table dd .norobot_img img {height:26px;} .form_basic.ver2 .form_table dd .input.vcode{padding-left:75px;} .form_basic.ver2 .form_table dl:first-of-type, .form_basic.ver2 .form_table dl:nth-of-type(2) {width:100%;} .form_basic.ver2 .form_table dl:first-of-type dd input, .form_basic.ver2 .form_table dl:nth-of-type(2) dd input {width:100%} .form_basic.ver2 .form_table dl:nth-of-type(2) dt {justify-content: flex-start;} .form_basic.ver2 .form_table dl:nth-of-type(3) dd span {font-size:0.889rem; letter-spacing:-1px; margin-left:0; margin-top:3px; } /********** ������ ver2 **********/ /********** �������� ���� ver2 **********/ .form_basic.ver2 .submit {padding: 20px 0 0; gap: 0;} .form_basic.ver2 .submit .submit_btn {margin: 0 auto; margin-top:10px;} .form_basic.ver2 .submit .privacy_agree {margin:5px 0 8px;} /********** �������� ���� ver2 **********/ /********** �?���?������ **********/ .member_cont .login_input.ver2 {margin-top:30px; } .member_cont .kakao_btn a {height:60px; line-height:58px; letter-spacing:-1px; font-size:1.1rem; } .member_cont .kakao_btn a p {padding-left:22px;} .member_cont .kakao_btn a p:before {top:5px; width:18px; height:15px;} .member_cont .mem_btn {margin-top:10px;} .member_cont .mem_btn a {height:60px; line-height:58px; border-radius:10px; letter-spacing:-1px; font-size:1.1rem; } .member_cont .login_input dd {margin-bottom:10px; letter-spacing:-1px; font-size:1.1rem; height:60px; line-height:58px; padding:20px;} .member_cont .login_input dd input::placeholder {letter-spacing:-1px; font-size:1.1rem; ;} .member_cont .login_input dt input {height:60px; line-height:58px; letter-spacing:-1px; font-size:1.1rem; margin-top:12px;} .member_cont .member_btn {gap:20px; margin-top:10px;} .member_cont .member_btn a:before { height:10px; right:-10px; top:8px;} .member_cont .join_input dd {margin-bottom:8px; } .member_cont .join_input dd p {margin-bottom:10px; } .member_cont .join_input dd input {letter-spacing:-1px; font-size:1.1rem; ; height:60px; line-height:58px; border-radius:10px; padding:20px; margin-bottom:8px;} .member_cont .join_input dd input::placeholder {letter-spacing:-1px; font-size:1.1rem; } .member_cont .join_input dt input {height:60px; line-height:58px; border-radius:10px; letter-spacing:-1px; font-size:1.1rem; margin-top:12px;} .member_cont .join_input dd a {height:60px; line-height:58px; letter-spacing:-1px; font-size:1.1rem; } .member_cont .agree_cont {margin-top:30px;} .member_cont .agree_cont dt {padding-bottom:10px; font-size:0.889rem; letter-spacing:-0.9px;} .member_cont .agree_cont dd:first-of-type {padding-top:13px; margin-bottom:5px; } .member_cont .agree_cont dd { font-size:0.889rem; letter-spacing:-0.9px; gap:6px} .member_cont .agree_cont input[type='checkbox'] {width:14px; height:14px; } .member_cont .agree_cont .join_btn {margin-top:20px;} .member_cont .agree_cont .join_btn a {height:60px; line-height:58px; letter-spacing:-1px; font-size:1.1rem; } /********** �?���?������ **********/ /********** css ���� **********/ .other_cont {margin-top:30px;} .basicCont{padding:0 0 70px; } .subpad{padding:60px 0;} .subpad_t{padding:60px 0 0; } .subpad_b{padding:0 0 60px;} .subpad.ver2 {padding:70px 0;} .subpad_t.ver2 {padding:70px 0 0; } .subpad_b.ver2 {padding:0 0 70px;} .subpad.ver3 {padding:35px 0;} .subpad_t.ver3 {padding:35px 0 0;} .subpad_b.ver3 {padding:0 0 35px } .padT70 {padding-top:30px; } /********** css ���� **********/ /********** ��? **********/ .num {width:33px; height:33px; font-size:13px; line-height:33px;} .fs60 {font-size:1.666rem; letter-spacing:-0.2rem;} .fs24 {font-size:1.3rem;} .fs20 {font-size:1.1rem;} .fs18 {font-size:1rem;} .fs30 {font-size:1.3rem;} /********** ��? **********/ /********** ��?����� **********/ .dot_list > li, .dot_list > dd{padding:0 0 4px 8px;} .dot_list > li:before, .dot_list > dd:before{top:9px;} .dot_list2 > li:before, .dot_list2 > dd:before{top:11px;} /********** ��?����� **********/ } /******************************************************************************* @media ~480px *******************************************************************************/ @media all and (max-width:480px){ /********** ��?�� �?� ��� ���� � **********/ /* .subtop.two .subtop_img {margin:40px 0 0; padding:100px 0 200px; } .subtop.two .tit_area {width: 58%;} .subtop.two .tit_area .quote {font-size: 1.05rem; letter-spacing: -0.088rem; } .subtop.two .tit_area .quote:before {padding-right:3px; } .subtop.two .tit_area h3{font-size:1.8rem; letter-spacing: -2.7px; margin:8px 0 10px;} .subtop.two .tit_area p {font-size:1rem; letter-spacing:-1.0px;} .subtop.two .tit_area h3 span {margin-left:6px; font-size:1.05rem; letter-spacing:-0.088rem; } .subtop.two .tit_area ul:first-of-type {padding-top:16px; } .subtop.two .tit_area ul:last-of-type {padding-top:22px; flex-wrap: wrap} .subtop.two .tit_area ul:last-of-type li {padding:0 15px 0 18px; } .subtop.two .tit_area ul:last-of-type li:before {top:1px; font-size:1rem; color:var(--white); } */ /********** ��?�� �?� ��� ���� � **********/ /********** �������� �?��� **********/ .info_cont .statutory_list dl {padding:12px 0;} .info_cont .statutory_list dl:first-of-type {padding:13px 0 15px;} .info_cont .statutory_list dl dd ul {flex-wrap:wrap;} .info_cont .statutory_list dl dd ul li {margin-right:16px; width:100%;} .info_cont .statutory_list dl dd ul li b {margin-right:4px; ;} .info_cont .page_num {padding: 20px 0 0;} /********** �������� �?��� **********/ } /******************************************************************************* @media ~360px *******************************************************************************/ @media all and (max-width:360px){ .submit .privacy_head .option {display:block !important; margin:0 auto !important; text-align:center !important;} .agree_con .privacy_agree .textarea{top: 58px; } .form_basic.ver2 .agree_con .privacy_agree .textarea{top:60px; ;} } /* =================================================================== EN overrides for /en (append this block at the very end of sub.css) 목적: 영문 페이지 가독성/줄바꿈/자간/버튼 정렬/브랜드 표기 개선 적용 조건: 가 설정되어 있어야 함 =================================================================== */ /* 1) 기본 타이포 수정: 자간/행간/단어 단위 줄바꿈 */ html[lang="en"] body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: 0.2px; /* 전체 자간 살짝 벌림 */ word-spacing: 0.02em; line-height: 1.58; } /* 2) 한국어 스타일의 과도한 음수 letter-spacing 상쇄 */ html[lang="en"] .fs60, html[lang="en"] .fs30, html[lang="en"] .fs24, html[lang="en"] .fs20, html[lang="en"] .fs18, html[lang="en"] .fs16, html[lang="en"] .bbs_con th, html[lang="en"] .bbs_con td, html[lang="en"] .bbsView_tit .subject, html[lang="en"] .bbsView_tit .view_detail li, html[lang="en"] .view_content *, html[lang="en"] .dot_list > li, html[lang="en"] .dot_list > dd { letter-spacing: -0.2px !important; } /* 3) 문단/리스트: 좌측 정렬 + 단어 기준 줄바꿈 */ html[lang="en"] .location_cont p, html[lang="en"] .location_cont li, html[lang="en"] .location_cont dd, html[lang="en"] .location_cont dt, html[lang="en"] .location_cont .map-desc, html[lang="en"] .info_area p, html[lang="en"] .info_area li, html[lang="en"] .info_area dd, html[lang="en"] .info_area dt, html[lang="en"] .view_content, html[lang="en"] .policy_cont { text-align: left; white-space: normal; word-break: normal; /* 단어 쪼개지 않도록 */ overflow-wrap: anywhere; /* 너무 긴 URL/이메일만 안전 줄바꿈 */ hyphens: auto; /* 영어 자동 하이픈 */ } /* 4) 버튼/링크: 영어 톤 */ html[lang="en"] a{ text-underline-offset: 2px; } html[lang="en"] .loca_btn a, html[lang="en"] .btn, html[lang="en"] .button, html[lang="en"] .nav a{ text-decoration: none; /* 버튼류는 밑줄 제거 */ } /* 5) LOCATION 페이지 – Google 버튼 정렬/너비 이슈 해결 */ html[lang="en"] .loca_btn{ display: flex; align-items: center; /* 세로 가운데 정렬 */ gap: 12px; flex-wrap: wrap; } /* 공통 버튼 높이 통일 */ html[lang="en"] .loca_btn a{ display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 16px; border-radius: 9999px; border: 1px solid #dadce0; box-shadow: 0 1px 3px rgba(60,64,67,.15); font: 600 14px/1 'Inter','Noto Sans KR',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; } /* Google 버튼: 가로 과도 확장 방지 + 아이콘/텍스트 정렬 */ html[lang="en"] .loca_btn .google a{ background: #fff; color: #1a73e8; gap: 6px; white-space: nowrap; /* 한 줄 유지 */ max-width: 220px; /* 과도한 확장 방지 */ overflow: hidden; text-overflow: ellipsis; } /* SVG 아이콘은 고정폭 */ html[lang="en"] .loca_btn .google a svg{ width: 18px; height: 18px; flex: 0 0 auto; } /* Print 버튼 톤 맞춤 */ html[lang="en"] .loca_btn .print a{ background: #f8f9fa; color: #3c4043; } /* 작은 화면에서 Google 버튼 텍스트만 남기고 아이콘 숨김(너비 확보) */ @media (max-width: 420px){ html[lang="en"] .loca_btn .google a{ max-width: 180px; } html[lang="en"] .loca_btn .google a svg{ display:none; } } /* 6) 지도 오버레이 카드: 가독성 보정 */ html[lang="en"] .map-card{ line-height: 1.55; letter-spacing: 0.2px; } /* 7) D A Legal Group 균등 간격 표기 유틸 사용: D A Legal Group */ html[lang="en"] .brand-spaced{ letter-spacing: 0.18em; } /* 8) 이메일/전화 줄바꿈 정책 – 긴 문자열만 안전 줄바꿈 */ html[lang="en"] .location_info .mail a, html[lang="en"] .location_info .call a{ overflow-wrap: anywhere; word-break: normal; } /* 9) 영문 페이지에서 ‘비영문 전용 링크’를 숨기고 싶을 때 쓸 유틸 - 래퍼에 .en-hide-non-en 추가 후 내부 a 중 /en/ 없는 링크 숨김 */ html[lang="en"] .en-hide-non-en a:not([href*="/en/"]){ display:none !important; } ㄴ /* 10) 우측 ‘case search’ 같은 사이드 모듈에 적용하려면 해당 래퍼에 .case-search.en-only 부여 권장 */ html[lang="en"] .case-search.en-only a:not([href*="/en/"]){ display:none !important; } /* 11) 영문 페이지에서 과도한 자간이 필요한 특정 타이틀만 별도 보정(선택) 필요 시 사용: class="eng-tight" */ html[lang="en"] .eng-tight{ letter-spacing: 0; } /* 12) 리스트 가독성 */ html[lang="en"] .dot_list li{ margin: 6px 0; line-height: 1.6; } /* 13) 브레이크 강제요소 .brfix: 데스크톱 숨김, 모바일 노출 */ .brfix{ display:none; } @media (max-width:768px){ .brfix{ display:inline; } } /* =========================================== EN-only footer typography fix (append last) =========================================== */ html[lang="en"] .footer .w1350 ul, html[lang="en"] .footer .w1350 .foot_bottom .info_wrap { text-align: left; /* 영어는 좌측 정렬 */ } html[lang="en"] .footer .w1350 ul li, html[lang="en"] .footer .w1350 ul li a, html[lang="en"] .footer .w1350 ul.info li a, html[lang="en"] .footer .w1350 ul.copyright li, html[lang="en"] .footer .w1350 ul.copyright span, html[lang="en"] .footer .w1350 ul.copyright span a { /* 모든 브레이크포인트의 음수 자간 덮어쓰기 */ letter-spacing: 0.1px !important; word-spacing: 0.02em; line-height: 1.58; white-space: normal; word-break: normal; overflow-wrap: break-word; hyphens: auto; } /* 퀵 링크/연락처 리스트도 동일 보정 */ html[lang="en"] .footer .w1350 :is(ul.page_list, ul.info, ul.contact, ul.quick, ul.copyright) li { white-space: normal; word-break: normal; overflow-wrap: break-word; } /* 작은 화면에서도 동일하게 유지 */ @media (max-width: 680px) { html[lang="en"] .footer .w1350 ul li, html[lang="en"] .footer .w1350 ul li a { line-height: 1.55; letter-spacing: 0.08px !important; } } /* ============================================ /en 전용 — .tit_area 타이포 개선 (정렬 영향 없음) ============================================ */ html[lang="en"] .subtop .tit_area{ /* 필요 시 값만 살짝 조절해서 전체 톤을 맞출 수 있게 변수화 */ --lh-title: 1.32; --ls-title: 0.001em; --ws-title: 0.02em; --lh-body: 1.56; --ls-body: 0.003em; --ws-body: 0.018em; } /* 제목(예: CONTACT US) — 정렬은 기존값 유지 */ html[lang="en"] .subtop .tit_area :is(h1,h2,h3,h4,.fs60,.fs30){ text-wrap: balance; /* 줄바꿈 균형 */ white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: auto; line-height: var(--lh-title) !important; letter-spacing: var(--ls-title) !important; /* 자간 살짝 풀기 */ word-spacing: var(--ws-title) !important; /* 단어 간격 여유 */ } /* 부제/문단(예: We help …) — 정렬은 기존값 유지 */ html[lang="en"] .subtop .tit_area :is(p,small,span,a,em,strong){ white-space: normal !important; /* 우발적 nowrap 해제 */ word-break: normal !important; /* 글자 단위 쪼개기 금지 */ overflow-wrap: break-word !important; /* 긴 단어는 경계에서 개행 */ hyphens: auto; text-wrap: pretty; /* 보기 좋은 개행 */ line-height: var(--lh-body) !important; letter-spacing: var(--ls-body) !important; word-spacing: var(--ws-body) !important; } /* 반응형 미세 조정 */ @media (max-width: 980px){ html[lang="en"] .subtop .tit_area{ --lh-title: 1.28; --ls-title: 0.0025em; --lh-body: 1.52; --ls-body: 0.0028em; } } @media (max-width: 680px){ html[lang="en"] .subtop .tit_area{ --lh-title: 1.26; --ls-title: 0.0022em; --lh-body: 1.5; --ls-body: 0.0025em; } } /* html[lang="en"] .subtop .tit_area p.white{ display:inline-block; text-align:left !important; margin-inline:auto; white-space:normal; word-break:normal; overflow-wrap:break-word; hyphens:auto; line-height:1.6; letter-spacing:.0035em; word-spacing:.02em; } html[lang="en"] .subtop .tit_area h3 { white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; text-wrap: balance; max-width: 860px; margin-inline: auto; line-height: 1.1 !important; letter-spacing: 0.002em !important; word-spacing: 0.01em !important; } */