@charset "utf-8";
@font-face { font-family: 'PretendardBk'; font-weight: 900; font-display: swap; src: local('Pretendard Black'), url('./fonts/Pretendard-Black.woff2') format('woff2'), url('./fonts/Pretendard-Black.woff') format('woff');}
@font-face { font-family: 'PretendardEB'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url('./fonts/Pretendard-ExtraBold.woff2') format('woff2'), url('./fonts/Pretendard-ExtraBold.woff') format('woff');}
@font-face { font-family: 'PretendardB'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url('./fonts/Pretendard-Bold.woff2') format('woff2'), url('./fonts/Pretendard-Bold.woff') format('woff');}
@font-face { font-family: 'PretendardSB'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url('./fonts/Pretendard-SemiBold.woff2') format('woff2'), url('./fonts/Pretendard-SemiBold.woff') format('woff');}
@font-face { font-family: 'PretendardM'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url('./fonts/Pretendard-Medium.woff2') format('woff2'), url('./fonts/Pretendard-Medium.woff') format('woff');}
@font-face { font-family: 'PretendardR'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url('./fonts/Pretendard-Regular.woff2') format('woff2'), url('./fonts/Pretendard-Regular.woff') format('woff');}
@font-face { font-family: 'PretendardL'; font-weight: 300; font-display: swap; src: local('Pretendard Light'), url('./fonts/Pretendard-Light.woff2') format('woff2'), url('./fonts/Pretendard-Light.woff') format('woff');}
@font-face { font-family: 'PretendardEL'; font-weight: 200; font-display: swap; src: local('Pretendard ExtraLight'), url('./fonts/Pretendard-ExtraLight.woff2') format('woff2'), url('./fonts/Pretendard-ExtraLight.woff') format('woff');}
@font-face { font-family: 'PretendardT'; font-weight: 100; font-display: swap; src: local('Pretendard Thin'), url('./fonts/Pretendard-Thin.woff2') format('woff2'), url('./fonts/Pretendard-Thin.woff') format('woff');}
@font-face { font-family: 'PretendardJP'; font-weight: 400; font-display: swap; src: local('Pretendard JP Regular'), url('./fonts/PretendardJP-Regular.woff2') format('woff2'), url('./fonts/PretendardJP-Regular.woff') format('woff');}

@font-face {font-family: 'NotoR';src: url("./fonts/NotoSans-Regular.woff") format('woff');font-display: swap;}
@font-face {font-family: 'SinbiR';src: url("./fonts/SSShinb7Regular.woff") format('woff');font-display: swap;}
@font-face {font-family: 'Goryeong';src: url("./fonts/GoryeongStrawberry.woff2") format('woff2');font-display: swap;}
@font-face {font-family: 'SBAggroB';src: url("./fonts/SBAggroB.woff") format('woff');font-display: swap;}
@font-face {font-family: 'SBAggroM';src: url("./fonts/SBAggroM.woff") format('woff');font-display: swap;}
@font-face {font-family: 'SBAggroL';src: url("./fonts/SBAggroL.woff") format('woff');font-display: swap;}
@font-face {font-family: 'GmarketM';src: url("./fonts/GmarketSansMedium.woff") format('woff');font-display: swap;}


/*=========================================================================================================
* common
=========================================================================================================*/
*, *:after, *:before { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; -webkit-tap-highlight-color:transparent;}
*:focus { outline: none; }
html, body {margin: 0; padding: 0; width: 100%; height: 100%; font-size: 100%; -webkit-text-size-adjust: none;}
body { color: #fff; font-family: 'PretendardR',"맑은 고딕", "Malgun Gothic", Arial, sans-serif; font-weight: 100%;}
ul, li, ol {list-style: none; }
fieldset{border: none;}
caption, legend{visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
h1, h2, h3, h4, h5 { margin: 0; padding: 0; font-weight: normal;}
a { text-decoration: none; outline:none; select-dummy: expression(this.hideFocus=true);  }
a:link, a:active, a:visited { color: #fff; text-decoration: none; }
img { border: 0; vertical-align:top;}
table{border-collapse: collapse;}
em,address{font-style: normal;}
#skipnavi, .hidden{ width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }
a{ text-decoration:none; outline: none;  -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color:transparent; select-dummy: expression(this.hideFocus=true);  }
a:visited,a:hover,a:active,a:focus{ background: none; -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent; }
input, select, textarea {font-family: 'GmarketB'}

.wrap{overflow: hidden; height: 100%;}
.wrap .container{ width: 1280px; height: 720px; position: relative; background-repeat: no-repeat; background-position: center; background-size: auto; transition: background .4s;}
.wrap .container[data-idx="0"]{background-image: url("../images/common/main_bg1.jpg");}
.wrap .container[data-idx="1"]{background-image: url("../images/common/main_bg4.jpg");}
.wrap .container[data-idx="2"]{background-image: url("../images/common/main_bg3.jpg");}
.wrap .container[data-idx="3"]{background-image: url("../images/common/main_bg2.jpg");}
.tit{ display: inline-block; width: 130px; height: 46px; border-radius: 100%; border: 1px solid #fff; font-family: 'GmarketM'; font-size: 17px; letter-spacing: -0.05em; position: absolute; right: 36px; top: 30px; text-align: center; line-height: 46px; font-weight: bold;}
.linkBox{position: absolute; left: 0; top: 0; padding: 145px 40px 0; font-size: 0;}
.linkBox li{ display: inline-block; width: 280px; height: 430px; margin: 0 10px; cursor: pointer; border-radius: 30px; overflow: hidden; text-align: center; position: relative;}
.linkBox li span{display: inline-block;}
.linkBox li .linktit{position: relative;}
.linkBox li .bg{display: inline-block; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: width .2s, height .2s;}
.linkBox li .bg img{width: 100%; height: 100%;}
.linkBox li a{display: inline-block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.linkBox li .rb{position: absolute; right: 22px; bottom: 22px;}
.linkBox li .rb .nemobg{display: inline-block; width: 54px; height: 54px; background-color: #7d2bd1; border-radius: 3px; position: relative; transition: background .2s;}
.linkBox li .rb .nemobg:before{content: ''; width: 100%; height: 100%; background-color: #7d2bd1; border-radius: 3px; position: absolute; left: 0; top: 0; transform: rotateZ(30deg); transition: background .2s;}
.linkBox li .rb .nemobg:after{content: ''; width: 100%; height: 100%; background-color: #7d2bd1; border-radius: 3px; position: absolute; left: 0; top: 0; transform: rotateZ(60deg); transition: background .2s;}
.linkBox li .rb .name{ font-family: 'SBAggroB'; font-size: 20px; color: #fff; position: absolute; left: 0; top: 0; width: 100%; text-align: center; white-space: nowrap; line-height: 58px; margin-left: -2px;}
.linkBox li.over .bg{width: 300px; height: 450px;}
.linkBox li.over .nemobg{background-color: #00c9af;}
.linkBox li.over .nemobg:before{background-color: #00c9af;}
.linkBox li.over .nemobg:after{background-color: #00c9af;}

.linkBox li .lessonName{font-family: 'PretendardEB'; font-size: 18px; position: absolute; left: 50%; top: 132px; transform: translateX(-50%); letter-spacing: -0.025em; white-space: nowrap;}
.linkBox li .lessonName.sh{text-shadow: 0px 0px 27px rgba(25, 35, 0, 0.4);}