@charset "utf-8";
@import url('aos.css');
@import url('slick.css');
@import url('open-color.css');
@import url('fonts.css');

html,body,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,em,font,img,ins,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,ul,ol,li,dl,dt,dd,table,caption,tbody,tfoot,thead,tr,th,td,fieldset,fo7m,label,legend,input,button,textarea,select{margin:0;padding:0}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;margin:0;padding:0}
legend{display:block;overflow:hidden;position:absolute;width:1px;height:1px;font-size:1px;line-height:0;text-indent:-999em;white-space:nowrap; }
fieldset,img,table,caption,tbody,tfoot,thead,tr,th,td,button,hr{border:0 none}
img{vertical-align:sub;}
body li{vertical-align:top}
ul li{list-style:none; padding:0; margin:0;}
table{border-collapse:collapse}
caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
button{overflow:visible;border:0 none;cursor:pointer}
button::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner {padding: 0;border: 0 none}
a { text-decoration:none; color:var(--oc-gray-7);  }
address,
em { font-style:normal }
body,input,select,textarea,button,h1,h2,h3,h4,h5,h6 { font-family:var(--font-text); font-size:16px; color: var(--oc-gray-7); font-weight: 400;text-decoration: none; }
a:hover,a:link, a:visited{ text-decoration: none;}
textarea, .inp, select { border: 0; outline: none; border-radius: 0; resize: none; box-shadow: none; -webkit-appearance: none; appearance: none; font-weight: normal; }

