/* 마케팅샤쉐 */ /* 사용자재구축: html:has(.wrap.pc .marketing_sample) { */ .wrap .marketing_sample { /* Variables */ --_font-size-64: 64px; --_font-size-60: 60px; --_font-size-48: 48px; --_font-size-36: 36px; --_font-size-32: 32px; --_font-size-24: 24px; --_font-size-20: 20px; --_font-size-18: 18px; --_font-size-16: 16px; --_font-size-14: 14px; --_font-size-13: 13px; --_font-size-12: 12px; --_gutter-750: 750px; --_gutter-582: 582px; --_gutter-480: 480px; --_gutter-400: 400px; --_gutter-340: 340px; --_gutter-140: 140px; --_gutter-135: 135px; --_gutter-120: 120px; --_gutter-90: 90px; --_gutter-80: 80px; --_gutter-60: 60px; --_gutter-52: 52px; --_gutter-50: 50px; --_gutter-47: 47px; --_gutter-44: 44px; --_gutter-40: 40px; --_gutter-37: 37px; --_gutter-36: 36px; --_gutter-32: 32px; --_gutter-26: 26px; --_gutter-24: 24px; --_gutter-20: 20px; --_gutter-18: 18px; --_gutter-16: 16px; --_gutter-15: 15px; --_gutter-14: 14px; --_gutter-12: 12px; --_gutter-8: 8px; --_gutter-4: 4px; /* scroll-behavior: smooth; */ scroll-padding-top: 100px; } /* @media (max-width: 1300px) { */ @media all and (min-width: 769px) and (max-width: 1300px) { .quick-menu-wrap.fixed button { height: 3vw; min-width: 7.4vw; } .wrap .marketing_sample { /* Variables */ --_font-size-64: 4.92vw; --_font-size-60: 4.62vw; --_font-size-48: 3.69vw; --_font-size-36: 2.77vw; --_font-size-32: 2.46vw; --_font-size-24: 1.85vw; --_font-size-20: 1.54vw; --_font-size-18: 1.38vw; --_font-size-16: 1.23vw; --_font-size-14: 1.08vw; --_font-size-13: 1vw; --_font-size-12: 0.92vw; --_gutter-750: 57.69vw; --_gutter-582: 44.77vw; --_gutter-480: 36.92vw; --_gutter-400: 30.77vw; --_gutter-340: 26.15vw; --_gutter-140: 10.77vw; --_gutter-135: 10.38vw; --_gutter-120: 9.23vw; --_gutter-90: 6.92vw; --_gutter-80: 6.15vw; --_gutter-60: 4.62vw; --_gutter-52: 4vw; --_gutter-50: 3.85vw; --_gutter-47: 3.62vw; --_gutter-44: 3.38vw; --_gutter-40: 3.08vw; --_gutter-37: 2.85vw; --_gutter-36: 2.77vw; --_gutter-32: 2.46vw; --_gutter-26: 2vw; --_gutter-24: 1.85vw; --_gutter-20: 1.54vw; --_gutter-18: 1.38vw; --_gutter-16: 1.23vw; --_gutter-15: 1.15vw; --_gutter-14: 1.08vw; --_gutter-12: 0.92vw; --_gutter-8: 0.62vw; --_gutter-4: 0.31vw; /* scroll-behavior: smooth; */ scroll-padding-top: 7.69vw; } .marketing_sample #sachet_sec1, .marketing_sample #sachet_sec3, .marketing_sample #sachet_sec4, .marketing_sample #sachet_sec5, .marketing_sample #sachet_sec6, .marketing_sample #sachet_sec7, .marketing_sample #sachet_sec8, .marketing_sample #sachet_sec9 {padding: 0 20px;} .sec.sachet_sec8 .sachet_sec8_box {height: auto !important} .sachet_sec8_box .d-flex div:first-child {width: 45%} .sachet_sec8_box .d-flex div + div {width: calc(100% - 45%)} .sec.sachet_sec9 > .inner {max-width: 100% !important} } @media (max-width: 768px) { /* 사용자재구축: html:has(.wrap.pc .marketing_sample) */ .wrap .marketing_sample { /* Variables */ --_font-size-64: 38px; --_font-size-60: 35px; --_font-size-48: 28px; --_font-size-36: 21px; --_font-size-32: 19px; --_font-size-24: 14px; --_font-size-20: 12px; --_font-size-18: 11px; --_font-size-16: 9px; --_font-size-14: 8px; --_font-size-13: 8px; --_font-size-12: 7px; --_gutter-750: 443px; --_gutter-582: 344px; --_gutter-480: 284px; --_gutter-400: 236px; --_gutter-340: 201px; --_gutter-140: 83px; --_gutter-135: 80px; --_gutter-120: 71px; --_gutter-90: 53px; --_gutter-80: 47px; --_gutter-60: 35px; --_gutter-52: 31px; --_gutter-50: 30px; --_gutter-47: 28px; --_gutter-44: 26px; --_gutter-40: 24px; --_gutter-37: 22px; --_gutter-36: 21px; --_gutter-32: 19px; --_gutter-26: 15px; --_gutter-24: 14px; --_gutter-20: 12px; --_gutter-18: 11px; --_gutter-16: 9px; --_gutter-15: 9px; --_gutter-14: 8px; --_gutter-12: 7px; --_gutter-8: 5px; --_gutter-4: 2px; /* scroll-behavior: smooth; */ scroll-padding-top: 59px; } } /* 사용자재구축: 주석처리함 */ .wrap:has(.sachet_sticky_nav) { overflow: visible; } .only_mobile { display: none; } .mt0 {margin-top: 0} /* Content(OTC) */ .marketing_sample .sr_only { /* Visibility */ overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; white-space: nowrap; border-width: 0; clip: rect(0, 0, 0, 0); } /* Color */ .marketing_sample .color_1 { color: #121619 !important; } /* Button */ .marketing_sample .btn { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; gap: 0.25em; padding: 0.5em 1em; color: #fff; font-size: var(--_font-size-16); line-height: normal; background-color: #121619; } .marketing_sample .btn:has(.ico_comm) { padding-right: 1.25em; } /* Icon */ .ico_comm.ico_otc { background-position: center; } .ico_otc.more { width: var(--_gutter-26); aspect-ratio: 1; background-image: url('data:image/svg+xml,'); background-position-y: calc(50% - 1px); } .ico_otc.tooltip { width: 16px; aspect-ratio: 1; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAgCAYAAACcuBHKAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQoSURBVHgBtVi9cttGEN49ERTlZDIQbShkXAR+AlNdOlFPEKpLKslPIL2B7DJVlCcIu5SCn0B0mUr0E4gpMlFsTYSZKCZEiLfZPeDAHwkgSNvfDATocLf77WJ/7oiwBFzGWq3WIa12CKiFgD4AuclbDHlswGN9JN0bx9HrkFFGLpaZ5DYavhrjISAeTJSWEt/VSr8KLy8HhbOKXorlyvniJaA+tGNE1EOFgdbqDcT/Day1MrdSqT3Xa9hCTR1CbGeCCE50PHyV55lcEsZ6jWf86KfauzoGFlRs1cQAXu/AceI9g4FWtPuQVx4k4XpPWwr1qRAgXkyk9sL3f/ZhBQgZrOIZJsYMNN2xrPczstS9ReKBlIBYT6Ph9qoEBOI5Gq1vE2AgMhVWTkUH5LN23fpW84Iv2txqnsInxqbX7Ips0SG67PiMJ0wQ2k8wGr6ATwyK149EtuhQzsaxHc9iIg3EC3nWI3pWFIAma6qPjgBpnyPfNwoA+lIjFqVkGm/nRo9iPTw384TSKmHGcVBIQMhWN1gIHVsCqTUtHjvgenLuel4rb72JL9ZhdI7pMF0rlvls2e11GS/I94TptFUqSIzQnel0/OfdX8/yZJj0rbLXCUKuH8m8x17jwASj1ziDAogr08Ciutf4df79Y695Zt8XeWN6LuveN5+DUO3IHYGCooUVGmcRrQm68+8JqZf9o9S3UABSECRroF1Jx1qJYCysB1dXlz0oLPXKNyEqGGNh85KyzwHKs7FlA9M3f++it7Ai6l83jyQw5VnSMLy6fFO4IHYGckMO7pRE0hnLtt57BLynJ6z5Z0uARrS7aE0YDhJdCG4FPhJcWbvs3H1DgKBPMe2VbXIWqScwa8dLrDVZxQFiCJg+Ew93y3dZP9HFaWpjIlnoOD4sAY3q++zZtPnyn7NSi0wycHbYiqlNVihIUnUFDJb9BJyJz+WORH2VPICJZALVWUIO0OjDCz0Cn682LAn+jEaXBuhNle3RhWSJbSrwGTHbLIebxhMmXWxTsY2sBOpb37zk65oz5HxRmZ7GbLMMw0krt01F2NHd9vwWbB5PGo22TvagiTzQwfW7v/dgAR7aMmSt3AQW74oNU9mCLUjXO5tRKZBwYWaYfYglTvrEBvPa9KT16pPfYW38g2xKUVUbww//vs4TGN3chOuPvvyDrWCyFOgYf4qim0IiG1/Vf2PZ35mqGkc/RgxjwH22k90xTw5km7dqOZ/IdF2sbpxIYbNlfTqlc7f8yDvubJuec14oRaDE8SH/8DN7XoCyR7psvQlAyYJJZ533wEISCRGuH84tn6LgyI5xmZXiEmiktxBF/eljoMNlf6wqO1KIuJm1M0EchDq+Xf4YOEvm3pGuBDhbaMxHR/xlUUkvRWJChtPWqXU4I3b4wPvwTwPcC1joUj8N/A8vGj0FXRpANQAAAABJRU5ErkJggg==') no-repeat center / 100%; } .ico_otc.plus { display: inline-flex; position: relative; width: 12px; aspect-ratio: 1; } .ico_otc.plus::before, .ico_otc.plus::after { content: ''; position: absolute; background-color: #121619; } .ico_otc.plus::before { top: 5px; left: 0; width: 100%; height: 2px; } .ico_otc.plus::after { top: 0; left: 5px; width: 2px; height: 100%; } .ico_otc.checkbox { display: inline-flex; width: 20px; aspect-ratio: 1; border: 1px solid #ddd; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s; } .check_label:has(:checked) .ico_otc.checkbox { border-color: #000; background: #000 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABkSURBVHgBrdNRCoAgEIThoYvVzbabdbQpqEAodHbc/1k/dEWgIJIrqrqw4F1gtgZ7iwVmz4l2VPRzsu+V1cGqmDTYLMYeKmHqQhlTNqSxAXpY2AD1MAH1vxbFl3fReaxBNyQ7AeF3hvds58ndAAAAAElFTkSuQmCC') no-repeat center / 60%; } .ico_otc.info { width: 16px; aspect-ratio: 1; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGlSURBVHgBlVNNTjJBEK0qwnzBT5N2tHVGF84NxBvgCdQTqDfQE4zs3MkNdOtKPAFyAnHnjtmJP5FJNICQqbJ7FDOKqLykk0nV63mvu14jfMG855U4wQ0g2ASBwNYEoIGADSYux61WlOXT8EMZuHq5wkxnLBLzC5Qe727QLhHaZeE6MtZc7R9Z7nAfDjdjvlBDkAYPevuxAXwDpQJF+ZfQOCrJoLv+wbPKrl48gj9iVvsn1knqQHleYK1Jv7v2Vdld8JsiELXvb9ZHnDj9JjNvETGFInLwnW1JJXikHseRqXGFUDaMytKl0roIE8I6tw6tTRlHche80Kzj8X1fCH5G8Es/zUGkfH8FJoTSy0UbMDI3VYVEdmBC5CApmoQ1iETOSXAvm65f1Q0EMeQBlHOdznNU+D/jYc7Z7HaezrPEf/npK0mg3us9fxrl1MzcIUBy3X68PX2PcqDQ6deMpQsedMvjo2wi7xQq5tirwyinU7DBkL6Tpo2cwuWc9rZ1JhtvM186IGeqicLt7DvAURUvoDyE5oxF03z/iUQgUmXBavzQqmf5r0k4yuy5PuQkAAAAAElFTkSuQmCC') no-repeat center; } .ico_otc.upload { width: 16px; aspect-ratio: 1; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE2SURBVHgB7ZRPSsNAFMa/11RdCBJCKIkbxxt4A8cbuHRXu3PpDawn8Aj2JvYI3qC4skgpARELJXnO0CqhmHQySUoX84MH+fN43w+SN4DDUQM/ikQQxveogQdLdHgnoxcQbo6OT2jx9TmGBVYCf+GA0PcESFuJygKb4b/YSlQSyIcz45UIC/0YzCMQXdhIGAtshvPy+4q8gzv9KuvSNaWcKAlZVaJj0vRfeKLI98xn00dkPFwN5Qe/dzo0mW0k4KX0XBZeKBFGctvsLgxIlzygQ3pS4YOi8LxEEEbI1HUym47RJkEvnqhiP47PYInRJ2gTJ7B3AkLVrSqJ5pHr2QIlArpJ73wfzdNfz74sE9g5RgdREfOP93PUxG3B3v4DAquVaRKBCgIS7ZwFWwUmqkZolzc4HDl+AL7TeZT2UBxpAAAAAElFTkSuQmCC') no-repeat center / 100%; } .ico_otc.step_done { width: var(--_gutter-80); aspect-ratio: 1; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAvhSURBVHgB7Z3dbhvHFcfPGS5prSQD9hOIegJLQIFcBZaBAulNG+W+qWW0cC6tXAeopLa+Cgo7aG4aoIjc9CZAASt3LVBANPIAZtsHMPUEFmCJFMndncxZammKn/vNmd3zAyRSBAUJ4A//M2dmdhaBGSKlvHN52a8jijpWvA0BWKfXpHoEhDsg8c71O+vTfx/OEfEcUJ6Dek5fQkDLA9mSrjiT0mutr9eawAxBKCkkVrvt7ggh7ylxtgBxa5ZYqYPQBA9aqB4dB16tr1tNX9wSUhoBr9Nt17LwnidxNzfZwqJkRCmbnid+EKLftG27BSWg0AJ2Ov0dD2BHANyX6hHMoqFK+YnnJ2Rxy3bhBOx0OnUPrD0EfKhdysVGtgTiiZTOV0VLxkIISOW10+0/RFVaDUy6qDSwgsd2zXoBBcBoATsdqdLO2VPd5hOkLrVUyBZSmQb3yORUNFJAGtuph4MSpF0oEOSxqSIaJSCLNx8TRTRCQCq1AM63LF44TBJRawH9ubuOcygQngATGRNE1FbAi3ZvX02lHJSvuUgb1axUxKGuXbN2Al5c9LYqFXzG5TZtqGt2H+iWhgI04rLTPxQVfM3yZQHWJVhv3l32D0EjtEhAajIkOi+BNgUwOaBPGi49AWms50nnNcuXJ1j3pPX6on21D0tmaQnIHa4mSHjeta2ju0vaDrYUAbnk6sbySnLuJdjfIsUlVzOoQamc0gwE5EyuAl50enuqwz3luT0dwTrNQOQ9LsxNQH+KBfBbYLRGYOVZnlM1uYwBST71hw6AMQbXg6Pba9VDyJjMBbxo959zp2smeUiYqYAXl71jIWhrPGMqEvB4zbYeQUZkNgb0x3wsn/EgyL12u/8MMiITAXnMVzAQ9rNqTFIvwSxfccliTJiqgLSuKxAzi2tm+WAF99LcW5iagDSLThOZwBQe14EHt29XG5ACqYwBaW1XVMRLYEqBqMBLOgAAUiCxgIPTo9zT4pxCwCyCllIlWi/fqs8eEpJYQNpSxfKVEAlbtzpO4mYzkYCDpoNXOUqLmp5JunkhdhPiH4shnde8s6Xc0KGcAp3tuHsJYycgjftYPiYYD0JMYglIk8087mOGqPGgciLWeDByCfa304PzBhhmDM+V21EP04ycgIMpF4aZRC1ERF4FiyQgbann0svMYSdqVxy6BA9KL084M/OhrrhnW5thL/OMkIDuAcvHLIK64igT1KESkBsPJioIzmaYucGQCejy/j4mEhKsUFdALkxATj8mLmG2bYVIQE4/Jh4Va/HO+LkJyOnHJGVRCi5IQE4/JhmLUnBmAnL6MWkxryOek4Ccfkw6eGDNvD58ZgK2O5R+PPHMJGfe6sjUBOQ1XyZN/NWRbn9qCk4VsAJ8pAaTMv5NwieZKMHcfDBZYa9YdUQ8G31tIgElOnyREZMJ7Stnb/y1iQTk5oPJDtlatWubo6/cSMBejw6pZvmYrMD6u3f+LXeH3BDQ8eA+MEyGCOumYzcExBmdCqM3jx//Fp4+/QOYAI7dB9AKnlx3vzvAGAXJ94/v/j78+Ysvfg+as0NnygST0sME9DyXbxxjGOPyPf3TH41IwpUr9+Pg+VBAIeBjYIxhXL4AEySUKIdhJ6a9yOjNLPkCtJdQymGv4c8DUk2+deW8BUZ7Fsk3yvff/xN++Ss9C1t3xbpL40A/AVeuHE4/A4gi368//Y228hG1tutPxwQlmOf/NCeqfN988zfQGSEGQz5fQES+darOFE0+Ql7frtcX0AOoA6MlRZTP57rp9ZuQdqcvgdGOwsp3DTUiYrABgdGNostHVC8v66LfF3VgtKIM8hGIKxsCK94GMNpQFvkI5V5d0B4tYLSgTPINwLpaAuYOWAfKJx81wvKOUPMxfKuFJVNG+QgJKgGlYff6OD8/hw8++Bl8F/ID052yykdQ+AmQaIyAJN9HH/0c/v+//8Jn6oMzXcIyy0cg+iVYGiHgqHwBJktYdvkC0IRVkGnyjfJX9eF8qj4kU2D53hPrVl15skg+wqQkZPluor2Anz3+3Vz53r9PfwlZvkm0L8FnZy34hUrAs7OzUO/XtRyzfNPRPgE3Nurwr3//Rz2GWzHUMQlZvtloLyBhsoQs33xoLbgFBmCihCzffPy7rYNBmCQhy7cYNRGtBFTfwCBMkJDlC4eUeC5QxSAYhs4SsnzhQfRLsBljwHF0lJDliwiNAaVhJXgUnSRk+WIgoCXo2FQwGB0kZPniIltCuiLcEoPGLFNCli8+yr2WqFa9FhSAZUjI8iVDyqszLNrJWHmtHbN8yVm1qygGR6Wa2QlPI48kZPmSo1ZBmvTor4SoycAmFIgsJWT50gEBWvToCxjYWCSykJDlSw81Cf0+AT0PF+/4NJA0JWT5UqdB30pxRG/SxoTlS58bR/QWrREZJ0kSsnzpQ0O+4D4hw5sVtq/6z9Ta3D4UmKhJ+OGH9+HHH1+Fei/LFx4J8njNrj2i58P9gJ4jCzkOHCVqErJ8GeGJk+DpUMD+WvUESkBUCRfB8kWnJ/rDsBsKSDUZrzuTopOWhCxfLBp3bbsV/HBzS74oh4BEUglZvpigvFFpbwroQbhBT0GIKyHLFx/P6d1wDMff0O44b8p21/Qo3THLlwTZWrVrm6OvTFwVh0IeQ8kIm4QsX0IQJxrdiQTsdDp1CdYbKCHzkpDlS04XnM3RBoSYSEBbvaEs3fA4s5KQ5UuFxrh8xNQL0+VYp1ImxiVk+dIBAY+nvz4F2pxQU80IGnZ+dJpQOf7667/Al1/+GZikTDYfATjrVzrd/oH04BAYJiGja7/jzBTwbUfWb4FTymaESZdpzUfAzMOJ7tpY2maESQ9Kv1nyEYtOxzoChklAD9y5Ds0V0LarDU5BJi6L0o9YlIAEpyATi0XpRywUkFOQiUOY9CMQQsAdMROVeZ3vKGFKsN8RK1WfA8OEIGz6EaESkODVESYcstUF90FYAUMlIDHYsi+5IWHmgiAOw8o3eH9EOp3+qQTYAYaZYPaa7ywi36bBdeXnwDBToNILEYks4Pp6rYmCNykwN1FVMVLpDYhcggPaV/3X6q9uAcPEKL0BkRMwoCutT6SB9xhh0oUciFN6A2ILONgtw11x2UEhY5Xe4e9DQspwqBEzA7U4sbpSTdSUJhbQP1uw65zyeLBsqAnnlep2cMxaXGKX4AD6B3g8WDauVzsSykckTsAANUG9o1rxU2AKT9eV23fVdBykQOIEDKBtWx7IR8AUG5T7aclHpCYgsW7XjnmSurjQZPPqSu0rSJHUSvAofEln8SD51uxq6tNumQhI8PRMcchKPiIzAYmLy96xEPgQGGORgMdrtpXZ2D7VMeA462u1PR4TGoyaaM5SPiJTAQn7VvWIJTSPQcNRzXzrXaYleBRuTMwhyzHfOLkJSLTbvX1AfAaMtmAF9+ya9QJyIlcBiYuL3paoiJdlO4dad2gpVSDsqgWFV5AjuQtIDK4zdk9ZQk1AaHal80mSbVVxybwJmQbtJeyuVLb5WmMNUJ9B95b1YBnyDf78kqFxoZprOuDrjfOFSi5tJk17aS0qSxeQ4JKcM0ssueMspQSPQyV51bY2eb4we67n97Z1kI/QIgFH4TTMjEbXlZ+nuZUqDbRIwFGCNPRc2ltY3Lu454W/Ux3l/qpdfaCbfIR2CTgKpWEN3AMEuQdMdAYd7lEaW+ezQmsBA1jEyDS64DzSZZw3DyMEDGARF0Kn2R7mvZqRBKMEDGARJzBOvAAjBQx4LyIdF1eurnnQXMDzHjgvTCi1szBawFEuLnp7lQo+LMHZhQ1l30nXrr7QubkIS2EEDPDnEdF5AhJ3i5OK2KJzl1dXrGNEPIMCUTgBR/G3fgm4rz60XQOTsaH+54aaqG2YOLYLS6EFHIWScVW49xwPdhHlln5n2dCdCOQJSmxerVR+KEJ5DUNpBByHDlVad5x7jgM7kmQUUM9PSiWblE1EaAqBzXat8qoswo1TWgFnQWW7WhUbruvVQWAdPKjTVjFJ28Uk3pFK3Nlbx66XDlGeo39Yk2xJEsuTrUpFtPp976y/Vm2VVbZp/ATLHmVoLHZjTAAAAABJRU5ErkJggg==') no-repeat center / 100%; } /* Form */ html:has(.marketing_sample) .other_input { display: none; margin-top: var(--_gutter-8); } .marketing_sample .align_right { text-align: right; } .marketing_sample .file_list { display: flex; flex-direction: column; gap: var(--_gutter-8); margin-top: var(--_gutter-8); } .marketing_sample .file_list li p { display: flex; align-items: center; font-size: var(--_font-size-14); } .marketing_sample .file_list_pop { display: flex; flex-direction: column; gap: var(--_gutter-8); margin-top: var(--_gutter-8); } .marketing_sample .file_list_pop li p { display: flex; align-items: center; font-size: var(--_font-size-14); } .marketing_sample .form_wrap { display: flex; align-items: center; gap: 0 var(--_gutter-8); } .inquiry_popup .marketing_sample .form_wrap { display: flex; align-items: center; gap: 8px var(--_gutter-8); } .marketing_sample .form_wrap:has(.check_label.type2) { gap: 4px; } .marketing_sample .textfield { flex-grow: 1; padding: 0 0.75em; border: 1px solid #ddd; border-radius: 0; height: var(--_gutter-44); color: inherit; line-height: normal; font-size: var(--_font-size-16); } .marketing_sample .textfield.w_240 { flex-grow: 0; width: 240px; background: #fff url(/v2/img/bg/bg-datepicker.svg) no-repeat right center; } .marketing_sample textarea.textfield { padding: 0.75em; min-height: 7lh; line-height: 1.4; } .marketing_sample .textfield::placeholder { color: #A8A8A8; font-size: var(--_font-size-14); } .marketing_sample .select { padding: 0 calc(0.75em + 16px + 0.75em) 0 0.75em; border: 1px solid #ddd; width: 100%; min-width: 140px; height: var(--_gutter-44); color: inherit; line-height: normal; background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA9SURBVHgB7YwxDgAgCAP5OfxcHRiMUZCGDZp0uzuiXupED3O8PpyIKMMvwIq4shX5lm+RsHxGIHmPwHKVTedIFeu9K744AAAAAElFTkSuQmCC') no-repeat calc(100% - 0.8em) center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--_font-size-16); } .marketing_sample .form_wrap .select { display: inline-flex; flex-grow: 1; } .marketing_sample .form_wrap:has(> .textfield) > .select { width: 140px; flex-grow: 0; } .marketing_sample .txt_label a { text-decoration: underline; text-underline-offset: 4px; } .marketing_sample .form_desc { margin-top: var(--_gutter-16); color: #838383; font-size: var(--_font-size-14); } .marketing_sample .check_label :is([type='checkbox'], [type='radio']) { display: none; } .marketing_sample .check_label:not(:has(.ico_otc.checkbox)) { display: inline-flex; flex-flow: column; align-items: center; justify-content: center; padding: 1em; border: 1px solid #555; line-height: 22px; transition: color 0.2s, background-color 0.2s; font-size: var(--_font-size-16); white-space: nowrap; } .marketing_sample .check_label:not(:has(.ico_otc.checkbox)) .txt_label + .ico_otc { margin-left: var(--_gutter-8); } .marketing_sample .check_label:not(:has(.ico_otc.checkbox)).type2 { padding: 0.5em 1em; border-radius: 999em; } .marketing_sample .check_label:not(:has(.ico_otc.checkbox)):has(:checked) { color: #fff; background-color: #000; } .marketing_sample .check_label:not(:has(.ico_otc.checkbox)):has(:checked) .ico_otc.tooltip { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIHSURBVHgBxVcLccMwDFV2AxAGC4OFQctgY7Ay2CCUQcogZdANQToEKYOEQcrgTV7tRnFz/jW7vTudW1uSLeXZsjMKBICcm1eWFUvJUrDkevjM0rOcWI4sX1mWnWkJ8MQFS8UyIA61sqVUqIhZdpbThuWdpdQZkborPdZYNpXUjYm6S41G29fCvgu219F1wrCkRFiB+H1ZBnV06uZ9qs9z8GZCK5rJD7Qw2OdeLCKfU9g5Fe5fgAywsgcLQZgiwNEWU5K2IUTV/LqdByNja48De3fYGHxEE3NVMqLQ6Duhqxy9aKlFf0f+IMxic9Wx0R2Nx1Cmr54Zb8T42uPL6L490OVsV/gkNyQx9zPjR/H7idwwc60f6VJYFE4uCy4uR9U4VArxuyc3vnVbEsYik7z12PYjlANa3/BuIGNFicC0YHUIPPOv896zAIynm0KLuIJ1XUDSJxC753dXxNjbn6DVf6KqHsYCA0RePNQ2NVlT29Cwf0Vp6HmH9BSHZ92egg8iGzqNT0ooEhAHkXE0pKQyBZgWvtx0VoZMEY62euFtDH8wV/isVXmdCRIZBF1g4Cr7IgsdPFvKchSUObguJDMKIQ43mkwVAriD6b0wJ0dkZhEHYLFL6V5MXvgM7Gt5QYlA6hUf//kwEU5yjMQ0aHB5fq1x+zQrsdTTzBNNCAYEkjOjQOCPnuc/M2/ClOd5YwsAAAAASUVORK5CYII='); } .marketing_sample .check_label:not(:has(.ico_otc.checkbox)):has(.tooltip_layer) { position: relative; } .marketing_sample .check_label:not(:has(.ico_otc.checkbox)) .tooltip_layer { width: 110%; bottom: calc(1lh + 2em + 20px); } .marketing_sample .tooltip_layer { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; padding: 6px 8px; font-size: 13px; color: #555; border: 1px solid #444; background-color: #fff; display: none; animation: tooltip_hide 0.25s; white-space: normal; line-height: 1.4; } .marketing_sample .tooltip_layer::before, .marketing_sample .tooltip_layer::after { content: ""; position: absolute; bottom: -8px; left: calc(50% - 8px); width: 0; border: 8px solid transparent; border-top-color: #000; border-bottom: 0; } .marketing_sample .tooltip_layer::after { bottom: -7px; border-top-color: #fff; } .marketing_sample .ico_otc.tooltip:hover + .tooltip_layer { display: block; animation: tooltip_show 0.25s; } @keyframes tooltip_show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tooltip_hide { 0% { display: block; opacity: 1; } 100% { display: none; opacity: 0; } } .marketing_sample .check_label:has(.ico_otc.checkbox) { display: inline-flex; align-items: center; font-size: var(--_font-size-16); } .marketing_sample .check_label:has(.ico_otc.checkbox) .checkbox + .txt_label { color: #555; margin-left: var(--_gutter-8); font-weight: 500 } .marketing_sample .file_label [type='file'] { display: none; } .marketing_sample .file_label .txt_label { display: inline-flex; align-items: center; gap: 4px; padding: 0.5em 1.15em; font-size: var(--_font-size-14); background-color: #ddd; } input.datepicker_expected { background-image: none; } .sachet_form { display: grid; gap: var(--_gutter-16); } .sachet_form .form_row { display: grid; grid-template-columns: var(--_gutter-120) 1fr; gap: var(--_gutter-32); } .en .sachet_form .form_row { grid-template-columns: var(--_gutter-120) 1fr; } .sachet_form .form_lbl { display: flex; align-items: center; font-size: var(--_font-size-16); line-height: 1.3; } .sachet_form .form_lbl.align_start { align-items: start; } .sachet_form .required { flex-shrink: 0; width: 9px; height: 22px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAsCAYAAABovuiKAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEySURBVHgB7ZLNUcMwEIWfbGcYOLkDXII7gA6ACnAqwFwIcHFyIfhIB6YCkgowFZAOSAm+MWRiLSv5ZwyxnRxyyug7rbxPz6snAQbDISL6mvIB7wR4UmI4iJH2aa2uBo3gsck5l54QuMYWLOwJpypWj/Bt4GyVY34cY9kmphDu+gi+sHDqTPHa7NUZcR5fKo/y44IIMy7G5Toloc0vQXCLDQjtGC8bE7EwY1FRAz7v9uueyor+TWexvm0ixfoegSVwQerPrWfTUyWsScUUH51GFTovwif+KhP7CUN0sHFrKlCH8NYwyMppgvwO4c5G8gTjRugzmeOqbtqIvkdFr9eIIr4Rwk25XP5I3OoXTcXtMe5AINpqJCbI+BUv1HG4EVTvyX7GhM0SfUyJOQwGg8Fg2Cu/049a/++bzzAAAAAASUVORK5CYII=') no-repeat center / 100%; } .sachet_form .form_lbl br + .required { align-self: start; } /* Sticky Nav */ .sachet_sticky_nav { --_top-offset: 56px; --_nav-gap: 0.5em; position: sticky; top: var(--_top-offset); z-index: 2; padding: calc(1em / 2) calc(1em / 2); font-size: var(--_font-size-16); } .sachet_sticky_nav .nav_wrap { display: flex; justify-content: center; transition: gap 0.2s; padding: calc(1.1em / 2) calc(1em / 2); } .sachet_sticky_nav ul { display: flex; align-items: center; gap: var(--_nav-gap); transition: border-radius 0.2s, box-shadow 0.2s; } .sachet_sticky_nav li { display: flex; align-items: center; gap: var(--_nav-gap); } .sachet_sticky_nav li:not(:first-child:not(:only-child))::before { content: ''; opacity: 1; width: 1px; height: 1.25em; background-color: #c4c4c4; } .sachet_sticky_nav li.active a { color: #fff; background-color: #000; } .sachet_sticky_nav a { display: flex; justify-content: center; align-items: center; padding: 0.55em 1em; font-size: var(--_font-size-16); line-height: normal; border-radius: 999rem; transition: color 0.2s, background-color 0.2s; white-space: nowrap; } .sachet_sticky_nav:has(.active) .nav_wrap { gap: var(--_nav-gap); } .sachet_sticky_nav:has(.active) ul { padding: 2px 3px; border-radius: 999rem; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); } .sachet_sticky_nav:has(.active) li:first-child::before { display: none; } /* Section sachet_sec1: 키비쥬얼 sachet_sec2: OTC란? sachet_sec3: CTK OTC 장점 sachet_sec4-1: 개발과정 sachet_sec4-2: 개발과정 sachet_sec5: FAQ sachet_sec6: 문의하기 */ [class*='sachet_sec'] .inner { padding: var(--_gutter-80) var(--_gutter-40); } [class*='sachet_sec'] .inner .cont_wrap { margin: auto; } [class*='sachet_sec'] .inner .sec_tit { display: grid; gap: var(--_gutter-8); text-align: center; margin: 0 auto var(--_gutter-24); text-transform: none; } [class*='sachet_sec'] .inner .sec_tit .tit { color: #121619; font-size: var(--_font-size-36); font-weight: 600; line-height: 1.2; } [class*='sachet_sec'] .inner .sec_tit p { color: #555; font-size: var(--_font-size-16); font-weight: 400; line-height: 1.4; } [class*='sachet_sec'] .inner .cont_wrap ~ .sec_tit { margin: var(--_gutter-60) auto var(--_gutter-40); } [class*='sachet_sec'] .inner .btn_group { margin-top: var(--_gutter-24); text-align: center; } .sachet_sec_top .inner { max-width: 1720px; padding: 0 40px; margin: 0 auto; } /* Section 1 */ .sachet_sec1 { border-bottom: 1px solid #e1e1e1 } .sachet_sec1 .inner { padding: var(--_gutter-15) var(--_gutter-80) var(--_gutter-60); } .sachet_sec1 img {max-width: 450px} .sachet_sec1 .cont_wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--_gutter-15); } .sachet_sec1 .cont1 { flex-shrink: 0; } .sachet_sec1 .cont1 .txt { margin-bottom: var(--_gutter-24); font-size: var(--_font-size-60); font-weight: 700; line-height: 1.2; } .sachet_sec1 .cont1 .txt > div { display: grid; } .sachet_sec1 .cont1 .txt ~ div { display: none; } .sachet_sec1 .cont1 .txt div:has(ul) { grid-template-columns: max-content 1fr; } .en.pc .sachet_sec1 .cont1 .txt { margin-bottom: var(--_gutter-16); font-size: var(--_font-size-48); } .en.pc .sachet_sec1 .cont1 .txt ~ div { display: block; font-size: 16px; margin-bottom: 24px; } .en.pc .sachet_sec1 .cont1 .txt ~ a { margin-top: var(--_gutter-24); } .en.sachet_sec1 .cont1 .txt { margin-bottom: var(--_gutter-8); } .en.sachet_sec1 .cont1 .txt ~ div { font-size: var(--_font-size-14); margin-bottom: var(--_gutter-24); } .sachet_sec1 .cont1 ul { display: grid; overflow: hidden; position: relative; height: 1lh; } .sachet_sec1 .cont1 ul::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--_gutter-4); background: var(--gradient2); } .sachet_sec1 .cont1 li { display: flex; justify-content: center; background: var(--gradient2); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; grid-area: 1 / 1; transform: translateY(100%); opacity: 0; transition: transform 0.25s; } .sachet_sec1 .cont1 li.active { opacity: 1; transform: translateY(0%); } .sachet_sec1 .cont1 li.before { opacity: 1; transform: translateY(-1.2lh); } .sachet_sec1 .cont2 img { margin-left: auto; } /* Section 2 */ .sachet_sec2 { border-top: 1px solid #e1e1e1; } .sachet_sec2 .inner { padding-bottom: var(--_gutter-40); } .sachet_sec2 .sec_tit { max-width: 1560px; } .sachet_sec2 .cont_wrap { max-width: 1560px; padding: var(--_gutter-24) var(--_gutter-24) 0; } .sachet_sec2 .cont_wrap img { width: auto; } .sachet_sec2 .cont1 { position: relative; padding-left: var(--_gutter-90); padding-bottom: var(--_gutter-52); isolation: isolate; } .sachet_sec2 .cont1 .img_1 { position: absolute; left: 0; bottom: 0; z-index: -1; width: var(--_gutter-140); } .sachet_sec2 .cont1 .img_2 { width: var(--_gutter-340); } .sachet_sec2 .cont1 .img_3 { width: var(--_gutter-582); } .sachet_sec2 .cont2 { display: flex; justify-content: end; } .sachet_sec2 .cont2.mobile { display: none; } .sachet_sec2 .cont2 .img_4 { width: var(--_gutter-750); } /* Section 3 */ .sachet_sec3 .cont_wrap { display: grid; gap: var(--_gutter-16); width: 90%; max-width: 1050px; } .sachet_sec3 .item { display: flex; gap: var(--_gutter-40); } .sachet_sec3 .item .info { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; padding-left: var(--_gutter-60); } .sachet_sec3 .item .tit { margin-bottom: var(--_gutter-16); color: #121619; font-size: var(--_font-size-32); font-weight: 700; line-height: 1.2; } .sachet_sec3 .item .tit b { font-weight: 700; } .sachet_sec3 .item .desc { color: #555; font-size: var(--_font-size-18); } .sachet_sec3 .item .desc a, .sachet_sec3 .item .desc u { color: #555; text-decoration: underline; text-underline-offset: 4px; } .sachet_sec3 .item .desc b { font-weight: 700; } .sachet_sec3 .item .desc + .desc { margin-top: var(--_gutter-8); } .sachet_sec3 .item .sub { margin-top: var(--_gutter-16); color: #838383; font-size: var(--_font-size-14); } .sachet_sec3 .item .sub .btn_ico { display: inline-flex; vertical-align: top; position: relative; top: 1px; } .sachet_sec3 .item .sub b:first-child { color: #444; } .sachet_sec3 .item .img { flex-shrink: 0; display: grid; place-content: center; width: var(--_gutter-400); aspect-ratio: 1; } .sachet_sec3 .item .img img, .sachet_sec3 .item .img video { width: 100%; object-fit: cover; } .sachet_sec3 .inner > h2 { color: var(--03-greyscale-grey-900121619, #121619); text-align: center; font-family: 'itc-avant-garde-gothic-pro'; font-size: 32px; font-weight: 500; line-height: 38.4px; /* 120% */ letter-spacing: 0.35px; margin-bottom: 32px; } .sachet_sec3 .inner > h2 > span { color:#7A58D8 } /* Section 4-1 */ .sachet_sec4-1 .cont_wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--_gutter-40); max-width: 1640px; padding: 0 var(--_gutter-60); } .sachet_sec4-1 .item .img img { width: 100%; object-fit: cover; } .sachet_sec4-1 .item .tit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gutter-8); margin: var(--_gutter-16) 0 var(--_gutter-8);; color: #121619; font-size: var(--_font-size-24); line-height: 1.2; } .sachet_sec4-1 .item .tit span { color: #838383; font-size: var(--_font-size-16); } .en .sachet_sec4-1 .item .tit span { display: none; } .sachet_sec4-1 .item .desc { color: #555; font-size: var(--_font-size-16); } /* Section 4-2 */ .sachet_sec4-2 .inner .cont_wrap1 { max-width: 1640px; margin-top: var(--_gutter-40); } .sachet_sec4-2 .inner .cont_wrap2 { display: grid; gap: var(--_gutter-60); width: 90%; max-width: 1160px; } .sachet_sec4-2 .item { display: flex; gap: var(--_gutter-40); } .sachet_sec4-2 .item .img { flex-shrink: 0; width: var(--_gutter-480) } .sachet_sec4-2 .item:nth-child(even) .img { order: 1; } .sachet_sec4-2 .item .info { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; gap: var(--_gutter-16); } .sachet_sec4-2 .item .tit { color: #121619; } .sachet_sec4-2 .item .tit:not(:has(.step + br)) { display: flex; align-items: center; gap: var(--_gutter-16); } .sachet_sec4-2 .item .tit:not(:has(.step + br)) b { margin-top: 0; } .sachet_sec4-2 .item .step { padding: 0 var(--_gutter-8); border: 1px solid #000; border-width: 0 1px; font-size: var(--_font-size-24); font-weight: 500; white-space: nowrap; } .sachet_sec4-2 .item .tit b { font-size: var(--_font-size-32); font-weight: 700; } .sachet_sec4-2 .item .desc { color: #444; font-size: var(--_font-size-16); line-height: 1.6; } .sachet_sec4-2 .item .desc b:first-child { color: #121619; font-weight: 700; } .sachet_sec4-2 .item .desc:nth-child(3) ~ .desc { margin-top: calc(var(--_gutter-8) * -1); } /* Section 5 */ .sachet_sec5 .cont_wrap { max-width: 1440px; } .sachet_faq { border-bottom: 1px solid #e1e1e1; } .sachet_faq dt { position: relative; border-top: 1px solid #e1e1e1; } .sachet_faq dt a { display: block; padding: var(--_gutter-16) calc(var(--_gutter-40) + 12px + var(--_gutter-20)) var(--_gutter-16) 0; font-size: var(--_font-size-20); font-weight: 500; color: #121619; line-height: 1.2; cursor: pointer } .sachet_faq dt:first-child { border-color: #121619; } .sachet_faq dt .ico_otc.plus { position: absolute; top: 50%; transform: translateY(-50%); right: var(--_gutter-20); z-index: 1 } .sachet_faq dt .ico_otc.plus::before, .sachet_faq dt .ico_otc.plus::after { transition: rotate 0.2s, opacity 0.2s; } .sachet_faq dt.active .ico_otc.plus::before { rotate: 180deg; } .sachet_faq dt.active .ico_otc.plus::after { opacity: 0; rotate: 90deg; } .sachet_faq dd { display: grid; grid-template-rows: 0fr; color: #555; font-size: var(--_font-size-16); transition: padding 0.2s, grid-template-rows 0.2s; } .sachet_faq dd > div { overflow: hidden; } .sachet_faq dd a { text-decoration: underline; text-underline-offset: 4px; } .sachet_faq .active + dd { grid-template-rows: 1fr; padding-bottom: 1em; padding-right: calc(var(--_gutter-40) + 12px + var(--_gutter-20)); } /* Section 6 */ .sachet_sec6 .sec_tit_visual { position: relative; margin-bottom: var(--_gutter-80); text-align: center; } .sachet_sec6 .sec_tit_visual::before { content: ''; position: absolute; top: 50%; left: 50%; z-index: -1; width: 38%; max-width: 600px; aspect-ratio: 3 / 1; border-radius: 100%; transform: translate(-50%, -50%); filter: blur(60px); opacity: 0.32; } .sachet_sec6 .sec_tit_visual .tit { font-family: 'itc-avant-garde-gothic-pro'; color: #121619; font-size: var(--_font-size-64); font-weight: 500; line-height: 1.2; } .sachet_sec6 .sec_tit_visual img { width: 25%; margin: 0 auto var(--_gutter-16); } .sachet_sec6 .inner { padding-bottom: var(--_gutter-100); } .sachet_sec6 .cont_wrap { display: flex; flex-wrap: wrap; gap: var(--_gutter-32); max-width: 1252px; padding-top: var(--_gutter-60); } .sachet_sec6 .cont1 { flex-grow: 999; width: 296px; } .sachet_sec6 .cont1 .tit { margin-bottom: var(--_gutter-8); font-size: var(--_font-size-32); font-weight: 700; } .sachet_sec6 .cont1 .desc { margin-bottom: var(--_gutter-40); color: #555; font-size: var(--_font-size-14); } @media (max-width: 1000px) { .sachet_sec6 .cont1 .desc { margin-bottom: 0; } } .sachet_sec6 .cont1 ol { position: relative; display: flex; flex-direction: column; gap: var(--_gutter-24); margin-left: 4px; } .sachet_sec6 .cont1 ol::before { content: ''; position: absolute; top: 50%; left: 11px; transform: translateY(-50%); width: 2px; height: calc(90% - 24px); background-color: #000; } @media (max-width: 1000px) { .sachet_sec6 .cont1 ol { display: none; } } .sachet_sec6 .cont1 li { position: relative; color: #555; padding-left: 36px; font-size: var(--_font-size-16); } .sachet_sec6 .cont1 li::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; aspect-ratio: 1 / 1; background-color: #000; border-radius: 100%; } .sachet_sec6 .cont1 li.done::before { background: #000 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABkSURBVHgBrdNRCoAgEIThoYvVzbabdbQpqEAodHbc/1k/dEWgIJIrqrqw4F1gtgZ7iwVmz4l2VPRzsu+V1cGqmDTYLMYeKmHqQhlTNqSxAXpY2AD1MAH1vxbFl3fReaxBNyQ7AeF3hvds58ndAAAAAElFTkSuQmCC') no-repeat center / 50%; } .sachet_sec6 .cont1 li b { color: #000; font-size: var(--_font-size-14); font-weight: 700; line-height: 1.2; } .sachet_sec6 .cont2 { flex-shrink: 0; flex-grow: 1; display: grid; gap: var(--_gutter-40); width: 620px; padding-top: var(--_gutter-47); } @media (max-width: 1000px) { .sachet_sec6 .cont2 { padding-top: 0; } } .sachet_sec6 .cont2 .btn_group { margin-top: calc(var(--_gutter-8) * -1); } .sachet_sec6 .cont2 .btn_group .btn { padding: 0.875em 1.5em; } .sachet_sec6 .step { display: grid; gap: var(--_gutter-16); } .sachet_sec6 .step .notice_comm { width: 100%; font-size: var(--_font-size-14); } .sachet_sec6 .step .form_col > .notice_comm { margin-top: var(--_gutter-16); } .sachet_sec6 .step_tit b { display: block; width: max-content; margin-bottom: var(--_gutter-8); padding: 0.1em 0.5em; color: #fff; font-size: var(--_font-size-16); border-radius: 999em; background-color: #000; line-height: normal; } .sachet_sec6 .step_tit .tit { font-size: var(--_font-size-24); font-weight: 500; line-height: 1.2; } .sachet_sec6 .step1 .check_label { flex: 1; min-width: 135px; } .sachet_sec6 .step4 .tit { font-weight: 700; } .sachet_sec6 .step4 .form_wrap ~ .form_wrap { margin-top: var(--_gutter-8); color: #121619; } .sachet_sec6 .step4 .form_wrap ~ .form_wrap b, .sachet_sec6 .step4 .form_wrap ~ .form_wrap span { color: #121619; } /* Modal */ .popup_comm:is([class*='sachet_'], [class*='_otc'], [class*='privacy_popup']) > .inner { /* padding: var(--_gutter-16) var(--_gutter-16) var(--_gutter-24); */ padding: 16px 16px 24px; } .popup_comm:is([class*='sachet_'], [class*='_otc'], [class*='privacy_popup']) .cont { /* margin-top: var(--_gutter-40); */ margin-top: 40px; } .txt + .popup_comm:is([class*='sachet_'], [class*='_otc'], [class*='privacy_popup']) .cont { /* margin-top: var(--_gutter-16); */ margin-top: 16px; } .popup_comm:is([class*='sachet_'], [class*='_otc'], [class*='privacy_popup']) .popup_close { /* top: var(--_gutter-16); right: var(--_gutter-16); */ top: 14px; right: 16px; } .popup_comm.privacy_popup table { border-collapse: separate; border-spacing: 2px; } .popup_comm:is([class*='sachet_'], [class*='_otc'], [class*='privacy_popup']) .ico_comm.close { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE5SURBVHgB7djbCoJAEAbg0b0QsUIkpHoa30x7s3qbLiKCjleaGymbp93Z1amL/UHQGpwPEfcAYIMLEy+ieJN5wTx53i47+EHE/kz8EaBIHYDECxYONa7Z363/yfOiOnXLgvBdSIsCwVI/scf9uvf9GYDjJPya6sk1UaUpOx8P2693jBrXh+LnrFlMhRtCdcIocDJUL2xKnApqEDYFThUlhY2Jw6CUYGPgsChlmAlOB4WC6eB0UTwuIHPiNy4bgNANRkYZJVqu0rA8oAcVxeuiOvrqSGNRFmVR/47idWTTdAyqrkHi0F9+1BfdYIGDGiuxw4zJrEQZpjv26eKUYKYDsg5OChtrloDFMQqUDo5RobA4RonC4Bg1ShXX2h+jnA4P4Vr7Y1QoGa5zf4xs4fCJdIEztMCgiNj/Bbly2WO1JUebAAAAAElFTkSuQmCC') no-repeat center; background-size: var(--_gutter-16); } .popup_comm:is([class*='sachet_'], [class*='_otc'], [class*='privacy_popup']) .ico_comm.close { background-size: 16px; } .popup_comm.alert_confirm .txt .desc { margin-top: var(--_gutter-8); } .popup_comm.about_sachet_drug { max-width: 440px; } .popup_comm.about_sachet_drug .tit { font-weight: 700; } .popup_comm.about_sachet_drug .cont { display: grid; gap: 16px; margin-top: 20px; } .popup_comm.about_sachet_drug .desc { color: #555; font-size: 16px; } .popup_comm.about_sachet_drug .desc p + p { margin-top: 8px; } .popup_comm.about_sachet_drug .link_txt { position: relative; display: flex; align-items: center; gap: 4px; color: #121619; font-size: 14px; width: max-content; /* text-decoration: underline; */ /* text-underline-offset: 5px; */ } .popup_comm.about_sachet_drug .link_txt::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #121619; } .popup_comm.about_sachet_drug .link_txt .line_parent_b { position: relative; top: -1px; width: 16px; height: auto; aspect-ratio: 1; } .popup_comm.about_sachet_drug .btn { margin-top: 24px; } .popup_comm.sachet_login { max-width: 400px; } .popup_comm.sachet_login .tit { margin-bottom: 4px; color: #121619; font-size: 24px; text-align: center; } .popup_comm.sachet_login .desc { display: grid; gap: 4px; color: #838383; font-size: 13px; text-align: center; } .popup_comm.sachet_login .sachet_form { gap: 0; margin-top: 24px; } .popup_comm.sachet_login .form_row { display: flex; flex-direction: column; gap: 8px; } .popup_comm.sachet_login .form_row ~ .popup_comm.sachet_login .form_row { margin-top: 16px; } .popup_comm.sachet_login .form_row:has([name*='save']) { flex-direction: row; gap: 16px; margin-top: 14px; } .popup_comm.sachet_login .form_row .form_lbl { color: #121619; } .popup_comm.sachet_login .txt_label { display: inline-flex; align-items: center; gap: 8px; } .popup_comm.sachet_login .btn_group { margin-top: 16px; } .popup_comm.sachet_login .btn_group .btn { width: 100%; margin-top: 0; padding: 0.75em 3em; font-size: 18px; text-transform: uppercase; } .popup_comm.sachet_login .link_group { margin-top: 24px; } .popup_comm.sachet_login .link_group a { color: #121619; font-size: var(--_font-size-14); text-decoration: underline; text-underline-offset: 5px; } .popup_comm.sachet_login .link_group a + a { margin-left: var(--_gutter-16); } .popup_comm.sachet_contact_form { max-width: 600px; } .popup_comm.sachet_contact_form .cont_wrap { padding-top: var(--_gutter-8); } .popup_comm.sachet_contact_form .cont1 .tit { font-size: var(--_font-size-24); } .popup_comm.sachet_contact_form .cont1 .desc { margin-bottom: 0; } .popup_comm.sachet_contact_form .step { max-width: 550px; } .popup_comm.sachet_contact_form .step1 .check_label { min-width: max(135px, 40%); } .popup_comm.sachet_contact_form .tooltip_layer { max-width: 100%; } .popup_comm.sachet_contact_form .cont2 { width: auto; padding-top: 0; } .popup_comm.sachet_contact_form .cont2 .step_tit .tit { font-size: var(--_font-size-18); } .popup_comm.sachet_contact_form .step .form_col > .notice_comm { margin-top: var(--_gutter-12); } .popup_comm.sachet_contact_form .form_wrap:has(.select ~ .textfield) .textfield { width: 30%; } .popup_comm.sachet_contact_form .btn_group { text-align: center; } .popup_comm.sachet_contact_form .btn_group .btn { padding: 0.875em 1.5em; margin-top: var(--_gutter-40); } .popup_comm.sachet_form_done2 { max-width: 600px; } .popup_comm.sachet_form_done2 .cont1, .popup_comm.sachet_form_done2 .cont2 { max-width: calc(100% - 5px); } .popup_comm.sachet_form_done2 .cont1 { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--_gutter-16); padding-top: var(--_gutter-32); } .popup_comm.sachet_form_done2 .cont1 .tit { color: #121619; font-size: var(--_font-size-18); font-weight: 700; } .popup_comm.sachet_form_done2 .cont1 .desc { margin-top: -12px; text-align: center; color: #444; font-size: var(--_font-size-14); } .popup_comm.sachet_form_done2 .cont1 .btn { margin: 0; padding: 0.7em 1.5em; } .popup_comm.sachet_form_done2 .cont2 { display: flex; gap: var(--_gutter-16); margin-top: var(--_gutter-40); } .popup_comm.sachet_form_done2 .item { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; flex: 1; padding: var(--_gutter-40) 0; border: 1px solid #e1e1e1; border-radius: 8px; } .popup_comm.sachet_form_done2 .item img { width: auto; } .popup_comm.sachet_form_done2 .item .item_tit { color: #121619; font-size: var(--_font-size-18); margin: 8px auto 4px; } .popup_comm.sachet_form_done2 .item .item_desc { color: #838383; font-size: var(--_font-size-14); } .popup_comm.sachet_form_done2 .item:hover { border-color: #000; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08); } .popup_comm.sachet_loading { top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: max-content; margin: 0; } .popup_comm.inquiry_popup {max-width: 560px} .inquiry_popup .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label {margin-bottom: 10px} /*.inquiry_popup .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label {width: 100%; max-width: 100%; min-width: 100%}*/ .inquiry_popup .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w .plan_export label {margin-bottom: 0} .txt_indent {display: block} /* 사용자재구축 Mobile ************************/ @media (max-width: 768px){ /* 사용자재구축: html:has(.marketing_sample) */ .content .marketing_sample{ /* Variables */ --_font-size-64: 64px; --_font-size-60: 60px; --_font-size-48: 48px; --_font-size-36: 36px; --_font-size-32: 32px; --_font-size-24: 24px; --_font-size-20: 20px; --_font-size-18: 18px; --_font-size-16: 16px; --_font-size-14: 14px; --_font-size-13: 13px; --_font-size-12: 12px; --_gutter-80: 80px; --_gutter-60: 60px; --_gutter-50: 50px; --_gutter-47: 47px; --_gutter-40: 40px; --_gutter-37: 37px; --_gutter-36: 36px; --_gutter-32: 32px; --_gutter-26: 26px; --_gutter-24: 24px; --_gutter-20: 20px; --_gutter-18: 18px; --_gutter-16: 16px; --_gutter-15: 15px; --_gutter-14: 14px; --_gutter-12: 12px; --_gutter-10: 10px; --_gutter-8: 8px; } .content .marketing_sample { padding-bottom: 20px; } .content .popup_comm.marketing_sample { padding-bottom: 0; } .sachet_sec1 .cont1 .txt ~ div { display: none; } .en.mobile_wrap .sachet_sec1 .cont1 .txt ~ div { display: block; font-size: 14px; margin-bottom: 24px; } /* Form */ .content .sachet_form .form_row { grid-template-columns: 1fr; gap: var(--_gutter-8); } .content .sachet_form .form_lbl br { display: none; } .content .textfield, .content .select { min-height: 44px; } /* Button */ .content .marketing_sample .btn { padding: 0.625em 0.75em; } .content .marketing_sample .btn:has(.ico_comm) { padding-right: 1em; } /* Sticky nav */ .content .sachet_sticky_nav { --_nav-gap: 4px; padding: 0; } .sachet_sticky_nav:has(.active) ul { box-shadow: none; border-radius: 0; } .content .sachet_sticky_nav li.active a { color: #000; background-color: #fff; border-radius: 0; } .content .sachet_sticky_nav a { display: flex; justify-content: center; align-items: center; padding: 0.375em 1em; font-size: var(--_font-size-16); line-height: normal; border-radius: 999rem; transition: color 0.2s, background-color 0.2s; white-space: nowrap; } .content .sachet_sticky_nav:has(.active) .nav_wrap { padding-top: var(--_gutter-8); } .content .sachet_sticky_nav:has(.active) a { /* padding: 0.58em 1.33em; */ font-size: 16px; } .content .sachet_sticky_nav .nav_wrap { overflow-x: auto; justify-content: start; padding-left: var(--_gutter-20); padding-right: var(--_gutter-20); } .content .sachet_sticky_nav .nav_wrap::-webkit-scrollbar { width: 0; height: 0; } .content .sachet_sticky_nav a { padding-top: 0.375em; padding-bottom: 0.375em; } .content .sachet_sticky_nav ul + ul { margin-left: 0; } .content [class*='sachet_sec'] .inner { padding: var(--_gutter-40) var(--_gutter-20); } .content [class*='sachet_sec'] .inner .sec_tit { text-wrap: balance; } .content [class*='sachet_sec'] .inner .sec_tit .cont_wrap ~ .sec_tit { margin: var(--_gutter-80) auto var(--_gutter-24); } .content [class*='sachet_sec'] .inner .sec_tit .tit { /*font-size: var(--_font-size-20);*/ } .content [class*='sachet_sec'] .inner .sec_tit p { /*font-size: var(--_font-size-14);*/ } .en .content [class*='sachet_sec'] .inner .sec_tit { text-transform: unset; } .content [class*='sachet_sec'] .inner .btn_group { margin-top: 24px; } input.datepicker_expected { padding-right: 32px; background-image: url('/v2/img/ico_date.png'); background-repeat: no-repeat; background-size: 16px; background-position: right 12px center; } /* Section 1 */ .content .sachet_sec1 .inner { padding: var(--_gutter-32) 27.5px var(--_gutter-24); } .content .sachet_sec1 .cont_wrap { flex-direction: column; gap: var(--_gutter-37); } .content .sachet_sec1 .cont1 { text-align: center; } .content .sachet_sec1 ul::before { height: 2px; } .content .sachet_sec1 .txt { display: flex; flex-direction: column; align-items: center; font-size: var(--_font-size-24); } .content .sachet_sec1 .txt div:has(ul) { white-space: nowrap; } .content .sachet_sec1 .cont1 .txt { font-size: var(--_font-size-24); } .content .sachet_sec1 .cont2 img { margin: auto; } /* Section 2 */ .content .sachet_sec2 .sec_tit .tit { font-weight: 700; } .content .sachet_sec2 .cont_wrap { padding: 0; } .content .sachet_sec2 .cont1 { margin-bottom: var(--_gutter-24); padding-left: 45px; padding-bottom: 20px; } .sachet_sec2 .cont2.desktop { display: none; } .sachet_sec2 .cont2.mobile { display: flex !important; } /* Section 3 */ .content .sachet_sec3 .cont_wrap { width: unset; } .content .sachet_sec3 .item { flex-direction: column; gap: 0; } .content .sachet_sec3 .info { padding: var(--_gutter-24) var(--_gutter-16); } .content .sachet_sec3 .item .tit { margin-bottom: var(--_gutter-8); font-size: var(--_font-size-24); text-wrap: balance; } .content .sachet_sec3 .item .tit b { font-weight: 600; } .content .sachet_sec3 .desc { font-size: var(--_font-size-16); } .content .sachet_sec3 .desc br { display: none; } .content .sachet_sec3 .img { display: block; width: 100%; max-width: 100%; aspect-ratio: auto; } .content .sachet_sec3 .img img { max-width: 100%; } /* Section 4-1 */ .content .sachet_sec4-1 .cont_wrap { grid-template-columns: 1fr; gap: var(--_gutter-32); padding: 0; } .content .sachet_sec4-1 .item { text-align: center; } .content .sachet_sec4-1 .item .img { width: 35.83%; margin: auto; } .content .sachet_sec4-1 .item .img img { margin: auto; max-width: 100%; } .content .sachet_sec4-1 .item .tit { justify-content: center; margin-bottom: 4px; } .content .sachet_sec4-1 .item .tit b { display: none; } .content .sachet_sec4-1 .item .tit span { color: #000; font-weight: 600; font-size: var(--_font-size-18); } .content .sachet_sec4-1 .item .desc { color: #555; font-size: var(--_font-size-14); text-wrap: balance; } /* Section 4-2 */ .content .sachet_sec4-2 .cont_wrap { margin-top: 0; } .content .sachet_sec4-2 .cont_wrap1 .img { margin: auto; } .content .sachet_sec4-2 .cont_wrap1 .img img { max-width: 100%; } .content .sachet_sec4-2 .cont_wrap2 { width: 100%; } .content .sachet_sec4-2 .item { flex-direction: column; gap: var(--_gutter-16); } .content .sachet_sec4-2 .item .img { width: 100%; margin: auto; } .content .sachet_sec4-2 .item .img img { max-width: 100%; } .content .sachet_sec4-2 .item:nth-child(even) .img { order: 0; } .content .sachet_sec4-2 .item .step { font-weight: 600; font-size: var(--_font-size-16); } .content .sachet_sec4-2 .item .tit { display: flex; align-items: center; gap: var(--_gutter-16); line-height: 1.2; } .en .content .sachet_sec4-2 .item .tit { flex-direction: column; align-items: flex-start; gap: 8px; } .content .sachet_sec4-2 .item .tit b { font-weight: 600; font-size: var(--_font-size-20); } .content .sachet_sec4-2 .item .tit br { display: none; } .content .sachet_sec4-2 .item .tit:is(.en.item:first-child .tit) { display: block; } .content .sachet_sec4-2 .item .tit:is(.en.item:first-child .tit) br { display: block; } .content .sachet_sec4-2 .item .tit:is(.en.item:first-child .tit) b { display: block; margin-top: 8px; } .content .sachet_sec4-2 .item .desc { line-height: 1.4; } .content .sachet_sec4-2 .item .desc ~ .desc { margin-top: 0; } /* Section 5 */ .content .sachet_faq dt a { max-width: 90%; font-size: 16px; font-weight: 500; padding: 16px 0; } .content .sachet_faq dt .ico_otc.plus { right: var(--_gutter-12); } .content .sachet_faq dd { padding: 0; font-size: 14px; } .content .sachet_faq .active + dd { padding-bottom: var(--_gutter-12); } .content .sachet_faq dd > div { /*margin: 0 var(--_gutter-12);*/ } /* Section 6 */ .content .sachet_sec6 .sec_tit_visual { margin: 15.45px 9px 53.55px 10px; } .content .sachet_sec6 .sec_tit_visual::before { width: 94.33%; aspect-ratio: 316 / 120; } .content .sachet_sec6 .sec_tit_visual img { width: 75.95%; max-width: 100%; } .content .sachet_sec6 .sec_tit_visual .tit { font-weight: 600; font-size: var(--_font-size-24); } .content .sachet_sec6 .cont_wrap { gap: var(--_gutter-24); padding-top: var(--_gutter-40); } .content .sachet_sec6 .cont1 { width: 100%; } .content .sachet_sec6 .cont1 .tit { font-size: var(--_font-size-20); } .content .sachet_sec6 .cont1 .desc br:not(:first-of-type) { display: none; } .content .sachet_sec6 .cont2 { width: 100%; } .content .sachet_sec6 .cont2 .step_tit .tit { font-weight: 600; font-size: var(--_font-size-18); } .content .sachet_sec6 .cont2 .sachet_form .textfield { flex-grow: 1; } .content .sachet_sec6 .cont2 .step .form_col > .notice_comm { margin-top: var(--_gutter-12); } .content .sachet_sec6 .cont2 .step1 .check_label { min-width: 100%; min-height: 56px; } .content .sachet_sec6 .cont2 .step2 .textfield { width: 100%; } .content .sachet_sec6 .cont2 .step2 i:not([class]):empty { display: none; } .content .sachet_sec6 .cont2 .step2 .form_wrap:has(.check_label .ico_comm) { row-gap: var(--_gutter-16); } .content .sachet_sec6 .cont2 .step4 textarea.textfield { margin-top: -4px; } .content .sachet_sec6 .cont2 .step4 .notice_comm { margin-top: var(--_gutter-8); } .content .sachet_sec6 .cont2 .step4 .form_wrap ~ .form_wrap { margin-top: var(--_gutter-24); } .content .sachet_sec6 .cont2 .form_wrap:has(.select ~ .textfield) .textfield { width: 30%; } .content .sachet_sec6 .cont2 .btn_group { margin-top: -8px; } .content .sachet_sec6 .cont2 .btn_group .btn { padding: 0.75em 1.5em; } /* Modal */ .popup_comm.sachet_contact_form .sachet_sec6 .cont_wrap { padding-top: 0; } .popup_comm.sachet_contact_form .btn_group .btn { width: 100%; } .popup_comm.sachet_form_done2 .ico_otc.step_done { width: 60px; } .popup_comm.sachet_form_done2 .cont2 { flex-direction: column; } .popup_comm.sachet_form_done2 .item { padding: 33.5px 0; } } /* Image max-width */ img[src*='/service_otc/sachet_'] { --_image-max-width: 100%; max-width: min(calc(var(--_image-max-width) / 2 * 1px), 100%); } img[src$='PopupImage1_ko.png'], img[src$='PopupImage2_ko.png'] { --_image-max-width: 160; } img[src$='Section1Image1_ko.png'] { --_image-max-width: 1246; } img[src$='Section2Image1_ko.png'] { --_image-max-width: 280; } img[src$='Section2Image1_ko_m.png'] { --_image-max-width: 120; } img[src$='Section2Image2_en.png'], img[src$='Section2Image2_ko.png'] { --_image-max-width: 679; } img[src$='Section2Image2_en_m.png'], img[src$='Section2Image2_ko_m.png'] { --_image-max-width: 263; } img[src$='Section2Image3_en.png'], img[src$='Section2Image3_ko.png'] { --_image-max-width: 1164; } img[src$='Section2Image3_en_m.png'], img[src$='Section2Image3_ko_m.png'] { --_image-max-width: 498; } img[src$='Section2Image4_en.png'], img[src$='Section2Image4_ko.png'] { --_image-max-width: 1500; } img[src$='Section2Image4_en_m.png'], img[src$='Section2Image4_ko_m.png'] { --_image-max-width: 644; } img[src$='Section3Image1_ko.png'], img[src$='Section3Image2_ko.png'], img[src$='Section3Image3_ko.png'], img[src$='Section3Image4_ko.png'], img[src$='Section3Image5_ko.png'], img[src$='Section3Image6_ko.png'] { --_image-max-width: 800; } img[src$='Section3Image1_ko_m.png'], img[src$='Section3Image2_ko_m.png'], img[src$='Section3Image3_ko_m.png'], img[src$='Section3Image4_ko_m.png'], img[src$='Section3Image5_ko_m.png'], img[src$='Section3Image6_ko_m.png'] { --_image-max-width: 670; } img[src$='Section4-1Image1_ko.png'], img[src$='Section4-1Image2_ko.png'], img[src$='Section4-1Image3_ko.png'] { --_image-max-width: 960; } img[src$='Section4-1Image1_ko_m.png'], img[src$='Section4-1Image2_ko_m.png'], img[src$='Section4-1Image3_ko_m.png'] { --_image-max-width: 240; } img[src$='Section4-2Image0_ko.png'], img[src$='Section4-2Image0_en.png'] { --_image-max-width: 3280; } img[src$='Section4-2Image0_ko_m.png'], img[src$='Section4-2Image0_en_m.png'] { --_image-max-width: 676; } img[src$='Section4-2Image1_ko.png'], img[src$='Section4-2Image2_ko.png'], img[src$='Section4-2Image3_ko.png'], img[src$='Section4-2Image4_ko.png'], img[src$='Section4-2Image5_ko.png'], img[src$='Section4-2Image6_ko.png'] { --_image-max-width: 960; } img[src$='Section6Image1_ko.png'] { --_image-max-width: 468; } /*for sachet_form_done, sachet_duplicate cancel button - 250312 jrp*/ .sachet_popup_close_btn{ display: inline-flex; justify-content: center; align-items: center; min-width: 60px !important; } .grade { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(159deg) brightness(100%) contrast(101%) } .sachet_sec1 {padding-top: 0} .sachet_sec1 .d-flex { align-items: flex-start} .sachet_sec1_con {padding: 80px 0 40px;} .flex_row_reverse {flex-direction: row-reverse;} .flex-wrap {flex-wrap: wrap} .asterisk img {max-width: 100%} .item_sachet , .item_sachet img {width: 48px; height: 48px} .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label.type2.sachet_volume_none{display: none} .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label.type2.sachet_volume_blk{display: block} .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label.sachet_volume_type_off {display: none} .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label.sachet_volume_type_on {display: block} .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label.type2 {cursor:pointer} .sec>.inner { max-width: 100%; padding: 0; margin: 0 auto; } .sec.sachet_sec1 > .inner{ max-width: 1248px; margin: 0 auto; padding: 0; } .sachet_sec2 {padding: 80px 0} .section_vid .video_area { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; } .section_vid .video_area video { display: block; width: 100%; transform-origin: center top; } .d-flex {display: flex; align-items: center; justify-content: space-between; width: 100%;} .sachet_service_box {width: 50%} .sachet_sec3 { padding: 60px 0; text-align: center; background:#fff; text-align: left } .sachet_service_box > h3 { width: 100%; color: var(--04-greyscale-grey-1000000000, #000); font-family: 'itc-avant-garde-gothic-pro'; font-size: 28px; font-weight: 500; line-height: 33.6px; /* 120% */ letter-spacing: 0.35px; margin-bottom: 8px; text-align: left; } .sachet_service_box .sachet_sec3_desc { width: 100%; color: var(--04-greyscale-grey-700555555, #555); font-size: 16px; font-weight: 400; line-height: 22.4px; /* 140% */ letter-spacing: 0.35px; padding-bottom: 16px; } table.tbl_sachets {width: 100%; border-top: 1px solid #121619; margin-top: 16px;} table.tbl_sachets th { color: var(--04-greyscale-grey-1000000000, #000); font-size: 16px; font-weight: 500; line-height: 19.2px; /* 120% */ letter-spacing: 0.35px; padding: 16px 0 20px; border-bottom: 1px solid #e1e1e1; text-align: left } table.tbl_sachets td { padding: 20px 0; border-bottom: 1px solid #e1e1e1; text-align: left; color: var(--04-greyscale-grey-1000000000, #000); font-size: 16px; font-weight: 500; line-height: 19.2px; /* 120% */ letter-spacing: 0.35px; } table.tbl_sachets .center {text-align: center} table.tbl_sachets td.border-none {border:0} .double-border { background-color: var(--04-greyscale-white-ffffff, #FFF); border: 8px solid rgba(128, 102, 200, 0.32); padding: 32px 40px 24px 40px; width: 50%; position: relative; margin: 0 auto; border-radius: 16px; overflow: hidden; } .double-border::before { background: none; border: 1px solid #8066C8; content: ""; display: block; position: absolute; top: 0; left:0; right: 0; bottom: 0; pointer-events: none; border-radius: 8px; } .flat-border { display: flex; padding: 41px 40px 24px; flex-direction: column; align-items: center; flex: 1 0 0; align-self: stretch; border-radius: 16px; background: var(--04-greyscale-grey-50-fbf-6-f-6, #F7F7F7) } .align-flex-end {align-items: flex-end;} .sec.sachet_sec4 {background:#fff} .sec.sachet_sec4 > .inner { max-width: 1100px; margin:0 auto; padding: 60px 0 40px; } .sachet_sec4_box_ko { width: 100%; height: 668px; padding: 110px 44px 60px; background: url(/v2/img/sachet/how_thumb_bg_ko.png) no-repeat 0 0; background-size: cover; } .sachet_sec4_box_en { width: 100%; height: 668px; padding: 110px 44px 60px; background: url(/v2/img/sachet/how_thumb_bg_en.png) no-repeat 0 0; background-size: contain; } .sachet_sec4_box_ko li, .sachet_sec4_box_en li { margin-bottom: 50px } .sachet_sec4_box_ko li:last-child, .sachet_sec4_box_en li:last-child {margin: 0} .sachet_sec4_box_ko li img, .sachet_sec4_box_en li img {max-width: 277px} .how_pop_fomula, .how_pop_design {cursor: pointer} .pop_how_box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 440px; background:#fff; z-index: 10001 } .pop_how_box .pop_how_inner { position: relative; padding: 0 20px 32px; } .pop_how_box .pop_how_inner .pop_how_close { position: absolute; top: 20px; right: 20px; cursor: pointer } .pop_how_box .pop_how_inner > h3 {padding: 20px 0} .pop_how_box .pop_how_inner .pop_how_desc { padding: 24px 0; font-size: 14px; font-weight: 400; line-height: 19.6px; /* 140% */ letter-spacing: 0.35px; } button.btn_pop_how { display: flex; width: 108px; height: 40px; margin: 0 auto; padding: 6px 20px; justify-content: center; align-items: center; background:#000; color:#fff; font-size: 16px; font-weight: 600; line-height: 19.2px; /* 120% */ letter-spacing: 0.35px; cursor: pointer } .sachet_sec5 {background:#fff} .sec.sachet_sec5 > .inner { max-width: 1100px; margin:0 auto; padding: 40px 0 60px; text-align: center; } .sec.sachet_sec5 > .inner .d-flex { margin-top: 32px; gap: 24px } .sec.sachet_sec5 > .inner > h2, .sec.sachet_sec6 > .inner > h2, .sec.sachet_sec7 > .inner > h2 { color: var(--04-greyscale-grey-1000000000, #000); text-align: center; font-family: 'itc-avant-garde-gothic-pro'; font-size: 32px; font-weight: 500; line-height: 38.4px; /* 120% */ letter-spacing: 0.35px; } .sec.sachet_sec5 > .inner span, .sec.sachet_sec6 > .inner span, .sec.sachet_sec7 > .inner span { color:#7A58D8 } .sec.sachet_sec6 > .inner { max-width: 1248px; margin:0 auto; padding: 60px 0 40px; text-align: center; } .sec.sachet_sec6 > .inner .sachet_sec6_mr {margin-top: 24px} .sec.sachet_sec7 > .inner { max-width: 1248px; margin:0 auto; padding: 0 0 60px; text-align: center; } .sec.sachet_sec7 > .inner .d-flex { margin-top: 24px; gap: 16px } .sec.sachet_sec7 > .inner .d-flex div { width: 100%; max-width: calc(50% - 8px); } .sachet_sec8, .sachet_sec9, .sachet_sec10 {background:#fff} .sec.sachet_sec8 > .inner { max-width: 1248px; margin:0 auto; padding: 60px 0; } .sec.sachet_sec8 .sachet_sec8_box { height: 340px; border-radius: 16px; background: var(--04-greyscale-grey-200-e-1-e-1-e-1, #E1E1E1); overflow: hidden; } .sec.sachet_sec8 .sachet_sec8_box img { max-width: 520px; } .sec.sachet_sec8 .sachet_sec8_box > .d-flex { displat: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; width: 100%; } .sec.sachet_sec8 .sachet_sec8_box .sachet_sec8_desc{ color: var(--04-greyscale-grey-1000000000, #000); font-family: 'itc-avant-garde-gothic-pro'; font-size: 32px; font-weight: 500; line-height: 38.4px; /* 120% */ letter-spacing: 0.35px; text-align: left; } .sec.sachet_sec8 .sachet_sec8_box button.btn-sachet_sec8 { display: flex; height: 40px; margin-top: 32px; padding: 6px 20px 6px 16px; justify-content: center; align-items: center; background: var(--04-greyscale-grey-900121619, #121619); color: var(--04-greyscale-white-ffffff, #FFF); text-align: center; font-size: 16px; font-weight: 600; line-height: 19.2px; letter-spacing: 0.35px; cursor: pointer; } .sec.sachet_sec9 > .inner { max-width: 810px; margin:0 auto; padding: 60px 0; } .sachet_sec10 {padding: 60px 0 20px} .sec.sachet_sec10 > .inquiry > h2 { color: var(--04-greyscale-grey-1000000000, #000); text-align: center; font-family: 'itc-avant-garde-gothic-pro'; font-size: 32px; font-weight: 500; line-height: 38.4px; /* 120% */ letter-spacing: 0.35px; margin-bottom: 8px; } .sec.sachet_sec10 > .inquiry .sachet_sec10_desc { color: var(--04-greyscale-grey-700555555, #555); text-align: center; font-size: 16px; font-weight: 400; line-height: 22.4px; /* 140% */ letter-spacing: 0.35px; margin-bottom: 32px; } .inquiry_step_box {margin-bottom: 16px; margin-top:40px;} .inquiry_step_box .inquiry_step_stit { border-left: 1px solid #FF4B91; border-right: 1px solid #FF4B91; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #FF4B91 0%, #0080FF 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 18px; font-weight: 700; } .inquiry_step_box .inquiry_step_stit.first {margin-top: 0} .inquiry_step_tit { display: flex; align-items: center; justify-content: flex-start; overflow: hidden; width: 100%; height: auto; margin-top: 8px; color: #000; font-size: 24px; font-weight: 500; line-height: 28.8px; /* 120% */ letter-spacing: 0.35px; } .inquiry_step_tit img { max-width: 9px; transform: translate(2px, -4px); } .inquiry_step_desc { color: #555555; font-size: 14px; font-weight: 400; line-height: 16.8px; /* 120% */ letter-spacing: 0.35px; margin-top: 8px; } .half_box { display: flex; align-items: center; gap: var(--_gutter-8); } .half_box label {width: 50%; height: 71px} .marketing_sample .sachet_type_box label.check_label {width: 16.666%} .txt_label_colum { text-align: center; font-size: 12px; font-weight: 400; line-height: 14.4px; /* 120% */ letter-spacing: 0.35px; } .txt_label_colum b { display: block; font-size: 16px; line-height: 19.2px; /* 120% */ font-weight: 700; margin-bottom: 4px; } .txt_label_sachet_type { display: flex; align-items: center; text-align: center; font-size: 14px; font-weight: 600; line-height: 16.8px; /* 120% */ letter-spacing: 0.35px; height: 24px; margin-top: 9px } .wrap.ko h2 { font-family: 'Wanted Sans Variable', 'Wanted Sans', sans-serif !important; font-weight: 600 !important } .wrap.ko h3 { font-family: 'Wanted Sans Variable', 'Wanted Sans', sans-serif !important; font-weight: 500 !important } .export_country_other_box {width: 100%;} .export_country_other_box_pop {width: 100%} .sachet_sec1_con {text-align: left} .sachet_sec1_con.lang_ko > h2 { color: var(--04-greyscale-grey-1000000000, #000); font-family: 'Wanted Sans Variable', 'Wanted Sans', sans-serif; font-size: 36px; font-weight: 700; line-height: 43.2px; /* 120% */ letter-spacing: 0.35px; margin-bottom: 4px } .sachet_sec1_con.lang_ko > h2 span { font-size: 48px; font-weight: 700; line-height: 57.6px; /* 120% */ background: var(--01-Primary-Gradient-03, linear-gradient(90deg, #FF4B91 0%, #0080FF 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .sachet_sec1_con.lang_ko .sachet_sec1_desc { padding-bottom: 32px; color: var(--04-greyscale-grey-1000000000, #000); font-size: 20px; font-weight: 500; line-height: 28px; /* 140% */ letter-spacing: 0.35px; } .sachet_sec1_con.lang_ko .sachet_sec1_txt1 { color: var(--03-greyscale-grey-800444444, #444); font-size: 16px; font-weight: 500; line-height: 19.2px; /* 120% */ letter-spacing: 0.35px; } .sachet_sec1_con.lang_ko.sachet_sec1_txt2 { display: flex; align-items: center; padding: 5px 0 10px; color: var(--04-greyscale-grey-1000000000, #000); font-size: 36px; font-weight: 600; line-height: 43.2px; /* 120% */ letter-spacing: 0.35px; } .sachet_sec1_con.lang_ko .sachet_sec1_txt2 > span { display: inline-block; margin-left: 5px; font-size: 28px; font-weight: 600; line-height: 38.4px; /* 137.143% */ letter-spacing: 0.35px; } .sachet_sec1_con.lang_ko .sachet_sec1_txt3 { color: var(--04-greyscale-grey-600838383, #838383); font-size: 13px; font-weight: 400; line-height: 15.6px; /* 120% */ letter-spacing: 0.35px; } .sachet_sec1_con.lang_ko button.btn-sachet_sec1 { display: flex; height: 48px; margin-top: 48px; padding: 8px 24px 8px 20px; justify-content: center; align-items: center; background: var(--04-greyscale-grey-900121619, #121619); color: var(--04-greyscale-white-ffffff, #FFF); text-align: center; font-size: 16px; font-weight: 600; line-height: 19.2px; /* 120% */ letter-spacing: 0.35px; cursor: pointer } .sachet_sec1_con > h2 { color: var(--04-greyscale-grey-1000000000, #000); font-family: 'itc-avant-garde-gothic-pro'; font-size: 48px; font-style: normal; font-weight: 500; line-height: 57.6px; /* 120% */ letter-spacing: 0.35px; margin-bottom: 8px } .sachet_sec1_con > h2 span { background: var(--01-Primary-Gradient-03, linear-gradient(90deg, #FF4B91 0%, #0080FF 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .sachet_sec1_con .sachet_sec1_desc { padding-bottom: 32px; color: var(--04-greyscale-grey-1000000000, #000); font-size: 20px; font-weight: 500; line-height: 28px; /* 140% */ letter-spacing: 0.35px; } .sachet_sec1_con .sachet_sec1_txt1 { color: var(--03-greyscale-grey-800444444, #444); font-size: 16px; font-weight: 500; line-height: 19.2px; /* 120% */ letter-spacing: 0.35px; } .sachet_sec1_con .sachet_sec1_txt2 { display: flex; align-items: center; padding: 5px 0 10px; color: var(--04-greyscale-grey-1000000000, #000); font-size: 36px; font-weight: 600; line-height: 43.2px; /* 120% */ letter-spacing: 0.35px; } .sachet_sec1_con .sachet_sec1_txt2 > span { display: inline-block; margin-left: 5px; font-size: 28px; font-weight: 600; line-height: 38.4px; /* 137.143% */ letter-spacing: 0.35px; } .sachet_sec1_con .sachet_sec1_txt3 { color: var(--04-greyscale-grey-600838383, #838383); font-size: 13px; font-weight: 400; line-height: 15.6px; /* 120% */ letter-spacing: 0.35px; } button.btn-sachet_sec1 { display: flex; height: 48px; margin-top: 48px; padding: 8px 24px 8px 20px; justify-content: center; align-items: center; background: var(--04-greyscale-grey-900121619, #121619); color: var(--04-greyscale-white-ffffff, #FFF); text-align: center; font-size: 16px; font-weight: 600; line-height: 19.2px; /* 120% */ letter-spacing: 0.35px; cursor: pointer } button.btn-sachet_sec1 img {max-width: 26px; margin-left: 5px} .btn_w { width: 100%; text-align: center; } .btn_w a { display: inline-flex; height: 48px; margin: 40px 0 60px; padding: 8px 24px; justify-content: center; align-items: center; gap: 4px; color: #fff; text-align: center; font-size: 16px; font-weight: 600; line-height: 19.2px; /* 120% */ letter-spacing: 0.35px; background:#121619; } .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label {width: 192px; min-width: 192px} .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label.type2 {width: auto; min-width: auto} .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label.type2 span.txt_label { text-align: center; font-size: 14px; font-weight: 400; line-height: 16.8px; /* 120% */ letter-spacing: 0.35px; } .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label > span.w100 {display: block; width: 100%; max-width: 100%; margin-bottom: 12px} .quick-menu-wrap{width:100%;height:auto;position:sticky;left:0;top:55px;background:#f7f7f7;z-index:2;display:flex;align-items: center;justify-content: center;} .quick-menu-wrap .rela{width:100%;display:flex;align-items: center;justify-content: center; margin: 0 20px} .quick-menu-wrap ul{padding:8px 0;display:flex;align-items: center;justify-content: center;} .quick-menu-wrap ul li{padding:0 8px;position:relative;display:inline-flex;align-items: center;justify-content: center;} .quick-menu-wrap ul li:before{content:"";width:1px;height:20px;overflow:Hidden;display:block;background:#C4C4C4;position:absolute;right:0;top:50%;margin-top:-10px;} .quick-menu-wrap a{display:inline-flex;align-items: center;justify-content: center;padding:7px 16px;font-size:16px;color:#121619;font-weight:600;} .quick-menu-wrap a.on{background:#000;color:#fff; border-radius: 30px} .quick-menu-wrap button{background:transparent;border:0;cursor:pointer;display:inline-flex;align-items: center;justify-content: center;padding:7px 16px;font-size:16px;color:#121619;font-weight:600;} .quick-menu-wrap button.on{border-radius:20px;background:#121619;color:#fff;} .quick-menu-wrap.fixed{gap:8px;background:transparent;padding-top:16px;overflow-y:hidden;padding-bottom:5px; border-bottom: none;} .quick-menu-wrap.fixed ul{padding:2px 3px;border-radius: 30px;background: #FFF;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);} .quick-menu-wrap.fixed ul li{padding:0 4px; height: 40px} .quick-menu-wrap.fixed ul li:first-child{padding-left:0;} .quick-menu-wrap.fixed ul li:last-child{padding-right:0;} .quick-menu-wrap.fixed button{min-width:105px;height:40px;border-radius: 30px;margin-left:8px;background: #FFF;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);} .quick-menu-wrap.fixed button.on{border-radius:20px;background:#121619;color:#fff;} .quick-menu-wrap.fixed ul li:last-child:before{display:none;} .gwp-banner-wrap{width:100%;height:auto;overflow:hidden;background: linear-gradient(0deg, #F4C0D4 0%, #F4C0D4 100%), #FFC9DE;} .gwp-banner-wrap .rela{display:flex;align-items: center;justify-content: center;width:calc( 100% - 40px );max-width:1248px;height:auto;overflow:hidden;margin:0 auto;} .gwp-banner-wrap .scont{gap:24px;width:100%;flex:1;display:flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;} .gwp-banner-wrap .scont .mdesc{font-size:36px;color:#000;font-weight:600;position:relative;} .gwp-banner-wrap .scont .mdesc:after{display:none;content:"";width:26px;height:4px;overflow:hidden;background:#000;position:absolute;right:-34px;bottom:0;} .gwp-banner-wrap .scont .mtit{font-size:48px;color:#000;font-weight:700;transition:all .5s;opacity:0;transform:translateY(30px);} .gwp-banner-wrap.on .scont .mtit{opacity:1;transform:translateY(0);transition-delay:1s;} .gwp-banner-wrap.on .scont .mdesc:after{display:block;} .gwp-banner-wrap .spic{width:671px;} .gwp-banner-wrap .spic img{width:100%;float:left;} /*전화번호 지역 셀렉트 관련 추가*/ .select2-container{ width:140px !important; height:40px; margin-right:8px; } .select2-dropdown--below{ width: 280px !important; background-color:#fff; color:#000; } .select2-selection__rendered{ color:#000 !important; font-size:14px !important ; } .select2-selection__arrow {display: none !important;} .select2-container--default .select2-selection--single { border: 1px solid #ddd !important; border-radius: 0 !important; height:100% !important; display:flex; padding:6px 1px; color:#000; background-color:#fff; font-weight:600; background-image: url(/v2/img/ico_down_b.png); } .select2-container--default .select2-selection--single .select2-selection__rendered{ height: 40px !important; line-height: 40px !important; font-weight: 400; } .select2-container--default .select2-selection--single .select2-selection__clear{ display: none !important; padding-right: 15px !important; } #inquiry_phone{ width:256px;} .scont button { margin-top: 40px; height: 48px; padding: 0 20px; overflow: hidden; border: 0; gap: 4px; background: linear-gradient(90deg, #FF4B91 0%, #0080FF 100%); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .sec.sachet_sec3>.inner {max-width: 1100px; margin: 0 auto} .inquiry_popup .marketing_sample .form_wrap {flex-wrap: wrap; justify-content: flex-start;} .inquiry_popup .marketing_sample .sachet_type_box label.check_label {width: 32%} .popup_comm.inquiry_complete_popup{min-width:600px;} .complete-register-cont-wrap{margin-top:16px;width:100%;height:auto;text-align:center;display:flex;align-items: center;justify-content: center;flex-direction: column;} .complete-register-cont-wrap .mico{width:80px;} .complete-register-cont-wrap .mico img{width:100%;} .complete-register-cont-wrap .mtit{width:100%;height:auto;margin-top:16px;font-size:18px;color:#121619;font-weight:700;line-height:1.2em;letter-spacing: 0.35px;} .complete-register-cont-wrap .mdesc{width:100%;height:auto;margin-top:4px;font-size:14px;color:#444444;font-weight:400;line-height:1.4em;letter-spacing: 0.35px;} .complete-register-cont-wrap button{cursor:pointer;margin-top:16px;height:40px;padding:0 20px;display:inline-flex;align-items: center;justify-content: center;border:0;background:#121619;font-size:16px;color:#fff;letter-spacing: 0.35px;font-weight:600;} .complete-register-list-wrap{width:100%;height:auto;margin-top:40px;} .complete-register-list-wrap ul{width:100%;height:auto;display:flex;align-items: center;justify-content: center;gap:16px;} .complete-register-list-wrap ul li{width:100%;flex:unset;height:auto;} .complete-register-list-wrap ul li a{width:100%;height:240px;text-align:center;box-sizing:border-box;padding:16px;overflow:hidden;display:flex;align-items: center;justify-content: center;flex-direction: column; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08);border:1px solid #000;border-radius:8px; } .complete-register-list-wrap ul li a .mico{width:80px;height:auto;overflow:hidden;margin:0 auto;} .complete-register-list-wrap ul li a .mico img{width:100%;} .complete-register-list-wrap ul li a .mtit{width:100%;height:auto;overflow:hidden;margin-top:8px;font-size:18px;color:#121619;font-weight:600;line-height:1.2em;letter-spacing: 0.35px;} .complete-register-list-wrap ul li a .mdesc{width:100%;height:auto;overflow:hidden;margin-top:4px;font-size:14px;color:#838383;font-weight:400;line-height:1.4em;letter-spacing: 0.35px;} #inquiry_name_pop, #inquiry_company_pop, #inquiry_website_pop { width: 343px; max-width: 100%; } #inquiry_email_pop { width: 343px; max-width: 100%; } #inquiry_phone_pop {width: calc(100% - 132px);} #inquirer_sachet_country_pop {max-width: 343px} @media (min-width: 728px) { .popup_comm { max-width: 560px; margin-left: auto; margin-right: auto; } } .inquiry_popup .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label.inquiry_label {min-width: 152px; max-width: 152px;} .inquiry_popup .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w select + input {width: 100%} @media (max-width:1300px) { .complete-register-cont-wrap{margin-top:1.2vw;} .complete-register-cont-wrap .mico{width:6vw;} .complete-register-cont-wrap .mtit{margin-top:1.2vw;} .complete-register-cont-wrap .mdesc{margin-top:0.2vw;} .complete-register-cont-wrap button{margin-top:1.2vw;height:3vw;padding:0 1.6vw;font-size:1.2vw;} .complete-register-list-wrap{margin-top:3vw;} .complete-register-list-wrap ul{flex-wrap: wrap} .complete-register-list-wrap ul li a{height:auto;padding:1.2vw;border-radius:0.4vw;} .complete-register-list-wrap ul li a .mico{} .complete-register-list-wrap ul li a .mtit{margin-top:.4vw;} .complete-register-list-wrap ul li a .mdesc{margin-top:.2vw;} } @media (max-width:768px) { .quick-menu-wrap{overflow-x:auto;align-items: center;justify-content: flex-start; overflow-y: hidden; } .quick-menu-wrap::-webkit-scrollbar{display:none;} .quick-menu-wrap .rela{display:inline-flex;width:auto;align-items: center;justify-content: flex-start;margin:0 20px;} .quick-menu-wrap a{white-space: nowrap;} .quick-menu-wrap button{white-space: nowrap;} .quick-menu-wrap ul{width:auto;display:inline-flex;} .quick-menu-wrap.fixed button{height:38px;margin-left:8px;} /* .quick-menu-wrap a { padding: 16px; font-size: 16px; height: 40px; } .quick-menu-wrap button { font-size: 16px } .quick-menu-wrap.fixed button { height: 38px; margin-left: 8px; } */ .popup_comm .cont { overflow-x: hidden; } .inquiry_popup .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label.inquiry_label {min-width: 100%; max-width: 100%;} .inquiry_popup .inquiry_popup {padding: 16px 16px 24px} .popup_comm>.inner { padding: 16px 16px 24px; } .pop_how_box{width: 90%; max-width: 100%; margin: 0 auto} .popup_comm.inquiry_complete_popup{width:100%;margin:0;height:100vh;min-width:0;} .complete-register-cont-wrap{margin-top:12px;} .complete-register-cont-wrap .mico{width:60px;} .complete-register-cont-wrap .mtit{margin-top:16px;font-size:18px;} .complete-register-cont-wrap .mdesc{margin-top:4px;font-size:14px;} .complete-register-cont-wrap button{margin-top:16px;height:40px;padding:0 20px;font-size:16px;} .sec.sachet_sec1 .inner, .sec.sachet_sec2 .inner{ padding: 0 20px } .sachet_sec1_con {padding: 0} .sachet_sec1 .d-flex { flex-wrap: wrap } .sachet_sec1_con > h2 { font-size: 32px; font-weight: 500; line-height: 38.4px; /* 120% */ } .sachet_sec1_con .sachet_sec1_desc { font-size: 16px; font-weight: 500; line-height: 19.2px; /* 120% */ } .sachet_sec1_con .sachet_sec1_txt1 {font-size: 14px; line-height: 16.8px; /* 120% */} .sachet_sec1_con .sachet_sec1_txt2 {font-size: 24px; padding: 4px 0 8px; line-height: 28.8px; /* 120% */} .sachet_sec1_con .sachet_sec1_txt2 > span {font-size: 20px; line-height: 24px; /* 120% */} .sachet_sec1_con .sachet_sec1_txt3 {font-size: 12px; line-height: 14.4px; /* 120% */} button.btn-sachet_sec1 {margin: 24px 0 40px; padding: 6px 20px} .sachet_sec2 {padding: 32px 0} .sachet_sec3 {padding: 40px 0 24px} .sachet_sec3 .inner > h2 {font-size: 24px; margin-bottom: 24px; line-height: 28.8px} .content [class*='sachet_sec'] .inner {padding: 0 20px} .sachet_sec3 .inner .d-flex {flex-wrap: wrap; gap:16px !important} .double-border {width: 100%; border:0; padding: 32px 16px 16px; border: 1px solid #8066C8;} .double-border::before {border: 0} .flat-border {padding: 32px 16px 16px;} .sachet_service_box > h3 {font-size: 20px; line-height: 20px;} .sachet_service_box .sachet_sec3_desc {font-size: 14px; padding-bottom:0; line-height: 19.6px; letter-spacing:0 /* 140% */} table.tbl_sachets th {font-size: 14px} table.tbl_sachets th:last-child {font-size: 16px} table.tbl_sachets th span {display: block; text-align: left} table.tbl_sachets td {font-size: 14px; padding: 16px 0} table.tbl_sachets td.center {font-size: 16px} .sec.sachet_sec4 > .inner {padding: 0} .sachet_sec4_box_ko { width: 100%; height: 100%; padding: 195px 20px 32px; background: #EFEBE7 url(/v2/img/sachet/how_thumb_m_en.png) no-repeat 0 0; background-size: contain; } .sachet_sec4_box_en { width: 100%; height: 100%; padding: 195px 20px 32px; background: #EFEBE7 url(/v2/img/sachet/how_thumb_m_en.png) no-repeat 0 0; background-size: contain; } .sachet_sec4_box_ko .d-flex, .sachet_sec4_box_en .d-flex {flex-wrap: wrap; justify-content: center} .sachet_sec4_box_ko li, .sachet_sec4_box_en li {margin-bottom: 8px; } .sachet_sec4_box_ko li img, .sachet_sec4_box_en li img {max-width:100%} .sachet_sec4_box_ko li:last-child, .sachet_sec4_box_en li:last-child {margin-bottom: 8px} #sachet_sec5 .inner {padding: 40px 20px} .sec.sachet_sec5 > .inner .d-flex {flex-wrap: wrap; margin-top: 24px; gap: 16px} .sec.sachet_sec5 > .inner > h2, .sec.sachet_sec6 > .inner > h2, .sec.sachet_sec7 > .inner > h2 { font-size: 24px; font-weight: 500; line-height: 28.8px; /* 120% */ } .sec.sachet_sec5 > .inner span, .sec.sachet_sec6 > .inner span, .sec.sachet_sec7 > .inner span { display: block; margin-top: 8px; } .sec.sachet_sec6 > .inner span { margin-top: 0; } #sachet_sec6 { padding-top: 40px; padding-bottom: 30px } #sachet_sec7 { padding: 0 } .sec.sachet_sec7 > .inner span {display: inline-block; margin-top: 0} .sec.sachet_sec7 > .inner > h2 { margin-bottom: 24px; font-size: 24px; line-height: 28.8px; /* 120% */ letter-spacing: 0.35px; } .sec.sachet_sec7 > .inner .d-flex {margin-top: 0} .sec.sachet_sec7 > .inner .d-flex div {width: 100%; max-width: 100%} #sachet_sec8 {padding-bottom: 40px; margin-top: 40px; padding-top: 40px} .sec.sachet_sec8 .sachet_sec8_box > .d-flex {justify-content: center} .sec.sachet_sec8 .sachet_sec8_box {height: auto; padding-bottom: 32px;} .sec.sachet_sec8 .sachet_sec8_box .sachet_sec8_desc { font-size: 18px; font-weight: 500; line-height: 21.6px; /* 120% */ text-align: center; } .sec.sachet_sec8 .sachet_sec8_box button.btn-sachet_sec8 {margin: 16px auto 0} #sachet_sec9 {padding: 40px 0} .sachet_sec9 .inner .sec_tit > h2.tit { color: var(--04-greyscale-grey-900121619, #121619); text-align: center; font-size: 24px; font-family: 'itc-avant-garde-gothic-pro'; font-weight: 500; line-height: 28.8px; /* 120% */ letter-spacing: 0.35px; } .content [class*='sachet_sec'] .inner .sec_tit p {font-size: 14px} .sachet_sec10 {padding: 40px 20px} .sec.sachet_sec10 > .inquiry > h2 { font-size: 24px; font-weight: 500; line-height: 28.8px; /* 120% */ } .sec.sachet_sec10 > .inquiry .sachet_sec10_desc { font-size: 14px; font-weight: 400; line-height: 19.6px; /* 140% */ } .inquiry_step_box { margin-top: 32px; margin-bottom: 16px } .inquiry_step_box .inquiry_step_stit {font-size: 16px; line-height: 19.2px; /* 120% */} .sec.sachet_sec10 > .inquiry .inquiry_step_tit {font-size: 16px; line-height: 19.2px;} .sec.sachet_sec10 > .inquiry .inquiry_step_desc{font-size: 14px; line-height: 16.8px; margin-top: 10px} .half_box {flex-wrap: wrap} .half_box label {width: 100%} .marketing_sample .form_wrap { flex-wrap: wrap; justify-content: space-between; gap: 8px 0 } .marketing_sample .sachet_type_box label.check_label {width: 32%} .marketing_sample .form_wrap:has(.check_label.type2) { justify-content: flex-start; } .content.marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label {margin: 0} .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label {margin: 0} .sachet_volume_box {margin-top: 12px} .sachet_volume_pop_box {margin-top: 12px} .marketing_sample .ms_4 .inquiry .field_w .input_w .textarea_w textarea {font-size: 14px; height: 108px; line-height: 24.5px} .marketing_sample .textfield.w_240 {margin-bottom: 10px} .content.marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label {margin-bottom:12px} .select2-container {width:120px !important} #inquiry_phone {float: right; width: calc(100% - 130px)} .plan_export label {margin-bottom: 0 !important} .inquiry_popup .inquiry_step_tit { font-size: 18px; font-weight: 600 } .w_240 {max-width: 100% !important} #inquiry_phone_pop {width: calc(100% - 109px)} #inquiry_email_pop {width: 100%;} #inquiry_name_pop, #inquiry_company_pop, #inquiry_website_pop {width: 100%;} input::placeholder { font-size: 14px !important; /* Sets the placeholder font size to 14 pixels */ } .flex-wrap-mobile {flex-wrap: wrap;} #inquirer_sachet_country_pop {max-width: 100%;} .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w select { width: 100%; padding-right: 19px; background-position: right 5px center; background-size: 9px; } #inquiry_dialing_pop {max-width: 100px !important} .inquiry_popup .marketing_sample .ms_4 .inquiry .field_w .file_w p.etc {font-size: 12px} .input_m_width {width: 100%} .inquiry_popup .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w label.type2 {width: 31.5%} .inquiry_popup .marketing_sample .form_wrap:has(.check_label.type2) {gap: 8px 8px} .inquiry_popup .marketing_sample .ms_4 .inquiry .field_w .input_w .form_w .sachet_volume_pop_box label.type2 {width: auto} .chk_w .chk_item input[type="checkbox"] + label {font-size: 12px !important} }