@charset "utf-8";
/* -----------------------------------------------
	* 스타일 초기화
--------------------------------------------------
	- 최초 작성일 :2021.08.15
	- 최초 작성자 :아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/

/****************************************
	Import
****************************************/
@font-face {
    font-family: 'HSBombaram';
    src: url('/font/HSBombaram40Bold.woff2') format('woff2'),
        url('/font/HSBombaram40Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HSBombaram';
    src: url('/font/HSBombaram40Regular.woff2') format('woff2'),
        url('/font/HSBombaram40Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@import url(./swiper.css);
@font-face {
	font-family:'icon';
		src:	url('./fonts/icomoon.eot?y5isk6');
		src:	url('./fonts/icomoon.eot?y5isk6#iefix') format('embedded-opentype'),
				url('./fonts/icomoon.ttf?y5isk6') format('truetype'),
				url('./fonts/icomoon.woff?y5isk6') format('woff'),
				url('./fonts/icomoon.svg?y5isk6#icomoon') format('svg');
	font-weight:normal;
	font-style:normal;
}
.sound_only { display:none; }


/****************************************
	소스코드 초기화
****************************************/

html {overflow-y:auto}
body {margin:0;padding:0;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ul, li {margin:0;padding:0;list-style:none}
legend {display:none;}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;}
button {cursor:pointer}
textarea, select {font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;}
a:link, a:visited {text-decoration:none}
a:hover, a:focus, a:active {text-decoration:none}

ul,li { margin:0; padding:0; }
i,sup,em { font-style:normal; }

label { cursor:pointer; }

img { max-width:100%; vertical-align:middle; }
table { width:100%; }


/****************************************
	기본 레이아웃 정의
****************************************/

.fix-layout {margin:0 auto; padding:0; box-sizing:border-box;}
.fix-layout .fix-layout { padding:0; margin:0; }

#body {height:100vh; box-sizing:border-box;}
#body > .fix-layout {display:table; width:100%; height:100%; table-layout:fixed;}
#body > .fix-layout > .mid-layout {display:table-cell; vertical-align:middle; padding:80px;position: relative;}

@media all and (max-width:520px) {
	#body > .fix-layout > .mid-layout {padding-left:10px !important; padding-right:10px !important;}
}
.container { max-height: calc(80vh - 80px); position: relative; }
.sub_container {padding: 40px;background:linear-gradient(180deg, rgba(255,255,255,.8) 30%, transparent);overflow-x: hidden;overflow-y:auto;position: relative;/* border: 1px solid rgb(36,97,82); */border-bottom: 0;height: 100%;max-height: calc(80vh - 80px);border-radius: 10px;box-shadow: 0px 0px 15px rgba(0,0,0,.2); backdrop-filter: blur(5px);}
.cam_bottom {position: absolute;bottom: -120px;width: 100%;left: 0;z-index: 0;}
.cam_bottom::before {
    display: block;
    content: "";
    width: 294px;
    height: 359px;
    background: url(../img/cam_03.png) no-repeat;
    position: absolute;
    bottom: 0;
    left: -5rem;
    }
.cam_bottom::after {
        display: block;
        content: "";
        width: 294px;
        height: 359px;
        background: url(../img/cam_04.png) no-repeat;
        position: absolute;
        bottom: 0;
        right: -5rem;
        }
.line_box { width:100%; height: 100vh; position: absolute; z-index: 0; display: flex; flex-wrap: wrap;}
.line_box .line { width: 14.2%; border-right: 1px solid rgba(255,255,255,.4); }
.line_box .line:last-child { border-right: 0; }

.fo-f { font-family: 'HSBombaram'; }

.f-s10 { font-size: 10px; }
.f-s11 { font-size: 11px; }
.f-s12 { font-size: 12px; }
.f-s13 { font-size: 13px; }
.f-s14 { font-size: 14px; }
.f-s15 { font-size: 15px; }
.f-s16 { font-size: 16px; }
.f-s17 { font-size: 17px; }
.f-s18 { font-size: 18px; }
.f-s19 { font-size: 19px; }
.f-s20 { font-size: 20px; }
.f-s21 { font-size: 21px; }
.f-s22 { font-size: 22px; }
.f-s23 { font-size: 23px; }
.f-s24 { font-size: 24px; }
.f-s25 { font-size: 25px; }
.f-s26 { font-size: 26px; }
.f-s27 { font-size: 27px; }
.f-s28 { font-size: 28px; }
.f-s29 { font-size: 28px; }
.f-s30 { font-size: 30px; }
.f-s40 { font-size: 40px; }
.f-s45 { font-size: 45px; }
.f-s50 { font-size: 50px; }

/****************************************
	애니메이션 효과 지정 / 초기화
****************************************/

* {transition:all .3s; -webkit-transition:all .3s; -ms-transition:all .3s;}

.trans,
.trans *,
.trans *:after,
.trans *:before { -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; }

.none-trans,
.none-trans *,
.none-trans *:after,
.none-trans *:before { -webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none; }


/****************************************
	텍스트 코드 정렬
****************************************/

.txt-left { text-align:left; }
.txt-center { text-align:center; }
.txt-right { text-align:right; }


/****************************************
	스크롤 스타일 정의
****************************************/

/* scrollbar :ie except */
*::-webkit-scrollbar-track {}
*::-webkit-scrollbar {}
*::-webkit-scrollbar-thumb {border:none;}


/**********************
	폼 스타일
**********************/

.theme-form { width:100%; }


/**************************************************************
	Web Size Viewer Control - 반응형 코딩
	-
	모바일 기준 :width 1024px
***************************************************************/

@media all and (min-width:1025px)  {
	.only-pc {}
	.only-ta {display:none !important;}
	.only-mo {display:none !important;}

	.not-pc {display:none !important;}
	.not-ta {}
	.not-mo {}
}

@media all and (max-width:1024px) and (min-width:1025px)  {
	.only-pc {display:none !important;}
	.only-ta {}
	.only-mo {display:none !important;}

	.not-pc {}
	.not-ta {display:none !important;}
	.not-mo {}
}
@media all and (max-width:1025px)  {
    #body { height: 100vh; }
    #body > .fix-layout > .mid-layout { overflow-x: hidden; }
    .sub_container { max-height: auto; }

	.only-pc {display:none !important;}
	.only-ta {display:none !important;}
	.only-mo {}

	.not-pc {}
	.not-ta {}
	.not-mo {display:none !important;}
    
}