/* body{background-color: #ccc;} */ :root{ --logo-header:url(/image/main/logo.png); --logo-header2:url(/image/main/logo2.png); --nav-sub-box-height:200px; --nav-menu-bar-hover-color:#00a062; --global-border-radius:clamp(15px, calc( 30 / 1400 * 100vw ), 30px); --global-border-radius2:clamp(5px, calc( 10 / 1400 * 100vw ), 10px);; --bg-gray1:#52535a;/* 회색 */ --bg-blue1:#008ca5;/* 파란색 */ --bg-blue1-a9:rgb(0, 140, 165, .9);/* 파란색 */ --bg-green1-a9:rgb(38, 182, 123, .9);/* 초록색 */ --bg-color1:#0f232e; --bg-header:rgba(255,255,255,0.9); --bg-header-hover:#fff; --bg-header-mo:#ffffff; --bg-nav-sub-box:rgb(245, 245, 245, 1); --color-blue:#008ca5; --color-blue2:#6d7a83; --color-blue3:#0f232e; --color-blue4:#3d4d5a; --color-green:#00a062; --color-green2:#47e10f; --color-gray:#52535a; --color-gray2:#666666; --color-gray3:#cccccc; --color-gray4:#f5f5f5; --color-white:#ffffff; --color-red:#f04c40; /*--header-height:80px;clamp(40px, calc( 80 / 1400 * 100vw ), 80px);*/ --header-height:clamp(60px, calc( 70 / 1400 * 100vw ), 80px); --header-height-mo:80px; --content-and-footer-padding:clamp(40px, calc( 160 / 1400 * 100vw ), 100px);; --fs14:clamp(11px, calc( 12 / 1400 * 100vw ), 14px); --fs15:clamp(12px, calc( 13 / 1400 * 100vw ), 15px); --fs16:clamp(12px, calc( 14 / 1400 * 100vw ), 16px); --fs18:clamp(14px, calc( 16 / 1400 * 100vw ), 18px); --fs20:clamp(16px, calc( 18 / 1400 * 100vw ), 20px); --fs22:clamp(14px, calc( 20 / 1400 * 100vw ), 22px); --fs24:clamp(18px, calc( 22 / 1400 * 100vw ), 24px); --fs30:clamp(20px, calc( 28 / 1400 * 100vw ), 30px); --fs36:clamp(22px, calc( 32 / 1400 * 100vw ), 36px); --fs40:clamp(24px, calc( 36 / 1400 * 100vw ), 40px); --fs48:clamp(26px, calc( 44 / 1400 * 100vw ), 48px); --fs54:clamp(30px, calc( 48 / 1400 * 100vw ), 54px); --fs60:clamp(32px, calc( 50 / 1400 * 100vw ), 60px); --fs62:clamp(33px, calc( 52 / 1400 * 100vw ), 62px); --fs70:clamp(36px, calc( 60 / 1400 * 100vw ), 68px); --fs80:clamp(40px, calc( 70 / 1400 * 100vw ), 78px); --fs90:clamp(46px, calc( 80 / 1400 * 100vw ), 88px); --fs100:clamp(50px, calc( 85 / 1400 * 100vw ), 98px); /*--fs26:clamp(20px, calc( 26 / 1400 * 100vw ), 26px);*/ /*--fs32:clamp(24px, calc( 32 / 1400 * 100vw ), 32px);*/ /*--fs25:clamp(20px, calc( 25 / 1400 * 100vw ), 25px);*/ /*--fs31:clamp(24px, calc( 31 / 1400 * 100vw ), 31px);*/ /*--fs35:clamp(24px, calc( 35 / 1400 * 100vw ), 35px);*/ /*--fs57:clamp(32px, calc( 57 / 1400 * 100vw ), 57px);*/ /*--fs62:clamp(34px, calc( 62 / 1400 * 100vw ), 62px);*/ /*--fs65:clamp(34px, calc( 65 / 1400 * 100vw ), 65px);*/ /*--fs66:clamp(34px, calc( 66 / 1400 * 100vw ), 66px);*/ /*--fs69:clamp(34px, calc( 69 / 1400 * 100vw ), 69px);*/ --size2:clamp(calc(0px / 0), calc( 2 / 1400 * 100vw ), 2px); --size4:clamp(calc(2px / 2), calc( 4 / 1400 * 100vw ), 4px); --size6:clamp(calc(3px / 2), calc( 6 / 1400 * 100vw ), 6px); --size8:clamp(calc(6px / 2), calc( 8 / 1400 * 100vw ), 8px); --size10:clamp(calc(10px / 2), calc( 10 / 1400 * 100vw ), 10px); --size15:clamp(calc(15px / 2), calc( 15 / 1400 * 100vw ), 15px); --size18:clamp(calc(18px / 2), calc( 18 / 1400 * 100vw ), 18px); --size20:clamp(10px, calc( 20 / 1400 * 100vw ), 20px); --size25:clamp(calc(25px / 2), calc( 25 / 1400 * 100vw ), 25px); --size26:clamp(calc(26px / 2), calc( 26 / 1400 * 100vw ), 26px); --size28:clamp(14px, calc( 28 / 1400 * 100vw ), 28px); --size30:clamp(15px, calc( 30 / 1400 * 100vw ), 30px); --size32:clamp(16px, calc( 32 / 1400 * 100vw ), 32px); --size40:clamp(20px, calc( 40 / 1400 * 100vw ), 40px); --size50:clamp(25px, calc( 50 / 1400 * 100vw ), 50px); --size58:clamp(28px, calc( 58 / 1400 * 100vw ), 58px); --size60:clamp(30px, calc( 60 / 1400 * 100vw ), 60px); --size70:clamp(35px, calc( 70 / 1400 * 100vw ), 70px); --size74:clamp(37px, calc( 74 / 1400 * 100vw ), 74px); --size80:clamp(40px, calc( 80 / 1400 * 100vw ), 80px); --size100:clamp(50px, calc( 100 / 1400 * 100vw ), 100px); --size120:clamp(60px, calc( 120 / 1400 * 100vw ), 120px); --size140:clamp(70px, calc( 140 / 1400 * 100vw ), 140px); --size150:clamp(calc(150px / 2), calc( 150 / 1400 * 100vw ), 150px); --size180:clamp(90px, calc( 180 / 1400 * 100vw ), 180px); --size200:clamp(100px, calc( 200 / 1400 * 100vw ), 200px); --size220:clamp(110px, calc( 220 / 1400 * 100vw ), 220px); --size240:clamp(120px, calc( 240 / 1400 * 100vw ), 240px); --size280:clamp(140px, calc( 280 / 1400 * 100vw ), 280px); --size300:clamp(150px, calc( 300 / 1400 * 100vw ), 300px); --size400:clamp(200px, calc( 400 / 1400 * 100vw ), 400px); --size480:clamp(240px, calc( 480 / 1400 * 100vw ), 480px); --size500:clamp(250px, calc( 500 / 1400 * 100vw ), 500px); --size540:clamp(270px, calc( 540 / 1400 * 100vw ), 540px); --size640:clamp(320px, calc( 640 / 1400 * 100vw ), 640px); --size800:clamp(400px, calc( 800 / 1400 * 100vw ), 800px); --size1260:clamp(630px, calc( 1260 / 1400 * 100vw ), 1260px); --w100-to-94:clamp(90%, calc( 100 / 1400 * 100vw ), 100%); --w100-to-50:clamp(50%, calc( 100 / 1400 * 100vw ), 100%); } ::selection { background: var(--color-green); color: #fff; } input[type=text][readonly], input[type=text]:read-only, input[type=text][disabled], input[type=text]:disabled, button[disabled], button:disabled, select[disabled] { opacity: .5; /* background: #f5f5f5 !important; */ /* border-color: #ccc !important; */ cursor: not-allowed; /* color: #999 !important */ } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #333; /* background: url('/image/main/icon/select-arrow.png') no-repeat right center; */ } /*small {color:#555;}*/ .fc-blue{color:var(--color-blue)} .fc-green{color:var(--color-green)} /*br.pc{display:block} br.mobile{display:none} .wrap>div.pc{display:block} .wrap>div.mobile{display:none} @media (max-width:960px) { br.pc{display:none} br.mobile{display:block} .wrap>div.pc{display:none} .wrap>div.mobile{display:block} }*/ div.pc, br.pc{display:block !important;height: 0;} div.mobile, br.mobile{display:none !important} div.mobile2, br.mobile2{display:none !important} .wrap>div.pc{display:block !important} .wrap>div.mobile{display:none !important} .dsc { font-size: var(--fs16); color: #666; } @media (max-width:960px) { div.pc,br.pc{display:none !important} div.mobile,br.mobile{display:block !important;height: 0;} div.mobile2,br.mobile2{display:none !important} .wrap>div.pc{display:none !important} .wrap>div.mobile{display:block !important} } @media (max-width:400px) { div.mobile,br.mobile{display:none !important} div.mobile2,br.mobile2{display:block !important;height: 0;} } html,body{font-size:16px;line-height:1.5;} body{font-size:16px;word-break:keep-all;} #wrap{transition: opacity .5s ease-in-out;} /* header ******************************************************************* */ /* #header{background:rgba(0,0,0,0.5)} */ /* #header *{transition:all 0.4s ease;} */ #header{position:fixed;top:0;z-index:900;width:100%;/*transition:all 1.0s ease;*/ } #header:hover{/*transition:all 0.3s ease;*/} #header.in{background:var(--bg-header);backdrop-filter:saturate(180%) blur(5px);transition:all 0.4s ease;} #header.sub, #header.active{background:var(--bg-header-hover);backdrop-filter:saturate(180%) blur(5px);} #header.on{z-index:9100;height:100vh;background:var(--bg-header-mo); overflow-y: auto;} #header.on>.container>.menu-wrap>.menu>li>ul>li>a{font-size:var(--fs24);} /*#header>.container{display:flex;position:relative;height:var(--header-height);margin:calc(var(--header-height) / 2) var(--size60);transition:all 0.3s ease;}*/ #header>.container{display:flex;position:relative;height:var(--header-height);margin:var(--size30) var(--size30) var(--size30) var(--size30);transition:all 0.3s ease;} /* header logo ************************************************************** */ #header>.container>h1{order:1;display:flex;align-items: flex-start;flex-direction: column-reverse;margin-right:var(--size60);} #header>.container>h1>a{display:block;width:180px;/*height:70px;*/background:var(--logo-header) no-repeat;background-size:contain;transition:all 0.3s ease;} #header>.container>h1>a>img{opacity:0;width:100%;vertical-align: middle;} #header.in>.container>h1>a, #header.active>.container>h1>a, #header.on>.container>h1>a, #header.sub>.container>h1>a{background-image:var(--logo-header2)} /* nav menu default css ***************************************************** */ #header>.container>.menu-wrap{order:2;width:100%;margin:0 auto;border-bottom:2px solid #fff} #header>.container>.menu-wrap>.menu{position:relative;display:flex;align-items:center;max-width:70%;height:100%;} #header>.container>.menu-wrap>.menu>li{position:relative;height:100%;margin:0 -1px;} #header>.container>.menu-wrap>.menu>li>a{display:flex;align-items:center;height:100%;margin:0 var(--size25);font-size:var(--fs24);font-weight:600;color:#fff;line-height:1.2} #header>.container>.menu-wrap>.menu>li>a{position:relative;transition:0.4s cubic-bezier(0.165, 0.84, 0.44, 1);} #header>.container>.menu-wrap>.menu>li:first-child>a{margin-left:0} #header>.container>.menu-wrap>.menu>li>a:after{content:'';position:absolute;z-index:1;left:50%;top:0px;width:0;height:4px;background:var(--color-green);transform: translateX(-50%);transition: width 0.3s ease-in-out;} #header>.container>.menu-wrap>.menu>li.hover>a:after, #header>.container>.menu-wrap>.menu>li:hover>a:after{width:100%;} #header>.container>.menu-wrap>.menu>li>ul{position:absolute;top:100%;left:50%;transform:translate(-50%, 0);overflow:hidden;width:180px;height:0;margin-top:0px;transition: all 0.6s; opacity: 0; box-shadow: 1px 1px 30px rgba(0, 0, 0, .06); } #header>.container>.menu-wrap>.menu>li>ul>li{text-align:center;background:#fff} #header>.container>.menu-wrap>.menu>li>ul>li:first-child{padding-top:10px; border-top:2px solid var(--color-green) } /* #header>.container>.menu-wrap>.menu>li>ul>li:last-child{padding-bottom:10px;border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;} */ #header>.container>.menu-wrap>.menu>li>ul>li:last-child{padding-bottom:10px;border-bottom:0 !important} #header>.container>.menu-wrap>.menu>li>ul>li>a{display:inline-block;width:100%;padding:10px 0;font-size:var(--fs18);font-weight:600;color:#333;} #header>.container>.menu-wrap>.menu>li>ul>li>a:hover{color:var(--color-green);transition: all .3s ease-in-out;} #header>.container>.menu-wrap>.menu>li>ul>li.active>a{color:var(--nav-menu-bar-hover-color)} #header.sub-is-ture>.container>.menu-wrap>.menu>li:hover>ul, #header.sub-is-ture>.container>.menu-wrap>.menu>li.hover>ul{opacity: 1;height:auto;} #header>.container>.menu-wrap>.banner{display: none;} #header>.container>.menu-wrap>.banner a{display:block;margin:3em 2em 2em 2em;} #header>.container>.menu-wrap>.banner img{width:100%} /* 메뉴 색상 */ #header.in>.container>.menu-wrap>.menu>li>a, #header.active>.container>.menu-wrap>.menu>li>a, #header.sub>.container>.menu-wrap>.menu>li>a, #header.on>.container>.menu-wrap>.menu>li>a{color:#333} #header>.container>.menu-wrap>.menu>li>a:hover{color:var(--color-green)} /* 메뉴 아래 라인 색상 */ #header.in>.container>.menu-wrap, #header.active>.container>.menu-wrap, #header.sub>.container>.menu-wrap, #header.on>.container>.menu-wrap{border-color:#333} #header>.container>.menu-wrap>.menu>li.active>a{color:var(--nav-menu-bar-hover-color)} #header.on>.container>.menu-wrap {/*overflow:auto;*/position:absolute;top:var(--header-height);height:calc(100vh - var(--header-height))} #header.on>.container>.menu-wrap:after{content:'';display:block;height:100px;} #header.on>.container>.menu-wrap>.menu { width: 100%; height: auto; margin: 0 auto; flex-direction: column; } #header.on>.container>.menu-wrap>.menu>li{width:100%;height:auto;/*padding:15px var(--size30)*/;border-bottom:1px solid #ccc} #header.on>.container>.menu-wrap>.menu>li:after{display:none} #header.on>.container>.menu-wrap>.menu:hover>li:not(:hover) a{opacity:1;} #header.on>.container>.menu-wrap>.menu>li.sub:before{content:"\f078";display:block;position:absolute;z-index:-1;top:12px;right:20px;font-family:"Font Awesome 6 Free";font-weight:900;font-size:20px;transition:all 0.3s ease;} #header.on>.container>.menu-wrap>.menu>li.on.sub:before{transform:rotate(180deg);} #header.on>.container>.menu-wrap>.menu>li>a{height:auto;padding: var(--size30) var(--size60);font-size:var(--fs36);font-weight:700} #header.on>.container>.menu-wrap>.menu>li>a:hover {color:var(--color-green); } #header.on>.container>.menu-wrap>.menu>li>ul { height:0px; position: relative; top: initial; left: initial; transform: initial; opacity: 1; box-shadow: none; width:auto; background: #f5f5f5; transition: all .5s ease-in-out;} /* #header.on>.container>.menu-wrap>.menu>li>ul.slideUpDown { max-height: 0;} */ #header.on>.container>.menu-wrap>.menu>li>ul>li{ text-align:left; background: #f5f5f5; padding: var(--size10) var(--size60); border-bottom: 1px solid #ddd; } #header.on>.container>.menu-wrap>.menu>li>a:after{display:none} #header.on>.container>.menu-wrap>.menu>li>ul>li:first-child{/*border:none*/} #header.on>.container>.menu-wrap>.menu>li:first-child{border-top:0} /* header right link ******************************************************** */ #header>.container>.link{position:absolute;z-index:100;top:45%;right:0;transform: translate(0, -50%); display:flex;align-items: center;} #header>.container>.link>.auth{display: flex;} #header>.container>.link>.auth>a{ display: flex; flex-direction: column; align-items: center; margin-right:var(--size30); color: #ddd; font-size: var(--fs15); font-weight: 400; } #header>.container>.link>.auth>a>i{margin-bottom:5px; vertical-align:middle;} #header>.container>.link>.auth>.register{display:none} #header>.container>.link>.subscription{display: flex;justify-content: center;align-items: center;font-size:var(--fs18);font-weight:500;border-radius:50px;background:var(--color-green);text-align: center;color:#fff; padding:var(--size8) var(--size20);transition: all .3s ease-in-out; } #header>.container>.link>.subscription:hover{color:#000; background:var(--color-green2);transition: all .3s ease-in-out;} #header.in>.container>.link>.auth>a, #header.active>.container>.link>.auth>a, #header.sub>.container>.link>.auth>a, #header.on>.container>.link>.auth>a{color:#555} #header .copy_link{display:none} /* header right auth ******************************************************** */ /* header right sitemap button ********************************************** */ #header .util_menu {display:none;} #header .sitemap_wrap {display:inline-block;vertical-align:middle;width:40px;height:40px;position:relative; margin-right:var(--size20);} #header .sitemap { position: absolute; width: 28px; height: 20px; background: 0 0; border: 0; cursor: pointer; top: 50%; left: 50%; right: var(--size30); transform: translate(-50%,-50%); } #header .sitemap:after {content:'';padding:10px;width:100%;display:block;height:100%;margin-left:-10px;margin-top:-10px;} #header .sitemap i {position:absolute;top:50%;left:0;display:block;width:25px;height:2px;background:#fff;transition:top 0.6s 0.2s, transform 0.2s;} #header .sitemap i:nth-of-type(1) {top:0;} #header .sitemap i:nth-of-type(2) {top:calc(50% - 1px);} #header .sitemap i:nth-of-type(3) {top:calc(100% - 2px);} #header.on .sitemap i{transition:top 0.2s, transform 0.6s 0.2s;background:#000} #header.on .sitemap i:nth-of-type(1) {transform:rotate(45deg);top:50%;} #header.on .sitemap i:nth-of-type(2) {opacity:0;} #header.on .sitemap i:nth-of-type(3) {transform:rotate(-45deg);top:50%;} #header.sub .sitemap i{background:#000} #header.in .sitemap i{background:#000} /* content ****************************************************************** */ #content { min-height: 500px; padding-top: calc(var(--header-height) * 2); padding-bottom: var(--content-and-footer-padding) } .section{overflow:hidden;} /* footer ******************************************************************* */ #footer{position:relative;width:100%} #footer>.wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;border-top: 4px solid #000;} /* banner box */ #footer>.wrap>.banner-box{ display: flex; flex-wrap:wrap; gap:10px; padding:var(--size40) 0 var(--size100); justify-content: space-between; align-items: center; align-content: center; flex-direction: row; } #footer>.wrap>.banner-box a{ flex: 1 1 calc(33.33% - 10px); max-width: calc(33.33% - 10px); } #footer>.wrap>.banner-box a img{width:100%;object-fit: contain;border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.3); } /* footer link */ #footer>.wrap>.link{border-top:2px solid #000;border-bottom:2px solid #000} #footer>.wrap>.link>ul{ display: flex; justify-content: center; align-items: center; } #footer>.wrap>.link>ul>li{ } #footer>.wrap>.link>ul>li>a{ display: flex; width: 100%; padding: 20px 35px; font-size: var(--fs18); color: #000; font-weight: 700; align-items: center; justify-content: center; text-align: center; height:100%; } /* footer copyright */ #footer>.wrap>.info{ position:relative;display: flex;flex-wrap:wrap; align-items: flex-start; padding:var(--size40) 0 var(--size80); } #footer>.wrap>.info>.logo{margin-right:var(--size70)} #footer>.wrap>.info>.logo>a{display:inline-block} #footer>.wrap>.info>.copyright{font-size:var(--fs16)} #footer>.wrap>.info>.copyright>span{padding-right:15px; } #footer>.wrap>.info>.copyright>p{color:var(--color-gray2); } @media (max-width:640px) { #footer>.wrap>.info>.copyright{font-size:var(--fs18)} } #footer>.wrap>.info>.family{ position:absolute; right:0; } #footer>.wrap>.info>.family>.family-site{width:250px;position:relative;} #footer>.wrap>.info>.family>.family-site:before{content:'';display:block;position:absolute;top:-3px;width:100%;height:3px;} #footer>.wrap>.info>.family>.family-site>div{ display:flex; align-items: center; position: relative; z-index: 2; color: #000; font-size: var(--fs18); font-weight: 600; border: 2px solid #000; height: 50px; padding: 7px 20px; background: #fff no-repeat right 13px center; cursor: pointer; } #footer>.wrap>.info>.family>.family-site>ul{ transform:translate3d(0, 10px, 0);visibility:hidden;opacity:0;transition:all 0.3s ease-in-out;position:absolute;z-index:1;bottom:calc(100% + 0px);left:0;width:100%;overflow:hidden;} #footer>.wrap>.info>.family>.family-site.open>ul{display:block;transform:translate3d(0, 0px, 0);opacity:1;visibility:visible;} #footer>.wrap>.info>.family>.family-site>div>i{position:absolute;top:50%;right:20px;transform:translate(0,-50%);transition: all 0.5s ease} #footer>.wrap>.info>.family>.family-site.open>div>i{ --fa: "\f068"; transform: translate(0,-50%) rotate(180deg); } #footer>.wrap>.info>.family>.family-site>ul>li{ background-color: #000; border: 3px solid #000;} #footer>.wrap>.info>.family>.family-site>ul>li:hover{ background-color:#000;} #footer>.wrap>.info>.family>.family-site>ul>li>a{ display:flex;align-items:center;color:#000; font-size:var(--fs18);color: #fff; padding: 10px 20px;font-weight: 600;} #footer>.wrap>.info>.family>.family-site>ul>li>a:hover{color:var(--color-green2); } #footer>.wrap>.info>.family>.family-site>ul>li>a:after{ content:"";width:11px;height:11px;margin-left:5px;opacity:0.3;} #footer>.wrap>.info>.family>.family-site>ul>li + li{ border-top:0 } #footer>.wrap>.info>.family>.policy{text-align:center;padding-top:var(--size30)} #footer>.wrap>.info>.family>.policy>a{position:relative;padding:0 var(--size24);color:#000;font-weight:600;font-size:var(--fs18);} #footer>.wrap>.info>.family>.policy>a:first-child {color:var(--color-green);} #footer>.wrap>.info>.family>.policy>span {color:var(--color-gray2); padding: 0 10px;} /*#footer>.wrap>.info>.family>.policy>a:nth-child(2):after{content:'|';position:absolute;top:50%;leftt:-2px;transform: translate(0, -50%);}*/ /* quick */ #footer>.quick { position: fixed; z-index:8000; right:1em; bottom: 1em; } #footer>.quick.open{width:75px;height:560px;} #footer>.quick>.menu-toggle { --duration: .44s; --move-hover: -4px; --shadow: 0 2px 8px -1px rgba(39, 94, 254, 0.32); --shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, 0.5); --font-size: 16px; --font-shadow: var(--font-size); width: 75px; height: 75px; border-radius: 50%; background-color: var(--color-green); position: absolute; z-index: 5; bottom: 0; right: 0; text-align: center; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 700; font-size: var(--font-size); letter-spacing: 0.5px; } #footer>.quick>.menu-toggle>div{display:flex;overflow:hidden;text-shadow: 0 calc(var(--font-size) * 1.3) 0 #fff;} #footer>.quick>.menu-toggle>div>span{ display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-style: normal; transition: transform 0.44s ease; transform: translateY(var(--m)) translateZ(0); } #footer>.quick>.menu-toggle>div>span:nth-child(1){transition-delay: 0.05s;} #footer>.quick>.menu-toggle>div>span:nth-child(2){transition-delay: 0.1s;} #footer>.quick>.menu-toggle>div>span:nth-child(3){transition-delay: 0.15s;} #footer>.quick>.menu-toggle>div>span:nth-child(4){transition-delay: 0.2s;} #footer>.quick>.menu-toggle>div>span:nth-child(5){transition-delay: 0.25s;} #footer>.quick>.menu-toggle.open>div>span{ --m: calc(var(--font-size) * -1.3); } #footer>.quick>.menu-toggle.open{ --y: var(--move-hover); --shadow: var(--shadow-hover); } #footer>.quick>.menu-line { position: absolute; z-index: 2; right:0; bottom:0; } #footer>.quick>.menu-line>.btn-app { position: absolute; bottom:0; right: 0; width: 75px; height: 75px; border-radius: 50%; background-color: #fff; color: #000; text-align: center; border:1px solid rgba(0,0,0,0.2) } #footer>.quick>.menu-line>.btn-app::after{content:''; position:absolute; top:50%; left:50%; display:block; transition: all 0.3s; width: 0px; height: 0px; cursor: pointer;} #footer>.quick>.menu-line>.btn-app:hover{color:#fff} #footer>.quick>.menu-line>.btn-app.not:hover{color:#333} #footer>.quick>.menu-line>.btn-app:hover::after{ width: 75px; height: 75px; border-radius: 50%; margin: -37.5px; } #footer>.quick>.menu-line>.btn-app.instagram:hover{border-color:#E1306C;} #footer>.quick>.menu-line>.btn-app.instagram:hover::after{background-color: #E1306C; } #footer>.quick>.menu-line>.btn-app.facebook:hover{border-color:#3B5998;} #footer>.quick>.menu-line>.btn-app.facebook:hover::after{background-color: #3B5998; } #footer>.quick>.menu-line>.btn-app.naver:hover{border-color:#03C75A;} #footer>.quick>.menu-line>.btn-app.naver:hover::after{background-color: #03C75A; } #footer>.quick>.menu-line>.btn-app.kakao:hover{color:rgba(0,0,0,0.9); border-color:#FEE500;} #footer>.quick>.menu-line>.btn-app.kakao:hover::after{color:rgba(0,0,0,0.9); background-color: #FEE500; } #footer>.quick>.menu-line>.btn-app.default-link:hover{border-color:var(--color-gray2);} #footer>.quick>.menu-line>.btn-app.default-link:hover::after{background-color:var(--color-gray2); } #footer>.quick>.menu-line>.btn-app>div{position:absolute;z-index:2; display: flex; justify-content: center; align-items: center; flex-direction: column; width:100%; height:100%; cursor: pointer;} #footer>.quick>.menu-line>.btn-app>div>i{font-size:26px} #footer>.quick>.menu-line>.btn-app { --base-bottom: 85px; --bottom-increment: 85px; transition: all 0.3s ease; transition-delay: 0.1s; opacity: 0; } #footer>.quick>.menu-line.open>.btn-app{ opacity: 1; } #footer>.quick>.menu-line>.btn-app:nth-of-type(1){background:#000;color:#fff;font-weight:600} #footer>.quick>.menu-line>.btn-app:last-of-type { bottom: var(--base-bottom); opacity: 1;} #footer>.quick>.menu-line.open>.btn-app:nth-of-type(1) { bottom: var(--base-bottom); } #footer>.quick>.menu-line.open>.btn-app:nth-of-type(2) { bottom: calc(var(--base-bottom) + var(--bottom-increment) * 1); } #footer>.quick>.menu-line.open>.btn-app:nth-of-type(3) { bottom: calc(var(--base-bottom) + var(--bottom-increment) * 2); } #footer>.quick>.menu-line.open>.btn-app:nth-of-type(4) { bottom: calc(var(--base-bottom) + var(--bottom-increment) * 3); } #footer>.quick>.menu-line.open>.btn-app:nth-of-type(5) { bottom: calc(var(--base-bottom) + var(--bottom-increment) * 4); } #footer>.quick>.menu-line.open>.btn-app:nth-of-type(6) { bottom: calc(var(--base-bottom) + var(--bottom-increment) * 5); } #footer>.quick>.menu-line.open>.btn-app:nth-of-type(7) { bottom: calc(var(--base-bottom) + var(--bottom-increment) * 6); } /* Global Search */ #global-search-box{ transform: scale(0); --gsb-input-width:var(--size400); --gsb-input-height:var(--size60); --gsb-button-height:var(--gsb-input-height); } #global-search-box{ display: block; position: fixed; z-index: 9200; top: 0; left: 0; width: 100%; height: 100%; max-height: 300px; } #global-search-box>.background { display: block; width: 100%; height: 100%; background: var(--color-green); } /*#global-search-box>.content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display:flex; border-radius: 3px; font-weight: 300; }*/ #global-search-box>.content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; width: 50%; } /*#global-search-box>.content>input{ display: inline-block; width: var(--gsb-input-width); height: var(--gsb-input-height); padding: 0 var(--gsb-button-height) 0 0; border:none; border-bottom: 2px solid #fff; background:none; font-size:var(--fs30); color:#fff; font-weight: 600; }*/ #global-search-box>.content>input { width: 100%; height: var(--size100); padding: var(--size20); border: none; border-bottom: 2px solid #fff; background: none; font-size: var(--fs40); color: #fff; font-weight: 600; } #global-search-box>.content>input::placeholder { font-size: var(--fs30); font-weight: 400; } #global-search-box>.content>input::placeholder{ color:#fff; opacity: 0.7; } /*#global-search-box>.content>button{ position:absolute; top:0; right:calc(-1 * var(--gsb-button-height)/2); display: inline-block; height: var(--gsb-button-height); padding: 0 calc(var(--gsb-button-height)/2); border-radius: var(--gsb-button-height); text-align: center; background: none; color: #fff; border: none; font-size:var(--fs40) }*/ #global-search-box>.content>button { position: absolute; top: 50%; transform: translateY(-50%); right: 20px; background: none; color: #fff; border: none; font-size: var(--fs40); } #global-search-box>.close{position:absolute;top:2em;right:1em;border:0;background:0;} #global-search-box>.close>i{font-size:var(--fs40);color:#fff} #global-search-box.open{transform: scale(1);} #global-search-box.open .background{animation: opacityAni 0.5s forwards; } #global-search-box.open .content{animation: fadeUp2 0.8s forwards; } #global-search-box.close{animation: quickScaleDown 0s 0.1s linear forwards;} #global-search-box.close .background{animation: opacityAni2 0.5s forwards; } #global-search-box.close .content{ animation: opacityAni2 0.5s forwards; } @media (max-width:640px){ #global-search-box{ --gsb-input-width:300px; --gsb-input-height:var(--size80); --gsb-button-height:var(--gsb-input-height); } } /* 메인-유료회원 표시 */ .crown{ display: inline-block; width: var(--size28); height: var(--size28); vertical-align: middle; margin-right: var(--size10); } .crown>img{ display:block; width:100%; height:100%; object-fit: cover; vertical-align: middle; } /* 서브-유료회원 표시 */ .crown2-wrap {position: relative;display:inline-block;margin-left: var(--size15);} .crown2-wrap>.crown2 {position:relative;top:0.1em;right:initial} .crown2 { display: inline-block; width: var(--size60); height: var(--size60); vertical-align: initial; } .crown2>img { display:block; width:100%; height:100%; object-fit: cover; vertical-align: middle; } @media (max-width:640px) { .crown2 {width: var(--size80); height: var(--size80);} } /* Sub ********************************************************************** */ .section{position:relative;z-index:1;background:#fff} .section>.wrap{position:relative;padding:var(--size80) 0;text-align:center;/*letter-spacing:-1px;*/} .section>.wrap>h2{width:100%; max-width:1320px; margin: 0 auto var(--size120); text-align: left; font-size:var(--fs80); border-bottom:8px solid #000; transition:all 0.3s ease; color:#000; padding-bottom:15px;} .section>.wrap>h2>small{display:block;font-size:var(--fs36)} .section>.wrap h3{ display:flex; align-items: flex-end; font-size: var(--fs30); font-weight: 700; padding-top: var(--size150); /*padding-bottom: var(--size20);*/ margin-bottom: var(--size60); /*border-bottom: 3px solid #333;*/ text-align: left; } .section>.wrap h3:nth-of-type(1){padding-top:0;} .section>.wrap h3.type2{border:none;margin:0;padding-top:0} /* .section>.wrap h3.type2{margin:0;padding-top:0} */ .section>.wrap h3>small{margin-left:auto;text-align:right;color:var(--color-green);font:500 var(--fs18) sans-serif} .section>.wrap h3>small>i{margin-right:5px;} .section>.wrap>h4{font-size:var(--fs24);font-weight: 700;padding-bottom:var(--size20);margin-bottom:var(--size30);border-bottom:3px solid #333;text-align:left;} .section>.wrap>p{position:relative;z-index:2;padding-top:25px;font-size:var(--fs22);line-height:1.6;color:var(--color-gray2);} .section>.wrap>.img{will-change:right} .section.visual{height:clamp(300px, calc( 300 / 1000 * 100vw ), 640px);max-height:640px;background:#333 var(--sub-visual) no-repeat top center/cover;} .section.visual>.wrap{display:flex;align-items:center;text-align:left} .section.visual>.wrap>h2{font:700 var(--fs100)/1 sans-serif;color:#fff;border:none;} .section.visual>.wrap>h2>small{display:block;margin-bottom:var(--size40);font-size:var(--fs36)} /* .section.visual>.wrap>h2{color:#fff;border-color:#fff} .section.visual>.wrap>h2>small{} */ .section>.wrap{max-width:1320px;min-height:300px;margin:0 auto} .section>.wrap input, .section>.wrap select{padding:var(--size18) var(--size25);width: 100%;border: 1px solid #ccc;border-radius:5px;font-size:var(--fs20);} /* .section>.wrap input:not(input[type='file'])[readonly], .section>.wrap input:not(input[type='file'])[disabled], .section>.wrap input:not(input[type='file']):read-only{background:#f5f5f5;cursor:pointer;} */ .section>.wrap select[readonly], .section>.wrap select[disabled], .section>.wrap input[readonly], .section>.wrap input[disabled], .section>.wrap input:read-only, .section>.wrap input:disabled{background-color:#f5f5f5;cursor:not-allowed;} .section>.wrap input.address[readonly], .section>.wrap input.address:read-only{cursor:pointer} .section>.wrap input.file-name{cursor:pointer} .section>.wrap input[type='checkbox']{width:auto;} .msg{padding:var(--size4) var(--size25) 0;text-align:left;font-size:var(--fs16);} .timecount{color: red;letter-spacing: 3px;font-weight:600} .section>.wrap .file-wrap .type2{min-width:60px !important;cursor:pointer;border:1px solid #ccc;border-radius:0 !important;color:var(--color-gray2);} .section>.wrap input[type="file"]{padding:0;position:absolute;width:0;height:0;overflow:hidden;border:0;} .section>.wrap textarea{padding:var(--size18) var(--size25);width:100%;height:var(--size300);border:1px solid #ccc;border-radius:5px;font-size:var(--fs20);resize:none;outline:none;} .section>.wrap .select2-selection__rendered { padding:var(--size18) var(--size25); } .section>.wrap .select2-container .select2-selection--single { height:auto; } .section>.wrap .select2-selection__arrow { top:50%; transform: translateY(-50%); } .section>.wrap .select2-container--default .select2-selection--single{border-color:#ccc} .section>.wrap .input-btn-wrap>li{margin-bottom:var(--size10);} .section>.wrap .input-item{display:flex;} .section>.wrap .input-item>input{margin-right:var(--size10);width:100%;} .section>.wrap .input-item>input:last-child{margin-right:0;} .section>.wrap .input-btn-item{display:flex;} .section>.wrap .input-btn-item>input{width:100%;} .section>.wrap .btn-wrap {text-align:center;} .section>.wrap .btn-wrap.type2{margin-top:var(--size60);padding-top:var(--size60);border-top:1px solid #000} .section>.wrap .list-category{ position:relative;display:flex;flex-wrap:wrap;margin-bottom:var(--size60);padding:0 ;list-style: none;width:75%;float:left; } .section>.wrap .list-category>li{position:relative;display:inline-block} .section>.wrap .list-category>li:after{content:'';position: absolute;top:50%;right:calc(var(--size60) / 2);transform:translate(0, -50%);width:1px;height:65%;background:#000;} .section>.wrap .list-category>li:last-child:after{display:none;} .section>.wrap .list-category>li>label, .section>.wrap .list-category>li>a{overflow:hidden;margin-right:var(--size60);font:700 var(--fs24) sans-serif;color:#000} .section>.wrap .list-category>li>label.active, .section>.wrap .list-category>li>a.active{color:var(--color-green)} .section>.wrap .list-category>li>label>input{display:none} .section>.wrap .list-write{position:relative;display:inline-block;float:left;min-width:300px;max-width:320px;margin-bottom:var(--size60);text-align:left;} .section>.wrap .list-search{position:relative;display:inline-block;float:right;min-width:25%;max-width:320px;margin-bottom:var(--size40);} .section>.wrap .list-search>input[type=text]{display:block;width:100%;padding:0 0 var(--size15) var(--size15);border:0;border-bottom:2px solid #000;border-radius: 0;font-size:var(--fs16); font-weight: 600; } .section>.wrap .list-search>input::placeholder{ color:#000; opacity: 0.2; } .section>.wrap .list-search>button{position:absolute;top:0;right:0;height:100%;padding:0 0 var(--size16);border:none;background: none;color:#000} @media (max-width:640px) { .section>.wrap .list-category { width: 100%; max-width: 100%; min-width: 100%; } /*.section>.wrap .list-search>input[type=text] { padding: 0 0 var(--size30) var(--size20); font-size: var(--fs20); }*/ /*.section>.wrap .list-search>button {padding: 0 0 var(--size30);font-size: large;}*/ } /* login */ .section.login_frm{padding:0 0 var(--size200);margin: 0 auto;max-width: 900px;} .section.login_frm>.wrap{padding:0;color:#333;max-width: 900px;} .section.login_frm>.wrap>h1{font-size:var(--size70);color:#000} .section.login_frm>.wrap>.description{margin:var(--size20) 0 var(--size70);font-size:var(--fs24);} .section.login_frm>.wrap>.member-login{padding:0 var(--size60) var(--size60) ;font-size:var(--fs24);} .section.login_frm>.wrap>.member-login.frm{/*padding:var(--size70) var(--size70);border:1px solid #ddd;*/border-radius:6px;} .section.login_frm>.wrap>.member-login>.form{border:1px solid #52535a;border-radius:6px; margin-bottom: var(--size20);} .section.login_frm>.wrap>.member-login>.form>div:first-child{border-bottom:1px solid #ddd;} .section.login_frm>.wrap>.member-login>.form>div.pass{border-bottom:0;} .section.login_frm>.wrap>.member-login>.form>div>input{padding:var(--size25) var(--size25);margin:var(--size4) 0;width:100%;border:0;font-size: var(--fs24);} .section.login_frm>.wrap>.member-login>.other-wrap{margin:var(--size30) 0 0;display:flex;justify-content:space-between;align-items: center} .section.login_frm>.wrap>.member-login>.other-wrap>label{position:relative;vertical-align:middle;} .section.login_frm>.wrap>.member-login>.other-wrap>label>input{position:absolute;width:24px;height:24px;left:0;} .section.login_frm>.wrap>.member-login>.other-wrap>label>span{padding-left:32px;display:block;line-height:24px;} .section.login_frm>.wrap>.member-login>.other-wrap>.other-link>a{padding:0 var(--size20);border-right:1px solid #ddd;color:#333;font-weight: 600;} .section.login_frm>.wrap>.member-login>.other-wrap>.other-link>a:last-child{padding-right:0;border-right:none;} .section.login_frm>.wrap>.member-login>.btn{padding:var(--size30);margin-top:var(--size30);display:inline-block;width:100%;border-radius:100px;border:0;background:var(--color-green);font-size:var(--fs30);color:#fff;font-weight:600;} .section.login_frm>.wrap>.member-login>.btn>i {margin-right:10px;} .section.login_frm>.wrap>.member-login>.btn.type2{background:#000} .section.login_frm>.wrap>.sns-login>.cont{padding-top:var(--size40);margin: 0 var(--size70);display:flex;justify-content:space-between;border-top:1px solid #ddd;font-size:var(--fs18);text-align:left;} .section.login_frm>.wrap>.sns-login>.cont>.sns-link{display:flex;} .section.login_frm>.wrap>.sns-login>.cont>.sns-link>div{margin-left:var(--size20);width:var(--size60);min-width:45px;} .section.login_frm>.wrap>.sns-login>.cont>.sns-link>div>a>img{width:100%;} .section>.wrap .notice-wrap{padding:var(--size40) var(--size30);margin-top: var(--size40);background:#f7f7f7;border-radius:5px;font-size:var(--fs18);text-align:left;color:var(--color-gray2);line-height:var(--size40);} .section>.wrap .notice-wrap i {margin-right:10px;color:#a2a2a2;font-size:1.2em} .section>.wrap .notice-wrap .other-link{display:flex;justify-content:space-between;} .section>.wrap .notice-wrap .other-link>div>a{color:#333;font-weight:bold;text-decoration:underline;cursor:pointer;} .section>.wrap .check-item{display:none;} .section>.wrap .check-item+label{cursor: pointer;display: flex;align-items: center; font-size: var(--fs20);} .section>.wrap .check-item+label:before{content:"";font-family:"Font Awesome 6 Free";font-weight:900;color:#fff;font-size:14px;text-align:center;line-height:18px;margin-right: var(--size10);display: inline-block;width:18px;height:18px;background-color: #fff;border: 1px solid #848484;border-radius: 3px;transition:all .3s ease-in-out} .section>.wrap .check-item:checked + label:before{background:var(--color-green);border-color:var(--color-green);content:'\f00c';} /* register */ .section>.wrap .agree-wrap{padding:0 var(--size30);display:flex;justify-content:space-between;align-items: center;border:1px solid #ccc;border-radius:5px;font-size:var(--fs20);text-align:left;} .section>.wrap .agree-wrap>div>label>span>.small{font-size: var(--fs16);font-weight: 400;} .section>.wrap .agree-wrap .check-item+label{padding:var(--size30) 0;} .section>.wrap .agree-wrap>div>.privacy-btn{border:0;background:#fff;font-size:var(--fs20);font-weight:600;color:var(--color-gray2);text-decoration: underline;} /* section sub type auth */ .section.sub-type-auth{z-index:2;} .section.sub-type-auth>.wrap{padding:var(--size240) 0 var(--size200);max-width:1260px;text-align:left;color:#333;font-size:var(--fs20);} .section.sub-type-auth>.wrap>h2{margin-bottom:var(--size100);} .section.sub-type-auth>.wrap>.head{padding:0 0 var(--size30);display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid #333;} .section.sub-type-auth>.wrap>.head>strong{font-size:var(--fs40);} .section.sub-type-auth>.wrap>.head>strong>small{font-size:var(--fs24); vertical-align:middle;} .section.sub-type-auth>.wrap>.head>span{font-size:var(--fs18);} .section.sub-type-auth>.wrap>.form>ul{margin-bottom:var(--size100);} .section.sub-type-auth>.wrap>.form>ul>li{padding:var(--size20) var(--size40);display: flex;align-items:center;border-bottom: 1px solid #ddd;} .section.sub-type-auth>.wrap>.form>ul>li .item1{margin:0 var(--size10) 0 0;;min-width: var(--size240);font-weight:600;} .section.sub-type-auth>.wrap>.form>ul>li .item1>i{margin-left:10px;color:var(--color-green)} .section.sub-type-auth>.wrap>.form>ul>li .item2{width:100%;} .section.sub-type-auth>.wrap>.form>ul.link>li>.item2{display:flex;align-items:center;} .section.sub-type-auth>.wrap>.form>ul.link>li>.item2>a{margin-right:var(--size20);} .section.sub-type-auth>.wrap>.form>ul.link>li>.item2>a>img{/*width:var(--size240);min-width:200px;*/} /* register welcome */ .member-welcome>.form {border:1px solid #52535a; border-radius:6px; padding:var(--size100) var(--size70); } .member-welcome>.form>.welcome {margin:0 0 var(--size30) 0; } .member-welcome>.form>.welcome>img {width:120px; text-align:center; } .member-welcome>.form>.welcome-txt {font-size:var(--fs24); line-height: 2;} .member-welcome>.form>.welcome-txt>.strong {/*font-weight: 600;*/} /* mypage */ .section.mypage { color: #333; font-size: var(--fs20); max-width:1320px; margin:0 auto; } .section.mypage h3{margin:0;padding:0;border:0} .section.mypage>.wrap { display: flex; flex-wrap: wrap;} .section.mypage>.wrap>.snb{ background:#fefefe; width:calc(30% - 10rem); margin:0 10rem 5em 0; text-align:left; transition:all 0.3s ease; } .section.mypage>.wrap>.snb>h3{font-size:var(--fs30);font-weight: 700;} .section.mypage>.wrap>.snb>.info{display:flex;justify-content: space-between;align-items: center;margin:var(--size20) 0 var(--size20);padding:var(--size30) var(--size20);background:#f6f6f6;border-radius: 5px;;} .section.mypage>.wrap>.snb>.info>div{width:50%;text-align:center;font-size:var(--fs18); font-weight:600;} .section.mypage>.wrap>.snb>.info>.t1{} .section.mypage>.wrap>.snb>.info>.t1>i{margin-right:var(--size10)} .section.mypage>.wrap>.snb>.info>.t2{color:var(--color-green)} .section.mypage>.wrap>.snb>ul{border-top:1px solid #000} .section.mypage>.wrap>.snb>ul>li{overflow:hidden;padding:var(--size40) 0;border-bottom:1px solid #000;transition:all 0.3s ease-in-out} .section.mypage>.wrap>.snb>ul>li>a{position:relative;display:block;font-size:var(--fs20);font-weight: 700;color:#000} .section.mypage>.wrap>.snb>ul>li>a>i{position:absolute;top:50%;right:0;transform: translateY(-50%);} .section.mypage>.wrap>.snb>ul>li>ul{} .section.mypage>.wrap>.snb>ul>li>ul>li{padding:var(--size20) 0 0} .section.mypage>.wrap>.snb>ul>li>ul>li>a{color:#333} .section.mypage>.wrap>.snb>ul>li>ul>li.active>a{color:var(--color-green);font-weight:700} .section.mypage>.wrap>.snb>ul>li.active>ul{} #mypage-content{ width:70%; padding: 0; margin:0; text-align:left; transition:all 0.3s ease; } #mypage-content h3{font-size:var(--fs40);font-weight: 700;padding-bottom:var(--size30)} #mypage-content h4{position:relative;font-size:var(--fs24);font-weight: 700;padding-bottom:var(--size20);margin-bottom:var(--size30);border-bottom:3px solid #333;text-align:left;} #mypage-content h4>span{position:absolute;right:0;bottom:40%;font-size:var(--fs16);color:red;font-weight: 500;} #mypage-content h4>span>i{ margin-left: 20px; padding-right: 5px;} #mypage-content h4.type2{margin-bottom:0} #mypage-content .form>ul{margin-bottom:var(--size100);} #mypage-content .form>ul>li{padding:var(--size30) var(--size30);display: flex;align-items:center;border-bottom: 1px solid #ddd;} #mypage-content .form>ul>li:first-child{padding-top: 0; } #mypage-content .form>ul>li.baseline{align-items: baseline;} #mypage-content .form>ul>li .item1{margin:0 var(--size10) 0 0;;min-width: var(--size240);font-weight:600;} #mypage-content .form>ul>li .item2{width:100%;} #mypage-content .form>ul>li>.item2>a{color:#333; border-radius: 5px; height: 60px; text-align: center;} #mypage-content .form>ul.link>li>.item2{display:flex;align-items:center;} #mypage-content .form>ul.link>li>.item2>a{margin-right:var(--size20);} #mypage-content .member-login{padding:0 var(--size70) var(--size70);font-size:var(--fs24);} #mypage-content .member-login.frm{padding:var(--size70) var(--size70);border:1px solid #ddd;border-radius:6px;} #mypage-content .member-login>.form{border:1px solid #52535a;border-radius:6px; margin-bottom: var(--size20);} #mypage-content .member-login>.form>div:first-child{border-bottom:1px solid #ddd;} #mypage-content .member-login>.form>div.pass{border-bottom:0;} #mypage-content .member-login>.form>div>input{padding:var(--size20) var(--size25);margin:var(--size4) 0;width:100%;border:0;font-size: var(--fs24);} #mypage-content .member-login>.other-wrap{margin:var(--size30) 0 0;display:flex;justify-content:space-between;align-items: center} #mypage-content .member-login>.other-wrap>label{position:relative;vertical-align:middle;} #mypage-content .member-login>.other-wrap>label>input{position:absolute;width:24px;height:24px;left:0;} #mypage-content .member-login>.other-wrap>label>span{padding-left:32px;display:block;line-height:24px;} #mypage-content .member-login>.other-wrap>.other-link>a{padding:0 var(--size20);border-right:1px solid #ddd;color:#333;font-weight: 600;} #mypage-content .member-login>.other-wrap>.other-link>a:last-child{padding-right:0;border-right:none;} #mypage-content .member-login>.btn{padding:var(--size30);margin-top:var(--size40);display:inline-block;width:100%;border-radius:100px;border:0;background:var(--color-green);font-size:var(--fs30);color:#fff;font-weight:600;} #mypage-content .member-login>.btn.type2{background:#000} #mypage-content .btn-wrap{display: flex ; justify-content: center;} #mypage-content .btn-wrap>a, #mypage-content .btn-wrap>button{flex:1 1 auto;padding-left:0; padding-right:0;} #mypage-content .notice-wrap{margin:0 0 var(--size40) 0} #mypage-content.membership{} #mypage-content.membership>div{margin-bottom:var(--size100);padding: var(--size40) var(--size30);border-bottom: 1px solid #ddd;} #mypage-content.membership .product{display:flex; align-items: center; justify-content: space-between;} #mypage-content.membership .product>.info>strong{font-size:var(--fs30)} #mypage-content.membership .product>.info>ul{margin:20px 0 0 20px;list-style: disc;} #mypage-content.membership .product>.info>ul>li{line-height:2;} #mypage-content.membership .product>.info>ul>li>i{margin-right:5px;} #mypage-content.membership .product>.card { position: relative; display: flex; justify-content: flex-end; align-items: flex-end; aspect-ratio: 1 / 0.5; width: 50%; height: auto; padding: var(--size20) var(--size40); color: #fff; /*font: 700 var(--fs40) sans-serif;*/ border-radius: 20px; font-size: var(--fs40); font-weight: 700; margin-left: 20px; } #mypage-content.membership .product>.card.type1{background:#ff5532} #mypage-content.membership .product>.card.type2{background:#00a062} #mypage-content.membership .product>.card.type3{background:#7b53e9} #mypage-content.membership .product>.card>strong>small{font-size:inherit; margin-left: 5px; } #mypage-content.membership .product>.card>.img1{position: absolute;top:var(--size30);left:var(--size40);width:40%} #mypage-content.membership .product>.card>.img2{position: absolute;bottom:var(--size30);left:var(--size40);width:10%} #mypage-content.membership>.payments{padding:0;border:none;} #mypage-content.membership>.payments>ul{display:table;width:100%;} #mypage-content.membership>.payments>ul>li{position:relative;display:table-row;border-collapse: collapse; font:var(--fs16)/1.5 sans-serif;} #mypage-content.membership>.payments>ul>li.head{font-weight:600} #mypage-content.membership>.payments>ul>li:nth-of-type(2n){background:#fafafa} #mypage-content.membership>.payments>ul>li:after{content:'';position:absolute;bottom:0;left:0;width:100%;border-bottom:1px solid #ccc} #mypage-content.membership>.payments>ul>li>div{padding:1em;display:table-cell} .membership-cancel .cancel_reason{padding:var(--size60);border:1px solid #ccc;border-radius: 10px;} .membership-cancel .cancel_reason .radio-wrap{display:flex;text-align:left;align-items: center;} .membership-cancel .cancel_reason .radio-wrap>input{display:none;cursor:pointer;} .membership-cancel .cancel_reason .radio-wrap>input+label{margin-right: var(--size10);padding: var(--size4) 0;position: relative;display: flex;align-items: center;width:100%;transition: all .3s ease-in-out;border:none} .membership-cancel .cancel_reason .radio-wrap>input+label::before{content: "";margin-right:8px;width:18px;height:18px;border: 1px solid #848484;border-radius: 50%;transition: all .3s ease-in-out;} .membership-cancel .cancel_reason .radio-wrap>input+label::after{content: "";position: absolute;width:8px;height:8px;border-radius: 50%;left: 6px;transition: all .3s ease-in-out;} .membership-cancel .cancel_reason .radio-wrap input[type=radio] + label:before{background-color:#fff;} .membership-cancel .cancel_reason .radio-wrap input[type=radio]:checked + label{z-index:1;} .membership-cancel .cancel_reason .radio-wrap input[type=radio]:checked + label:before{border-color:var(--color-green);background-color: var(--color-green);} .membership-cancel .cancel_reason .radio-wrap input[type=radio]:checked + label:after{background-color:#fff;} /* 프리뷰,리뷰,특집,희곡,공연계소식 상세 */ .section.sub-type1{} .section.sub-type1>.wrap{} .section.sub-type1>.wrap>.head{} .section.sub-type1>.wrap>.head>.i1{font:700 var(--fs18) sans-serif;text-align:left;} .section.sub-type1>.wrap>.head>.i2{display:flex;align-items: center;padding:var(--size60) 0;border-bottom: 4px solid #000;} .section.sub-type1>.wrap>.head>.i2>span{flex:none;display:inline-block;margin-right:var(--size30);padding:var(--size10) var(--size25);font:700 var(--fs20) sans-serif;background-color:var(--color-green2);border-radius: 50px;} .section.sub-type1>.wrap>.head>.i2>strong{font:700 var(--fs36) sans-serif;text-align:left} .section.sub-type1>.wrap>.head>.i2>div{margin-left:auto;font:400 var(--fs16) sans-serif;flex-shrink: 0;color: var(--color-gray2); width:20%; } .section.sub-type1>.wrap>.head>.i2>div>small{/*margin-left:20px;*/font:700 var(--fs16) sans-serif;} .section.sub-type1>.wrap>.head>.i2>div>small>i{margin:0 4px;} .section.sub-type1>.wrap>.head>.i3{padding:var(--size50) 0 var(--size20);border-bottom: 4px solid var(--color-green2);font-size:var(--fs80);font-weight:700; color:var(--color-green2);text-align:right} .section.sub-type1>.wrap>.content{padding:var(--size70) 0;border-bottom:1px solid #000;text-align: left;} .section.sub-type1>.wrap>.content iframe{transition: all 0.1s linear;} .section.sub-type1>.wrap>.content img{max-width:100%;} .section.sub-type1>.wrap .hidden{opacity: 0;} .section.sub-type1>.wrap>.hashtag, .section.sub-type1>.wrap>.prev, .section.sub-type1>.wrap>.next{display:flex;align-items:center;padding:var(--size20) var(--size40);border-bottom:1px solid #000;text-align:left;} .section.sub-type1>.wrap>.hashtag{padding:var(--size20) var(--size40)} .section.sub-type1>.wrap>.hashtag>strong, .section.sub-type1>.wrap>.prev>strong, .section.sub-type1>.wrap>.next>strong{display:inline-block;width:120px;flex-shrink:0;} .section.sub-type1>.wrap>.prev>a, .section.sub-type1>.wrap>.next>a{display:block;width:100%;color:#000} .section.sub-type1>.wrap>.prev>span, .section.sub-type1>.wrap>.next>span{flex-shrink: 0;padding-left:10px;} .section.sub-type1>.wrap>.hashtag>div{flex-grow: 1;display: flex;flex-wrap: wrap;gap:1em;/*padding-top:1em;*/} /* .section.sub-type1>.wrap>.hashtag>div>span{display:inline-block;margin:var(--size10) var(--size20) var(--size10) 0;padding:var(--size15) var(--size20);border-radius: 4px;border:1px solid #000;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;} */ /* 지원정책/공모전/오디션 */ .section.sub-type2{} .section.sub-type2>.wrap{} .section.sub-type2>.wrap>.head{} .section.sub-type2>.wrap>.head>.i1{font:700 var(--fs18) sans-serif;text-align:left;} .section.sub-type2>.wrap>.head>.i2{display:flex;align-items: center;padding:var(--size60) 0;border-bottom: 4px solid #000;} .section.sub-type2>.wrap>.head>.i2>span{flex:none;display:inline-block;margin-right:var(--size30);padding:var(--size10) var(--size25);font:700 var(--fs20) sans-serif;background-color:#dddddd;border-radius: 50px;} .section.sub-type2>.wrap>.head>.i2>strong{font-size:var(--fs36);font-weight:700; text-align:left;margin-right:var(--size40);} .section.sub-type2>.wrap>.head>.i2>div{margin-left:auto;/*font:400 var(--fs16) sans-serif;*/font-size:var(--fs16);/*text-align:right;*/flex-shrink: 0; color:var(--color-gray2);} .section.sub-type2>.wrap>.head>.i2>div>small{/*margin-left:var(--size20);*/font:700 var(--fs16) sans-serif;} .section.sub-type2>.wrap>.head>.i2>div>small>i{margin:0 4px;} .section.sub-type2>.wrap>.head>.i3 { display:flex; flex-wrap: wrap; flex-direction: row; padding: 0 0 var(--size20); } .section.sub-type2>.wrap>.head>.i3>div{ display: flex; align-items: center; justify-content: flex-start; width:100%; padding: var(--size20) 0 var(--size20) var(--size40); border-bottom: 1px solid #000; text-align: left; font-size:var(--fs18); } .section.sub-type2>.wrap>.head>.i3>div>strong{flex-shrink: 0;width:100px} .section.sub-type2>.wrap>.head>.i3>div>p{flex-shrink: 1;word-break: break-word; } .section.sub-type2>.wrap>.head>.i3>div.file{width:100%} .section.sub-type2>.wrap>.head>.i3>div.file>p{width:100%;} /* .section.sub-type2>.wrap>.head>.i3>div.file>a{display:inline-block;flex-shrink:0;margin-left:auto;font-weight:700;border-color:#000} */ .section.sub-type2>.wrap>.head>.i3.type2>div{flex:1 1 calc(100%/2)} .section.sub-type2>.wrap>.head>.i3.type2>div.file{flex:1 1 100%} .section.sub-type2>.wrap>.content{padding:var(--size70) var(--size30);border-bottom:1px solid #000;text-align: left;} .section.sub-type2>.wrap>.content iframe{transition: all 0.1s linear;} .section.sub-type2>.wrap>.content img{max-width:100%;} .section.sub-type2>.wrap .hidden{opacity: 0;} .section.sub-type2>.wrap>.hashtag, .section.sub-type2>.wrap>.prev, .section.sub-type2>.wrap>.next{display:flex;align-items:center;padding:var(--size20) var(--size40);border-bottom:1px solid #000;text-align:left;} .section.sub-type2>.wrap>.hashtag{padding:var(--size20) var(--size40)} .section.sub-type2>.wrap>.hashtag>strong, .section.sub-type2>.wrap>.prev>strong, .section.sub-type2>.wrap>.next>strong{display:inline-block;width:120px;flex-shrink:0;} .section.sub-type2>.wrap>.prev>a, .section.sub-type2>.wrap>.next>a{display:block;width:100%;color:#000} .section.sub-type2>.wrap>.prev>span, .section.sub-type2>.wrap>.next>span{flex-shrink: 0;padding-left:10px;color:var(--color-gray2);} .section.sub-type2>.wrap>.hashtag>div{flex-grow: 1;display: flex;flex-wrap: wrap;} .section.sub-type2>.wrap>.hashtag>div>span{display:inline-block;margin:var(--size10) var(--size20) var(--size10) 0;padding:var(--size15) var(--size20);border-radius: 4px;border:1px solid #000;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;} /* Card style */ .list-card .lazyload{opacity: 0;} .list-card .lazyloaded{opacity: 1;} .list-card { --gutter-size:1em; --list-size:calc(100%/3); --card-margin:var(--size20); --card-fs1:var(--fs24); --card-fs2:var(--fs18); --card-fs3:var(--fs14); --card-color1:var(--color-green2); display: block; margin: 0 auto 1em; /*line-height: 30px;*/ } .list-card>.list-size{width:var(--list-size)} .list-card>.gutter-size{width:var(--gutter-size)} .list-card>.item{ width:var(--list-size); position: relative; margin-bottom: var(--gutter-size); padding:0 calc(var(--gutter-size) / 2); } .list-card>.item a{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:var(--card-margin);transition:all .4s cubic-bezier(0.175, 0.885, 0, 1);border:1px solid rgba(0, 0, 0, 0.5);} .list-card>.item a::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;transition: all .4s ease} .list-card>.item a img { width: 100%; transition: all .5s ease; } .list-card>.item a div{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; } .list-card>.item a div{position:absolute;left:0;bottom:0;width:100%;height:100%;padding:var(--card-margin);background: linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(0,0,0,1) 100%);} .list-card>.item a div p{font-size:var(--card-fs1);color:#fff;font-weight:700;line-height:30px;} .list-card>.item a div span{display:inline-block;padding:var(--size2) var(--card-margin);margin-top:var(--card-margin);background:var(--card-color1);border-radius: 80px;font-size: var(--card-fs2);color:#000;font-weight:700; transition:all .3s ease; border:2px solid var(--card-color1); } .list-card>.item a div span i{margin-left:var(--size10);} .list-card>.item a div small{position:absolute;right:var(--card-margin);bottom:var(--card-margin);/*padding:var(--size15) 0*/;font-size:var(--card-fs3);font-weight:500;color:#ddd;opacity: 0.8;} .list-card>.item a div small i{margin-right:6px;} .list-card>.item.hover a{box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1); } .list-card>.item.hover a img{transform: scale(1.1);transition:all .5s ease} .list-card>.item.hover a div span{} .list-card>.item.hover a{border:1px solid var(--card-color1); } .list-card>.item.hover a div span{background:rgba(0,0,0,0);border:2px solid var(--card-color1);color: var(--card-color1);transition:all .3s ease} .list-card>.item.outfocus{} .list-card>.item.outfocus a div span{} .list-card.type2{margin:0 calc(-1 * (var(--gutter-size) / 2))} .list-card.type2>.item{} .list-card.type2>.item a.a1{} .list-card.type2>.item a.a1>span{position:absolute;z-index:1;top:0;right:0;padding:var(--gutter-size);} .list-card.type2>.item a.a1>span>i{color:var(--color-green2);font:normal bold var(--fs80)/1 sans-serif;font-family:'Montserrat';} .list-card.type2>.item a.a1 div span{padding:5px var(--size15);font-size:var(--card-fs3)} .list-card.type2>.item a.a2{padding:calc(var(--gutter-size) - 5px) 5px calc(var(--gutter-size)*2);border:none;font:700 var(--fs18) sans-serif;text-align:left;border-radius: 0;} .list-card.type2>.item a.a2>p{color:#333} .list-card.type2>.item a.a2::after{content:none} .list-card.type2>.item a.a2 span{display:block;padding-top:var(--size10);color:var(--color-gray2);font:400 var(--fs14) sans-serif} .list-card.type2>.item.hover a.a2{box-shadow: none } .list-card.type2>.item.hover a.a2{border:none} .list-card.type2>.item.old_month{} .list-card.type2>.item.old_month a.a1>span{display:none} .list-card.type2>.item.old_month a.a1 div span{background-color: #fff;border-color: #fff;} .list-card.type2>.item.old_month.hover a.a1 div span{color:#fff;background:rgba(0,0,0,0)} /* 희곡, 공연계소식 */ .list-type1{} .list-type1>.item {margin-bottom:var(--size30); } .list-type1>.item>a { display:flex; flex-wrap:nowrap; align-items:center; width:100%; padding:var(--size60) var(--size30); background:#f5f5f5; /*background: rgba(0, 160, 98, 0.08);*/ border-radius: var(--global-border-radius); color:#000; } background: /*#f5f5f5*/ rgba(0, 160, 98, 0.08); .list-type1>.item>a>span{flex-shrink: 0;display:inline-block;margin-right:var(--size25);} .list-type1>.item>a>span:last-child {margin-right:0;} .list-type1>.item>a>span.i1{width:10%;padding:10px 10px;font:700 var(--fs16)/1 sans-serif;background:var(--color-green2);border-radius: var(--global-border-radius);} .list-type1>.item>a>span.i2{font:700 var(--fs60)/1 sans-serif;color:var(--color-green2); margin: 0 var(--size30); } .list-type1>.item>a>span.i2>i{font-style: normal;} .list-type1>.item>a>span.i3{flex-shrink: 1;text-align:left; margin-right:var(--size30); } .list-type1>.item>a>span.i3>strong{font:700 var(--fs24)/1.2 sans-serif} .list-type1>.item>a>span.i3>small{display: block; margin-top: 10px; font-size: 16px; color:var(--color-gray2);} .list-type1>.item>a>span.i4{margin-left:auto;font-size:var(--fs16);color:var(--color-gray2);} .list-type1>.item>a>span.i4>i{margin:0 5px;} .list-type1>.item.old_month{} .list-type1>.item.old_month>a>span.i1{width:15%;background:#333;color:#fff; flex-shrink:0;} .list-type1>.item.old_month>a>span.i2{color:#333; margin: 0 var(--size30); } /* 이달의 공연 */ .section.schedule{min-height:calc(100vh - var(--header-height))} .schedule_calendar{max-width:480px;width:100%} .schedule_wrap{display: flex;justify-content: space-between; align-content: flex-start;} .list-type2{width:100%;/*max-width:760px;*/margin-left:5em;} .list-type2>.item { overflow:hidden; position:relative; width:100%; margin: 0 0 1em 0; border-radius: var(--global-border-radius); overflow: hidden; background-color: #f6f6f6; } .list-type2>.item>.link1{display:flex;color:#000} .list-type2>.item>.link1.no-link{cursor:default} .list-type2>.item>.link2{position:absolute;right:1em;bottom:1em;display:flex;align-items: center;justify-content: center;width:40px;height:40px;background:#000;color:#fff;border-radius: 50%; transition: all 0.3s ease-in-out;} .list-type2>.item>.link2:hover{opacity:0.7; transition: all 0.3s ease-in-out;} .list-type2>.item .poster { position:relative; display:flex; } .list-type2>.item .poster>.fill { opacity: 0; overflow: hidden; position: absolute; top: -20%; bottom: -20%; left: -200%; width: 150%; height: 150%; transition:all .3s linear; } .list-type2>.item .poster>.fill>img { filter: blur(6px); -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; transform: scale(1.4); } .list-type2>.item .poster>.img { position:relative; z-index:1; padding: var(--size60) var(--size40) var(--size60) var(--size60); } .list-type2>.item .poster>.img>img{width: 100%;max-width:180px;transition: all 0.3s ease-in-out;border-radius: 10px;} .list-type2>.item .content {max-width:486px; padding:var(--size50) 1em var(--size50) 0; text-align:left; } .list-type2>.item .t1 { font:700 var(--fs24) sans-serif; color: var(--color-green); } .list-type2>.item .t2 { /*margin: 10px 0 10px;*/ font:700 var(--fs36) sans-serif; } .list-type2>.item .t3 { display:flex;flex-direction:column;font-size: 14px; margin-top: 10px; font:400 var(--fs18)/1.6 sans-serif; color:#444;} .list-type2>.item .t3 div{display:flex;justify-content: flex-start; align-items: flex-start; margin-bottom:10px;line-height:1.2} .list-type2>.item .t3 div strong{font-weight:600;} .list-type2>.item .t3 div span{padding-left:5px} .list-type2>.item .memo {font:700 var(--fs18) sans-serif;margin: 10px 0px 20px 0px;} .list-type2>.item:hover{} .list-type2>.item:hover .poster>.fill { opacity: 1; left: -75%; } .list-type2>.item:hover .poster>.img>img{transform:scale(1.1)} @media (max-width:799px) { .schedule_wrap{flex-direction: column;} .schedule_calendar{max-width:100%;margin-bottom:4em} .list-type2{margin:0} .list-type2>.item .poster>.img>img{max-width:100px} } @media (max-width:640px) { .list-type2>.item .poster>.img {padding: var(--size60) var(--size30) var(--size50) var(--size20);} } /* 이달의 공연 달력 */ @keyframes zoomSchedule { 100% { top:calc(50% - 0.7em - 10px);; opacity: 0; width: 98%; height: 98%; } } @keyframes daySmallShow { 0% { opacity: 0; transform: translate(-50%, 30px); } 100% { opacity: 1; transform: translate(-50%, 0px); } } /*.schedule_calendar>a{display:flex;align-items:center;justify-content: center;width:100%;margin-top:20px;padding:var(--size30) 0;font:700 var(--fs30) sans-serif;background:var(--color-green);color:#fff;border-radius: 50px;} .schedule_calendar>a>i{margin-right:10px;}*/ .schedule_calendar>a{display:flex;align-items:center;justify-content:center;margin-top:20px;} .schedule_calendar_box{position:relative;padding:var(--size40);background:#fff;border:2px solid #000;border-radius: var(--global-border-radius);box-sizing: border-box;transition: all 0.3s ease-in-out;} .schedule_date{display:none;} /* 이달의 공연 달력 컨테이너 */ .flatpickr-calendar{width: 100%; font-size: var(--fs16); box-shadow: none; background:#fff; font-family: -apple-system, BlinkMacSystemFont, helvetica, Apple SD Gothic Neo, sans-serif; transition: all 0.3s ease-in-out;} .flatpickr-rContainer, .flatpickr-days, .dayContainer{width:100%;min-width:100%;;max-width:100%;font-size:15px} .dayContainer{margin-top:10px} span.flatpickr-weekday{font:700 var(--fs18) sans-serif} .flatpickr-calendar.open, .flatpickr-calendar.inline{max-height: 840px;} /* 이달의 공연 달력 날짜 셀 */ .flatpickr-day{position: relative; display: flex; border-radius: 4px; width: calc(100%/7); min-width: calc(100%/7); max-width: calc(100%/7); aspect-ratio: 1 / 1; height: auto; line-height: 1; align-items: center; flex-direction: column; border: none; transition: transform ease-in 0.1s, box-shadow ease-in 0.25s; font:700 var(--fs18) sans-serif; border-radius: 50%;font-weight:700;transition: all .2s ease;border:4px solid #fff !important} .flatpickr-day.flatpickr-disabled{color:#999} .flatpickr-day span{margin-top:-10px;} .flatpickr-day small{ opacity: 0; display: inline-block; position: absolute; top: calc(50% - 0.7em - 10px); left: 50%; transform: translate(-50%, 0%); font-size: 0.7em; width: 6px; height: 6px; word-break: keep-all; letter-spacing: -1px; background: var(--color-green2); border-radius: 50%; } .flatpickr-day small.animation{animation: daySmallShow ease-in-out 0.3s forwards;} .flatpickr-day small.show{opacity: 1;} .flatpickr-day small.old{background:#cccccc;} .flatpickr-day.selected small{opacity: 0 !important;} .flatpickr-day:hover small{opacity: 1;top:calc(50% - 0.7em - 10px);;z-index:-1;animation: zoomSchedule ease-in-out 0.75s forwards !important;} .flatpickr-day.today, .flatpickr-day.today:hover, .flatpickr-day.today:focus{background:var(--color-green2);color:#000;} .flatpickr-day.selected, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus{background:var(--color-green);color:#fff;transition: all .2s ease;} .flatpickr-day.selected small, .flatpickr-day.selected:hover small, .flatpickr-day.selected:focus small{color:#fff;border-radius:50%;} /* .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus{border:4px solid #fff} */ /* 이달의 공연 달력 휴무일 style (Custom 추가) */ .flatpickr-months{position:relative;padding-bottom:10px;border-bottom:2px solid #000} .flatpickr-months .flatpickr-month{height:40px} .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month{top:50%;transform: translateY(-65%);width:25px;height:25px;background:#000;color:#000;border-radius: 50%;} .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg{position:absolute;;top:50%;left:50%;width:13px;height:13px;transform: translate(-50%,-50%);} .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path{fill:#fff} .flatpickr-current-month{display: flex ; flex-direction: row-reverse; justify-content: center; align-items: center;} .flatpickr-current-month input{padding:0 !important;border:0 !important;} .flatpickr-current-month .numInputWrapper{display:flex;align-items: center;width:7ch} .flatpickr-current-month .numInputWrapper span.arrowUp, .flatpickr-current-month .numInputWrapper span.arrowDown{display:none;} .flatpickr-current-month .numInputWrapper:hover{background:none;} .flatpickr-current-month input.cur-year, .flatpickr-current-month span.cur-month{display:flex;align-items: center;margin:0;font:700 27px/1 sans-serif;font-family:'Montserrat';} .flatpickr-current-month span.cur-month::before{content: '.'; font-weight: 700; display: flex;align-items: flex-end;font: 700 30px serif;} .flatpickr-current-month input.cur-year{text-align: right;} .flatpickr-innerContainer{padding:var(--size30) 0px 0} @media (max-width:640px) { .flatpickr-current-month .numInputWrapper::after, .flatpickr-current-month input.cur-year, .flatpickr-current-month span.cur-month{font-size:24px;} } /* casting list */ .list-type3{ --row-col: 3; --card-title-area: clamp(100px, calc( 150 / 1400 * 100vw ), 150px); --gap:1em; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; gap:var(--gap); } .list-type3 *{transition: all 0.2s ease-in-out;} .list-type3>.item{ flex: 0 0 calc((100% - (var(--gap) * (var(--row-col) - 1))) / var(--row-col)); } .list-type3>.item>a{ display:block; overflow:hidden; position:relative; width:100%; height:100%; padding-bottom: var(--card-title-area); border-radius: var(--global-border-radius); color:#fff; border:1px solid rgba(0, 0, 0, 0.5) } .list-type3>.item>a>img{width:100%;height:100%;object-fit: cover;} .list-type3>.item>a>div{ position:absolute; left:0; bottom:0; width:100%; height:calc(var(--card-title-area) + 0px); padding:var(--size15) var(--size20) var(--size20) var(--size20); background:#000 } .list-type3>.item>a>div>.i1{ position:absolute; z-index:1; bottom: calc(var(--card-title-area) + 10px); left:0; width:100%; padding:var(--size10) var(--size20); text-align:left; } .list-type3>.item>a>div>.i1>span { display:inline-block; margin:var(--size6); padding:var(--size6) var(--size20); font:700 var(--fs16) sans-serif; text-align: center; border-radius: 50px; background:#fff; border:1px solid #333; color:#000 } .list-type3>.item>a>div>.i2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; line-height: 1.5; max-height: calc(1.5em * 2); font: 700 var(--fs20) sans-serif; text-align: left; } .list-type3>.item>a>div>.i3{position:absolute;left:0;bottom:0;display:flex;justify-content: flex-end;gap:2em;width:100%;padding:var(--size20);font-size:var(--fs14);} .list-type3>.item>a>div>.i3>span{color:#ddd;} .list-type3>.item>a>div>.i3>span:nth-of-type(1){margin-right:auto; font-size:var(--fs18); font-weight:500; text-align: left; line-height: normal; } .list-type3>.item>a>div>.i3>span:nth-of-type(2), .list-type3>.item>a>div>.i3>span:nth-of-type(3){} .list-type3>.item>a>div>.i3>span:nth-of-type(2) i, .list-type3>.item>a>div>.i3>span:nth-of-type(3) i{margin-right:8px} .list-type3>.item>a>div>.i3>span:nth-of-type(2) i{color:red} .list-type3>.item:hover{position:relative;z-index:1} .list-type3>.item:hover>a{border-color:var(--color-green2);box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);} .list-type3>.item:hover>a>img{transform: scale(1.05);} .list-type3>.item:hover>a>div{background:var(--color-green);} @media (max-width:1024px) { .list-type3>.item>a>div>.i1>span{margin:var(--size4);padding:var(--size6) var(--size10);border-radius: 4px;} } @media (max-width:640px) { .list-type3 { --row-col: 2; --gap:1em; } .list-type3>.item>a>div>.i2{font-size:var(--fs20)} .list-type3>.item>a>img{max-height:300px} .list-type3>.item>a>div>.i1{display:flex;flex-wrap: wrap;padding-bottom:0px} .list-type3>.item>a>div>.i1>span{margin:1px 2px 0 0;padding:2px 4px;font:400 10px sans-serif;border-radius: 4px;} .list-type3>.item>a>div>.i3>span:nth-of-type(1){font-size:var(--fs18); font-weight:500; } } @media (max-width:480px) { .list-type3 { --row-col: 1; --gap:1em; } .list-type3>.item>a>div>.i2{font-size:var(--fs18)} .list-type3>.item>a>img{max-height:300px} .list-type3>.item>a>div>.i1{display:flex;flex-wrap: wrap;padding-bottom:0px} .list-type3>.item>a>div>.i1>span{margin:1px 2px 0 0;padding:2px 4px;font:400 10px sans-serif;border-radius: 4px;} .list-type3>.item>a>div>.i3>span:nth-of-type(1){font-size:var(--fs16); font-weight:500; } } /* 지원정책, 오디션 */ .list-type4{border-top:1px solid #ccc} .list-type4>.item{} .list-type4>.item>a { display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: var(--size60) var(--size30); background: #fff; color: #000; border-bottom:1px solid #ccc } .list-type4>.item.notice>a{background:#f6f6f6} .list-type4>.item>a>span{flex-shrink: 0;display:inline-block;} .list-type4>.item>a>span.i1{font:700 var(--fs16)/1 sans-serif;} .list-type4>.item>a>span.i2{flex-shrink: 1;text-align: left; margin-left:var(--size30);} .list-type4>.item>a>span.i2>strong{font:700 var(--fs24)/1.2 sans-serif} .list-type4>.item>a>span.i2>strong>i{margin-left:5px;opacity: .4; font-size:var(--fs20)} .list-type4>.item>a>span.i2>i{margin-left:10px;color:#aaa} .list-type4>.item>a>span.i2>span{display:flex;flex-wrap:wrap; align-items: center; justify-content: flex-start;margin-top:1em} .list-type4>.item>a>span.i2>span>span{flex-shrink: 0;margin-right:2em;font-size:var(--fs18);} .list-type4>.item>a>span.i2>span>span>strong{font-weight:600;/*color:var(--color-green);*/} .list-type4>.item>a>span.i3{margin-left:auto;font-size:var(--fs16);color:var(--color-gray2);} .list-type4>.item>a>span.i3>i{margin:0 4px;} /* 공모전 */ .list-type5{ --gallery-row-col: 4; --gap: 1em; display:flex; flex-wrap: wrap; gap: var(--gap); } .list-type5 *{transition: all .3s ease-in-out;} .list-type5>.item{flex: 0 0 calc((100% - (var(--gap) * (var(--gallery-row-col) - 1))) / var(--gallery-row-col));} .list-type5>.item>a { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap); width: 100%; margin-bottom: calc(var(--gap) * 2); color: #000; text-align:left; } .list-type5>.item>a>.img{overflow:hidden;width:100%;max-width:100%;height:auto;border-radius: var(--global-border-radius2);border: 1px solid #ccc;transition: all .3s ease-in-out;} .list-type5>.item>a>.img:hover{border:2px solid var(--color-green);transition: all .3s ease-in-out;} .list-type5>.item>a>.img>img{width:100%;max-width:100%;height:auto;aspect-ratio:3/4;object-fit: cover;vertical-align: middle;} .list-type5>.item>a>.i1{ display: -webkit-box; -webkit-box-orient: vertical; /*overflow: hidden; text-overflow: ellipsis; line-height: 1.5; max-height: calc(1.5em * 1); */ overflow: hidden; -webkit-line-clamp: 2; font: 600 var(--fs18) sans-serif; } .list-type5>.item>a>.i2{width:100%;margin-top:-10px;font-size:var(--fs15); color:var(--color-gray2); font-weight:300; } .list-type5>.item>a>.i2>i{margin:0 5px 0 20px} .list-type5>.item:hover>a>.img>img{transform: scale(1.1);} /* 제안받은 캐스팅 */ /*.casting-received{} .casting-received .disable{opacity: .5} .casting-received .list{border-top:1px solid #ccc} .casting-received .list>.item{} .casting-received .list>.item { display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: var(--size60) var(--size30); background: #fff; color: #000; border-bottom:1px solid #ccc; cursor:default } .casting-received .list>.item>span{flex-shrink: 0;display:inline-block;} .casting-received .list>.item>.i1{font:700 var(--fs16)/1 sans-serif;} .casting-received .list>.item>.i1>strong{font:700 var(--fs24)/1.2 sans-serif} .casting-received .list>.item>.i2{margin-left:auto;font-size:var(--fs16)} .casting-received .list>.item>.i3{width:100%} .casting-received .list>.item>.i3>div{display:flex;margin-top:1em;gap:1em} .casting-received .list>.item>.i3>div>div{flex:1;display:flex;flex-direction: column;}*/ .casting-received{ --gap:1em; --row-col:2; } .casting-received .list{border-top:1px solid #ccc} .casting-received .list>.item{} .casting-received .list>.item { position: relative; display: flex; flex-direction: column; width: 100%; padding: var(--size60) var(--size30); border-bottom:1px solid #ccc; cursor:default; gap:var(--gap); } .casting-received .list>.item>div{flex: 0 0 calc((100% - (var(--gap) * (var(--row-col) - 1))) / var(--row-col));} .casting-received .list>.item>.i1{ display: flex; } .casting-received .list>.item>.i1>div{display:flex;flex-direction: column;width:100%;} .casting-received .list>.item>.i1>div>span:first-child { font-size:var(--fs24); text-align:left; display: block; border-bottom:2px solid #333; margin-bottom: 20px; padding-bottom:5px; } .casting-received .list>.item>.i1>div>span{font-size:var(--fs18);text-align:left;} .casting-received .list>.item>.i1>div>span>em{font-size:var(--fs16);padding-top: 5px;} .casting-received .list>.item>.i2{ display: flex; padding: var(--gap); background: #f5f5f5; border-radius: var(--gap); } .casting-received .list>.item>.i2>div{display: flex; flex-direction: column; } .casting-received .list>.item>.i2>div>strong {display: block; font-size:var(--fs18); margin-bottom:8px; } .casting-received .list>.item>.i2>div>strong>i {margin-right: 8px; } .casting-received .list>.item>.i2>div>span {display: block; font-size:var(--fs18); text-align:left; } /* 내가 제안한 캐스팅 */ /*.casting-sent{ --gap:1em; --row-col:2; } .casting-sent .disable{opacity: .5} .casting-sent .list{border-top:1px solid #ccc} .casting-sent .list>.item{} .casting-sent .list>.item { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; padding: var(--size60) 0; border-bottom:1px solid #ccc; cursor:default; gap:var(--gap); } .casting-sent .list>.item>div{flex: 0 0 calc((100% - (var(--gap) * (var(--row-col) - 1))) / var(--row-col));} .casting-sent .list>.item>.i1{display:flex;justify-content: flex-start;padding:var(--gap) 0;} .casting-sent .list>.item>.i1>img, .casting-sent .list>.item>.i1>div{} .casting-sent .list>.item>.i1>img{width:100px;max-width:100px; height:130px;max-height:130px;margin-right:var(--gap); vertical-align: middle; height: auto; object-fit: cover;border-radius: var(--gap);} .casting-sent .list>.item>.i1>div{display:flex;flex-direction: column;width:100%;} .casting-sent .list>.item>.i1>div>a{display:inline-block;max-width:120px;margin-top:10px;text-align:center;} .casting-sent .list>.item>.i2{display:flex;justify-content: flex-start;flex-direction: column;padding:var(--gap);background:#efefef;border-radius: var(--gap);} .casting-sent .list>.item>.i2>span{display:block;margin-top:var(--gap);font-size:var(--fs16);text-align:right} .casting-sent .list>.item .title{padding-bottom:10px}*/ .casting-sent{ --gap:1em; --row-col:2; } .casting-sent .disable{opacity: .5} .casting-sent .list{border-top:1px solid #ccc} .casting-sent .list>.item{} .casting-sent .list>.item { position: relative; display: flex; flex-direction: column; width: 100%; padding: var(--size60) var(--size30); border-bottom:1px solid #ccc; cursor:default; gap:var(--gap); } .casting-sent .list>.item>div{flex: 0 0 calc((100% - (var(--gap) * (var(--row-col) - 1))) / var(--row-col));} .casting-sent .list>.item>.i1{ display:flex; justify-content: flex-start; flex-direction: column; /*padding:var(--gap) 0;*/ } .casting-sent .list>.item>.i1>div>img, .casting-sent .list>.item>.i1>div{} .casting-sent .list>.item>.i1>div>span { font-size: var(--fs24); text-align: left; display: block; border-bottom: 2px solid #333; margin-bottom: 20px; padding-bottom: 5px; } .casting-sent .list>.item>.i1>div>span>em {font-size:var(--fs16);padding-top: 5px; } .casting-sent .list>.item>.i1>div>img{ width: 100px; max-width: 100px; /*height: 130px; max-height: 130px;*/ margin-right: var(--gap); vertical-align: middle; height: auto; object-fit: cover; border-radius: 0.5em; } .casting-sent .list>.item>.i1>div{display:flex;flex-direction: column;width:100%;} .casting-sent .list>.item>.i1>div>strong{font-size:var(--fs20);text-align:left; display: block;border-bottom:2px solid #333; margin-bottom: 20px; padding-bottom:5px;} .casting-sent .list>.item>.i1>div.box1{/*display:flex;*/} .casting-sent .list>.item>.i1>div.box2{display:flex;flex-direction: row;} .casting-sent .list>.item>.i1>div>p.box3{display:flex;flex-direction:column;font-size:var(--fs18);} .casting-sent .list>.item>.i1>div>p.box3>a{margin-top:10px;} .casting-sent .list>.item>.i2{ display:flex; justify-content: flex-start; flex-direction: column; background:/*#f5f5f5*/ rgba(0,160,98,0.08); border-radius: var(--gap); padding:var(--gap); } .casting-sent .list>.item>.i2>div{display:flex;flex-direction: column;width:100%;} .casting-sent .list>.item>.i2>div>span:first-child{ font-size: var(--fs20); text-align: left; display: block; margin-bottom: 8px; /*color: var(--color-green);*/ /* border-bottom: 2px solid var(--color-green); */ /* padding-bottom: 5px; */ } .casting-sent .list>.item>.i2>div>span{font-size:var(--fs18);text-align:left; display: block; } .casting-sent .list>.item>.i2>div>span>strong>i{margin-right: 8px; } /* 통합검색 */ .integrated-search{ --gap:1em; --row-col:2; } .integrated-search .list{} .integrated-search .list>.item{ } .integrated-search .list>.item *{transition: all .3s ease-in-out;} .integrated-search .list>.item:nth-of-type(1)>a{border-top:1px solid #ccc;} .integrated-search .list>.item>a{ position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; padding: var(--size60) 0; border-bottom:1px solid #ccc; cursor:pointer; gap:var(--gap); } .integrated-search .list>.item>a.default{cursor:default} .integrated-search .list>.item>a>div{flex:1 1;display:flex;flex-direction: column;color: #000;text-align:left;gap:var(--gap)} .integrated-search .list>.item>a>div>.i1{font:700 var(--fs24) / 1.2 sans-serif} .integrated-search .list>.item>a>div>.i1>i{opacity: .7;margin-left:5px;font-size:var(--fs18)} .integrated-search .list>.item>a>div>.i1>i.fa-link-slash{opacity: .2;} .integrated-search .list>.item>a>div>.i2{font:400 var(--fs18) / 1.2 sans-serif; margin-right:var(--size40);} .integrated-search .list>.item>a>div>.i3{font:400 var(--fs16) / 2 sans-serif} .integrated-search .list>.item>a>div>.i3>span{ padding:6px var(--size20); border-radius: 50px; background:#ddd; /*background:var(--color-green2);*/ font-weight: 600; } .integrated-search .list>.item>a>div>.i3>i{margin-right:5px} .integrated-search .list>.item>a>div>.i3>i:nth-of-type(2){margin-left:10px} .integrated-search .list>.item>a>p { display: flex; flex-direction: row; font-size: var(--fs18); vertical-align: middle; color: #333; align-content: center; align-items: center; } .integrated-search .list>.item>a>p>.i3{font:400 var(--fs16) / 2 sans-serif} .integrated-search .list>.item>a>p>.i3>span{padding:6px var(--size20); border-radius: 50px; background:var(--color-green2);font-weight: 600;} .integrated-search .list>.item>a>p>.i3>i{margin-right:5px} .integrated-search .list>.item>a>p>.i3>i:nth-of-type(2){margin-left:10px} .integrated-search .list>.item>a>figure{overflow:hidden;width:100%;height:100%;max-width:var(--size200);margin-left:auto;aspect-ratio:1/1;border:1px solid #efefef;border-radius: var(--global-border-radius);} .integrated-search .list>.item>a>figure>img{width:100%;height:100%;object-fit: cover;} .integrated-search .list>.item:hover{} .integrated-search .list>.item:hover>a>figure>img{transform: scale(1.1);} .integrated-search .highlight{margin-right:2px;padding:2px;background-color: var(--color-green2);border-radius: 3px;font-family:auto;} /* 자주묻는질문 */ .section.faq>.wrap .list-wrap{border-top:1px solid #ccc} .section.faq>.wrap .list-wrap>.item{padding:0 var(--size30);border-bottom:1px solid #ccc} /* .section.faq>.wrap .list-wrap>.item:nth-of-type(1){border-top:1px solid #ccc} */ .section.faq>.wrap .list-wrap>.item>.question{padding: var(--size30) 0;display: flex;justify-content: space-between;align-items: center;font-weight:600;font-size:var(--fs24);cursor: pointer;} .section.faq>.wrap .list-wrap>.item>.question>span{margin-right:var(--size30);} .section.faq>.wrap .list-wrap>.item>.question::after{content:'\f067';font-family: "Font Awesome 6 Free";} .section.faq>.wrap .list-wrap>.item.on>.question{color:var(--color-green);} .section.faq>.wrap .list-wrap>.item.on>.question::after{content:'\f068';font-family: "Font Awesome 6 Free";} .section.faq>.wrap .list-wrap>.item>.answer{padding-bottom:var(--size30);display:none;font-size:var(--fs18);text-align: left;} @media (hover: hover) { .section.faq>.wrap .list-wrap>.item>.question:hover{color:var(--color-green);} } /* mypage qna */ .my-qna{ --gap:1em; --row-col:2; } .my-qna .disable{opacity: .5} .my-qna .list{border-top:1px solid #ccc} .my-qna .list>.item{} .my-qna .list>.item { position: relative; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; width: 100%; padding: var(--size60) var(--size30); border-bottom:1px solid #ccc; cursor:default; gap:var(--gap); } /* .my-qna .list>.item>div{flex: 0 0 calc((100% - (var(--gap) * (var(--row-col) - 1))) / var(--row-col));} */ .my-qna .list>.item>div{flex: 0 0 100%;width:100%} .my-qna .list>.item>.i1{display:flex;justify-content: flex-start;/*padding:var(--gap) 0;*/} .my-qna .list>.item>.i1>div{display:flex;flex-direction: column;width:100%;} .my-qna .list>.item>.i1>div>span{display:block;margin-top:var(--gap);font-size:var(--fs16);text-align:right} .my-qna .list>.item>.i1>div>strong{padding-bottom:10px; font-size:var(--fs24); } .my-qna .list>.item>.i1>div>strong>em{font-size:var(--fs16); font-weight:500; padding-top:5px; } .my-qna .list>.item>.i1>div>.content{font-size:var(--fs18); } .my-qna .list>.item>.i2>div { display:flex; justify-content: flex-start; flex-direction: column; margin-top:var(--gap); padding:var(--gap); background:#efefef; border-radius: var(--gap); } .my-qna .list>.item>.i2>div>strong {padding-bottom:10px; font-size:var(--fs20); } .my-qna .list>.item>.i2>div>strong>i {margin-right: 8px; } .my-qna .list>.item>.i2>div>strong>em {font-size:var(--fs16); font-weight:500; padding-top:5px; } .my-qna .list>.item>.i2>div>p {font-size:var(--fs18); } .my-qna .list>.item>.i1.no-reply{flex:0 0 100%} /*.my-qna .list>.item>.i2>div>span{display:block;margin-top:var(--gap);font-size:var(--fs16);text-align:right}*/ /* mypage like */ .my-like{ --gap:1em; --row-col:2; } .my-like .disable{opacity: .5} .my-like .list{border-top:1px solid #ccc} .my-like .list>.item{} .my-like .list>.item { position: relative; display: flex; align-items: center; width: 100%; padding: var(--size60) 0; border-bottom:1px solid #ccc; cursor:default; gap:var(--gap); } .my-like .list>.item>div{flex: 0 0 calc((100% - (var(--gap) * (var(--row-col) - 1))) / var(--row-col));} .my-like .list>.item>.i1{display:flex;justify-content: flex-start;flex:1 1} .my-like .list>.item>.i1>img { width: 100px; max-width: 100px; margin-right: var(--gap); vertical-align: middle; height: auto; object-fit: cover; border-radius: 0.5em; } .my-like .list>.item>.i1>div{display:flex;flex-direction: column; } .my-like .list>.item>.i1>div>strong {font-size:var(--fs20); padding-bottom:6px; } .my-like .list>.item>.i1>div>span {font-size:var(--fs16); } .my-like .list>.item>.i1>div>a{margin-top:10px; } .my-like .list>.item>.i2{ display: flex; flex-direction: column; flex-basis: auto; padding: var(--gap); width: 25%; text-align: center; } .my-like .list>.item>.i2>span{display:block;padding-bottom:var(--gap);font-size:var(--fs16); font-weight: 500; } .my-like .list>.item>.i2>strong{font-size:var(--fs20); text-align: center; } .my-like .list>.item>.i2>strong>i{margin-right:8px; } /* mypage registered performances */ .my-rp{ --gap:1em; --row-col:2; } .my-rp .disable{opacity: .5} .my-rp .list{border-top:1px solid #ccc} .my-rp .list>.item{} .my-rp .list>.item { position: relative; display: flex; flex-direction: column; /*flex-wrap: wrap; align-items: flex-start;*/ width: 100%; padding: var(--size60) var(--size30); border-bottom:1px solid #ccc; cursor:default; gap:var(--gap); } .my-rp .list>.item>p{ font-size: var(--fs24); text-align: left; display: block; border-bottom: 2px solid #333; padding-bottom: 5px; } .my-rp .list>.item>p>strong { font-size: var(--fs24); text-align: left; } .my-rp .list>.item>p>em { font-size: var(--fs18); padding-top: 10px; } .my-rp .list>.item.approvals3{opacity: 0.7;} .my-rp .list>.item>div{flex: 0 0 calc((100% - (var(--gap) * (var(--row-col) - 1))) / var(--row-col));} .my-rp .list>.item>.i1{display:flex; justify-content: flex-start; flex:1 1; border-bottom: 0px; margin-top: var(--size10);} .my-rp .list>.item>.i1>img{ width: 100px; max-width: 100px; height: 130px; max-height: 130px; margin-right: var(--gap); vertical-align: middle; height: auto; object-fit: cover; border-radius: 0.5em; } .my-rp .list>.item>.i1>div{display:flex;flex-direction: column;width:100%;} .my-rp .list>.item>.i1>div>strong{font-size:var(--fs24); margin-bottom:10px; } .my-rp .list>.item>.i1>div>a{display:inline-block; max-width:120px; text-align:center;} .my-rp .list>.item>.i1>div>span{ display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 10px; font-size:var(--fs18); line-height: 1.2; } .my-rp .list>.item>.i1>div>span>strong{flex-shrink: 0;} .my-rp .list>.item>.i1>div>span>span{padding-left:5px; word-break: break-word;} .my-rp .list>.item>.i2 {display:flex;justify-content: flex-start;flex-direction: column;flex-basis:auto;padding:var(--gap); border-bottom: 0px;} /*.my-rp .list>.item>.i2>span{display:block;padding-bottom:var(--gap);font-size:var(--fs16);text-align:right}*/ .my-rp .list>.item>.i2 { display: flex; justify-content: center; flex-direction: row; align-items: center; padding: var(--gap); background: #f5f5f5; border-radius: 0.5em; width: 100%; text-align: center; } .my-rp .list>.item>.i2>a{min-width: 20%; margin: 0 10px; } .my-rp .list>.item>.i2>a.approvals1{cursor:default;background:#fff;border:1px solid #000;color:#000;} .my-rp .list>.item>.i2>a.approvals2{cursor:default;background:#dddddd;border-color:#dddddd;color:#000} .my-rp .list>.item>.i2>a.approvals3{cursor:default;background:#dddddd;border-color:#dddddd;color:#000} @media (max-width:640px) { .my-rp .list>.item>.i2>a { zoom: 1.4; margin: 0; padding: 5px 20px; } } .order-completed .content>i{color:var(--color-green2);font-size:var(--fs100)} .order-completed .content>h2{margin-top:20px} .order-completed .content>ul{display:flex;flex-direction: column;width:100%;margin-top:1em} .order-completed .content>ul>li{} .order-completed .content>ul>li>strong{} .order-completed .content>ul>li.vbank-info p{padding:10px 0;font-size:14px;color:red;line-height:1.4em} .order-completed .focus{position:relative;margin:30px 0 0 0;padding:15px 30px 15px 15px;background:#ecf0f5;border-radius:3px;border-left:5px solid #bfbfbf; color:#333} .order-completed .focus>div{font-size:16px;padding-bottom:10px;font-weight:700} .order-completed .focus>p{line-height:1.4em;font-size:16px} .order-completed .focus>p>strong{letter-spacing: 0px !important;font-size:16px;font-weight:600} .order-completed .focus>p>span{display:block;padding-left:20px;font-size:14px;color:#999;} /* Global ******************************************************************* */ /* button style */ .line {border-top: 1px solid #ccc; padding-top: 30px; margin-top: var(--size80);} .btn-wrap {text-align:center;} .btn-wrap.area1 {margin:var(--size100) 0 var(--size100); display:block; text-align:center; } .btn-wrap.area2 {margin:var(--size60) 0 0; display:block; text-align:center; } .btn-wrap.area3 {margin:var(--size40) 0 0; display:flex; flex-direction: row-reverse;} .btn-wrap.area4 {margin-top:var(--size60); display:flex; justify-content: center; } .btn{ position: relative; overflow: hidden; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; transition: all 0.3s ease-in-out; } .btn:hover{opacity: 0.8; transition: all 0.3s ease-in-out;} .btn>i {margin-right:var(--size6); transition: all 0.3s ease-in-out;} .btn>span>i {margin-right:var(--size6); transition: all 0.3s ease-in-out;} .btn.btn-file { position: relative; width: 100%; margin-bottom: 5px; padding-right: 80px; background-color: #f4f4f4; color: #444; border-color: #ddd; font-size:var(--fs16);text-align: left; white-space: normal; } .btn.btn-file:hover{ color: #333; transition: all 0.3s ease-in-out; } .btn.btn-file::after { --fa: "\f019"; content: var(--fa); position: absolute; top: 50%; right: 10px; font: var(--fs20) / 1 FontAwesome, 'Pretendard Variable', sans-serif; transition: all 0.3s ease-in-out; } .btn.btn-file::before{ content:'DOWNLOAD'; position: absolute; top: 50%; right: 10px; font:700 var(--fs14) / 1 'Pretendard Variable', sans-serif; transition: all 0.3s ease-in-out; } .btn.btn-file::after { transform: translateY(-50%); } .btn.btn-file::before{ transform: translateY(500%); } .btn.btn-file:hover::after { transform: translateY(-500%); } .btn.btn-file:hover::before{ transform: translateY(-50%); } .btn.btn-tag { /* margin: var(--size10) var(--size20) var(--size10) 0; */ padding: var(--size15) var(--size20); border-radius: 4px; border: 1px solid #000; color:#000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size:var(--fs16); transition: all 0.3s ease-in-out; } .btn.btn-tag:hover{background:#efefef} .submit { padding:var(--size30) var(--size80); margin:var(--size20) 0; background:var(--color-green); border:1px solid var(--color-green); border-radius:100px; font-size:var(--fs30); font-weight:600; color:#ffffff; display:inline-block; } .btnL { padding:var(--size25) var(--size100); margin:var(--size20); background:var(--color-white); border:1px solid var(--color-gray3); border-radius:100px; font-size:var(--fs24); font-weight:600; color:#333333; display:inline-block; } .btnS { padding:var(--size20) var(--size40); margin:var(--size10); background:var(--color-white); border:1px solid var(--color-gray3); border-radius:5px; font-size:var(--fs20); color:#333333; font-weight:600; display:inline-block; } .btnSS { } .btnXS { padding: var(--size10) var(--size18); background: #333; border: 0; border-radius: 5px; color: #fff; font-size: var(--fs18); } .btnXSS{ padding: var(--size10) var(--size18); display: block; background: #333; border: 0; border-radius: 5px; color: #fff; font-size: var(--fs16); } @media (max-width:640px) { .btnL { padding:var(--size20) var(--size60); margin:var(--size10); } } @media (max-width:400px) { .btnL { padding:var(--size20) var(--size40); margin:var(--size5); } } .btnForm { display:flex; align-items: center; margin-left:var(--size10); padding:var(--size10) var(--size20); background:var(--color-white); border:1px solid var(--color-gray); border-radius:5px; color:var(--color-gray); font-weight:700; font-size:var(--fs20); text-align:center; } .btnForm:hover {background:#f1f1f1; } /* .btnForm:disabled { background:#f5f5f5; border:1px solid #ccc; cursor:not-allowed; } */ .btn-blue { border:1px solid var(--color-blue); background:var(--color-blue); color:#ffffff; } .btn-blue3 { border:1px solid var(--color-blue3); background:var(--color-blue3); color:#ffffff; } .btn-blue4 { border:1px solid var(--color-blue4); background:var(--color-blue4); color:#ffffff; } .btn-green { border:1px solid var(--color-green); background:var(--color-green); color:#ffffff; } .btn-gray4 { border:1px solid var(--color-gray4); background:var(--color-gray4); color:#333333; } .btn-gray { border:1px solid var(--color-gray); background:var(--color-gray); color:#ffffff; } .btn-white { border:1px solid #ccc; background:var(--color-white); color:#0f232e; } .btn.cancel {background:#000;color:#fff;border:1px solid #000;} .btn-blue:disabled, .btn-blue3:disabled, .btn-blue4:disabled, .btn-green:disabled, .btn-gray4:disabled, .btn-gray:disabled, .btn-white:disabled { /* background: #f5f5f5; border: 1px solid #ccc; color: var(--color-gray); cursor: not-allowed; */ } .pipe{display:inline-block;position:relative;margin:0 5px;} .pipe::after{content:'';position:absolute;bottom:0%;width:1px;height:10px;line-height:1;background:#000} .loading-button { transition:all 0.2s ease-in-out; position: relative; } .loading-button span { transition: 0.3s; transition-delay: 0.1s; transform: translate(-50%, -50%); } .loading-button:after { position: absolute; content: "✔"; color: transparent; text-shadow: 0 0 0 white; display: block; top: 100%; left: 50%; transition: 0.3s; transition-delay: 0.1s; } .loading-button:before{ opacity: 0; position: absolute; content: "\f1ce"; color: transparent; text-shadow: 0 0 0 white; display: block; top: 50%; left: 50%; margin-top:-15px; margin-left:-15px; transition: all 0.7s linear; transition-delay: 0.1s; font: 30px / 1 FontAwesome; animation: fa-spin 1s infinite; } .loading-button:hover span { transform: translate(-50%, calc(-50% - 5px)); } .loading-button:focus { outline: none; } .loading-button.loading { pointer-events: none; } .loading-button.loading span { opacity: 0; } .loading-button.loading:before { opacity: 1; } .loading-button.success { pointer-events: none; } .loading-button.success span { opacity: 0; } .loading-button.success:after { top: 50%; left: 50%; transform: translate(-50%, -50%); } .loading-button.success:before{ opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* select, checkbox, radio style */ .section>.wrap .calendar-wrap{display:flex;justify-content:space-between;} .section>.wrap .select_box{margin-right:var(--size10);padding:var(--size18) var(--size25);width:100%;border:1px solid #ccc;border-radius:5px;font-size:var(--fs20);} .section>.wrap .select_box:last-child{margin-right:0;} .section>.wrap .radio-wrap { display: flex; text-align: left; align-items: center; font-size: var(--fs20); gap:1em} .section>.wrap .radio-wrap label { /* margin-right: var(--size20); */ padding: var(--size18) var(--size25); position: relative; display: flex; align-items: center; width: calc(100% / 2); transition: all .3s ease-in-out; cursor: pointer; border:1px solid #ccc; border-radius: 5px; } .section>.wrap .radio-wrap label::before { content: ""; margin-right: 10px; width: 22px; height: 22px; border: 1px solid #848484; border-radius: 50%; transition: all .3s ease-in-out; background-color: #fff; } .section>.wrap .radio-wrap label::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; left: calc(var(--size25) + 6px); transition: all .3s ease-in-out; background-color: var(--color-gray); } .section>.wrap .radio-wrap input[type=radio] { display: none; } .section>.wrap .radio-wrap label.disabled::before, .section>.wrap .radio-wrap label.readonly::before{border-color:#f5f5f5; background-color: #f5f5f5; cursor: not-allowed; } .section>.wrap .radio-wrap label.disabled::after, .section>.wrap .radio-wrap label.readonly::after {border-color:#f5f5f5; background-color: #d9d9d9; cursor: not-allowed; } .section>.wrap .radio-wrap label.active::before{border-color: var(--color-green); background-color: var(--color-green); } .section>.wrap .radio-wrap label.active::after{background-color: #fff;} .section>.wrap .check-wrap { display: flex; flex-wrap:wrap; text-align: left; align-items: center; font-size: var(--fs20); } .section>.wrap .check-wrap label { margin-right: var(--size20); padding: var(--size18) 0; position: relative; display: flex; align-items: center; transition: all .3s ease-in-out; cursor: pointer; } .section>.wrap .check-wrap label::before { content: ""; margin-right: 10px; width: 22px; height: 22px; border: 1px solid #848484; border-radius: 4px; transition: all .3s ease-in-out; background-color: #fff; } .section>.wrap .check-wrap label::after { content: '\f00c'; display: block; position: absolute; top: 50%; left: 6px; transform: translateY(-50%); font: 16px / 1 FontAwesome; color:#fff; font-weight: 600; } .section>.wrap .check-wrap input[type=checkbox] { display: none; } .section>.wrap .check-wrap label.disabled::before, .section>.wrap .check-wrap label.readonly::before{border-color:#f5f5f5; background-color: #f5f5f5; cursor: not-allowed; } .section>.wrap .check-wrap label.disabled::after, .section>.wrap .check-wrap label.readonly::after {border-color:#f5f5f5; background-color: #d9d9d9; cursor: not-allowed; } .section>.wrap .check-wrap label.active::before{border-color: var(--color-green); background-color: var(--color-green); } .section>.wrap .check-wrap label.active::after{opacity: 1;} .section>.wrap .input-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: left; align-items: center; gap: 1em; width:100%;font-size: var(--fs20); } .section>.wrap .input-wrap label { position: relative; display: flex; align-items: center; flex:1 1 calc(100%/2 - 1em); padding:0; transition: all .3s ease-in-out; cursor: pointer; } .section>.wrap .input-wrap label>input{padding-right:40px} .section>.wrap .input-wrap label>span{position:absolute;top:50%;right:10px;transform: translateY(-50%);} /* popup */ .section .pop-wrap{display:flex;display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;background:rgba(0, 0, 0, .45);z-index: 99999;} .section .pop-wrap>.pop{margin:0 auto;display:flex;position:relative;flex-direction:column;align-items:center;top:calc(var(--header-height) * 3);width:90vw;max-width:850px;height:70vh;} .section .pop-wrap>.pop>.pop-bg{padding:35px;height:80%;background:#fff;line-height:1.6;overflow:hidden;} .section .pop-wrap>.pop>.pop-bg>.pop-content{padding-right:10px;height:100%;overflow-y:auto;white-space: pre-wrap;} .section .pop-wrap>.pop>.pop-close { padding:var(--size18); margin-top:var(--size20); display:flex; align-items:center; justify-content:center; width:var(--size150); background:var(--color-gray); border:var(--color-gray); border-radius:50px; color:#fff; font-size:var(--fs18); font-weight:600; transition:0.6s; } /* no-results */ .no-results{overflow:hidden;position:relative;max-width:100%;margin:20px auto var(--size30);padding:var(--size60);background:#f6f6f6;border-radius: var(--global-border-radius);text-align:left} .no-results h3{font:700 var(--fs30) sans-serif;color:var(--color-green)} .no-results ul{margin:20px 0 0 20px;list-style: disc;} .no-results ul li{} .no-results .icon{position: absolute; transform: scale(11) translate(-66%, 10px); top: -4em; right: 4em; opacity: 0.05;animation: no-results-cloud-loop 1.4s infinite ease alternate} .no-results i{position:absolute;top:0;right:0;} .no-results i{} .no-results i.fa-face-sad-tear{zoom:.7;top:3px;right:5px} @keyframes no-results-cloud-loop { 0% { transform: scale(11) translate(-66%, 12px) } 100% { transform: scale(11) translate(-66%, 10px) } } /* text box */ .text-box{ padding:var(--size60); border:1px solid #000; border-radius: 10px; text-align: left; } .text-box ul{list-style: disc;} .text-box ul li{position:relative;margin:10px 0;margin-left:25px;font:var(--fs18) sans-serif} .text-box ul li:before{position: absolute; left: 0; } .text-box ol{list-style:disc;margin-left:20px;} .text-box ol{} @media (max-width:1900px) { .text-box{ padding:var(--size30); } } /* daterangepicker */ .daterangepicker td.active, .daterangepicker td.active:hover { background-color:var(--color-green) } .btn-primary{background:var(--color-green) !important;color:#fff !important} /* 등록폼 */ .form.type1{} .form.type1>ul{} .form.type1>ul>li{ display: flex; align-items: flex-start; flex-direction: column; padding-bottom:var(--size40); } .form.type1>ul>li>strong{display:block; font-size:var(--fs20);margin-bottom:var(--size8)} .form.type1>ul>li>strong>i{margin-left:5px;color:var(--color-green)} .form.type1>ul>li>div{position:relative;width:100%} .form.type1>ul>li>div>input[type=text]{} .form.type1>ul>li>div>i.fa-calendar-days{position:absolute;top:50%;right:1em;transform: translateY(-50%);color:var(--color-gray2);} .form.type1>ul>li>div>input[type=text].date3{cursor:pointer !important;} .form.type1>ul>li>small{text-align:left; color:var(--color-gray2); } .form.type1>ul>li>div>small{text-align:left;display: block; color:var(--color-gray2);} /* 목록으로 버튼 */ .go-list { font-size:16px; font-weight: 600; padding:14px 24px 14px 0; display:inline-flex; align-items:center; border-radius:99px; position:relative; color:#000; transition: all .5s cubic-bezier(.77,0,.175,1); } .go-list>span{ line-height:1; position:relative; z-index:5; margin-left:15px; } .go-list>i{ display:inline-block; position:relative; z-index:5; transform: rotate(0deg) translateX(0); transform-origin: left; /*transition: all 0.1s ease;*/ } .go-list:before { content: ''; background-color: #000; width: 32px; height: 32px; display: block; position: absolute; z-index: 1; border-radius: 99px; top: 50%; left: 16px; transform: translateY(-50%); opacity: 0; transition: all 0.5s ease; color:#fff;} .go-list:hover {padding-left:25px;color:#fff;} /*.go-list>i:hover {color:#fff;}*/ .go-list:hover>span{ margin-left:15px;color:#fff;} .go-list:hover:before { content: ''; width: 100%; height: 100%; left: 0; opacity: 1; } /* mouse icon */ .mouse-wrap.stop{ animation: disappear .8s forwards; } .mouse-wrap { position: fixed; z-index: 1003; bottom: 0vh; left: 50%; transform: translateX(-50%) scale(.8); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 150px; transition: all 0.3s ease-in-out; color:#fff; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; } .mouse { width: 33px; height: 60px; border-radius: 60px; border: solid 3px #fff; margin-bottom: 10px; position: relative; } .mouse .rcont { width: 100%; text-align: center; position: absolute; left: 0; top: 15px; } .mouse .rcont .ruedita { display: block; width: 5px; height: 9px; margin: 0 auto; background-color: #fff; animation: ruedita 1s infinite ease; border-radius: 3px; } .mouse .flechas { position: absolute; top: 1px; left: 0; width: 100%; height: 29px; padding: 4px 0; animation: flechitas 1s infinite; text-align: center; } .mouse .flechas .fl, .mouse .flechas .flb { display: block; transform: rotate(45deg); width: 4px; height: 4px; margin: 0 auto; border-left: 1px solid #fff; border-top: 1px solid #fff; } .mouse .flechas .flb { transform: rotate(225deg); } .mouse .flechas .arriba { margin-bottom: 15px; } .mouse-wrap>p{line-height:1} @keyframes ruedita { 0% { transform: translateY(-2px); } 50% { transform: translateY(2px); } 100% { transform: translateY(-2px); } } @keyframes flechitas { 0% { opacity: 0.1; } 50% { opacity: 0.25; } 100% { opacity: 0.1; } } @keyframes disappear { 0% { opacity: .7; transform: translateX(-50%) scale(.8) rotate(0deg); } 100% { opacity: 0; transform: translateX(-50%) scale(0) rotate(360deg); } } .mouse-stop{} /* 팝업 오픈 애니메이션 */ .mfp-content{animation: opacityAni .5s both;} /* 번역기능 활성화 */ /* #google_translate_element{position:absolute;top:0;right:1em;transform: translate(0,-100%);} */ #google_translate_element{margin-top:20px; text-align: right;} .translated-ltr{ /* --position:40px */ } .translated-ltr body{text-transform: capitalize;} .translated-ltr #header{top:var(--position)} .translated-ltr #header>.container>.menu-wrap>.menu{max-width:60%} .translated-ltr #header>.container>.menu-wrap>.menu>li>a{margin:0 var(--size10)} .translated-ltr #header.in>.container>.menu-wrap>.menu>li>a font, .translated-ltr #header.active>.container>.menu-wrap>.menu>li>a font, .translated-ltr #header.sub>.container>.menu-wrap>.menu>li>a font, .translated-ltr #header.on>.container>.menu-wrap>.menu>li>a font{font-size:var(--fs16)} .translated-ltr #global-search-box{top:var(--position)} .translate-br{padding:0 !important;margin:0 !important} .translated-ltr .translate-br{display:block;height:0;padding:0;} /* .translate-active #footer div.mobile */ @media (max-width:1900px) { #header>.container>h1{margin-right: var(--size50); } #header>.container>h1>a{width:160px; } /*#header>.container{margin: calc(var(--header-height) / 2) var(--size40)}*/ #header>.container>.menu-wrap>.menu>li>a{font-size:var(--fs20);} } @media (max-width:1700px) { #header>.container>h1{margin-right: var(--size40);} /*#header>.container{margin: calc(var(--header-height) / 2) var(--size40)}*/ #header>.container>.menu-wrap>.menu>li>a{margin:0 var(--size20);font-size:var(--fs18);} } @media (max-width:1600px) { #header>.container>h1>a{width:140px; } #header>.container>.menu-wrap>.menu>li>a{margin:0 var(--size20);font-size:var(--fs18);} #header.on>.container>.menu-wrap>.menu>li>a{margin:0} } @media (max-width:1500px) { #header>.container>.menu-wrap>.menu>li>a{margin:0 var(--size15);font-size:var(--fs18);} } /* @media (max-width:1300px) */ @media (max-width:1400px) { #header>.container>.link>.auth>a{font-size:var(--fs14); margin-right:var(--size20);} .section.visual>.wrap{margin:0 1em} } /* @media (max-width:1200px) */ @media (max-width:1320px) { #header>.container>h1>a{width:100px} #content{padding-left:1em;padding-right:1em} #footer>.wrap{width:calc(100% - 2em)} .section.mypage>h2{font-size:var(--fs80)} .section.mypage>.wrap>.snb{width:calc(30% - 5rem); margin-right:5rem;} #mypage-content{} .section.visual{margin:0 -1em;} } /* 여기서부터 태블릿 */ @media (max-width:1200px) { #header>.container{margin: 0;} #header>.container>h1{display: flex; flex-direction: row;} #header>.container>h1{position: absolute;top:50%;left:20px;transform: translate(0,-50%);} #header>.container>h1>a{width:50%;} #header>.container>h1>a>img{/*width:60%;*/} #header>.container>.menu-wrap{justify-content: flex-end;} #header>.container>.menu-wrap>.menu{max-width:100% !important;} #header:not(.on)>.container>.menu-wrap>.menu{display:none;} #header .util_menu{display:block;} /* 헤더 > 검색 */ #header>.container>.link {top: 50%;} #header>.container>.link>.auth>a{font-size:var(--fs30); margin-right:var(--size20); } #header>.container>.link>.auth>a>span{display:none} #header>.container>.link>.auth>a>i {margin-bottom: 0px; /*color: #000;*/} #header>.container>.link>.subscription{margin-right:var(--size20);} #header.on>.container>.menu-wrap>.banner{display: block;} #content { padding-top: var(--header-height); } .list-card{margin-left:0.5em;margin-right:0.5em} #footer>.quick{zoom:70%} .list-type5{--gallery-row-col: 3;} #header.on>.container>.menu-wrap { top: var(--header-height); } #header.on>.container>.menu-wrap>.menu { margin-top: 60px; } #header.on .copy_link { position: absolute; z-index: 2; top: var(--header-height); left: 0; display: flex; justify-content: space-around; align-items: center; width: 100%; background: #333; font-size: var(--fs20); } #header.on .copy_link>a {width:100%;padding:0.7em;font-size:var(--fs18); text-align:center;color:#fff; } #header.on .copy_link>a>i {margin-right: 8px; } #header.on .copy_link>a.search{display:none; } #header>.container>.link>.auth>a.login { display: none; } #footer>.wrap>.info>.logo{flex: 0 0 calc(30%);margin:0} #footer>.wrap>.info>.copyright{flex: 0 0 calc(70%);padding-left:var(--size70)} #footer>.wrap>.info>.family{ position:relative; flex: 0 0 calc(70% - var(--size70)); margin:2rem 0 0 30%; padding-left:var(--size70); display:flex; align-items: center; } #footer>.wrap>.info>.family>.policy{padding:0} #footer>.wrap>.info>.logo img{width:100%;max-width:240px} #footer {background: #f5f5f5;} #footer>.wrap{width:100%; margin-top: 3em; } #footer>.wrap>.banner-box a{ flex: 1 1 calc(50% - 5px); max-width: calc(50% - 5px); } #footer>.wrap>.banner-box a img {border-radius: 10px;} #footer>.wrap>.link { border-top: 0px solid #000; border-bottom: 0px solid #000; width: 94%; margin: 0 auto; /*border: 1px solid #000;*/ } #footer>.wrap>.link>ul { display: flex; justify-content: flex-start; align-items: stretch; flex-direction: row; flex-wrap: wrap; } #footer>.wrap>.link>ul>li{ border: 1px solid #000; width: 32%; text-align: center; background: #fff; margin: 1px; } #footer>.wrap>.link>ul>li>a{padding: 15px var(--size10);} #footer>.wrap>.info>.logo{flex:0 0 100%} #footer>.wrap>.info>.copyright{flex:0 0 100%;margin:1em 0 0 0;padding:0} #footer>.wrap>.info>.family{flex:0 0 100%;margin:2em 0 0 0;padding:0; align-items: flex-start; flex-direction: column; } #footer>.wrap>.info>.family>.family-site{width:80%} #footer>.wrap>.info>.family>.policy{margin-top:1em} #footer>.wrap>.banner-box {width: 100%; padding: 2em 10px; border-bottom: 4px solid #000;background: #fff;} #footer>.wrap>.link {width: 94%; margin: 3em auto 0; } #footer>.wrap>.info {width: 94%; margin: 0 auto; padding: 3em 0 5.5em;} #footer>.wrap>.info>.family>.policy>a {font-size: 16px;} } @media (max-width:1024px) { .go-list:before {transition: none;} .go-list>i {transition: none;transform: none; transform-origin: unset;} .go-list {font-size: var(--fs24); } .section.sub-type1>.wrap>.hashtag>strong, .section.sub-type1>.wrap>.prev>strong, .section.sub-type1>.wrap>.next>strong {width: 15%;} .section.sub-type1>.wrap>.prev>span, .section.sub-type1>.wrap>.next>span {display: none;} .section.sub-type2>.wrap>.hashtag>strong, .section.sub-type2>.wrap>.prev>strong, .section.sub-type2>.wrap>.next>strong {width: 15%;} .section.sub-type2>.wrap>.prev>span, .section.sub-type2>.wrap>.next>span {display: none;} } @media (max-width:960px) { /* section sub type auth */ .section.sub-type-auth>.wrap{padding: var(--size120) 0} .section.sub-type-auth>.wrap>.form{font-size:var(--fs20);} .section.sub-type-auth>.wrap>h2{/*margin-bottom: var(--size40);*/} .section.mypage>h2{font-size:var(--fs62);border-width:4px} .section.mypage>.wrap>.snb{width:calc(30% - 2rem); margin-right:2rem;} #mypage-content{} .casting-sent .list>.item{flex-direction: column;} .casting-sent .list>.item>.i1{padding-bottom:0;} .casting-sent .list>.item>.i2{width:100%;} .my-qna .list>.item{flex-direction: column;} .my-qna .list>.item>.i1{padding-bottom:0;} .my-qna .list>.item>.i2{width:100%;} .my-like .list>.item{/*flex-direction: column;*/} .my-like .list>.item>.i1{padding: 0; flex-direction: column;} .my-like .list>.item>.i1>img {margin-right: 0; margin-bottom: 10px; } .my-like .list>.item>.i2{ display: flex; flex-direction: column; align-items: center; /*gap: var(--gap);*/ } .my-rp .list>.item{flex-direction: column;} .my-rp .list>.item>.i1{padding-bottom:0;} .my-rp .list>.item>.i2{ display: flex; flex-direction: row; align-items: center; gap: var(--gap); } #mypage-content h3 {padding-bottom: var(--size40);} .section>.wrap .list-search {margin-bottom: var(--size60);} #global-search-box>.content { width: 80%; } .section.mypage>.wrap>.snb>.info { margin-bottom: var(--size40); } #mypage-content.membership .product>.card { aspect-ratio: 1 / 0.6; width: 40%; } #mypage-content h4 { margin-top: var(--size40); } #mypage-content h4.type2 { margin-top: var(--size40); } } /* 여기서부터 모바일 */ @media (max-width: 768px) { :root{ --size640:98%; } /* .section>.wrap>h2{border-width: 3px;} */ .section.mypage>.wrap{flex-direction: column;} .section.mypage>.wrap>.snb{display:none} .section.mypage>.wrap>.snb>ul>li{padding-left:1em} .section.mypage>.wrap>.snb>ul>li>a>i{right:1em} #mypage-content{width:100%} .crown-wrap>.crown{top:-0.2em;width:32px;height:32px;} #header .sitemap_wrap { /*width: 60px; height: 60px;*/ } /*#header>.container>.link>.auth>a{font-size:var(--fs30); margin-right:var(--size10); }*/ /*#header>.container>.link>.auth>a>span{display:none}*/ #header>.container>.link>.auth>a.login {display:none;} #header.in>.container>.menu-wrap, #header.active>.container>.menu-wrap, #header.sub>.container>.menu-wrap, #header.on>.container>.menu-wrap {border-color:#fff; } /*#footer {background: #f5f5f5;} #footer>.wrap{width:100%; margin-top: 3em; } #footer>.wrap>.banner-box a{ flex: 1 1 calc(50% - 5px); max-width: calc(50% - 5px); } #footer>.wrap>.banner-box a img {border-radius: 10px;} #footer>.wrap>.link { border-top: 0px solid #000; border-bottom: 0px solid #000; width: 94%; margin: 0 auto; border: 1px solid #000; } #footer>.wrap>.link>ul { display: flex; justify-content: center; align-items: stretch; flex-direction: row; flex-wrap: wrap; } #footer>.wrap>.link>ul>li{ border: 1px solid #000; width: 33.3%; text-align: center; background: #fff; } #footer>.wrap>.link>ul>li>a{padding: 15px var(--size10);} #footer>.wrap>.info>.logo{flex:0 0 100%} #footer>.wrap>.info>.copyright{flex:0 0 100%;margin:1em 0 0 0;padding:0} #footer>.wrap>.info>.family{flex:0 0 100%;margin:2em 0 0 0;padding:0; align-items: flex-start; flex-direction: column; } #footer>.wrap>.info>.family>.family-site{width:80%} #footer>.wrap>.info>.family>.policy{margin-top:1em} #footer>.wrap>.banner-box {width: 100%; padding: 2em 10px; border-bottom: 4px solid #000;background: #fff;} #footer>.wrap>.link {width: 94%; margin: 3em auto 0; } #footer>.wrap>.info {width: 94%; margin: 0 auto; padding: 3em 0 1.5em;} #footer>.wrap>.info>.family>.policy>a {font-size: 16px;}*/ .list-type4>.item>a>span.i2 {width: 60%; } .section>.wrap .check-item+label:before { margin-right: var(--size20); } .section.sub-type1>.wrap>.head>.i2 { flex-direction: column; align-items: flex-start; } .section.sub-type1>.wrap>.head>.i2>div { position: unset; top: unset; right: unset; text-align: left; margin-left: 0; margin-top: var(--size10); width: unset; } .section.sub-type1>.wrap>.head>.i2>div>div {display: inline-block; margin-right:var(--size20); } .section.sub-type1>.wrap>.head>.i2>strong { margin-top: var(--size10); } .section.sub-type1>.wrap>.content{padding:var(--size70) 0; } .section.sub-type2>.wrap>.head>.i2>div {order: 3; margin-left: 0; margin-top: var(--size10); } .section.sub-type2>.wrap>.head>.i2>div>div {display: inline-block; } .section.sub-type2>.wrap>.head>.i2>span { padding: var(--size10) var(--size40); } .section>.wrap .list-search>input[type=text] { padding: var(--size40) var(--size20); font-size: var(--fs24); } .section>.wrap .list-search>button { font-size: larger; padding: 0; } /*.casting-view>.wrap>.head>.i2>div { font: 500 var(--fs24) sans-serif; } .casting-view>.wrap>.head>.i2>span { padding: var(--size10) var(--size30); font: 700 var(--fs24) sans-serif; } .content>.c1>button, .content>.c1>a { padding: var(--size40) 0; font: 700 var(--fs30) sans-serif; } .content>.c2>.item { padding: var(--size40); border-radius: 10px; } .content>.c2>.item>h3>div { display: block; width: 100%; margin-bottom: var(--size10); font-size: var(--fs60); } .content>.c2>.item>h3>span:nth-of-type(1) { margin-left: 0 !important; } .content>.c2>.item.type1>ul>li { font-size: var(--fs24); } .content>.c2>.item.type1>ul>li>strong {width: 30%; }*/ } @media (max-width:768px) { /*#header.on .copy_link{ position: fixed;z-index:2; bottom: 1%; left: 0; display: flex; justify-content: space-around; align-items: center; width: 100%; background: #333; font-size:var(--fs20) }*/ /*#header.on>.container>.menu-wrap { top: var(--header-height); } #header.on>.container>.menu-wrap>.menu { margin-top: 80px; } #header.on .copy_link { position: absolute; z-index: 2; top: var(--header-height); left: 0; display: flex; justify-content: space-around; align-items: center; width: 100%; background: #333; font-size: var(--fs20); } #header.on .copy_link>a{width:100%;padding:1em;text-align:center;color:#fff} #header.on .copy_link>a.search{display:none}*/ /*#header>.container>h1 {left: var(--size30);}*/ .section.sub-type2>.wrap>.content {padding-left: 0; padding-right: 0;} .list-card { --list-size:calc(100%/2); margin-left:-0.5em; margin-right:-0.5em } .list-card>.item a{max-height:65vh} /* .list-card>.item a img{transform: translateY(-50%);} */ .list-type1>.item>a{flex-wrap:wrap;padding:var(--size30);} .list-type1>.item>a>span.i1{order:1;margin-right:0;width:130px; font-size: var(--fs18); } .list-type1>.item>a>span.i2{order:2;font-size:var(--fs80);margin-left: auto !important; } .list-type1>.item>a>span.i3{order:3;width:100%;padding:var(--size30) 0;} .list-type1>.item>a>span.i3>strong {font-size: var(--fs30);} .list-type1>.item>a>span.i4{order:4;margin-right:0; margin-left:0; } .list-type1>.item>a>span.i4>div{display: inline-block; margin-right:var(--size20);} .list-type4>.item>a>span.i1{order:1;margin-right:0;} .list-type4>.item>a>span.i2{order:3;width:100%;padding:var(--size20) 0 0; margin-left: 0;} .list-type4>.item>a>span.i2>strong{font-size:var(--fs24)} .list-type4>.item>a>span.i3{order:2;margin-right:0} .list-type4>.item>a>span.i3>div{display:inline-block;} .list-card>.item a div {padding: var(--size40);} .list-card>.item a div small {right: var(--size40); bottom: var(--size30); } .list-type1>.item.old_month>a>span.i1{width:130px;} /* .list-type4>.item.casting-received>a{flex-wrap:wrap} .list-type4>.item.casting-received>a>.i1{order:1} .list-type4>.item.casting-received>a>.i2{order:3} .list-type4>.item.casting-received>a>.i3{order:2} .casting-received>a>.i2>div{flex-direction: column;} */ .casting-received .list>.item>.i3>div{flex-direction: column;} .list-type5{--gallery-row-col: 2;} .list-type5>.item>a>.img>img{aspect-ratio: 1 / 1;} .list-type5>.item>a>.i1{font-size:var(--fs20)} .section.login_frm>.wrap>.member-login{padding-left:0;padding-right:0;font-size:var(--fs20)} .section.login_frm>.wrap>.sns-login>.cont{margin: 0 auto} /* section sub type auth */ .section.sub-type-auth.mypage>.wrap>.form>ul>li, .section.sub-type-auth>.wrap>.form>ul>li{padding: var(--size20) 0;align-items:flex-start;flex-direction:column;/*border-bottom:0;*/} .section.sub-type-auth>.wrap>.form>ul>li>.item1{margin:0 var(--size10) var(--size10) 0;} .section.sub-type-auth>.wrap>.form>ul.link>li>.item2{align-items: flex-start;flex-direction: column;} .section.sub-type-auth>.wrap>.form>ul.link>li>.item2>span {margin-top: 5px;} .section.sub-type-auth.mypage>.wrap>.form>ul>li>.item2>a {width: 100%; } /*.section.sub-type1>.wrap>.head>.i2{position:relative;flex-direction: column;align-items: flex-start} .section.sub-type1>.wrap>.head>.i2>strong{margin-top:10px;text-align:left;} .section.sub-type1>.wrap>.head>.i2>div{position:absolute;top:calc(var(--size60) + 5px);right:1em}*/ /*.section.sub-type1>.wrap>.content{padding:var(--size70) 0; }*/ .section.sub-type1>.wrap>.hashtag, .section.sub-type1>.wrap>.prev, .section.sub-type1>.wrap>.next{flex-wrap:wrap;padding:var(--size30) var(--size20);font-size:var(--fs16);} .section.sub-type1>.wrap>.hashtag>div {margin-top:10px;} /* .section.sub-type1>.wrap>.hashtag>strong, */ .section.sub-type1>.wrap>.prev>strong, .section.sub-type1>.wrap>.next>strong{order:1;width:15%;} .section.sub-type1>.wrap>.prev>a, .section.sub-type1>.wrap>.next>a{order:3;/*margin-top:10px;*/width:85%;} .section.sub-type1>.wrap>.prev>span, .section.sub-type1>.wrap>.next>span{/*order:2;margin-left:auto;padding-left:0*/ display:none; } /* .section.sub-type1>.wrap>.hashtag>div>span{max-width:240px} */ .section.sub-type2>.wrap>.head>.i2{flex-wrap: wrap;} .section.sub-type2>.wrap>.head>.i2>strong{order:3;width:100%;margin-top:10px;margin-right:0;} .section.sub-type2>.wrap>.head>.i3.type2>div{flex: 1 1 100%} .section.sub-type2>.wrap>.head>.i3>div{flex-wrap: wrap;padding-left:var(--size10)} .section.sub-type2>.wrap>.head>.i3>div>strong{width:80px} .section.sub-type2>.wrap>.head>.i3>div.file>p{flex-shrink: 1;} .section.sub-type2>.wrap>.hashtag, .section.sub-type2>.wrap>.prev, .section.sub-type2>.wrap>.next{flex-wrap:wrap;padding-left:1em;font-size:var(--fs16);} .section.sub-type2>.wrap>.prev>strong, .section.sub-type2>.wrap>.next>strong{order:1;width:15%;} .section.sub-type2>.wrap>.prev>a, .section.sub-type2>.wrap>.next>a{order:3;/*margin-top:10px;*/width:85%;} .section.sub-type2>.wrap>.prev>span, .section.sub-type2>.wrap>.next>span{/*order:2;margin-left:auto;padding-left:0*/ display:none; } .section>.wrap .list-category>li>label, .section>.wrap .list-category>li>a{font-size:var(--fs24)} .section>.wrap .list-search{width:100%;max-width:100%;min-width:100%; margin: 0 0 var(--size100) 0; } .list-card.type2>.item a.a2 { font-size: var(--fs30); } .list-card.type2>.item a.a2 span { font-size: var(--fs18); } .list-card.type2>.item a.a1 div span {padding: 5px var(--size20); } .list-card {--card-fs3: var(--fs18);} #mypage-content .form>ul>li{ flex-direction: column; align-items: flex-start; } #mypage-content.membership .product>.card.type3{display:none} #mypage-content.membership .btn-wrap{flex-direction: column;} #mypage-content.membership .product {flex-direction: column; align-items: normal; } #mypage-content.membership .product>.info>strong {font-size: var(--fs30);} #mypage-content.membership .product>.info>ul {margin: 10px 0 0 20px;} #mypage-content.membership>div {padding: var(--size60) var(--size30);} #mypage-content.membership .product>.card>.img1 {} #mypage-content.membership .product>.card>strong>small {font-size:inherit;} #mypage-content.membership .product>.card {font-size:var(--fs80); aspect-ratio: 1 / 0.7; width:100%; padding: var(--size40); margin-top:var(--size30); margin-left:0;} #mypage-content.membership .product>.card>.img2 {bottom: var(--size60); left: var(--size60); width: 15%;} #mypage-content.membership .product>.card>.img1 {top: var(--size60); left: var(--size60); width: 50%;} #mypage-content .form>ul>li .item1 {margin: 0 0 var(--size10) 0;} .section>.wrap .notice-wrap .other-link { flex-direction: column; } .section>.wrap .notice-wrap .other-link>div>a {display: block; margin-top: 10px; font-size:var(--fs20); text-align: right; } .section.login_frm>.wrap>.member-login>.other-wrap { align-items: flex-start; flex-direction: column; } .section.login_frm>.wrap>.member-login>.other-wrap>div {margin: var(--size10); } .schedule_wrap>.schedule_calendar>.btnL { padding: var(--size40) 0; font: 700 var(--fs30) sans-serif; } .section>.wrap .btn-wrap.type2>.btnL { width: 97%; padding: var(--size40) 0; font: 700 var(--fs30) sans-serif;} .section>.wrap h3.type2 { margin-bottom: var(--size30); font-size: var(--fs40);} .text-box ul li { margin-left: 10px; } .crown { width: var(--size40); height: var(--size40); } .list-card>.item a div p {font-size: var(--size40); } .integrated-search .list>.item>a>div>.i2 { margin-bottom: 10px; margin-right: 0; } .integrated-search .list>.item>a>div>.i3 { position: absolute; bottom: 20px; } .integrated-search .list>.item>a { padding-bottom: 40px; } } @media (max-width:480px) { .list-card { --list-size:100%; margin-left:-0.5em; margin-right:-0.5em } .section>.wrap .agree-wrap .integrated-search .list>.item>a>div>.i3 { position: absolute; bottom: 20px; } .integrated-search .list>.item>a { padding-bottom: 60px; } #footer>.wrap>.link>ul>li {width: 49%; } #footer>.wrap>.link>ul>li>a {padding: 10px var(--size10); } #header.on>.container>.menu-wrap>.menu>li>a {font-size: var(--fs24);} #header.on>.container>.menu-wrap>.menu>li>ul>li>a {font-size: var(--fs20);} } } @media (max-width:380px) { #header>.container>h1>a{width: 90px;} #header>.container>.link>.auth>a.login{display:none} .list-type5{--gallery-row-col: 1;} .list-type5>.item>a>.i1{font-size:var(--fs20);} .section>.wrap .check-item+label {flex-direction: column; align-items: flex-start; } .section>.wrap .check-item+label:before { margin-bottom: var(--size10); } .section>.wrap .check-item+label>span { display: flex; flex-direction: column; } #header.on .copy_link>a {font-size:var(--fs146); } } @media (max-width:320px) { }