/* 레이어 팝업 */ #layer-pop { display:none; position:fixed; width:100%; height:100%; z-index:100000; top:0; } #layer-pop.active { display:block; } #layer-pop .bg { position:fixed; display:block; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.7; filter:alpha(opacity=70); } #layer-pop .layer-box { position:absolute; left:50%; top:50%; box-shadow:0 0 10px rgba(0, 0, 0, 0.5); background:#FFF; z-index:100001; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .layer-box .close { position:absolute; width:15px; height:15px; right:14px; top:14px; cursor:pointer; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .layer-box .close .line { height:1px; background:#B2B2B2; padding:0; } #layer-pop .layer-box .close .line:nth-child(1) { width:15px; transform: rotate(45deg) translate(5px, 5px); } #layer-pop .layer-box .close .line:nth-child(2) { width:15px; transform: rotate(-45deg) translate(-4.5px, 4px); } #layer-pop dl { border-radius:8px; border-top:4px solid #EBA243; padding:30px 0 25px; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop dt { float:left; width:100%; font:700 50px 'rajdhani'; text-align:center; letter-spacing:-0.02em; padding-bottom:5px; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop dd { float:left; width:100%; text-align:center; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } @media all and (max-width:880px) { #layer-pop .layer-box .close { right:14px; top:14px; } #layer-pop dl { border-radius:6px; padding:25px 0 20px; } #layer-pop dt { font-size:45px; padding-bottom:5px; } } @media all and (max-width:630px) { #layer-pop dl { padding:20px 0 20px;} #layer-pop dt { font-size:40px; padding-bottom:3px; } } @media all and (max-width:505px) { #layer-pop dl { padding:20px 0; } #layer-pop dt { font-size:35px; } } @media all and (max-width:420px) { #layer-pop dl { padding:15px 0 20px;} #layer-pop dt { font-size:30px; } } #layer-pop .reset-password { display:none; width:400px; margin-left:-200px; margin-top:-220px; } #layer-pop .reset-password.active { display:block; } /* #layer-pop .reset-password dt { background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0NSA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDUgNDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMzMzMzMzM7fQ0KPC9zdHlsZT4NCjxnPg0KCTxnPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDQuOCwyMGMwLDIuNy0wLjUsNS4zLTEuNiw3LjhjLTEsMi40LTIuNCw0LjUtNC4zLDYuNGMtMS44LDEuOC00LDMuMy02LjQsNC4zYy0yLjUsMS01LjEsMS42LTcuOCwxLjZIMA0KCQkJbDAuNS0yLjVjMC0wLjEsMC42LTIuOCwxLjgtNi40YzAuNy0yLjEsMS42LTQuMiwyLjUtNmMwLjktMS45LDEuOS0zLjYsMi45LTUuMWMtMS0xLjUtMi0zLjItMi45LTUuMUMzLjksMTMsMy4xLDExLDIuMyw4LjkNCgkJCUMxLjEsNS4zLDAuNSwyLjYsMC41LDIuNUwwLDBoMjQuOGMyLjcsMCw1LjMsMC41LDcuOCwxLjZjMi40LDEsNC41LDIuNCw2LjQsNC4zYzEuOCwxLjgsMy4zLDQsNC4zLDYuNA0KCQkJQzQ0LjMsMTQuNyw0NC44LDE3LjMsNDQuOCwyMHogTTUuMiwzNS45aDE5LjZjOC43LDAsMTUuOS03LjEsMTUuOS0xNS45YzAtNC4yLTEuNy04LjItNC42LTExLjJjLTMtMy03LTQuNi0xMS4yLTQuNkg1LjINCgkJCWMwLjMsMSwwLjYsMi4xLDEuMSwzLjVjMC45LDIuNSwyLjIsNS44LDQuMSw4LjljMS40LTEuNSwyLjktMi44LDQuNC0zLjhjMi43LTEuNyw1LjYtMi41LDguNy0yLjVjMS4zLDAsMi42LDAuMywzLjgsMC44DQoJCQljMS4yLDAuNSwyLjIsMS4yLDMuMSwyLjFjMC45LDAuOSwxLjYsMS45LDIuMSwzLjFjMC41LDEuMiwwLjgsMi41LDAuOCwzLjhjMCwxLjMtMC4zLDIuNi0wLjgsMy44Yy0wLjUsMS4yLTEuMiwyLjItMi4xLDMuMQ0KCQkJYy0wLjksMC45LTEuOSwxLjYtMy4xLDIuMWMtMS4yLDAuNS0yLjUsMC44LTMuOCwwLjhjLTMuMSwwLTYtMC44LTguNy0yLjVjLTEuNS0xLTMtMi4yLTQuNC0zLjhDNy43LDI3LjksNiwzMi45LDUuMiwzNS45eg0KCQkJIE0xMi45LDIwYzMuMSwzLjcsNi43LDUuNiwxMC42LDUuNmwwLDBjMy4xLDAsNS42LTIuNSw1LjYtNS42YzAtMy4xLTIuNS01LjYtNS42LTUuNkMxOS41LDE0LjQsMTYsMTYuMywxMi45LDIweiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K") center 0 no-repeat; background-size:90px 90px; padding-top:75px; } */ #layer-pop .reset-password dt span { font:500 22px 'nts'; } #layer-pop .reset-password ul { float:left; width:100%; background:#F3F1F0; padding:25px 10% 30px; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .reset-password li { position:relative; float:left; width:100%; font:500 16px 'rajdhani'; color:#222; letter-spacing:-0.03em; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .reset-password li:nth-child(1) { border-bottom:1px solid #DAD6D2; padding:0 0 7px; } #layer-pop .reset-password li:nth-child(2) { padding-top:15px; } #layer-pop .reset-password li input { width:100%; height:45px; font:400 14px 'nts'; color:#AAA; vertical-align:middle; border-radius:5px; border:0; outline:0; box-shadow:0 0 4px rgba(0, 0, 0, 0.15); background:#FFF; padding:0 10px; margin-bottom:8px; webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; } #layer-pop .reset-password li input:focus { border:1px solid #B4AEA2; } #layer-pop .reset-password li button { width:100%; height:45px; font:500 18px 'nts'; color:#FFF; letter-spacing:-0.03em; vertical-align:middle; border-radius:45px; border:0; background:#55402D; } #layer-pop .reset-password li button:hover { background:#9F5B0C; } #layer-pop .reset-password div.contact-text { float:left; width:100%; font:400 14px 'nts'; color:#999; text-align:center; padding-top:30px; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } @media all and (max-width:880px) { #layer-pop .reset-password { width:380px; margin-left:-190px; margin-top:-205px; } #layer-pop .reset-password dt { background-size:85px 85px; padding-top:75px; } #layer-pop .reset-password dt span { font-size:20px; } #layer-pop .reset-password ul { padding:20px 10% 25px; } #layer-pop .reset-password li input { height:42px; font-size:13px; margin-bottom:7px; } #layer-pop .reset-password li button { height:42px; font-size:16px; } } @media all and (max-width:630px) { #layer-pop .reset-password { width:350px; margin-left:-175px; margin-top:-185px; } #layer-pop .reset-password dt { background-size:70px 70px; padding-top:60px; } #layer-pop .reset-password dt span { font-size:18px; } #layer-pop .reset-password li input { height:38px; } #layer-pop .reset-password li button { height:38px; font-size:14px; } #layer-pop .reset-password div.contact-text { font-size:13px; } } @media all and (max-width:505px) { #layer-pop .reset-password { width:300px; margin-left:-150px; margin-top:-173px; } #layer-pop .reset-password dt { background-size:65px 65px; } #layer-pop .reset-password dt span { font-size:17px; } #layer-pop .reset-password ul { padding:15px 10% 20px; } #layer-pop .reset-password li input { height:36px; font-size:12px; } #layer-pop .reset-password li button { height:36px; font-size:13px; } #layer-pop .reset-password div.contact-text { font-size:12px; padding-top:25px; } } @media all and (max-width:420px) { #layer-pop .reset-password { width:75%; margin-left:-37.5%; margin-top:-150px; } #layer-pop .reset-password dt { background-size:55px 55px; padding-top:50px; } #layer-pop .reset-password dt span { font-size:16px; } #layer-pop .reset-password ul { padding:12px 10% 15px; } #layer-pop .reset-password li input { height:34px; margin-bottom:5px; } #layer-pop .reset-password li button { height:34px; font-size:12px; } #layer-pop .reset-password div.contact-text { font-size:11px; padding-top:20px; } } #layer-pop .mail-confirm { display:none; width:400px; margin-left:-200px; margin-top:-220px; } #layer-pop .mail-confirm.active { display:block; } #layer-pop .mail-confirm dt { background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0NSA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDUgNDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMzMzMzMzM7fQ0KPC9zdHlsZT4NCjxnPg0KCTxnPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDQuOCwyMGMwLDIuNy0wLjUsNS4zLTEuNiw3LjhjLTEsMi40LTIuNCw0LjUtNC4zLDYuNGMtMS44LDEuOC00LDMuMy02LjQsNC4zYy0yLjUsMS01LjEsMS42LTcuOCwxLjZIMA0KCQkJbDAuNS0yLjVjMC0wLjEsMC42LTIuOCwxLjgtNi40YzAuNy0yLjEsMS42LTQuMiwyLjUtNmMwLjktMS45LDEuOS0zLjYsMi45LTUuMWMtMS0xLjUtMi0zLjItMi45LTUuMUMzLjksMTMsMy4xLDExLDIuMyw4LjkNCgkJCUMxLjEsNS4zLDAuNSwyLjYsMC41LDIuNUwwLDBoMjQuOGMyLjcsMCw1LjMsMC41LDcuOCwxLjZjMi40LDEsNC41LDIuNCw2LjQsNC4zYzEuOCwxLjgsMy4zLDQsNC4zLDYuNA0KCQkJQzQ0LjMsMTQuNyw0NC44LDE3LjMsNDQuOCwyMHogTTUuMiwzNS45aDE5LjZjOC43LDAsMTUuOS03LjEsMTUuOS0xNS45YzAtNC4yLTEuNy04LjItNC42LTExLjJjLTMtMy03LTQuNi0xMS4yLTQuNkg1LjINCgkJCWMwLjMsMSwwLjYsMi4xLDEuMSwzLjVjMC45LDIuNSwyLjIsNS44LDQuMSw4LjljMS40LTEuNSwyLjktMi44LDQuNC0zLjhjMi43LTEuNyw1LjYtMi41LDguNy0yLjVjMS4zLDAsMi42LDAuMywzLjgsMC44DQoJCQljMS4yLDAuNSwyLjIsMS4yLDMuMSwyLjFjMC45LDAuOSwxLjYsMS45LDIuMSwzLjFjMC41LDEuMiwwLjgsMi41LDAuOCwzLjhjMCwxLjMtMC4zLDIuNi0wLjgsMy44Yy0wLjUsMS4yLTEuMiwyLjItMi4xLDMuMQ0KCQkJYy0wLjksMC45LTEuOSwxLjYtMy4xLDIuMWMtMS4yLDAuNS0yLjUsMC44LTMuOCwwLjhjLTMuMSwwLTYtMC44LTguNy0yLjVjLTEuNS0xLTMtMi4yLTQuNC0zLjhDNy43LDI3LjksNiwzMi45LDUuMiwzNS45eg0KCQkJIE0xMi45LDIwYzMuMSwzLjcsNi43LDUuNiwxMC42LDUuNmwwLDBjMy4xLDAsNS42LTIuNSw1LjYtNS42YzAtMy4xLTIuNS01LjYtNS42LTUuNkMxOS41LDE0LjQsMTYsMTYuMywxMi45LDIweiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K") center 0 no-repeat; background-size:90px 90px; padding-top:75px; } #layer-pop .mail-confirm dt span { font:500 22px 'nts'; } #layer-pop .mail-confirm ul { float:left; width:100%; background:#F3F1F0; padding:25px 10% 30px; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .mail-confirm li { position:relative; float:left; width:100%; font:500 20px 'rajdhani'; color:#9F5B0C; letter-spacing:-0.03em; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .mail-confirm li:nth-child(1) { padding:0 0 0; } #layer-pop .mail-confirm li:nth-child(2) { padding-top:15px; } #layer-pop .mail-confirm li input { width:100%; height:45px; font:400 14px 'nts'; color:#AAA; vertical-align:middle; border-radius:5px; border:0; outline:0; box-shadow:0 0 4px rgba(0, 0, 0, 0.15); background:#FFF; padding:0 10px; margin-bottom:8px; webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; } #layer-pop .mail-confirm li input:focus { border:1px solid #B4AEA2; } #layer-pop .mail-confirm li button { width:100%; height:45px; font:500 18px 'nts'; color:#FFF; letter-spacing:-0.03em; vertical-align:middle; border-radius:45px; border:0; background:#55402D; } #layer-pop .mail-confirm li button:hover { background:#9F5B0C; } #layer-pop .mail-confirm div.contact-text { float:left; width:100%; font:400 14px 'nts'; color:#999; text-align:center; padding-top:30px; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } @media all and (max-width:880px) { #layer-pop .mail-confirm { width:380px; margin-left:-190px; margin-top:-205px; } #layer-pop .mail-confirm dt { background-size:85px 85px; padding-top:75px; } #layer-pop .mail-confirm dt span { font-size:20px; } #layer-pop .mail-confirm ul { padding:20px 10% 25px; } #layer-pop .mail-confirm li button { height:42px; font-size:16px; } } @media all and (max-width:630px) { #layer-pop .mail-confirm { width:350px; margin-left:-175px; margin-top:-185px; } #layer-pop .mail-confirm dt { background-size:70px 70px; padding-top:60px; } #layer-pop .mail-confirm dt span { font-size:18px; } #layer-pop .mail-confirm li { font-size:18px; } #layer-pop .mail-confirm li button { height:38px; font-size:14px; } #layer-pop .mail-confirm div.contact-text { font-size:13px; } } @media all and (max-width:505px) { #layer-pop .mail-confirm { width:300px; margin-left:-150px; margin-top:-173px; } #layer-pop .mail-confirm dt { background-size:65px 65px; } #layer-pop .mail-confirm dt span { font-size:17px; } #layer-pop .mail-confirm ul { padding:15px 10% 20px; } #layer-pop .mail-confirm li:nth-child(2) { padding-top:10px; } #layer-pop .mail-confirm li button { height:36px; font-size:13px; } #layer-pop .mail-confirm div.contact-text { font-size:12px; padding-top:25px; } } @media all and (max-width:420px) { #layer-pop .mail-confirm { width:75%; margin-left:-37.5%; margin-top:-150px; } #layer-pop .mail-confirm dt { background-size:55px 55px; padding-top:50px; } #layer-pop .mail-confirm dt span { font-size:16px; } #layer-pop .mail-confirm ul { padding:12px 10% 15px; } #layer-pop .mail-confirm li { font-size:16px; } #layer-pop .mail-confirm li button { height:34px; font-size:12px; } #layer-pop .mail-confirm div.contact-text { font-size:11px; padding-top:20px; } } #layer-pop .complete-pop { display:none; width:400px; margin-left:-200px; margin-top:-125px; } #layer-pop .complete-pop.active { display:block; } #layer-pop .complete-pop dt { font-weight:600; font-size:32px; } #layer-pop .complete-pop dd { float:left; width:100%; text-align:center; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .complete-pop dd.text { font:400 14px 'nts'; background:#F3F1F0; padding:25px 10% 30px; } #layer-pop .complete-pop dd.text b { font-weight:normal; color:#BC2800; } #layer-pop .complete-pop button { width:30%; height:35px; font:400 18px 'nts'; color:#FFF; vertical-align:middle; border-radius:45px; border:0; background:#55402D; margin-top:15px; } #layer-pop .complete-pop button:hover { background:#9F5B0C; } @media all and (max-width:880px) { #layer-pop .complete-pop { width:380px; margin-left:-190px; margin-top:-110px; } #layer-pop .complete-pop dt { font-size:30px; } #layer-pop .complete-pop dd.text { font-size:14px; padding:22px 10% 27px; } #layer-pop .complete-pop button { width:35%; height:32px; font-size:16px; margin-top:12px; } } @media all and (max-width:630px) { #layer-pop .complete-pop { width:350px; margin-left:-175px; margin-top:-100px; } #layer-pop .complete-pop dt { font-size:27px; } #layer-pop .complete-pop dd.text { font-size:13px; padding:18px 6% 22px; } #layer-pop .complete-pop button { height:30px; font-size:15px; margin-top:10px; } } @media all and (max-width:505px) { #layer-pop .complete-pop { width:300px; margin-left:-150px; margin-top:-95px; } #layer-pop .complete-pop dt { font-size:25px; } #layer-pop .complete-pop dd.text { font-size:12px; padding:15px 5% 18px; } #layer-pop .complete-pop button { height:28px; font-size:14px; margin-top:10px; } } @media all and (max-width:420px) { #layer-pop .complete-pop { width:76%; margin-left:-38%; margin-top:-90px; } #layer-pop .complete-pop dt { font-size:20px; } #layer-pop .complete-pop dd.text { padding:15px 14% 18px; } #layer-pop .complete-pop button { height:25px; font-size:13px; margin-top:7px; } } #layer-pop .alert-text { display:none; width:360px; margin-left:-180px; margin-top:-120px; } #layer-pop .alert-text.active { display:block; } #layer-pop .alert-text p { display:block; font:500 22px 'nts'; color:#BC2800; letter-spacing:-0.03em; padding:20px 0 6px; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .alert-text span { display:block; font:500 17px 'nts'; color:#333; letter-spacing:-0.03em; background:#F3F1F0; padding:12px 0; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .alert-text button { width:50%; height:45px; font:500 18px 'nts'; color:#FFF; letter-spacing:-0.03em; vertical-align:middle; border-radius:45px; border:0; background:#55402D; margin:15px 0 10px; } #layer-pop .alert-text button:hover { background:#9F5B0C; } @media all and (max-width:505px) { #layer-pop .alert-text { width:300px; margin-left:-150px; margin-top:-98px; } #layer-pop .alert-text p { font-size:20px; padding:20px 0 6px; } #layer-pop .alert-text span { font-size:15px; padding:12px 0; } #layer-pop .alert-text button { height:30px; font-size:15px; margin-top:10px; } } @media all and (max-width:420px) { #layer-pop .alert-text { width:76%; margin-left:-38%; margin-top:-87px; } #layer-pop .alert-text p { font-size:18px; padding:20px 0 6px; } #layer-pop .alert-text span { font-size:13px; padding:10px 0; } #layer-pop .alert-text button { height:25px; font-size:13px; } } #layer-pop .tab_menu { display:none; width:900px; border-radius:8px; border-top:4px solid #EBA243; padding:50px 45px 40px; margin-left:-450px; margin-top:-332px; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; } #layer-pop .tab_menu.active { display:block; } #layer-pop .tab_menu input { position:absolute; display:none; top:0; left:0; width:0; height:0; border:0; padding:0; margin:0; opacity:0; } #layer-pop .tab_menu label { float:left; width:33%; font:500 18px 'rajdhani'; color:#AAA; letter-spacing:-0.02em; text-align:center; vertical-align:middle; padding:15px 0; border:1px solid #DDD; border-left:0; border-bottom:1px solid #9F5B0C; background:#F9F9F9; cursor:pointer; transition:.3s ease; webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .tab_menu label:nth-child(2) { width:34%; border-left:1px solid #DDD; } #layer-pop .tab_menu input:checked + label { color:#55402D; border:1px solid #9F5B0C; border-bottom:1px solid transparent; background:#FFF; transition:.3s ease; } #layer-pop .tab_menu button { float:left; width:33%; font:500 18px 'rajdhani'; color:#AAA; letter-spacing:-0.02em; text-align:center; vertical-align:middle; padding:15px 0; border:1px solid #DDD; border-left:0; border-bottom:1px solid #9F5B0C; background:#F9F9F9; cursor:pointer; transition:.3s ease; webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .tab_menu_content { position:relative; float:left; display:block; width:100%; text-align:left; margin-top:15px; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; } #layer-pop .box_line { border-radius:6px; background:#F3F1F0; } #layer-pop .tab_menu_scroll { width:100%; height:500px; padding:20px 1.5% 25px 4%; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; } #layer-pop .tab_menu_scroll > div { position:relative; height:100%; } #layer-pop .tab_menu_inner_content { position:absolute; top:0; left:0; width:100%; font:500 15px 'rajdhani'; color:#333; line-height:20px; letter-spacing:-0.01em; opacity:0; transition:.3s ease; z-index:0; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; } #layer-pop .tab_menu_scroll .tab_menu_inner_content { width:100%; height:100%; overflow-x:hidden; overflow-y:auto; padding-right:2.5%; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; } #layer-pop .tab_menu > input:nth-child(1):checked ~ .tab_menu_content .tab_menu_inner_content:nth-child(1) { opacity:1; z-index: 10; } #layer-pop .tab_menu > input:nth-child(3):checked ~ .tab_menu_content .tab_menu_inner_content:nth-child(2) { opacity:1; z-index: 10; } #layer-pop .tab_menu > input:nth-child(5):checked ~ .tab_menu_content .tab_menu_inner_content:nth-child(3) { opacity:1; z-index: 10; } #layer-pop .tab_menu > input:nth-child(7):checked ~ .tab_menu_content .tab_menu_inner_content:nth-child(4) { opacity:1; z-index: 10; } #layer-pop .tab_menu > input:nth-child(9):checked ~ .tab_menu_content .tab_menu_inner_content:nth-child(5) { opacity:1; z-index: 10; } #layer-pop .tab_menu_inner_content scrollbar-thumb { background:rgba(255,255,255,0.3); border-radius:32px; } #layer-pop .tab_menu_inner_content scrollbar { background:rgba(0,0,0,0); width:6px; height:6px; } #layer-pop .tab_menu_inner_content::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); border-radius:32px; } #layer-pop .tab_menu_inner_content::-webkit-scrollbar { background:rgba(0,0,0,0); width:6px; height:6px; } @media all and (max-width:1000px) { #layer-pop .tab_menu { width:86%; border-radius:6px; border-width:3px; padding:45px 5% 35px; margin-left:-43%; margin-top:-310px; } #layer-pop .tab_menu label { font-size:17px; padding:13px 0; } #layer-pop .tab_menu button { font-size:17px; padding:13px 0; } #layer-pop .tab_menu_content { margin-top:10px; } #layer-pop .box_line { border-radius:5px; } #layer-pop .tab_menu_scroll { height:475px; padding:15px 1.5% 20px 4%; } #layer-pop .tab_menu_inner_content { font-size:15px; line-height:20px; } #layer-pop .tab_menu_scroll .tab_menu_inner_content { padding-right:2.5%; } #layer-pop .tab_menu_inner_content scrollbar { width:5px; height:5px; } #layer-pop .tab_menu_inner_content::-webkit-scrollbar { width:5px; height:5px; } } @media all and (max-width:700px) { #layer-pop .tab_menu { width:90%; padding:40px 5% 30px; margin-left:-45%; margin-top:-292px; } #layer-pop .tab_menu label { font-size:16px; padding:10px 0; } #layer-pop .tab_menu button { font-size:16px; padding:10px 0; } #layer-pop .tab_menu_content { margin-top:7px; } #layer-pop .tab_menu_scroll { height:460px; padding:12px 1.5% 15px 4%; } #layer-pop .tab_menu_inner_content { font-size:14px; line-height:19px; } } @media all and (max-width:550px) { #layer-pop .tab_menu { padding:35px 5% 25px; margin-top:-286px; } #layer-pop .tab_menu label { width:30%; font-size:15px; } #layer-pop .tab_menu label:nth-child(2) { width:30%; } #layer-pop .tab_menu label:nth-child(6) { width:40%; } #layer-pop .tab_menu button { width:40%; font-size:15px; } #layer-pop .tab_menu_scroll { height:460px; } #layer-pop .tab_menu_inner_content { font-size:13px; line-height:18px; } } @media all and (max-width:450px) { #layer-pop .tab_menu { padding:35px 4% 20px; margin-top:-240px; } #layer-pop .tab_menu label { font-size:14px; padding:8px 0; } #layer-pop .tab_menu button { font-size:14px; padding:8px 0; } #layer-pop .tab_menu_scroll { height:380px; } #layer-pop .tab_menu_inner_content { font-size:12px; line-height:16px; } #layer-pop .tab_menu_inner_content scrollbar { width:4px; height:4px; } #layer-pop .tab_menu_inner_content::-webkit-scrollbar { width:4px; height:4px; } }