/**************************************************************************************************************
	공통
**************************************************************************************************************/
.mb0 { margin-bottom:0 !important }
.mb5 { margin-bottom:5px !important }
.mb10 { margin-bottom:10px !important }
.mb15 { margin-bottom:15px !important }
.mb20 { margin-bottom:20px !important }
.mb25 { margin-bottom:25px !important }
.mb30 { margin-bottom:30px !important }
.mb35 { margin-bottom:35px !important }
.mb40 { margin-bottom:40px !important }
.mb45 { margin-bottom:45px !important }
.mb50 { margin-bottom:50px !important }
.mb55 { margin-bottom:55px !important }
.mb60 { margin-bottom:60px !important }
.mb70 { margin-bottom:70px !important }
.mb75 { margin-bottom:75px !important }
.mb80 { margin-bottom:80px !important }
.mb90 { margin-bottom:90px !important }
.mr30 { margin-right:30px !important; }
.mr40 { margin-right:40px !important; }
.mr100 { margin-right:100px !important; }
.blue { color:#009bdf !important; }
.blue2 { color:#3f5cff !important; }
.white { color:#fff !important; }
.green { color:#049d42 !important; }
.red { color:#ff1966 !important; }
.gray { color:#8b8b8b !important; }
.black { color:#444 !important; }
.yellow { color:#ffe950 !important; }
.under { text-decoration:underline !important }
.f11 { font-size:11px !important }
.f14 { font-size:14px !important }
.f15 { font-size:15px !important }
.f16 { font-size:16px !important }
.f18 { font-size:18px !important }
.f20 { font-size:20px !important }
.f21 { font-size:21px !important }
.f24 { font-size:24px !important }
.f26 { font-size:26px !important }
.clear { clear:both; }
.fl { float:left !important }
.fr { float:right !important }
.w30 { width:30% !important }
.w35 { width:35% !important }
.w40 { width:40% !important }
.w45 { width:45% !important }
.w50 { width:50% !important }
.w53 { width:53% !important }
.w55 { width:55% !important }
.w60 { width:60% !important }
.w70 { width:70% !important }
.w65 { width:65% !important }
.pdt10 { padding-top:10px !important; }
.pdt15 { padding-top:15px !important; }
.pdt20 { padding-top:20px !important; }
.pdt25 { padding-top:25px !important; }
.pdt30 { padding-top:30px !important; }
.pdt40 { padding-top:40px !important; }
.pdt50 { padding-top:50px !important; }
.pdt60 { padding-top:60px !important; }
.pdt70 { padding-top:70px !important; }
.pdb10 { padding-bottom:10px !important; }
.pdb15 { padding-bottom:15px !important; }
.pdb20 { padding-bottom:20px !important; }
.pdb25 { padding-bottom:25px !important; }
.pdb30 { padding-bottom:30px !important; }
.pdb40 { padding-bottom:40px !important; }
.pdb50 { padding-bottom:50px !important; }
.pdb60 { padding-bottom:60px !important; }
.pdb70 { padding-bottom:70px !important; }
.pdb0 { padding-bottom:0 !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align:left !important; }
.clear:after { display: block; content: ''; clear: both; }
.fl { float:left; }
.fr { float:right; }
form { padding:0; margin:0; }
input[type="checkbox"], input[type="radio"],select { vertical-align:middle }
img { max-width:100%;}
.hidden { position: absolute; left: -9999px; }
b { font-weight: 500; }
strong { font-weight: 700; }
* { box-sizing: border-box;  -webkit-overflow-scrolling: touch; }
.block { display: block; width:100%;}
.ib { display: inline-block; vertical-align: middle; }

:root {
	--font-title : 'GothamPro', 'Spoqa Han Sans Neo', 'Noto Sans KR', sans-serif; 
	--font-text : 'pretendard', 'Noto Sans KR', sans-serif;
	--font-icon : 'Font Awesome 7 free', 'xeicon', 'pretendard', 'Noto Sans KR', sans-serif;
	--transition-all : all 0.3s ease;
}

/***********************************************************************************************
	MODAL
***********************************************************************************************/
.hidden { overflow:hidden; }
.modal-backdrop {position: fixed; top:0; right:0; bottom:0; left:0; background:var(--oc-gray-9); z-index:7500; opacity:.7; filter:alpha(opacity=70);}
.modal {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:8000; overflow:auto; -webkit-overflow-scrolling:touch; outline:0; }
.modal-dialog {position:relative; width:auto;margin:0 auto 15px;  padding:0 15px; }
.modal-content {position:relative; background-color:#fff; outline:none;  overflow:hidden;  border-radius:8px; box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1); }
.modal-header { position: relative; height:44px; line-height: 43px; padding-left: 15px;  background:var(--oc-gray-9); }
.modal-header h4 { font-size:14px; color: #fff; }
.modal-header h4 small { font-size:11px; color:var(--oc-gray-6); vertical-align: bottom; margin-right:2px; }
.modal-header .close {position: absolute; right:0; top:0; background: url(../img/common/ico_modal_close.png) no-repeat 50% 50%; width:44px; height: 44px;}
.modal-body { }

/***********************************************************************************************
	Form
***********************************************************************************************/
.select { vertical-align:middle; padding:0 35px 0 10px; height:40px; font-size:1em; color:var(--oc-gray-8);
	border: 1px solid var(--oc-gray-4); border-radius:0.5rem; background:#fff url(../img/bu_select_bk.png) no-repeat 100% 50%; background-position: right 12px center; transition: var(--transition-all); }
.select.wh { background:transparent url(../img/bu_select_wh.png) no-repeat 100% 50%; background-position: right 12px center; color:var(--oc-gray-3); }
.select option { color: var(--oc-gray-8); }
.inp { vertical-align:middle; padding:8px 15px; height:40px; background:#fff; border:1px solid var(--oc-gray-4); border-radius:0.5rem; font-size:1em; transition: var(--transition-all); color:var(--oc-gray-8); }
.inp::placeholder,
.select::placeholder{ color:var(--oc-gray-4); }
.inp:disabled { background: var(--oc-gray-2); }
textarea.inp,
#wr_content { padding:10px 15px; height:6em; background:#fff; border-radius:0.5rem; box-shadow:none; color:var(--oc-gray-8); }
input[type=checkbox].check,
input[type=radio].radio { -webkit-appearance:none; -moz-appearance:none; appearance:none; }
input[type=checkbox].check::before { content:'\ea0e'; font-family:var(--font-icon); vertical-align:-0.1em; }
input[type=radio].radio::before { content:'\e9c6'; font-family:var(--font-icon); vertical-align:-0.1em; }
input[type=checkbox].check:checked::before { content:'\e92d'; color:var(--oc-blue-6); }
input[type=radio].radio:checked::before { content:'\e9c7'; color:var(--oc-blue-6); }
input[type=file].inp { padding:4px 15px; }
input[type=file].inp::file-selector-button { width: 5.5em; height: 30px; line-height:28px; background:var(--oc-gray-7); border: 1px solid var(--oc-gray-7); border-radius:3px; color:#fff; font-size:0.9em; transition: var(--transition-all); cursor: pointer; }
.inp:focus,
.select:focus,
#wr_content:focus,
input[type=text].inp:focus,
textarea.inp:focus { border-color:var(--oc-blue-5) !important; outline:none !important; box-shadow:none !important; }
input[type=file].inp:hover::file-selector-button,
input[type=file].inp:focus::file-selector-button { background:var(--oc-blue-4); border: 1px solid var(--oc-blue-4); }

::-webkit-input-placeholder { color:var(--oc-gray-4);}
::-ms-input-placeholder { color:var(--oc-gray-4); }
::-ms-input-placeholder { color:var(--oc-gray-4); }
::-ms-clear { display: none; }

.inner { width:100%; padding:0 15px; max-width:1230px; margin: 0 auto; }

.only_mo,
.only_ta { display:none; }
@media only screen and (max-width:1000px) {
	.only_pc { display:none; }
	.only_ta { display:block; }
}
@media only screen and (max-width:560px) {
	.only_mo { display:block; }
}

.btn-icon { display: inline-block; vertical-align: middle; height:42px; line-height:40px;
	text-align: center; font-size:32px; font-weight:600; background:transparent; transition: var(--transition-all); }
.btn-icon:hover { color:var(--oc-blue-4); }
.btn-round { display: inline-block; vertical-align: middle; min-width:10em; height:42px; line-height:40px; padding:0 1em; 
	text-align: center; font-size:18px; font-weight:500; border-radius:42px; border: 1px solid transparent; transition: var(--transition-all); }
.btn-round.lg { height: 64px; line-height: 62px; font-size:24px; color:#fff; background:var(--oc-gray-7); border-color:var(--oc-gray-7); border-radius:64px; }
.btn-round.lg:hover { background:var(--oc-blue-4); border-color:var(--oc-blue-4); }
.btn-round.adm { background:var(--oc-violet-7); border-color:var(--oc-violet-7); }
.btn-round.adm:hover { background:var(--oc-violet-4); border-color:var(--oc-violet-4); }
.btn-round.bd { color:#fff; border-color:var(--oc-gray-4); }
.btn-round.bd:hover { border-color:var(--oc-blue-4); }
@media only screen and (max-width: 1000px) {
	.btn-round.lg { font-size:18px; height: 48px; line-height: 46px; }
}

/* === table === */
.order-table table { width:100%; border-collapse: collapse; }
.order-table .col-w180 { min-width:180px; }
.order-table table th { font-family:var(--font-title); letter-spacing:-0.01em; font-size:1em; font-weight: 500; color: var(--oc-gray-8); text-align: left; white-space: nowrap; }
.order-table table th span:before { content: ''; display: inline-block; vertical-align: middle; width:2px; height: 2px; background: var(--oc-gray-8); margin:-2px 5px 0 0;}
.order-table table th span.required { background:none !important; }
.order-table table th span.required:after { content: ' *'; color: var(--oc-indigo-6); font-weight:700; }
.order-table table td { text-align: left; padding:5px 0; }
.order-table table td .box { display: flex; justify-content: center; }
.order-table table td .box .inp { flex: 1; }
.order-table table td .box span { flex: 0.2; text-align: center; line-height: 40px; color: var(--oc-gray-8); }
.order-table table td .option { display:flex; flex-wrap:wrap; }
.order-table table td input[type=radio],
.order-table table td input[type=checkbox] { vertical-align: middle; line-height: 40px; }
.order-table table td label { vertical-align: middle; padding: 0 20px 0 2px; height: 40px; font-size:1em; color: #282828; }
.order-table table td label.disabled { color: var(--oc-gray-5); font-weight:100; }
.order-table table td a { display:inline-block; padding-bottom:0; color:#cb3074; border-bottom:1px solid transparent; }
.order-table table td a:hover { border-bottom:1px solid #cb3074; }
.order-table table td.right { text-align:right; }
.order-table table thead th,
.order-table table tfoot th { height: 37px; font-weight: 500; font-size:1em; font-family:var(--font-title); letter-spacing:-0.01em; }
.order-table table tbody td,
.order-table table tfoot td { font-size:1em; padding:0.75em 0.5rem; padding-right:3px; }
.order-table table tbody td .txt { color:var(--oc-gray-6); font-size:13px; }
.order-table table tbody td .inp + .txt { margin-top:3px; }
.order-table table tbody tr.receipt { display: none; }
.order-table table:has(#cash:checked) tr.receipt.cash,
.order-table table:has(#tax:checked) tr.receipt.tax { display: table-row; }
@media only screen and (max-width:770px) {
	.order-table table { display: block; }
	.order-table table tbody,
	.order-table table tfoot,
	.order-table table th,
	.order-table table tr,
	.order-table table td { display: block; }
	.order-table table th { padding-left:3px; }
	.order-table table td .box .inp { width:30%; }
	.order-table table td .option { display:block; }
	.order-table table tbody td,
	.order-table table tfoot td { padding: 3px 3px 1em; font-size:15px; }
	.order-table table td input[type=radio],
	.order-table table td input[type=checkbox] { line-height: 1.8; }
	.order-table table:has(#cash:checked) tr.receipt.cash,
	.order-table table:has(#tax:checked) tr.receipt.tax { display: block; }
}

/*#header { position: absolute; left: 50%; top:0; width:1000px; margin-left:-500px; padding-top:27px;  text-align: right; z-index:1; }*/
/*#header h1 { position: absolute; left: 0; top: 40px; }*/
#header { position:fixed; left:0; right:0; top:0; height:60px; border-bottom:1px solid transparent; z-index:100; transition: var(--transition-all); }
#header .inner { display:flex; align-items:center; height:60px; }
#header h1,
#header h1 a { display:flex; align-items:center; height:36px; }
#header h1 a img { max-height:100%; }
#header h1 a .logo.color { display:none; }
#header .btn-menu { margin-left:auto; }
#header.scrolled { background:#fff; border-color:var(--oc-gray-3); }
#header.scrolled h1 a .logo.color { display:inline-block; }
#header.scrolled h1 a .logo.black { display:none; }
@media only screen and (max-width:1000px) {
	#header,
	#header .inner { height:50px; }
	#header h1,
	#header h1 a { height: 24px; }
}

#gnb { position: fixed; right: -240px; top: 0; bottom: 0; width: 240px; background:var(--oc-gray-9); z-index: 200; padding:30px; padding-top:0; transition: var(--transition-all); }
#gnb .btn-box { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; } 
#gnb .btn-close { color:#fff; margin-left:auto; margin-right:-15px; }
#gnb .btn-close:hover { color:var(--oc-blue-2); }
#gnb .menus { margin-bottom:30px; }
#gnb .menus li { margin-bottom:1rem; }
#gnb .menus li a { font-family: var(--font-title); font-size: 1.5em; text-transform: uppercase; color:#fff; transition: var(--transition-all); } 
#gnb .menus li a:hover { color:var(--oc-blue-2); }
#gnb .btn-round { color:#fff; border-color:#fff; font-size:1em; min-width:11em; }
#gnb .btn-round:hover { background-color:var(--oc-blue-4); border-color:var(--oc-blue-4); color:#fff; }
.bg-gnb { display: none; position: fixed; left: 0; right:0; top:0; bottom:0; background:var(--oc-gray-9); opacity:0.25; z-index:199; }
@media only screen and (max-width:1000px) {
	#gnb .btn-box { height:50px; }
	#gnb .menus li a { font-size:1.25em; }
}

body.fixed #gnb { right:0; }
body.fixed .bg-gnb { display: block; }

.list-flex { width:100%; display:flex; flex-wrap:wrap; justify-content:center; }
.list-flex li { flex:1; display:flex; flex-wrap:wrap; flex-direction:column; align-items:center; word-break:keep-all; }
.list-flex.col1 li { flex:1 1 100%; }
.list-flex.col2 li { flex:1 1 50%; }
.list-flex.col3 li,
.list-flex.col6 li { flex:1 1 33.3333%; }
.list-flex.col4 li { flex:1 1 25%; }
.list-flex.col5 li { flex:1 1 20%; }
.list-flex.col7 li { flex:none; width:25%; }
.list-flex.center li { justify-content:center; }
.list-grid { width:100%; display:grid; gap:40px; }
.list-grid.col2 { grid-template-columns: repeat(2, 1fr); }
.list-grid.col3 { grid-template-columns: repeat(3, 1fr); }
.list-grid.col4 { grid-template-columns: repeat(4, 1fr); }
.list-grid.col5 { grid-template-columns: repeat(5, 1fr); }
.list-grid.col6 { grid-template-columns: repeat(3, 1fr); }
.list-banner { gap:20px; }
.list-banner li { flex:none; }
.list-banner li img { border:1px solid var(--oc-gray-3); }
.list-dotted { display:flex; flex-wrap:wrap; flex-direction:column; align-items:center; gap:0.5rem; margin-top:50px; }
.list-dotted li { display:flex; justify-content:space-between; align-items:center; width:100%; max-width:640px; position:relative; } 
.list-dotted li:after { content: ""; display: block; position: absolute; top: 60%; width: 100%; height: 1px; border-bottom:2px dotted var(--oc-gray-4); }
.list-dotted li strong,
.list-dotted li h5 { background:#fff; z-index: 1; padding:0 0.25em; word-break:keep-all; display:inline-block; }
.list-gallery li a { display:flex; width:100%; gap:2px; }
.list-gallery li a .img { text-align:center; position:relative; }
.list-gallery li a .img.before:after { content: '\e907'; font-family:var(--font-icon); color:#fff; position: absolute; top: 50%; right: -1px;
	width:2rem; height:2rem; border-radius:50%; transform:translate(50%, -50%); display:flex; align-items:center; justify-content:center;
	background: var(--oc-cyan-4); backdrop-filter: blur(3px); z-index: 2; transition: var(--transition-all); }
.list-gallery li a:hover .img.before:after { background: var(--oc-blue-4); }
.list-gallery li a .img.mosaic:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(var(--oc-gray-5-rgb), 0.5); backdrop-filter: blur(3px); z-index: 1; transition: var(--transition-all); }
.list-icons { margin-bottom:-40px; }
.list-icons li { padding:0 20px 50px; }
.list-icons li a { display:inline-block; width:100%; }
.list-icons li .ico { margin:0 auto; text-align: center; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;
	width:100%; height:auto; transition: var(--transition-all); }
.list-icons li .ico.circle { width:100%; max-width:200px; height:auto; aspect-ratio:1 / 1; border-radius:100%; border:1px solid var(--oc-gray-3); }
.list-icons li .ico i { font-size:4em; }
.list-icons li .ico svg { width:4em; height:auto; }
.list-icons li strong { padding:10px 0 5px; }
.list-style li strong { font-family: var(--font-title); font-size:1.5em; color:var(--oc-cyan-4); font-style:italic; display:inline-block; }
.list-style li dl { width:100%; text-align:center; }
.list-style li dl dt { padding-bottom: 15px; margin-bottom: 15px; position: relative;
	transition: var(--transition-all); }
.list-style li dl dt:before { content: ''; position: absolute;left: 50%; bottom: 0; width:30px; height: 2px; margin-left: -15px; background:var(--oc-cyan-4);}
.list-style li dl dd { color:var(--oc-gray-6); line-height: 1.5; }
.list-style li h4 { word-break:keep-all; display:inline-block; }
.list-style li a:hover .ico.circle { background:var(--oc-blue-0); }
.list-style li a:hover dl dt { color:var(--oc-gray-9); }
@media only screen and (max-width: 1280px) {
	.list-grid { gap:20px 15px; }
}
@media only screen and (max-width: 1000px) {
	.list-flex.col4 li,
	.list-flex.col5 li,
	.list-flex.col6 li { flex:1 1 50%; }
	.list-flex.col2 li { flex:1 1 100%; }	
	.list-flex.col7 li { width:50%; }
	.list-grid.col4 { grid-template-columns: repeat(2, 1fr); }
	.list-grid.col6 { grid-template-columns: repeat(3, 1fr); }	
	.list-dotted { margin-top:30px; }
	.list-dotted li { max-width:560px; }
	.list-icons li .ico i { font-size:3em; }
	.list-icons li .ico svg { width:3em; }
	.list-style li strong { font-size:1.25em; }
}
@media only screen and (max-width: 770px) {
	.list-grid.col3,
	.list-flex.col5 { grid-template-columns: repeat(1, 1fr); }
	.list-grid.col6 { grid-template-columns: repeat(2, 1fr); }	
}
@media only screen and (max-width: 560px) {
	.list-flex.col3 li { flex:1 1 100%; }
	.list-flex.col6 li { flex:1 1 50%; }
	.list-flex.col7 li { width:100%; }	
	.list-grid.col6 { grid-template-columns: repeat(1, 1fr); }
	.list-dotted li { width:100%; justify-content: start; align-items:flex-start; }
	.list-dotted li:after { display:none; }
	.list-dotted li strong { padding:0; line-height:1.4; width:2rem; }
	.list-dotted li h5 { font-size: 1.25em; line-height:1.4; padding:0; padding-left:0.25em; width:calc(100% - 2rem); }
	.list-icons { margin-bottom:-20px; }
	.list-icons li { padding:0 10px 25px; }
	.list-icons li .ico.circle { max-width:120px; }
	.list-icons li .ico i { font-size:2em; }
	.list-icons li .ico svg { width:2em; }
}
.flexbox { display:flex; flex-direction:column; margin:-10px; }
.flexbox > li { background:#fff; margin:10px; }
.flexbox.reverse > li { display:flex; flex-direction:row-reverse; align-items:center; }
.flexbox.reverse > li:nth-child(odd) { flex-direction:row; }
.flexbox.reverse > li > div,
.flexbox.reverse > li > article { width:50%; }
.flexbox > li > article { padding:30px; }
.flexbox > li .img { padding:30px 30px 0 30px; text-align:center; position:relative; }
.flexbox.reverse > li .img { padding:0; }
.flexbox > li strong { font-family: var(--font-title); font-size:1.5em; color:var(--oc-cyan-4); font-style:italic; display: block; padding:0 0 5px; }
.flexbox > li h4 { padding-bottom: 15px; margin-bottom: 15px; position: relative; word-break:keep-all; }
.flexbox > li h4:before { content: ''; position: absolute; left:0; bottom: 0; width:30px; height:2px; background:var(--oc-cyan-4); }
.flexbox > li .txt { color:var(--oc-gray-6); line-height: 1.5; word-break:keep-all; }
.check > li { font-size:1.1em; margin-left: 1em; margin-bottom:0.25em; }
.check > li:before { content: '\2714'; color:var(--oc-gray-5); margin-left: -1em; padding-right: 5px; }
@media only screen and (max-width: 1000px) {
	.flexbox > li,
	.flexbox.reverse > li,	
	.flexbox.reverse > li:nth-child(odd) { display:block; }
	.flexbox > li { padding:20px; }
	.flexbox > li .img { max-width:100% !important; padding:0 !important; }
	.flexbox > li .img img { width:auto; }
	.flexbox > li > div,
	.flexbox > li > article,
	.flexbox.reverse > li > div,
	.flexbox.reverse > li > article { width:100%; }
	.flexbox > li article { margin-top:20px; }
	.flexbox > li > article { padding:0 !important; }
	.flexbox > li strong { font-size:1.25em; }
	.flexbox > li h4 { padding-bottom: 10px; margin-bottom: 10px; }
	.check > li { font-size:1em; }
}

.list-slick .slick-list { width:calc(100% - 140px); margin: 0 auto !important; }
.list-slick .slick-slide img { border:1px solid var(--oc-gray-3); border-radius:5px; overflow:hidden; }
.list-slick .slick-slide div:nth-child(1) { margin-bottom: 10px; }
.list-slick .slick-slide div div { display:flex !important; justify-content:center; }
.list-slick { position: relative; }
.list-slick > .slick-arrow { top: 20px; position: absolute; display: inline-block; vertical-align: middle; z-index: 50;
	border: none; text-indent: -999em; cursor: pointer; top: 50%; transform: translateY(-50%); }
.list-slick > .slick-prev { width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; background:var(--oc-cyan-2); border-radius:50%; left: 0; }
.list-slick > .slick-prev:before { content: '\e93b'; font-family:xeicon; color:#fff; font-size:1.5rem; font-weight:100; text-indent:0; }
.list-slick > .slick-next {	width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; background:var(--oc-cyan-2); border-radius:50%; right: 0; }
.list-slick > .slick-next:before { content: '\e93e'; font-family:xeicon; color:#fff; font-size:1.5rem; font-weight:100; text-indent:0; }
@media only screen and (max-width: 1000px) {
	.list-slick .slick-slide div div { padding:0 5px; }
}
@media only screen and (max-width: 560px) {
	.list-slick .slick-list { width:calc(100% - 100px); }
	.list-slick > .slick-prev,
	.list-slick > .slick-next { width:40px; height:40px; }
}


.process ul:after { display: block; content: ''; clear: both; }
.process ul li { display: inline-block; vertical-align: top; }
.process ul li + li { padding-left: 45px; position: relative; }
.process ul li + li:before { content: ''; position: absolute; left: 14px; top:70px; background: url(../img/section1_arr.png) no-repeat 0 0; width:19px; height: 20px; }
.process ul li strong { display: block;  font-size:18px; margin:10px 0 3px; }
.process ul li span { display: block; font-size:16px; line-height: 22px; }
.step-box { text-align:center; display: flex; align-items: center; justify-content:center; margin:0 -10px; }
.step-box .article { margin:0 10px; position: relative; }
.step-box.col4 .article { width:calc(25% - 20px); }
.step-box.col5 .article { width:calc(20% - 20px); }
.step-box .article + .article:before { content: '\e90b'; font-family:xeicon; position: absolute; left: 0; top:50%;
	width:48px; height: 48px; margin: -24px 0 0 -34px; background:#fff; border-radius:50%; line-height:48px; font-size:1.5rem; font-weight:100; }
.step-box .article > div { flex: 1; display: flex; flex-direction:column; align-items: center; justify-content:center;
	width:100%; aspect-ratio:1 / 1; border-radius:100%; background:var(--oc-violet-5); }
.step-box .article:nth-child(2) > div { background: var(--oc-indigo-5); }
.step-box .article:nth-child(3) > div { background: var(--oc-blue-5); }
.step-box .article:nth-child(4) > div { background: var(--oc-cyan-5); }
.step-box .article:nth-child(5) > div { background: var(--oc-teal-5); }
.step-box .article strong { display: block; font-family:var(--font-title); font-size:1.5em; color: #fff; font-style: italic; line-height: 1; margin:0; }
.step-box .article .img { margin:10px 0; }
.step-box .article h6 { color: #fff; margin:0.5rem 0; }
.step-box .article p { font-size:16px; line-height: 1.4; color:#fff; font-weight:300; }
.step-box .article p b { color:#fff; }
@media only screen and (max-width: 1600px) {
	.step-box { margin:0 -5px; }
	.step-box .article { margin:0 5px; }
	.step-box.col4 .article { width:calc(25% - 10px); }
	.step-box.col5 .article { width:calc(20% - 10px); }
	.step-box .article + .article:before { width:36px; height: 36px; line-height:34px; font-size:1.25rem; margin: -18px 0 0 -22.5px; }
	.step-box .article strong { font-size:1.25rem; }
	.step-box .article .img { margin:5px 0; }
	.step-box .article p { font-size:14px; }
}
@media only screen and (max-width: 1000px) {
	.step-box { margin:-5px 0; flex-direction: column; align-items: center; }
	.step-box .article { margin:5px 0; width:100% !important; max-width:200px; }
	.step-box .article + .article:before { content: '\e90a'; left:50%; top:-5px; margin:-15.5px 0 0 -18px; }
}

.section { padding: 100px 0; }
.section.subhead { height:300px; padding-bottom:50px; display:flex; align-items:center; background:var(--oc-cyan-0) no-repeat right 50% / contain; }
.section.subhead h2 { color:var(--oc-gray-9); }
.section h2 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.03em; word-break:keep-all; font-size:3em; }
.section h3 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.03em; word-break:keep-all; font-size:2.5em; text-align: center; margin-bottom: 2rem; color:var(--oc-cyan-4); }
.section h4 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.03em; word-break:keep-all; font-size:2em; }
.section h5,
.list-style li dl dt { font-family: var(--font-title); font-weight: 500; letter-spacing: -0.03em; word-break:keep-all; font-size:1.75em; }
.section h6 { font-family: var(--font-title); font-weight: 500; letter-spacing: -0.03em; word-break:keep-all; font-size:1.5em; }
.section.main h3 { margin-bottom: 1rem; text-transform: uppercase; }
.section h2 + .desc { font-size:1.75em; line-height: 1.5; letter-spacing: -0.01em; word-break:keep-all; }
.section h3 + .desc { text-align: center; font-size:1.75em; line-height: 1.5; letter-spacing: -0.01em; margin-bottom: 2em; word-break:keep-all; }
.section mark { color:var(--oc-gray-9); background: linear-gradient(120deg, rgba(var(--oc-cyan-4-rgb),0.5) 0%, rgba(var(--oc-blue-4-rgb),0.5) 100%); background-repeat: no-repeat; background-size: 100% 30%; background-position: 0 90%; padding: 0 0.1em; }
.section .btns { margin:3rem auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:1em; }
@media only screen and (max-width: 1280px) {
	.section.subhead { height:240px; background:var(--oc-cyan-0) no-repeat left 50% / cover; }
}
@media only screen and (max-width: 1000px) {
	.section { padding: 80px 0; }
	.section h2 { font-size:2.25em; }
	.section h3 { font-size:2em; }
	.section h4 { font-size:1.75em; }
	.section h5,
	.list-style li dl dt { font-size:1.5em; }
	.section h6 { font-size:1.25em; }
	.section h2 + .desc,
	.section h3 + .desc { font-size:1.25em; }
	.section.subhead { padding-bottom:40px; }
	.section .btns { margin:2rem auto 0; }
}

.section#intro { /*position:absolute; left: 0; right:0; top:0; bottom:0;*/ position:relative; width:100%; height:100vh; background-size:cover; overflow:hidden; z-index:0; }
.section#intro:before { content:''; position:absolute; top: 0; left: 0; right:0; bottom:0; background: linear-gradient(to bottom, rgba(255,255,255,0.6) 20%, rgba(var(--oc-cyan-1-rgb),0.5) 75%, rgba(var(--oc-blue-2-rgb),0.5) 95% ); z-index:2; backdrop-filter: blur(2px); }
.section#intro .inner { position: absolute; left: 0; right:0; top:50%; text-align: center; transform:translateY(-50%); z-index:3; }
.section#intro h2 { margin-bottom:2.5rem; font-size:5em; }
.section#intro h3 { color:var(--oc-gray-8); margin-bottom:2.5rem; }
.section#intro h3 img { width:90%; max-width:240px; }
.section#intro .desc a { font-family: var(--font-title); font-size:1.25em; font-weight: 900; color:var(--oc-cyan-4); text-transform: uppercase; word-break:keep-all; transition: var(--transition-all); }
.section#intro .desc a:hover { color:var(--oc-blue-4); }
.section#intro .scroll { position: absolute; left: 50%; bottom:30px; margin-left:-16px; z-index:4; -webkit-animation: mover 1s infinite alternate; animation: mover 1s infinite alternate; }
.section#intro .back_vid { object-fit: cover; width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index:1; }
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@media only screen and (max-width: 1000px) {
	.section#intro { height:85dvh; min-height:600px; }
	.section#intro h2 { font-size:4em; }
	.section#intro h3 { margin-bottom:1rem; }
}

.section#about,
.section#process { background: var(--oc-gray-1); }
/*
.section#benefit .list-dotted li strong,
.section#benefit .list-dotted li h5 { background-color: var(--oc-cyan-0); }
*/
.section#gallery { background: var(--oc-gray-8); color:#fff; }
.section#contact { background: var(--oc-cyan-0); }
/*
.section#contact .form dl dt { font-size:18px; letter-spacing: -0.02em; margin-bottom:0.5em;  }
.section#contact .form dl dd { margin-bottom:1.25em; }
.section#contact .inp { width:100%; height: 48px; border: 1px solid var(--oc-gray-4); padding-left: 10px; background:#fff; }
.section#contact textarea { width:100%; border: 1px solid var(--oc-gray-4); padding:5px 10px;}
@media only screen and (max-width: 1000px) {
	.section#contact .form dl dt { font-size:14px; }
	.section#contact .inp { height: 40px; }
}
*/
.section#media { padding-bottom:0; text-align: center; }
.section#media .list:after { display: block; content: ''; clear: both; }
.section#media .list li { float:left; position: relative; }
.section#media .list li + li{ margin-left: 17px; }
.section#media .list li .txt { position: absolute; left: 0; right:0; top:50%; margin-top:-15px; text-align: center; font-size:26px; line-height:36px; font-weight: 600; color: #fff; }

.section .count { margin-top:50px; }
.section .count ul li { display: inline-block;vertical-align:top; }
.section .count ul li + li { padding-left:30px; margin-left:30px; border-left:1px solid var(--oc-gray-3); }
.section .count .num { font-size:48px; line-height: 1; color:var(--oc-cyan-4); font-weight: 600; font-family: var(--font-title);}
.section .count p { font-size:24px; padding-top:0.5em; }
@media only screen and (max-width: 1000px) {
	.section .count ul li + li { padding-left:12px; margin-left:12px; }
	.section .count .num { font-size:24px; }
	.section .count p { font-size:14px; }
}

.monitor { text-align: center; display: block; width:444px; height: 851px; position: relative; margin:0 auto; }
.monitor .hp { display: block; width:444px; height: 851px; background: url(../img/section4_hp.png) no-repeat 0 0; padding-top:72px; position: relative; z-index:10; }
.monitor .h1 { position: absolute; left: -317px; top:123px; }
.monitor .h2 { position: absolute; left: -267px; top:107px; }
.monitor .h3 { position: absolute; left: -218px; top:89px; }
.monitor .h4 { position: absolute; left: -167px; top:72px; }
.monitor .h8 { position: absolute; left: 447px; top:123px; width:347px; height: 621px; z-index:2; }
.monitor .h7 { position: absolute; left: 377px; top:107px; width:364px; height: 653px; z-index:3; }
.monitor .h6 { position: absolute; left: 307px; top:89px; width:383px; height: 687px; z-index:4;  }
.monitor .h5 { position: absolute; left:227px; top:72px; width:402px; height: 722px;z-index:5; }

.sns { text-align: center; padding: 50px 0; background:var(--oc-gray-7); position: relative; }
.sns:before { content: ''; position: absolute; left: 50%; top:0; /*background: url(../img/bu_select.png) no-repeat 0 0; width:39px; height: 19px;*/
	width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top:20px solid #fff; margin-left: -20px; }
.sns ul { width:100%; margin: 0 auto; display:flex; flex-wrap:wrap; justify-content:center; }
.sns ul:after { display: block; content: ''; clear: both; }
.sns ul li { flex:1; text-align: center; }
.sns ul li a { display: block; padding:0 10px; }
.sns ul li a span { display: block; font-size:1.1em; color: #fff; padding-top:1rem; }
.sns .list-icons li { padding: 0; }
.sns .list-icons li .ico.circle svg,
.sns .list-icons li .ico.circle i { color:#fff; }
.sns .list-icons li a:hover .ico.circle { border-color:var(--oc-gray-7); }
.sns .list-icons li .youtube:hover .ico.circle			{ background:#FF0033; }
.sns .list-icons li .youtube:hover .ico.circle svg,
.sns .list-icons li .youtube:hover .ico.circle i		{ color:#fff; }
.sns .list-icons li .naverblog:hover .ico.circle		{ background:#00c73c; }
.sns .list-icons li .naverblog:hover .ico.circle svg,
.sns .list-icons li .naverblog:hover .ico.circle i		{ color:#fff; }
.sns .list-icons li .kakaochannel:hover .ico.circle		{ background:#fee500; }
.sns .list-icons li .kakaochannel:hover .ico.circle svg,
.sns .list-icons li .kakaochannel:hover .ico.circle i	{ color:#191919; }
.sns .list-icons li .call:hover .ico.circle			{ background:linear-gradient(to bottom, #54ef6e 10%, #29bf40 90%); }
.sns .list-icons li .call:hover .ico.circle svg,
.sns .list-icons li .call:hover .ico.circle i			{ color:#fff; }
.sns .list-icons li .message:hover .ico.circle			{ background:linear-gradient(to bottom, #00afff 10%, #0068f0 90%); }
.sns .list-icons li .message:hover .ico.circle svg,
.sns .list-icons li .message:hover .ico.circle i		{ color:#fff; }
.sns .list-icons li .kakaotalk:hover .ico.circle		{ background:#fee500; }
.sns .list-icons li .kakaotalk:hover .ico.circle svg,
.sns .list-icons li .kakaotalk:hover .ico.circle i		{ color:#191919;}
.sns .list-icons li .navertalktalk:hover .ico.circle	{ background:#00c73c; }
.sns .list-icons li .navertalktalk:hover .ico.circle svg,
.sns .list-icons li .navertalktalk:hover .ico.circle i	{ color:#fff;}
@media only screen and (max-width: 1000px) {
	.sns ul li a span { font-size:14px; }
}
@media only screen and (max-width: 770px) {
	.sns { padding: 30px 0; }
	.sns ul li { flex:none; width:25%; }
	.sns ul li a span { display:none; }
	.sns ul li a { padding:10px; }
	.sns .list-icons li .ico.circle { border-color:var(--oc-gray-7); }
	.sns .list-icons li .youtube .ico.circle			{ background:#FF0033; }
	.sns .list-icons li .youtube .ico.circle svg,
	.sns .list-icons li .youtube .ico.circle i		{ color:#fff; }
	.sns .list-icons li .naverblog .ico.circle		{ background:#00c73c; }
	.sns .list-icons li .naverblog .ico.circle svg,
	.sns .list-icons li .naverblog .ico.circle i		{ color:#fff; }
	.sns .list-icons li .kakaochannel .ico.circle		{ background:#fee500; }
	.sns .list-icons li .kakaochannel .ico.circle svg,
	.sns .list-icons li .kakaochannel .ico.circle i	{ color:#191919; }
	.sns .list-icons li .call .ico.circle			{ background:linear-gradient(to bottom, #54ef6e 10%, #29bf40 90%); }
	.sns .list-icons li .call .ico.circle svg,
	.sns .list-icons li .call .ico.circle i			{ color:#fff; }
	.sns .list-icons li .message .ico.circle			{ background:linear-gradient(to bottom, #00afff 10%, #0068f0 90%); }
	.sns .list-icons li .message .ico.circle svg,
	.sns .list-icons li .message .ico.circle i		{ color:#fff; }
	.sns .list-icons li .kakaotalk .ico.circle		{ background:#fee500; }
	.sns .list-icons li .kakaotalk .ico.circle svg,
	.sns .list-icons li .kakaotalk .ico.circle i		{ color:#191919;}
	.sns .list-icons li .navertalktalk .ico.circle	{ background:#00c73c; }
	.sns .list-icons li .navertalktalk .ico.circle svg,
	.sns .list-icons li .navertalktalk .ico.circle i	{ color:#fff;}

}

.download .img { text-align:center; }
.download .img img { width:100%; }
.download .img.mo { display:none; }
@media only screen and (max-width:1000px) {
	.download .img.pc { display:none; }
	.download .img.mo { display:block; }
}

.btn-quick { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; }
.btn-quick ul li + li { margin-top:10px; }
.btn-quick .btn-icon { display: flex; justify-content:center; align-items:center; height: 60px; width: 60px; font-size:24px; color: #fff; backdrop-filter: blur(3px); border-radius: 50%; transition: var(--transition-all); }
.btn-quick .btn-icon.naver	{ background-color:#00c73c; color:#fff; }
.btn-quick .btn-icon.kakao	{ background-color:#fee500; color:#191919; }
.btn-quick .btn-icon.call	{ background:linear-gradient(to bottom, #54ef6e 10%, #29bf40 90%); color:#fff; }
.btn-quick .btn-icon.contact{ background-color:var(--oc-cyan-4); color:#fff; }
.btn-quick .go-top { opacity:0; transition: var(--transition-all); }
.btn-quick .go-top.scrolled { opacity:1; }
.btn-quick .go-top .btn-top { background:rgba(var(--oc-gray-9-rgb),0.5); cursor:default;  }
.btn-quick .go-top .btn-top:hover,
.btn-quick .btn-icon.contact:hover { background-color:var(--oc-blue-4); }
.btn-quick .go-top.scrolled .btn-top { cursor:pointer; }
@media only screen and (max-width: 1000px) {
	.btn-quick { bottom:15px; right:15px; }
	.btn-quick .btn-icon { height:40px; width:40px; }
}

#footer { padding:30px 0; background: var(--oc-gray-8); }
#footer .inner { padding: 0 200px 0 200px; position: relative; }
#footer .lnb { margin-bottom: 10px; }
#footer .lnb a { margin-right:10px; font-size:14px; color:var(--oc-gray-0); }
#footer .addr { font-size:14px; color:var(--oc-gray-5); line-height: 1.4; word-break:keep-all; }
#footer .addr a { color:var(--oc-gray-0); }
#footer .logo { position: absolute;left:15px; top:0; }
#footer .logo img { max-height:36px; }
#footer .select { position: absolute; right:15px; top:0; font-size:14px; }
@media only screen and (max-width:1000px) {
	#footer { text-align:center; }
	#footer .inner { padding: 0 15px; }
	#footer .logo { position: static; margin-bottom: 15px; }
	#footer .logo img { height: 24px; }
	#footer .select { position: static;  height: 40px; font-size:12px;  }
	#footer .lnb a { font-size:11px; }
	#footer .addr { font-size:11px; margin-bottom: 15px;  }
}

#bo_gall #gall_ul.list-gallery { margin:10px 0 0; }
#bo_gall #gall_ul.list-gallery .gall_box { margin:0 0 10px; }
#bo_gall #gall_ul.list-gallery .gall_img a { display:flex !important; }
#bo_gall #gall_ul.list-gallery .gall_img a figure { flex:1 1 50%; }
#bo_gall #gall_ul.list-gallery .chk_box { z-index:3; }
#bo_gall #gall_ul.list-gallery .chk_box input[type="checkbox"] + label { padding:0; }
#bo_v_title .bo_v_tit { font-size:1em; }
#bo_v_share .btn { width:6em; }
#bo_w .bo_w_flie.file_check { display:flex; align-items:center; }
#bo_w .bo_w_flie.file_check .file_input { width:calc(100% - 7.5em); position:relative; }
#bo_w .bo_w_flie.file_check .file_del { color: var(--oc-gray-7); }
#bo_w .bo_w_flie.file_check .file_input ~ .file_checkbox { margin-left:auto; display:inline-flex; align-items:center; gap:0.25em; height:24px; }
.more_opt li { width: 6em; }
@media only screen and (max-width: 1000px) {
	#bo_w .bo_w_flie.file_check { flex-direction:column; align-items:start; }
	#bo_w .bo_w_flie.file_check .file_input { width:100%; display:flex; flex-direction:column; }
	#bo_w .bo_w_flie.file_check .file_wr { height:auto; display:flex; align-items:center; }
	#bo_w .bo_w_flie.file_check .file_wr .frm_file { width:100%; }
	#bo_w .bo_w_flie.file_check .file_del { position:static; font-size:1em; }
	#bo_w .bo_w_flie.file_check .file_input ~ .file_checkbox { margin-left:0; margin-bottom:0.25em; }
}